From bca9724a4b258c4e883a7f8a38f50468d34b9304 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Mon, 26 Jan 2026 01:42:02 +0900
Subject: [PATCH] =?UTF-8?q?lotto=20lab=20=EC=83=81=EB=8B=A8=20=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

여행 기록 사진 표시 모달 수정
---
 src/pages/lotto/Lotto.jsx   |  4 +-
 src/pages/travel/Travel.css | 99 ++++++++++++++++++++++++++-----------
 src/pages/travel/Travel.jsx | 36 ++++++++++----
 3 files changed, 97 insertions(+), 42 deletions(-)

diff --git a/src/pages/lotto/Lotto.jsx b/src/pages/lotto/Lotto.jsx
index 8135a57..3be8c9b 100644
--- a/src/pages/lotto/Lotto.jsx
+++ b/src/pages/lotto/Lotto.jsx
@@ -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">
diff --git a/src/pages/travel/Travel.css b/src/pages/travel/Travel.css
index 47d273d..b3fc7b7 100644
--- a/src/pages/travel/Travel.css
+++ b/src/pages/travel/Travel.css
@@ -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;
     }
 }
 
diff --git a/src/pages/travel/Travel.jsx b/src/pages/travel/Travel.jsx
index 54ebb33..8aa1ea8 100644
--- a/src/pages/travel/Travel.jsx
+++ b/src/pages/travel/Travel.jsx
@@ -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">