# 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 색 정합 육안 확인.

---

## 관련 문서

- [docs/changes/2026-06-29-b2-b4-fe-hardening.md](./2026-06-29-b2-b4-fe-hardening.md) — FE 다크모드 대비·세션 하드닝 (선행 작업)