[황영일] 스프린트 미션 5

[youngsecondbrain-ai]

Sprint Mission PR

구현 내용

기본 요구사항

공통

• GitHub Sprint Mission PR 생성
• React + Express 기반으로 구현

---

프론트엔드

랜딩 페이지

• 기존 HTML/CSS 랜딩 페이지를 React로 마이그레이션
• URL Path: /

중고마켓 페이지

• URL Path: /items
• /items 진입 시 네비게이션 "중고마켓" 활성화 색상(#3692FF)
• 판매 상품 목록을 직접 구현한 GET API로 조회
• 좋아요순 정렬 기능 제외
• 상품 이미지가 없는 경우 프론트엔드에서 기본 이미지 처리
• 베스트 상품 목록 미구현
• "상품 등록하기" 버튼 클릭 시 /registration으로 이동

상품 등록 페이지

• PC / Tablet / Mobile 반응형 디자인 구현
• URL Path: /registration
• 직접 구현한 POST API를 이용하여 상품 등록
• 등록 성공 시 해당 상품 상세 페이지(/items/:id)로 이동

---

백엔드

Product Schema

• Product 스키마 작성
• 필드 구성
  • id
  • name
  • description
  • price
  • tags
  • createdAt
  • updatedAt
• 필요한 추가 필드 정의

API

상품 등록

• POST /products
• name, description, price, tags를 이용한 상품 등록

상품 상세 조회

• GET /products/:id
• id, name, description, price, tags, createdAt 조회

상품 수정

• PATCH /products/:id

상품 삭제

• DELETE /products/:id

상품 목록 조회

• GET /products
• id, name, price, createdAt 조회
• Offset 기반 Pagination
• 최신순(recent) 정렬
• name, description 검색 기능

기타

• API 에러 처리 구현
• 적절한 HTTP Status Code 반환
• .env 환경 변수 적용
• CORS 설정
• Render 배포
• MongoDB 사용

---

🌟 심화 요구사항

상품 등록 페이지

• 모든 입력값이 비어있으면 등록 버튼 비활성화
• 태그 입력 후 Enter 입력 시 Chip 형태로 추가
• Custom Hook을 이용한 유효성 검사 구현

유효성 검사

상품명

• 1~10자

상품 소개

• 10~100자

판매 가격

• 숫자만 입력 가능
• 1자 이상

태그

• 5글자 이하

Validation UI

• 유효성 검사 실패 시 빨간 테두리 표시
• Input 하단에 에러 메시지 출력

---