[Fix] 상품 정보 옵션 컴포넌트 수정 #176

armd482 · 2024-08-13T03:37:17Z

🚀 작업 내용

ItemOverview
- 커스텀 키보드 옵션 보이도록 변경
- 일반 상품 카테고리 보이도록 변경(일단은 상품 상세로 조회), 클릭 시 상품 상세페이지 이동하도록 추가(optional)
장바구니 페이지, 찜목록 페이지
- ItemOverview 컴포넌트 적용

🖼️ 스크린샷

📝 참고 사항

상품 카테고리가 포함되어 있지 않아서 개별 상품에 대해서 상품 상세정보 api를 불러와서 카테고리에 적용했습니다
~~114번 branch merge된 후에 리뷰 남겨주세요!~~

🚨 관련 이슈 (이슈 번호)

close [Fix] 상품 정보 옵션 컴포넌트 수정 #173

✅ 체크리스트

Code Review 요청
Label 설정
PR 제목 규칙에 맞는지 확인

…173-fix-상품-정보-옵션-컴포넌트-수정

src/components/ItemOverview/ItemOverview.tsx

ggjiny

고생 많으십니다 도원님 최고

ggjiny · 2024-08-15T12:04:07Z

src/app/my-info/(account)/cart/_components/CartCard.module.scss

@@ -48,6 +48,7 @@
  color: $black;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
+  line-clamp: 2;


아니 이거 꿀팁이네요~

src/components/ItemOverview/ItemOverview.tsx

src/app/my-info/(account)/cart/_components/CartCard.tsx

src/components/ItemOverview/ItemOverview.tsx

ggjiny · 2024-08-15T12:12:19Z

src/components/ItemOverview/ItemOverview.tsx

+              texture: switchOption.customOption.appearanceTexture,
+              type: switchOption.customOption.layout,
+              boardColor: switchOption.customOption.appearanceColor,
+              switchType: switchOption.customOption.keyboardSwitch,
+              baseKeyColor: switchOption.customOption.baseKeyColor,
+              hasPointKeyCap: switchOption.customOption.hasPointKey,
+              pointKeyType: switchOption.customOption.pointKeyType,
+              pointSetColor: switchOption.customOption.pointSetColor,
+              individualColor: switchOption.individualColor,


여기도 구조분해 해서 쓰면 조건이 너무 생길까유>?

얘는 타입 조건에 따라서 사용되는 거라, 애매하지 않을까요?
다른 분들의 의견도 궁금하네요!

switchOption 객체 통으로 넣어도 입력 받는쪽에서 type에 의해 필요한것만 걸러지게 되니까 저도 구조분해가 좋을거같아요

구조분해가 되나요...?
타입이 string 또는 객체이고, 전달하는 값도 key가 달라서 바로 전달할 수 없는데...

src/components/ItemOverview/ItemWrapper.tsx

src/libs/convertProductCategory.ts

bokeeeey

고생하셨습니다 LGTM!

src/app/my-info/(account)/orders/_components/Orders/OrderItemList/OrderItem/OrderItem.tsx

src/components/ItemOverview/ItemOverview.tsx

bokeeeey · 2024-08-15T23:17:43Z

src/components/ItemOverview/ItemOverview.tsx

+              texture: switchOption.customOption.appearanceTexture,
+              type: switchOption.customOption.layout,
+              boardColor: switchOption.customOption.appearanceColor,
+              switchType: switchOption.customOption.keyboardSwitch,
+              baseKeyColor: switchOption.customOption.baseKeyColor,
+              hasPointKeyCap: switchOption.customOption.hasPointKey,
+              pointKeyType: switchOption.customOption.pointKeyType,
+              pointSetColor: switchOption.customOption.pointSetColor,
+              individualColor: switchOption.individualColor,


switchOption 객체 통으로 넣어도 입력 받는쪽에서 type에 의해 필요한것만 걸러지게 되니까 저도 구조분해가 좋을거같아요

src/libs/convertProductCategory.ts

bokeeeey · 2024-08-15T23:28:07Z

src/types/productType.ts

@@ -9,6 +9,8 @@ export type OptionTypes = {
  optionName: string;
 };

+export type CategoryNameType = 'switch' | 'keyboard' | 'keycap' | 'etc';


as const 로 사용해도 좋을거같군요

팀프로젝트나 개인 작업에서 저는 enum을 많이 활용하고 또 리뷰에서 사용을 추천하고 있었는데 알고보니 enum사용은 모던한 방법이 아니었습니다... ㅋㅋㅋ 여러분들도 enum사용이 컴파일 단계에서 어떤 차이를 두고 변환되는지 알고계시면 도움 될거같아서 공유 드립니다

