웹 페이지 프론트엔드 UI 수정

- 모바일에서 봤을 때 UI/UX 이상하고 불편했던 부분 수정
 - 블로그 글 모바일 크기 시 리스트 아래로 글이 내려가는 부분 수정
 - 전체 배경 이어 붙이기가 아닌 고정으로 스크롤 시에도 어색하지 않게 수정

src/pages/travel/Travel.css

@@ -24,6 +24,12 @@
     font-size: clamp(30px, 4vw, 40px);
 }
 
+@media (max-width: 768px) {
+    .travel-header h1 {
+        font-size: clamp(24px, 6vw, 32px);
+    }
+}
+
 .travel-sub {
     margin: 0;
     color: var(--muted);
@@ -52,6 +58,13 @@
     gap: 18px;
 }
 
+@media (max-width: 768px) {
+    .travel-grid {
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 12px;
+    }
+}
+
 .travel-albums {
     display: grid;
     gap: 24px;
@@ -80,6 +93,12 @@
     background: rgba(10, 12, 20, 0.6);
 }
 
+@media (max-width: 768px) {
+    .travel-map__canvas {
+        min-height: 300px;
+    }
+}
+
 .travel-map__info {
     width: 100%;
     border: 1px solid rgba(255, 255, 255, 0.2);
@@ -189,6 +208,12 @@
     cursor: pointer;
 }
 
+@media (max-width: 768px) {
+    .travel-card {
+        min-height: 150px;
+    }
+}
+
 .travel-card.is-wide {
     grid-column: span 2;
 }
@@ -352,6 +377,14 @@
     cursor: pointer;
 }
 
+@media (max-width: 768px) {
+    .travel-modal__arrow {
+        width: 48px;
+        height: 48px;
+        font-size: 28px;
+    }
+}
+
 .travel-card__meta {
     margin: 0;
     font-size: 12px;

src/pages/travel/Travel.jsx

@@ -169,6 +169,7 @@ const Travel = () => {
     const [regionsGeojson, setRegionsGeojson] = useState(null);
     const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(null);
     const [modalOffset, setModalOffset] = useState(24);
+    const [touchStartX, setTouchStartX] = useState(null);
     const cacheRef = useRef(new Map());
     const cacheTtlMs = 10 * 60 * 1000;
 
@@ -292,8 +293,42 @@ const Travel = () => {
             }
         };
 
+        const handleTouchStart = (event) => {
+            if (selectedPhotoIndex === null) return;
+            const touch = event.touches[0];
+            setTouchStartX(touch.clientX);
+        };
+
+        const handleTouchEnd = (event) => {
+            if (selectedPhotoIndex === null || touchStartX === null) return;
+            const touch = event.changedTouches[0];
+            const deltaX = touch.clientX - touchStartX;
+            if (Math.abs(deltaX) > 50) { // 스와이프 거리 임계값
+                if (deltaX > 0) {
+                    // 왼쪽으로 스와이프: 이전 사진
+                    setSelectedPhotoIndex((prev) =>
+                        prev === null
+                            ? prev
+                            : (prev - 1 + photos.length) % photos.length
+                    );
+                } else {
+                    // 오른쪽으로 스와이프: 다음 사진
+                    setSelectedPhotoIndex((prev) =>
+                        prev === null ? prev : (prev + 1) % photos.length
+                    );
+                }
+            }
+            setTouchStartX(null);
+        };
+
         window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
+        window.addEventListener('touchstart', handleTouchStart);
+        window.addEventListener('touchend', handleTouchEnd);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('touchstart', handleTouchStart);
+            window.removeEventListener('touchend', handleTouchEnd);
+        };
     }, [photos.length, selectedPhotoIndex]);
 
     useEffect(() => {