[김민희] Sprint6

[smnhree]

배포 링크

https://panda-market-mhkim-react.netlify.app/

요구사항

기본

공통

• React, Express를 사용해 진행합니다.

랜딩 페이지

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

중고마켓 페이지

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

상품 등록 페이지

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

심화

상품 등록 페이지

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

멘토에게

• 미션 5 코드를 초기화해서 새로 만들었고, tailwind도 사용해보았습니다!

[rjc1704]

inputName === "name" 으로 해야 동일여부를 확인할 수 있습니다. = 는 우변의 좌변으로 할당하겠다는 뜻입니다.

[rjc1704]

반응형 구현 시 mobile: px-[20px] 처럼 : 뒤에 한칸띄우시면 적용되지 않습니다. 개발모드에서 적용되는 경우가 있더라도 production 모드에서는 동작하지 않으니 주의하시면 좋겠습니다. pc, tablet, mobile 에 대한 반응형 구현이 필요할 때면 pc, tablet 에 대한 부분만 적용하고 mobile: 에 해당하는 prefix는 생략하셔도 괜찮습니다. 왜냐하면 tailwind 는 기본적으로 min-width 를 기준으로 크기를 지정하기 때문에 tablet, pc 시작 사이즈만 적용해도 나머지는 모두 mobile 사이즈로 반영해도 무방하기 때문입니다.

[rjc1704]

대부분의 요구사항들을 만족시켜주셨습니다. 몇 가지 코멘트 사항들을 아래 정리해 드리니 확인해 보세요. 고생하셨습니다.

• vite 로 보일러플레이트 작성했을때 main.jsx 와 App.jsx는 보일러플레이트에서 기본으로 만들어준 파일인데, 별도로 파일명 변경해서 사용하셨군요. 추후에 팀으로 프로젝트 시 불필요한 혼동이 있을 수 있는 부분이니 이 부분은 그대로 사용하는 것을 권장 드립니다.
• 상품등록(POST)이나 상품수정(PATCH)은 유효성검사가 필수입니다. 서버로 api 요청을 보내기전에 input별 유효성검사를 통과하지 못할 시 api 요청을 보내지 못하도록 처리하셔야 합니다.
• 모바일 사이즈로 왔을 때 보통 헤더나 푸터의 폰트사이즈가 작아지는 경우가 대부분입니다. 피그마에서도 살펴보시면 헤더 폰트가 16px로 줄었는데 놓치신 것 같아요. 다음엔 반응형 시 모바일의 폰트사이즈는 꼼꼼하게 확인해 보시면 좋겠습니다.