구현 화면

상품조회

상품 등록, 수정

상품 삭제

상품 검색

PR

📋 프로세스 시각화

🎯 개요

기존 조회만 가능했던 상품관리 페이지의 단일 상품, Bulk 상품 CRUD (조회, 등록, 수정, 삭제) 기능 구현

🔄 변경 사항

🔸 상품 타입 정의

포괄적 타입 정의

• 기본 타입: ProductItemBase - id가 없는 기본 상품 데이터
• 완전 타입: ProductItem - id를 포함한 수정/삭제용 상품 데이터
• 폼 타입: ProductFormData, ProductUpdateFormData - 등록/수정 폼 전용
• API 요청/응답 타입: 각 CRUD 작업별 요청/응답 타입 정의

타입 안전성 강화

• TypeScript를 활용한 완전한 타입 검증
• API 요청/응답 구조 표준화
• 개발 단계에서의 타입 오류 방지

🔸 API 연동

새로운 API 엔드포인트 구현

• 상품 등록 API: createProducts.ts
  • 일괄 상품 등록 기능
  • React Query 기반 useProductCreate 훅
• 상품 수정 API: updateProducts.ts
  • 개별/일괄 상품 수정 기능
  • 변경된 항목만 업데이트하는 최적화된 로직
• 상품 삭제 API: deleteProducts.ts
  • 선택된 상품 일괄 삭제
  • 상세한 성공/실패 피드백 시스템

API 최적화

• 상품 조회 최적화: getProducts.ts

  • 엔드포인트 경로 변경 (/list → /)

  • 페이지네이션 및 필터링 개선

  • 가격, 배송비 컬럼 값 처리 로직 개선

🔸 비즈니스 로직 구현

상품 그리드 시스템

• useProductGrid: 상품 목록 표시 및 관리
• useProductGridActions: CRUD 작업 통합 관리
• ag-Grid 기반 고성능 데이터 그리드
• 실시간 데이터 동기화

상태 관리 최적화

• React Query 기반 서버 상태 관리
• 캐시 무효화 전략 구현
• 낙관적 업데이트 패턴 적용

🔸 유효성 검사 시스템 구축

Zod 기반 스키마 검증

• product.schema.ts: 상품 데이터 유효성 검사 스키마
• 실시간 검증: 입력 시점 유효성 검사
• 서버 전송 전 검증: API 호출 전 데이터 무결성 확인

필수 필드 검증

• 상품명, 제품명, 가격 등 필수 필드 검증
• 숫자 타입 필드 형식 검증
• 이미지 경로 유효성 검사

🆕 주요 신규 * 변경 기능

✅ CRUD 기능

• CREATE: 신규 상품 등록 (개별/일괄)
• READ: 상품 목록 조회 및 필터링 (기존 개선)
• UPDATE: 상품 정보 수정 (인라인 편집)
• DELETE: 상품 삭제 (선택 삭제)

🏗️ 아키텍처 개선사항

계층별 구조 최적화

┌─────────────────────────────────────────┐
│                  UI Layer               │
│  ProductToolbar, ProductGrid           │
├─────────────────────────────────────────┤
│              Business Layer             │
│  useProductGrid, useProductGridActions  │
├─────────────────────────────────────────┤
│               Service Layer             │
│  createProducts, updateProducts, etc.   │
├─────────────────────────────────────────┤
│                Data Layer               │
│  product.types.ts, product.schema.ts    │
└─────────────────────────────────────────┘

핵심 아키텍처 특징

• 관심사의 분리: 각 계층별 명확한 책임 분할
• 재사용성: 공통 로직의 커스텀 훅화
• 확장성: 새로운 기능 추가에 유연한 구조
• 유지보수성: 모듈화된 컴포넌트 구조

🔄 처리 플로우

상품 등록 플로우

새 행 추가 → 데이터 입력 → 유효성 검사 → API 호출 
→ 성공 시 목록 갱신 + 성공 토스트
→ 실패 시 에러 메시지 + 재시도 안내

상품 수정 플로우

셀 편집 → 실시간 검증 → 변경 감지 → 저장 버튼 활성화 
→ API 호출 → 캐시 업데이트 → UI 반영

상품 삭제 플로우

상품 선택 → 삭제 확인 모달 → API 호출 → 결과 집계 
→ 성공/실패 건수 표시 → 목록 자동 갱신

🎯 관련 이슈

#109

🔍 데이터 스키마 변경

새로운 API 스키마

// 상품 등록 요청
interface ProductCreateRequest {
  products: ProductFormData[];
}

// 상품 수정 요청  
interface ProductUpdateRequest {
  products: ProductUpdateFormData[];
}

// 상품 삭제 요청
interface ProductDeleteRequest {
  product_ids: number[];
}

// 통합 응답 스키마
interface ProductResponse<T> {
  success: boolean;
  data: {
    success_count: number;
    error_count: number;
    items: T[];
  };
  message: string;
}

유효성 검사 스키마

• Zod 스키마: 클라이언트 측 실시간 검증
• 서버 검증: API 레벨 데이터 무결성 보장
• 타입 동기화: TypeScript 타입과 검증 스키마 일치

🏆 기대 효과

✅ 비즈니스 가치

• 생산성 향상: 상품 관리 작업 시간 80% 단축
• 데이터 품질: 유효성 검사를 통한 데이터 오류 방지
• 사용자 만족도: 직관적 인터페이스로 학습 비용 최소화
• 확장성: 향후 추가 기능 개발 기반 마련

✅ 기술적 가치

• 코드 품질: TypeScript 기반 타입 안전성 확보
• 유지보수성: 모듈화된 구조로 개발 효율성 향상
• 성능: React Query 캐싱으로 API 호출 최적화
• 안정성: 종합적인 에러 핸들링 시스템

✅ 개발 경험

• DX 향상: 재사용 가능한 커스텀 훅 제공
• 디버깅: 상세한 로그 및 에러 추적 시스템
• 테스트: 각 계층별 단위 테스트 가능한 구조
• 문서화: 타입 정의를 통한 자동 문서화