Feature/fe/#301 header refactoring

[leedongyull]

📝 PR 개요

• indexRouter add-channel 수정
• header를 Context 사용하지 않고, url에 따라 변경되도록 구현
• 폰트 라이브러리 제거

---

✅ 체크리스트 (Checklist)

• 코드가 빌드 오류 없이 잘 작동하는지 확인
• 테스트가 통과하는지 확인
• 스타일 가이드와 일관성을 유지했는지 확인
• 관련 문서가 업데이트되었는지 확인 (선택 사항)
• 리뷰어가 이해할 수 있도록 주석이나 설명을 추가했는지 확인

---

🔄 관련 이슈 (Linked Issues)

#301

---

📚 생긴 이슈 및 구현 방법

• 우선 합성 컴포넌트 형태를 구성 컴포넌트 형태로 바꿨습니다.

import { useLocation, useParams } from 'react-router-dom';
import { getHeaderInfo } from '@/utils/mapping/HeaderMapping';
import { HeaderLayout } from '@/component/header/HeaderLayout';

export const LayoutHeader = () => {
  const params = useParams<Record<string, string | undefined>>();
  const urlPath = useLocation();
  const headerOption = getHeaderInfo(urlPath.pathname);
  return (
    <HeaderLayout
      className="z-[5000]"
      userName={`${params.user || ''}`}
      title={`${headerOption.title}`}
      subtitle={`${headerOption.subtitle}`}
      leftItems={headerOption.leftItems}
      rightItems={headerOption.rightItems}
    />
  );
};

• 또한 확장성을 위해 BackButton,DropDown 등이 아닌 left,right Items로 구조를 변경하였습니다.
• 버튼의 Onclick과 Dropdown 등 로직이 필요한 경우가 있어, Items에 ReactNode 자체를 받아와 create해주는 방식으로 구현하였습니다
  • 이로 인해 비용이 조금 늘어났을 수 있습니다.

export const HEADER_LEFTITEMS: Record<string, ReactNode[]> = {
  '/add-channel': [React.createElement(HeaderBackButton)],
  '/add-channel/:user': [React.createElement(HeaderBackButton)],
  '/add-channel/:user/draw': [React.createElement(HeaderBackButton)],
  '/channel/:channelId/host': [React.createElement(HeaderBackButton)],
  '/update-channel': [React.createElement(HeaderBackButton)],
  '/register': [React.createElement(HeaderBackButton)],
  '/channelInfo/:channelId': [React.createElement(HeaderBackButton)],
  '/guest-add-channel/:channelId': [React.createElement(HeaderBackButton)],
};

export const HEADER_RIGHTITEMS: Record<string, ReactNode[]> = {
  '/channel/:channelId/host': [React.createElement(HeaderDropdown)],
};

• 마지막으로 생각해봐야 할 이슈로는 메인 페이지 헤더의 로그아웃 버튼입니다.
• LogoutButton을 컴포넌트로 빼서 HeaderItems에 넣으려 했으나, setIsLoggedIn 함수가 main페이지에 종속되어 있어 의견이 필요합니다.
• 1. Login 상태를 Context를 통해 공유한다.
• 2. 현재 main 페이지 처럼 하드코딩으로 한다.

혹시 이외에도 다른 방법이 있으면 공유 부탁 드립니다!

[effozen]

고생하셨습니다!

[happyhyep]

고생하셨습니다!!!