feat: 리뷰 컴포넌트 UI 작성 #24
Conversation
HMRyu
requested review from
BeMatthewsong,
yunchaeney and
hakyoung12
as code owners
| rating: number; | ||
| description: string; |
There was a problem hiding this comment.
P4) 위에 두 개도 옵셔널 체이닝 하시면 어떠신가요?
There was a problem hiding this comment.
rating, description 은 리뷰 컴포넌트에서 계속 사용되는 것 같아서 이렇게 지정했습니다...!
src/app/components/Review/Review.tsx
Outdated
| <div> | ||
| <Image | ||
| className='mx-auto w-full rounded-[24px] p-[10px] md:p-0' | ||
| src={image_source} | ||
| alt='review image' | ||
| width={378} | ||
| height={200} | ||
| quality={85} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
P1) 이미지 크기가 유동적일 경우를 대비해서 fill 속성 사용하시면 어떠실까요?
<div className="relative ...">
<Image className-"object-fit" fill .../>
</div>There was a problem hiding this comment.
넵 fill 속성과 object-cover 속성을 사용해서
부모 컨테이너를 꽉 채우면서 더 큰 부분은 이미지가 잘리도록 적용했습니다!
<div className='relative ...'>
<Image
object-cover
fill
...
/>
</div>
src/app/components/Review/Review.tsx
Outdated
| <div className='mt-[10px] flex md:mt-0'> | ||
| {Array.from({ length: rating }).map((_, index) => ( | ||
| <IconHeart key={index} className='h-24 w-24 text-var-orange-600' /> | ||
| ))} | ||
| </div> |
There was a problem hiding this comment.
P3) 하트 로직처럼 보이는데,
만약에 rating이 3이면 오렌지색 하트 3개만 그려지고 빈 하트는 어디에 생기나요?
|
|
||
| <div className='mt-8 flex items-center space-x-[8px] divide-x divide-var-gray-700 md:mt-10'> | ||
| <div> | ||
| <div className='flex items-center space-x-[8px]'> |
src/app/components/Review/Review.tsx
Outdated
| {Array.from({ length: rating }).map((_, index) => ( | ||
| <IconHeart key={index} className='h-24 w-24 text-var-orange-600' /> | ||
| ))} |
There was a problem hiding this comment.
점수 3점일 경우 하트 3개만 표현되는 것 같은데 맞나요? 3개 채워진 하트, 2개 빈 하트 되어야 하지 않나요?
| <div> | ||
| <div className='flex items-center space-x-[8px]'> | ||
| <Profile className='h-24 w-24' /> | ||
| <div className='text-[12px] text-var-gray-700'>{user_name}</div> |
There was a problem hiding this comment.
text-[12px] 의 경우 , tailwind config 수정해서 text-12 로 (제 PR 머지 되면) 사용 가능해요!
There was a problem hiding this comment.
받아오는 Props가 복잡한데 잘 작성해주셨어요!
LGTM!
| <div className='mt-[10px] flex md:mt-0'> | ||
| {Array.from({ length: rating }).map((_, index) => ( | ||
| <IconHeart key={index} className='h-24 w-24 text-var-orange-600' /> | ||
| ))} |
There was a problem hiding this comment.
5-rating 을 lengh로 줘서 빈하트 배열만 추가해주시면 좋을 것 같습니다!
✏️ 작업 내용
📷 스크린샷
✍️ 사용법
🎸 기타
image, description 등 prop 으로 받을 수 있도록 수정 후 다시 올리겠습니다!=> 수정했습니다.사진이 있는 경우와 없는 경우 둘로 나눴는데, 하나의 컴포넌트에서 핸들링 할 수 있게 수정해보겠습니다!=> 수정했습니다!