2023-10-15 소북소북 | UI 마무리 단계, 혼란스러운 Type 정의

MUI Dialog 사용

• Main Page에서 주요 기능을 대부분 사용할 수 있는데 먼저 도서 검색을 수행 하고 원하는 책이 있는 경우 -> 읽기 버튼을 통해 서재에 등록 or 원하는 책이 없는 경우 -> 책 추가 버튼을 통해 직접 등록 하는 과정을 거쳐야 한다.
  • 이후에 서재에 바로 등록할지는,,, 아직 정해지지 않았다.
• 무튼 이 과정을 간단하게 버튼을 클릭하면 창을 띄워서 거기서 수행하려고 MUI Dialog를 사용했다.
• 디자인도 깔끔하고(반응형으로 창이 작아지면 fullscreen으로 띄워주는 기능도 있음) 사용법도 간단해서 좋았으나 문제가 발생하였다.

open-close 이후에 다시 open이 안되는 문제

• 컴포넌트를 나눈 뒤로  콘솔에 찍어보니 Dialog의 open prop에 들어가는 상태 값이 맨 처음에 변화하고 그 뒤로는 바뀌질 않았다.
• 그냥 자식에서 부모로 props 전달이 제대로 안되는 것이 문제였다. 부모에게서 받아온 함수의 type을 제대로 정의해줘야 하는데 그걸 못해서,,, 사용법도 틀림 ㅠ
• Dialog 뿐만 아니라 Write Page에서도 컴포넌트를 나누면서 props 주고 받고를 잘 했어야 하는데 여기서는 심지어 매개변수가 있어서 더 헤맸다. 

type PropsType = {
  handleSelectBook: (item: BookItem | null) => void;
  book: BookItem;
};

<CommonButton
	onClick={() => {
	props.handleSelectBook(props.book);
	}}
/>

• Typescript를 쓸때는 대충 쓸 생각하지 말고 명확하게 타입 정의 해주기.
• 근데 검색하면서 코드를 짜다보니 Type을 정의할 때 interface도 쓰고 type 키워드도 썼다. 차이점에 대해서 알아보고 적재적소에 맞게 썼는지 확인할 필요가 있다. 

CommonButton onClick event 타입 정의

• 버튼에 통일감을 주고 싶어서 거의 모든 버튼을 CommonButton으로 통일했다.
• 버튼이니까 onClick event를 props로 받아야 하고 또 받으려면 Type을 정의해 주어야 하는데 조금 헤맸다.

interface PropsType {
  value: string;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
}

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events/

이벤트 타입이 정리되어 있는 문서

---

내일 할일

• fe/user : 유저정보(서재) 페이지 UI
• 중복되는 UI common component로 빼기
• theme.ts : 컬러 추가, 커스텀 필요한 설정 추가하기

---

💥주저리주저리

오늘 뭔가 기세가 좋아서 UI 끝장 내려고 했는데 한 페이지가 남았당^.ㅠ 아쉽구만,,, 그래도 진도를 많이 뺐다.

내일 UI 마무리 하고 시간이 된다면 redux 셋팅도 들어가면 좋을 것 같다.

수요일날 까지 혼자 할 수 있는 부분은 최대한 많이 해두기😎