lotto lab 상단 설명 변경

여행 기록 사진 표시 모달 수정

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">

src/pages/travel/Travel.css

@@ -257,14 +257,14 @@
 
 .travel-modal__content {
     position: relative;
-    max-width: min(920px, 92vw);
+    max-width: min(1200px, 94vw);
-    max-height: 86vh;
+    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;
+    width: 56px;
-    height: 36px;
+    height: 56px;
-    border-radius: 50%;
+    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;
+        width: 52px;
-        height: 48px;
+        height: 52px;
-        font-size: 28px;
+        font-size: 24px;
+        justify-self: center;
     }
 }
 

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">