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