[jyt6640]

작업 내용

• 사이드바에 한정하지 않고 인증 화면을 포함한 앱 전체 14개 라우트를 Octo Code 기반 UI로 전면 리디자인했습니다.
• 공통 shell, sidebar, topbar, 카드, 패널, 테이블, 리스트, 폼, 모달, toast, 상태 표면과 반응형 규칙을 전역 레이어로 정리했습니다.
• 기존 API, 상태 관리, 권한 가드, 라우팅 로직은 변경하지 않았습니다.

변경 이유

• 화면마다 달랐던 보라색 그라디언트·과한 장식·상태 표현을 일관된 다크/라이트 테마와 기능 중심 표면으로 통합합니다.
• 내비게이션의 노란색 강조를 제거하고 활성 메뉴는 파란색 primary rail/icon으로 구분합니다.
• 모바일에서 고정 하단 내비게이션이 콘텐츠를 가리지 않도록 여백과 반응형 밀도를 보정합니다.

상세 변경 사항

• DESIGN.md에 [Design] 앱 전체 페이지 Octo Code 전면 리디자인 #414 전체 라우트 계약과 Before/After 기준 추가
• /, /chat, /calendar, /attendance, /work-schedules, /drive, /ai, /members, /my-page, /team-management, /admin, /login, /register, /verify-email 전면 스타일 적용
• loading, empty, error, permission, success 상태 표면 정리
• 390/768/1280 뷰포트와 명시적 light theme 대응
• 14개 라우트 × 3개 뷰포트 Before/After PNG 및 메타데이터 기록
• 재현 가능한 Chromium 캡처 스크립트 추가
• PR [Style] #410 - 사이드바 활성 상태 강조 정리 #413 사이드바 활성 상태 변경을 포함한 최신 develop 기준으로 작업

범위 밖:

• API 계약, 서버 동작, 인증 토큰 저장 방식, 권한 정책, 비즈니스 상태 전이는 변경하지 않았습니다.
• main 직접 반영은 하지 않고 develop 대상 PR로 먼저 검증합니다.

테스트

• npm run test:run 통과: 62개 파일, 456개 테스트
• npm run build 통과
• npm run lint: 기존 baseline 오류 24개와 경고 4개가 남아 있으며 #414에서 변경한 TypeScript/TSX 파일은 없습니다.
• Chromium 수동 QA: 42개 라우트/뷰포트 캡처, overflow 0건, redirect 0건
• active navigation, light theme 전환, 로그인 validation error, team-lead 권한 라우트, 모바일 하단 내비 가시 영역 확인
• Before/After 증적과 light theme 보조 캡처를 .qa/issue-414에 기록

리뷰 포인트

• 전역 src/index.css가 기존 컴포넌트 스타일을 덮는 선택자 범위와 토큰 일관성
• 다크/라이트 테마에서 카드·폼·테이블·상태 색상의 대비와 focus 상태
• 권한별 team-management/admin 라우트의 기존 접근 제어 보존
• 모바일 고정 내비게이션과 긴 페이지의 콘텐츠 하단 여백
• Before/After 캡처의 라우트별 시각 변화

관련 이슈

closes #414

develop 반영 후 이슈는 완료 코멘트와 함께 수동 종료합니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
yanus-groupware	Ready	Preview	Aug 22, 2026 2:50am