refactor: 상품 페이지 개편 #50

Leejin-Yang · 2024-03-17T15:37:06Z

Issue

close 상품 페이지 개편 #41

✨ 구현한 기능

기존 상품 페이지를 새 디자인으로 개편했습니다.
기타 컴포넌트 리팩터링 했습니다.
- TabMenu (이 과정에서 기존에 쓰이던 곳에서 걍 삭제함)
- CategoryList, CategoryItem

📢 논의하고 싶은 내용

기존에 인덱스로 작동하던 탭을 value와 label을 받도록 했습니다. 사실 탭이 또 어디 있을지 모르겠네요.
카테고리도 홈과 상품 두 분류를 두어 사용하도록 했습니다.. 이 부분도 확인 부탁드립니다
상품 페이지 컴포넌트 이름 변경했습니다 ProductListPage -> ProductPage. 그리고 url 변경도 있습니다(/products). 추후 목록 페이지 만들면 그때 /products/food, /products/store 가 생길 예정입니다.
상품 페이지 보면 카테고리가 필요해 카테고리 쿼리를 사용해 파라미터를 받는 쿼리도 하나 만들었습니다. 그냥 카테고리 리스트 컴포넌트도 통합할까요? 이거 저번에 왜 나눴는지 까먹음

🎸 기타

특이 사항이 있으면 작성합니다.

⏰ 일정

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

github-actions · 2024-03-17T15:39:16Z

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

xodms0309

고생했어요 황펭... 코드 보는데도 빡세네요 6시간이라니
일단 제 의견을 전달하자면

카테고리 이미지가 원형으로 변하면서 사이즈가 애매한 것 같은데 디자이너분께 보여드리는거 어떠신가요??
카테고리 리스트 컴포넌트 나눈 이유 api 두 개 한번에 안쏠려고 그랬던걸로 기억..
그리고 가로 스크롤 안보이게 하는거 어때요?!

아무튼 나머지는 코멘트 확인해주시고~~~ 고생하셨습니다~~~~~

xodms0309 · 2024-03-18T10:34:13Z

src/components/Common/TabMenu/TabMenu.tsx

-  handleTabMenuSelect: (index: number) => void;
+  tabMenus: Tab[];
+  selectedTabMenu: string;
+  handleTabMenuSelect: (selectedMenu: any) => void;


any..! 이거 타입이 바뀌었나요?

제네릭 해보다가 실패해서 걍 애니 했슴다..

눈물난다..

뚀르륵,,,

좋은 의견 있음 주세요..

xodms0309 · 2024-03-18T10:40:39Z

src/components/Common/TabMenu/tabMenu.css.ts

+export const menuName = styleVariants({
+  active: [menuNameBase, { fontWeight: 700, color: '#232527', borderBottom: '3px solid #444' }],
+  default: [menuNameBase, { fontWeight: 600, color: '#999' }],
+});


아하 이거 이렇게 쓰는거군여?

xodms0309 · 2024-03-18T10:47:09Z

src/hooks/common/useTabMenu.ts

@@ -1,18 +1,16 @@
 import { useState } from 'react';

