Design: 전체 상품 리스트 화면 구현 #33

wkdtnqls0506 · 2024-01-11T08:02:27Z

작업 개요 (이슈 번호)

close #27

작업 내용 (변경 사항)

전체 상품 리스트 화면 구현
- pages > products > CategoryTab
- pages > products > Items
- pages > products > OptionTap
- pages > products > Order
- pages > products > SearchBar
라우터 변경 : /search -> /products
- src/components/navBar/bottomNavBar/NavButton.tsx
- src/routes/router.tsx
- src/components/navBar/bottomNavBar/index.tsx
upperNavBar 스타일 변경
- 화면이 스크롤 될 때 upperNavBar가 투명색으로 설정되어 있어 다른 내용과 겹쳐서 아래 속성 추가해주었습니다!
```
background-color: #fff;
z-index: 999; 
```
메뉴 토클바 생성을 위한 @ariakit/react 설치
- npm i 해주세용!!

스크린샷

2024-01-11.4.47.33.mov

테스트 결과

상품 카드는 태블릿 디자인이 없어서 반응형 작업을 안했습니다! 참고해주세용
카테고리 및 옵션 url 전달은 추후에 구현할 예정입니다! (디자인만 봐주세용)

리뷰 요청 사항

공통으로 쓰이는 upperNavBar 파일이나 라우터 파일이 변경되었으니 한번씩 확인해주세요!
수정할 사항이 있으면 코멘트 남겨주세요!! ⭐️🙇🏻‍♀️

close #27

netlify · 2024-01-11T08:02:32Z

✅ Deploy Preview for animated-blini-88be51 ready!

Name	Link
🔨 Latest commit	`6276072`
🔍 Latest deploy log	https://app.netlify.com/sites/animated-blini-88be51/deploys/659fb60bc380960008ee9f40
😎 Deploy Preview	https://deploy-preview-33--animated-blini-88be51.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

vercel · 2024-01-11T08:02:32Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
yanabada-fe	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 11, 2024 9:34am

Gaoridang

드롭다운 애니메이션 엄청난데요ㅎㅎㅎ 고생하셨습니다!!

Gaoridang · 2024-01-11T08:19:03Z

src/pages/products/components/CategoryTab/index.tsx

+  { id: "ALL", name: "전체", search: "" },
+  { id: "HOTEL_RESORT", name: "호텔/리조트", search: "?category=HOTEL_RESORT" },
+  { id: "MOTEL", name: "모텔", search: "?category=MOTEL" },
+  { id: "PENSION", name: "펜션", search: "?category=PENSION" },
+  { id: "GUESTHOUSE", name: "게스트하우스", search: "?category=GUESTHOUSE" },
+  { id: "POOL_VILLA", name: "풀빌라", search: "?category=POOL_VILLA" }


따로 만들고 id 추가해주는 거 까지 좋네요!! 하나만 건의드려 보자면, search 부분에 ?category=가 반복되는 거 같아서 요거 Link to={`?category=${category.search}`} 이런 느낌으로 하는 건 어떨까요??

오!! 반영해보겠습니당! 👍🏻👍🏻

전체일때가 디폴트 값이라 URL이 쿼리스트링 없이 /products로만 될 거 같은데 괜찮을까요?!

Gaoridang · 2024-01-11T08:24:35Z

src/pages/products/components/Order/ToggleMenu.tsx

