[김제성] sprint 6

[butterflystomach]

요구사항

기본

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

심화

• 모든 입력 input box에 빈 값이 있을 경우, 등록 버튼이 비활성화됩니다.
• 태그를 입력한 후 엔터키를 누르면, 그 태그가 칩 형태로 쌓입니다.
• 상품명, 상품 소개, 판매 가격, 태그에 대한 유효성 검사 Custom Hook을 만들어주세요.
  유효성 검사를 통과하지 않을 경우, 각 input에 빨간색 테두리와, 각각의 input 아래에 빨강색 에러 메시지를 보여주세요.
  -> 유효한 조건 : 상품명: 1자 이상, 10자 이내
  상품 소개: 10자 이상, 100자 이내
  판매 가격: 숫자
  태그: 5글자 이내

배포된 사이트

• relaxed-twilight-e25c1c.netlify.app

멘토에게

• 백엔드 파트는 psql 오류로 구현 못했습니다. 다시 설치하고 세팅한 후에 한 번 도전해보겠습니다.
  (오류 아니어도 어려워서 못했을 거 같기도 합니다 ㅎ...)
• 백엔드 외에도 미처 못했거나 부족한 부분은 차후 이어서 작업해 보겠습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[rl0425]

고생하셨습니다. 많은 양을 단기간 내에 깔끔하게 해주셨는데, 네트워크 에러에 대한 예외처리나 기본 props에 대한 기본값 정의만 조금 더 해주시면 더 안전한 코드가 될 것 같습니다.

[rl0425]

fetch()를 사용하시는거면, 응답 실패나 네트워크 오류에 대한 사용자 피드백 코드를 넣으시는 것이 좋을 것 같습니다.

const response = await fetch(url);
    
// HTTP 상태 확인
if (!response.ok) {
  throw new Error(`HTTP error. status: ${response.status}`);
}

const data = await response.json();

// 데이터 유효성 검사
if (!data || typeof data !== 'object') {
  throw new Error('Invalid response format');
}

[rl0425]

상세페이지나 404 페이지를 임시로 만들어 놓으신거여도, 추후 추가될 내용이라면 컴포넌트 파일을 별도로 분리하시는 것이 좋을 것 같습니다.

[rl0425]

이전 리뷰에서 말씀드렸는지가 헷갈려서 한번 더 말씀드리면, products가 undefined이거나 배열이 아닐 경우 에러가 발생할 경우가 있으니 기본값 설정과 예외처리를 해주셔야 합니다.

const BestProductList = ({ products = [] }) => {
  // 기본값 설정과 유효성 검사
  if (!Array.isArray(products) || products.length === 0) {
  ...

[rl0425]

div 태그를 버튼으로 사용하시는거면 role 속성을 넣으셔서 접근성을 개선하시면 좋을 것 같습니다. 또 tabIndex를 사용하시면, 키보드 접근성도 해결할 수 있습니다.

<div 
  className="logo" 
  onClick={handleLogoClick}
  role="button"
  tabIndex={0}
  aria-label="홈페이지로 이동"
>
...

[rl0425]

추후에 이 파일에서 ui 로직과 비즈니스 로직을 따로 분리하시는 작업을 하시면서, 관심사를 적절히 분리하는 방법을 공부하시는 것을 추천드립니다.

[rl0425]

여기도, props를 그대로 밑에서 사용하시기 때문에 디폴트 값과 유효성 검사를 넣어주시는게 좋을 것 같습니다.

const Pagination = ({ 
  currentPage = 1, 
  totalPages = 1, 
  onPageChange = () => {} 
}) => {
  // 기본값 설정, 유효성 검사
  if (!totalPages || totalPages <= 1) {
    return null;
  }

[rl0425]

label과 input을 사용하실때는, htmlfor과 id로 서로 연결을 시켜주셔야 합니다.

<label htmlFor="product-name" className="formLabel">
    상품명
</label>
<input
  id="product-name"
  type="text"
  name="name"
...