[feat] 카드 컴포넌트

[lybell-art]

어떤 기능인가요?

선착순 이벤트 섹션에 필요한, 카드 뒤집기 게임의 각각의 카드 컴포넌트를 개발합니다.

<FirstComeEventSection>
  <CardGame>
    <Card id="1" /> {/* <-- 이 부분 */}
    <Card id="2" />
    <Card id="3" />
    <Card id="4" />
  </CardGame>
</FirstComeEventSection>

작업 상세 내용

• 각각의 카드의 key값인 id, 뒤집을 수 있는 상태에 대한 lock, 못 뒤집게 하는 setLock props를 받아온다.
• 자체적으로 isFlipped 상태도 존재한다.
• lock === false인 상태에서 클릭 시, 카드가 왼쪽으로 뒤집힌다.
• 클릭하는 시점에, id props 기반으로 정답 호출 여부를 판정하는 함수를 호출한다.
• 정답 판정에 따라 뒷면의 렌더링을 다르게 수행한다.
• 정답이 판정난 상태에서 클릭 시, 카드 게임 종료 함수(서버로 선착순 이벤트 등록 시도)를 호출한다.
• 애니메이션이 시작될 때 setLock을 true로, 끝날 때 setLock을 false로 호출한다.

참고 이미지 및 자료