시간적 여유가 되신다면, UI에서 현재 선택된 날짜, 리스트의 상태 탭을 url의 쿼리스트링으로 관리해봐도 좋을것 같아요. url을 공유했을 때, 그 상태가 유지하기 위해 그런 방법을 쓰기도 하거든요. https://github.com/pbeshai/use-query-params 이 라이브러리를 한번 참고해보셔도 좋을것 같네요!
Container 라는 작명을 사용하신것 보니, container-presentational component 패턴을 사용해보신것 같다는 생각이 들어요. container 뿐만아니라 presentational 컴포넌트로도 분리해봐도 좋을것 같아요. 그리고 어떤 역할을 가진 컴포넌트를 container 컴포넌트로 분류하셨는지 그 기준도 궁금하네요!
안녕하세요? 과제 하느라 정말 수고 많으셨어요!
제가 코드를 보면서 개선되면 좋을것 같은 부분이나 궁금한 점들을 적어볼게요. 다만, 글로만 리뷰를 드리다보니 제 의도를 전달하는데 한계가 있을거에요. 한번 읽어보시고 이해가 안되는 부분이 있으시다면 제게 찾아와주세요! 저랑 같이 논의해 보아요 :)
필수 내용도 잘 구현하고, 추가적인 기능도 많이 넣어주셨네요! 다양한 시도 하신것 정말 멋집니다! 🙌
README에 실행 방법을 작성해주세요
https://github.com/brownrice0916/to-do-list/blob/8aa65bab0c6e881bb973fcbb0f756782318cf350/src/components/ToDoListContainer.jsx#L4 오류가 났어요. 파일 이름에 오타가 났어요. ToDoList로 바꿔야겠네요.
styled-component를 쓰셨는데, 기술의 장단점을 고민해보면 좋겠어요. 요즘은 런타임 성능 문제를 피하려고 css-in-js를 피하는 프로젝트들도 있어요. 이러한 단점을 인지해보면 좋겠어요.
상태 메시지 input 옆에 버튼이 체크아이콘이기 보다는 '제출' 이라는 텍스트면 좋겠어요. 사용자가 한번에 이해가 어려울것 같아요.
https://github.com/brownrice0916/to-do-list/blob/8aa65bab0c6e881bb973fcbb0f756782318cf350/src/hooks/useSaveStateMsg.js#L17-L17 https://github.com/brownrice0916/to-do-list/blob/8aa65bab0c6e881bb973fcbb0f756782318cf350/src/hooks/useSaveStateMsg.js#L7 이 data 상태가 배열인 이유가 있을까요? setData(docSnap.data());에서는 배열이 아닌 객체를 상태에 저장하고 있네요. 데이터가 배열이었다가 객체였다 형태가 다르다보면 일관성이 없어서 오류가 날 가능성이 높아질것 같아요.
https://github.com/brownrice0916/to-do-list/blob/8aa65bab0c6e881bb973fcbb0f756782318cf350/src/components/ProfileContainer.jsx#L65-L71 이러한 처리를 훅의 사용처에서 하는게 맞을까요? 훅 내부에서 처리되어도 되지 않을까? 하는 생각이 듭니다. 사용처에서는 굳이 이 작업을 몰라도 될것 같아요. 적절히 로직을 은닉하면 훅의 사용이 쉬워질것 같아요.
https://github.com/brownrice0916/to-do-list/blob/8aa65bab0c6e881bb973fcbb0f756782318cf350/src/components/ProfileContainer.jsx#L50-L56 이런 처리 없이 useSaveStateMsg에서 받아온 data를 컴포넌트에서 바로 사용해도 되지 않을까요? https://github.com/brownrice0916/to-do-list/blob/8aa65bab0c6e881bb973fcbb0f756782318cf350/src/components/ProfileContainer.jsx#L47 이 상태가 필요한 이유가 궁금해요.
시간적 여유가 되신다면, UI에서 현재 선택된 날짜, 리스트의 상태 탭을 url의 쿼리스트링으로 관리해봐도 좋을것 같아요. url을 공유했을 때, 그 상태가 유지하기 위해 그런 방법을 쓰기도 하거든요. https://github.com/pbeshai/use-query-params 이 라이브러리를 한번 참고해보셔도 좋을것 같네요!
Container 라는 작명을 사용하신것 보니, container-presentational component 패턴을 사용해보신것 같다는 생각이 들어요. container 뿐만아니라 presentational 컴포넌트로도 분리해봐도 좋을것 같아요. 그리고 어떤 역할을 가진 컴포넌트를 container 컴포넌트로 분류하셨는지 그 기준도 궁금하네요!