--- title: "G-3. 체성분 피트니스 프로젝트 연동 UI 통합" notion_id: "36422962086881a8a948d2cb5881d1e1" notion_url: "https://app.notion.com/p/36422962086881a8a948d2cb5881d1e1" category: "workreport" parent: "Claude Code 작업보고" updated: "2026-05-17" priority: "Medium" purpose: "체성분 섹션 피트니스 프로젝트 단위 필터 연동 및 히스토리·입력·설정 후속 UI 7종 통합" --- ## 📋 스터디 요약 - **파트-섹션**: G-3 - **작업 주제**: 체성분 섹션 피트니스 프로젝트 단위 필터 연동 + 후속 UI 7종 통합 (키워드 안내문구 제거, 히스토리 카드/디테일에 프로젝트명·드롭다운, 기록 입력 폼 프로젝트 선택·닫기 버튼, 설정 피트니스 목표 토글·진행률·종속 기록 목록) - **작업일**: 2026-05-17 - **에이전트**: Claude Code - **브랜치**: main ### 작업 흐름 요약 사용자가 체성분 섹션(BodySection.tsx)의 키워드 필터를 피트니스 목표 프로젝트 단위로 연동하기 위해 app_settings의 fitness_projects JSON을 읽어 프로젝트 선택 UI를 추가하라는 1차 지시 전달 → Claude Code가 BodyRecord 타입에 project_id 추가, BodySection에 프로젝트 셀렉트와 클라이언트 필터링을 구현하고 main에 커밋·푸시 (외부 도구 개입으로 의도하지 않은 2개 파일이 추가 커밋된 점 보고) → 사용자가 후속 UI 7종(키워드 안내문구 삭제, 히스토리 row/large/디테일 프로젝트명 표기, BMR 우측 프로젝트 변경 드롭다운, 기록 입력 폼 프로젝트 선택·닫기 버튼, 설정 피트니스 목표 토글화·진행률 바·종속 기록 목록) 지시 전달 → Claude Code가 SummaryBrief/History/LogEntry/Settings 4개 파일에 7개 항목 모두 구현, 빌드 통과 후 명시적 staging으로 main 커밋·푸시 완료 → 사용자가 대화 전체를 MD로 추출 요청 → Claude Code가 추출 완료 보고 후 작업 종결. --- ## 📄 원본 대화 전체 (raw) # 25. 체성분 피트니스 프로젝트 연동 UI 통합 --- ## [User] 1차 작업 지시 — 체성분 섹션 키워드 필터를 피트니스 프로젝트 단위로 연동 ※ 주의: 동일 작업을 수행 중인 다른 에이전트가 있을 수 있음. 작업 시작 전 반드시 git status 확인 후 충돌 여부 점검할 것. 작업 전 git pull로 최신 원격 커밋 기준 동기화할 것. 충돌 또는 예상치 못한 변경사항 감지 시 임의로 git reset 하지 말고 작업 중단 후 보고할 것. ## 작업 목표 체성분 섹션(BodySection.tsx)의 키워드 필터를 피트니스 목표 프로젝트 단위로 연동한다. ## 배경 - Supabase body_records 테이블에 project_id(UUID) 컬럼이 추가되어 있음 - 피트니스 목표는 app_settings 테이블의 fitness_projects 키에 JSON 배열로 저장됨 구조: [{ id, name, start_date, target_date, start_body, goal_body, ... }] - 현재 project_id 값: 29b29e0a-e77f-4fe6-915d-96b5b6c9d730 (2026_마지막 다이어트) - 전체기간(생애 전체 기록)과 프로젝트 단위는 별개로 취급해야 함 ## 구현 내용 1. app_settings에서 fitness_projects JSON을 읽어 프로젝트 목록을 로드 2. 체성분 summary 키워드 영역에 프로젝트명 선택 UI 추가 - "전체기간" 옵션 항상 포함 (기본값) - 등록된 프로젝트명 목록 표시 3. 프로젝트 선택 시 해당 project_id로 body_records 필터링하여 summary 표시 4. "전체기간" 선택 시 project_id 필터 없이 전체 조회 ## 수정 파일 - src/components/dashboard/BodySection.tsx (메인) - 필요 시 src/pages/Dashboard.tsx, src/pages/History.tsx ## 주의사항 - parseVisualBrief(), renderNoteContent() 계열 함수 건드리지 말 것 - 데스크탑 최적 컨테이너 우선 설계 후 모바일 반응형 적용. 모바일 퍼스트 금지. - 기존 체성분 그래프/summary 로직 건드리지 말 것 (Y축 동적 범위 등 기존 완성된 부분) ## 완료 기준 - 프로젝트명 선택 시 해당 기간 체성분 데이터만 summary에 표시 - 전체기간 선택 시 전체 데이터 표시 - npm run build 에러 없음 - main 브랜치 커밋·푸시 --- ## [Assistant] 1차 작업 진행 작업 시작 전 git 상태 확인하고 BodySection 구조 파악하겠습니다. ### git status / pull ```javascript On branch main Your branch is up to date with 'origin/main'. nothing to commit, working tree clean Already up to date. ``` ### BodySection.tsx 현재 코드 파악 (요약) - `BodyRecord[]` props만 받음 - sorted/latest/prev 도출 → 4개 stat (체중·골격근·체지방량·체지방률) + 3개 라인 차트 - 기존 증감(delta) 표기, 기록일 표기 로직 유지 ### Dashboard.tsx 데이터 흐름 - `supabase.from('body_records').select('*').order('recorded_at', { ascending: false }).limit(180)` 로 로드 후 BodySection에 prop 전달 - select('*') 사용 중이므로 project_id 컬럼은 자동 포함 ### fitness_projects 패턴 - `src\pages\Settings.tsx`, `src\lib\supabase.ts`, `migrations\2026-05-16_strength_v2.sql` 에서 참조 - Settings에서 `app_settings.upsert({ key: 'fitness_projects', value: JSON.stringify(next) })` 패턴으로 저장 - FitnessProject 타입: `{ id, name, memo, start_date, target_date, start_body, goal_body, display_metric, created_at }` ### BodyRecord 타입 (수정 전) - project_id 필드 누락 → 추가 필요 ### 작업 계획 1. supabase.ts BodyRecord에 project_id 필드 추가 2. BodySection.tsx 내부에서 fitness_projects 로드 (useEffect) + 필터링 (useState + useMemo) 3. UI: BODY 헤더 아래 "기간" 셀렉트 (전체기간 + 프로젝트 목록) 4. Dashboard.tsx, History.tsx는 수정 불필요 (History는 BodySection 미사용) ### Edit 1 — src/lib/supabase.ts `BodyRecord`에 `project_id: string | null` 필드 추가. ### Edit 2 — src/components/dashboard/BodySection.tsx 전면 재작성 - `useEffect`로 `supabase.from('app_settings').select('value').eq('key', 'fitness_projects').maybeSingle()` 호출 - `selectedProjectId` state (`'__all__'` 기본값) - `useMemo`로 filteredBodies 도출 — 전체기간이면 그대로, 아니면 `b.project_id === selectedProjectId` 필터 - sorted/latest/prev/차트 데이터 모두 filteredBodies 기반 - BODY 헤더 아래 셀렉트 박스: `` + `— 미지정 —` 옵션 + projects.map ### 항목 5~6 — LogEntry.tsx **State / 로드**: ```typescript type ProjectOpt = { id: string; name: string; target_date?: string; created_at?: string } const [projects, setProjects] = useState([]) ``` `reloadStrengthMeta` 안에서 `fitness_projects` 파싱도 함께 처리. **bodyForm 확장**: `project_id: ''` 필드 추가. **활성 프로젝트 휴리스틱**: ```typescript const activeProjectId = useMemo(() => { if (projects.length === 0) return '' const todayStr = today() const ongoing = projects .filter(p => !p.target_date || p.target_date >= todayStr) .sort((a, b) => (a.target_date || '9999').localeCompare(b.target_date || '9999')) if (ongoing[0]) return ongoing[0].id const byCreated = [...projects].sort((a, b) => (b.created_at || '').localeCompare(a.created_at || '')) return byCreated[0]?.id || '' }, [projects]) ``` → useEffect로 폼이 비어 있을 때 1회 기본값 세팅. **handleBodySave**: upsert payload에 `project_id: bodyForm.project_id || null` 추가. **UI — 항목 5**: BMR 셀의 `gridColumn: '1 / -1'` 제거 → 다른 지표 셀과 같은 너비. 그 옆에 "프로젝트" form-group + `