게스트 물품 등록 후 장소 선택 시 오류 수정

[hyeone22]

게스트 물품 등록 - 장소 선택 페이지 라우팅 오류 수정

문제 상황

• 게스트가 물품 등록 완료 후 장소 선택 페이지로 이동해야 하나, 메인 페이지로 잘못 라우팅되는 현상 발생
• 정상 플로우: 물품 등록 → 장소 선택 페이지 → 장소 선택 → 매칭 요청
• 현재 플로우: 물품 등록 → 메인 페이지 (비정상)

원인 분석

• 물품 등록 성공 후 라우팅 경로가 잘못 설정됨
• 등록된 물품 ID가 장소 선택 페이지로 전달되지 않음
• 페이지 이동 시 필요한 상태값 유실

수정 사항

1. 라우팅 경로 수정

   • 물품 등록 성공 후 장소 선택 페이지로 이동하도록 수정
   • 등록된 물품 ID를 파라미터로 전달

2. 상태 관리 개선

   • 물품 등록 정보 유지를 위한 상태 관리 추가
   • 페이지 이동 시 필요한 데이터 전달 로직 구현

3. 에러 핸들링

   • 물품 등록 실패 시 에러 처리 로직 보완
   • 사용자에게 적절한 피드백 제공

[hyeone22]

폼 컴포넌트 및 빈 상태 UI 리팩토링 필요

이전 상태

1. 폼 컴포넌트 구조

1.1. 현재 문제점

• 컴포넌트 분리가 되어있으나 책임과 역할이 불명확
• 중복된 컴포넌트 존재
• import 경로 문제 발생
• 비즈니스 로직과 UI 로직이 혼재

1.2. 현재 구조

• FormGroup, FormField 등 기본 폼 컴포넌트가 분산되어 있음
• 액션 로직이 컴포넌트 내부에 직접 구현되어 있음
• 타입 정의가 각 파일에 중복 존재

2. 액션 및 로직 분리

2.1. 현재 문제점

• 폼 제출, 유효성 검사 등의 로직이 컴포넌트에 직접 구현
• 재사용이 어려운 구조
• 테스트가 어려운 구조

2.2 분리 필요 사항

• 폼 제출 로직
• 유효성 검사
• 데이터 변환 로직
• API 호출 로직

3. 빈 상태 UI

3.1. 현재 문제점

• 장소 목록이 비어있을 때 적절한 UI/UX 부재
• 단순히 "리스트가 없습니다" 텍스트만 표시
• 사용자에게 충분한 정보나 안내를 제공하지 않음

해결 한 문제

1. 컴포넌트 구조 개선

1.1 파일 구조 정리

• components/form/ 하위로 폼 관련 컴포넌트 통합
• actions/ 디렉토리로 비즈니스 로직 분리

1.2 컴포넌트 책임 분리

• FormGroup: 레이아웃 및 스타일링 담당
• FormField: 입력 필드 로직 담당
• FormContainer: 폼 상태 관리 담당
• EmptyState: 빈 상태 UI 담당

2. 액션 로직 분리

2.1 분리할 액션들

• handleSubmit
• validateForm
• transformFormData
• uploadImages
• registerProduct

2.2 유틸리티 함수 분리

• 이미지 처리 유틸
• 폼 데이터 변환 유틸
• 유효성 검사 유틸

3. 타입 시스템 개선

• 중복된 타입 정의 통합
• 공통 인터페이스 정의
• 타입 재사용성 향상

참고 사항

• Shadcn UI 컴포넌트 활용
• TypeScript 타입 시스템 활용
• 컴포넌트 설계 원칙 준수
• 액션/상태 분리 원칙 준수

3. 빈 상태 UI

3.1 EmptyPlaceList 컴포넌트 생성

• Shadcn UI를 활용한 디자인 적용
• 사용자에게 명확한 메시지 전달
• 재사용 가능한 구조로 설계
• 적절한 아이콘 및 시각적 요소 추가

참고 사항

• Shadcn UI 컴포넌트 활용
• TypeScript 타입 시스템 활용
• 컴포넌트 설계 원칙 준수
• 접근성 고려

고려 사항

• 문서화에 대한 계획

컴포넌트 문서

• Storybook 도입
• 사용 예제 작성
• Props 문서화