Skip to content
Snippets Groups Projects
Commit 02d52a9f authored by 민재 조's avatar 민재 조
Browse files

View: CombinationGrid 레이아웃 개선 1

parent b5244997
Branches
No related tags found
1 merge request!37View: Enhanced CombinationGrid layout
......@@ -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
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment