lotto lab 상단 설명 변경
여행 기록 사진 표시 모달 수정
This commit is contained in:
@@ -10,8 +10,8 @@ const Lotto = () => {
|
||||
<p className="lotto-kicker">Playground</p>
|
||||
<h1>Lotto Lab</h1>
|
||||
<p className="lotto-sub">
|
||||
기존 로또 추천 기능을 그대로 유지하면서 새로운 블로그 스타일에 맞게
|
||||
레이아웃을 정리했습니다.
|
||||
로또 추천 및 기록 관리 도구입니다. 다양한 알고리즘을 통해 번호를 추천받고,
|
||||
추첨 기록을 손쉽게 관리할 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="lotto-card">
|
||||
|
||||
@@ -257,14 +257,14 @@
|
||||
|
||||
.travel-modal__content {
|
||||
position: relative;
|
||||
max-width: min(920px, 92vw);
|
||||
max-height: 86vh;
|
||||
max-width: min(1200px, 94vw);
|
||||
max-height: 90vh;
|
||||
background: rgba(10, 12, 20, 0.92);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
padding: 20px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 14px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
@@ -294,6 +294,28 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.travel-modal__stage {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.travel-modal__frame {
|
||||
width: 100%;
|
||||
max-height: 68vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.travel-modal__image {
|
||||
width: min(100%, 980px);
|
||||
max-height: 68vh;
|
||||
object-fit: contain;
|
||||
border-radius: 14px;
|
||||
animation: travel-slide 260ms ease;
|
||||
}
|
||||
|
||||
.travel-modal__strip {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@@ -325,14 +347,6 @@
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.travel-modal__content img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 70vh;
|
||||
object-fit: contain;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.travel-modal__meta {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
@@ -355,33 +369,58 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.travel-modal__nav {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.travel-modal__arrow {
|
||||
pointer-events: auto;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(10, 12, 20, 0.7);
|
||||
background: rgba(10, 12, 20, 0.85);
|
||||
color: #f8f4f0;
|
||||
font-size: 22px;
|
||||
font-size: 26px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.travel-modal__arrow:hover {
|
||||
transform: translateY(-1px) scale(1.02);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
@keyframes travel-slide {
|
||||
from {
|
||||
opacity: 0.6;
|
||||
transform: translateY(8px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.travel-modal__content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.travel-modal__stage {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.travel-modal__frame {
|
||||
max-height: 56vh;
|
||||
}
|
||||
|
||||
.travel-modal__image {
|
||||
max-height: 56vh;
|
||||
}
|
||||
|
||||
.travel-modal__arrow {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: 28px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
font-size: 24px;
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -567,10 +567,10 @@ const Travel = () => {
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div className="travel-modal__nav">
|
||||
<div className="travel-modal__stage">
|
||||
<button
|
||||
type="button"
|
||||
className="travel-modal__arrow"
|
||||
className="travel-modal__arrow is-prev"
|
||||
onClick={() =>
|
||||
setSelectedPhotoIndex((prev) =>
|
||||
prev === null
|
||||
@@ -583,9 +583,32 @@ const Travel = () => {
|
||||
>
|
||||
{'<'}
|
||||
</button>
|
||||
<div className="travel-modal__frame">
|
||||
<img
|
||||
key={
|
||||
photos[selectedPhotoIndex]?.original ||
|
||||
photos[selectedPhotoIndex]?.src ||
|
||||
selectedPhotoIndex
|
||||
}
|
||||
className="travel-modal__image"
|
||||
src={
|
||||
photos[selectedPhotoIndex]?.original ||
|
||||
photos[selectedPhotoIndex]?.src
|
||||
}
|
||||
alt={getPhotoLabel(photos[selectedPhotoIndex])}
|
||||
onError={(event) => {
|
||||
const img = event.currentTarget;
|
||||
const original =
|
||||
photos[selectedPhotoIndex]?.original;
|
||||
if (original && img.src !== original) {
|
||||
img.src = original;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="travel-modal__arrow"
|
||||
className="travel-modal__arrow is-next"
|
||||
onClick={() =>
|
||||
setSelectedPhotoIndex((prev) =>
|
||||
prev === null
|
||||
@@ -636,13 +659,6 @@ const Travel = () => {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<img
|
||||
src={
|
||||
photos[selectedPhotoIndex]?.original ||
|
||||
photos[selectedPhotoIndex]?.src
|
||||
}
|
||||
alt={getPhotoLabel(photos[selectedPhotoIndex])}
|
||||
/>
|
||||
{photos[selectedPhotoIndex]?.album ||
|
||||
photos[selectedPhotoIndex]?.file ? (
|
||||
<p className="travel-modal__meta">
|
||||
|
||||
Reference in New Issue
Block a user