여행 탭 develop
- 지도 추가 - 지도 매칭하여 해당 여행 사진 매칭 - 사진 클릭시 모달로 사진 렌더링 (lazy, cache, thumb 사용)
This commit is contained in:
113
package-lock.json
generated
113
package-lock.json
generated
@@ -8,14 +8,16 @@
|
||||
"name": "web-ui",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-router-dom": "^6.30.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/react": "^18.2.79",
|
||||
"@types/react-dom": "^18.2.25",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
@@ -1032,6 +1034,17 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-leaflet/core": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
|
||||
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
|
||||
"license": "Hippocratic-2.1",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.23.2",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
|
||||
@@ -1457,25 +1470,32 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
|
||||
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.8.tgz",
|
||||
"integrity": "sha512-3MbSL37jEchWZz2p2mjntRZtPt837ij10ApxKfgmXCTuHWagYg7iA5bqPw6C8BMPfwidlvfPI/fxOc42HLhcyg==",
|
||||
"version": "18.2.79",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
|
||||
"integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "19.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
||||
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
||||
"version": "18.2.25",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.25.tgz",
|
||||
"integrity": "sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0"
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitejs/plugin-react": {
|
||||
@@ -2285,7 +2305,6 @@
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/js-yaml": {
|
||||
@@ -2358,6 +2377,13 @@
|
||||
"json-buffer": "3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
|
||||
"license": "BSD-2-Clause",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/levn": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
||||
@@ -2395,6 +2421,18 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"loose-envify": "cli.js"
|
||||
}
|
||||
},
|
||||
"node_modules/lru-cache": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
|
||||
@@ -2656,26 +2694,44 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
|
||||
"integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "19.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
|
||||
"integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
"integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19.2.3"
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-leaflet": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
|
||||
"integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
|
||||
"license": "Hippocratic-2.1",
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
@@ -2796,10 +2852,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.27.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
|
||||
"integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
|
||||
"license": "MIT"
|
||||
"version": "0.23.2",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
|
||||
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "6.3.1",
|
||||
|
||||
10
package.json
10
package.json
@@ -13,14 +13,16 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-router-dom": "^6.30.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/react": "^18.2.79",
|
||||
"@types/react-dom": "^18.2.25",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
|
||||
34
src/data/travelRegions.js
Normal file
34
src/data/travelRegions.js
Normal file
@@ -0,0 +1,34 @@
|
||||
export const travelRegions = [
|
||||
{
|
||||
id: 'jeju',
|
||||
label: 'Jeju',
|
||||
bounds: [
|
||||
[33.06, 126.1],
|
||||
[33.6, 126.95],
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'maldives',
|
||||
label: 'Maldives',
|
||||
bounds: [
|
||||
[-0.7, 72.6],
|
||||
[7.3, 73.9],
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'osaka',
|
||||
label: 'Osaka',
|
||||
bounds: [
|
||||
[34.4, 135.2],
|
||||
[35.0, 135.8],
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'taipei',
|
||||
label: 'Taipei',
|
||||
bounds: [
|
||||
[24.9, 121.3],
|
||||
[25.2, 121.7],
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -57,6 +57,56 @@
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.travel-albums.is-blurred {
|
||||
filter: blur(3px);
|
||||
transition: filter 0.2s ease;
|
||||
}
|
||||
|
||||
.travel-albums.is-blurred * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.travel-map {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.travel-map__canvas {
|
||||
width: 100%;
|
||||
min-height: 520px;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(10, 12, 20, 0.6);
|
||||
}
|
||||
|
||||
.travel-map__info {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 18px;
|
||||
padding: 14px 16px;
|
||||
background: rgba(10, 12, 20, 0.75);
|
||||
backdrop-filter: blur(6px);
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.travel-map__title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.travel-map__desc {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.travel-album {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 24px;
|
||||
@@ -66,6 +116,28 @@
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.travel-album__footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.travel-load-more {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(10, 12, 20, 0.6);
|
||||
color: #f8f4f0;
|
||||
border-radius: 999px;
|
||||
padding: 10px 18px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.02em;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.travel-load-more:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.travel-album__head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -114,6 +186,7 @@
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
min-height: 220px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.travel-card.is-wide {
|
||||
@@ -146,6 +219,139 @@
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.travel-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(6, 8, 12, 0.75);
|
||||
display: grid;
|
||||
align-items: start;
|
||||
justify-items: center;
|
||||
padding: 28px 24px 24px;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.travel-modal__content {
|
||||
position: relative;
|
||||
max-width: min(920px, 92vw);
|
||||
max-height: 86vh;
|
||||
background: rgba(10, 12, 20, 0.92);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
border-radius: 18px;
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.travel-modal__summary {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.travel-modal__summary-title {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: #f1c07a;
|
||||
}
|
||||
|
||||
.travel-modal__summary-meta {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.travel-modal__strip {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.travel-modal__thumb {
|
||||
width: 64px;
|
||||
height: 48px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(10, 12, 20, 0.6);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.travel-modal__thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.travel-modal__thumb.is-active {
|
||||
opacity: 1;
|
||||
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);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.travel-modal__close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(10, 12, 20, 0.8);
|
||||
color: #f8f4f0;
|
||||
font-size: 18px;
|
||||
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%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(10, 12, 20, 0.7);
|
||||
color: #f8f4f0;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.travel-card__meta {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
@@ -159,6 +365,10 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.travel-map {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.travel-card.is-wide {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
@@ -1,84 +1,337 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { GeoJSON, MapContainer, TileLayer, useMap } from 'react-leaflet';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import './Travel.css';
|
||||
|
||||
const PHOTO_CHUNK_SIZE = 60;
|
||||
const THUMB_STRIP_LIMIT = 36;
|
||||
|
||||
const normalizePhotos = (items = []) =>
|
||||
items
|
||||
.map((item) => {
|
||||
if (typeof item === 'string') return { src: item, title: '' };
|
||||
if (!item) return null;
|
||||
return {
|
||||
src: item.url || item.path || item.src || '',
|
||||
title: item.title || item.name || '',
|
||||
src: item.thumb || item.url || item.path || item.src || '',
|
||||
title: item.title || item.name || item.file || '',
|
||||
original: item.url || item.path || item.src || '',
|
||||
file: item.file || '',
|
||||
album: item.album || '',
|
||||
};
|
||||
})
|
||||
.filter((item) => item && item.src);
|
||||
|
||||
const getPhotoLabel = (src) => {
|
||||
if (!src) return '';
|
||||
const parts = src.split('/');
|
||||
const getPhotoLabel = (photo) => {
|
||||
if (!photo) return '';
|
||||
if (photo.title) return photo.title;
|
||||
if (photo.file) return photo.file;
|
||||
if (!photo.src) return '';
|
||||
const parts = photo.src.split('/');
|
||||
return parts[parts.length - 1];
|
||||
};
|
||||
|
||||
const Travel = () => {
|
||||
const [albums, setAlbums] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const getStripRange = (length, center) => {
|
||||
if (length <= THUMB_STRIP_LIMIT) return [0, length];
|
||||
const half = Math.floor(THUMB_STRIP_LIMIT / 2);
|
||||
let start = Math.max(0, center - half);
|
||||
let end = start + THUMB_STRIP_LIMIT;
|
||||
if (end > length) {
|
||||
end = length;
|
||||
start = end - THUMB_STRIP_LIMIT;
|
||||
}
|
||||
return [start, end];
|
||||
};
|
||||
|
||||
const TravelPhotoGrid = ({ photos, regionLabel, onSelectPhoto }) => {
|
||||
const [visibleCount, setVisibleCount] = useState(() =>
|
||||
Math.min(PHOTO_CHUNK_SIZE, photos.length)
|
||||
);
|
||||
const sentinelRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setVisibleCount(Math.min(PHOTO_CHUNK_SIZE, photos.length));
|
||||
}, [photos.length]);
|
||||
|
||||
const loadAlbums = async () => {
|
||||
useEffect(() => {
|
||||
const sentinel = sentinelRef.current;
|
||||
if (!sentinel) return undefined;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (!entries[0]?.isIntersecting) return;
|
||||
setVisibleCount((prev) =>
|
||||
Math.min(prev + PHOTO_CHUNK_SIZE, photos.length)
|
||||
);
|
||||
},
|
||||
{ rootMargin: '240px' }
|
||||
);
|
||||
|
||||
observer.observe(sentinel);
|
||||
return () => observer.disconnect();
|
||||
}, [photos.length]);
|
||||
|
||||
const visiblePhotos = photos.slice(0, visibleCount);
|
||||
const canLoadMore = visibleCount < photos.length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="travel-grid">
|
||||
{visiblePhotos.map((photo, index) => {
|
||||
const label = getPhotoLabel(photo);
|
||||
return (
|
||||
<article
|
||||
key={`${regionLabel}-${photo.src}`}
|
||||
className={`travel-card ${
|
||||
index % 6 === 0 ? 'is-wide' : ''
|
||||
}`}
|
||||
onClick={(event) => onSelectPhoto(index, event)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
onSelectPhoto(index, event);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={photo.src}
|
||||
alt={label}
|
||||
loading="lazy"
|
||||
onError={(event) => {
|
||||
const img = event.currentTarget;
|
||||
if (photo.original && img.src !== photo.original) {
|
||||
img.src = photo.original;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="travel-card__overlay">
|
||||
<p className="travel-card__title">{label}</p>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="travel-album__footer" ref={sentinelRef}>
|
||||
{canLoadMore ? (
|
||||
<button
|
||||
type="button"
|
||||
className="travel-load-more"
|
||||
onClick={() =>
|
||||
setVisibleCount((prev) =>
|
||||
Math.min(prev + PHOTO_CHUNK_SIZE, photos.length)
|
||||
)
|
||||
}
|
||||
>
|
||||
Load more ({visibleCount}/{photos.length})
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RegionsLayer = ({ geojson, onSelectRegion }) => {
|
||||
const map = useMap();
|
||||
|
||||
if (!geojson) return null;
|
||||
|
||||
return (
|
||||
<GeoJSON
|
||||
data={geojson}
|
||||
style={() => ({
|
||||
color: '#7c7c7c',
|
||||
weight: 1,
|
||||
fillOpacity: 0.2,
|
||||
})}
|
||||
onEachFeature={(feature, layer) => {
|
||||
layer.on('click', () => {
|
||||
if (!feature?.properties?.id) return;
|
||||
map.fitBounds(layer.getBounds(), {
|
||||
padding: [40, 40],
|
||||
animate: true,
|
||||
});
|
||||
onSelectRegion({
|
||||
id: feature.properties.id,
|
||||
name: feature.properties.name || feature.properties.id,
|
||||
});
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Travel = () => {
|
||||
const [photos, setPhotos] = useState([]);
|
||||
const [photoSummary, setPhotoSummary] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [selectedRegion, setSelectedRegion] = useState(null);
|
||||
const [regionsGeojson, setRegionsGeojson] = useState(null);
|
||||
const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(null);
|
||||
const [modalOffset, setModalOffset] = useState(24);
|
||||
const cacheRef = useRef(new Map());
|
||||
const cacheTtlMs = 10 * 60 * 1000;
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
|
||||
const loadRegions = async () => {
|
||||
try {
|
||||
const regionRes = await fetch('/api/travel/regions', {
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (!regionRes.ok) {
|
||||
throw new Error(
|
||||
`지역 정보 로딩 실패 (${regionRes.status})`
|
||||
);
|
||||
}
|
||||
const regionJson = await regionRes.json();
|
||||
setRegionsGeojson(regionJson);
|
||||
} catch (err) {
|
||||
if (err?.name === 'AbortError') return;
|
||||
setError(err?.message ?? String(err));
|
||||
}
|
||||
};
|
||||
|
||||
loadRegions();
|
||||
return () => controller.abort();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedRegion) return undefined;
|
||||
const controller = new AbortController();
|
||||
|
||||
const loadRegionPhotos = async () => {
|
||||
const cached = cacheRef.current.get(selectedRegion.id);
|
||||
if (cached && Date.now() - cached.timestamp < cacheTtlMs) {
|
||||
setPhotos(cached.items);
|
||||
if (cached.items.length > 0) {
|
||||
setModalOffset(24);
|
||||
setSelectedPhotoIndex(0);
|
||||
} else {
|
||||
setSelectedPhotoIndex(null);
|
||||
}
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const albumRes = await fetch('/api/travel/albums');
|
||||
if (!albumRes.ok) {
|
||||
throw new Error(`앨범 목록 로딩 실패 (${albumRes.status})`);
|
||||
}
|
||||
const albumJson = await albumRes.json();
|
||||
const items = albumJson.items ?? [];
|
||||
|
||||
const hydrated = await Promise.all(
|
||||
items.map(async (item) => {
|
||||
const name = item.album || item.name || '';
|
||||
if (!name) return null;
|
||||
const photoRes = await fetch(
|
||||
`/api/travel/albums/${encodeURIComponent(name)}`
|
||||
);
|
||||
if (!photoRes.ok) {
|
||||
throw new Error(`앨범 로딩 실패: ${name}`);
|
||||
}
|
||||
const photoJson = await photoRes.json();
|
||||
const photos = normalizePhotos(photoJson.items ?? []);
|
||||
return {
|
||||
name,
|
||||
count: item.count ?? photos.length,
|
||||
cover: item.cover || photos[0]?.src || '',
|
||||
photos,
|
||||
};
|
||||
})
|
||||
const photoRes = await fetch(
|
||||
`/api/travel/photos?region=${encodeURIComponent(
|
||||
selectedRegion.id
|
||||
)}`,
|
||||
{ signal: controller.signal }
|
||||
);
|
||||
|
||||
if (!cancelled) {
|
||||
setAlbums(hydrated.filter(Boolean));
|
||||
if (!photoRes.ok) {
|
||||
throw new Error(
|
||||
`지역 사진 로딩 실패 (${photoRes.status})`
|
||||
);
|
||||
}
|
||||
const photoJson = await photoRes.json();
|
||||
const items = Array.isArray(photoJson)
|
||||
? photoJson
|
||||
: photoJson.items ?? [];
|
||||
const summarySource = Array.isArray(photoJson)
|
||||
? {}
|
||||
: photoJson ?? {};
|
||||
setPhotoSummary({
|
||||
total: summarySource.total ?? items.length,
|
||||
albums: summarySource.matched_albums ?? [],
|
||||
});
|
||||
const normalized = normalizePhotos(items);
|
||||
cacheRef.current.set(selectedRegion.id, {
|
||||
timestamp: Date.now(),
|
||||
items: normalized,
|
||||
});
|
||||
setPhotos(normalized);
|
||||
if (normalized.length > 0) {
|
||||
setModalOffset(24);
|
||||
setSelectedPhotoIndex(0);
|
||||
} else {
|
||||
setSelectedPhotoIndex(null);
|
||||
}
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
setError(err?.message ?? String(err));
|
||||
}
|
||||
if (err?.name === 'AbortError') return;
|
||||
setError(err?.message ?? String(err));
|
||||
setPhotos([]);
|
||||
setPhotoSummary(null);
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
setLoading(false);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadAlbums();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
loadRegionPhotos();
|
||||
return () => controller.abort();
|
||||
}, [selectedRegion]);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedPhotoIndex(null);
|
||||
setPhotoSummary(null);
|
||||
}, [selectedRegion]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedPhotoIndex === null) return undefined;
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
setSelectedPhotoIndex(null);
|
||||
return;
|
||||
}
|
||||
if (event.key === 'ArrowLeft') {
|
||||
setSelectedPhotoIndex((prev) =>
|
||||
prev === null
|
||||
? prev
|
||||
: (prev - 1 + photos.length) % photos.length
|
||||
);
|
||||
}
|
||||
if (event.key === 'ArrowRight') {
|
||||
setSelectedPhotoIndex((prev) =>
|
||||
prev === null ? prev : (prev + 1) % photos.length
|
||||
);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [photos.length, selectedPhotoIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedPhotoIndex === null) return undefined;
|
||||
const { overflow } = document.body.style;
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => {
|
||||
document.body.style.overflow = overflow;
|
||||
};
|
||||
}, [selectedPhotoIndex]);
|
||||
|
||||
const [stripStart, stripEnd] =
|
||||
selectedPhotoIndex === null
|
||||
? [0, 0]
|
||||
: getStripRange(photos.length, selectedPhotoIndex);
|
||||
|
||||
const handleSelectPhoto = (index, event) => {
|
||||
if (event) {
|
||||
const pointY =
|
||||
typeof event.clientY === 'number'
|
||||
? event.clientY
|
||||
: event?.currentTarget?.getBoundingClientRect
|
||||
? event.currentTarget.getBoundingClientRect().top
|
||||
: null;
|
||||
if (pointY !== null) {
|
||||
const nextOffset = Math.min(
|
||||
Math.max(pointY - 120, 16),
|
||||
window.innerHeight - 200
|
||||
);
|
||||
setModalOffset(nextOffset);
|
||||
} else {
|
||||
setModalOffset(24);
|
||||
}
|
||||
} else {
|
||||
setModalOffset(24);
|
||||
}
|
||||
setSelectedPhotoIndex(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="travel">
|
||||
@@ -87,64 +340,182 @@ const Travel = () => {
|
||||
<p className="travel-kicker">Visual Diary</p>
|
||||
<h1>Travel Archive</h1>
|
||||
<p className="travel-sub">
|
||||
여행에서 본 색감과 분위기를 모아 전시하는 페이지입니다.
|
||||
여행에서 느낀 감성과 분위기를 모아 전시하는 페이지입니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="travel-note">
|
||||
<p className="travel-note__title">렌더링 포인트</p>
|
||||
<p className="travel-note__title">폴더별 큐레이션</p>
|
||||
<p className="travel-note__desc">
|
||||
사진마다 그리드 크기를 다르게 배치해 리듬을 만들었습니다.
|
||||
지역마다 그리드와 기록의 흐름을 다르게 배치해 리듬감을 만들었습니다.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="travel-albums">
|
||||
{loading ? <p className="travel-state">앨범을 불러오는 중...</p> : null}
|
||||
<section
|
||||
className={`travel-albums ${
|
||||
selectedPhotoIndex !== null ? 'is-blurred' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="travel-map">
|
||||
<div className="travel-map__info">
|
||||
<p className="travel-map__title">Select a region</p>
|
||||
<p className="travel-map__desc">
|
||||
{selectedRegion
|
||||
? `${selectedRegion.name} 사진을 불러옵니다.`
|
||||
: '지도에서 지역을 클릭하면 해당 사진만 로딩됩니다.'}
|
||||
</p>
|
||||
</div>
|
||||
<MapContainer
|
||||
center={[20, 0]}
|
||||
zoom={2}
|
||||
scrollWheelZoom
|
||||
className="travel-map__canvas"
|
||||
>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
|
||||
url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
|
||||
/>
|
||||
<RegionsLayer
|
||||
geojson={regionsGeojson}
|
||||
onSelectRegion={setSelectedRegion}
|
||||
/>
|
||||
</MapContainer>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<p className="travel-state">사진을 불러오는 중...</p>
|
||||
) : null}
|
||||
{error ? <p className="travel-error">{error}</p> : null}
|
||||
{!loading && !error && albums.length === 0 ? (
|
||||
<p className="travel-state">표시할 앨범이 없습니다.</p>
|
||||
{!loading && !error && selectedRegion && photos.length === 0 ? (
|
||||
<p className="travel-state">
|
||||
선택한 지역에 사진이 없습니다.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{albums.map((album) => (
|
||||
<div key={album.name} className="travel-album">
|
||||
<div className="travel-album__head">
|
||||
<div>
|
||||
<p className="travel-album__eyebrow">Album</p>
|
||||
<h2>{album.name}</h2>
|
||||
<p className="travel-album__meta">
|
||||
{album.count} photos
|
||||
{null}
|
||||
</section>
|
||||
{selectedPhotoIndex !== null ? (
|
||||
<div
|
||||
className="travel-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
onClick={() => setSelectedPhotoIndex(null)}
|
||||
style={{ '--modal-offset': `${modalOffset}px` }}
|
||||
>
|
||||
<div
|
||||
className="travel-modal__content"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
style={{ marginTop: `${modalOffset}px` }}
|
||||
>
|
||||
<div className="travel-modal__summary">
|
||||
<p className="travel-modal__summary-title">
|
||||
{selectedRegion?.name || 'Region'} ·{' '}
|
||||
{photoSummary?.total ?? photos.length} photos
|
||||
</p>
|
||||
{photoSummary?.albums?.length ? (
|
||||
<p className="travel-modal__summary-meta">
|
||||
{photoSummary.albums
|
||||
.map((album) => album.album)
|
||||
.join(', ')}
|
||||
</p>
|
||||
</div>
|
||||
{album.cover ? (
|
||||
<img
|
||||
className="travel-album__cover"
|
||||
src={album.cover}
|
||||
alt={`${album.name} cover`}
|
||||
loading="lazy"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="travel-grid">
|
||||
{album.photos.map((photo, index) => {
|
||||
const label = photo.title || getPhotoLabel(photo.src);
|
||||
return (
|
||||
<article
|
||||
key={`${album.name}-${photo.src}`}
|
||||
className={`travel-card ${
|
||||
index % 6 === 0 ? 'is-wide' : ''
|
||||
}`}
|
||||
>
|
||||
<img src={photo.src} alt={label} loading="lazy" />
|
||||
<div className="travel-card__overlay">
|
||||
<p className="travel-card__title">{label}</p>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
className="travel-modal__close"
|
||||
onClick={() => setSelectedPhotoIndex(null)}
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
<div className="travel-modal__nav">
|
||||
<button
|
||||
type="button"
|
||||
className="travel-modal__arrow"
|
||||
onClick={() =>
|
||||
setSelectedPhotoIndex((prev) =>
|
||||
prev === null
|
||||
? prev
|
||||
: (prev - 1 + photos.length) %
|
||||
photos.length
|
||||
)
|
||||
}
|
||||
aria-label="Previous"
|
||||
>
|
||||
{'<'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="travel-modal__arrow"
|
||||
onClick={() =>
|
||||
setSelectedPhotoIndex((prev) =>
|
||||
prev === null
|
||||
? prev
|
||||
: (prev + 1) % photos.length
|
||||
)
|
||||
}
|
||||
aria-label="Next"
|
||||
>
|
||||
{'>'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="travel-modal__strip" role="list">
|
||||
{photos
|
||||
.slice(stripStart, stripEnd)
|
||||
.map((photo, idx) => {
|
||||
const realIndex = stripStart + idx;
|
||||
return (
|
||||
<button
|
||||
key={`${photo.src}-${realIndex}`}
|
||||
type="button"
|
||||
className={`travel-modal__thumb ${
|
||||
realIndex === selectedPhotoIndex
|
||||
? 'is-active'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() =>
|
||||
setSelectedPhotoIndex(realIndex)
|
||||
}
|
||||
aria-label={getPhotoLabel(photo)}
|
||||
role="listitem"
|
||||
>
|
||||
<img
|
||||
src={photo.src}
|
||||
alt={getPhotoLabel(photo)}
|
||||
loading="lazy"
|
||||
onError={(event) => {
|
||||
const img = event.currentTarget;
|
||||
if (
|
||||
photo.original &&
|
||||
img.src !== photo.original
|
||||
) {
|
||||
img.src = photo.original;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<img
|
||||
src={
|
||||
photos[selectedPhotoIndex]?.original ||
|
||||
photos[selectedPhotoIndex]?.src
|
||||
}
|
||||
alt={getPhotoLabel(photos[selectedPhotoIndex])}
|
||||
/>
|
||||
{photos[selectedPhotoIndex]?.album ||
|
||||
photos[selectedPhotoIndex]?.file ? (
|
||||
<p className="travel-modal__meta">
|
||||
{photos[selectedPhotoIndex]?.album}{' '}
|
||||
{photos[selectedPhotoIndex]?.file
|
||||
? `- ${photos[selectedPhotoIndex]?.file}`
|
||||
: ''}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user