From ff39fee9faeabaaad3abb765b9700898c7dfdd13 Mon Sep 17 00:00:00 2001 From: myunsyeya <myunsyeya@ajou.ac.kr> Date: Sun, 8 Dec 2024 03:19:37 +0900 Subject: [PATCH] =?UTF-8?q?style:=20=EB=B6=80=ED=92=88=20box=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=A1=B0=EC=A0=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PartItem.jsx | 8 +- .../MyCombinationPage/MyCombinationPage.css | 100 ++++++++++-------- 2 files changed, 60 insertions(+), 48 deletions(-) diff --git a/src/components/PartItem.jsx b/src/components/PartItem.jsx index cfb7971..dc17f3d 100644 --- a/src/components/PartItem.jsx +++ b/src/components/PartItem.jsx @@ -1,13 +1,15 @@ import React from "react"; const PartItem = ({ part }) => { - console.log(part); return ( <div className="part-item"> <img src={part.image_url} alt={part.name} className="part-image" /> <div className="part-info"> - <p className="part-type">{part.partType}</p> - <p className="part-name">{part.name}</p> + <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> </div> ); diff --git a/src/pages/MyCombinationPage/MyCombinationPage.css b/src/pages/MyCombinationPage/MyCombinationPage.css index 2d961c9..8848a39 100644 --- a/src/pages/MyCombinationPage/MyCombinationPage.css +++ b/src/pages/MyCombinationPage/MyCombinationPage.css @@ -194,88 +194,97 @@ .part-item { display: flex; - align-items: center; - padding: 1.5rem; + align-items: flex-start; + 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); -} - -.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); + gap: 1rem; } .part-image { - width: 100px; - height: 100px; - margin-right: 1.5rem; + width: 80px; + height: 80px; object-fit: contain; - padding: 0.75rem; + padding: 0.5rem; 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 { + display: flex; + flex-direction: column; + gap: 0.75rem; flex: 1; } +.part-header { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + .part-type { display: inline-block; - font-size: 0.85rem; + font-size: 0.8rem; font-weight: 600; color: var(--primary-color); - margin-bottom: 0.75rem; background-color: var(--background-light); - padding: 0.4rem 0.8rem; - border-radius: 6px; + padding: 0.3rem 0.6rem; + border-radius: 4px; 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); + width: fit-content; } .part-name { - font-size: 1.1rem; + font-size: 1rem; color: var(--text-primary); font-weight: 500; + margin: 0; +} + +.part-description { + font-size: 0.9rem; + color: var(--text-secondary); + margin: 0; line-height: 1.4; } -@media (max-width: 768px) { - .layout { - flex-direction: column; - padding: 1rem; - gap: 1rem; - } +.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); +} - .sidebar { - position: static; - max-width: 100%; - } +.part-item:hover .part-image { + background-color: white; + box-shadow: var(--shadow-sm); +} + +.part-item:hover .part-type { + background-color: var(--primary-color); + color: white; + border-color: var(--primary-color); +} +@media (max-width: 768px) { .part-item { - padding: 1rem; + padding: 0.75rem; } .part-image { - width: 80px; - height: 80px; - margin-right: 1rem; + width: 60px; + height: 60px; + } + + .part-name { + font-size: 0.9rem; } } @@ -395,13 +404,14 @@ /* 부품 아이템 카드도 파스텔톤으로 개선 */ .part-item { display: flex; - align-items: center; - padding: 1.5rem; + align-items: flex-start; + 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; } .part-item:hover { -- GitLab