[feat/#39] 베스트셀러 컴포넌트 및 광고 컴포넌트 구현 #55
Conversation
|
라벨 지정 제대로 되었는지, assignee 및 reviewer 지정했는지 체크 한 번씩 하기 🧞♂️ 고생했어요 다음 작업도 화이팅 !!!!!! 😍 |
src/components/Ad/Ad.styled.ts
Outdated
| export const AdWrapper = styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| width: 100vw; | ||
| flex-shrink: 0; | ||
| cursor: default; | ||
| align-self: stretch; | ||
| background: ${({ theme }) => theme.colors.bg_banner_green}; | ||
| `; |
There was a problem hiding this comment.
브라우저 크기를 줄이니까 Ad 컴포넌트가 좌측으로 밀리는 ..? 이슈가 발생하고 있어요 !
확인해보시면 좋을 듯 합니다
아마두 width: 100vw; 때문인 것 같은데 100%로 주면 괜찮아지긴 해요 !
근데 100vw면 현재 뷰포트의 너비를 100% 다 채워야 하지 않나 싶은데 왜 안되는지는 의문 .. 🥵
저도 레이아웃 잡을 때 width: 100vw; 썼던 것 같은데 확인해보고 수정해야겠네요 ..
There was a problem hiding this comment.
맞아요 저도 width100vw 하니까 뭔가 이상하더라고요!!! 100%로 한 번 해봐야겠습니닷
There was a problem hiding this comment.
저도 css를 잘 아는건 아니지만..
vw는 뷰포트를 기준으로 크기를 지정하게 되는데, 브라우저의 창을 줄이면 오른쪽의 스크롤바나 이런 부분들에 의해 예상보다 뷰포트가 더욱 줄어든다고 하더라구요! 그래서 왼쪽으로 밀리는 현상이 생기는게 아닌가 싶습니다..!
그래서 그냥 크기를 100%로 주거나 특정 값으로 주면 뷰 포트 상관 없이 값이 고정되니까, 그냥 밀리지 않고 잘리는 것 같고요! 수정이 필요해보이긴 하네요!
| export interface BestSeller { | ||
| id: number; | ||
| title: string; | ||
| image: React.ComponentType<React.SVGProps<SVGSVGElement>>; | ||
| } | ||
|
|
||
| export const list: BestSeller[] = [ | ||
| { | ||
| id: 3, | ||
| title: '도쿄 에일리언즈 9(트리플 ...)', | ||
| image: New, | ||
| }, | ||
| { | ||
| id: 4, | ||
| title: '작별하지 않는다', | ||
| image: PropertyDown, | ||
| }, | ||
| { | ||
| id: 5, | ||
| title: '채식주의자(리마스터판)', | ||
| image: PropertyDown, | ||
| }, | ||
| { |
There was a problem hiding this comment.
민이도 이렇게 했구나 !!!!!
저도 이렇게 했는데 요거 dynamic component rendering 관련해서 코멘트 받았었는데
아직 해답을 못 찾아서 알게되면 다시 코멘트 달러 올게요 . . .
There was a problem hiding this comment.
문제가 있는 방법은 아니라서~ 내버려둬도 될 것 같습니다! 단, 실제 상황에서는 string으로 이미지 주소 받아올테니 아마 저 방법을 사용하기는 어려울 수 있다는 점만 알고 있으면 될 거 같아요!
src/components/Ad/Ad.styled.ts
Outdated
| export const AdWrapper = styled.div` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| width: 100vw; | ||
| flex-shrink: 0; | ||
| cursor: default; | ||
| align-self: stretch; | ||
| background: ${({ theme }) => theme.colors.bg_banner_green}; | ||
| `; |
There was a problem hiding this comment.
맞아요 저도 width100vw 하니까 뭔가 이상하더라고요!!! 100%로 한 번 해봐야겠습니닷
| <ImgHomeAd1 /> | ||
| <S.AdTitle> | ||
| 독자 북펀드 <내 어둠은 지상에서 작품이 되었다> | ||
| <p>AD</p> |
There was a problem hiding this comment.
요기는 스타일이 들어가지 않아도 괜찮아서 p태그로 둔 건지 궁금합니다!
| <p style={{ width: '18.7rem' }}>{book.title}</p> | ||
| <S.CountDiv> | ||
| <book.image /> | ||
| <p>{book.id !== 3 && <span>1</span>} </p> |
There was a problem hiding this comment.
헉 이런 방법으로도 할 수 있군요!! 조건문 멋지게 쓰는 모습,, 배우겠습니닷
| const top6List = list.filter((item) => item.id >= 3 && item.id <= 6); | ||
| const top10List = list.filter((item) => item.id >= 7 && item.id <= 10); |
There was a problem hiding this comment.
ㅋㅋ 민이는 정말 JS 메서드를 잘 활용하는구나
| <p style={{ width: '2rem' }}>{book.id}</p> | ||
| <p style={{ width: '18.7rem' }}>{book.title}</p> |
There was a problem hiding this comment.
ㅋㅋㅋ 이렇게 간단할 때는 STYLED-COMPONENT를 만들기 귀찮을 때도 있죠.. 저도 종종 이러긴 하는데.. 나중에 길게 가져갈 프로덕트에서는 잘 고민해서 사용합시다! 만약 반복적으로 사용된다면 차라리 width값을 prop을 넘겨줘서 약간씩 다른 p태그를 만드는게 더 좋을 것 같아요!
📑 이슈 번호
✨️ 작업 내용
🌊 코멘트
📸 구현 결과