코드변경사항20260808_2

[코드 변경사항] 모바일(폰) UI/UX 개선 - 하단 네비게이션 탭 단순화 및 필터 텍스트 줄바꿈 방지

작성일자: 2026년 08월 08일
작성자: Antigravity AI Assistant
대상 시스템: 커리어핏 (CareerFit) 모바일 뷰 UI (src/components/Navbar.tsx)

---

1. 개요 및 목적

스마트폰(모바일) 브라우저 접속 시 발생하는 UI 중복 현상과 필터 텍스트 줄바꿈 쪼개짐 현상을 해결하여, PC(컴퓨터) 화면과의 일관성을 확보하고 모바일 사용성을 향상시켰습니다.

---

2. 주요 변경 사항

📱 1) 모바일 하단 네비게이션 탭 개편 (4개 ➔ 3개 통일)

• 문제점: 모바일 화면 하단 네비게이션에 AI 진단과 내 이력서가 모두 존재하여 클릭 시 동일 화면(<AIMatchReport>)이 출력되고 중복감을 유발함.
• 수정사항: 내 이력서 탭 버튼을 삭제하고, PC 화면 구성과 동일하게 아래 3개 메인 버튼으로 통일함:
  1. 📌 공고랑 매칭 (activeTab = 'kanban')
  2. 📅 타임라인 (activeTab = 'timeline')
  3. ✨ AI진단 (activeTab = 'match')

🏷️ 2) 상태 필터 라벨 및 텍스트 줄바꿈(Wrap) 방지

• 문제점: 좁은 모바일 화면 폭에서 관심 공고 텍스트가 관심 공 / 고 와 같이 2줄로 나뉘어 표시됨.
• 수정사항:
  • 명칭을 관심 공고 ➔ 관심공고 로 변경함.
  • 모든 상태 필터 버튼(전체, 관심공고, 서류 준비 중, 지원 완료, 면접 진행, 최종 합격)에 whitespace-nowrap CSS 클래스를 부여하여 한 줄 표사를 보장함.

---

3. 대상 파일

• src/components/Navbar.tsx [MODIFY]

---

4. 검증 결과

• cmd /c npm run build (Vite Production Build) 정상 완료 (오류 없음).