SamProject/sam-react-prod
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f320ec7d37cb8da5e07b33be8d4bf3194ed04524
sam-react-prod/claudedocs/quality/[IMPL-2025-12-23] inspection-management-checklist.md
byeongcheolryu f0e8e51d06 feat: 생산/품질/자재/출고/주문 관리 페이지 구현 
- 생산관리: 대시보드, 작업지시, 작업실적, 작업자화면
- 품질관리: 검사관리 (리스트/등록/상세)
- 자재관리: 입고관리, 재고현황
- 출고관리: 출하관리 (리스트/등록/상세/수정)
- 주문관리: 수주관리, 생산의뢰
- 기존 컴포넌트 개선: CardTransactionInquiry, VendorDetail, QuoteRegistration
- IntegratedListTemplateV2 개선
- 공통 컴포넌트 분석 문서 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-23 21:13:07 +09:00

5.6 KiB
Raw Blame History

검사관리 구현 체크리스트

URL: /quality/inspections 생성일: 2025-12-23 상태: ✅ 완료

스크린샷 분석 요약

1. 검사 목록 (리스트)

  • 상단 카드: 금일 대기 건수, 진행 중 검사, 금일 완료 건수, 불량 발생률(%)
  • 검색: LOT번호/품목명/공정명 검색 + 날짜 범위 선택
  • 탭 필터: 전체, 대기, 진행중, 완료
  • 테이블 컬럼: No, 검사유형(IQC/PQC/FQC), 요청일, 품목명, LOT NO, 상태, 담당자
  • 버튼: + 검사 등록

2. 검사 등록

  • 검사 개요: LOT NO(자동), 품목명(자동), 공정명(자동), 수량, 작업자, 특이사항
  • 검사 기준 및 도해: 템플릿 이미지 표시 영역
  • 검사 데이터 입력:
    • 가공상태: 기준(Spec) + 양호/불량 라디오
    • 높이(H): 기준(Spec) + 측정값 입력(mm)
    • 길이(L): 기준(Spec) + 측정값 입력(mm)
    • 각 항목 우측에 "판정: 적합" 표시
  • 버튼: 취소, 검사완료

3. 검사 상세

  • 헤더: 검사번호 + 합격/불합격 배지, 성적서 버튼, 목록/수정 버튼
  • 검사 정보: 검사번호, 검사유형, 검사일자, 판정결과, 품목명, LOT NO, 공정명, 검사자
  • 검사 결과 데이터 테이블: 항목명, 기준(Spec), 측정값/결과, 판정(적합/부적합)
  • 종합 의견: 텍스트 영역
  • 첨부 파일: 파일 목록

4. 검사 수정

  • 검사 개요 (수정 불가): LOT NO, 품목명, 공정명, 수량 - 모두 disabled
  • 수정 사유 (필수 ★): textarea
  • 검사 데이터 수정: 등록과 동일한 입력 폼
  • 버튼: 취소, 수정 완료

Phase 1: 폴더 구조 및 기본 설정

  • 1.1 폴더 구조 생성
    • src/app/[locale]/(protected)/quality/inspections/
    • src/components/quality/InspectionManagement/
  • 1.2 타입 정의 (types.ts)
  • 1.3 mockData 생성 (mockData.ts)

Phase 2: 검사 목록 (리스트) 페이지

  • 2.1 메인 페이지 컴포넌트 (page.tsx)
  • 2.2 클라이언트 컴포넌트 (InspectionList.tsx)
  • 2.3 상단 통계 카드 (4개)
    • 금일 대기 건수
    • 진행 중 검사
    • 금일 완료 건수
    • 불량 발생률
  • 2.4 검색/필터 영역
    • LOT번호/품목명/공정명 검색
    • 날짜 범위 선택
  • 2.5 탭 필터 (전체/대기/진행중/완료)
  • 2.6 테이블 구현
    • 체크박스, No, 검사유형, 요청일, 품목명, LOT NO, 상태, 담당자
  • 2.7 "+ 검사 등록" 버튼 → 등록 페이지 이동

Phase 3: 검사 등록 페이지

  • 3.1 등록 페이지 라우트 (new/page.tsx)
  • 3.2 검사 개요 섹션
    • LOT NO, 품목명, 공정명 (자동/읽기전용)
    • 수량, 작업자, 특이사항 (입력)
  • 3.3 검사 기준 및 도해 섹션
    • 이미지 표시 영역
  • 3.4 검사 데이터 입력 섹션
    • 동적 검사항목 폼
    • 가공상태: 양호/불량 라디오
    • 측정항목: 기준(Spec) + 측정값 입력
    • 자동 판정 로직 (기준값 범위 체크)
  • 3.5 버튼: 취소, 검사완료
  • 3.6 폼 유효성 검사 및 제출 로직

Phase 4: 검사 상세 페이지

  • 4.1 상세 페이지 라우트 ([id]/page.tsx)
  • 4.2 헤더 영역
    • 검사번호 + 합격/불합격 배지
    • 성적서 버튼
    • 목록/수정 버튼
  • 4.3 검사 정보 섹션 (읽기 전용)
  • 4.4 검사 결과 데이터 테이블
  • 4.5 종합 의견 표시
  • 4.6 첨부 파일 목록

Phase 5: 검사 수정 페이지

  • 5.1 수정 모드 구현 (?mode=edit 쿼리 파라미터)
  • 5.2 검사 개요 (수정 불가 - disabled)
  • 5.3 수정 사유 입력 (필수)
  • 5.4 검사 데이터 수정 폼 (기존 값 로드)
  • 5.5 버튼: 취소, 수정 완료
  • 5.6 수정 로직 및 유효성 검사

Phase 6: 공통 기능

  • 6.1 상태 배지 컴포넌트 (대기/진행중/완료)
  • 6.2 검사유형 배지 (IQC/PQC/FQC)
  • 6.3 판정 로직 (기준값 범위 체크 → 적합/부적합)
  • 6.4 측정값 자동 판정 표시
  • 6.5 성적서 출력 기능 (버튼 및 로직 준비)

Phase 7: 통합 및 테스트

  • 7.1 페이지 간 네비게이션 연결
  • 7.2 빌드 테스트 (타입체크 통과)
  • 7.3 테스트 URL 문서 업데이트

생성된 파일 목록

페이지 라우트

파일 경로
검사 목록 src/app/[locale]/(protected)/quality/inspections/page.tsx
검사 등록 src/app/[locale]/(protected)/quality/inspections/new/page.tsx
검사 상세/수정 src/app/[locale]/(protected)/quality/inspections/[id]/page.tsx

컴포넌트

파일 설명
types.ts 타입 정의 (InspectionType, InspectionItem 등)
mockData.ts Mock 데이터 및 judgeMeasurement 함수
InspectionList.tsx 목록 페이지 (IntegratedListTemplateV2 사용)
InspectionCreate.tsx 등록 페이지
InspectionDetail.tsx 상세/수정 페이지 (mode 쿼리 파라미터로 전환)
index.ts 컴포넌트 export

테스트 URL

페이지 URL
검사 목록 http://localhost:3000/ko/quality/inspections
검사 등록 http://localhost:3000/ko/quality/inspections/new
검사 상세 http://localhost:3000/ko/quality/inspections/INS-001
검사 수정 http://localhost:3000/ko/quality/inspections/INS-001?mode=edit

진행 로그

날짜 작업 내용 상태
2025-12-23 체크리스트 생성, 스크린샷 분석 ✅
2025-12-23 Phase 1-7 전체 구현 완료 ✅
2025-12-23 타입체크 통과, 문서 업데이트 ✅