[ADD] Day10 이나경 84 card에 onclick event prop 및 hover style 추가

[nakyoung98]

이 PR은 어떤 유형인가요?

• [ ] 리팩터링
• [x] 기능
• [ ] 버그 수정
• [ ] 최적화
• [ ] 문서 업데이트

설명

Card에 onClick prop 추가

• CardBlock의 onClick에 onClick prop 전달

  function Card({ cardData, **onClick** }) {
  if (cardData) {
  return (
    <CardProvider defaultValue={cardData}>
      <CardBlock onClick={**onClick**}>

hover style 추가

  &:hover {
    cursor: pointer;
    box-shadow: 0 0 20px var(--gray3);
    animation: sizePulsate ease-in-out 1s infinite;
  }

  @keyframes sizePulsate {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.02, 1.02);
    }
    100% {
      transform: scale(1, 1);
    }

1. hover시 pointer로 커서 모양바귐
2. box-shadow 진해짐
3. 커졌다 작아지는 애니메이션 발생

관련 티켓 및 문서

• Related Issue #84
• Closes #84

스크린샷, 녹화

UI 접근성 체크리스트

UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:

• [ ] Semantic HTML 구현?
• [ ] 키보드 조작이 지원?
• [ ] axe DevTools를 사용하여 Critical 및 Serious 문제를 확인하고 해결했나요?

[선택사항] 이 PR을 가장 잘 설명하는 GIF는 무엇인가요?