220717

• 기본적인 마크업 완료
• emotion style 적용 시작
• VAC pattern 적용
• <TodoItem/> 컴포넌트 내 mouseon 상태 관리
• <MainPage/> 컴포넌트 내 visibleTodoCreate 상태 관리
• 다음주에 해볼 것 : 메모리 내 데이터 관리 -> api 연결 -> 리코일 적용 예정

스타일링?

스타일드 컴포넌트 사용

VAC패턴에 대해 완전히 나눠보았다.

src
 ┣ api
 ┃ ┣ axios
 ┃ ┃ ┗ AxiosTodoService.ts
 ┃ ┣ types
 ┃ ┃ ┗ todoItem.d.ts
 ┃ ┣ TodoService.ts
 ┃ ┗ index.ts
 ┣ components
 ┃ ┣ todocreatecontainer
 ┃ ┃ ┣ TodoCreate.tsx
 ┃ ┃ ┗ TodoCreateView.tsx
 ┃ ┣ todoheadercontainer
 ┃ ┃ ┣ TodoHeader.tsx
 ┃ ┃ ┗ TodoHeaderView.tsx
 ┃ ┣ todoitemcontainer
 ┃ ┃ ┣ TodoItem.tsx
 ┃ ┃ ┗ TodoItemView.tsx
 ┃ ┣ todolistcontainer
 ┃ ┃ ┣ TodoList.tsx
 ┃ ┃ ┗ TodoListView.tsx
 ┃ ┗ viewcontainer
 ┃ ┃ ┣ Card.tsx
 ┃ ┃ ┣ CheckBtn.tsx
 ┃ ┃ ┣ IconBtn.tsx
 ┃ ┃ ┗ Text.tsx
 ┣ page
 ┃ ┗ Mainpage.tsx
 ┣ App.tsx
 ┗ index.tsx

나눈 기준 ?

먼저, 레이아웃으로 크게 폴더를 나눠줬고, 각 폴더 내에서 기능을 담당하는 컴포넌트와 view만 해주는 컴포넌트로 나눠주었다.

<TodoItem/> 컴포넌트 내 mouseon 상태 관리

//<TodoItem/>
type Props = {
 item: TodoItemType;
};


const TodoItem = ({ item }: Props) => {
 const [mouseOn, setMouseOn] = useState(false);
 const handleMouseEnter = () => {
   setMouseOn(true);
 };
 const handleMouseOut = () => {
   setMouseOn(false);
 };
 
return (
   <TodoItemView
     mouseOn={mouseOn}
     handleMouseEnter={handleMouseEnter}
     handleMouseOut={handleMouseOut}
   />
 );

//<TodoItemView>
type Props = {
  mouseOn: boolean;
  handleMouseEnter: () => void;
  handleMouseOut: () => void;
};

const TodoItemView = ({
  mouseOn,
  handleMouseEnter,
  handleMouseOut,
}: Props) => {
  return (
    <TodoItemContainer
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseOut}
    >
    </TodoItemContainer>
  );
};

export default TodoItemView;

<TodoItem/> 에서 mouseOn에 대한 상태를 만들어주고, handleMouseEnter, handleMouseOut에서 mouseOn에 해당하는 상태를 바꿔주는 함수를 만들고 <TodoItemView/>컴포넌트로 props로 넘겨준다.

<MainPage/> 컴포넌트 내 visibleTodoCreate 상태 관리

//<MainPage/>
const Mainpage = (props: Props) => {
  const [visibleTodoCreate, setVisibleTodoCreate] = useState(false);
  const toggleVisibleTodoCreate = () => {
    setVisibleTodoCreate(!visibleTodoCreate);
  };
  return (
    <MainpageContainer>
      <Card>
        <TodoHeader />
        <TodoList />

        <TodoBottom>
          {/* {visibleTodoCreate ? <TodoCreate /> : null} */}
          <TodoCreate />
          <AddBtn onClick={toggleVisibleTodoCreate}>+</AddBtn>
        </TodoBottom>
      </Card>
    </MainpageContainer>
  );
};

export default Mainpage;

visibleTodoCreate 의 상태를 만들어주고, 상태에따라 toggle 할 수 있는 toggleVisibleTodoCreate 함수를 만들어주었다.
이후 AddBtn에 onClick을 넣어서 클릭할 때 마다toggleVisibleTodoCreate의 상태를 바꿔주었다.
또한 조건부렌더링을 통해 visibleTodoCreate 가 true일 때만 <TodoCreate /> 를 보일 수 있게 해주었다.
지금은 작업을 위해 주석처리 후 항상 보이게 해놓았다.