[심주원] 스프린트 미션 5

[joowon-shim]

스프린트 미션 5 PR

배포 주소

• 프론트엔드 배포 주소
• 백엔드 배포 주소
• 상품 목록 API 확인 주소

---

기본 요구사항

공통

• Github에 스프린트 미션 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 스키마

• Product 스키마를 작성했습니다.
• id, name, description, price, tags, createdAt, updatedAt 필드를 사용했습니다.
• 필요한 추가 필드로 image를 사용했습니다.
• MongoDB의 _id를 응답에서 id로 변환해 사용했습니다.
• timestamps: true를 사용해 createdAt, updatedAt을 생성했습니다.

상품 등록 API

• 상품 등록 API를 구현했습니다.
• name, description, price, tags를 입력하여 상품을 등록하도록 구현했습니다.
• 등록 성공 시 201 상태 코드를 반환하도록 구현했습니다.
• 등록 실패 시 적절한 에러 응답을 반환하도록 구현했습니다.

상품 상세 조회 API

• 상품 상세 조회 API를 구현했습니다.
• id, name, description, price, tags, createdAt를 조회하도록 구현했습니다.
• 존재하지 않는 상품에 대해 404 상태 코드를 반환하도록 구현했습니다.
• 잘못된 id 형식에 대해 400 상태 코드를 반환하도록 구현했습니다.

상품 수정 API

• 상품 수정 API를 구현했습니다.
• PATCH 메서드를 사용했습니다.
• 수정 성공 시 수정된 상품 정보를 반환하도록 구현했습니다.
• 존재하지 않는 상품에 대해 404 상태 코드를 반환하도록 구현했습니다.
• 잘못된 id 형식에 대해 400 상태 코드를 반환하도록 구현했습니다.
• 유효성 에러에 대해 400 상태 코드를 반환하도록 구현했습니다.

상품 삭제 API

• 상품 삭제 API를 구현했습니다.
• 삭제 성공 시 적절한 응답을 반환하도록 구현했습니다.
• 존재하지 않는 상품에 대해 404 상태 코드를 반환하도록 구현했습니다.
• 잘못된 id 형식에 대해 400 상태 코드를 반환하도록 구현했습니다.

상품 목록 조회 API

• 상품 목록 조회 API를 구현했습니다.
• id, name, price, createdAt를 조회하도록 구현했습니다.
• offset 방식의 페이지네이션 기능을 구현했습니다.
• 최신순 정렬을 구현했습니다.
• name, description에 포함된 단어로 검색할 수 있도록 구현했습니다.

서버 공통

• 각 API에 적절한 에러 처리를 적용했습니다.
• 각 API 응답에 적절한 상태 코드를 반환하도록 구현했습니다.
• .env 파일에 환경 변수를 설정했습니다.
• CORS를 설정했습니다.
• Render로 배포했습니다.
• MongoDB를 활용했습니다.

---

심화 요구사항

상품 등록 페이지

• 상품명, 상품 소개, 판매 가격 입력값이 비어 있을 경우 등록 버튼이 비활성화되도록 구현했습니다.
• 태그는 선택 입력값으로 처리했으며, 입력된 태그가 유효성 검사를 통과하지 못하면 등록 버튼이 비활성화되도록 구현했습니다.
• 태그 입력 후 Enter 키를 누르면 태그가 칩 형태로 쌓이도록 구현했습니다.
• 상품명, 상품 소개, 판매 가격, 태그에 대한 유효성 검사 Custom Hook을 만들었습니다.
• 유효성 검사를 통과하지 못할 경우 input에 빨간색 테두리가 표시되도록 구현했습니다.
• 유효성 검사를 통과하지 못할 경우 각 input 아래에 빨간색 에러 메시지가 표시되도록 구현했습니다.

유효성 조건

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

---

추가 구현

• /login 로그인 페이지를 추가했습니다.
• /signup 회원가입 페이지를 추가했습니다.
• Render Static Site에서 새로고침 시 404가 발생하지 않도록 Rewrite Rule을 설정했습니다.