feat(travel): 지도 핀 마커 + 위치 지정 모달 (Phase 2)

MiniMap에 Point geometry 핀 마커 렌더링, 앨범 지역 변경 후 "위치 지정" 버튼으로 RegionPinPicker 모달을 열어 좌표 저장. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-27 07:12:17 +09:00
parent 9b8daeffa4
commit fba101500e
5 changed files with 479 additions and 21 deletions
--- a/src/pages/travel/AlbumDetail.css
+++ b/src/pages/travel/AlbumDetail.css
@@ -106,6 +106,12 @@
  opacity: 0.6;
 }

+.album-detail__region-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 .album-detail__region-ok {
  color: #c8905e;
 }
@@ -113,6 +119,28 @@
  color: #dc5050;
 }

+.album-detail__pin-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  border: 1px solid var(--tv-line-bright, rgba(232, 221, 208, 0.22));
+  background: transparent;
+  color: var(--tv-muted, rgba(232, 221, 208, 0.45));
+  font-family: var(--tv-mono, 'SF Mono', 'Fira Code', monospace);
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s, background 0.2s;
+  white-space: nowrap;
+}
+.album-detail__pin-btn:hover {
+  border-color: #c8905e;
+  color: #c8905e;
+  background: rgba(200, 144, 94, 0.08);
+}
+
 /* ── Region editor ── */
 .album-detail__region-editor {
  position: relative;
--- a/src/pages/travel/AlbumDetail.jsx
+++ b/src/pages/travel/AlbumDetail.jsx
@@ -4,6 +4,7 @@ import PullToRefresh from '../../components/PullToRefresh';
 import MasonryGrid from './MasonryGrid';
 import HeroLightbox from './HeroLightbox';
 import VideoTab from './VideoTab';
+import RegionPinPicker from './RegionPinPicker';
 import { getRegionAccent } from './MiniMap';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import './AlbumDetail.css';
@@ -45,6 +46,8 @@ export default function AlbumDetail({
  const [regionInput, setRegionInput] = useState('');
  const [regionSaving, setRegionSaving] = useState(false);
  const [regionMsg, setRegionMsg] = useState(null); // { type: 'ok'|'err', text }
+  const [pinPickerOpen, setPinPickerOpen] = useState(false);
+  const [savedRegionId, setSavedRegionId] = useState(null); // region id after save
  const regionInputRef = useRef(null);
  const regionMsgTimer = useRef(null);

@@ -92,6 +95,9 @@ export default function AlbumDetail({
        },
      );
      if (!res.ok) throw new Error(`${res.status}`);
+      const data = await res.json();
+      const newRegionId = data.new_region || name;
+      setSavedRegionId(newRegionId);
      setRegionMsg({ type: 'ok', text: `→ ${name}` });
      setEditingRegion(false);
      onCoverChange?.(); // refresh album list
@@ -113,6 +119,14 @@ export default function AlbumDetail({
    }
  }, [handleRegionSave, handleRegionEditCancel]);

+  const handleOpenPinPicker = useCallback(() => {
+    setPinPickerOpen(true);
+  }, []);
+
+  const handlePinSave = useCallback(() => {
+    onCoverChange?.(); // refresh regions + albums on map
+  }, [onCoverChange]);
+
  // Enter → open
  useEffect(() => {
    if (prefersReduced()) {
@@ -295,6 +309,7 @@ export default function AlbumDetail({
                </button>
              </div>
            ) : (
+              <span className="album-detail__region-row">
                <button
                  className="album-detail__region album-detail__region--editable"
                  onClick={handleRegionEditStart}
@@ -308,6 +323,19 @@ export default function AlbumDetail({
                    <path d="M7.5 1.5l1 1-5.5 5.5H2V7z" stroke="currentColor" strokeWidth="0.8" strokeLinejoin="round"/>
                  </svg>
                </button>
+                {regionMsg?.type === 'ok' && savedRegionId && (
+                  <button
+                    className="album-detail__pin-btn"
+                    onClick={handleOpenPinPicker}
+                    title="지도에 위치 지정"
+                  >
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                      <path d="M6 1C4.07 1 2.5 2.57 2.5 4.5 2.5 7.25 6 11 6 11s3.5-3.75 3.5-6.5C9.5 2.57 7.93 1 6 1zm0 4.75a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5z" fill="currentColor"/>
+                    </svg>
+                    위치 지정
+                  </button>
+                )}
+              </span>
            )}
          </div>

@@ -320,6 +348,18 @@ export default function AlbumDetail({
        <SwipeableView tabs={tabs} />
      </div>

+      {/* Pin Picker */}
+      {pinPickerOpen && savedRegionId && (
+        <RegionPinPicker
+          regionId={savedRegionId}
+          regionName={savedRegionId}
+          initialCoords={null}
+          accent={regionAccent}
+          onSave={handlePinSave}
+          onClose={() => setPinPickerOpen(false)}
+        />
+      )}
+
      {/* Lightbox */}
      {selectedPhotoIndex != null && photos?.length > 0 && (
        <HeroLightbox
--- a/src/pages/travel/MiniMap.jsx
+++ b/src/pages/travel/MiniMap.jsx
@@ -1,5 +1,5 @@
-import React, { useState, useCallback } from 'react';
-import { MapContainer, TileLayer, GeoJSON, useMap } from 'react-leaflet';
+import React, { useState, useCallback, useMemo } from 'react';
+import { MapContainer, TileLayer, GeoJSON, CircleMarker, Tooltip, useMap } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import { useIsMobile } from '../../hooks/useIsMobile';
 import './MiniMap.css';
@@ -43,6 +43,25 @@ export function getRegionAccent(regionId = '') {
 function MapLayer({ geojson, selectedRegionId, onSelectRegion }) {
  const map = useMap();

+  /* Split features: polygons (for GeoJSON) vs points (for CircleMarker) */
+  const { polygonGeoJson, pointFeatures } = useMemo(() => {
+    if (!geojson?.features) return { polygonGeoJson: geojson, pointFeatures: [] };
+    const polys = [];
+    const points = [];
+    for (const f of geojson.features) {
+      if (f.geometry?.type === 'Point') {
+        points.push(f);
+      } else if (f.geometry) {
+        polys.push(f);
+      }
+      // null geometry → skip (no location yet)
+    }
+    return {
+      polygonGeoJson: { ...geojson, features: polys },
+      pointFeatures: points,
+    };
+  }, [geojson]);
+
  const style = useCallback(
    (feature) => {
      const rid = feature.properties?.id || feature.properties?.name || '';
@@ -84,15 +103,54 @@ function MapLayer({ geojson, selectedRegionId, onSelectRegion }) {
    [map, onSelectRegion],
  );

+  const handlePinClick = useCallback(
+    (feature) => {
+      const rid = feature.properties?.id || feature.properties?.name || '';
+      onSelectRegion(rid);
+      const [lng, lat] = feature.geometry.coordinates;
+      map.setView([lat, lng], 5, { animate: true });
+    },
+    [map, onSelectRegion],
+  );
+
  if (!geojson) return null;

  return (
+    <>
+      {polygonGeoJson.features.length > 0 && (
        <GeoJSON
          key={selectedRegionId || '__all__'}
-      data={geojson}
+          data={polygonGeoJson}
          style={style}
          onEachFeature={onEachFeature}
        />
+      )}
+
+      {pointFeatures.map((feature) => {
+        const rid = feature.properties?.id || feature.properties?.name || '';
+        const name = feature.properties?.name || rid;
+        const [lng, lat] = feature.geometry.coordinates;
+        const isSelected =
+          selectedRegionId && rid.toLowerCase() === selectedRegionId.toLowerCase();
+        const accent = getRegionAccent(rid);
+        return (
+          <CircleMarker
+            key={`pin-${rid}`}
+            center={[lat, lng]}
+            radius={isSelected ? 8 : 5}
+            pathOptions={{
+              fillColor: accent,
+              fillOpacity: isSelected ? 0.9 : 0.7,
+              color: isSelected ? '#fff' : accent,
+              weight: isSelected ? 2 : 1,
+            }}
+            eventHandlers={{ click: () => handlePinClick(feature) }}
+          >
+            <Tooltip className="minimap-tooltip">{name}</Tooltip>
+          </CircleMarker>
+        );
+      })}
+    </>
  );
 }

--- a/src/pages/travel/RegionPinPicker.css
+++ b/src/pages/travel/RegionPinPicker.css
@@ -0,0 +1,180 @@
+/* ── RegionPinPicker — modal overlay ── */
+
+.pin-picker {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.7);
+  animation: pinPickerFadeIn 0.2s ease;
+}
+
+@keyframes pinPickerFadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.pin-picker__panel {
+  width: 90vw;
+  max-width: 560px;
+  background: var(--tv-surface, #1a1510);
+  border: 1px solid var(--tv-line-bright, rgba(232, 221, 208, 0.22));
+  border-radius: 16px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+}
+
+/* Header */
+.pin-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pin-picker__title {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.pin-picker__label {
+  font-family: var(--tv-mono, 'Space Mono', monospace);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--tv-muted, rgba(232, 221, 208, 0.45));
+}
+
+.pin-picker__region {
+  font-family: var(--tv-serif, 'Cormorant Garamond', Georgia, serif);
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.pin-picker__close {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--tv-muted, rgba(232, 221, 208, 0.45));
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+}
+.pin-picker__close:hover {
+  background: rgba(255, 255, 255, 0.16);
+}
+
+/* Hint */
+.pin-picker__hint {
+  font-family: var(--tv-mono, 'Space Mono', monospace);
+  font-size: 11px;
+  color: var(--tv-dim, rgba(232, 221, 208, 0.25));
+  letter-spacing: 0.06em;
+  margin: 0;
+}
+
+/* Map */
+.pin-picker__map-wrap {
+  height: 320px;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--tv-line, rgba(232, 221, 208, 0.1));
+}
+
+.pin-picker__map {
+  background: var(--tv-bg, #0f0c09);
+}
+
+.pin-picker__map .leaflet-tile-pane {
+  filter: brightness(0.7) saturate(0.4);
+}
+
+/* Coords */
+.pin-picker__coords {
+  font-family: var(--tv-mono, 'Space Mono', monospace);
+  font-size: 11px;
+  color: var(--tv-muted, rgba(232, 221, 208, 0.45));
+  letter-spacing: 0.04em;
+  margin: 0;
+  text-align: center;
+}
+
+/* Error */
+.pin-picker__error {
+  font-family: var(--tv-mono, 'Space Mono', monospace);
+  font-size: 11px;
+  color: #dc5050;
+  margin: 0;
+  text-align: center;
+}
+
+/* Actions */
+.pin-picker__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.pin-picker__cancel,
+.pin-picker__save {
+  padding: 8px 18px;
+  border-radius: 8px;
+  font-family: var(--tv-mono, 'Space Mono', monospace);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.pin-picker__cancel {
+  background: none;
+  border: 1px solid var(--tv-line-bright, rgba(232, 221, 208, 0.22));
+  color: var(--tv-muted, rgba(232, 221, 208, 0.45));
+}
+.pin-picker__cancel:hover {
+  border-color: var(--tv-text, #e8ddd0);
+  color: var(--tv-text, #e8ddd0);
+}
+
+.pin-picker__save {
+  background: var(--accent, #c8905e);
+  border: none;
+  color: #0f0c09;
+  font-weight: 600;
+}
+.pin-picker__save:hover:not(:disabled) {
+  opacity: 0.85;
+}
+.pin-picker__save:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  .pin-picker__panel {
+    width: 95vw;
+    padding: 16px;
+  }
+
+  .pin-picker__map-wrap {
+    height: 260px;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .pin-picker {
+    animation: none;
+  }
+}
--- a/src/pages/travel/RegionPinPicker.jsx
+++ b/src/pages/travel/RegionPinPicker.jsx
@@ -0,0 +1,152 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { MapContainer, TileLayer, CircleMarker, useMapEvents } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import './RegionPinPicker.css';
+
+/* ─────────────────────────────────────────────
+   ClickHandler — captures map clicks
+───────────────────────────────────────────── */
+function ClickHandler({ onClickLatLng }) {
+  useMapEvents({
+    click(e) {
+      onClickLatLng([e.latlng.lng, e.latlng.lat]); // [lng, lat]
+    },
+  });
+  return null;
+}
+
+/* ─────────────────────────────────────────────
+   RegionPinPicker — modal for picking a
+   location on the map
+───────────────────────────────────────────── */
+export default function RegionPinPicker({
+  regionId,
+  regionName,
+  initialCoords,   // [lng, lat] or null
+  accent,
+  onSave,          // (coords: [lng, lat]) => void
+  onClose,
+}) {
+  const [coords, setCoords] = useState(initialCoords || null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const backdropRef = useRef(null);
+
+  /* ESC to close */
+  useEffect(() => {
+    const handler = (e) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  const handleMapClick = useCallback((lngLat) => {
+    setCoords(lngLat);
+    setError('');
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!coords) return;
+    setSaving(true);
+    setError('');
+    try {
+      const res = await fetch(`/api/travel/regions/${encodeURIComponent(regionId)}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ coordinates: coords }),
+      });
+      if (!res.ok) throw new Error(`${res.status}`);
+      onSave?.(coords);
+      onClose();
+    } catch (e) {
+      setError(`저장 실패: ${e.message}`);
+    } finally {
+      setSaving(false);
+    }
+  }, [coords, regionId, onSave, onClose]);
+
+  const handleBackdrop = useCallback(
+    (e) => { if (e.target === backdropRef.current) onClose(); },
+    [onClose],
+  );
+
+  const center = coords
+    ? [coords[1], coords[0]]
+    : initialCoords
+      ? [initialCoords[1], initialCoords[0]]
+      : [30, 125];
+  const zoom = coords || initialCoords ? 4 : 2;
+
+  return (
+    <div className="pin-picker" ref={backdropRef} onClick={handleBackdrop}>
+      <div className="pin-picker__panel">
+        {/* Header */}
+        <div className="pin-picker__header">
+          <div className="pin-picker__title">
+            <span className="pin-picker__label">위치 지정</span>
+            <span className="pin-picker__region" style={{ color: accent }}>
+              {regionName || regionId}
+            </span>
+          </div>
+          <button className="pin-picker__close" onClick={onClose}>✕</button>
+        </div>
+
+        {/* Instruction */}
+        <p className="pin-picker__hint">지도를 클릭하여 핀을 놓으세요</p>
+
+        {/* Map */}
+        <div className="pin-picker__map-wrap">
+          <MapContainer
+            center={center}
+            zoom={zoom}
+            minZoom={2}
+            maxZoom={12}
+            zoomControl={true}
+            attributionControl={false}
+            className="pin-picker__map"
+            style={{ width: '100%', height: '100%' }}
+          >
+            <TileLayer
+              url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+              attribution=""
+            />
+            <ClickHandler onClickLatLng={handleMapClick} />
+            {coords && (
+              <CircleMarker
+                center={[coords[1], coords[0]]}
+                radius={8}
+                pathOptions={{
+                  fillColor: accent || '#c8905e',
+                  fillOpacity: 0.9,
+                  color: '#fff',
+                  weight: 2,
+                }}
+              />
+            )}
+          </MapContainer>
+        </div>
+
+        {/* Coords display */}
+        {coords && (
+          <p className="pin-picker__coords">
+            {coords[1].toFixed(4)}, {coords[0].toFixed(4)}
+          </p>
+        )}
+
+        {error && <p className="pin-picker__error">{error}</p>}
+
+        {/* Actions */}
+        <div className="pin-picker__actions">
+          <button className="pin-picker__cancel" onClick={onClose}>취소</button>
+          <button
+            className="pin-picker__save"
+            onClick={handleSave}
+            disabled={!coords || saving}
+            style={{ '--accent': accent || '#c8905e' }}
+          >
+            {saving ? '저장 중…' : '핀 저장'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}