+  { open, setOpen, label, children, animate, transition, variants, initial, exit, ...props },
+  ref
+) {
+  const menu = Ariakit.useMenuStore({ open, setOpen });


framer motion이랑 같이 쓸 수 있는건가봐요! 처음 세팅하기가 쉽지 않으셨을 것 같은데 좋네요!!

예인님이 보내주신 레퍼런스가 되게 좋더라구요 👍🏻👍🏻

이친구는 무슨 역할을 하는 라이브러린가용?

useMenuStore은 메뉴 컴포넌트 외부에서 메뉴의 상태를 관리하는 데 사용할 수 있는거 라네요 하하

Gaoridang · 2024-01-11T08:27:03Z

src/pages/products/components/OptionTap/index.tsx

+  return (
+    <S.OptionContainer>
+      {optionList.map((category, index) => {
+        return <S.OptionList key={index}>{category.name}</S.OptionList>;


요기 검색 로직은 아직 구현하지 않으신거죠??

네넵! 이 pr 머지되구 msw 사용해서 해보려구요!

seungsimdang

와... ref 활용하는 이해도가 높으신것같네용 고생하셨습니다!

seungsimdang · 2024-01-11T08:36:10Z

src/pages/products/components/Items/index.tsx

헉 엄청 복잡할텐데 고생하셨네용...

seungsimdang · 2024-01-11T08:41:44Z

src/pages/products/components/Order/ToggleMenu.tsx

+  { open, setOpen, label, children, animate, transition, variants, initial, exit, ...props },
+  ref
+) {
+  const menu = Ariakit.useMenuStore({ open, setOpen });


이친구는 무슨 역할을 하는 라이브러린가용?

seungsimdang · 2024-01-11T08:46:04Z

src/pages/products/components/Order/ToggleMenu.tsx

+export interface MenuItemProps extends React.ComponentPropsWithoutRef<typeof MotionMenuItem> {}
+
+const MotionMenuItem = motion(Ariakit.MenuItem);
+
+const ToggleMenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(


어렵네용... 이 부분 조금 자세하게 설명 가능할까용?

Ariakit의 render 프로퍼티 대신 Framer Motion에 제어권을 넘겨줌으로써, Framer Motion이 프로퍼티를 처리한 후 나머지 부분을 Ariakit.MenuItem에 전달 -> 이렇게 하면 Framer Motion이 애니메이션 관련 프로퍼티를 처리하고, 나머지 프로퍼티는 Ariakit의 MenuItem에 전달됨

React.forwardRef를 사용하여 MenuItem 컴포넌트가 외부에서 ref를 통해 해당 컴포넌트의 DOM 요소에 직접 접근할 수 있음.

일단 제가 이해한걸로는 이정도인데, 좀 더 찾아보고 설명 덧붙여볼게요..!! 🥺🥺

MotionMenuItem은 framer-motion의 컴포넌트인데,
위에 console 창을 보시면 $$typeof: Symbol(react.forward_ref)으로 지정되어 있는걸 확인할 수 있습니다!
이 객체를 컴포넌트로 사용하려면 React.forwardRef 함수를 사용해야 한다고 하네요..!
framer-motion은 애니메이션을 적용할 때 DOM 요소에 직접적인 접근이 필요하므로, ref를 통해 해당 DOM 요소에 접근해야 한다고 하네요!!
그래서 React.forwardRef를 사용하여 ToggleMenuItem에서 ref를 MotionMenuItem으로 전달할 수 있는거 같습니당!!

seungsimdang · 2024-01-11T08:46:29Z

src/pages/products/components/Order/index.tsx

+      staggerChildren: 0.05
+    }
+  }
+} satisfies Variants;


satisfies는 무슨 역할인가요?

framer-motion 사용할때 타입을 확인하는 역할입니당!!

Variants를 사용하여 객체를 만들어주어서 코드를 좀 더 깔끔하게 작성할 수 있는데, satisfies를 사용해서 타입이 Variants 라는 것을 좀 더 명시적으로 나타낸 것이라고 보면 될 것 같습니다!

…o feature/#27

wkdtnqls0506 · 2024-01-11T09:51:42Z

와... ref 활용하는 이해도가 높으신것같네용 고생하셨습니다!

저도 사실,, 예인님이 보내주신 라이브러리 보면서 수정할 부분만 수정한거라 바보입니다..⭐️⭐️

https://ariakit.org/examples/menu-framer-motion

이 사이트 참고했어욥!!

furaha707

복잡한것도 척척 적용을 잘하시네요...👍🏻👍🏻
고생하셨습니다!!!

SOL-MI

토글 메뉴 쪽 코드가 인상깊네요b 고생하셨습니다ㅎㅎ 멋져용

SOL-MI · 2024-01-12T02:11:55Z

src/components/navBar/upperNavBar/styles.ts

+  background-color: #fff;
+  z-index: 999;


지금 pr은 안올라가 있는데 이 부분 prop으로 받을 수 있게 수정해두긴했었습니다..! 지금 보니까 transparent보다 #fff들어가있는 경우가 많은것 같아 #fff가 기본이고 transparent를 prop으로 받을 수 있게 하는 방향으로 수정해두겠습니당

넵 감사합니당! !

SOL-MI · 2024-01-12T04:16:36Z

src/pages/products/components/Order/ToggleMenu.tsx

+            store={menu}
+            alwaysVisible
+            className="menu"
+            data-placement={currentPlacement}
+            render={


전체적으로 해당 라이브러리에 대한 이해가 부족해서 그런지 흐름이 딱 파악이 안되네요! 혹시 작업하시면서 참고하셨던 레퍼런스나 링크가 있다면 공유 가능할까요 ? :D

아하 링크 위쪽에 첨부해두셔 줬군요! 해당링크로 좀더 참고해보겠습니당 :)

Design: 전체 상품 리스트 화면 구현

장수빈 added 11 commits January 11, 2024 16:31

Feat: 라우터 주소 변경

213a7b2

Feat: 라우터 주소 변경

d6e7773

Design: products > indext.tsx 디자인

aa77051

Design: CategoryTab 디자인

13de28e

Design: Item 디자인

6a57617

Design: OptionTab 디자인

10a8a91

Design: Order 메뉴 토글바 디자인

2027a39

Design: 검색바 디자인

8478879

Desig: 페이지 스크롤시 upperNavBar 색상 설정

51ed77f

Chore: 아이콘 추가 및 theme shadow 추가

6a55103

Chore: @ariakit/react 설치

49b145b

wkdtnqls0506 added the Design css 등 디자인 추가 및 수정 label Jan 11, 2024

wkdtnqls0506 requested review from seungsimdang, furaha707, SOL-MI and Gaoridang January 11, 2024 08:02

wkdtnqls0506 self-assigned this Jan 11, 2024

Gaoridang approved these changes Jan 11, 2024

View reviewed changes

seungsimdang approved these changes Jan 11, 2024

View reviewed changes

Fix: conflict 해결

78eebab

vercel bot deployed to Preview January 11, 2024 09:29 View deployment

Merge branch 'develop' of https://github.com/Yanabada/Yanabada_FE int…

6276072

…o feature/#27

vercel bot deployed to Preview January 11, 2024 09:34 View deployment

furaha707 approved these changes Jan 11, 2024

View reviewed changes

SOL-MI approved these changes Jan 12, 2024

View reviewed changes

wkdtnqls0506 merged commit f6c94c4 into develop Jan 12, 2024
8 checks passed

wkdtnqls0506 deleted the feature/#27 branch January 12, 2024 09:59

Gaoridang pushed a commit to Gaoridang/Yanabada_FE that referenced this pull request Jul 26, 2024

Merge pull request Yanabada#33 from Yanabada/feature/Yanabada#27

5c87c2c

Design: 전체 상품 리스트 화면 구현

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Design: 전체 상품 리스트 화면 구현 #33

Design: 전체 상품 리스트 화면 구현 #33

wkdtnqls0506 commented Jan 11, 2024 •

edited

Loading

netlify bot commented Jan 11, 2024 •

edited

Loading

vercel bot commented Jan 11, 2024 •

edited

Loading

Gaoridang left a comment

Gaoridang Jan 11, 2024

wkdtnqls0506 Jan 11, 2024

wkdtnqls0506 Jan 11, 2024

Gaoridang Jan 11, 2024

wkdtnqls0506 Jan 11, 2024

seungsimdang Jan 11, 2024

wkdtnqls0506 Jan 11, 2024

Gaoridang Jan 11, 2024

wkdtnqls0506 Jan 11, 2024

seungsimdang left a comment

seungsimdang Jan 11, 2024

seungsimdang Jan 11, 2024

seungsimdang Jan 11, 2024

wkdtnqls0506 Jan 11, 2024

wkdtnqls0506 Jan 12, 2024

seungsimdang Jan 11, 2024

wkdtnqls0506 Jan 11, 2024

wkdtnqls0506 commented Jan 11, 2024

furaha707 left a comment

SOL-MI left a comment

SOL-MI Jan 12, 2024

wkdtnqls0506 Jan 12, 2024

SOL-MI Jan 12, 2024

SOL-MI Jan 12, 2024

Design: 전체 상품 리스트 화면 구현 #33

Design: 전체 상품 리스트 화면 구현 #33

Conversation

wkdtnqls0506 commented Jan 11, 2024 • edited Loading

작업 개요 (이슈 번호)

작업 내용 (변경 사항)

스크린샷

테스트 결과

리뷰 요청 사항

netlify bot commented Jan 11, 2024 • edited Loading

✅ Deploy Preview for animated-blini-88be51 ready!

vercel bot commented Jan 11, 2024 • edited Loading

Gaoridang 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

Choose a reason for hiding this comment

seungsimdang 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

wkdtnqls0506 commented Jan 11, 2024

furaha707 left a comment

Choose a reason for hiding this comment

SOL-MI 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

wkdtnqls0506 commented Jan 11, 2024 •

edited

Loading

netlify bot commented Jan 11, 2024 •

edited

Loading

vercel bot commented Jan 11, 2024 •

edited

Loading