function MissionDetail({ nav, ended, mstate }) { const { Button, Badge } = window.SpotureDesignSystem_f7ad96; const params = new URLSearchParams(location.search); const state = mstate || params.get('mstate') || 'intro'; const MY_HANDLE = 'gukbap_lover92'; const ENDED_BASE = { name: '새벽 국밥 인증 챌린지', period: '2026-07-01 ~ 2026-07-31', goal: 3, reward: '국밥교환권 (100명 추첨)', lottery: true, prizeCount: 100, drawDate: '2026-07-28', joinedCount: 742, doneCount: 486, winners: [['미도리', 'midori_eats'], ['국밥러버', 'gukbap_lover92'], ['수아', 'sua_9'], ['도윤', 'doyun'], ['예린', 'yerin.k'], ['민서', 'minseo.eat'], ['준호', 'junho_88'], ['채원', 'chaewon.s']] }; const ENDED_VARIANTS = { ended: { now: 3, achieved: true, won: true, rewardState: '당첨', rank: 42, percentile: 6, note: '7/28 발표 · 스폰서가 개별 안내드렸어요' }, endedLost: { now: 3, achieved: true, won: false, rewardState: '미당첨', rank: 203, percentile: 42, note: '완주는 했지만 아쉽게 추첨에서 빠졌어요. 다음 챌린지 응모권 1매를 드렸어요.' }, endedMiss: { now: 1, achieved: false, won: false, rewardState: '미완주 (1/3)', rank: null, percentile: null, note: '인증 1장에서 기간이 끝나 추첨 대상에 오르지 못했어요. 다음 챌린지에 다시 도전해 보세요.' } }; const E = ended || (ENDED_VARIANTS[state] ? Object.assign({}, ENDED_BASE, ENDED_VARIANTS[state]) : null); const WINNERS = E ? (E.won === false ? ((E.winners) || []).map(w => w[1] === MY_HANDLE ? ['하늘', 'haneul_92'] : w) : (E.winners || [])) : []; const mask = h => h.length <= 3 ? h[0] + '**' : h.slice(0, 3) + '*'.repeat(Math.min(5, h.length - 3)); if (E) return (
E.from === 'missions' ? nav('missions', { initialTab: '종료' }) : E.from === 'feed' ? nav('feed') : nav('profile')} />
종료
{E.name}

{E.period} 진행 · {E.lottery ? E.drawDate + ' 추첨 발표' : '완주 시 ' + E.reward + ' 지급'}

{[['참여자', E.joinedCount.toLocaleString() + '명'], ['완주', E.doneCount.toLocaleString() + '명'], ['보상', E.reward.split(' (')[0]]].map(([k, v]) => (
{v} {k}
))}
{E.won ? '당첨되었어요' : E.achieved ? '완주했지만 미당첨이에요' : '완주하지 못했어요'}

{E.note}

{[['내 기록', E.now + '/' + E.goal], ['완주 순위', E.rank ? E.rank + '위' : '—'], ['상위', E.percentile ? E.percentile + '%' : '—']].map(([k, v]) => (
{v} {k}
))}
{E.lottery && WINNERS.length > 0 && 당첨자 발표
{WINNERS.map((w, i) => { const me = w[1] === MY_HANDLE; return (
{i + 1}
{w[0].slice(0, 1)}
{w[0]}{' @' + mask(w[1])} {me && 나}
); })}
외 {(E.prizeCount - WINNERS.length).toLocaleString()}명 · 개인정보 보호를 위해 아이디는 일부만 표시돼요
} 결과 요약
{[['진행 기간', E.period], ['참여자', E.joinedCount.toLocaleString() + '명'], ['완주자', E.doneCount.toLocaleString() + '명 (' + Math.round(E.doneCount / E.joinedCount * 100) + '%)'], ['보상', E.reward]] .concat(E.lottery ? [['당첨 인원', E.prizeCount.toLocaleString() + '명 추첨'], ['당첨 확률', '완주자 기준 ' + Math.round(E.prizeCount / E.doneCount * 100) + '%'], ['추첨 발표', E.drawDate]] : [['달성 조건', E.goal + '곳 방문 인증']]) .concat([['완주 순위', E.rank ? E.doneCount.toLocaleString() + '명 중 ' + E.rank + '위 (상위 ' + E.percentile + '%)' : '완주자만 집계돼요'], ['내 결과', E.rewardState]]).map((r, i) => (
{r[0]} {r[1]}
))}
); const [agree, setAgree] = React.useState(state !== 'intro'); const shots = [{ ok: true, tag: '밀키트 패키지', img: '../../assets/feed/hanwoo-raw.jpeg' }, { ok: state !== 'intro', tag: '조리 과정', img: '../../assets/feed/kimchi-jjigae.jpeg' }, { ok: false, tag: '완성 한 상', img: '../../assets/feed/steak-platter.jpeg' }]; const doneCount = state === 'intro' ? 0 : state === 'progress' ? 1 : 3; const MSN = { need: 3, minPhotos: 2, tag: '밀키트' }; const MTAG = '#' + String(MSN.tag).replace(/^#+/, ''); const rules = [ { icon: 'article', label: '게시물 ' + MSN.need + '건 올리기', sub: '기간 안에 서로 다른 게시물 ' + MSN.need + '건을 올려야 완주예요' }, { icon: 'photo', label: '게시물당 사진 ' + MSN.minPhotos + '장 이상', sub: '밀키트 패키지 · 조리 과정 · 완성 한 상' }, { icon: 'map-pin', label: '위치는 집 또는 실내', sub: '주소는 공개되지 않고 동네 단위만 표시돼요' }, { icon: 'calendar', label: '기간 내 업로드', sub: '8월 1일 ~ 8월 21일 23:59' }, { icon: 'tag', label: '메뉴 태그 필수', sub: MTAG + ' 태그가 있어야 인증돼요' } ]; const statusCard = { progress: { tone: 'warning', icon: 'progress', title: '인증 진행 중 · 1/3건', body: '게시물 2건을 더 올리면 응모가 완료돼요. 한 건에 사진 2장 이상 담아주세요.', cta: '게시물 이어서 올리기', go: 'upload' }, review: { tone: 'warning', icon: 'clock', title: '심사 중', body: '스폰서 미션은 담당자가 사진을 확인해요. 보통 1~2일 안에 결과를 알려드려요.', cta: '내 인증 사진 보기', go: 'profile' }, done: { tone: 'success', icon: 'ticket', title: '응모 완료 · 응모권 1장', body: '추첨 결과는 8월 25일 알림으로 보내드려요. 행운을 빌어요!', cta: '내 응모 내역 보기', go: 'profile' }, announced: { tone: 'success', icon: 'trophy', title: '결과가 발표됐어요', body: '8월 25일 추첨이 끝났어요. 내 결과와 당첨자 명단을 확인해 보세요.', cta: '결과 확인하기', go: 'result' }, rejected: { tone: 'danger', icon: 'alert-triangle', title: '인증 1장이 반려됐어요', body: '완성 한 상 사진에서 밀키트 패키지가 보이지 않았어요. 사유를 확인하고 그 사진만 다시 올리면 재심사됩니다.', cta: '반려 사유 자세히 보기', go: 'missionRejection' } }[state]; return (
nav('feed')} />
SPONSORED
이달의 밀키트 인증샷