https://velog.io/@hhhminme/네-Enum-누가-Typescript에서-Enum을-쓰냐

제목부터 무섭네요

as const는 보통 객체 key 가져올 때 타입 확정지을려고 사용하는 거 아닌가요?(enum이랑 비슷한 맥락일 것 같은데...)
오히려 그냥 type 지정하는 게 더 확실한 거 아닌가요?

minjeong9919

고생하셨습니다 👍

minjeong9919 · 2024-08-16T07:08:09Z

src/types/searchType.ts

@@ -18,7 +20,7 @@ export interface ContentType {
  thumbnail: string;
  price: number;
  reviewCount: number;
-  category: 'keyboard' | 'keycap' | 'switch' | 'etc';
+  category: CategoryNameType;


깔꼼해요

minjeong9919 · 2024-08-16T07:08:46Z

src/types/productType.ts

@@ -9,6 +9,8 @@ export type OptionTypes = {
  optionName: string;
 };

+export type CategoryNameType = 'switch' | 'keyboard' | 'keycap' | 'etc';


제목부터 무섭네요

src/components/ItemOverview/ItemOverview.tsx

src/components/ItemOverview/ItemWrapper.tsx

…173-fix-상품-정보-옵션-컴포넌트-수정

armd482 added 3 commits August 10, 2024 14:12

Fix: 커스텀 키보드 옵션 오류 수정

94770b0

Feat: 일반 상품 카테고리 추가 및 클릭 시 상세 페이지 이동 구현

87b08b1

Feat: 장바구니 페이지 itemOverview 컴포넌트 적용

30c9ac4

armd482 added 🐞 Fix 버그 수정 📬 API 서버 api 통신 labels Aug 13, 2024

armd482 requested review from ggjiny, minjeong9919, Young2un and bokeeeey August 13, 2024 03:37

armd482 self-assigned this Aug 13, 2024

armd482 added 4 commits August 14, 2024 15:10

Merge: branch 'develop' of https://github.com/Quad8/quad8-front into …

f5de91e

…173-fix-상품-정보-옵션-컴포넌트-수정

Refactor: CategoryNameType 적용

a25ceec

Refactor: 캐싱 제거

42d20cd

Feat: 찜목록 페이지 ItemOverview 컴포넌트 적용

5a6be14

armd482 commented Aug 15, 2024

View reviewed changes

src/components/ItemOverview/ItemOverview.tsx Outdated Show resolved Hide resolved

ggjiny approved these changes Aug 15, 2024

View reviewed changes

Refactor: 장바구니 ItemOverView item 함수 분리 및 구조 분해 적용

35439b2

bokeeeey approved these changes Aug 15, 2024

View reviewed changes

minjeong9919 approved these changes Aug 16, 2024

View reviewed changes

armd482 added 2 commits August 17, 2024 16:41

Feat: 스켈레톤 구현

6340f88

Merge: branch 'develop' of https://github.com/Quad8/quad8-front into …

5de2da4

…173-fix-상품-정보-옵션-컴포넌트-수정

armd482 merged commit 5d2ec27 into develop Aug 18, 2024

armd482 deleted the 173-fix-상품-정보-옵션-컴포넌트-수정 branch August 25, 2024 14:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fix] 상품 정보 옵션 컴포넌트 수정 #176

[Fix] 상품 정보 옵션 컴포넌트 수정 #176

armd482 commented Aug 13, 2024 •

edited

Loading

ggjiny left a comment

ggjiny Aug 15, 2024

ggjiny Aug 15, 2024

armd482 Aug 15, 2024 •

edited

Loading

bokeeeey Aug 15, 2024

armd482 Aug 17, 2024

bokeeeey left a comment

bokeeeey Aug 15, 2024

bokeeeey Aug 15, 2024

minjeong9919 Aug 16, 2024

armd482 Aug 16, 2024

minjeong9919 left a comment

minjeong9919 Aug 16, 2024

minjeong9919 Aug 16, 2024

[Fix] 상품 정보 옵션 컴포넌트 수정 #176

[Fix] 상품 정보 옵션 컴포넌트 수정 #176

Conversation

armd482 commented Aug 13, 2024 • edited Loading

🚀 작업 내용

🖼️ 스크린샷

📝 참고 사항

🚨 관련 이슈 (이슈 번호)

✅ 체크리스트

ggjiny left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

armd482 Aug 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bokeeeey 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

minjeong9919 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

armd482 commented Aug 13, 2024 •

edited

Loading

armd482 Aug 15, 2024 •

edited

Loading