{/* Edge gutters — full-bleed black columns on left + right so controls read on any scene */}

{/* LEFT column — close · flash · flip (vertical stack, top → bottom) */}

{/* RIGHT column — flash (top, where 사진첩 used to be) · shutter · flip (bottom, where 사진/동영상 used to be) */}

{/* Flash — moved into the top slot of the right column */} {/* Shutter — standard camera form. Progress ring traces the white border as 5초 elapses. */} {/* Flip — moved into the bottom slot of the right column */}

{/* Bottom-center timer label (recording duration) — small, unobtrusive */}

0:00 / 0:05

); }; // ───────── PREVIEW — landscape video on top, 그룹 선택 패널 상시 하단 ───────── // - 위: 16:9 가로 영상 — 탭하면 영상 안에 바로 글자 입력 (실시간) // - 좌상단: 장소 pill (핀 아이콘), 우상단: 음소거 토글 // - 아래: 공유할 그룹 체크리스트 + 등록 버튼 window.DAIL_PreviewScreen = function PreviewScreen() { const [groups, setGroups] = useS(['seongsu']); const [caption, setCaption] = useS('여기 미쳤어'); const [muted, setMuted] = useS(false); const [editing, setEditing] = useS(false); const inputRef = React.useRef(null); const toggle = (k) => setGroups(g => g.includes(k) ? g.filter(x => x !== k) : [...g, k]); const startEditing = () => { setEditing(true); setTimeout(() => inputRef.current?.focus(), 0); }; return (

{/* TOP NAV */}

새 영상

{/* VIDEO PREVIEW — tap anywhere to start editing caption */}

{/* 장소 pill — top left */}

dail.coffee 성수

{/* Mute toggle — top right */} {/* Caption — baked into video, center-bottom-ish. While editing, becomes editable inline. */}

{editing ? ( setCaption(e.target.value)} onBlur={() => setEditing(false)} onKeyDown={(e) => { if (e.key === 'Enter') { e.currentTarget.blur(); } }} onClick={(e) => e.stopPropagation()} placeholder="한 줄 적기" style={{ ...baseTextS, color:'#FFF', fontSize:22, fontWeight:fws.bold, textShadow:'0 2px 8px rgba(0,0,0,0.65)', letterSpacing:'-0.01em', background:'transparent', border:'none', outline:'none', textAlign:'center', width:'100%', caretColor:'#FFF', }} /> ) : caption.trim() ? ( {caption} ) : ( 탭해서 한 줄 적기 )}

{/* Duration tag */}

0:05

{/* GROUP PICKER — always visible */}

공유할 그룹 {groups.length}개 선택

{Object.entries(window.DAIL_GROUPS).map(([k, g], i, arr) => { const checked = groups.includes(k); return ( ); })}

{/* SUBMIT BAR */}

); }; // ───────── PLACE DETAIL — bottom sheet, Google Maps style ───────── window.DAIL_PlaceScreen = function PlaceScreen() { // Map background visible above the sheet, sheet at ~70% height. const Apple = window.DAIL_MAPS.apple; const videos = [ {p:'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=640&q=70', n:'민지', t:'여기 미쳤어'}, {p:'https://images.unsplash.com/photo-1442512595331-e89e73853f31?w=640&q=70', n:'하루', t:'아메리카노 진하다'}, {p:'https://images.unsplash.com/photo-1559925393-8be0ec4767c8?w=640&q=70', n:'지우', t:'비 오는 날 더 좋음'}, ]; const [idx, setIdx] = useS(0); const scrollerRef = React.useRef(null); const onScroll = (e) => { const w = e.currentTarget.clientWidth; if (!w) return; const next = Math.round(e.currentTarget.scrollLeft / w); if (next !== idx) setIdx(next); }; return (

{/* Top back button */} {/* Bottom sheet — taller than map screen sheet (place detail is denser) */}

{/* Place header */}

dail.coffee 성수

카페 · 성수동2가 277-9 · 250m

{/* Friend videos — 가로 16:9 풀폭 swipe deck (map screen 영상 형식 그대로) */}

친구들의 영상 {idx+1} / {videos.length}

{videos.map((v, i) => (

{/* 16:9 video — caption baked in (preview style) */}

{/* Caption — baked into video, center-bottom */}

{v.t}

{/* Author chip — top left */}

{v.n}

{/* mute badge */}

음소거

{/* duration badge */}

0:05

))}

{/* Dots indicator */}

{videos.map((_, i) => ( ))}

{/* Info rows */}

{[ ['주소', '서울 성동구 성수동2가 277-9'], ['영업', '오늘 08:00 – 22:00'], ['전화', '02-2235-2027'], ['웹사이트', 'bluebottlecoffee.com'], ].map(([k,v], i, arr) => (

{k}

{v}

›

))}

); };