docs(redesign): 클로드 디자인 산출물 반영 검토 + 새 세션용 핸드오프 프롬프트
외부 디자인 툴 산출물(리디자인 zip: 7 JSP + bibimbap.css + 3 jspf + error.jsp)을
전수 검토하고 우리 실제 코드와 design↔reality 매핑을 확정. 코드 변경 없음(검토 세션).
핵심: 산출물은 라우트(/games 복수 vs 실제 /game 단수), 폼 제출(classic POST vs
JSON API+AJAX), CSRF(전무 vs CsrfTokens/_csrf/window.BibimbapCsrf), contextPath
(${ctx} vs ${pageContext.request.contextPath}), include(common/ 가정 vs 평면),
에러(web.xml/error.jsp vs errer 뷰), css 디렉토리(없음) 가 모두 불일치 →
파일 통째 교체 금지, 공유 bibimbap.css 신설 + 비주얼 레이어 이식으로 결론.
산출물: artifacts/handoff-prompt.md (새 세션 작업 프롬프트 + 매핑표 + 하드 제약 + 순서).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0162BaZnrbiYgWc9JJMZ9Czb
This commit is contained in:
parent
925eb73a62
commit
74e7ea1a32
|
|
@ -0,0 +1,83 @@
|
|||
# 작업용 프롬프트 — 클로드 디자인 리디자인 산출물 반영 (새 세션용)
|
||||
|
||||
> 이 문서는 검토 세션(sid 20260630-153323)의 산출물이다. **새 세션에 아래 "프롬프트" 블록을 그대로 붙여넣어** 실제 구현을 진행한다. 코드 변경은 새 세션에서 한다.
|
||||
|
||||
---
|
||||
|
||||
## 0. 한 줄 요약
|
||||
|
||||
외부 클로드 디자인 툴이 만든 리디자인 산출물(`Bibimbap 커뮤니티 웹사이트 리디자인.zip` — 7 JSP + `bibimbap.css` + 3 jspf + error.jsp)을 우리 프로젝트에 반영한다. **단, 파일 통째 교체가 아니라 "공유 `bibimbap.css` 신설 + 디자인의 클래스/구조 개선을 기존 JSP에 입히는 비주얼 레이어 방식"** 으로 한다. 산출물의 라우트·CSRF·include·모델명은 전부 우리 실제와 다르므로 그대로 쓰면 깨진다.
|
||||
|
||||
## 1. 산출물 위치
|
||||
- zip: `/Users/wemadeplay/Downloads/Bibimbap 커뮤니티 웹사이트 리디자인.zip`
|
||||
- 압축 해제본(검토 세션이 풀어둠): `<scratchpad>/redesign/jsp/...` (새 세션에선 zip을 다시 풀어 참조)
|
||||
- 구성: `jsp/css/bibimbap.css`(15KB, 핵심), `jsp/01-home.jsp` `02-login` `03-signup` `06-game-detail` `07-terms` `08-profile` `10-recruit-form`, `jsp/error/error.jsp`, `jsp/fragments/{posts-empty,recruit-empty,review-comment-form}.jspf`. (preview.html은 zip에 없음)
|
||||
|
||||
## 2. 디자인 산출물이 우리 현실과 다른 점 (그대로 쓰면 안 되는 이유)
|
||||
|
||||
| 항목 | 디자인 가정 | 우리 실제 (근거) |
|
||||
|---|---|---|
|
||||
| context path | `${ctx}` | `${pageContext.request.contextPath}` (`header.jsp:197`) — `${ctx}` 미정의 |
|
||||
| header include | `/WEB-INF/views/common/header.jsp` + header가 `<html><head>`를 연다고 가정 | `/WEB-INF/views/header.jsp` (common/ 없음). header.jsp는 doctype/head 없이 **nav 마크업 + 자체 style만**(`header.jsp:1-20`). 각 페이지가 자체 `<!DOCTYPE><html><head>` 보유 |
|
||||
| 폼 제출 | classic `<form method=post action=/login>` | 로그인·회원가입·로그아웃·리뷰·모집은 **JSON API + JS AJAX 제출**. login.jsp는 `window.BibimbapCsrf`로 제출(`login.jsp:286`) |
|
||||
| CSRF | 토큰 전무 | `CsrfTokens.getOrCreate(session)` → 폼은 hidden `<input name="_csrf">`(`login.jsp:211,224`), AJAX는 `window.BibimbapCsrf.headers()` 헤더(`theme-init.jsp:19-27`). **상태변경 전부 필수** |
|
||||
| 게임 라우트 | `/games`, `/games/{id}` (복수) | `/game/{id}` (**단수**, `GameController.java:136`). 게임목록 전용 `/games` 라우트 없음 — 홈 `/`가 목록(`WebMvcController:70`) |
|
||||
| 리뷰/댓글 | 폼 POST `/games/{id}/reviews` | JSON API `/game/{id}/reviews` (GET/POST/PUT/DELETE, `GameReviewController:73~`) — JS로 소비 |
|
||||
| 모집 작성 | POST `/recruit` | `/recruit/new` POST(JSON, location 반환, `RecruitController:49`). 기존 recruit-form.jsp도 AJAX |
|
||||
| 프로필/비번찾기 | `/profile`, `/password/reset` | `/profile` 존재(`/{pageName}`→profile.jsp). **`/password/reset` 라우트 없음** → 디자인의 "비밀번호 찾기" 링크는 기능 미존재 |
|
||||
| 에러 페이지 | `error/error.jsp` + web.xml `<error-page>` | **web.xml 없음**(Spring Boot WAR). `/error`→뷰 **`errer`**(오타 파일명 그대로, `WebMvcController:47-55`), 모델 `${statusCode}` |
|
||||
| CSS | 외부 `bibimbap.css` link 가정 | css/js 디렉토리 **미존재**. 현재 스타일은 각 페이지/header.jsp 인라인 `<style>` |
|
||||
| 폰트 | Pretendard·JetBrains Mono (css엔 @import 없음) | 프로젝트 제약 "외부 라이브러리 0" → CDN 금지. 미설정 시 system 폰트로 degrade |
|
||||
|
||||
ALLOWED_PAGES(제너릭 페이지 서버) = `error, login, profile, signup, terms, operation-policy, ""` (`WebMvcController` 내). game-detail/recruit/posts는 전용 컨트롤러.
|
||||
|
||||
## 3. 결정된 접근 (사용자 승인됨)
|
||||
- CSS: **공유 `bibimbap.css` 신설** → `src/main/webapp/css/bibimbap.css` (Tomcat DefaultServlet 서빙, CLAUDE.md 정책).
|
||||
- 파일 통째 교체 **금지**. 특히 `game-detail.jsp`(90KB, WebGL 로더·6축 평가·리뷰 CRUD·CSRF 내장) — 디자인 06은 단순 iframe 목업이라 통째 교체 시 기능 소실. **CSS 클래스/구조 개선만 이식**.
|
||||
- 범위: 우선순위 일부부터(아래 5절 순서). 1차 검증 후 확장.
|
||||
|
||||
## 4. 하드 제약 (위반 금지)
|
||||
1. 모든 상태변경(폼/AJAX)에 CSRF 적용 — 기존 `_csrf` hidden 또는 `window.BibimbapCsrf` 패턴 재사용. 디자인 폼엔 없으니 반드시 추가.
|
||||
2. `${ctx}` → `${pageContext.request.contextPath}` 치환 (또는 각 페이지 head에 `<c:set var="ctx" value="${pageContext.request.contextPath}"/>` 1줄 추가 후 유지 — 택1, 일관).
|
||||
3. include 경로 `common/` 제거 → `/WEB-INF/views/header.jsp`, `footer.jsp`. 디자인의 `<jsp:include header>`(head를 연다는 가정)는 **버리고**, 기존 페이지의 자체 head 구조 유지.
|
||||
4. 외부 라이브러리/CDN 0. 폰트 CDN 추가 금지(system 폰트 fallback 허용, 또는 로컬 폰트 별도 합의).
|
||||
5. MyBatis `#{}` 바인딩, JSP 출력 escape(`HtmlUtils.htmlEscape`/JSTL), 클라 렌더 `textContent` — 기존 보안 원칙 유지.
|
||||
6. 모델 속성명은 디자인 placeholder(`${games}`,`${game.title}`,`${myGames}`,`${reviews}` 등)가 아니라 **각 페이지 기존 JSP가 실제 쓰는 이름**을 사용 — 구현 전 해당 JSP에서 확인.
|
||||
|
||||
## 5. 권장 작업 순서 (단위별 커밋)
|
||||
1. **`bibimbap.css` 도입** (최저위험·최고가치): `src/main/webapp/css/bibimbap.css` 생성(zip의 css 복사, 폰트 줄은 system fallback로 조정). 전 페이지 head에서 로드되도록 **`theme-init.jsp`(각 페이지 head에 include되는지 먼저 확인) 또는 각 페이지 head**에 `<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bibimbap.css">` 1줄. header.jsp/기존 인라인 `<style>`과 클래스 충돌 점검.
|
||||
2. **Empty-state 파편 3종**: `posts-empty.jspf`·`recruit-empty.jspf`를 `/WEB-INF/views/fragments/`에 두고 `posts-list.jsp`/`recruit-list.jsp`의 빈 분기에 include. 라우트는 실제값(`/posts/new`, `/recruit/new`)으로 수정.
|
||||
3. **홈(index.jsp)**: 히어로 + 정렬칩 + 등록유도 카드. 모델/라우트는 index.jsp 실제값(홈 `/`, 검색파라미터 `q`)에 맞춤.
|
||||
4. **로그인/회원가입**: 디자인의 pw-toggle·강도막대·일치표시·에러슬롯 **마크업/클래스만** 기존 login.jsp/signup.jsp에 이식. 제출은 기존 AJAX+`window.BibimbapCsrf` 유지. `/password/reset` 링크는 라우트 신설 합의 전까지 비노출.
|
||||
5. **약관(terms.jsp)**: sticky 목차+조항 카드 구조 적용. 본문은 기존 terms.jsp 전문 유지(디자인 전문으로 덮어쓰기 전 차이 확인).
|
||||
6. **프로필(profile.jsp)**: 헤더+내 게임 행+공개토글. 공개토글 action은 실제 게임 visibility API(`/game/{id}` 계열, GameController 확인)로, CSRF 포함.
|
||||
7. **게임상세(game-detail.jsp)**: ⚠️ 통째 교체 금지. detail-meta 한 줄·16:9 player·review-cta·별점 CSS만 이식, 기존 WebGL/6축/리뷰 로직·CSRF 보존.
|
||||
8. **errer.jsp**: 디자인 error/error.jsp의 empty-state 403/404 마크업을 `errer.jsp`에 이식, `${statusCode}` 분기. 파일명·뷰명 `errer` 유지(컨트롤러 매핑).
|
||||
9. **모집 작성(recruit-form.jsp)**: 글자수·필수표시·sticky 라이브 미리보기 이식. 제출은 `/recruit/new` POST + 기존 AJAX/CSRF.
|
||||
|
||||
## 6. 검증 (코드 변경 시 필수)
|
||||
- L1: WAR 빌드(`./mvnw -q -DskipTests package` 또는 프로젝트 표준) 성공 + JSP EL/JSTL 문법 오류 0.
|
||||
- L2: 로컬 기동 후 각 변경 화면 스모크 — 로그인/회원가입 제출 동작(CSRF 통과), 게임상세 WebGL 플레이/리뷰 작성, 모집 작성 제출. `docs/development/verification-strategies.md` 기준.
|
||||
- 변경 후 `graph-refresh-checker` + docs 반영(docs-first).
|
||||
|
||||
---
|
||||
|
||||
## ▶▶ 새 세션에 붙여넣을 프롬프트
|
||||
|
||||
```
|
||||
/atp:task 클로드 디자인 리디자인 산출물(zip: /Users/wemadeplay/Downloads/Bibimbap 커뮤니티 웹사이트 리디자인.zip)을
|
||||
우리 프로젝트에 반영한다. 접근은 "파일 통째 교체가 아니라, 공유 src/main/webapp/css/bibimbap.css 신설 +
|
||||
디자인의 클래스/구조 개선을 기존 WEB-INF/views JSP에 입히는 비주얼 레이어 방식".
|
||||
|
||||
검토 세션 핸드오프 문서를 먼저 읽어라: .atp/work-session/20260630-153323/artifacts/handoff-prompt.md
|
||||
(디자인↔현실 불일치 표, 하드 제약, 작업 순서가 거기 정리돼 있다.)
|
||||
|
||||
하드 제약: (1) 모든 상태변경에 CSRF(_csrf hidden 또는 window.BibimbapCsrf) (2) ${ctx} 금지→
|
||||
${pageContext.request.contextPath} (3) include는 /WEB-INF/views/header.jsp (common/ 없음), 각 페이지
|
||||
자체 head 유지 (4) 외부 라이브러리/CDN 0 (5) game-detail.jsp 통째 교체 금지(WebGL/6축/리뷰 로직 보존)
|
||||
(6) 모델 속성명은 디자인 placeholder가 아니라 각 기존 JSP 실제값 사용.
|
||||
|
||||
순서: 1) bibimbap.css 도입+head link 2) empty-state 파편 3종 3) 홈 4) 로그인/회원가입(마크업만, 제출은
|
||||
기존 AJAX 유지) 5) 약관 6) 프로필 7) 게임상세(이식만) 8) errer.jsp(파일명 유지) 9) 모집작성.
|
||||
각 단위 커밋 + 변경 화면 빌드/스모크 검증.
|
||||
```
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
# ATP Work Session Report
|
||||
schema_version: 2.3.0
|
||||
sid: 20260630-153323
|
||||
started_at: 2026-06-30T15:33:23
|
||||
user_request: |
|
||||
클로드 디자인 툴 산출물(Bibimbap 커뮤니티 웹사이트 리디자인.zip — 7 JSP + bibimbap.css + 3 jspf + error.jsp)을
|
||||
우리 프로젝트에 반영. 단 이번 세션은 "검토만" 하고, 실제 작업은 새 세션에서 진행할 수 있도록
|
||||
"작업용 프롬프트"를 출력한다. (CSS는 공유 bibimbap.css 신설 방향)
|
||||
ended_at: 2026-06-30T15:40
|
||||
|
||||
## Summary
|
||||
zip(7 JSP + bibimbap.css + 3 jspf + error.jsp) 전수 검토 + 우리 실제 코드와 design↔reality 매핑 완료.
|
||||
핵심 발견: 라우트(/games 복수 vs 실제 /game 단수), 폼 제출(classic POST vs JSON API+AJAX),
|
||||
CSRF(전무 vs CsrfTokens/_csrf/window.BibimbapCsrf), contextPath(${ctx} vs ${pageContext.request.contextPath}),
|
||||
include(common/ 가정 vs 평면), 에러(web.xml/error.jsp vs errer 뷰), css 디렉토리(없음) 모두 불일치.
|
||||
→ 결론: 파일 통째 교체 금지, 공유 bibimbap.css 신설 + 비주얼 레이어 이식. 산출물 artifacts/handoff-prompt.md. 코드 변경 0.
|
||||
|
||||
## Invocations
|
||||
- research-advisor: stopped (워커 결과 미수신 루프) → orchestrator 직접 rg/Read 탐색으로 대체. read-only라 충돌 없음.
|
||||
|
||||
## verified_by_me
|
||||
- L1/L2: N/A (코드 변경 0 — 검토+문서 산출만)
|
||||
|
||||
## needs_user_verification
|
||||
- 새 세션에서 실제 구현 진행(handoff-prompt.md의 ▶ 프롬프트). 구현 시 L1 빌드 + L2 스모크 필수.
|
||||
|
||||
## graph_refresh
|
||||
skip: 코드 변경 0
|
||||
|
||||
## project_gate
|
||||
skip: no code change
|
||||
|
||||
## open_items
|
||||
- .atp/work-session/20260630-153323/ (이 세션 산출물, 미커밋) — 커밋 여부 사용자 결정 대기.
|
||||
- 무관 잔여: 이전 work-session 3건, graphify-out/.
|
||||
|
||||
# Advisor Invocation Decision Log
|
||||
- advisor: requirements-advisor
|
||||
decision: skip
|
||||
rationale: '사용자가 산출물/CSS방식/범위(검토만+프롬프트)를 AskUserQuestion으로 확정 — 스코프 명확.'
|
||||
checked_at: 2026-06-30T15:33
|
||||
- advisor: graphify-lookup-advisor
|
||||
decision: skip
|
||||
rationale: '매핑 정확도 위해 실제 코드 직접 대조가 필요. research-advisor 직접 사용.'
|
||||
checked_at: 2026-06-30T15:34
|
||||
- advisor: research-advisor
|
||||
decision: call
|
||||
rationale: '7개 화면의 우리 실제 컨트롤러 라우트·모델 속성명·CSRF·include·정적 서빙을 매핑해야 프롬프트가 정확.'
|
||||
checked_at: 2026-06-30T15:34
|
||||
- advisor: design/implementation/verification-advisor
|
||||
decision: skip
|
||||
rationale: '이번 세션 코드 변경 0(검토+프롬프트 산출만). 실제 구현은 새 세션.'
|
||||
checked_at: 2026-06-30T15:34
|
||||
Loading…
Reference in New Issue