diff --git a/src/components/CombinationGrid/CombinationGrid.css b/src/components/CombinationGrid/CombinationGrid.css index 20f75a71dba562bf6b1d618213e969d53e304fd6..2a727bfa4c69ae9f4337317226933ac6dfbe6a43 100644 --- a/src/components/CombinationGrid/CombinationGrid.css +++ b/src/components/CombinationGrid/CombinationGrid.css @@ -67,4 +67,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 b9c721d00b75856474c2b5290744847930c435d7..fd1c9d7dbaeb57f26510c98f6ed69588d23e6be3 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" /> + <h2 className="card-title"> + <div className="part-type"> + {combo.partType} + </div> + <div> + {combo.title} + </div> + </h2> + <p className="card-description"> + {combo.description} + </p> </div> ))} </div> diff --git a/src/pages/SearchCombinationPage/components/CombinationBox.jsx b/src/pages/SearchCombinationPage/components/CombinationBox.jsx index a078b3852d72f4484a1dd1bd0f8951ab4bbcab8a..2a595caddf545ec6abcfbdbaf4e001758865c2f3 100644 --- a/src/pages/SearchCombinationPage/components/CombinationBox.jsx +++ b/src/pages/SearchCombinationPage/components/CombinationBox.jsx @@ -10,26 +10,19 @@ const CombinationBox = ({ title, combination }) => { const fetchPartDetails = async () => { try { const details = await Promise.all( - combination.partids ?( combination.partids.map(async (partId) => { const partData = await getPartById(partId); return { image: partData.image_url, 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); } catch (error) {