From adce9b005d3a63c3f4e31578afee7b7dcbc03fcc Mon Sep 17 00:00:00 2001
From: gahyeon <gus_05@naver.com>
Date: Wed, 15 Jan 2025 00:13:32 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20button->div=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=EC=9C=84=EC=8B=9C=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=EB=B6=80?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EA=B4=80=EB=A6=AC=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../card/popularCard/PopularCard.tsx          | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/card/popularCard/PopularCard.tsx b/src/components/card/popularCard/PopularCard.tsx
index d08af57..3ec2e77 100644
--- a/src/components/card/popularCard/PopularCard.tsx
+++ b/src/components/card/popularCard/PopularCard.tsx
@@ -1,6 +1,8 @@
 import Icon from '@assets/svgs';
+import { useState } from 'react';
 
 import * as styles from './popularCard.css';
+
 interface PopularCardProps {
   ranking: number;
   templeName: string;
@@ -18,10 +20,26 @@ const PopularCard = ({
   templeImg,
   tag,
   onClick,
-  isLiked,
+  isLiked = false,
 }: PopularCardProps) => {
+  const [liked, setLiked] = useState(isLiked);
+
+  const handleLikeClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setLiked((prev) => !prev);
+  };
+
   return (
-    <button className={styles.cardWrapper} onClick={onClick}>
+    <div
+      className={styles.cardWrapper}
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          onClick();
+        }
+      }}>
       <div>
         <div className={styles.imgBox} style={{ backgroundImage: `url(${templeImg})` }}>
           <span className={styles.rankBox}>{ranking}</span>
@@ -35,12 +53,12 @@ const PopularCard = ({
               <span>{tag}</span>
             </div>
           </div>
-          <button className={styles.likeBtn}>
-            {isLiked ? <Icon.IcnFlowerPink /> : <Icon.IncFlowerGray />}
+          <button className={styles.likeBtn} onClick={handleLikeClick}>
+            {liked ? <Icon.IcnFlowerPink /> : <Icon.IncFlowerGray />}
           </button>
         </div>
       </div>
-    </button>
+    </div>
   );
 };