---
title: "📋 작업보고 — 기록 상세 비주얼 카드(조회 카드 + 수정 /log 재활용 A안) + 死코드 전수청소"
category: "report"
parent: "Claude Code 작업보고"
updated: "2026-07-04"
priority: "High"
purpose: "기록(History) 상세 조회를 승인 목업 비주얼 카드로 전환(데스크탑 우측 패널/모바일 전체화면). 수정 ✎은 /log 기록하기 폼을 카드 위 오버레이 모달로 재활용(A안, 페이지 이동 없음). 저장 시 editId update, 저장/취소 시 카드 즉시 복귀. 우클릭 컨텍스트 수정도 A통일. renderDetailX 死코드 및 死 CSS 전수청소 포함."
read_when: ["기록 상세 카드","RecordDetailCard","수정 A안 오버레이","LogEntry embed","비주얼 카드","우클릭 수정","死코드 청소","record-detail","phase1-release 배포"]
document_type: "작업보고"
source_status: "generated"
knowledge_group: "03_history"
work_timestamp: "20260704_113659"
source_of_truth: "https://dallog-tools.hansbridge.co.kr/knowledge/"
context: "달록본레포CC (D:\\dallog\\dallog_git)."
---

> 대상 `phase1-release` → `main`·`demo-dallog`. 시각 SoT = 승인 목업 `본레포 docs/ui_rebuild/record-detail-card/`(체성분/러닝/근력 싱글·데스크탑 목업). 데모/메인 URL로 사장님 육안 확인 완료. 배포 최종: main `0b8697b` · demo `3d4f0dd` · phase1-release `83962b4`.

## 1. 목적
- 기존 중앙 상세 모달(정보표 느낌)을 **비주얼 기록 카드**로 전환. 체성분/러닝/근력 기록 클릭 시 **데스크탑=우측 고정 패널 / 모바일=전체 화면 카드**.
- 시각 기준: 승인 목업 원문 이식(임의 디자인 해석 금지). 시드이미지 3종 배경 + 하단 검정 그라데이션 + 흰색 텍스트.

## 2. 조회 카드
- 공용 컴포넌트 **`src/components/recordDetail/RecordDetailCard.tsx`**(순수 프레젠테이션, VM만 받음).
- History에서 record→표시 VM 변환(`buildBodyVM/buildRunVM/buildStrVM`) — 기존 포맷터(`withWeekday`·`secToDuration`·`secToPace`·`speedKmh`·`fmtRunTime` 등) 재사용, 계산/DB 무접촉.
- 배경 seed: `public/record-detail/{body,running,strength}-seed.png`(원본 docs 보존, 목업 이미지는 앱에 직접 삽입 안 함).
- 카드 톤은 라이트에서도 `--rdc-*` 토큰으로 다크 유지(주변 UI만 테마 추종). raw color/px 미사용.
- 러닝(7지표)·근력(다종목) 카드 내부 독립 스크롤, 모바일 전체 스크롤.

## 3. 수정 = /log 폼 재활용 (A안, 최종 채택)
- **카드 '수정 ✎' → 페이지 이동 없이 History 위 오버레이 모달로 `/log` 폼(LogEntry)을 embed 재활용.** History가 언마운트되지 않아 저장/취소 시 카드로 **즉시 복귀(잔상 0)**.
- `LogEntry`에 `embed?: {tab, editId, onDone, onCancel}` prop 추가 — embed면 URL 대신 prop 구동, 저장 성공→`onDone`, 닫기→`onCancel`, 탭 스위처 숨김, 타이틀 `수정하기`. **/log 라우트 페이지 모드는 기존 그대로 보존.**
- 저장: **editId 기준 update(체성분/러닝/근력 3종 동일 원칙 — 날짜 변경 대비 upsert 아닌 id update)**. 신규 작성 경로는 별도 분기로 불간섭.
- 저장 완료 → 모달 닫고 재조회 → 동기화 효과가 열린 카드를 최신 레코드로 in-place 갱신.
- 우클릭 컨텍스트 '수정'도 동일하게 A 오버레이로 통일(`startEditFromContext`→`openEdit`).
- (경과) 최초 B안(=/log 페이지 이동 후 `?open=`으로 복귀, 모듈캐시로 첫프레임 카드)으로 구현했으나 페이지 전환 잔상이 남아 A안으로 재작업. 상세는 별도 의사결정 문서 참조.

## 4. 액션 연결
- **루틴으로 저장 +** = 기존 `saveSessionAsRoutine`, 종목별 **저장 +** = 기존 `saveExerciseAsTemplate`(신규 저장 로직 안 만듦).
- **닫기 X** = 선택 기록 해제. ESC·데스크탑 dim 클릭 닫기.
- **게스트**: 카드 수정 미노출(게스트 편집은 원래도 무동작 + /log 수정모드가 로컬 기록 미지원이라 중복 생성 방지). 조회·닫기·루틴저장 제한은 기존 정책 따름.

## 5. 死코드 전수청소 (토큰맵 작업 gate-free)
- 조회를 카드로 전환하며 **인라인 상세 모달(`detailModal`·`renderDetailBody/Run/Str`) 死화 → 전량 제거.**
- 연쇄 orphan(`startEditX`·`requestSaveEdit*`·`editXForm` 상태·`editStr*` 헬퍼·`editingXId`·`updateBodyProject`·`calcBodyDelta`) **死 JS 212줄 제거.**
- **死 CSS 65종**: 삭제된 renderDetailX className을 git에서 전수 추출 → 전 src exact-match 0참조 검증 → `hist-detail-*`·`hist-form*`·`hist-str-편집*`·`hist-btn-edit/save/cancel/accent/danger`·`hist-input` 死 modifier·`hist-label`·`hist-project-select`·`hist-time-grid`·`hist-norecord--lg` 제거. 공유 클래스(`hist-input`·`--select`·`--search`·`hist-norecord`·`hist-str-exlist`)는 사용처 검증 후 보존. `.rdc-host--preview`·컴포넌트 `placement` prop 제거. **死 잔존 0 전수 확인.**
- 데모 전용 목업 프리뷰(`/__record-detail-preview`)는 검수 종료 후 라우트·페이지·CSS 제거.

## 6. 수정 파일
- 신규 `src/components/recordDetail/RecordDetailCard.tsx`
- 수정 `src/pages/History.tsx`, `src/pages/LogEntry.tsx`, `src/index.css`, `src/App.tsx`
- 신규 asset `public/record-detail/{body,running,strength}-seed.png`

## 7. 검증
- `npm run build`(tsc+vite) 통과. 한글 mojibake 0(매 편집 git diff 검증).
- Codex 사후검수 각 단계 시행 — 러닝 pace 재계산은 /log 고유 모델로 유지, 근력 세트 삭제는 History 검증 경로와 동일(명시 삭제)로 보정, 프리필 데드락 게이트 제거 등 [즉시반영] 반영. 기능 회귀 없음 확인.
- 데모/메인 URL 사장님 확인: `/history` 기록 클릭 → 카드 → 수정 저장/취소 즉시 복귀.

## 8. 의도적으로 안 건드린 범위
DB 스키마·통계/캘린더 계산·AI 보내기·내보내기/가져오기·계정삭제·소셜로그인·라우팅 대개편.