Files
sam-react-prod/claudedocs/[IMPL] integrated-detail-template-checklist.md
유병철 6f457b28f3 refactor(WEB): 품목관리 경로 통합 - /items 삭제 및 /production/screen-production으로 일원화
- /items 폴더 삭제 (중복 경로 제거)
- /production/screen-production에 신버전 DynamicItemForm 기반 페이지 적용
- 구버전 ItemForm 연결 제거로 등록/수정 오류 해결
- 컴포넌트 내부 경로 참조 /items → /production/screen-production 변경
  - ItemListClient, ItemForm, ItemDetailClient, ItemDetailEdit, DynamicItemForm

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
2026-01-20 11:34:59 +09:00

8.8 KiB

V2 URL 패턴 마이그레이션 최종 현황

브랜치: feature/universal-detail-component 최종 수정: 2026-01-20 (v27 - 문서 정리)


📌 V2 URL 패턴이란?

기존: /[id] (조회) + /[id]/edit (수정) → 별도 페이지
V2:  /[id]?mode=view (조회) + /[id]?mode=edit (수정) → 단일 페이지

핵심: searchParams.get('mode') 로 view/edit 분기


📊 최종 현황 표

통계 요약

구분 개수
V2 완료 37개
제외 (복잡 구조) 2개
불필요 (View only 등) 8개
합계 47개

🏦 회계 (Accounting) - 8개

페이지 경로 V2 상태 비고
입금 /accounting/deposits/[id] 완료 Phase 5
출금 /accounting/withdrawals/[id] 완료 Phase 5
거래처 /accounting/vendors/[id] 완료 기존 V2
매출 /accounting/sales/[id] 완료 기존 V2
매입 /accounting/purchase/[id] 완료 기존 V2
세금계산서 /accounting/bills/[id] 완료 기존 V2
대손추심 /accounting/bad-debt-collection/[id] 완료 Phase 3
거래처원장 /accounting/vendor-ledger/[id] 불필요 조회 전용 탭

🏗️ 건설 (Construction) - 16개

페이지 경로 V2 상태 비고
노무관리 /construction/base-info/labor/[id] 완료 Phase 2
단가관리 /construction/base-info/pricing/[id] 완료 Phase 5
품목관리(건설) /construction/base-info/items/[id] 완료 기존 V2
현장관리 /construction/site-management/[id] 완료 Phase 3
실행내역 /construction/order/structure-review/[id] 완료 Phase 3
입찰관리 /construction/project/bidding/[id] 완료 Phase 3
이슈관리 /construction/project/issue-management/[id] 완료 Phase 3
현장설명회 /construction/project/bidding/site-briefings/[id] 완료 Phase 3
견적서 /construction/project/bidding/estimates/[id] 완료 Phase 3
협력업체 /construction/partners/[id] 완료 Phase 3
시공관리 /construction/construction-management/[id] 완료 Phase 3
기성관리 /construction/billing/progress-billing-management/[id] 완료 Phase 3
발주관리 /construction/order/order-management/[id] 완료 Phase 4
계약관리 /construction/project/contract/[id] 완료 Phase 4
인수인계보고서 /construction/project/contract/handover-report/[id] 완료 Phase 4
현장종합현황 /construction/project/management/[id] 제외 칸반 보드

💼 판매 (Sales) - 7개

페이지 경로 V2 상태 비고
거래처(영업) /sales/client-management-sales-admin/[id] 완료 Phase 3
견적관리 /sales/quote-management/[id] 완료 Phase 3
견적(테스트) /sales/quote-management/test/[id] 완료 Phase 3
판매수주관리 /sales/order-management-sales/[id] 완료 Phase 5
단가관리 /sales/pricing-management/[id] 완료 Phase 4
수주관리 /sales/order-management/[id] 불필요 복잡 워크플로우
생산의뢰 /sales/production-orders/[id] 불필요 조회 전용

👥 인사 (HR) - 2개

페이지 경로 V2 상태 비고
카드관리 /hr/card-management/[id] 완료 Phase 1
사원관리 /hr/employee-management/[id] 완료 Phase 4

🏭 생산 (Production) - 2개

페이지 경로 V2 상태 비고
작업지시 /production/work-orders/[id] 완료 Phase 4
스크린생산 /production/screen-production/[id] 완료 Phase 4

🔍 품질 (Quality) - 1개

페이지 경로 V2 상태 비고
검수관리 /quality/inspections/[id] 완료 Phase 4

📦 출고 (Outbound) - 1개

페이지 경로 V2 상태 비고
출하관리 /outbound/shipments/[id] 완료 Phase 4

📥 자재 (Material) - 2개

