// screens-tabs.jsx — 지도 / 앨범 / 지갑 / 집 tabs. Persona-aware. // ── 지도 (부산 지도 · 가고 싶은 곳 · 맞춤 추천) ────────────────── function MapTab({ persona, openSheet }) { const [sel, setSel] = React.useState(null); const [wished, setWished] = React.useState({}); // pin positions on the stylized canvas (x%, y%) const POS = { p1: [22, 64], p2: [44, 40], p3: [68, 30], p4: [34, 78], p5: [80, 60], p6: [56, 70] }; const isHost = persona === 'host'; const selPin = JJ.pins.find(p => p.id === sel); return (
{/* stylized map canvas */}
{/* sea label + coastline */}
부산 앞바다
{JJ.pins.map((p) => { const [x, y] = POS[p.id] || [50, 50]; const on = sel === p.id; return ( ); })}
{/* selected pin detail */} {selPin && (
{selPin.name} {selPin.tag}
“{selPin.note}”
{isHost ? 핀 편집하기 : setWished(w => ({ ...w, [selPin.id]: !w[selPin.id] }))} tone={wished[selPin.id] ? 'sea' : 'coral'}> {wished[selPin.id] ? '가고 싶은 곳에 담겼어요' : '가고 싶은 곳에 담기'} }
)} {/* 가고 싶은 곳 (위시리스트) */}
{isHost ? '민서가 가고 싶은 곳' : '가고 싶은 곳'} {JJ.wishlist.length}곳 · 늘 우선
{JJ.wishlist.map(w => ( p.id === w.pinId) || {}).scene || 'sea'} h={42} r={10} style={{ width: 42, flexShrink: 0 }} />
{w.name}
{w.when}
{w.by === 'host' ? '쩨 추천' : '민서'} ))}
{/* 맞춤 추천 — 요청 시에만 (기능 08) */} {!isHost && (
가고 싶은 데가 없을 땐
“추천해줘” 하면 쩨 지도에서 골라줄게요
openSheet('recommend')}>추천
)} {isHost && ( 새 장소 핀 등록 )}
); } // ── 앨범 (공유 앨범) ───────────────────────────────────────── function AlbumTab({ persona, scr }) { if (scr === 'empty') { return (
아직 사진이 없어요
함께 다니며 첫 사진을 올려봐요. 찍은 곳은 지도에 핀으로 남아요.
첫 사진 올리기
); } return (
{JJ.album.map((a, i) => (
{a.pin}
))}
찍은 곳이 부산 지도에 핀으로 남아요.
 사진 올리기
); } // ── 지갑 (공동지갑) ────────────────────────────────────────── function WalletTab({ persona, tripState, scr }) { const w = JJ.wallet; const settling = scr === 'settled'; const empty = scr === 'empty'; const balance = empty ? 0 : w.balance; const tx = empty ? [] : w.tx; return (
{/* balance */}
{settling ? '정산 후 남은 잔액' : '이번 트립 공동지갑 잔액'}
{balance.toLocaleString()}원
{w.members.map(m => (
{m.name} 충전
{empty ? '0' : m.put.toLocaleString()}원
))}
충전 지출 기록
{empty ? (
아직 모으기 전이에요
다 같이 조금씩 넣으면, 공동비용이 여기서 빠져요.
 ) : ( {/* tx list */}
내역 · 모두에게 동일하게 보여요
{tx.map((t, i) => (
0 ? 'color-mix(in srgb, var(--sea) 12%, var(--card))' : 'var(--accent-soft)' }}> 0 ? 'plus' : 'wallet'} size={15} color={t.amt > 0 ? 'var(--sea)' : 'var(--coral)'} />
{t.text}
{t.who === 'host' ? '지혜' : '민서'} · {t.t}
0 ? 'var(--sea)' : 'var(--ink)' }}>{t.amt > 0 ? '+' : ''}{t.amt.toLocaleString()}
))} )} {settling && (
떠나는 날, 한 번에 정산
남은 {w.balance.toLocaleString()}원을 공평하게 나눠 돌려줘요.
정산하고 마무리 )}
); } // ── 집 (Home — 집에 귀속된 것들) ────────────────────────────── function HomeTab({ persona, sub, setSub, scr, openSheet }) { const isHost = persona === 'host'; // detail views if (sub === 'kit') return ; if (sub === 'guide') return ; if (sub === 'prefs') return ; if (sub === 'guestbook') return ; if (sub === 'journeys') return ; // menu return (
{JJ.host.name}의 집 · {JJ.home.place}
거쳐간 손님 {JJ.home.visitsCount}명 · 방명록 {JJ.guestbook.length}줄
setSub('kit')} /> setSub('guide')} /> setSub('prefs')} /> setSub('guestbook')} /> setSub('journeys')} />
쩨를 위해, 사랑으로.
); } function SubHeader({ kicker, title, sub, color }) { return ; } function KitView() { return (
{JJ.kit.map(k => (
{k.title}
{k.v}
{k.hint}
 ))}
); } function GuideView() { const g = JJ.guide; return (
{g.address}
{g.how}
{g.weather.t} · {g.weather.d}
{g.weather.tip}
); } function PrefsEmpty({ isHost }) { return (
{isHost ? '선호 입력 전' : '아직 안 남긴 상태'}
{isHost ? '초대 링크에서 민서가 선호를 남기면 자동으로 채워져요.' : '알레르기·취향을 한번 남겨볼까요?'}
{!isHost && 선호 처음 남기기}
); } function PrefsView({ isHost, scr }) { if (scr === 'empty') return ; return (
{JJ.prefs.map((p, i) => (
{p.k}
{p.v}
{p.warn && 주의} ))}
{!isHost && 선호 추가하기}
); } function GuestbookView({ isHost, scr }) { const after = scr !== 'before'; const list = JJ.guestbook.map(g => g.pending ? { ...g, pending: !after, text: after ? '막걸리도 흰여울 아침도 다 좋았어요. 여기 오면 부산이 우리집 같아져요. 또 올게요!' : g.text } : g); return (
{list.map(g => (
{g.name} {g.date}
{g.text} ))}
{isHost ? '손님에게 방명록 권하기' : '나도 한 줄 남기기'}
); } Object.assign(window, { MapTab, AlbumTab, WalletTab, HomeTab });