diff --git a/src/components/PartItem.jsx b/src/components/PartItem.jsx index dc17f3d0f2c491548717b0a139504a9031a8b2fa..f6c1d27acb80e32075fc3a8eaf734abd30004ab8 100644 --- a/src/components/PartItem.jsx +++ b/src/components/PartItem.jsx @@ -3,14 +3,14 @@ import React from "react"; const PartItem = ({ part }) => { return ( <div className="part-item"> - <img src={part.image_url} alt={part.name} className="part-image" /> - <div className="part-info"> + <div className="part-main-info"> + <img src={part.image_url} alt={part.name} className="part-image" /> <div className="part-header"> <span className="part-type">{part.type}</span> <h3 className="part-name">{part.name}</h3> </div> - <p className="part-description">{part.description}</p> </div> + <p className="part-description">{part.description}</p> </div> ); }; diff --git a/src/pages/MyCombinationPage/MyCombinationPage.css b/src/pages/MyCombinationPage/MyCombinationPage.css index 8848a39d6e6724eb2259483581b797cf5fdc8b1c..b3e9052c91831b163e7d2770c0ede50d33bb83a6 100644 --- a/src/pages/MyCombinationPage/MyCombinationPage.css +++ b/src/pages/MyCombinationPage/MyCombinationPage.css @@ -194,13 +194,19 @@ .part-item { display: flex; - align-items: flex-start; + flex-direction: column; padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%); box-shadow: var(--shadow-sm); transition: all 0.3s ease; border: 1px solid rgba(var(--primary-rgb), 0.08); + gap: 0.75rem; +} + +.part-main-info { + display: flex; + align-items: center; gap: 1rem; } @@ -215,13 +221,6 @@ flex-shrink: 0; } -.part-info { - display: flex; - flex-direction: column; - gap: 0.75rem; - flex: 1; -} - .part-header { display: flex; flex-direction: column; @@ -404,14 +403,14 @@ /* 부품 아이템 카드도 파스텔톤으로 개선 */ .part-item { display: flex; - align-items: flex-start; + flex-direction: column; padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%); box-shadow: var(--shadow-sm); transition: all 0.3s ease; border: 1px solid rgba(var(--primary-rgb), 0.08); - gap: 1rem; + gap: 0.75rem; } .part-item:hover {