feature: Card 컴포넌트 구현 #15
Conversation
|
Thanks for the contribution! Please review the labels and make any necessary changes. |
src/components/shared/Card/Card.tsx
Outdated
| export function Card({ thumbnail, title, description, ...restProps }: Props) { | ||
| return ( | ||
| <div className='flex w-full flex-col' {...restProps}> | ||
| <ImageFrame src={thumbnail} alt={title} sizes='200px' priority /> |
There was a problem hiding this comment.
우리 근데 사이즈는 200px 고정값인가요?? 그리고 내가 nextjs Image 컴포넌트를 잘 몰라서 그런데 200px이 아니라 187.5px로 설정되네
There was a problem hiding this comment.
아하 고것은 그 width 길이가 아니라 next/image에서 image를 다운로드할 때 현재 viewport에 따라 크기를 정해서 다운받는데 저거 명시안해주면 default 100vw로 다운로드 한다(예를들어 1920이 vw면 너비가 1920인 사진을 다운받음)해서 200px로 일단 고정했쓰 -> 187.5로 지정해도 되긴한데 뭔가 딱 맞아떨어졌으면 좋겠어서 일단 200px로 해뒀어
https://nextjs.org/docs/pages/api-reference/components/image#sizes 요 속성임 !
근데 저거 ImageFrame내에서 default 200으로 해놔서 명시안해줘도 되는데 해놓았네 빼야겠다
There was a problem hiding this comment.
일단 우리 가로 고정 길이 475px인거 같아서 sizes 475px로 고정했어 -> 많이 찾아보긴했는데 이렇게 쓰는게 맞는지 모르겠다.. 나중에 문제 생기면 다시 수정해봐야겠어
|
ㅠㅠㅠ 이거 이제 안쓰니까 합칠 필요가 없겠지..?? 고생했는데 윤규 |
|
안돼~ 눈물 😢 |
👀 What is this PR?
Card 컴포넌트 구현 완-료
📝 Changes
h-auto w-full object-cover object-center이거 추가하니깐 중간에 딱 맞게 잘림 👍next.config.js에 imageSize, deviceSize 설정을 했는데, 우리는 일단 모바일 크기의 뷰만 고려하기 때문에 큰 디바이스 크기에서의 이미지 srcset size를 next/image가 생성하지 않게 했음📌 Related issue(s)
📷 Attachment(optional)