// Map screen — 390×844 iPhone artboard. Light only. Three map style toggle. const { useState: useStateMS } = React; const TM = window.DAIL_TOKENS; const cm = TM.colors, fsm = TM.fontSizes, fwm = TM.fontWeights, spm = TM.spacing, rm = TM.radius; const baseTextM = { fontFamily: TM.fonts.primary, color: cm.textPrimary, lineHeight: 1.4 }; // Reaction icon — drawn as a tiny SVG so we don't ship emoji as the brand mark. function RxIcon({ kind, size = 14, color = cm.textSecondary }) { if (kind === 'fire') return ( ); if (kind === 'love') return ( ); if (kind === 'tasty') return ( ); return null; } // 24x24 pin from the source — clip thumbnail in a circle, white border, tail. function Pin({ active, photo }) { const ringColor = active ? '#1A1A1A' : '#FFFFFF'; const size = active ? 36 : 28; return (
); } // Cluster pin — multiple pins peek out from under the top one, slight rotations. function ClusterPin({ clips, active, onTap }) { const [top, ...rest] = clips; return (
{/* peek layers — rendered behind the top pin, slight rotation + offset */} {rest.slice(0, 3).map((c, i) => { const rot = [-7, 6, -10][i] || 0; const dx = [-7, 6, -3][i] || 0; const dy = [-2, 2, 5][i] || 0; return (
); })} {/* top pin — always upright, fully visible */}
{/* count badge */} {clips.length >= 3 ? (
{clips.length}
) : null}
); } function MapStyleToggle({ value, onChange }) { const opts = [ { k:'naver', label:'Naver' }, { k:'apple', label:'Apple' }, { k:'google', label:'Google' }, ]; return (
{opts.map(o => { const active = value === o.k; return ( ); })}
); } function SearchBar() { return (
여기서 검색
); } function ProfileButton({ initials = '박' }) { return (
{initials}
); } function FAB({ hidden = false }) { return ( ); } // Bottom sheet — pin-tap reveals this. 16:9 photo, title, meta, 3 reactions. function BottomSheet({ clip, onClose }) { const author = window.DAIL_FRIENDS[clip.author]; const group = window.DAIL_GROUPS[clip.group]; const rxKinds = [ { k:'fire', c: clip.reactions.fire }, { k:'love', c: clip.reactions.love }, { k:'tasty', c: clip.reactions.tasty }, ]; return (
{/* grabber — tappable to close */} {/* place name + chevron */}
{clip.place}
{clip.area}
›
{/* 16:9 video — caption baked into video (preview style) */}
{/* Caption — baked into video, center-bottom */}
{clip.title}
{/* mute badge — sits in corner, the spec says 음소거 기본 */}
음소거
{/* duration badge */}
0:05
{/* meta row: avatar · name · group tag · time */}
{author.initials}
{author.name} 👥 {group.name} {clip.when}
{/* reactions row */}
{rxKinds.map(rx => ( ))}
); } window.DAIL_MapScreen = function MapScreen({ initialStyle = 'naver', zoomed = false } = {}) { const [mapStyle, setMapStyle] = useStateMS(initialStyle); const [activeId, setActiveId] = useStateMS(window.DAIL_ACTIVE); const MapBg = window.DAIL_MAPS[mapStyle]; const clip = activeId ? window.DAIL_CLIPS.find(c => c.id === activeId) : null; // Group clips by clusterId. Clips with no clusterId stand alone. const clusters = {}; const standalone = []; window.DAIL_CLIPS.forEach(c => { if (c.clusterId) { (clusters[c.clusterId] ||= []).push(c); } else { standalone.push(c); } }); // Zoomed = cluster spreads out (each clip gets its own offset position). const spreadOffsets = [{dx:0,dy:0},{dx:-14,dy:8},{dx:13,dy:10}]; return (
))} {/* clusters */} {Object.entries(clusters).map(([cid, clips]) => { if (zoomed) { // spread out — each clip gets its own pin nearby return clips.map((c, i) => { const o = spreadOffsets[i] || {dx:0,dy:0}; return ( ); }); } const top = clips[0]; const isActive = clips.some(c => c.id === activeId); return (
{ e?.stopPropagation?.(); setActiveId(top.id === activeId ? null : top.id); }} />
); })}
© Stadia · © OpenStreetMap · © Mapbox
); };