[Feat] Card 컴포넌트 개발 및 디자인#16
Hidden character warning
Conversation
PR 검증 결과✅ TypeScript: 통과 |
PR 검증 결과✅ TypeScript: 통과 |
PR 검증 결과✅ TypeScript: 통과 |
YeBeenChoi
left a comment
YeBeenChoi
left a comment
There was a problem hiding this comment.
속도가 엄청 빠르시네요... 👍 궁금한 점 몇 개 코멘트 달아 놓았으니 확인하시고 답변 부탁드려요... ㅎㅎ 고생 많으셨습니다~!
| <p className={title()}>{titleText}</p> | ||
| <p className={price()}>{priceText}</p> | ||
| <span className={date()}>{dateText}</span> |
There was a problem hiding this comment.
요기 텍스트 영역을 wrapper로 묶지 않은 특별한 이유가 있나요?? 나중에 카드에 찜 버튼이 생길 수도 있을 것 같고, 제가 보기에는 하나의 정보 블록처럼 생각돼서 textWrapper 슬롯을 두는 것도... 괜찮을 것 같아요!
There was a problem hiding this comment.
예빈님 커멘트 감사합니다!
text 영역 한 블록으로 보는 게 더 명확할 것 같아 textWrapper를 추가하는 방향으로 수정 완료했습니다!
| overlay: [ | ||
| 'absolute inset-0', | ||
| 'rounded-[var(--radius-l)]', | ||
| 'bg-white/20', | ||
| 'opacity-0', | ||
| 'transition-opacity', | ||
| 'pointer-events-none', | ||
| 'group-hover:opacity-100', | ||
| ], |
There was a problem hiding this comment.
hover 효과가 이미지 영역으로만 제한되게 구현하셨네요! 카드 전체에 hover 효과를 주는 방법도 있는데, 두 방법 중 어떤 게 더 좋다고...? 생각하시는지 궁금해서 질문 남깁니다! (피그마에 디자인이 정의되어 있지 않더라구요...)
There was a problem hiding this comment.
hover 트리거를 이미지 영역이 아닌 카드 전체로 변경하는 것이 UX적으로 나은 것 같아 수정 완료 했습니다!
감사합니다!!
PR 검증 결과✅ TypeScript: 통과 |
PR 검증 결과✅ TypeScript: 통과 |
3 participants
✨ 주요 변경사항
공용 Card 컴포넌트 구현했습니다.
Figma 디자인 스펙에 맞춰 구현했습니다.
📝 작업 상세 내용
Card 컴포넌트 및 Card.variants 분리 구현
디자인 토큰 기반 스타일 적용
Title 영역은 최대 2줄 말줄임 처리(line-clamp-2) 적용
Playground 페이지에서 Card 렌더링 및 동작 확인
✅ 체크리스트
Close #번호추가📸 스크린샷 (선택)
hover일 때
🔍 기타 참고사항
🔗 관련 이슈