From b53ddc310d23ac6bc08ce0c26e4dccdb1f2326ab Mon Sep 17 00:00:00 2001
From: Yousuk <yousuk88@gmail.com>
Date: Wed, 30 Oct 2024 11:22:38 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20ProductCard=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EB=AF=B8=EB=94=94=EC=96=B4=20=EC=BF=BC=EB=A6=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProductCard/ProductCard.module.css        | 72 ++++++++++++-------
 1 file changed, 48 insertions(+), 24 deletions(-)

diff --git a/src/components/ProductCard/ProductCard.module.css b/src/components/ProductCard/ProductCard.module.css
index 2eba1e4c..bf735d01 100644
--- a/src/components/ProductCard/ProductCard.module.css
+++ b/src/components/ProductCard/ProductCard.module.css
@@ -1,20 +1,37 @@
+/* PC 스타일: 1200px 이상 */
 @media (min-width: 1200px) {
-  .card {
-    --card-width: 261px; /* 데스크탑 크기 */
+  :root {
+    --card-width: 261px;
     --card-height: 370px;
+    --card-small-width: 215px;
+    --card-small-height: 311px;
   }
 }
 
-@media (min-width: 375px) and (max-width: 1199.98px) {
-  .card {
-    --card-width: 343px; /* 태블릿 & 모바일 크기 */
+/* Tablet 스타일: 744px 이상 ~ 1199px 이하 */
+@media (min-width: 744px) and (max-width: 1199.98px) {
+  :root {
+    --card-width: 343px;
     --card-height: 434px;
+    --card-small-width: 215px;
+    --card-small-height: 311px;
+  }
+}
+
+/* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+@media (min-width: 375px) and (max-width: 743.98px) {
+  :root {
+    --card-width: 343px;
+    --card-height: 434px;
+    --card-small-width: 168px;
+    --card-small-height: 264px;
   }
 }
 
 .card {
   width: var(--card-width);
   height: var(--card-height);
+  border: 1px solid red;
 }
 
 .image {
@@ -22,8 +39,34 @@
   height: var(--card-width);
   object-fit: cover;
   margin-bottom: 16px;
+  border-radius: 16px;
+}
+
+/* ------------------------ */
+
+.card.small {
+  width: var(--card-small-width);
+  height: var(--card-small-height);
+  margin-bottom: 40px;
+  /* Mobile 스타일: 375px 이상 ~ 743px 이하 */
+  @media (min-width: 375px) and (max-width: 743.98px) {
+    margin-bottom: 32px;
+  }
+}
+
+.card.small > .image {
+  width: var(--card-small-width);
+  height: var(--card-small-width);
+  object-fit: cover;
+  margin-bottom: 14px;
 }
 
+.card.small .price {
+  line-height: 3.7rem;
+}
+
+/* ------------------------ */
+
 .name {
   font-size: 1.4rem;
   line-height: 2.4rem;
@@ -72,22 +115,3 @@
   font-weight: 500;
   font-size: 1.2rem;
 }
-
-/* ------------------------ */
-
-.card.small {
-  width: 215px;
-  height: 311px;
-  margin-bottom: 40px;
-}
-
-.card.small > .image {
-  width: 215px;
-  height: 215px;
-  object-fit: cover;
-  margin-bottom: 14px;
-}
-
-.card.small .price {
-  line-height: 3.7rem;
-}