-const INIT_TAB_INDEX = 0;
+const useTabMenu = <T = string>(init: T) => {


이 init이 처음에 선택된 메뉴라는 뜻인가여?

옙 초기값이요

xodms0309 · 2024-03-18T10:50:25Z

src/components/Common/CategoryItem/CategoryItem.tsx

@@ -37,9 +38,15 @@ const CategoryItem = ({ categoryId, name, image, categoryType }: CategoryItemPro
  return (
    <button type="button" onClick={() => handleCategoryItemClick(categoryId)}>
      <div className={imageWrapper}>
-        <img className={categoryImage} src={image.src} width={image.width} height={image.height} alt={name} />
+        <img
+          className={cx(categoryImage, { [circle]: isCircular })}


cx <- 이거 쓴 이유가 뭐에요?

조건부 클래스네임 줄 때 유용한 라이브러리라 사용했슴다
https://github.com/JedWatson/classnames

이게 바닐라익스트랙트만으로는 해결 안되나요?????? 궁금

바닐라 익스트랙트에는 불리언 값을 넘겨줄 수 없어서 안 될거 같네요..?

xodms0309 · 2024-03-18T10:51:40Z

src/pages/ProductPage/ProductPage.tsx

+  TabMenu,
+  SectionHeader,
+} from '@/components/Common';
+import ProductPreviewList from '@/components/Product/ProductPreviewList/ProductPreviewList';


이거 index.ts에서 import 안된거 같아여

xodms0309 · 2024-03-18T10:51:45Z

src/pages/ProductPage/ProductPage.tsx

+import ProductPreviewList from '@/components/Product/ProductPreviewList/ProductPreviewList';
+import { CATEGORY_TYPE } from '@/constants';
+import { useTabMenu } from '@/hooks/common';
+import { useCategoryQuery } from '@/hooks/queries/product/useCategoryQuery';


xodms0309 · 2024-03-18T10:52:53Z

src/pages/ProductPage/ProductPage.tsx

+        {selectedTabMenu === TAB_MENUS[0].value ? (
+          <CategoryFoodList location="products" hasName isCircular />
+        ) : (
+          <CategoryStoreList location="products" hasName />
+        )}


Suggested change

{selectedTabMenu === TAB_MENUS[0].value ? (

<CategoryFoodList location="products" hasName isCircular />

) : (

<CategoryStoreList location="products" hasName />

)}

<CategoryFoodList location="products" hasName isCircular={selectedTabMenu === TAB_MENUS[0].value } />

이렇게 쓰는건 어떠신가요?!

두개가 다른 리스트인데 합칠까요

엥 다른거네!

xodms0309 · 2024-03-18T10:53:18Z

src/components/Common/CategoryFoodList/CategoryFoodList.tsx

@@ -2,22 +2,41 @@ import { categoryFoodListWrapper } from './categoryFoodList.css';
 import CategoryItem from '../CategoryItem/CategoryItem';

 import { CATEGORY_TYPE } from '@/constants';
-import { useCategoryFoodQuery } from '@/hooks/queries/product';
+import { useCategoryFoodQuery } from '@/hooks/queries/product/useCategoryQuery';


여기도 index.ts!

Leejin-Yang · 2024-03-18T14:14:20Z

@xodms0309

카테고리 이미지가 원형으로 변하면서 사이즈가 애매한 것 같은데 디자이너분께 보여드리는거 어떠신가요??

옙 좋습니다~

카테고리 리스트 컴포넌트 나눈 이유 api 두 개 한번에 안쏠려고 그랬던걸로 기억..

우짤까요. 저는 합쳐서 컴포넌트 하나로 써도 괜찮을거 같은데. 타입별로 스타일 만들어서

그리고 가로 스크롤 안보이게 하는거 어때요?!

굿굿 레이아웃 pr에 적용했읍니다

github-actions · 2024-03-18T14:15:23Z

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

hae-on

진짜진짜 수고 많았습니다!
테스트까지 작성하셨군요???
근데 접때 테스트 아예 안돌아가던데 어캐 해결하셨죠???

hae-on · 2024-03-18T14:52:05Z

src/components/Common/CategoryStoreList/CategoryStoreList.tsx

 const categoryType = CATEGORY_TYPE.STORE;

-const CategoryStoreList = () => {
-  const { data: categories } = useCategoryStoreQuery(categoryType);
+const imgSize = {


얘는 진짜 width만 2밖에 차이 안나는거라서, 디자이너분한테 하나로 고정시켜달라고 말하는게 좋을 거 같네요.

hae-on · 2024-03-18T14:53:03Z

src/components/Common/TabMenu/TabMenu.tsx

-  handleTabMenuSelect: (index: number) => void;
+  tabMenus: Tab[];
+  selectedTabMenu: string;
+  handleTabMenuSelect: (selectedMenu: any) => void;


뚀르륵,,,

Leejin-Yang · 2024-03-19T06:13:01Z

@hae-on
훅 수정한거에 맞게 하니 되더라구요.?

github-actions · 2024-03-19T14:49:17Z

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

github-actions · 2024-03-19T14:50:38Z

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

Leejin-Yang · 2024-03-19T14:56:16Z

@xodms0309 @hae-on

광고 영역은 일단 두고 레이아웃에 맞게 수정했슴다

github-actions · 2024-03-19T14:56:39Z

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

Leejin-Yang added 15 commits March 13, 2024 17:28

feat: 상품 페이지 탭 구현

ab070df

refactor: 내비게이션 활성 경로 수정

51d543b

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

233db33

refactor: 카테고리탭 컴포넌트 삭제

893b75f

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

142c1b5

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

4089901

refactor: 탭메뉴 컴포넌트 커스텀 훅 수정

0121b2f

refactor: 상품 페이지 탭 메뉴 수정

658c40a

chore: classnames 라이브러리 설치

dc4c902

refactor: 카테고리 관련 컴포넌트 스타일 props 수정

d2e3626

refactor: 카테고리 쿼리 파라미터 수정

8076c66

refactor: 탭 관련 커스텀 훅 및 컴포넌트 타입 수정

06dc802

feat: 상품 페이지 카테고리별 상품 리스트 구현

8a013d0

style: 상품 페이지 컴포넌트 이름 변경

6e15878

style: 맞춤법 수정

eedd2c8

Leejin-Yang added 🔧 Refactor 🎨 UI labels Mar 17, 2024

Leejin-Yang requested review from xodms0309 and hae-on March 17, 2024 15:37

Leejin-Yang self-assigned this Mar 17, 2024

xodms0309 reviewed Mar 18, 2024

View reviewed changes

refactor: 인덱스에서 내보내기

3bce499

hae-on approved these changes Mar 18, 2024

View reviewed changes

Leejin-Yang added 3 commits March 19, 2024 23:10

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

eba5f27

chore: 빌드 메모리 에러 수정

0ab512c

feat: 상품 페이지 새 레이아웃에 맞게 스타일 적용

49187ef

Leejin-Yang added 3 commits March 19, 2024 23:42

feat: 카테고리 스타일 수정

4981897

feat: 섹션 구분선 추가

509863c

feat: 상품 랭킹 랭크 위치 수정

8451c4d

feat: 스켈레톤 위치 수정

cd12691

Leejin-Yang merged commit 3935d2f into feat/v2 Mar 19, 2024
2 of 3 checks passed

Leejin-Yang deleted the feat/issue-41 branch March 19, 2024 17:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: 상품 페이지 개편 #50

refactor: 상품 페이지 개편 #50

Leejin-Yang commented Mar 17, 2024 •

edited

Loading

github-actions bot commented Mar 17, 2024

xodms0309 left a comment •

edited

Loading

xodms0309 Mar 18, 2024

Leejin-Yang Mar 18, 2024

xodms0309 Mar 18, 2024

hae-on Mar 18, 2024

Leejin-Yang Mar 18, 2024

xodms0309 Mar 18, 2024

xodms0309 Mar 18, 2024

Leejin-Yang Mar 18, 2024

xodms0309 Mar 18, 2024

Leejin-Yang Mar 18, 2024

xodms0309 Mar 18, 2024

Leejin-Yang Mar 18, 2024

xodms0309 Mar 18, 2024

xodms0309 Mar 18, 2024

xodms0309 Mar 18, 2024

Leejin-Yang Mar 18, 2024

xodms0309 Mar 18, 2024

xodms0309 Mar 18, 2024

Leejin-Yang commented Mar 18, 2024 •

edited

Loading

github-actions bot commented Mar 18, 2024

hae-on left a comment

hae-on Mar 18, 2024

Leejin-Yang Mar 18, 2024

hae-on Mar 18, 2024

Leejin-Yang commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

Leejin-Yang commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

refactor: 상품 페이지 개편 #50

refactor: 상품 페이지 개편 #50

Conversation

Leejin-Yang commented Mar 17, 2024 • edited Loading

Issue

✨ 구현한 기능

📢 논의하고 싶은 내용

🎸 기타

⏰ 일정

github-actions bot commented Mar 17, 2024

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

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

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 18, 2024 • edited Loading

github-actions bot commented Mar 18, 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

Leejin-Yang commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

Leejin-Yang commented Mar 19, 2024

github-actions bot commented Mar 19, 2024

Leejin-Yang commented Mar 17, 2024 •

edited

Loading

xodms0309 left a comment •

edited

Loading

Leejin-Yang commented Mar 18, 2024 •

edited

Loading