diff --git a/src/components/CombinationGrid/CombinationGrid.css b/src/components/CombinationGrid/CombinationGrid.css
index 2a727bfa4c69ae9f4337317226933ac6dfbe6a43..55c14907ad63d525f24fc2b2be9fb837e20364c2 100644
--- a/src/components/CombinationGrid/CombinationGrid.css
+++ b/src/components/CombinationGrid/CombinationGrid.css
@@ -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,41 +19,68 @@
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 {
- color: var(--primary-color);
- font-size: 1.1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ padding-top: 0.5rem;
+ }
+
+ .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 {
color: var(--text-secondary);
font-size: 0.95rem;
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;
+ width: 60px;
+ height: 60px;
}
- }
-
-
- .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;
- }
-
- .part-item:hover .part-type {
- background-color: var(--primary-color);
- color: white;
- border-color: var(--primary-color);
}
\ No newline at end of file
diff --git a/src/components/CombinationGrid/CombinationGrid.jsx b/src/components/CombinationGrid/CombinationGrid.jsx
index 77c092130c34bd0a2e6ed88111f24608510a085d..449bd791c52f2c09dc1cfe750f04aa956fcf8501 100644
--- a/src/components/CombinationGrid/CombinationGrid.jsx
+++ b/src/components/CombinationGrid/CombinationGrid.jsx
@@ -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>
- <div>
- {combo.title}
+ <div className="card-title">
+ <div className="part-type">{combo.partType}</div>
+ <div>{combo.title}</div>
</div>
- </h2>
- <p className="card-description">
- {combo.description}
- </p>
+ </div>
+ <p className="card-description">{combo.description}</p>
</div>
))}
</div>
diff --git a/src/pages/MyCombinationPage/MyCombinationPage.css b/src/pages/MyCombinationPage/MyCombinationPage.css
index b3e9052c91831b163e7d2770c0ede50d33bb83a6..ffc38c5b709ea2c1e777a3fb9bda10c813944f94 100644
--- a/src/pages/MyCombinationPage/MyCombinationPage.css
+++ b/src/pages/MyCombinationPage/MyCombinationPage.css
@@ -7,8 +7,6 @@
}
.sidebar {
- position: sticky;
- top: 2rem;
flex: 1;
max-width: 300px;
padding: 1.5rem;
@@ -194,76 +192,52 @@
.part-item {
display: flex;
- flex-direction: column;
- 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: 0.75rem;
+ border: 1px solid transparent;
}
-.part-main-info {
- display: flex;
- align-items: center;
- gap: 1rem;
+.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-header {
- display: flex;
- flex-direction: column;
- gap: 0.25rem;
+.part-item:hover .part-image {
+ background-color: white;
+ box-shadow: var(--shadow-sm);
+}
+
+.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 {
@@ -272,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;
+.part-name {
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);
-}
-
-/* 부품 아이템 카드도 파스텔톤으로 개선 */
-.part-item {
- display: flex;
- 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-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);
+ line-height: 1.4;
}
-/* 모바일 대응 */
@media (max-width: 768px) {
- .part-list-header {
- padding: 1.2rem;
+ .layout {
+ flex-direction: column;
+ padding: 1rem;
+ gap: 1rem;
}
- .part-list-header h2 {
- font-size: 1.5rem;
+ .sidebar {
+ max-width: 100%;
}
- .share-button {
- padding: 0.5rem 1rem;
- font-size: 1rem;
+ .part-item {
+ padding: 1rem;
+ }
+
+ .part-image {
+ width: 80px;
+ height: 80px;
+ margin-right: 1rem;
}
}