diff --git a/src/components/PartItem.jsx b/src/components/PartItem.jsx index f6c1d27acb80e32075fc3a8eaf734abd30004ab8..60b74f3d20fb85c6d493dac6c37d0b4ad2d49ab2 100644 --- a/src/components/PartItem.jsx +++ b/src/components/PartItem.jsx @@ -5,12 +5,11 @@ const PartItem = ({ part }) => { <div className="part-item"> <div className="part-main-info"> <img src={part.image_url} alt={part.name} className="part-image" /> - <div className="part-header"> + <div className="part-info"> <span className="part-type">{part.type}</span> <h3 className="part-name">{part.name}</h3> </div> </div> - <p className="part-description">{part.description}</p> </div> ); }; diff --git a/src/pages/MyCombinationPage/MyCombinationPage.css b/src/pages/MyCombinationPage/MyCombinationPage.css index 2d961c96438a38418b427c124ae0e269902abe9b..03629ab5ede3dc0fc2ab20fe1875c00158a03a13 100644 --- a/src/pages/MyCombinationPage/MyCombinationPage.css +++ b/src/pages/MyCombinationPage/MyCombinationPage.css @@ -194,40 +194,50 @@ .part-item { display: flex; - align-items: center; - padding: 1.5rem; - border-radius: 12px; + padding: 1rem; + border-radius: 8px; 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); + position: relative; + overflow: hidden; } -.part-item:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-md); - background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.07) 100%); - border-color: rgba(var(--primary-rgb), 0.15); +.part-item::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 4px; + height: 100%; + background-color: var(--primary-light); + transition: all 0.3s ease; +} + +.part-main-info { + display: flex; + gap: 1.5rem; + align-items: center; + width: 100%; + padding-left: 0.5rem; } .part-image { width: 100px; height: 100px; - margin-right: 1.5rem; object-fit: contain; padding: 0.75rem; background-color: var(--background-light); border-radius: 8px; transition: all 0.3s ease; -} - -.part-item:hover .part-image { - background-color: white; - box-shadow: var(--shadow-sm); + flex-shrink: 0; } .part-info { - flex: 1; + display: flex; + flex-direction: column; + gap: 0.5rem; } .part-type { @@ -235,12 +245,39 @@ font-size: 0.85rem; font-weight: 600; color: var(--primary-color); - margin-bottom: 0.75rem; background-color: var(--background-light); padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid var(--primary-light); letter-spacing: 0.5px; + width: fit-content; + transition: all 0.3s ease; +} + +.part-name { + font-size: 1.1rem; + color: var(--text-primary); + font-weight: 500; + margin: 0; +} + +.part-description { + font-size: 0.95rem; + color: var(--text-secondary); + line-height: 1.4; + margin: 0; +} + +.part-item:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); + background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.07) 100%); + border-color: var(--primary-color); +} + +.part-item:hover .part-image { + background-color: white; + box-shadow: var(--shadow-sm); } .part-item:hover .part-type { @@ -249,11 +286,8 @@ border-color: var(--primary-color); } -.part-name { - font-size: 1.1rem; - color: var(--text-primary); - font-weight: 500; - line-height: 1.4; +.part-item:hover::before { + background-color: var(--primary-color); } @media (max-width: 768px) { @@ -395,7 +429,6 @@ /* 부품 아이템 카드도 파스텔톤으로 개선 */ .part-item { display: flex; - align-items: center; padding: 1.5rem; border-radius: 12px; background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%); @@ -404,11 +437,56 @@ border: 1px solid rgba(var(--primary-rgb), 0.08); } -.part-item:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-md); - background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.07) 100%); - border-color: rgba(var(--primary-rgb), 0.15); +.part-main-info { + display: flex; + gap: 1.5rem; + align-items: center; + width: 100%; +} + +.part-image { + width: 100px; + height: 100px; + object-fit: contain; + padding: 0.75rem; + background-color: var(--background-light); + border-radius: 8px; + transition: all 0.3s ease; + flex-shrink: 0; +} + +.part-info { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.part-type { + display: inline-block; + font-size: 0.85rem; + font-weight: 600; + color: var(--primary-color); + background-color: var(--background-light); + padding: 0.4rem 0.8rem; + border-radius: 6px; + border: 1px solid var(--primary-light); + letter-spacing: 0.5px; + width: fit-content; + transition: all 0.3s ease; +} + +.part-name { + font-size: 1.1rem; + color: var(--text-primary); + font-weight: 500; + margin: 0; +} + +.part-description { + font-size: 0.95rem; + color: var(--text-secondary); + line-height: 1.4; + margin: 0; } /* 모바일 대응 */