44

기존 틀을 유지하면서 Navigation을 적절하게 사용하려면, 매번 Navigation 컴포넌트가 정의된 파일에서 콜백 함수를 작성해주고, case pathName을 추가해준 뒤 setHeaderPosition을 사용해서 적절한 헤더를 적절한 주소에서 렌더링할 수 있도록 만들어야 했다.
매번 Navigation 컴포넌트가 필요한 페이지를 위해 Navigation 파일을 찾아가 코드를 추가하는 것은 재사용성 및 이식성이 떨어진다고 판단했습니다. 따라서 전역 상태 관리와 커스텀훅을 사용해서 네비게이션을 설정하는 코드로 리팩토링하여, 간편하게 헤더를 사용할 수 있도록 만들고자 합니다.

[x] 커스텀 훅 제작하기
[x] 전역 상태 관리 라이브러리 - jotai 를 사용하여 (useAtom, useAtomValue) 전역에서 상태를 관리할 수 있도록 만들기
[x] 어떤 스타일의 헤더를 사용할지 정하도록 만들기
[x] 왼쪽 Icon, 오른쪽 Icon(혹은 subtitle)에 넣을 콜백 함수 prop으로 줄 수 있도록 만들기
[x] Title 값 받아와서 렌더링하기, subTitle 값 받아오기
[ ] useHeader라는 훅으로 제작하고, 해당 훅 내부적으로 위의 5개의 prop(혹은 전역 state)를 받아와서 렌더링하도록 만들기 - [ ] 그럴려면.. 전역 상태로 관리되는 isHeaderOpen이라는 상태를 통해, 헤더의 렌더링 여부를 결정하면 되지 않을까? -> 잘 생각해보니 어차피 헤더는 모양만 다를 뿐 항상 렌더링 됨. (사실 렌더링이 안된다고 가정하면 Main에서 padding 해둔 것도 고민해야하고, 이 또한 전역 상태로 돌려야 할 수도 있었음
[x] 따라서, 단지 전역 상태로 해당 페이지가 렌더링 될 떄, 어떤 코드가 실행되는지 보면 될 듯?

TEAM-BEAT / BEAT-Client