[Refactor/#106] Navigation 공통 컴포넌트 리팩토링

ocahs9 commented 1 month ago

📌 관련 이슈번호

Closes #106

🎟️ PR 유형

어떤 변경 사항이 있나요?

[ ] 새 기능 추가
[ ] 버그 수정
[ ] CSS 등 사용자 UI 디자인 변경
[x] 리팩토링

✅ Key Changes

이번 PR에서 작업한 내용을 간략히 설명해주세요

기존 Navigation 컴포넌트 파일에 직접 pathName과 콜백함수를 작성해주어야하는 번거로움을 줄여보고자 리팩토링 진행

jotai를 활용한 전역 상태 관리를 통해, 하나의 Navigation 헤더의 스타일을 관리

각 페이지 내에서 useHeader() 훅을 사용하여 setHeader 함수를 받아오고, setHeader 함수에 헤더의 설정 관련된 내용을 담아 객체로 전달하면, 헤더가 해당 페이지에서 설정한 스타일로 렌더링되도록 구현

📢 To Reviewers

사용 방법은 다음과 같습니다. 각자 페이지에서 다음과 같은 코드를 작성하여 필요한 훅, 상수를 import 해옵니다. (아래의 3개는 필수입니다.)

import { NAVIGATION_STATE } from "@constants/navigationState";
import { useHeader } from "@hooks/useHeader";
import { useEffect } from "react";

그리고, 아래와 같이 setHeader 함수를 받아옵니다 ! const { setHeader } = useHeader(); 그 후, 연결할 콜백 함수를 작성합니다. 왼쪽, 오른쪽 최소 0개 ~최대 2개가 필요합니다. (어차피 헤더엔 최대 2개의 함수만 연결됨)

const handleLeftBtn = () => {
    alert("왼쪽 버튼 클릭!");
  };
  const handleRightBtn = () => {
    alert("오른쪽 버튼 클릭!");
  };

마지막으로, 반드시 useEffect를 사용하여 setHeader 함수에 적절한 설정들을 담은 객체를 prop으로 넘깁니다. headerStyle 은 필수 속성이고, title, subText, leftOnClick, rightOnClick은 선택 속성입니다. headerStyled의 경우 위에서 import 해온 상수 객체 NAVIGATION_STATE 을 활용하여 값을 세팅하는 것을 추천합니다.

useEffect(() => {
    setHeader({
      headerStyle: NAVIGATION_STATE.ICON_TITLE_ICON,
      title: "헤더 테스트!",
      subText: "굿",
      leftOnClick: handleLeftBtn,
      rightOnClick: handleRightBtn,
    });
  }, [setHeader]);

참고로 의존성 배열에는 아무것도 넣지 않거나, setHeader 함수만 넣도록 합니다. (마운트 될 때만 헤더가 해당 페이지에 맞게 세팅되도록 해야 합니다. 또한, useEffect를 사용하지 않을 경우 렌더링이 반복적으로 일어나서 결국 성능 최적화에 방해되기도 하고, 애초에 에러가 발생하여 렌더링이 안됩니다.)