// screens-trip.jsx — 트립 탭 = 세로 여정 타임라인. 현재 단계만 펼침(active),
// 지난 단계 done(접힘/✓), 다음 단계 locked(흐릿). 각 단계는 '화면 상태(scr)'에
// 따라 before/after 변형을 보여준다 (디렉터의 '화면 상태' 카테고리에서 선택).
const PLAN_PLACES = [
...JJ.pins,
{ id: 'x1', name: '광안리 밤바다', scene: 'night', tag: '야경' },
{ id: 'x2', name: '동백섬 산책로', scene: 'sea', tag: '산책' },
{ id: 'x3', name: '전포 카페거리', scene: 'cafe', tag: '커피' },
];
const planPlace = (id) => PLAN_PLACES.find(p => p.id === id);
function EntryCard({ icon, title, desc, tone = 'coral', onClick, badge, done }) {
return (
{badge != null && {badge}}
{done ? 완료 : }
);
}
// ── Day별 플래너 (인터랙티브) ─────────────────────────────────
function DayPlanner({ persona, seed }) {
const isHost = persona === 'host';
const [plan, setPlan] = React.useState(seed || { 1: ['p1', 'p2'], 2: ['x1'], 3: [] });
const [pick, setPick] = React.useState(null);
const days = [{ n: 1, d: '6/13 토' }, { n: 2, d: '6/14 일' }, { n: 3, d: '6/15 월' }];
const add = (day, id) => { setPlan(p => ({ ...p, [day]: [...p[day], id] })); setPick(null); };
const remove = (day, id) => setPlan(p => ({ ...p, [day]: p[day].filter(x => x !== id) }));
const used = Object.values(plan).flat();
return (
{isHost ? '민서의 날짜별 계획' : '날짜별로 가고 싶은 곳'}
늘 우선
{isHost ? '민서가 담은 곳을 보며 동선을 맞춰줘요.' : '시간표가 아니라 느슨한 목록. 담고 빼며 그날의 중심을 정해요.'}
{days.map((day, di) => {
const ids = plan[day.n];
const avail = PLAN_PLACES.filter(p => !used.includes(p.id));
const open = pick === day.n;
return (
{di < days.length - 1 &&
}
Day {day.n}
{day.d}
{ids.map(id => {
const p = planPlace(id);
return (
{p.name}
{p.tag}{JJ.pins.find(x => x.id === id) ? ' · 쩨 지도' : ' · 직접 추가'}
{!isHost && (
)}
);
})}
{ids.length === 0 && !open && (
아직 비어 있어요{isHost ? '' : ' — 담아볼까요?'}
)}
{!isHost && (open ? (
Day {day.n}에 담을 곳
{avail.map(p => (
))}
{avail.length === 0 &&
담을 수 있는 곳을 다 담았어요 🎉
}
) : (
))}
);
})}
{title}
{desc}
);
}
// ── 단계별 본문 (active일 때 펼침) — scr로 before/after 분기 ──
// 여행(재방문) 요청 폼 — 손님이 '가고 싶다'를 먼저 보낸다
function TripRequestForm({ title, sub, cta }) {
const dates = ['이번 주말', '다음 주', '이번 여름', '직접 고르기'];
const [sel, setSel] = React.useState(1);
const [sent, setSent] = React.useState(false);
if (sent) return ;
return (
여행 요청 · 가고 싶어요
{title}
{sub}
언제쯤 가고 싶어요?
{dates.map((d, i) => (
))}
한 마디 — “오랜만에 부산 가고 싶어요!”
setSent(true)}>{cta || '요청 보내기'}
예약이 아니라, 가고 싶다는 마음을 먼저 전해요.
);
}
function RequestSent({ when }) {
return (
요청을 보냈어요
{when} · 쩨가 수락하면 초대장이 도착해요.
쩨의 수락 대기 중
);
}
// 부산역 픽업 요청 (손님)
function PickupRequest() {
const [req, setReq] = React.useState(false);
return (
{req ?
:
}
{req ? '쩨가 마중 나와요' : '부산역 픽업'}
{req ? '도착 10분 전 알림 → 3번 출구' : '혼자 오기 부담되면 마중을 부탁해요'}
{req ?
요청됨 :
}
{JJ.host.name} 호스트가 초대했어요
{JJ.home.name} · {JJ.home.place}
{t.welcome}
{t.dates}{t.nights}박 · 무료
go('map')} />
go('home', 'prefs')} />
{ready &&
이제 가기만 하면 돼요!
}
);
}
if (state === 'prearrival') {
if (cur === 'pre') {
return (
도착 정보를 공유할까요?
KTX·SRT 티켓만 공유하면 쩨가 도착 시각에 맞춰 마중 나와요.
openSheet && go('trip')}>티켓 공유하기
go('home', 'kit')} />
go('home', 'guide')} />
);
}
return (
{t.arrive.train}
{t.arrive.from} → 부산
{t.arrive.time}
{t.arrive.platform}
go('home', 'guide')} />
go('home', 'kit')} />
);
}
if (state === 'staying') {
return (
go('album')} pad={12}>공유 앨범
go('wallet')} pad={12}>공동지갑
openSheet('request')} style={{ marginTop: 10, display: 'flex', alignItems: 'center', gap: 11 }}>
필요한 거, 편하게 말해요
수건 · 충전기 · 늦잠…
);
}
if (state === 'departing') {
const left = cur === 'left';
return (
openSheet('memory')} pad={0} style={{ overflow: 'hidden', cursor: 'pointer' }}>
{[['장소', JJ.memory.stats.places], ['사진', JJ.memory.stats.photos], ['함께', JJ.memory.stats.days]].map(([l, n]) => (
))}
{ e.stopPropagation(); openSheet('memory'); }}>열어보기
{left ? (
방명록에 남겼어요완료
막걸리도 흰여울 아침도 다 좋았어요. 여기 오면 부산이 우리집 같아져요. 또 올게요!
— 민서 · 이번 방문
) : (
openSheet('guestbook')} style={{ marginTop: 9, display: 'flex', alignItems: 'center', gap: 11, background: 'var(--paper-2)' }}>
방명록에 한 줄 남기기
이 집을 거쳐간 사람들 사이에
)}
);
}
// after
if (cur === 'request') {
return (
);
}
return (
회고가 도착했어요
부산 다녀온 지 일주일째 · 다시 펼쳐볼래요?
또 가고 싶다면
‘다시 여행 요청’ 상태에서 보낼 수 있어요
);
}
// ===================== HOST =====================
if (state === 'requested') {
if (cur === 'accepted') {
return (
수락했어요
민서에게 초대장을 발행했어요. 이제 ‘초대됨’ 단계예요.
초대장 발행됨
);
}
return (
민서의 여행 요청
가고 싶다고 먼저 연락이 왔어요
6월 13–16일 (3박)
“오랜만에 부산 가고 싶어요!”
나중에
go('trip')}>수락하고 초대
수락하면 ‘초대됨’으로 넘어가요.
);
}
if (state === 'invited') {
if (cur === 'compose') {
return (
{JJ.guest.name}를 초대할까요?
{t.dates} · 설치 없이 링크 하나로. 예약이 아니라 환대의 시작.
go('trip')}>초대 보내기
go('map')} />
go('home', 'kit')} />
);
}
return (
{JJ.guest.name}에게 초대장 발행
{t.dates} · 설치 없이 링크로
go('map')} />
go('home', 'prefs')} />
);
}
if (state === 'prearrival') {
if (cur === 'waiting') {
return (
);
}
return (
{JJ.guest.name}의 도착
티켓 공유됨
{t.arrive.train} · {t.arrive.from}발
14:32 도착
지금 출발하면 딱 맞아요
부산역 3번 출구로 마중
);
}
if (state === 'staying') {
const reqByCur = cur === 'none' ? [] : cur === 'done' ? JJ.requests.map(r => ({ ...r, state: 'done' })) : JJ.requests;
return (
민서의 요청
{cur === 'incoming' && 1 진행중}
{cur === 'done' && 모두 완료}
{reqByCur.length === 0 ? (
아직 요청이 없어요 — 조용한 하루
) : reqByCur.map((r, i) => (
{r.text}
{r.state === 'done' ? '완료' : '챙기는 중'}
))}
go('album')} pad={12}>공유 앨범
go('wallet')} pad={12}>공동지갑
);
}
if (state === 'departing') {
const letter = cur === 'letter';
return (
추억 선물 (자동 생성됨){JJ.memory.title}
{letter ? (
손글씨 한 줄을 더했어요. 배웅 때 건네면 완성.
{JJ.memory.letter}
openSheet('memory')}>배웅 때 건네기
) : (
앨범·장소·순간이 한 편으로 엮였어요. 손글씨 한 줄만 더하면 완성.
여기에 손글씨 한 줄을 더해보세요
openSheet('memory')}>편지 쓰기
)}
);
}
// host after
const received = cur === 'received';
const rerequest = cur === 'rerequest';
return (
회고를 보냈어요
일주일 뒤, 민서에게 추억이 다시 도착
{rerequest ? (
민서가 또 오고 싶대요
이번 여름쯤 재방문 요청
go('trip')}>수락하고 새 초대장 보내기
수락하면 새 여정으로 ‘요청 → 초대됨’부터 다시 시작돼요.
) : received ? (
민서가 남긴 한 줄
막걸리도 흰여울 아침도 다 좋았어요. 여기 오면 부산이 우리집 같아져요. 또 올게요!
— 민서 · 이번 방문
이 집을 거쳐간 사람이 {JJ.home.visitsCount}명이 됐어요.
) : (
)}
또 부르고 싶은 사람
새 손님 초대하기
);
}
// 단계 메타 (요약 / 잠금 라벨)
const STAGE_META = {
guest: {
requested: { recap: '가고 싶다고 요청했어요', locked: '아직 요청 전이에요' },
invited: { recap: '초대를 받고 미리 둘러봤어요' },
prearrival: { recap: '티켓 공유 · 마중 약속 완료', locked: '도착 전이 되면 열려요' },
staying: { recap: '함께한 며칠 · 가고 싶은 곳을 담았어요', locked: '머무는 동안 열려요' },
departing: { recap: '추억 선물과 방명록을 받았어요', locked: '떠나는 날 열려요' },
after: { recap: '회고로 다시 이어졌어요', locked: '다녀온 뒤 열려요' },
},
host: {
requested: { recap: '민서의 요청을 받았어요', locked: '아직 요청 전이에요' },
invited: { recap: '민서에게 초대장을 보냈어요' },
prearrival: { recap: '마중 약속을 잡았어요', locked: '손님 도착 전이 되면 열려요' },
staying: { recap: '요청을 챙기고 동선을 맞췄어요', locked: '머무는 동안 열려요' },
departing: { recap: '추억 선물에 손편지를 더해 건넸어요', locked: '떠나는 날 열려요' },
after: { recap: '방명록이 집에 쌓였어요', locked: '배웅한 뒤 열려요' },
},
};
// ── 여정 노드 ────────────────────────────────────────────────
function JourneyNode({ stage, status, last, persona, scr, go, openSheet }) {
const [open, setOpen] = React.useState(false);
const tone = stage.tone;
const meta = STAGE_META[persona][stage.key];
const lineColor = status === 'locked' ? 'var(--line)' : `var(--${tone})`;
return (
{status === 'done' && }
{status === 'active' && }
{!last &&
}
{(status === 'active' || (status === 'done' && open)) && (
)}
);
}
// ── 타임라인 ─────────────────────────────────────────────────
function TripTab({ persona, tripState, scr, go, openSheet }) {
const cur = JJ_STATES.findIndex(s => s.key === tripState);
const curState = JJ_STATES[cur];
const stOpts = SCREEN_STATES[persona + ':' + tripState] || [];
const stLabel = (stOpts.find(o => o.k === scr) || stOpts[0] || {}).label;
return (
손님의 여정 · {persona === 'host' ? '호스트 시점' : '손님 시점'}
곧 만나요 → 또 와요
지금은 {curState.name}{stLabel ? · {stLabel} : null} 단계예요.
{JJ_STATES.map((s, i) => (
))}
);
}
Object.assign(window, { TripTab, DayPlanner, JourneyNode, StageBody });