[FE][Feat] #112 : 레이아웃 상단 헤더 구현 및 공통 레이아웃 적용 (라우터 수정)

[effozen]

📝 PR 개요

• 뒤로가기 버튼 구현
• 상단 헤더 구현
• 공통 Layout의 헤더 수정
• 라우터에 공통 Layout 적용

🔍 변경 사항

• 뒤로가기 버튼 구현
• 상단 헤더 수정 => 범용적으로 사용할 수 있도록 모듈화
• Layout의 헤더 수정 및 반영
• 라우터에 공통 Layout 적용
• 헤더 페이지별로 정보 다르게 입력할 수 있도록 useContext 이용해서 수정

import { Map } from '@/component/maps/Map.tsx';
import { HeaderContext } from '@/component/layout/header/LayoutHeaderProvider.tsx';
import { useContext, useEffect } from 'react';

export const GuestView = () => {
  const headerContext = useContext(HeaderContext);

  useEffect(() => {
    headerContext.setHeaderOption({
      ...headerContext.headerOption,
      leftButton: 'back',
      rightButton: 'dropdown',
    });
  }, []);

  // TODO: geoCoding API를 이용해서 현재 위치나 시작위치를 기반으로 자동 좌표 설정 구현 (현재: 하드코딩)
  return (
    <div className="h-screen">
      <Map lat={37.3595704} lng={127.105399} type="naver" zoom={17} />
    </div>
  );
};

✅ 체크리스트 (Checklist)

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

🔄 관련 이슈 (Linked Issues)

#112
#110
#111
#112
#109
#134

📷 스크린샷 및 동영상 (선택 사항)

사진1	사진2

2024-11-14.4.04.19-1.mov

⚙️ 기타 사항

• UI/UX 적인 측면에서 다음을 다듬어야 합니다.
  • 헤더의 타이틀이 라인이 조금 안맞는 문제 수정
  • 반응형에 대해서 어떻게 대응할지 (다만 이건 추후 과제로 두고 있습니다. 에를 들면 글자크기 키우는 등)
  • 여전히 드랍다운 아이콘에 대해서 색이 변경되지 않는 문제가 있습니다. 이에 대해서도 추후 해결하겠습니다.

[effozen]

TSDoc이나, 스토리북, 테스트에 대해서는 우선 빠르게 개발을 마치고 주말중에 작업해두겠습니다. 변경사항이 너무 잦아서 데모가 내일인 관계로 전체적인 구조가 나오면 그때부터 적고자 합니다.

[leedongyull]

확실히 훨씬 더 깔끔해지고 범용적으로 바뀐 것 같아 좋아요!! 제가 막 짠 코드 수정하시느라 고생 많으셨습니다...ㅎㅎ

[effozen]

다시한번 리뷰 부탁드립니다. 재수정해서 올렸습니다.

[leedongyull]

context 활용해서 구현하셨군요!! 참고해보도록 하겠습니다! 고생하셨습니다