테마
Story: 매입원가 테이블 연동
메타
| 항목 | 값 |
|---|---|
| Story ID | E-03-S-05 |
| Epic | E-03 원가 히스토리 |
| 상태 | draft |
| 우선순위 | P0 |
| 규모 | M |
| 담당 개발자 | FE (수민님) |
사용자 스토리
As a 셀러, I want 매입원가 테이블에서 히스토리 존재 여부를 확인하고 모달에 진입, So that 원가 변동 이력이 있는 상품을 쉽게 파악하고 관리할 수 있다.
수락 기준 (Acceptance Criteria)
AC-01: 히스토리 아이콘 표시
| 항목 | 내용 |
|---|---|
| Given | 매입원가 테이블 표시 |
| When | 상품에 원가 히스토리 존재 (2개 이상 이력) |
| Then | 원가 셀에 히스토리 아이콘(📜) 표시 |
UI 요소:
┌──────────────────────────────────────────────────────────────────────┐
│ 상품명 │ 판매가 │ 매입원가 │ 수수료 │ 순이익 │ 마진율 │
├──────────────┼──────────┼────────────┼─────────┼─────────┼─────────┤
│ 오뚜_그로스2 │ 35,000원 │ 25,800원 📜│ 3,500원 │ 5,700원 │ 16.3% │
│ 일반상품A │ 20,000원 │ 12,000원 │ 2,000원 │ 6,000원 │ 30.0% │
└──────────────────────────────────────────────────────────────────────┘상세 스펙:
- 아이콘: 📜 또는 커스텀 아이콘 (히스토리/시계 모양)
- 툴팁: "원가 이력 보기"
- 히스토리 없으면 아이콘 없음
AC-02: 아이콘 클릭 → 모달 오픈
| 항목 | 내용 |
|---|---|
| Given | 히스토리 아이콘 클릭 |
| When | 클릭 |
| Then | 원가 히스토리 관리 모달 오픈 (E-03-S-04) |
상세 스펙:
- 모달에 해당 상품 ID 전달
- 모달 닫으면 테이블 데이터 갱신
AC-03: 테이블 직접 원가 수정
| 항목 | 내용 |
|---|---|
| Given | 매입원가 셀 더블클릭 (기존 기능) |
| When | 원가 변경 후 저장 |
| Then | 오늘 날짜 기준 새 이력 생성, 아이콘 표시 |
상세 스펙:
- 기존 인라인 편집 기능 유지
- 저장 시 API는 E-03-S-03의 간편 수정 API 호출
- 저장 후 히스토리 아이콘 자동 표시 (2개 이상 이력)
AC-04: 히스토리 상태 표시 (선택)
| 항목 | 내용 |
|---|---|
| Given | 상품에 원가 이력 존재 |
| When | 아이콘 hover |
| Then | 간략 정보 툴팁 표시 |
UI 요소:
📜 hover 시:
┌─────────────────────────┐
│ 원가 이력 (3건) │
│ 현재: 25,800원 │
│ 이전: 14,520원 (12/15~) │
│ 클릭하여 관리 │
└─────────────────────────┘태스크 분해
Task 1: 히스토리 아이콘 표시 AC-01
- [ ] 1.1: 테이블 데이터에 hasHistory 필드 추가 (API 또는 프론트 계산)
- [ ] 1.2: 원가 셀에 조건부 아이콘 렌더링
- [ ] 1.3: 아이콘 스타일링
Task 2: 모달 연동 AC-02
- [ ] 2.1: 아이콘 클릭 핸들러
- [ ] 2.2: 모달 상태 관리 (열기/닫기, 선택 상품)
- [ ] 2.3: 모달 닫을 때 테이블 refetch
Task 3: 인라인 편집 연동 AC-03
- [ ] 3.1: 기존 인라인 편집 API 변경 (간편 수정 API 연동)
- [ ] 3.2: 저장 후 아이콘 상태 갱신
Task 4: 툴팁 (선택) AC-04
- [ ] 4.1: Hover 시 간략 정보 조회 또는 캐시 활용
- [ ] 4.2: 툴팁 컴포넌트
Task 5: 마무리
- [ ] 5.1: 반응형 처리 (모바일에서 아이콘 터치)
- [ ] 5.2: PR 생성
Dev Notes (AI Agent 최적화)
영향 받는 소스 트리
src/
├── app/
│ └── dashboard/
│ └── purchase/
│ ├── page.tsx # 🔧 모달 상태 추가
│ └── components/
│ ├── PurchaseTable.tsx # 🔧 수정 (아이콘, 클릭)
│ ├── PurchasePriceCell.tsx # 🔧 또는 신규 (셀 컴포넌트)
│ └── PurchaseHistoryModal.tsx # E-03-S-04에서 생성
└── hooks/
└── usePurchaseHistory.ts # E-03-S-04에서 생성기존 테이블 구조 확인 필요
현재 매입원가 테이블:
- 컬럼: 상품명, 판매가, 매입원가, 수수료, 순이익, 마진율
- 인라인 편집: 매입원가 셀 더블클릭
- 페이지네이션: 있음충돌 감지
| 항목 | 상태 | 설명 |
|---|---|---|
| 기존 코드 충돌 | 🟡 주의 | PurchaseTable.tsx 수정 필요 |
| 기존 인라인 편집 | 🟡 주의 | API 변경으로 동작 확인 필요 |
의존성
| 의존 | 설명 | 상태 |
|---|---|---|
| E-03-S-03 | 원가 히스토리 CRUD API | 선행 필요 |
| E-03-S-04 | 원가 히스토리 관리 모달 UI | 병행 가능 |
Dev Agent Record
| 항목 | 값 |
|---|---|
| 생성 Agent | Claude Opus 4.5 |
| 생성일 | 2026-01-27 |
| 마지막 수정 | 2026-01-27 |
| 검증자 | - |
검증 결과: 🔄 PENDING (PO 승인 대기) 검증일: -
생성일: 2026-01-27마지막 수정: 2026-01-27