SideNavigation - FE14-Part4-Team5/reser-on-do GitHub Wiki

• 사이드 메뉴 역할을 하는 네비게이션 컴포넌트입니다.
• 사용자의 프로필 이미지와 이름(선택), 주요 메뉴 항목들(내 정보, 예약내역 등)을 리스트 형태로 제공합니다.
• 각 메뉴는 현재 경로에 따라 활성화 상태를 시각적으로 구분되며, 클릭 시 해당 페이지로 이동합니다.

• 내부적으로 ProfileImageUploader와 SideNavItem 두 파트로 구성되어 있습니다.
• ProfileImageUploader는 이미지 선택 후 미리보기를 표시하며, onImageUpload를 통해 상위로 파일 객체를 전달합니다.
• 메뉴 항목은 내부에서 고정 배열(navItems)을 바탕으로 map 렌더링되며, 현재 경로(location.pathname)에 따라 active 스타일이 적용됩니다.
• 각 메뉴는 react-router-dom의 를 사용해 페이지 이동을 처리합니다.

모바일 기준

태블릿 기준

피시 기준

작동 흐름

<SideNavigation
  defaultImage={user.profileImageUrl}
  onImageUpload={(file) => {
    // 1. 이미지 업로드 → imageUrl 반환
    // 2. PATCH /users/me로 imageUrl 전달
  }}
/>