React 오마린 스프린트 미션 6

[oh1marin]

스프린트 체크리스트

기본 요구사항 — 공통

• Github에 스프린트 미션 PR을 만들어 주세요.
• React, Express를 사용해 진행합니다.

---

프론트엔드 구현 요구사항

랜딩 페이지

• HTML과 CSS로 구현한 랜딩페이지를 React로 마이그레이션하세요.
• 랜딩 페이지 url path는 "/"로 설정하세요.

중고마켓 페이지

• 중고마켓 페이지 url path를 "/items"으로 설정하세요.
• 페이지 주소가 "/items" 일 때 상단내비게이션바의 "중고마켓" 버튼의 색상은 "3692FF"입니다.
• 중고마켓 페이지 판매 중인 상품은 본인이 만든 GET 메서드를 사용해 주세요.
• 다만 좋아요 순 정렬 기능은 제외해 주세요.
• 사진은 디폴트 이미지로 프론트엔드에서 처리해주세요.
• 베스트 상품 목록 조회는 구현하지 않습니다.
• '상품 등록하기' 버튼을 누르면 "/registration" 로 이동합니다. (빈 페이지)

상품 등록 페이지

• PC, Tablet, Mobile 디자인에 해당하는 상품 등록 페이지를 만들어 주세요.
• 상품 등록 url path는 "/registration"입니다.
• 상품 등록은 본인이 만든 POST 메서드를 사용해 주세요.
• 등록 성공 시, 해당 상품 상세 페이지로 이동합니다. (빈페이지)

---

백엔드 구현 요구사항 — 중고마켓

스키마 & DB

• Product 스키마를 작성해 주세요.
  • id, name, description, price, tags, createdAt, updatedAt 필드를 가집니다.
  • 필요한 필드가 있다면 자유롭게 추가해 주세요.
• MongoDB를 활용해 주세요.

API

• 상품 등록 API를 만들어 주세요.
  • name, description, price, tags를 입력하여 상품을 등록합니다.
• 상품 상세 조회 API를 만들어 주세요.
  • id, name, description, price, tags, createdAt를 조회합니다.
• 상품 수정 API를 만들어 주세요.
  • PATCH 메서드를 사용해 주세요.
• 상품 삭제 API를 만들어 주세요.
• 상품 목록 조회 API를 만들어 주세요.
  • id, name, price, createdAt를 조회합니다.
  • offset 방식의 페이지네이션 기능을 포함해 주세요.
  • 최신순(recent)으로 정렬할 수 있습니다.
  • name, description에 포함된 단어로 검색할 수 있습니다.

공통 서버 요구사항

• 각 API에 적절한 에러 처리를 해 주세요.
• 각 API 응답에 적절한 상태 코드를 리턴하도록 해 주세요.
• .env 파일에 환경 변수를 설정해 주세요.
• CORS를 설정해 주세요.
• render.com로 배포해 주세요.

---

심화 요구사항 — 프론트엔드 (상품 등록 페이지)

• 모든 입력 input box에 빈 값이 있을 경우, 등록 버튼이 비활성화됩니다.
• 태그를 입력한 후 엔터키를 누르면, 그 태그가 칩 형태로 쌓입니다.
• 유효성 검사 Custom Hook(상품명, 상품 소개, 판매 가격, 태그)
  • 유효성 미통과 시 각 input에 빨간색 테두리 적용
  • 각 Input 아래에 빨간색 에러 메시지 표시

유효한 조건

• 상품명: 1자 이상, 10자 이내
• 상품 소개: 10자 이상, 100자 이내
• 판매 가격: 1자 이상, 숫자
• 태그: 5글자 이내

스크린샷

[devbini]

스프린트 5의 타깃 브랜치가 main으로 잡혀있어, 선행 수정을 위해 본 PR을 잠시 close합니다.

추가로, BE 프로젝트를 위한 repository는 별도로 존재합니다.
지금처럼 한 폴더에서 Express와 React를 동시에 구동하는 경우는... 의존성 문제부터 시작하여 심각한 버그가 나올 수 있어요.

[oh1marin]

혹시 스프린트 미션 6 업로드 못하는 상태인가요? 업로드후 글작성을 하려는데 안됩니다

[devbini]

업로드 후 글 작성이란 부분을 이해하지 못했습니다.

직전 스프린트 5에서 진행한 코드 브랜치와 현 스프린트 6 브랜치가 동일해서,
스프린트 5를 머징 하면서 스프린트 6에서 신규 진행하신

백엔드 api구축 및 배포 설정
상품등록 페이지 추가

두 부분도 함께 머징 된 것 같습니다.

작성하신 코드는 정상적으로 머징 되어있으니, 걱정 마시고 작업하시면 될 것 같아요 👏