gameListCard 컴포넌트 구현

[joyswim]

📝작업 내용

gameListCard 컴포넌트를 구현합니다.

⚠️ tailwind.config.ts 조정

• text-gray가 적용되지 않는 문제가 있어 textColors를 따로 정의했습니다.
• 카드에 쓰이는 gradient를 추가했습니다.

📷스크린샷(필요 시)

🧪 테스트

// Home
import { GameCard } from '@/components/GameListCard'

export default function Home() {
  const cards = [
    {
      title:
        '밸런스 게임 밸런스 게임밸런스 게임밸런스 게임밸런스 게임밸런스 게임',
      description:
        'description of game description of game   description of game    description of game        description of game',
      src: '/cat.jpg', // 임의의 사진을 public 폴더에 추가하세요.
    },
    {
      title: '달려라 기차',
      description:
        '기차가 나가신다 저리 비켜라 버스가 나가신다 저리 비켜라 기차가 나가신다 저리 비켜라 버스가 나가신다 저리 비켜라',
    },
    {
      title: '랜덤 질문',
      description:
        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam aliquid labore facilis alias minima quo excepturi optio voluptatum quidem, repellat suscipit quaerat sint ratione esse et architecto provident tempore tenetur!',
    },
  ]

  return (
    <main className="bg-gradient-purple h-screen w-screen'">
      <section className="flex justify-center gap-md p-lg h-1/4">
        {cards.map((card) => (
          <GameCard
            key={card.title}
            {...card}
          />
        ))}
      </section>
    </main>
  )
}

✨PR Point

• GameListCard를 담는 부모 요소에 flex, gap, flex-wrap 등 필요에 따라 별도로 조정해주세요.
• 제한사항
  1. flex 자식 요소인 GameListCard는 basis-1/3 max-w-80 min-w-60을 적용받습니다.
  2. description는 두 줄로 제한되어 있습니다.(line-clamp-2) 동적인 TailwindCSS 설정을 하는 방법이 있다면 알려주세요. CSS 동적 설정이 안되어 기본 설정해두었습니다.

[joyswim]

우선 리뷰가 너무 늦어져서 죄송합니다 ㅜ.ㅜ 석주님이 필요한 부분들은 다 말씀해주셔서, 지금 코드에서 더 수정할 부분은 없는 것 같습니다~

동적인 TailwindCSS 설정을 하는 방법이 있다면 알려주세요. CSS 동적 설정이 안되어 기본 설정해두었습니다.

저도 아직 Tailwind를 제대로 사용한 적 없어서 잘 모르겠지만 tailwind 동적 스타일링 적용 이런 글이 있는걸 보면 가능한 것 같습니다!

description는 두 줄로 제한되어 있습니다.(line-clamp-2)

이 설정 덕분에 깔끔하고 일관성 있어서 좋습니다 !

동적인 TailwindCSS 설정 공유 감사합니다! 저도 같은 블로그를 참고했는데 유용하더군요ㅎㅎ