From ae56b0782523a64e0cbc1a0f28e4d14413f84fe9 Mon Sep 17 00:00:00 2001
From: myunsyeya <myunsyeya@ajou.ac.kr>
Date: Sun, 8 Dec 2024 03:26:50 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EB=B6=80=ED=92=88=20=EB=B0=95?=
=?UTF-8?q?=EC=8A=A4=20=ED=81=AC=EA=B8=B0=20=EC=9E=AC=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/PartItem.jsx | 6 +++---
.../MyCombinationPage/MyCombinationPage.css | 19 +++++++++----------
2 files changed, 12 insertions(+), 13 deletions(-)
diff --git a/src/components/PartItem.jsx b/src/components/PartItem.jsx
index dc17f3d..f6c1d27 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 8848a39..b3e9052 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 {
--
GitLab