function PostViewer({ post, onClose, onComments, onMenu, onSuggest, onConfirm, onPlace, onUser }) { const { Avatar } = window.SpotureDesignSystem_f7ad96; const count = post.mediaCount || 1; const [active, setActive] = React.useState(0); const [liked, setLiked] = React.useState(!!post.liked); const [burst, setBurst] = React.useState(false); const [fit, setFit] = React.useState(false); const [tall, setTall] = React.useState(false); React.useEffect(() => { setTall(false); setFit(false); }, [post.src]); const drag = React.useRef(null); const tap = React.useRef({ time: 0 }); const isVideo = post.hasVideo && active === count - 1; const tags = post.tags || {}; const menuTags = (tags[active] && tags[active].length) ? tags[active] : (post.menu ? [post.menu] : []); const go = d => setActive(i => Math.min(count - 1, Math.max(0, i + d))); const onDown = e => { drag.current = { x: e.clientX, y: e.clientY }; }; const onUp = e => { const d = drag.current; drag.current = null; if (!d) return; const dx = e.clientX - d.x, dy = e.clientY - d.y; if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy)) { go(dx < 0 ? 1 : -1); return; } if (Math.abs(dx) > 10 || Math.abs(dy) > 10) return; const now = Date.now(); if (now - tap.current.time < 300) { tap.current.time = 0; setLiked(true); setBurst(true); setTimeout(() => setBurst(false), 620); } else tap.current.time = now; }; return (
{post.src && fit &&
}
{post.src ? {post.place { const t = e.target; setTall(t.naturalHeight / t.naturalWidth > 1.25); }} style={{ width: '100%', height: 'auto', maxHeight: fit ? '100%' : 'none', objectFit: 'contain', display: 'block' }} /> :
사진
}
{isVideo &&
}
{count > 1 && ( {active + 1}/{count} )} {burst && } {count > 1 && (
{Array.from({ length: count }, (_, i) => setActive(i)} style={{ width: i === active ? 18 : 6, height: 6, borderRadius: 999, background: i === active ? '#fff' : 'rgba(255,255,255,.4)', cursor: 'pointer', transition: 'width .18s ease' }}>)}
)}
9:41
{post.user} {[post.meal, post.category].filter(Boolean).join(' · ')}
{post.src && tall &&
setFit(f => !f)} style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
}
{menuTags.length > 0 && (
{menuTags.map(t => #{t})}
)}
{post.mission || post.place ? (
{post.place || '식탁이있는삶 역삼점'} {post.mission ? '스폰서 판매처 · ' + (post.distance || '320m') : [[post.city, post.area].filter(Boolean).join(' '), post.distance || post.dist].filter(Boolean).join(' · ')}
길찾기
) : post.estimatedLocation ? (
{post.estimatedLocation} · 추정 이웃 제보 {post.reportCount || 2}건 · {post.isMine ? '승인하면 위치가 채워져요' : '작성자 승인 전'}
{post.isMine ? 제보 확인 : 다른 곳 제보}
) : (
{post.isMine ? '장소가 아직 비어 있어요' : '여기 어디예요?'} {post.isMine ? '들어온 제보 없음 · 직접 지정할 수 있어요' : '아시는 곳이면 알려주세요'}
{post.isMine ? '지정하기' : '알려주기'}
)}
); } window.PostViewer = PostViewer;