feat(fe): game-register.jsp 리디자인 누락분 보강 + 재발방지 체크리스트

/game/new 가 2026-06-30 9단위 리디자인 목록에서 빠져 있던 것을 사용자가
지적해 발견. 실사용 스샷 대조 결과 레이아웃/토큰은 이미 sibling(recruit-form
등)과 일치해, 필수(*) 표시 2건 + 미리보기 eyebrow 라벨만 recruit-form.jsp
패턴 재사용으로 보강(단일 JSP, 로직 무변경). 로컬 CSS 토큰 전지역 통합은
sibling 관례와 갈라지므로 이번 세션 범위에서 제외, 별도 과제로 이월.

재발방지: frontend-redesign-coverage-checklist.md 신설(뷰 파일 23개 전수
상태표) + workflow-patterns.md 에 "전 페이지 반영 서술은 실제 파일 전수와
대조 필요" 패턴 등재.

L1 362/362 GREEN. L2 로그인 후 라이트/다크 육안 확인(known JSP stale
렌더링 함정 회피 위해 docker compose restart 후 재대조).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011h6etRXJLx1xdfxmVcHjBg
This commit is contained in:
이정수 2026-07-01 14:25:47 +09:00
parent 0205dca0f7
commit 86b052813d
6 changed files with 117 additions and 2 deletions

View File

@ -0,0 +1,42 @@
# 2026-07-01 game-register.jsp 리디자인 누락분 보강
**세션**: `/atp:task``frontend-design` 스킬 경유
**브랜치**: feat/v2
## 배경
`/game/new`(신규 게임 등록, `game-register.jsp`)가 2026-06-30 9단위 리디자인([2026-06-30-visual-redesign-bibimbap-css.md](./2026-06-30-visual-redesign-bibimbap-css.md)) 목록에서 빠져 있었다는 사용자 지적으로 발견. 실사용 로그인 스샷으로 대조한 결과 카드 레이아웃·사이드 미리보기·색상 토큰(accent `#e8a54b` 등)은 이미 sibling 페이지(`recruit-form.jsp` 등)와 일치했다 — 즉 시각적으로 크게 뒤처진 상태는 아니었고, 누락은 주로 **추적 문서의 공백**이었다.
## 변경 내용
`game-register.jsp` 1파일, 마크업·CSS 추가만 (신규 파일 0):
- 필수 입력 표시(`*`) 추가 — 게임 이름(항상), WebGL zip(`editMode`가 아닐 때만, 수정 시엔 zip 선택이 선택사항이라는 기존 로직 반영)
- 미리보기 패널에 "미리보기" eyebrow 라벨 추가 (`aria-label`은 기존에도 있었으나 시각적 라벨이 없었음)
- 두 항목 모두 `recruit-form.jsp``.rf-req` / `.rf-preview__label` 패턴을 클래스명만 `.game-req` / `.game-preview__label`로 바꿔 그대로 재사용 — 새 디자인 언어 도입 없음
**로컬 CSS 변수 정리는 범위 제외**: `game-register.jsp`가 쓰는 `--surface/--accent/--text` 등은 `bibimbap.css`(`--color-*` 네이밍)와 다른 변수라 대체가 안 되고, 이 로컬 토큰 관례는 `recruit-form.jsp`·`game-detail.jsp` 등 이미 리디자인된 sibling 페이지도 동일하게 갖고 있는 의도적 패턴([analysis/2026-06-30-frontend-component-review.md](../analysis/2026-06-30-frontend-component-review.md) P0 "CSS 토큰 23개 파일 중복"). 이 파일만 단독 전환하면 sibling과 관례가 갈라지므로, 전지역 통합은 별도 세션으로 이월.
## 재발방지
`docs/development/frontend-redesign-coverage-checklist.md` 신설 — 뷰 파일(fragment 제외 23개) 전수 대비 리디자인 반영 상태를 표로 추적. `docs/development/workflow-patterns.md`에 "'전 페이지 반영' 서술은 실제 파일 전수와 대조 필요" 패턴 등재.
## 검증 결과
| 레벨 | 결과 |
|---|---|
| L1 | `docker compose exec app mvn -o test` — 362/362 PASS |
| L1 | 정적 grep `<%@ taglib` — 0건(stray taglib 없음) |
| L2 | 로그인(`admin@bibimbap.local`) 후 `/game/new` 육안 확인 — 필수(*) 2건 + "미리보기" 라벨 렌더 확인, 라이트/다크 양 테마 |
| known pitfall | JSP 저장 즉시반영 불신 원칙 적용 — `docker compose restart app` 후 재대조로 stale 렌더링 배제 |
## needs_user_verification
- WebGL zip 실제 업로드 → 등록 제출 전체 플로우(파일 업로드 API 호출 포함) 회귀 확인 — 이번 변경은 마크업/CSS만이라 로직 영향 없음으로 판단하나 실제 제출은 미실행.
- 게임 수정(`editMode=true`) 경로에서 WebGL zip 라벨에 `*` 미표시(비필수) 확인 — 기존 게임 보유 계정으로 로그인 필요, 이번 세션은 dev 시드 데이터 부재로 미확인.
## 관련 문서
- [2026-06-30-visual-redesign-bibimbap-css.md](./2026-06-30-visual-redesign-bibimbap-css.md)
- [../development/frontend-redesign-coverage-checklist.md](../development/frontend-redesign-coverage-checklist.md)
- [../development/workflow-patterns.md](../development/workflow-patterns.md)

View File

@ -14,3 +14,4 @@
- [2026-06-30-redesign-token-coherence-fix.md](./2026-06-30-redesign-token-coherence-fix.md) — 리디자인 후속 일관성 수정. 공유 bibimbap.css accent 를 앱 전역 브랜드 골드로 통일(`#D4A853→#e8a54b`, light+dark) + focus-visible 링 + profile.jsp 중복 유틸 클래스 제거(override 모호성 소멸) + recruit-form.jsp 충돌 클래스 `rf-` rename(shadowing 해소) + index.jsp 이중 CSS 로드 제거. L1 빌드 PASS, L2 스모크 7페이지 200(JSP 에러 0). 인증 게이트 페이지(recruit-form/profile) 렌더는 needs_user_verification.
- [2026-06-30-visual-redesign-bibimbap-css.md](./2026-06-30-visual-redesign-bibimbap-css.md) — 클로드 디자인 리디자인 비주얼 레이어 9단위 반영. bibimbap.css 신설 + theme-init 공통 link + 빈상태 fragment 2종 + 홈/인증/약관/프로필/에러/모집 마크업·클래스 이식. game-detail no-op. 커밋 8개, L2 스모크 전 페이지 200(errer JSTL taglib 결함 포착·수정). 인터랙티브 제출·다크모드는 needs_user_verification.
- [2026-06-30-ui-multiaxis-ratio-visibility-fix.md](./2026-06-30-ui-multiaxis-ratio-visibility-fix.md) — 리디자인 미해결 시각 결함 2건(이미지#2 게임 카드 "비율" / 이미지#3 모집 빈상태 "가시성") 수정. "비율"을 카드 종횡비 단일 축으로 조기 협소화 → 사용자가 검색바 정렬(레이아웃 비율) 축 직접 교정 → multi-axis 멀티에이전트 평가(관찰1→레이아웃비율·카드종횡비·대비가시성·타이포간격 4축 병렬→종합1, 6 에이전트)로 13건 결함+카드 종횡비 결정 복원. 사용자 결정: 카드 4:3 + 전체 13건(index.jsp search-stack·card 4:3·object-position / bibimbap.css btn-ghost 대비·다크 보더·정렬칩·empty padding / recruit-list.jsp 히어로폭·eyebrow·빈상태 CTA 강등). L1 정적 + L2 런타임 스모크 라이트/다크 양화면 PASS. 커밋 9489365·c688aa6. 교훈: [verification-strategies.md](../development/verification-strategies.md) "모호한 시각 결함 어휘는 단일 결정축 협소화 전 다축 스캔 선행". 로그인 상태 스모크·실게임 가로 썸네일 4:3 크롭은 needs_user_verification.
- [2026-07-01-game-register-redesign-parity.md](./2026-07-01-game-register-redesign-parity.md) — `/game/new`(game-register.jsp)가 9단위 리디자인 목록에서 빠졌던 것을 사용자 지적으로 발견·보강. 실사용 스샷 대조 결과 레이아웃/토큰은 이미 sibling과 일치 — 필수(*) 표시 2건 + 미리보기 eyebrow 라벨만 `recruit-form.jsp` 패턴 재사용으로 추가(단일 JSP, 로직 무변경). 로컬 CSS 토큰 전지역 통합은 별도 과제로 이월. 재발방지로 `frontend-redesign-coverage-checklist.md` 신설 + workflow-patterns 등재. L1 362/362 PASS, L2 로그인 후 라이트/다크 육안 확인.

View File

@ -0,0 +1,47 @@
# Frontend 리디자인 대상 커버리지 체크리스트
`WEB-INF/views/*.jsp` 전체(fragment 제외 23개)를 대상으로, 클로드 디자인 리디자인의 "마크업·클래스 이식" 단위 반영 여부를 추적한다. 새 뷰 파일이 추가되면 이 표에 행을 추가한다 — 추가하지 않으면 다음 리디자인 세션이 `docs/changes/`의 과거 커밋만 보고 전체 목록을 재구성하다가 파일을 놓친다(재발 사례: `game-register.jsp` 누락, 아래 참고).
## 사용 규칙
- **리디자인류 세션 착수 시**: `find src/main/webapp/WEB-INF/views -maxdepth 1 -name "*.jsp"` 로 실제 파일 목록을 뽑아 이 표와 **행 개수 대조**부터 한다. 표 갱신 없이 과거 `docs/changes/*.md` 서술만 참고하면 이 표에 없는 신규 파일이 통째로 빠진다.
- **세션 종료 시**: 이번 세션에서 다룬 파일의 상태 열을 갱신하고, 다룬 근거 커밋/문서 링크를 채운다.
- 상태 값: `완료` / `no-op(토큰 일치 확인)` / `미착수` / `제외(관리자·저빈도)`
## 상태표
| 파일 | 상태 | 근거 |
|---|---|---|
| `index.jsp` | 완료 | [2026-06-30-visual-redesign-bibimbap-css.md](../changes/2026-06-30-visual-redesign-bibimbap-css.md) |
| `login.jsp` | 완료 | 위 문서 단위4 |
| `signup.jsp` | 완료 | 위 문서 단위4 |
| `terms.jsp` | 완료 | 위 문서 단위5 |
| `profile.jsp` | 완료 | 위 문서 단위6 + [2026-06-30-redesign-token-coherence-fix.md](../changes/2026-06-30-redesign-token-coherence-fix.md) |
| `game-detail.jsp` | no-op(토큰 일치 확인) | 위 문서 단위7 |
| `errer.jsp` | 완료 | 위 문서 단위8 |
| `recruit-form.jsp` | 완료 | 위 문서 단위9 + token-coherence-fix |
| `posts-list.jsp` | 완료 | 위 문서 단위2(빈상태 fragment) |
| `recruit-list.jsp` | 완료 | 위 문서 단위2(빈상태 fragment) + [2026-06-30-ui-multiaxis-ratio-visibility-fix.md](../changes/2026-06-30-ui-multiaxis-ratio-visibility-fix.md) |
| `game-register.jsp` | 완료 | **9단위 리스트에서 누락 확인 후 처리(20260701)**`/game/new` 신규 게임 등록. 사용자 지적으로 발견. 로그인 후 실사용 스샷 대조 결과 카드/사이드미리보기 레이아웃·토큰은 이미 sibling(recruit-form 등)과 일치 — 차이 2건만 보강: 필수(*) 표시(게임 이름, WebGL zip — editMode 시 zip 비필수 반영) + 미리보기 패널 "미리보기" eyebrow 라벨. `recruit-form.jsp``.rf-req`/`.rf-preview__label` 패턴 그대로 재사용, 로컬 CSS 변수 관례는 sibling과 동일하게 유지(전지역 통합은 [analysis/2026-06-30-frontend-component-review.md](../analysis/2026-06-30-frontend-component-review.md) P0 별도 과제). |
| `posts-detail.jsp` | 미착수 | — |
| `posts-form.jsp` | 미착수 | — |
| `recruit-detail.jsp` | 미착수 | — |
| `jam-list.jsp` | 미착수 | — |
| `jam-detail.jsp` | 미착수 | — |
| `jam-results.jsp` | 미착수 | — |
| `jam-scoring.jsp` | 제외(관리자·저빈도) | 심사위원 전용 화면. 재검토 시 이 행만 상태 변경 |
| `operation-policy.jsp` | 미착수 | — |
| `admin-console.jsp` | 제외(관리자·저빈도) | 관리자 전용 |
| `admin-jam-list.jsp` | 제외(관리자·저빈도) | 관리자 전용 |
| `admin-post-categories.jsp` | 제외(관리자·저빈도) | 관리자 전용 |
| `admin-unity-feeds.jsp` | 제외(관리자·저빈도) | 관리자 전용 |
> fragment/공통 include(`header.jsp`, `footer.jsp`, `modal.jsp`, `theme-init.jsp`)는 이 표 대상에서 제외 — 별도 트래킹 불필요(공통 include는 상위 페이지가 완료되면 자동 반영).
## 재발방지 규칙
리디자인 세션의 "전 페이지 반영" 서술은 **작업 당시 작성자가 열거한 목록**을 의미할 뿐, 실제 뷰 파일 전체를 의미하지 않을 수 있다. 다음 리디자인/일관성 점검 세션은:
1. 이 표를 먼저 읽고 `미착수` 행을 스코프 후보로 제시한다(자동으로 전부 착수하지 않음 — 우선순위는 사용자 확인).
2. `find` 결과 행 수와 이 표의 행 수가 다르면(신규 뷰 파일 추가/삭제) 표를 먼저 동기화하고 진행한다.
3. 신규 뷰 파일을 추가하는 세션은 **같은 커밋에** 이 표에 행을 추가한다(상태: `미착수`).

View File

@ -6,6 +6,7 @@
- [verification-strategies.md](./verification-strategies.md) — `verification-advisor` 가 읽는 검증 전략 레지스트리 (프로젝트별 `cmd` 를 채워 사용). 설계·테스트 단계 구조적 교훈(SSR 영향맵, fixture 전수 감사, 매퍼 alias 케이스폴딩, 보안 vacuous PASS 회피) 포함.
- [workflow-patterns.md](./workflow-patterns.md) — 검증(테스트 통과)과 무관한 **작업 진행 방식** 패턴. freeze 분류 근거 확인, frontend-design fork 위임, 다중 UI 안 Artifact 시각비교→AskUserQuestion 선택 수렴 등.
- [frontend-redesign-coverage-checklist.md](./frontend-redesign-coverage-checklist.md) — 뷰 파일(`WEB-INF/views/*.jsp`) 전수 대비 리디자인 반영 상태표. 리디자인/일관성 세션 착수 전 이 표와 실제 파일 목록을 대조해 누락 방지.
- [document-category-classification.md](./document-category-classification.md) — 카테고리 분류 기준 (불필요한 카테고리는 프로젝트에 맞게 정리)
- [agent-output-conventions.md](./agent-output-conventions.md) — 에이전트 출력 규약. 사용자 대면 의사결정 제시문엔 압축 비적용(배경+선택지+권장 풀어쓰기), 압축은 내부 산출물 한정
- [git-workflow.md](./git-workflow.md) — 브랜치 분류(메인스트림 vs 비-메인스트림) · 비-메인스트림 브랜치 커밋 표준 승인 · push 명시 요청 한정 · Conventional Commits + `Co-Authored-By` 트레일러 규약. CLAUDE.md '작업 원칙' 커밋 정책의 정본.

View File

@ -52,6 +52,17 @@ CSS 위계·여백·색 같은 시각 변경은 before→after **텍스트 표**
> 근거: 세션 20260630-175023 — 사용자 지적 "비율/가시성" 2건을 카드 종횡비 단일 축으로 협소화 → 사용자가 "검색바도 혼자 짧다"로 레이아웃 비율 축 직접 추가. 이후 multi-axis 위임 평가(6 에이전트)가 13건 결함으로 복원, 라이트/다크 양화면 스모크로 검증.
## "전 페이지 반영" 서술은 실제 파일 전수와 대조 필요 — 리디자인 대상 체크리스트 선행
"전 페이지 리디자인" 같은 세션 요약은 **작업 당시 작성자가 열거한 목록**을 뜻할 뿐, `find`로 뽑은 실제 뷰 파일 전수와 항상 일치하지 않는다. 과거 `docs/changes/*.md` 서술만 신뢰하고 다음 세션을 시작하면, 그 목록에 없던 파일(신규 추가분·의도적 스코프 제외분 모두 포함)이 조용히 계속 빠진 채로 남는다.
절차:
1. 리디자인/시각 일관성류 작업 착수 전 `docs/development/frontend-redesign-coverage-checklist.md` 를 읽고 `find src/main/webapp/WEB-INF/views -maxdepth 1 -name "*.jsp"` 실제 파일 수와 표 행 수를 대조한다.
2. 불일치(신규 파일 미등재) 시 표를 먼저 동기화한 뒤 진행한다.
3. 신규 뷰 파일을 추가하는 세션은 같은 커밋으로 그 표에 행을 추가한다(상태 `미착수`) — 다음 리디자인 세션이 처음부터 전수 파악하지 않아도 되게 한다.
> 근거: 세션 20260701 — `game-register.jsp`(`/game/new`) 가 2026-06-30 9단위 리디자인 서술에 없어 사용자가 직접 지적할 때까지 누락 상태로 남음. 체크리스트 부재가 원인.
## needs_user_verification 은 "미완료 목록" 이 아니라 "결정 분기" 단위로 구조화
세션 종료 시 `needs_user_verification` 을 단순 잔여 작업 나열로 적으면, 다음 세션이 각 항목마다 "어떻게 할까요" 재질의로 시작한다. 대신 각 항목을 **사용자가 한 번에 고를 수 있는 결정 분기**(예: 직접 적용 / 지금 구현 / 배포 후 이월 / 추가 하드닝)로 미리 구조화하면, 다음 세션 착수 시 결정이 1라운드에 수렴하고 재질의가 0이 된다. 항목마다 "기본 가정값 + 영향 범위" 를 병기한다(§2.2 open_questions 규약과 정합).

View File

@ -205,6 +205,18 @@
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(232, 165, 75, 0.25);
}
.game-req {
color: var(--accent);
font-weight: 900;
margin-left: 0.15em;
}
.game-preview__label {
margin: 0;
padding: 0.875rem 1rem 0;
color: var(--text-muted);
font-size: 0.75rem;
font-weight: 900;
}
.game-check {
display: flex;
align-items: center;
@ -362,7 +374,7 @@
<form class="game-form" action="<%= formAction %>" method="post" id="game-register-form" data-edit-mode="<%= editMode %>">
<div class="game-form__grid">
<div class="game-field game-field--full">
<label class="game-field__label" for="game-name">게임 이름</label>
<label class="game-field__label" for="game-name">게임 이름 <span class="game-req">*</span></label>
<input class="game-field__input" type="text" id="game-name" name="name" maxlength="80" autocomplete="off" value="<%= editGameName %>" required />
</div>
<div class="game-field">
@ -370,7 +382,7 @@
<input class="game-field__input" type="url" id="game-git-url" name="gitUrl" placeholder="https://example.com/repository" autocomplete="url" value="<%= editGitUrl %>" />
</div>
<div class="game-field">
<label class="game-field__label" for="game-webgl-zip">WebGL zip</label>
<label class="game-field__label" for="game-webgl-zip">WebGL zip <% if (!editMode) { %><span class="game-req">*</span><% } %></label>
<label class="game-file" for="game-webgl-zip">
<span class="game-file__action">zip 선택</span>
<span class="game-file__name" id="game-webgl-file-name"><%= editMode && !editWebglPath.isBlank() ? "기존 WebGL 유지" : "선택된 파일 없음" %></span>
@ -413,6 +425,7 @@
</section>
<aside class="game-preview" aria-label="미리보기">
<p class="game-preview__label">미리보기</p>
<div class="game-preview__media">
<% if (editThumbnailUrl.isBlank()) { %>
<img id="preview-thumb" alt="" hidden />