// Poco 01 온보딩 · 02 작품 목록 · 04 완료 · 05 작품 페이지 · 06 행 단위 대화 · 앱 상태 // ───────── 01 온보딩 (3단계) ───────── function Dots({at}){ return
{[0,1,2].map(i=>
)}
; } function Onboarding({a, up, go}){ const st = a.step||0; const [pick,setPick] = React.useState(null); const [hv,setHv] = React.useState(null); const col = {position:'absolute',left:440,top:180,width:600}; return {st===0 &&
POem + COlor. 시를 한 행씩 읽고, 떠오르는 색을 고릅니다.
} {st===1 && <>
한 행만 해 볼까요?
이 행을 읽고 떠오르는 색을 하나 누르세요.
창밖으로 비가 그치고
{pick &&
다시 누르면 바꿀 수 있어요. 바꾼 색도 기록으로 남아요.
}
어떤 색이 떠오르나요?
} {st===2 &&
색에는 정답이 없어요
내 색을 끝까지 고르면, 같은 시를 읽은 독자들의 색이 열립니다.
{['LB','LO','WH','DB','LB'].map((c,i)=>)}
예시 · 같은 행을 읽은 다섯 명의 색
}
{st>0 && up({step:st-1})}>이전} {st===0 && up({step:1})}>시작하기} {st===1 && up({step:2})}>다음} {st===2 && go('list')}>시 고르기}
; } // ───────── 02 작품 목록 ───────── // 색 분포: 많이 고른 순, 비율만큼 폭 (색 없음·건너뜀 제외) const distOf = cs => { const m={}; cs.forEach(c=>{ if(c&&c!=='T1'&&c!=='SKIP') m[c]=(m[c]||0)+1; }); const t=Object.values(m).reduce((x,y)=>x+y,0)||1; return Object.entries(m).sort((x,y)=>y[1]-x[1]||PC_ORDER.indexOf(x[0])-PC_ORDER.indexOf(y[0])).map(([c,n])=>[c,n/t]); }; const DistBar = ({d, h=12}) =>
{d.map(([c,p])=>)}
; // [신규] 시 표지(책 비율 1:1.52). 위 46% = 그림 자리: 다 읽은 시는 독자 6명이 칠한 색 그림(세로줄 = 독자, 가로 = 행), 아닌 시는 첫 두 행. // 제목 아래 띠 = 내 컬러 바코드. 다 읽기 전에는 회색(다른 독자 색 비공개) function WorkCover({w, mine, tags:my, onOpen, width=200, rank, trend, fav}){ const H = Math.round(width*1.52), IH = Math.round(H*.46), pad = Math.round(width*.1); const open = !!mine; const cols = open ? [my,...namesOf(w).map((_,r)=>w.data.map(row=>row[r]))] : []; const all = open ? [...my, ...w.data.flat()] : []; const reps = open ? [...w.rep, mine] : []; const no = String(WORK_KEYS.indexOf(w.key)+1).padStart(2,'0'); // 제목 한 줄: 글자 수에 맞춰 글씨 크기·자간을 줄임(한글 1자 ≈ 1em). 내부 폭 = width - 2pad const inner = width-2*pad, tl = [...w.title.replace(/\s/g,'')].length + (w.title.split(' ').length-1)*0.45; const tfs = Math.max(Math.round(width*.07), Math.min(Math.round(width*.11), Math.floor(inner/(tl*.97)))); const tls = tfs < width*.085 ? '-.05em' : tfs < width*.1 ? '-.02em' : '.01em'; return
{null} {!open &&
NEW
} {fav &&
} {rank &&
{rank} {trend==='up' && } {trend==='down' && } {trend==='same' && }
}
{w.title}
{w.poet}{w.year}
{open ?
: null}
조회수 {(w.views||(w.readers||0)*7+13).toLocaleString()} {w.likes||Math.round((w.readers||0)*.6)}
; } // 작품 목록: 기본순 / 참여 많은 순. 참여 많은 순에서만 순위 숫자와 참여 인원 표시(요청에 따라 순위 금지 원칙의 예외 — 색이 아닌 참여 인원 기준) const readersOf = w => w.readers || w.rep.length; function List({a, go}){ const [q,setQ] = React.useState(''); const [sort,setSort] = React.useState('pop'); const k = q.trim(); let keys = WORK_KEYS.filter(id=>!k || WORKS[id].title.includes(k) || WORKS[id].poet.includes(k)); if(sort==='pop') keys = keys.slice().sort((x,y)=>BEST_KEYS.indexOf(x)-BEST_KEYS.indexOf(y)); // 홈 실시간 베스트와 같은 순서 const open = id => go('poem',{pk:id}); return
어떤 시를 읽을까요?
{[['pop','참여 많은 순'],['base','기본순']].map(([m,l])=>
setSort(m)} style={{height:44,padding:'0 18px',display:'flex',alignItems:'center',whiteSpace:'nowrap',font:`${sort===m?700:400} 14px ${T.sans}`,background:sort===m?T.band:T.surface,color:sort===m?T.ink:T.ink2}}>{l}
)}
{keys.map((id,i)=>open(id)}/>)} {!keys.length &&
「{k}」{josa(k,'과','와').slice(k.length)} 맞는 시가 없어요.
}
; } // 컬러 카드 메타: 완료한 날짜·시각 + '내가 읽은 시인의 제목'(시인·제목 볼드) function ColorCardMeta({w}){ const [t] = React.useState(()=>{ const d=new Date(); return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; }); return
{TODAY} {t}
내가 읽은 {w.poet}의 {w.title}
; } // ───────── 04 완료 ───────── function ColorCard({w, tags, rep}){ const cw = 336; return
{tags.map((c,i)=>0&&w.st[i]!==w.st[i-1]?2:0}}/>)}
; } function Done({a, go}){ const w = WORKS[a.pk]; const tags = a.tags[a.pk]; const rep = a.rep[a.pk]; const [toast,setToast] = React.useState(null); const save = () => { setToast('컬러 카드를 이미지로 저장했어요 (시연)'); setTimeout(()=>setToast(null),1800); }; const dur = tags.length*70; return
{josa(`「${w.title}`,'」을','」를')} 끝까지 읽었어요
같은 시를 읽은 독자는 {w.readers||w.rep.length}명이에요.
12?30:34} anim={dur}/>
내 바코드
{`${w.lines.length}행`}
카드 저장
go('home')}>홈으로go('poem',{pk:a.pk})}>다른 독자의 색 보기
; } // ───────── 05 작품 페이지 ───────── const josa = (w,a,b) => { const c=w.charCodeAt(w.length-1)-0xAC00; return w+((c>=0&&c%28)?a:b); }; const groupColors = cs => { const m=new Map(); cs.forEach(c=>m.set(c,(m.get(c)||[]).concat(c))); return [...m.entries()].sort((x,y)=>PC_ORDER.indexOf(x[0])-PC_ORDER.indexOf(y[0])).map(e=>e[1]); }; function Work({a, up, go}){ const w = WORKS[a.pk]; const mine = a.tags[a.pk]; const open = !!mine; const [hc,setHc] = React.useState(null); const [hr,setHr] = React.useState(null); const R = (a.reacts[a.pk]||{}); const tabs =
{WORK_KEYS.map(k=>
up({pk:k,convo:null})} style={{height:44,display:'flex',alignItems:'center',marginBottom:-1,font:`${k===a.pk?700:400} 15px ${T.sans}`,color:k===a.pk?T.ink:T.caption,borderBottom:`2px solid ${k===a.pk?T.ink:'transparent'}`}}>「{WORKS[k].title}」
)}
; const op = c => hc && c!==hc ? .2 : 1; const sqH = c => ({onMouseEnter:()=>setHc(c),onMouseLeave:()=>setHc(null)}); return
「{w.title}」
{workLabel(w)}
{open?`독자 ${w.rep.length+1}명이 읽었어요. 행을 누르면 그 행의 색과 반응이 열려요.`:`독자 ${w.rep.length}명이 읽었어요.`}
{!open ? <>
{w.lines.map((t,i)=>
0&&w.st[i]!==w.st[i-1]?14:0}}>
{i+1}
{t}
)}
다른 독자의 색은
내 색을 고른 뒤에 열려요.
먼저 내 감각으로 읽어 보세요.
go('read')}>읽고 색 고르기
: <>
나
다른 독자 {w.rep.length}명 · 같은 색끼리 붙여 보여요
{w.lines.map((t,i)=>{ const sel=a.convo===i; const nR=(R[i]||[]).length; return
up({convo:sel?null:i})} onMouseEnter={()=>setHr(i)} onMouseLeave={()=>setHr(null)} style={{height:48,display:'flex',alignItems:'center',gap:12,marginTop:i>0&&w.st[i]!==w.st[i-1]?14:0,borderRadius:4,background:sel?T.band:undefined,outline:sel?`1.5px solid ${T.ink}`:'none',outlineOffset:-1}}>
{i+1}
{t}
{groupColors(w.data[i]).map((g,k)=>
{g.map((c,j)=>)}
)}
{nR>0 &&
반응 {nR}
}
; })}
{a.convo==null ? <>
독자별 바코드
{[[ME,mine],...namesOf(w).map((n,r)=>[n,w.data.map(row=>row[r])])].map(([n,cs],k)=>
{n}
)}
go('re')}>다시 읽기 {(a.hist[a.pk]||[]).length>0 && 고친 기록 {(a.hist[a.pk]||[]).length}}
: }
} ; } // ───────── 06 행 단위 대화 ───────── function Convo({a, up, w, i, mine}){ const [txt,setTxt] = React.useState(''); const [rep,setRep] = React.useState({}); React.useEffect(()=>{ setTxt(''); },[i]); const list = (a.reacts[a.pk]||{})[i]||[]; const who = [[ME,mine[i]],...namesOf(w).map((n,r)=>[n,w.data[i][r]])]; const post = () => { const t=txt.trim(); if(!t) return; up(s=>{ const R=JSON.parse(JSON.stringify(s.reacts)); R[s.pk]=R[s.pk]||{}; R[s.pk][i]=(R[s.pk][i]||[]).concat({id:Date.now(),n:ME,c:mine[i],t}); return {reacts:R}; }); setTxt(''); }; const len = [...txt].length; return
{i+1}행
up({convo:null})} title="닫기" style={{width:44,height:44,display:'flex',alignItems:'center',justifyContent:'center',font:`400 22px ${T.sans}`,color:T.ink2,marginRight:-12}}>×
{w.lines[i]}
이 행의 색
{who.map(([n,c],k)=>
{n}
)}
반응
{list.length===0 &&
아직 반응이 없어요.
} {list.map(r=>
{r.n}
{r.n!==ME && !rep[r.id] && setRep(p=>({...p,[r.id]:1}))} style={{font:`400 12px ${T.sans}`,whiteSpace:'nowrap',flex:'none',display:'inline-flex',alignItems:'center',height:44,padding:'0 4px'}}>신고}
{rep[r.id]?'신고했어요. 검토 전까지 가려집니다.':r.t}
)}
=50?500:400} 12px ${T.sans}`,color:len>=50?T.ink:T.caption}}>{len} / {REACT_MAX}
남기기
색에 정답은 없어요. 다른 독자의 색을 평가하는 글은 가려질 수 있어요.
; } // ───────── 앱 ───────── function PocoApp({init}){ // 로그인: 캔버스 프레임(init 있음)은 로그인 상태, 로그인 화면은 로그아웃. 프로토타입은 localStorage 'poco.authed' const authed0 = init&&init.authed!=null ? init.authed : init&&(init.scr==='login'||init.scr==='onb') ? false : init ? true : localStorage.getItem('poco.authed')==='1'; const [a,setA] = React.useState(()=>({authed:authed0,scr:localStorage.getItem('poco.onboarded')?'home':'onb',step:0,pk:'cpd',...JSON.parse(JSON.stringify(PH_INIT)),convo:null,readInit:null,reacts:JSON.parse(JSON.stringify(REACTS0)),...(init||{})})); const up = p => setA(s=>({...s,...(typeof p==='function'?p(s):p)})); // 뒤로가기: 화면 이동마다 직전 위치를 쌓고, '__back'이면 하나 꺼냄(없으면 홈) // 시 한 편에 딸린 화면은 모두 시 화면(poem) 안의 상태로: 페이지 이동 없이 서랍·제자리 비교·모달 const AL={bar:()=>({}),space:e=>e.tab==='dist'?{drawer:0}:{},cmp:e=>({cmpR:e.cr==null?0:e.cr}),work:()=>({}),re:()=>({drawer:0}),done:()=>({justDone:true})}; const go = (scr0, ex0={}) => { let scr=scr0, extra=ex0; if(!a.authed && !ex0.authed && !['login','onb','__back'].includes(scr0)) return go0('login',{mode:'login',next:scr0}); if(AL[scr0]){ scr='poem'; extra={...ex0,...AL[scr0](ex0)}; } if(scr0==='sim'){ scr='find'; extra={...ex0,fmode:'sim'}; } if(scr==='poem') extra={drawer:null,bub:null,cmpR:null,pv:'me',justDone:false,...extra}; if(scr==='find'&&!extra.fmode) extra={...extra,fmode:'color'}; return go0(scr, extra); }; const go0 = (scr, extra={}) => scr==='__back' ? up(s=>{ const B=(s.back||[]).slice(); const p=B.pop()||{scr:'home'}; return {...p,back:B,convo:null}; }) : up(s=>({back:[...(s.back||[]),{scr:s.scr,pk:s.pk,tab:s.tab,cr:s.cr,fc:s.fc,fm:s.fm,sl:s.sl,poet:s.poet,readInit:s.scr==='read'?contInit(s,s.pk):s.readInit}].slice(-30),scr,convo:null,...extra})); const P = {a,up,go}; window.__pocoGo = go; const S = {onb:PocoOnb,home:PhHome,poem:PhPoem,me:PhMe,list:List,poets:PhPoets,read:Read,done:Done,work:Work,re:Reread,bar:PhBar,cmp:PhCmp,space:PhSpace,lib:PhLib,find:a.fmode==='sim'?PhSim:PhFind,sim:PhSim,text:PhText,user:PhUser,help:PhHelp,settings:PhSettings,login:PhLogin}[a.scr]; return ; } Object.assign(window,{Onboarding,List,WorkCover,DistBar,distOf,ColorCard,Done,Work,Convo,PocoApp});