feat: Information Card 컴포넌트 UI

[HMRyu]

✏️ 작업 내용

• Information Card 컴포넌트 UI 생성

📷 스크린샷

개설 확정인 경우

개설 확정이 아닌 경우

찜 기능 애니메이션 추가

https://github.com/user-attachments/assets/ab01b11a-8651-4c67-9cb3-f1fe676cf649

✍️ 사용법

// mock
const PARTICIPANTS = [
  {
    id: 0,
    name: 'first',
    image: '/images/profile.svg',
  },
  {
    id: 1,
    name: 'second',
    image: '/images/profile.svg',
  },
  {
    id: 2,
    name: 'third',
    image: '/images/profile.svg',
  },
  {
    id: 3,
    name: 'fourth',
    image: '/images/profile.svg',
  },
  {
    id: 4,
    name: 'fifth',
    image: '/images/profile.svg',
  },
  {
    id: 5,
    name: 'sixth',
    image: '/images/profile.svg',
  },
];

<InformationCard
  title='달램핏 오피스 스트레칭'
  address='을지로 3가 서울시 중구 청계천로 100'
  date='1월 7일'
  time='17:30'
  participants={PARTICIPANTS} // 참가자 정보
  maxParticipants={20} // 최대 참가 인원
  minParticipants={5} // 최소 참가 인원
/>

🎸 기타

heartPulse

tailwind config 에 heartPulse 애니메이션 추가

<IconSaveActive
  className='animate-heartPulse h-48 w-48 cursor-pointer'
  onClick={handleToggleSave}
/>

이렇게 사용할 수 있습니다. 확인 부탁드립니다.

Avatar 컴포넌트

참가한 유저의 이미지를 보여줄 수 있는 Avatar 컴포넌트를 생성했습니다. InformationCard 폴더 하위에 존재합니다.

확인 부탁드립니다!