View: CombinationGrid 레이아웃 개선 1

src/components/CombinationGrid/CombinationGrid.css

@@ -41,11 +41,14 @@
   
   .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);
     font-size: 0.95rem;
@@ -68,3 +71,22 @@
     }
   }
   
+
+  .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

src/components/CombinationGrid/CombinationGrid.jsx

@@ -11,8 +11,17 @@ const CombinationGrid = ({ combination }) => {
       {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>
+          <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>