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

style: 부품 박스 크기 재조정

parent c1a7e8cd
No related branches found
No related tags found
1 merge request!43style: 부품 박스 크기 재조정
Pipeline #10853 failed
Stage: test
Show whitespace changes
Inline Side-by-side
src/components/CombinationGrid/CombinationGrid.css
+ 51
− 42
View file @ eb70620d
......@@ -10,6 +10,8 @@
}
.combination-card {
display: flex;
flex-direction: column;
background-color: var(--background-white);
border: 1px solid var(--primary-light);
border-radius: 12px;
......@@ -17,33 +19,42 @@
transition: all 0.3s ease;
}
.combination-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
.card-main-info {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.card-image {
width: 120px;
height: 120px;
width: 80px;
height: 80px;
object-fit: contain;
margin: 0 auto 1rem;
padding: 0.75rem;
padding: 0.5rem;
background-color: var(--background-light);
border-radius: 8px;
transition: all 0.3s ease;
flex-shrink: 0;
}
.combination-card:hover .card-image {
background-color: white;
box-shadow: var(--shadow-sm);
.card-title {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-top: 0.5rem;
}
.card-title {
color: var(--primary-color);
font-size: 1.1rem;
.part-type {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--primary-color);
background-color: var(--background-light);
padding: 0.3rem 0.6rem;
border-radius: 4px;
border: 1px solid var(--primary-light);
letter-spacing: 0.5px;
width: fit-content;
}
.card-description {
......@@ -52,6 +63,24 @@
line-height: 1.4;
}
/* hover 효과 */
.combination-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.combination-card:hover .card-image {
background-color: white;
box-shadow: var(--shadow-sm);
}
.combination-card:hover .part-type {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
@media (max-width: 768px) {
.combination-grid {
grid-template-columns: 1fr;
......@@ -63,27 +92,7 @@
}
.card-image {
width: 100px;
height: 100px;
}
}
.part-type {
display: inline-block;
font-size: 0.85rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0.25rem;
background-color: var(--background-light);
padding: 0.4rem 0.8rem;
border-radius: 6px;
border: 1px solid var(--primary-light);
letter-spacing: 0.5px;
width: 60px;
height: 60px;
}
.part-item:hover .part-type {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
\ No newline at end of file
src/components/CombinationGrid/CombinationGrid.jsx
+ 7
− 13
View file @ eb70620d
......@@ -2,28 +2,22 @@ import React from "react";
import "./CombinationGrid.css";
const CombinationGrid = ({ combination }) => {
// console.log(combination);
if (!Array.isArray(combination)) {
return null; // combinations가 배열이 아닐 경우 아무것도 렌더링하지 않음
return null;
}
return (
<div className="combination-grid">
{combination.map((combo, index) => (
<div key={index} className="combination-card">
<div className="card-main-info">
<img src={combo.image} alt={combo.title} className="card-image" />
<h2 className="card-title">
<div className="part-type">
{combo.partType}
<div className="card-title">
<div className="part-type">{combo.partType}</div>
<div>{combo.title}</div>
</div>
<div>
{combo.title}
</div>
</h2>
<p className="card-description">
{combo.description}
</p>
<p className="card-description">{combo.description}</p>
</div>
))}
</div>
......
src/components/PartItem.jsx
+ 3
− 3
View file @ eb70620d
......@@ -3,14 +3,14 @@ import React from "react";
const PartItem = ({ part }) => {
return (
<div className="part-item">
<div className="part-main-info">
<img src={part.image_url} alt={part.name} className="part-image" />
<div className="part-info">
<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>
);
};
......
src/pages/MyCombinationPage/MyCombinationPage.css
+ 40
− 202
View file @ eb70620d
......@@ -7,8 +7,6 @@
}
.sidebar {
position: sticky;
top: 2rem;
flex: 1;
max-width: 300px;
padding: 1.5rem;
......@@ -194,77 +192,52 @@
.part-item {
display: flex;
align-items: flex-start;
padding: 1rem;
align-items: center;
padding: 1.5rem;
border-radius: 12px;
background: linear-gradient(135deg, var(--background-white) 0%, rgba(var(--primary-rgb), 0.03) 100%);
background-color: var(--background-white);
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
border: 1px solid rgba(var(--primary-rgb), 0.08);
gap: 1rem;
border: 1px solid transparent;
}
.part-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--primary-light);
}
.part-image {
width: 80px;
height: 80px;
width: 100px;
height: 100px;
margin-right: 1.5rem;
object-fit: contain;
padding: 0.5rem;
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.75rem;
flex: 1;
.part-item:hover .part-image {
background-color: white;
box-shadow: var(--shadow-sm);
}
.part-header {
display: flex;
flex-direction: column;
gap: 0.25rem;
.part-info {
flex: 1;
}
.part-type {
display: inline-block;
font-size: 0.8rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 0.75rem;
background-color: var(--background-light);
padding: 0.3rem 0.6rem;
border-radius: 4px;
padding: 0.4rem 0.8rem;
border-radius: 6px;
border: 1px solid var(--primary-light);
letter-spacing: 0.5px;
width: fit-content;
}
.part-name {
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;
}
.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:hover .part-image {
background-color: white;
box-shadow: var(--shadow-sm);
}
.part-item:hover .part-type {
......@@ -273,166 +246,31 @@
border-color: var(--primary-color);
}
@media (max-width: 768px) {
.part-item {
padding: 0.75rem;
}
.part-image {
width: 60px;
height: 60px;
}
.part-name {
font-size: 0.9rem;
}
}
.pc-item-buttons {
display: flex;
gap: 8px;
}
.edit-button,
.delete-button {
padding: 4px 12px;
font-size: 13px;
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 8px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.edit-button:hover,
.delete-button:hover {
background-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-light);
transform: translateY(-1px);
}
.edit-button:disabled,
.delete-button:disabled {
background-color: var(--primary-light);
border-color: var(--primary-light);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.part-list-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--background-white) 0%, var(--primary-light) 100%);
border-radius: 12px;
box-shadow: var(--shadow-sm);
border: 1px solid rgba(var(--primary-rgb), 0.1);
position: relative;
overflow: hidden;
}
/* 배경에 부드러운 장식 효과 추가 */
.part-list-header::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(var(--primary-rgb), 0.1) 0%, transparent 70%);
transform: translate(30%, -30%);
}
.part-list-header h2 {
margin: 0;
font-size: 1.8rem;
font-weight: 600;
color: var(--text-primary);
position: relative; /* 텍스트를 장식 위에 표시 */
}
.share-button {
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark, #0056b3) 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.1rem;
color: var(--text-primary);
font-weight: 500;
transition: all 0.2s ease;
box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.2);
position: relative;
overflow: hidden;
}
/* 버튼에 빛나는 효과 추가 */
.share-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: 0.5s;
}
.share-button:hover {
background: linear-gradient(135deg, var(--primary-dark, #0056b3) 0%, var(--primary-color) 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3);
}
.share-button:hover::before {
left: 100%;
}
.share-button:active {
transform: translateY(0);
line-height: 1.4;
}
/* 부품 아이템 카드도 파스텔톤으로 개선 */
.part-item {
display: flex;
align-items: flex-start;
@media (max-width: 768px) {
.layout {
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;
}
.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);
}
/* 모바일 대응 */
@media (max-width: 768px) {
.part-list-header {
padding: 1.2rem;
.sidebar {
max-width: 100%;
}
.part-list-header h2 {
font-size: 1.5rem;
.part-item {
padding: 1rem;
}
.share-button {
padding: 0.5rem 1rem;
font-size: 1rem;
.part-image {
width: 80px;
height: 80px;
margin-right: 1rem;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr