feat: 상품 목록 페이지 구현 #57

Leejin-Yang · 2024-03-19T21:18:58Z

Issue

close 상품 목록 페이지 구현 #55

✨ 구현한 기능

상품 목록 페이지 구현
페이지 이동 시 history state를 통해 상태 전달
useSelect, SelectOptionList 작성

편의점 상품	공통 상품	바텀시트

📢 논의하고 싶은 내용

카테고리타입과 카테고리를 페이지 이동시 어떻게 넘겨주어야할까 고민하다 react-router-dom state을 참고해 history state에 담아 넘겨주었습니다. 그래서 각 헤더에 달린 링크와 카테고리 버튼에 해당 속성을 추가했습니다. 어떤 형태로 넘겨줄지 몰라 일단 타입은 any로 작성했습니다. 그래서 카테고리 컨텍스트 없애도 될 듯?!
기존의 useSortOption, SortOptionList는 SortOption 타입만 받을 수 있어 {label, value} 형태의 값을 다룰 수 있도록 useSelect, SelectOptionList를 새로 만들었습니다. 카테고리의 경우 {label, value} 형태로 한번 맵핑해 사용했습니다.
나머지는 자잘한 스타일 수정이 있는데, 헤더에 z-index를 주었더니 바텀시트보다 앞에 있네요.. 바텀시트를 수정해야할까요?

🎸 기타

@hae-on 꿀조합 랭킹 졍렬 문제 상품 목록 쪽에도 있어서 이미지 비율 조정으로 해봤는데 ProductList, ProductItem 부분 확인해주세요. 이대로 꿀조합 랭킹도 수정하면 될 듯 합니다.

⏰ 일정

추정 시간 : 4시간
걸린 시간 : 3시간

github-actions · 2024-03-19T21:22:36Z

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-ikhxpvniys.chromatic.com/

hae-on

react-router-dom state

react-router-dom state 링크 들어가서 읽어봤는데 이게 Link 안에 state라고 적으면 그걸 기억하는거고, useLocation을 통해 state를 불러서 그 값을 사용하는건가요? 흐름을 모르겠어요,,,
또, 예전에 요즘은 쿼리 파라미터로 전역 값 넣어서 쓰는게 유행이라고 들은 적 있는데 그거랑 관련 있는 건가요?

나머지는 자잘한 스타일 수정이 있는데, 헤더에 z-index를 주었더니 바텀시트보다 앞에 있네요.. 바텀시트를 수정해야할까요?

하... 이거 div role dialog 때문에 또 최상위가 안 돼서 이런 문제가 있네요.
얘 아예 dialog 태그로 가면 해결 되는 문제일 거 같은데 그러면 또 토스트 때문에...
그냥 디자이너분들한테 리뷰 작성 페이지로 가달라고 하는거 어때요?
그러면 토스트 문제 사라지고 여기도 괜찮아지거든요??
아니면 또 토스트를 수정하는 방법도 있습니다...
어떤게 좋을까요??

꿀조합 랭킹 졍렬 문제 상품 목록 쪽에도 있어서 이미지 비율 조정으로 해봤는데 ProductList, ProductItem 부분 확인해주세요. 이대로 꿀조합 랭킹도 수정하면 될 듯 합니다.

그러면 이제 부모 컨테이너의 크기에 따라 리스트 크기가 유동적으로 들어가는거죠?
전 좋습니다~~

hae-on · 2024-03-20T04:06:37Z

src/components/Product/ProductItem/productItem.css.ts

  objectFit: 'cover',
+  aspectRatio: '1 / 1',


얜 뭔가요?

종횡비 지정해주면 이미지를 그 비율에 맞춰줍니다
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

hae-on · 2024-03-20T04:09:56Z

src/pages/ProductListPage/ProductListPage.tsx

+        <button type="button" className={cx(selectButton, sortButton)} onClick={openBottomSheet('sort')}>
+          <span>{currentSortOption.label}</span>
+          <span>
+            <SvgIcon variant="arrow" width={8} height={8} style={{ transform: 'rotate(-90deg)' }} />


이 arrow는 기존에 있던건데 피그마에 있는거랑 비슷한가여?

아 기존거군요.. 크게 차이는 없어 보여서 사용했슴다

hae-on · 2024-03-20T04:20:07Z

src/pages/ProductListPage/ProductListPage.tsx

+type BottomSheetOption = 'category' | 'sort';
+
+export const ProductListPage = () => {
+  const { state: categoryId } = useLocation();


이게 불러오는 값이고

hae-on · 2024-03-20T04:20:55Z

src/pages/ProductListPage/ProductListPage.tsx

+      <PageHeader title={pageTitle} hasBackLink hasSearchLink state={category} />
+


여기 state에 저장하는건가요?

넵 링크 넘어갈 때 상태 담아서 넘겨준다 생각하면 됨다

hae-on · 2024-03-20T04:42:39Z

src/pages/ProductListPage/productListPage.css.ts

+export const cu = style({
+  vars: {
+    [categoryBorder]: '#aace37',
+    [categoryColor]: '#652d8d',
+  },
+  color: categoryColor,
+  borderColor: categoryBorder,
+});
+


오오 이렇게 할 수 있군요??

Leejin-Yang · 2024-03-20T06:36:45Z

@hae-on

react-router-dom state 링크 들어가서 읽어봤는데 이게 Link 안에 state라고 적으면 그걸 기억하는거고, useLocation을 통해 state를 불러서 그 값을 사용하는건가요? 흐름을 모르겠어요,,,

옙 맞습니다

또, 예전에 요즘은 쿼리 파라미터로 전역 값 넣어서 쓰는게 유행이라고 들은 적 있는데 그거랑 관련 있는 건가요?

예시를 볼 수 있을까요?? 현재는 쿼리 스트링은 사용하지 않슴다. 쿼리 스트링을 사용하면 url로 여러 옵션에 바로 접근할 수 있으니 좋겠네요

하... 이거 div role dialog 때문에 또 최상위가 안 돼서 이런 문제가 있네요.

현재 dialog div에 z-index가 먹지 않고 있는데, 이렇게 수정하면 될 거 같네요?

xodms0309

고생하셨습니다~

저희 근데 바텀시트는 안옮겨오나요?!

xodms0309 · 2024-03-20T08:01:43Z

src/pages/ProductListPage/ProductListPage.tsx

+import NotFoundPage from '../NotFoundPage';
+
+import { ErrorBoundary, ErrorComponent, Loading, SelectOptionList, SvgIcon } from '@/components/Common';
+import PageHeader from '@/components/Common/PageHeader/PageHeader';


이거 index.ts에서 추가해주시 ㄹ수 있나요 범인은 따로 있긴 한거 같은데 ㅋㅋ

ㅋㅋㅋㅋㅋ

xodms0309 · 2024-03-20T08:05:54Z

src/components/Common/PageHeader/PageHeader.tsx

 import { PATH } from '@/constants/path';

 interface PageHeaderProps {
  title: string;
  hasBackLink?: boolean;
  hasSearchLink?: boolean;
+  state?: any;


unknown으로 쓸까요?? 나중에 state로 뭐가 더 들어올 수 있을지 모르니까..

hae-on · 2024-03-20T10:31:29Z

예시를 볼 수 있을까요?? 현재는 쿼리 스트링은 사용하지 않슴다. 쿼리 스트링을 사용하면 url로 여러 옵션에 바로 접근할 수 있으니 좋겠네요

건너들은거라 예시는 없습니다 찾아봤는데 안나와요ㅠ 유행하는 거 맞음...?ㅎ,,,,

현재 dialog div에 z-index가 먹지 않고 있는데, 이렇게 수정하면 될 거 같네요?

근데 지금 dialog가 짭 dialog인데 우리 안 바꿔도 돼요???
위에 적어놨듯이 div dialog말고 찐 dialog로.
그리고 쟤 지금 어차피 디자인시스템에 있어서 z-index 추가 못하지 않아요??

Leejin-Yang · 2024-03-20T13:29:37Z

@xodms0309

바텀시트 일단 쓰죠..

@hae-on

https://dev.to/xiel/hooks-to-persist-state-in-the-query-string-or-history-state-in-react-44a7
https://medium.com/@yiupang.ch/reasons-why-params-on-url-is-the-best-state-management-tool-aff72b81393d
쿼리 스트링이면 이런 느낌이려나요?
relative랑 z-index만 추가해서 배포할까요?

github-actions · 2024-03-20T13:41:33Z

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-krnrdkpoum.chromatic.com/

hae-on · 2024-03-20T14:13:13Z

어어 저거 맞는 듯???
근데 리액트 훅에 useQueryState라는게 있었어요?
검색했는데 npm 라이브러리만 나오는데....?

얍얍 일단 귀찮으면 dialog 속성 추가해서 배포하는거 괜춘!

Leejin-Yang · 2024-03-20T14:58:49Z

디자인 시스템 수정 완

github-actions · 2024-03-20T15:01:29Z

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-bvhifcxxob.chromatic.com/

Leejin-Yang · 2024-03-20T15:04:27Z

@hae-on

아 문제 발견... 그냥 뒤로가기 하면 상태를 못가지고 가네요. 쿼리 스트링으로 해야할듯

hae-on · 2024-03-20T15:13:25Z

그 react router dom state 쓰면 뒤로가기 했을 때 안된다는거죠??
쿼리 스트링 도전해보시죠. 저거 괜찮은 거 같음!
그리고 제가 방금 yarn.lock 다시 깔아서 충돌 났어요 죄송 😗

Leejin-Yang · 2024-03-20T18:57:17Z

@hae-on
생각해보니까 그냥 뒤로가도 쿼리 스트링 값을 못가져오네요?? 쌍방으로 해야될거 같은데 그럼 싹 갈아 엎어야 해서... 그리고 상태로 넘겨주는건 카테고리 아이디더라구요. 카테고리는 param에 있네요. 걍 넘어갈게요..?

github-actions · 2024-03-20T19:05:36Z

🔗 배포된 storybook 주소: https://65f015a4aed45406385006ee-dkxrfspcjr.chromatic.com/

Leejin-Yang added 20 commits March 20, 2024 03:10

feat: 페이지 헤더 컴포넌트 스타일 수정

c5dbebc

feat: 페이지 헤더 뒤로가기 링크에 상태 추가

fcaab2f

feat: 목록 페이지에서 뒤로가기 시 카테고리 상태로 전달

0f727b3

feat: 목록 페이지 경로 추가

bd535f2

feat: 상품 리스트 컴포넌트 추가

ffa7f13

feat: 페이지 헤더 스타일 추가

6d77441

feat: 섹션 헤더 링크 상태 추가

ccd3b73

feat: 상품 이미지 종횡비 추가

6ed5228

feat: 카테고리 링크로 수정 및 상태 추가

1346eb8

feat: 상품 목록 페이지 상품 목록 섹션 구현

fe7060c

feat: 상품 정렬 바텀 시트 구현

5146839

feat: 카테고리 아이템 flex 추가

b446b61

feat: useSelect 커스텀 훅 작성

ef6056f

feat: 체크 아이콘 추가

88e96d3

feat: 셀렉트 옵션 리스트 컴포넌트 작성

fe273bf

refactor: 옵션 타입 이동

528fc95

feat: 상품 정렬, 카테고리 선택 구현

e33d335

feat: 기타 스타일 수정

c65452a

feat: 옵션 셀렉트 버튼 구현

76515fe

feat: 편의점별 버튼 색상 구현

3799a06

Leejin-Yang requested review from xodms0309 and hae-on and removed request for xodms0309 March 19, 2024 21:19

Leejin-Yang self-assigned this Mar 19, 2024

Leejin-Yang requested a review from xodms0309 March 19, 2024 21:19

Leejin-Yang added ✨ Feature 🎨 UI labels Mar 19, 2024

hae-on reviewed Mar 20, 2024

View reviewed changes

xodms0309 approved these changes Mar 20, 2024

View reviewed changes

Leejin-Yang added 2 commits March 20, 2024 22:36

refactor: 로케이션 상태 타입 수정

925f673

refactor: 페이지 헤더 인덱스에서 내보내기

7cd2dba

Leejin-Yang added 2 commits March 20, 2024 23:57

chore: 디자인 시스템 버전 업데이트

e776787

feat: 메인 높이 수정

4034d7a

Leejin-Yang added 2 commits March 21, 2024 03:57

feat: 리스트로 넘겨주는 카테고리 아이디 변경

7132669

Merge branch 'feat/v2' into feat/issue-55

86c7495

Leejin-Yang added 3 commits March 22, 2024 12:58

Merge branch 'feat/v2' into feat/issue-55

01b4e11

chore: yarn lock

a83f9b4

chore: yarn lock

b00ea25

Leejin-Yang merged commit 694e99e into feat/v2 Mar 22, 2024
1 check failed

Leejin-Yang deleted the feat/issue-55 branch March 22, 2024 04:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 상품 목록 페이지 구현 #57

feat: 상품 목록 페이지 구현 #57

Leejin-Yang commented Mar 19, 2024 •

edited

Loading

github-actions bot commented Mar 19, 2024

hae-on left a comment

hae-on Mar 20, 2024

Leejin-Yang Mar 20, 2024

hae-on Mar 20, 2024

Leejin-Yang Mar 20, 2024

hae-on Mar 20, 2024

hae-on Mar 20, 2024

Leejin-Yang Mar 20, 2024

hae-on Mar 20, 2024

Leejin-Yang commented Mar 20, 2024 •

edited

Loading

xodms0309 left a comment •

edited

Loading

xodms0309 Mar 20, 2024

Leejin-Yang Mar 20, 2024

xodms0309 Mar 20, 2024

hae-on commented Mar 20, 2024

Leejin-Yang commented Mar 20, 2024

github-actions bot commented Mar 20, 2024

hae-on commented Mar 20, 2024

Leejin-Yang commented Mar 20, 2024

github-actions bot commented Mar 20, 2024

Leejin-Yang commented Mar 20, 2024

hae-on commented Mar 20, 2024

Leejin-Yang commented Mar 20, 2024

github-actions bot commented Mar 20, 2024

		<PageHeader title={pageTitle} hasBackLink hasSearchLink state={category} />

feat: 상품 목록 페이지 구현 #57

feat: 상품 목록 페이지 구현 #57

Conversation

Leejin-Yang commented Mar 19, 2024 • edited Loading

Issue

✨ 구현한 기능

📢 논의하고 싶은 내용

🎸 기타

⏰ 일정

github-actions bot commented Mar 19, 2024

hae-on left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Leejin-Yang commented Mar 20, 2024 • edited Loading

xodms0309 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hae-on commented Mar 20, 2024

Leejin-Yang commented Mar 20, 2024

github-actions bot commented Mar 20, 2024

hae-on commented Mar 20, 2024

Leejin-Yang commented Mar 20, 2024

github-actions bot commented Mar 20, 2024

Leejin-Yang commented Mar 20, 2024

hae-on commented Mar 20, 2024

Leejin-Yang commented Mar 20, 2024

github-actions bot commented Mar 20, 2024

Leejin-Yang commented Mar 19, 2024 •

edited

Loading

Leejin-Yang commented Mar 20, 2024 •

edited

Loading

xodms0309 left a comment •

edited

Loading