diff --git a/.atp/work-session/20260630-175023/documentation.md b/.atp/work-session/20260630-175023/documentation.md new file mode 100644 index 0000000..830c9af --- /dev/null +++ b/.atp/work-session/20260630-175023/documentation.md @@ -0,0 +1,26 @@ +--- +phase: documentation +agent: documentation-advisor +agent_version: 1 +generated_at: 2026-06-30T18:20:00+09:00 +concerns: [] +concerns_checked: true +--- + +# 문서화 보고 + +## 작성/수정된 문서 +| 경로 | 카테고리 | 유형 | 링크 추가한 index | 교차 링크 | +|---|---|---|---|---| +| `docs/changes/2026-06-30-ui-multiaxis-ratio-visibility-fix.md` | changes | 신규 | `docs/changes/index.md` (최신 항목 1줄) | 선행 2건(visual-redesign, redesign-token-coherence) + verification-strategies.md 레슨 (양방향) | +| `docs/changes/index.md` | changes | 수정 | — | 신규 changes 문서 링크 추가 | +| `docs/development/verification-strategies.md` | development | 수정 | — | 신규 changes 문서로 back-link 추가(L304 레슨 근거 줄) | + +## 의사결정 기록 위치 +- 런타임 동작(JSP/CSS 시각) 변경 → `docs/changes/` (런타임 동작 변경 기준). 사례(work-log/case) 성격이나 사용자 요청대로 기존 2026-06-30-*.md 형식에 맞춰 changes/ 에 기록. +- 진단 휴리스틱(다축 스캔 선행) 교훈은 이미 `docs/development/verification-strategies.md` L304 에 본 세션(20260630-175023) 근거로 등록되어 있었음 → 중복 생성 없이 changes 문서에서 상호참조 + 역링크만 추가. + +## 추후 문서화가 필요한 항목 +- ADR 부재: "고스트 버튼에 골드 accent 토큰 재사용" 설계 결함은 이번에 `--color-text` 로 정정됐으나 토큰 사용 규약(어느 토큰을 어느 컴포넌트에)이 별도 문서화되어 있지 않음. 토큰 거버넌스가 반복되면 architecture/ 또는 ADR 후보. +- needs_user_verification 2건(로그인 상태 스모크 / 실게임 가로 썸네일 4:3 크롭)은 changes 문서에 명시 — 사용자 확인 후 maintenance/post-deploy 체크리스트 반영 여부 검토 가능. +- graph_refresh partial-stale(report.md open_items): docs/changes 노드 backlog + source_commit stale — 다음 구조변경 시 /graphify full. 본 문서 작업 산출 아님(graphify-update-advisor 몫). diff --git a/.gitignore b/.gitignore index 135799e..ee3d000 100644 --- a/.gitignore +++ b/.gitignore @@ -42,3 +42,6 @@ certs/*.pem ### Test static resources ### src/main/resources/static/ + +# graphify 산출 본체(재생성 가능) — 메타는 docs/graph/index.md 만 커밋 +graphify-out/ diff --git a/docs/changes/2026-06-30-ui-multiaxis-ratio-visibility-fix.md b/docs/changes/2026-06-30-ui-multiaxis-ratio-visibility-fix.md new file mode 100644 index 0000000..a3cbdaf --- /dev/null +++ b/docs/changes/2026-06-30-ui-multiaxis-ratio-visibility-fix.md @@ -0,0 +1,64 @@ +# 2026-06-30 게임 카드 비율·모집 가시성 — 다축 평가 후 13건 시각 결함 수정 + +**세션**: sid 20260630-175023 +**브랜치**: feat/v2 +**선행**: [2026-06-30-visual-redesign-bibimbap-css.md](./2026-06-30-visual-redesign-bibimbap-css.md) / [2026-06-30-redesign-token-coherence-fix.md](./2026-06-30-redesign-token-coherence-fix.md) — 리디자인(cf1e7ce 등) 미해결 결함 2건의 재검·수정 + +## 배경 + +직전 리디자인 세션이 마감했음에도 사용자가 지적한 시각 결함 2건이 남아 있었다. + +- **이미지 #2 (메인 게임 허브)**: 게임 카드 썸네일 "비율" 문제. +- **이미지 #3 (팀원 모집 빈 상태)**: "가시성" 떨어지는 케이스. + +"비율"을 카드 종횡비 단일 축으로 조기 협소화해 첫 `AskUserQuestion` 옵션을 설계했으나, +사용자가 "이미지 미리보기뿐 아니라 상단에 검색바도 혼자 짧다"로 **레이아웃 비율 축**을 직접 교정. +이를 받아 **multi-axis 멀티에이전트 평가**(관찰 1 → 레이아웃비율·카드종횡비·대비가시성·타이포간격 +4축 병렬 → 종합 1, 총 6 에이전트)로 전환해 13건 결함 + 1 결정필요(카드 종횡비)로 복원했다. +사용자 결정: **카드 4:3** + **전체 13건** 적용. + +## 변경 (13건) + +| 파일 | 항목 | 내용 | +|---|---|---| +| `views/index.jsp` | #1 검색바 풀폭 | `.search-section` 풀폭 + `.search-stack` wrapper(검색행/상세검색을 우측 끝선 정렬, 픽셀 margin 대신 컬럼 wrapper로 버튼 텍스트 가변 대응) | +| `views/index.jsp` | 카드 그리드 | `.card-grid` `auto-fill` | +| `views/index.jsp` | #13 카드 종횡비 | `.card__media` `aspect-ratio` `4/5→4/3`, `.card__img` `object-position:center` | +| `css/bibimbap.css` | #2 고스트 버튼 대비 | `.btn-ghost` `color` `on-accent→text`(다크 `#3A2E15` on `#222018` ≈1.1:1 → `--color-text` 적용 ≈13:1) | +| `css/bibimbap.css` | 다크 보더 가시성 | 다크 `--color-border` `0.08→0.20` | +| `css/bibimbap.css` | #6·#7 정렬칩/라벨 | `.sort-label` 대비·위계 정리, 정렬칩 보더 | +| `css/bibimbap.css` | #11 빈상태 패딩 | `.empty-state` `padding` `clamp` | +| `css/bibimbap.css` | disabled 토큰화 | `.btn:disabled` 토큰화 | +| `views/recruit-list.jsp` | #10 히어로 폭 | `.recruit-hero__titles` `max-width` | +| `views/recruit-list.jsp` | #8 eyebrow 통일 | eyebrow mono 통일(공용 클래스 대신 로컬 시각스펙 일치 — index/bibimbap 토큰계열 분리 + font-mono 토큰 부재) | +| `views/recruit-list.jsp` | #9 빈상태 CTA 강등 | 빈상태 시 `.recruit-write` 조건부 ghost(골드 CTA 1개로 위계 정리) | +| `views/recruit-list.jsp` | 검색 폭 | 검색 `max-width` `48rem` | + +조정 사항: #4 는 픽셀 margin 대신 `.search-stack` 컬럼 wrapper(버튼 텍스트 가변 대응 결정적), +#8 은 공용 클래스 대신 로컬 시각스펙 일치(토큰계열 분리 제약). `recruit-empty.jspf` 는 무편집. + +## 검증 + +| 레벨 | 결과 | +|---|---| +| L1 — 정적 | `index.jsp` div 18/18·`recruit` 6/6 균형, scriptlet 균형, U+FFFD 0, stray taglib 0(적신호 없음) | +| L2 — 런타임 스모크 | bibimbap-app(`mvn spring-boot:run`) 재기동 → GET `/` + `/recruit` = 200 → 브라우저 육안 **라이트+다크 양 화면** | +| L2 — 결함 해소 | 이미지 #2(비율): 검색바 풀폭 정렬 + 카드 4:3(`object-position`) 해소. 이미지 #3(가시성): 필터 초기화 흰글자+보더 명확(zoom 확정) 해소. 부수 #6·#7·#8·#9·#10·#11·푸터 비잘림 육안 확인 | + +`error.jsp` JSTL 로그(07:35Z JasperException)는 재기동(09:19Z) 이전의 stale 라인 — 현재 `/error` 200, 회귀 아님. + +## 커밋 + +- `9489365` — 수정 13건 +- `c688aa6` — 교훈 + 회고 + +## needs_user_verification + +- 로그인 상태 1회 스모크(본 검증은 로그아웃 상태만): (a) 메인 '신규 게임 개시' 버튼 노출 시 #4 `search-stack` 우측 끝선 정렬, (b) 모집글 ≥1건 시 #9 히어로 골드 CTA 유지. +- 실게임 가로 썸네일 업로드 시 4:3 cover 크롭 인상 최종 확인(더미는 폴백 로고만 노출). + +## 교훈 연결 + +[development/verification-strategies.md](../development/verification-strategies.md) `### 모호한 시각 결함 어휘는 +단일 결정축 협소화 전 다축 스캔 선행` 신규 레슨으로 등록(근거: 본 세션). 외부 ATP 번들 §4.4 item5 +(가시성·표현·레이아웃 축 누락 주의)를 **선행 게이트**(옵션 설계 전 다축 스캔)로 강화 권고와 상호참조. diff --git a/docs/changes/index.md b/docs/changes/index.md index 7eb057c..fb04e1a 100644 --- a/docs/changes/index.md +++ b/docs/changes/index.md @@ -13,3 +13,4 @@ - [2026-06-30-screenshot-guide-auth.md](./2026-06-30-screenshot-guide-auth.md) — 스크린샷 가이드 인증 흐름 추가. 비인증 7장 → 인증 포함 최대 14장. Playwright AJAX 로그인(expect_navigation) + SCREENSHOT_EMAIL/PASSWORD env var 분기 + 리뷰/댓글 composer hidden 강제 노출 폴백. - [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. diff --git a/docs/development/verification-strategies.md b/docs/development/verification-strategies.md index e79771c..7fdb06d 100644 --- a/docs/development/verification-strategies.md +++ b/docs/development/verification-strategies.md @@ -305,4 +305,4 @@ graphify(`/graphify src/ docs/`)는 `src/main/webapp/WEB-INF/views/*.jsp`, `src/ "비율이 떨어진다 / 가시성이 떨어진다" 같은 **모호한 시각 결함 어휘**는 결함의 위치를 한정하지 않는다. 이를 곧장 단일 결정축(예: "비율" → 카드 종횡비)으로 좁혀 `AskUserQuestion` 을 던지면, 같은 어휘가 가리키던 다른 축(레이아웃 비율·정렬·대비·표현 총량)이 옵션 공간에서 누락된다. 모호 시각 어휘 수신 시 옵션 축을 확정하기 **전에** 다축 스캔(최소 레이아웃비율·종횡비·대비가시성·타이포간격 4축)을 선행한다. 스크린샷이 있으면 관찰 1 에이전트 → 축별 병렬 평가 → 종합의 multi-axis 위임(`ui-multiaxis-eval` 패턴)이 협소화 맹점을 구조적으로 메운다. UI/UX 변경 검증은 §291 런타임 스모크를 **라이트/다크 양 테마 × 영향 화면 전수** 육안으로 수행한다(토큰 대비·종횡비는 테마별로 다르게 발현). -> 근거: 세션 20260630-175023 — 사용자 지적 "비율/가시성" 2건을 카드 종횡비 단일 축으로 협소화 → 사용자가 "검색바도 혼자 짧다"로 레이아웃 비율 축 직접 추가. 이후 multi-axis 위임 평가(6 에이전트)가 13건 결함으로 복원, 라이트/다크 양화면 스모크로 검증. +> 근거: 세션 20260630-175023 — 사용자 지적 "비율/가시성" 2건을 카드 종횡비 단일 축으로 협소화 → 사용자가 "검색바도 혼자 짧다"로 레이아웃 비율 축 직접 추가. 이후 multi-axis 위임 평가(6 에이전트)가 13건 결함으로 복원, 라이트/다크 양화면 스모크로 검증. 변경 상세: [changes/2026-06-30-ui-multiaxis-ratio-visibility-fix.md](../changes/2026-06-30-ui-multiaxis-ratio-visibility-fix.md).