페이지 경로 V2 상태 비고
재고현황 /material/stock-status/[id] 불필요 LOT 테이블 조회
입고관리 /material/receiving-management/[id] 불필요 복잡 워크플로우

📞 고객센터 (Customer Center) - 3개

페이지 경로 V2 상태 비고
Q&A /customer-center/qna/[id] 완료 Phase 3
공지사항 /customer-center/notices/[id] 불필요 View only
이벤트 /customer-center/events/[id] 불필요 View only

📋 게시판 (Board) - 1개

페이지 경로 V2 상태 비고
게시판관리 /board/board-management/[id] 완료 Phase 3

⚙️ 설정 (Settings) - 3개

페이지 경로 V2 상태 비고
계좌관리 /settings/accounts/[id] 완료 Phase 1
팝업관리 /settings/popup-management/[id] 완료 Phase 3
권한관리 /settings/permissions/[id] 제외 Matrix UI

🔧 기준정보 (Master Data) - 1개

페이지 경로 V2 상태 비고
공정관리 /master-data/process-management/[id] 완료 Phase 3

📦 품목 (Items) - 1개

페이지 경로 V2 상태 비고
품목관리 /items/[id] 완료 Phase 5

🔧 V2 마이그레이션 패턴

Pattern A: mode prop 지원

기존 컴포넌트가 mode prop을 지원하는 경우

// page.tsx
const mode = searchParams.get('mode') === 'edit' ? 'edit' : 'view';
return <ExistingV2Component mode={mode} />;

// edit/page.tsx → 리다이렉트
router.replace(`/path/${id}?mode=edit`);

Pattern B: View/Edit 컴포넌트 분리

View와 Edit가 완전히 다른 구현인 경우

// 새 컴포넌트: ComponentDetailView.tsx, ComponentDetailEdit.tsx
const mode = searchParams.get('mode') === 'edit' ? 'edit' : 'view';

if (mode === 'edit') {
  return <ComponentDetailEdit id={id} />;
}
return <ComponentDetailView id={id} />;

📚 공통 컴포넌트 참조

컴포넌트 위치 용도
IntegratedDetailTemplate src/components/templates/IntegratedDetailTemplate/ 상세 페이지 템플릿
ErrorCard src/components/ui/error-card.tsx 에러 UI (not-found, network)
ServerErrorPage src/components/common/ServerErrorPage.tsx 서버 에러 페이지

📝 변경 이력

전체 변경 이력 보기 (v1 ~ v27)
날짜 버전 내용
2026-01-17 v1 체크리스트 초기 작성
2026-01-17 v2 심층 검토 반영
2026-01-19 v3 내부 컴포넌트 공통화 통합
2026-01-19 v4 스켈레톤 컴포넌트 추가
2026-01-19 v5 Chrome DevTools 동작 검증 완료
2026-01-19 v6 DetailField 미적용 이슈 발견
2026-01-19 v7 DetailField 미적용 이슈 해결 완료
2026-01-19 v8 📊 47개 상세 페이지 전체 분석 완료
2026-01-19 v9 📋 리스트/상세 차이 설명 추가, 🧪 기능 검수 섹션 추가
2026-01-19 v10 🔧 buttonPosition prop 추가
2026-01-19 v11 🚀 노무관리 마이그레이션 완료
2026-01-19 v12 🚀 단가관리(건설) 마이그레이션 완료
2026-01-19 v13 🚀 입금관리 마이그레이션 완료
2026-01-19 v14 📊 Phase 2 분석 및 대규모 재분류
2026-01-19 v15 Phase 2 최종 완료
2026-01-19 v16 🚀 Phase 3 라우팅 구조 변경 4개 완료, 🎨 ErrorCard 추가
2026-01-19 v17 🚀 Phase 3 대손추심 완료
2026-01-19 v18 🚀 Phase 3 Q&A 완료
2026-01-19 v19 🚀 Phase 3 건설/판매 도메인 3개 추가 완료
2026-01-19 v20 🧪 견적 테스트 페이지 V2 패턴 적용
2026-01-19 v21 🚀 Phase 3 건설 도메인 4개 추가 완료
2026-01-19 v22 🚨 ServerErrorPage 필수 적용 섹션 추가
2026-01-19 v23 🚀 기성관리 V2 마이그레이션 완료
2026-01-19 v24 📊 Phase 3 최종 분석 완료
2026-01-19 v25 🚀 Phase 4 추가 (9개 페이지 식별)
2026-01-19 v26 🎯 Phase 5 완료 (5개 V2 URL 패턴 통합)
2026-01-20 v27 📋 문서 정리 - 최종 현황 표 중심으로 재구성