여행 탭 구성 추가

- CORS 문제로 Proxy 서버 구축하여 api 키로 JSON 목록 불러옴
 - 여행 탭 UI 수정
This commit is contained in:
2026-01-18 15:34:05 +09:00
parent e8d3e65b69
commit 837408423e
2 changed files with 184 additions and 15 deletions

View File

@@ -52,6 +52,62 @@
gap: 18px;
}
.travel-albums {
display: grid;
gap: 24px;
}
.travel-album {
border: 1px solid var(--line);
border-radius: 24px;
padding: 20px;
background: rgba(9, 10, 16, 0.5);
display: grid;
gap: 18px;
}
.travel-album__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.travel-album__eyebrow {
margin: 0 0 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--accent);
}
.travel-album__meta {
margin: 6px 0 0;
color: var(--muted);
font-size: 13px;
}
.travel-album__cover {
width: 120px;
height: 120px;
border-radius: 16px;
object-fit: cover;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.travel-state {
color: var(--muted);
}
.travel-error {
color: #f9b6b1;
border: 1px solid rgba(249, 182, 177, 0.4);
border-radius: 14px;
padding: 12px;
background: rgba(249, 182, 177, 0.1);
}
.travel-card {
position: relative;
border-radius: 20px;
@@ -106,4 +162,9 @@
.travel-card.is-wide {
grid-column: span 1;
}
.travel-album__cover {
width: 100%;
height: 160px;
}
}