bibimbap/docs/changes/2026-06-30-redesign-token-c...

2.6 KiB

2026-06-30 리디자인 후속 — 토큰 통일·클래스 충돌 정리

세션: sid 20260630-170024 브랜치: feat/v2 선행: 2026-06-30-visual-redesign-bibimbap-css.md 검토에서 발견된 일관성 결함 수정

배경

리디자인 비주얼 레이어 검토 결과 디자인 일관성 결함 발견 — 공유 bibimbap.css 가 앱 전역 브랜드 골드 #e8a54b(header/footer/modal/26파일) 와 다른 #D4A853 를 도입해 모든 페이지에 골드 2종이 공존했다. 부수적으로 클래스 합집합 override 모호성과 shadowing, 이중 CSS 로드가 있었다.

변경

항목 파일 내용
accent 통일 css/bibimbap.css --color-accent #D4A853→#e8a54b(light+dark), --color-accent-press #C79A40→#d8973a. 앱 전역 브랜드 골드로 단일화.
focus-visible css/bibimbap.css .btn/.chip/.link/a 키보드 포커스 링 추가(마우스 클릭 시 미표시).
클래스 충돌 제거 views/profile.jsp 페이지-로컬 .profile-* 를 source of truth 채택, 합집합으로 붙은 중복 bibimbap 유틸(btn/avatar/thumb/meta/game-row/profile-head/card/section-*) 제거 → override 모호성 소멸.
shadowing 해소 views/recruit-form.jsp bibimbap 와 충돌하던 로컬 클래스명(field/form-grid/req/count/preview-card/form-actions) rf- prefix rename. ID·JS·accent 무변경(이미 브랜드 골드 사용).
이중 로드 제거 views/index.jsp 직접 <link bibimbap.css> 제거(theme-init 가 이미 전역 로드).

인라인 핸들러(login/signup oninput·onclick)는 기능 정상·외부화 시 회귀위험 → 유지(수용).

검증

레벨 결과
L1 — WAR 빌드 ./mvnw -q -DskipTests package exit 0 PASS. WAR 내 css/bibimbap.css 포함 확인.
L2 — 런타임 스모크 dev 컨테이너 소스 bind-mount(.:/build)로 변경 즉시 라이브. / /login /signup /terms /recruit /posts /error HTTP 200 + JSP 컴파일 에러 0. 서빙 css accent #e8a54b 확인.
L2 — 인증 게이트 /recruit/new·/profile HTTP 302(로그인 필요) → JSP 렌더 미확인.

needs_user_verification

  • /recruit/new(모집 폼): 로그인 세션에서 rf- rename 후 레이아웃·라이브 미리보기 정상 렌더.
  • /profile: 로그인 세션에서 버튼/카드 외형(중복 클래스 제거 후) + 골드 정합.
  • 다크모드 토글 시 전 페이지 골드 단일(#e8a54b) 육안 정합.