From 02d52a9fa67721ebd311164948ba243519825ca2 Mon Sep 17 00:00:00 2001
From: MinJ <ussr1285@ajou.ac.kr>
Date: Sat, 7 Dec 2024 23:39:13 +0900
Subject: [PATCH] =?UTF-8?q?View:=20CombinationGrid=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CombinationGrid/CombinationGrid.css       | 26 +++++++++++++++++--
 .../CombinationGrid/CombinationGrid.jsx       | 15 ++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/components/CombinationGrid/CombinationGrid.css b/src/components/CombinationGrid/CombinationGrid.css
index 20f75a7..b0bd0de 100644
--- a/src/components/CombinationGrid/CombinationGrid.css
+++ b/src/components/CombinationGrid/CombinationGrid.css
@@ -41,10 +41,13 @@
   
   .card-title {
     color: var(--primary-color);
-    font-size: 1.1rem;
     font-weight: 600;
     margin-bottom: 0.75rem;
   }
+
+  .card-title h2 {
+    font-size: 1.1rem;
+  }
   
   .card-description {
     color: var(--text-secondary);
@@ -67,4 +70,23 @@
       height: 100px;
     }
   }
-  
\ No newline at end of file
+  
+
+  .part-type {
+    display: inline-block;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--primary-color);
+    margin-bottom: 0.25rem;
+    background-color: var(--background-light);
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    border: 1px solid var(--primary-light);
+    letter-spacing: 0.5px;
+  }
+  
+  .part-item:hover .part-type {
+    background-color: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+  }
\ No newline at end of file
diff --git a/src/components/CombinationGrid/CombinationGrid.jsx b/src/components/CombinationGrid/CombinationGrid.jsx
index b9c721d..18435e4 100644
--- a/src/components/CombinationGrid/CombinationGrid.jsx
+++ b/src/components/CombinationGrid/CombinationGrid.jsx
@@ -10,9 +10,18 @@ const CombinationGrid = ({ combination }) => {
     <div className="combination-grid">
       {combination.map((combo, index) => (
         <div key={index} className="combination-card">
-          <img src={combo.image_url} alt={combo.title} className="card-image" />
-          <h2 className="card-title">{combo.title}</h2>
-          <p className="card-description">{combo.description}</p>
+            <img src={combo.image_url} alt={combo.title} className="card-image" />
+          <div className="card-title">
+            <div className="part-type">
+              {combo.partType}
+            </div>
+            <h2>
+              {combo.title}
+            </h2>
+          </div>
+          <p className="card-description">
+            {combo.description}
+          </p>
         </div>
       ))}
     </div>
-- 
GitLab