feat(travel): MiniMap 컴포넌트 — 접기/펼치기 + 전체보기

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-24 01:19:33 +09:00
parent 1072a5eb21
commit 201601dc95
2 changed files with 272 additions and 0 deletions
--- a/src/pages/travel/MiniMap.css
+++ b/src/pages/travel/MiniMap.css
@@ -0,0 +1,106 @@
+/* ── MiniMap ── */
+
+.minimap-wrapper {
+  width: 100%;
+}
+
+/* toolbar */
+.minimap-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.minimap-toggle-btn,
+.minimap-clear-btn {
+  background: var(--tv-surface);
+  color: var(--tv-muted);
+  border: 1px solid var(--tv-line-bright);
+  border-radius: var(--tv-r-sm);
+  padding: 5px 14px;
+  font: 11px var(--tv-mono);
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  transition: color 0.2s, border-color 0.2s;
+}
+
+.minimap-toggle-btn:hover,
+.minimap-clear-btn:hover {
+  color: var(--tv-text);
+  border-color: var(--tv-accent);
+}
+
+/* container */
+.minimap-container {
+  position: relative;
+  height: var(--minimap-h, 200px);
+  border-radius: var(--tv-r-lg);
+  border: 1px solid var(--tv-line-bright);
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  transition: height 0.35s ease, opacity 0.35s ease;
+  opacity: 1;
+}
+
+.minimap-collapsed {
+  height: 0 !important;
+  opacity: 0;
+  pointer-events: none;
+  border: none;
+  box-shadow: none;
+}
+
+/* leaflet overrides */
+.minimap-leaflet {
+  background: var(--tv-bg);
+}
+
+.minimap-leaflet .leaflet-tile-pane {
+  filter: brightness(0.7) saturate(0.4);
+}
+
+/* hint overlay */
+.minimap-hint {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 800;
+  font: 10px var(--tv-mono);
+  letter-spacing: 0.18em;
+  color: var(--tv-dim);
+  background: rgba(15, 12, 9, 0.65);
+  padding: 4px 14px;
+  border-radius: var(--tv-r-sm);
+  pointer-events: none;
+}
+
+/* tooltip */
+.minimap-tooltip {
+  background: var(--tv-surface) !important;
+  color: var(--tv-text) !important;
+  border: 1px solid var(--tv-line-bright) !important;
+  border-radius: var(--tv-r-sm) !important;
+  font: 11px var(--tv-mono) !important;
+  padding: 3px 10px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
+}
+
+.minimap-tooltip::before {
+  border-top-color: var(--tv-surface) !important;
+}
+
+/* mobile */
+@media (max-width: 768px) {
+  .minimap-container {
+    height: 150px;
+  }
+}
+
+/* reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .minimap-container {
+    transition: none;
+  }
+}