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

[ocahs9]

📌 관련 이슈번호

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

🎟️ PR 유형

어떤 변경 사항이 있나요?

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

✅ 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를 사용하지 않을 경우 렌더링이 반복적으로 일어나서 결국 성능 최적화에 방해되기도 하고, 애초에 에러가 발생하여 렌더링이 안됩니다.)

📸 스크린샷

다음은 함수도 연결한 예시입니다.

🔗 참고 자료

[github-actions]

PR 작성하느라 고생 많았어요!! 라벨 잘 지정되었는지 확인 한 번 해 주기 🫶

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[pepperdad]

최고다 공준혁!
리뷰할 게 없다!
LGTM

[pepperdad]

p5) 센스 최고

[pepperdad]

이슈에 TODO 보고 방금 확인했는데, 메인에서는 padding 때문에 헤더 컴포넌트 따로 만들어서 쓸 예정이야!
어차피 로고랑 햄버거 버튼만 넣으면 되니까! 이 부분은 따로 걱정 안 해도 될 것 같아!

[imddoy]

LGTM~