[정유석] sprint6

[yousuk88]

스프린트6 기본 요구사항

공통

• Github에 스프린트 미션 PR을 만들어 주세요.
• 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글자 이내

멘토에게

[coldplay126]

전반적으로 리액트로 잘 마이그레이션 하셨습니다. 과제 작업하시느라 고생 많으셨습니다!

[coldplay126]

각 page를 page 하위로 분리해 주신 점 훌륭합니다. react file type 기준으로 분류해 주신 것 같습니다!. 한 걸음 더 나아가서, 각 페이지에 대한 css는 어떻게 관리할지도 고민해 보시면 좋을 것 같습니다. 예를 들어, 컴포넌트별 폴더를 하위로 만들어 .js와 .css 를 같이 관리하는 방법도 생각해 볼 수 있을 것 같습니다

[coldplay126]

CSS in JS 방식으로 css를 시도해 보신걸까요? 리터털 css가 작성되어 있진 않았던 것 같아서요. 공부하시면서 다양한 시도는 저는 항상 좋다고 생각합니다!

[yousuk88]

module css
styled-components

이 두개 전부 써보고 싶어서 추가했는데
styled-components 가 어려워서 아직 모듈css로만 작업하고 있습니다.

다만 나중에 styled-components 도 시도해보려고 남겨뒀습니다 ㅎㅎ