[feat/#48] 장바구니 section2 퍼블리싱 #50
Conversation
|
라벨 지정 제대로 되었는지, assignee 및 reviewer 지정했는지 체크 한 번씩 하기 🧞♂️ 고생했어요 다음 작업도 화이팅 !!!!!! 😍 |
|
|
||
| return ( | ||
| <S.RecItemSectionWrapper> | ||
| <ArrowBtn direction="left" /> |
There was a problem hiding this comment.
ArrowBtn 컴포넌트 분리해서 다른 곳에서도 재활용할 수 있게 ..🌟🌟🌟🔥🔥🔥
| {isHeartHovered === book.id ? ( | ||
| <IcHeartWhite /> | ||
| ) : ( | ||
| <IcHeartGray /> | ||
| )} |
There was a problem hiding this comment.
책의 ID와 hover 상태를 비교해서 조건부로 아이콘을 렌더링하는 것이군뇨 !! 🐻🐻🐻
There was a problem hiding this comment.
헉 저도 이 버튼 쓸 일이 많아서 commom 폴더에 해당 버튼 만들어뒀는데!! 나중에 병합할 때 한 번 봐야할 것 같네욥!
There was a problem hiding this comment.
옴마야 !!!!!!!! develop 브랜치에 없어서 아무도 안 만든줄 알았는데 !
요거 리팩토링 할 부분에 따로 적어둘게요 ! 하나만 사용하면 될 듯 합니다 ㅎㅎ
|
|
||
| const RecItemSection = () => { | ||
| const [isHeartHovered, setHeartHovered] = useState<number | null>(null); | ||
| const [isCartHovered, setCartHovered] = useState<number | null>(null); |
There was a problem hiding this comment.
useState를 통해서 사용자가 특정 버튼을 호버 했는지 상태로 관리하는 점이 신기합니다! 스타일로 그냥 주지 않고 useState를 사용한 이유에 대해 공유 해주실 수 있나용?
There was a problem hiding this comment.
같은 스타일링 코드를 가진 두 버튼에서, hover 여부에 따라 다른 svg를 렌더링해야 하기 때문에 state로 관리하는 것이 더 나을 것 같았습니다 ..!
There was a problem hiding this comment.
map을 쓰기 위한 배열을 다른 파일에서 관리하는 것도 좋은 방법인 것 같아요! 저도 다음에 적용해봐야겠습니다!
| <S.RecItem> | ||
| <book.image className="img-cartbook" /> |
There was a problem hiding this comment.
Dynamic Component Rendering을 사용했네요!
혹시 이걸 사용한 명확한 이유가 있으신가요??
노드 렌더링의 유연성은 증가하긴 하지만, 추후 코드의 복잡성이 올라갈 수 있어서 저는 잘 사용안해서요!
어떤 생각으로 사용한건지 궁금합니다 ~!
| interface ArrowBtnProps { | ||
| direction: 'left' | 'right'; | ||
| } | ||
|
|
||
| const ArrowBtn = ({ direction }: ArrowBtnProps) => { | ||
| return ( | ||
| <S.ArrowBtn> | ||
| {direction === 'left' ? <IcLeftarrowGray50 /> : <IcRightarrowGray50 />} | ||
| </S.ArrowBtn> | ||
| ); | ||
| }; |
| import { | ||
| ImgCartbook1, | ||
| ImgCartbook2, | ||
| ImgCartbook3, | ||
| ImgCartbook4, | ||
| ImgCartbook5, | ||
| } from '@assets/svgs'; | ||
| import { JSX } from 'react'; | ||
| import React from 'react'; | ||
|
|
||
| export interface Book { | ||
| id: number; | ||
| image: (props: React.SVGProps<SVGSVGElement>) => JSX.Element; | ||
| title: string; | ||
| } | ||
|
|
||
| export const REC_BOOKS: Book[] = [ | ||
| { | ||
| id: 1, | ||
| image: ImgCartbook1, | ||
| title: '시대예보: 호명사회', | ||
| }, | ||
| { | ||
| id: 2, | ||
| image: ImgCartbook2, | ||
| title: '머니트렌드 2025', | ||
| }, |
There was a problem hiding this comment.
위에서도 언급하긴 했지만, Dynamic Component Rendering 을 사용하려고 객체의 속성에 값을 넣어버린 것 같긴한데
장바구니 부분에서도 비슷한 로직(API로 사진 받아오는 부분) 이 존재했던 것 같아요!
실제 저희가 작업을 할 때는 더미데이터를 넣는 경우가 생각보다 없어서, 이렇게 동적으로 값을 넣어버리는 것은 오히려 조금 위험할 수도 있습니다 ! 서버한테는 이미지를 STRING형식의 주소로 받아올텐데, 이렇게 넣어버리면 당연히 문자열.. 을 렌더링하지는 않을테니 에러가 날테고 만약 코드가 이미 한참 쌓여있다면 디버깅하는데 좀 걸릴 수도 있어요 ㅜ 한번 더 사용 이유를 명확히 하는게 좋을 것 같습니다 !
There was a problem hiding this comment.
Dynamic Component Rendering이 렌더링 될 컴포넌트를 데이터 속성에 직접 할당하는 방식을 말하는게 맞을까요 ?
yarn svgr 로 생성된 tsx 파일을 사용하려다 보니 데이터 속성에 컴포넌트를 렌더링 하는 방식으로 코드를 작성했습니다.
코멘트 남겨주신 것 처럼 보통 서버로부터 이미지 데이터를 받아오면 string 형식의 주소로 받아올 것이고, 해당 주소값만 넣어주면 되겠지만 현 섹션에서는 이미지까지 더미데이터이기 때문에 이미지를 넣어주어야 하는데 src: 'public/svgs/img_cartbook1.svg' 와 같이 src를 지정해주는 방식이 더 낫나요 ?
아니면 다른 방법이 있다면 코멘트 남겨주시면 감사하겠습니닷 ~!!!!
There was a problem hiding this comment.
저도 계속 생각해봤는데, 타입만 제대로 정의하고 사용한다면 Dynamic Component Rendering 으로 하는 것도 좋은 대안이 될 수 있을 것 같아요! 이번에는 svg에 특별하게 로직이 얽혀 있지 않아도 뭐든 사용해도 되지만, 실제로는 대부분의 이미지를 string 형식으로 받아오니까... 저런 방식은 별로 사용할 일은 없지 않을까~
그래서 svg 파악하기 쉽게 그냥 전부 하나의 방식으로 (더미데이터는 Dynamic Component Rendering으로, api로 받아온 이미지는 src로 사용하는 것이 아닌) 스타일링 및 렌더링 로직을 구성하는 게 좋지 않을까~ 하는 생각이 들어 코멘트 남겼었어요!
뭐가 더 낫다고 판단하긴 어려워서 이건 그냥 보류해둬도 될 것 같습니다!!
| onMouseEnter={() => setHeartHovered(book.id)} | ||
| onMouseLeave={() => setHeartHovered(null)} |
📑 이슈 번호
✨️ 작업 내용
🌊 코멘트
components/common에ArrowBtn로 만들어두었습니다.<ArrowBtn direction="left" />과 같이 direction 지정해주시고 사용하시면 됩니닷 (left or right)📸 구현 결과