집에서 만든 밀키트 한 상을 올려주세요. 사진 2장 이상 담긴 게시물 3건을 올리면 응모권 2매를 드리고, 8월 25일 추첨으로 30명께 밀키트 6종 세트를 보내드려요.

{[['참여자', '1,284명'], ['경품', '밀키트 6종 세트'], ['당첨', '30명 추첨']].map(([k, v]) => (
{v} {k}
))}
{(state === 'review' || state === 'done' || state === 'announced') && (
{state === 'announced' ? '추첨 발표 완료 · 8월 25일' : '추첨 발표까지 D-6'} {state === 'announced' ? '결과는 미션 상세와 알림에서 확인할 수 있어요' : '8월 25일 오후 6시 · 발표되면 알림으로 알려드려요'}
)} {statusCard && (
{statusCard.title}

{statusCard.body}

)} 인증 게시물 {doneCount}/3건 · 건당 사진 2장 이상
{shots.map((s, i) => { const ok = i < doneCount; return (
{ok ? : } {i + 1}
{s.tag}
); })}
인증 조건
{rules.map(r => (
{r.label} {r.sub}
))}
진행 순서
{['게시물 3건 업로드 (건당 사진 2장 이상)', '담당자 심사 (1~2일)', '응모권 발급', '8월 25일 추첨 발표'].map((t, i) => (
{i + 1} {t}
))}
유의사항
    {['같은 사진을 여러 미션에 중복 제출할 수 없어요.', '타인의 사진이나 상업용 이미지는 반려됩니다.', '경품 발송을 위해 당첨 후 배송지를 입력해 주세요.', '스폰서는 인증 사진을 홍보에 활용할 수 있어요.'].map(t => (
  • {t}
    • ))}
{state === 'intro' && (
setAgree(!agree)} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-1)', borderRadius: 'var(--radius-tile)', padding: 14, boxShadow: 'var(--shadow-card)', cursor: 'pointer' }}> {agree && } 유의사항과 개인정보 활용에 동의합니다
)}
{state === 'announced' ? : state === 'review' ? : state === 'done' ? : }
); } window.MissionDetail = MissionDetail;