Web 6

[chlgusdn0203]

📌 작업 내용

• 공통 Header 컴포넌트 구현
• NavLink를 활용하여 현재 페이지에 따른 active 스타일 적용
• 연간 계획 페이지(/schedule)와 신입 부원 모집 페이지(/recruit) 이동 기능 구현
• Figma 시안을 참고하여 상단바 UI 구성

🔗 관련 이슈

• web-6

📸 스크린샷 / 화면 녹화

🧪 테스트 방법

1. npm run dev 실행
2. /schedule 페이지 접속 후 "연간 계획" 메뉴 active 상태 확인
3. /recruit 페이지 접속 후 "신입 부원 모집" 메뉴 active 상태 확인
4. 메뉴 클릭 시 정상적으로 페이지 이동되는지 확인

✅ 체크리스트

• npm run lint 통과를 확인했습니다
• npm run format 을 적용했습니다
• [] 디버깅용 console.log 를 제거했습니다
• [] 사용하지 않는 import / 변수를 정리했습니다
• [] 컨벤션 (README.md) 을 준수했습니다
• [] base 브랜치가 develop 인지 확인했습니다

💬 리뷰어에게 한 마디

상단바(web-6) 기능 구현을 완료했습니다.

[takjinwu]

/gemini reivew

[gemini-code-assist]

안녕하세요! PR 리뷰 요청을 확인했습니다. 전체적으로 NavLink를 활용하여 페이지 이동과 active 상태를 잘 구현하셨고, Tailwind CSS 도입도 적절하게 이루어진 것으로 보입니다. 다만, 몇 가지 개선이 필요한 부분이 있어 의견 드립니다.

1. src/components/layout/Header.jsx 내 빈 NavLink

ADMIN_APPLICANTS를 위한 NavLink가 비어 있습니다. 의도하신 것이 아니라면 삭제하거나, 필요한 경우 내용을 채워주세요.

제안:

// 54-61라인 수정 제안
{/* 관리자 확인용 임시 메뉴 */}
<NavLink
  to={ROUTES.ADMIN_APPLICANTS}
  className={({ isActive }) =>
    isActive ? `${styles.navLink} ${styles.active}` : styles.navLink
  }
>
  <span>관리자 페이지</span>
</NavLink>

2. 코드 스타일 및 유지보수

• CSS Modules와 Tailwind의 혼용: 현재 CSS Modules를 사용하면서 Tailwind CSS를 추가하셨습니다. 프로젝트 컨벤션에 따라 스타일링 방식을 통일하는 것이 유지보수에 유리합니다. 만약 Tailwind를 주력으로 사용하실 예정이라면, CSS Modules 파일들을 Tailwind 클래스로 전환하는 것을 고려해 보세요.
• README.md: 기술 스택 표가 깔끔하게 정리되어 보기 좋습니다.

전반적으로 요구사항을 잘 충족한 PR입니다. 위 사항만 확인해주시면 좋을 것 같습니다!