[김치영] sprint5

[Chiman2937]

요구사항

기본

중고마켓

• 중고마켓 페이지 주소는 “/items” 입니다.

• 페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.

• 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.

• 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.

• '상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )

• 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.

• 중고마켓 반응형

  • 베스트 상품
    • Desktop : 4개 보이기
    • Tablet : 2개 보이기
    • Mobile : 1개 보이기
  • 전체 상품
    • Desktop : 12개 보이기
    • Tablet : 6개 보이기
    • Mobile : 4개 보이기

심화

• 페이지 네이션 기능을 구현합니다.

주요 변경사항

• 미션1~4 전체 React로 수정

배포

https://sprint-mission-kcy.netlify.app/

스크린샷

네비게이션 바 디자인

• 네비게이션 바 컴포넌트를 공용으로 사용 하다보니 로그인을 해야 정상적으로 보입니다. 일단 이메일, 비밀번호 규칙에만 맞으면 로그인이 되도록 만들었습니다.

로그아웃 상태

로그인 상태

현재 주소 표시(중고마켓)

현재 주소표시(자유게시판)

---

반응형 디자인(PC)

반응형 디자인(TABLET)

반응형 디자인(MOBILE)

반응형 디자인(pageSize 설정)

PC(베스트상품, 전체상품 순)

TABLET(베스트상품, 전체상품 순)

MOBILE(베스트상품, 전체상품 순)

---

상품정렬 - 최신순

상품정렬 - 좋아요순

---

상품검색(Enter입력 시)

---

페이지네이션

다른 디바이스 화면으로 변경 시 보고있던 상품 위치 유지

이전/다음 버튼 불필요 시 비활성화

멘토에게

• request를 보낼 때 offset을 보내는것이 아닌 page번호와 pageSize만 보내다보니, 페이지네이션 구현할 때 디바이스 모드가 바뀌어도 원래 보고있던 데이터를 계속 볼 수 있는 기능을 구현하기 위해 offset과 현재페이지번호 둘다 state로 관리하였는데, 이런 의도의 문제가 맞는지, 더 좋은 해결 방법이 있는지 궁금합니다.

• 코드잇 강의에서는 offset과 cursor를 이용한 request 방식이 나왔었는데 offset, cursor,page번호 중 보통 어떤 방법을 많이 쓰는지 궁금합니다. 그리고 이 3가지 말고 또 다른 방법도 있는지도 궁금합니다.

• 리액트 특성 상 서로 다른 컴포넌트가 서로 다른 css 파일을 참조하더라도 class이름이 같으면 스타일이 겹치는 문제가 있었는데, css module을 사용하는게 가장 최선일까요? 다른 방법이 있다면 어떤 방법이 있는지 궁금합니다.

• 로그인/회원가입 폼의 input필드를 컴포넌트화 시켜서 작업을 해봤는데, 이런식으로 작업을 하는 게 맞을까요?

        <form className="form-container" onSubmit={onSubmitRedirect}>
          <Field
            id={'email'}
            labelText={'이메일'}
            placeholder={'이메일을 입력해주세요'}
            ariaLabel={'이메일 입력 칸'}
            type={'email'}
            autoComplete={'email'}
            value={values['email']}
            valid={valids['email']}
            hint={hints['email']}
            isVisible={isVisibles['email']}
            handleInputChange={handleInputChange}
            handleInputBlur={handleInputBlur}
            handlePasswordIconClick={handlePasswordIconClick}
          />

• 커스텀 훅을 사용해서 기능 구현을 해봤는데, 이런식으로 쓰는게 맞는지 궁금합니다.
• 현재 작업 내용에서 명확하지 않아 보이는 변수명이 있는지 궁금합니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[Chiman2937]

basic-김치영-sprint5 PR 취소