// CHAT (group rooms only) + PROFILE (my clips / friend's clips in same group). const { useState: useC } = React; const TC = window.DAIL_TOKENS; const cc = TC.colors, fsc = TC.fontSizes, fwc = TC.fontWeights, rsc = TC.radius; const FRIENDS = window.DAIL_FRIENDS; const GROUPS = window.DAIL_GROUPS; const CLIPS = window.DAIL_CLIPS; const baseTextC = { fontFamily: TC.fonts.primary, color: cc.textPrimary, lineHeight: 1.4 }; // Tiny avatar shared across these screens. function Avatar({ initials = '?', size = 36, tone = 0 }) { // Tone gives variety without inventing palette const tones = [ { bg:'rgba(61,90,128,0.12)', fg:cc.accent }, { bg:'rgba(74,124,89,0.14)', fg:cc.success }, { bg:'rgba(184,92,92,0.14)', fg:cc.error }, { bg:'rgba(0,0,0,0.06)', fg:cc.textPrimary }, ]; const t = tones[tone % tones.length]; return (
{initials}
); } // Bottom tab bar — 지도 / 채팅. Used on Chat list and Profile screens. function TabBar({ active = 'chat' }) { const items = [ { k:'map', label:'지도', icon: (a) => }, { k:'chat', label:'채팅', icon: (a) => }, ]; return (
{items.map(it => { const a = active === it.k; return ( ); })}
); } // ───────── CHAT — list of group rooms (groups = rooms, auto-created) ───────── window.DAIL_ChatListScreen = function ChatListScreen() { // Build per-group last-message + unread (synthesized from clips for demo). const rooms = Object.entries(GROUPS).map(([k, g]) => { const groupClips = CLIPS.filter(c => c.group === k); const last = groupClips[0]; const author = last ? FRIENDS[last.author] : null; return { key: k, name: g.name, members: g.members, lastAuthor: author?.name || null, lastText: last ? `${last.place} · ${last.title}` : '대화를 시작해보세요', lastTime: last ? last.when : '', unread: k === 'seongsu' ? 3 : (k === 'jachi' ? 1 : 0), hasVideo: Boolean(last), }; }); return (
{/* Top bar */}
채팅
{/* Rooms */}
{rooms.map((r, i) => ( ))}
{/* tabbar spacer (overlay) */}
); }; // ───────── CHAT ROOM — single group room (Kakao-ish) ───────── window.DAIL_ChatRoomScreen = function ChatRoomScreen({ groupKey = 'seongsu' } = {}) { const g = GROUPS[groupKey]; const groupClips = CLIPS.filter(c => c.group === groupKey).slice(0, 2); // Scripted demo timeline. const messages = [ { kind:'date', text:'오늘' }, { kind:'msg', who:'minji', text:'성수 가는 사람?', t:'14:02' }, { kind:'msg', who:'haru', text:'나 갈건데 dail.coffee ㄱ?', t:'14:03' }, { kind:'msg', who:'minji', text:'ㅇㅋㅇㅋ', t:'14:03' }, groupClips[0] ? { kind:'video', clip: groupClips[0], t:'14:48' } : null, { kind:'msg', who:'jiwoo', text:'미쳤다 진짜', t:'14:50' }, { kind:'msg', who:'me', text:'나도 갈래!!', t:'14:51' }, groupClips[1] ? { kind:'video', clip: groupClips[1], t:'15:30' } : null, ].filter(Boolean); return (
{/* Header */}
{g.name}
{g.members}명
{/* Messages */}
{messages.map((m, i) => { if (m.kind === 'date') { return (
{m.text}
); } const isMe = m.who === 'me'; const author = !isMe && m.who ? FRIENDS[m.who] : null; if (m.kind === 'video') { const author2 = FRIENDS[m.clip.author]; const meVid = m.clip.author === 'me'; // none currently return (
{!meVid ? : null}
{!meVid ? (
{author2?.name}
) : null}
{m.clip.title}
📍 {m.clip.place}
0:05
{m.t}
); } // text message return (
{!isMe ? : null}
{!isMe ? (
{author?.name}
) : null}
{m.text}
{m.t}
); })}
{/* Composer */}
메시지 입력
); }; // ───────── PROFILE — my clips, or friend's clips inside one group ───────── // scope='me' or scope='friend'. friend mode requires friendKey + visibleGroupKey. window.DAIL_ProfileScreen = function ProfileScreen({ scope = 'me', friendKey = 'minji', visibleGroupKey = 'seongsu', } = {}) { const isMe = scope === 'me'; const friend = !isMe ? FRIENDS[friendKey] : null; const group = GROUPS[visibleGroupKey]; // Demo: synthesize "my" clips — re-tag a couple of existing clips as the current user's posts. const mineSeed = ['c2', 'c5', 'c8']; const myClips = CLIPS.filter(c => mineSeed.includes(c.id)); const list = isMe ? myClips : CLIPS.filter(c => c.author === friendKey && c.group === visibleGroupKey); const name = isMe ? '나' : friend?.name; const initials = isMe ? '나' : friend?.initials; return (
{/* Header */}
{isMe ? '내 영상' : `${name}의 영상`} {!isMe ? : null} {isMe ? ( ) : }
{/* Profile block */}
{name}
{isMe ? `올린 영상 ${list.length}개 · 그룹 ${Object.keys(GROUPS).length}개` : `${group?.name}에 올린 영상 ${list.length}개`}
{/* Friend mode notice removed — 그룹 권한은 이미 프로필 타이틀에서 명시됨 */} {/* List */}
{list.length === 0 ? (
📭
{isMe ? '아직 올린 영상이 없어요' : `${name}이(가) ${group?.name}에 올린 영상이 없어요`}
{isMe ? '지도에서 + 버튼을 눌러 첫 영상을 올려보세요' : '다른 그룹의 영상은 볼 수 없어요'}
) : (
{list.map(c => ( ))}
)}
); };