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

sytle: 내 조합 페이지 부품 박스 스타일 추가

parent 6765f963
No related branches found
No related tags found
No related merge requests found
Pipeline #10857 passed
...@@ -5,12 +5,11 @@ const PartItem = ({ part }) => { ...@@ -5,12 +5,11 @@ const PartItem = ({ part }) => {
<div className="part-item"> <div className="part-item">
<div className="part-main-info"> <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-header"> <div className="part-info">
<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>
</div> </div>
<p className="part-description">{part.description}</p>
</div> </div>
); );
}; };
......
...@@ -194,40 +194,50 @@ ...@@ -194,40 +194,50 @@
.part-item { .part-item {
display: flex; display: flex;
align-items: center; padding: 1rem;
padding: 1.5rem; border-radius: 8px;
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);
position: relative;
overflow: hidden;
} }
.part-item:hover { .part-item::before {
transform: translateY(-2px); content: '';
box-shadow: var(--shadow-md); position: absolute;
background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.07) 100%); left: 0;
border-color: rgba(var(--primary-rgb), 0.15); 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 { .part-image {
width: 100px; width: 100px;
height: 100px; height: 100px;
margin-right: 1.5rem;
object-fit: contain; object-fit: contain;
padding: 0.75rem; padding: 0.75rem;
background-color: var(--background-light); background-color: var(--background-light);
border-radius: 8px; border-radius: 8px;
transition: all 0.3s ease; transition: all 0.3s ease;
} flex-shrink: 0;
.part-item:hover .part-image {
background-color: white;
box-shadow: var(--shadow-sm);
} }
.part-info { .part-info {
flex: 1; display: flex;
flex-direction: column;
gap: 0.5rem;
} }
.part-type { .part-type {
...@@ -235,12 +245,39 @@ ...@@ -235,12 +245,39 @@
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
color: var(--primary-color); color: var(--primary-color);
margin-bottom: 0.75rem;
background-color: var(--background-light); background-color: var(--background-light);
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--primary-light); border: 1px solid var(--primary-light);
letter-spacing: 0.5px; 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 { .part-item:hover .part-type {
...@@ -249,11 +286,8 @@ ...@@ -249,11 +286,8 @@
border-color: var(--primary-color); border-color: var(--primary-color);
} }
.part-name { .part-item:hover::before {
font-size: 1.1rem; background-color: var(--primary-color);
color: var(--text-primary);
font-weight: 500;
line-height: 1.4;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
...@@ -395,7 +429,6 @@ ...@@ -395,7 +429,6 @@
/* 부품 아이템 카드도 파스텔톤으로 개선 */ /* 부품 아이템 카드도 파스텔톤으로 개선 */
.part-item { .part-item {
display: flex; display: flex;
align-items: center;
padding: 1.5rem; padding: 1.5rem;
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%);
...@@ -404,11 +437,56 @@ ...@@ -404,11 +437,56 @@
border: 1px solid rgba(var(--primary-rgb), 0.08); border: 1px solid rgba(var(--primary-rgb), 0.08);
} }
.part-item:hover { .part-main-info {
transform: translateY(-2px); display: flex;
box-shadow: var(--shadow-md); gap: 1.5rem;
background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.07) 100%); align-items: center;
border-color: rgba(var(--primary-rgb), 0.15); 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;
} }
/* 모바일 대응 */ /* 모바일 대응 */
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment