Skip to content
Snippets Groups Projects
Commit ae56b078 authored by 정원제's avatar 정원제 :guitar:
Browse files

style: 부품 박스 크기 재조정

parent c1a7e8cd
Branches
No related tags found
No related merge requests found
Pipeline #10851 passed
...@@ -3,14 +3,14 @@ import React from "react"; ...@@ -3,14 +3,14 @@ import React from "react";
const PartItem = ({ part }) => { const PartItem = ({ part }) => {
return ( return (
<div className="part-item"> <div className="part-item">
<div className="part-main-info">
<img src={part.image_url} alt={part.name} className="part-image" /> <img src={part.image_url} alt={part.name} className="part-image" />
<div className="part-info">
<div className="part-header"> <div className="part-header">
<span className="part-type">{part.type}</span> <span className="part-type">{part.type}</span>
<h3 className="part-name">{part.name}</h3> <h3 className="part-name">{part.name}</h3>
</div> </div>
<p className="part-description">{part.description}</p>
</div> </div>
<p className="part-description">{part.description}</p>
</div> </div>
); );
}; };
......
...@@ -194,13 +194,19 @@ ...@@ -194,13 +194,19 @@
.part-item { .part-item {
display: flex; display: flex;
align-items: flex-start; flex-direction: column;
padding: 1rem; padding: 1rem;
border-radius: 12px; border-radius: 12px;
background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%); background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: all 0.3s ease; transition: all 0.3s ease;
border: 1px solid rgba(var(--primary-rgb), 0.08); border: 1px solid rgba(var(--primary-rgb), 0.08);
gap: 0.75rem;
}
.part-main-info {
display: flex;
align-items: center;
gap: 1rem; gap: 1rem;
} }
...@@ -215,13 +221,6 @@ ...@@ -215,13 +221,6 @@
flex-shrink: 0; flex-shrink: 0;
} }
.part-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
}
.part-header { .part-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -404,14 +403,14 @@ ...@@ -404,14 +403,14 @@
/* 부품 아이템 카드도 파스텔톤으로 개선 */ /* 부품 아이템 카드도 파스텔톤으로 개선 */
.part-item { .part-item {
display: flex; display: flex;
align-items: flex-start; flex-direction: column;
padding: 1rem; padding: 1rem;
border-radius: 12px; border-radius: 12px;
background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%); background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: all 0.3s ease; transition: all 0.3s ease;
border: 1px solid rgba(var(--primary-rgb), 0.08); border: 1px solid rgba(var(--primary-rgb), 0.08);
gap: 1rem; gap: 0.75rem;
} }
.part-item:hover { .part-item:hover {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment