bibimbap/docs/changes/2026-06-30-visual-redesign-...

3.7 KiB

2026-06-30 클로드 디자인 리디자인 — 비주얼 레이어 9단위 반영

세션: sid 20260630-160000 브랜치: feat/v2 커밋: 0390da6 ~ 360078a (단위별 8개) + graph 메타 8c86e8c

요약

클로드 디자인 리디자인 산출물을 "비주얼 레이어" 방식으로 전 페이지에 반영했다. 파일 통째 교체 없이 마크업·클래스만 이식하고 모델명·CSRF·AJAX·include·자체 head는 기존값을 전부 보존했다.


변경 범위

단위 내용
1 — CSS 신설 src/main/webapp/css/bibimbap.css 신설 (다크 오버라이드 포함). WEB-INF/views/theme-init.jsp 단일 link 태그로 23개 전 페이지 공통 적용.
2 — 빈 상태 fragment fragments/posts-empty.jspf, fragments/recruit-empty.jspf 신설. posts-list.jsp, recruit-list.jsp 에서 include.
3 — 홈 index.jsp — 히어로 섹션·정렬 칩·그리드 레이아웃 클래스 이식.
4 — 인증 login.jsp — pw-toggle·에러 슬롯. signup.jsp — 강도 막대·일치 표시.
5 — 약관 terms.jsp — sticky TOC 구조 이식.
6 — 프로필 profile.jsp.profile-head·.game-row 클래스 이식.
7 — 게임 상세 game-detail.jsp — 이미 동일 토큰 구현 확인 → no-op.
8 — 에러 errer.jsp — empty-state 외형(SVG/아이콘) 이식. 기존 scriptlet statusCode 읽기 유지.
9 — 모집 작성 recruit-form.jsp — 필수 표시·글자수 카운터·sticky 미리보기 이식.

하드 제약 준수

제약 처리
모델명 보존 디자인 EL(${errorData} 등) 미채택. 기존 ${game.title}, ${ctx} 등 유지.
CSRF 이중방어 _csrf hidden + BibimbapCsrf.headers AJAX 헤더 — 기존 코드 무수정 보존.
include 경로 /WEB-INF/views/header.jsp 등 기존 include 경로 전부 유지.
CDN 0 외부 CDN 참조 추가 없음.
미존재 라우트 비노출 /games/{id}/visibility, /profile/edit, /password/reset UI 요소 미채택.
game-detail 보존 이미 동일 토큰 구현 상태 확인 후 no-op 처리.

검증 결과

레벨 결과
L1 — WAR 빌드 ./mvnw -q -DskipTests package exit 0 PASS
L1 — CSS WAR 포함 target/.../css/bibimbap.css 존재 확인 PASS
L2 — 스모크 로컬 dev 재기동 후 /, /login, /signup, /terms, /posts, /recruit, /error 전부 HTTP 200
L2 — 결함 수정 errer.jsp stray javax JSTL taglib → /error 500 → taglib 제거 → 200 (fix 커밋 360078a)
L2 — 마커 검증 home css link+hero, login pw-toggle, signup pw-meter, terms toc, error empty-state 서빙 확인

needs_user_verification (브라우저 세션 필요)

  • 로그인 인터랙티브 제출: AJAX(_csrf + BibimbapCsrf.headers) 성공·리다이렉트. 테스트 계정 admin@bibimbap.local.
  • 회원가입 제출 → modal → /login 리다이렉트.
  • 프로필: 닉네임·아바타 변경 AJAX (로그인 세션 필요).
  • 게임 상세: WebGL 플레이·6축 리뷰·댓글 CRUD (no-op이나 회귀 확인 권장).
  • 모집 작성: /recruit/new 제출 성공 + 라이브 미리보기.
  • 다크모드 토글 시 body ↔ header/footer 색 정합 육안 확인.

관련 문서