Skip to content
Snippets Groups Projects
Commit 921c6ad4 authored by 정원제's avatar 정원제 :guitar:
Browse files

Merge branch 'enhanced-description' into 'main'

View: Enhanced CombinationGrid layout

See merge request !37
parents 85ced969 e90a8b2f
Branches
No related tags found
1 merge request!37View: Enhanced CombinationGrid layout
Pipeline #10797 passed
...@@ -68,3 +68,22 @@ ...@@ -68,3 +68,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 }) => { ...@@ -11,8 +11,17 @@ const CombinationGrid = ({ combination }) => {
{combination.map((combo, index) => ( {combination.map((combo, index) => (
<div key={index} className="combination-card"> <div key={index} className="combination-card">
<img src={combo.image_url} alt={combo.title} className="card-image" /> <img src={combo.image_url} alt={combo.title} className="card-image" />
<h2 className="card-title">{combo.title}</h2> <h2 className="card-title">
<p className="card-description">{combo.description}</p> <div className="part-type">
{combo.partType}
</div>
<div>
{combo.title}
</div>
</h2>
<p className="card-description">
{combo.description}
</p>
</div> </div>
))} ))}
</div> </div>
......
...@@ -10,26 +10,19 @@ const CombinationBox = ({ title, combination }) => { ...@@ -10,26 +10,19 @@ const CombinationBox = ({ title, combination }) => {
const fetchPartDetails = async () => { const fetchPartDetails = async () => {
try { try {
const details = await Promise.all( const details = await Promise.all(
combination.partids ?(
combination.partids.map(async (partId) => { combination.partids.map(async (partId) => {
const partData = await getPartById(partId); const partData = await getPartById(partId);
return { return {
image: partData.image_url, image: partData.image_url,
title: partData.name, title: partData.name,
description: partData.description, partType: partData.type,
description: partData.description
.split('/')
.map(item => item.trim())
.filter(item => item !== '')
.join(' / '),
}; };
} })
)):
(
combination.partIds.map(async (partId) => {
const partData = await getPartById(partId);
return {
image: partData.image_url,
title: partData.name,
description: partData.description,
};
}
))
); );
setPartDetails(details); setPartDetails(details);
} catch (error) { } catch (error) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment