스크린샷에서 담기

한국어 글이 보이는 이미지면 돼요. 글자를 알아서 찾아드릴게요.

{/* Recent screenshots grid */}

최근 스크린샷

{recent.map(item => ( ))}

{/* Or pick from elsewhere */}

다른 곳에서

} title="사진 보관함에서 선택" desc="여러 장을 한꺼번에 고를 수도 있어요" /> } title="카메라로 찍기" desc="책, 메뉴판, 안내문 등" /> } title="클립보드에서 붙여넣기" desc="복사해둔 이미지가 있을 때" muted />

); } function SourceRow({ icon, title, desc, muted }) { return ( ); } function PlaceholderShot({ tone }) { // Stylized abstract "screenshot" thumbnails — generic UI shapes, no brand mimicry const palettes = { msg: { bg: '#E8E0D2', stripe: SS.ink4, strong: '#8B6F47' }, menu: { bg: '#EFE6D5', stripe: '#C9BFA7', strong: SS.ink2 }, browser: { bg: '#E2DACA', stripe: '#BBAF96', strong: SS.ink }, note: { bg: '#F0E7D6', stripe: '#D0C2A6', strong: '#8B5C7A' }, msg2: { bg: '#E5DDCB', stripe: '#C2B59B', strong: '#4A6B4F' }, }[tone] || { bg: '#EBE3D2', stripe: SS.ink4, strong: '#8B6F47' }; return (

{/* tiny status bar */}

{/* stripes */}

{[0.95, 0.7, 0.85, 0.5, 0.92, 0.65, 0.78].map((w, i) => (

))}

); } // Glyphs function LibraryGlyph() { return ( ); } function CameraGlyph() { return ( ); } function ClipboardGlyph() { return ( ); } function SparkleBlip() { return ( ); } // ───────────────────────────────────────────────────────────── // STEP 2 — Detect (dark photo viewer with OCR overlays) // ───────────────────────────────────────────────────────────── function ScreenshotDetect({ accent, selected, setSelected, onBack, onNext, regions }) { const [scanned, setScanned] = React.useState(false); // Scanner sweep animation on enter React.useEffect(() => { const t = setTimeout(() => setScanned(true), 1100); return () => clearTimeout(t); }, []); const toggle = (id) => { setSelected(prev => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); }; const all = () => { if (selected.size === regions.length) setSelected(new Set()); else setSelected(new Set(regions.map(r => r.id))); }; return (

{/* Top bar */}

텍스트 골라 담기

{/* Detection hint banner */}

{scanned ? ( <>{regions.length}개의 문장을 찾았어요 · 담을 것만 눌러주세요 ) : ( <>스크린샷을 읽고 있어요… 잠시만요 )}

{/* Image with overlays */}

{/* Scanning sweep */} {!scanned && (

)} {/* OCR boxes */} {scanned && regions.map((r, i) => { const isOn = selected.has(r.id); return ( ); })}

{/* Bottom action bar */}

{selected.size === 0 ? ( 담을 문장을 골라주세요 ) : ( <> {selected.size}개 · {regions.length}개 중 )}

); } // ───────────────────────────────────────────────────────────── // STEP 3 — Confirm (review cards before submit) // ───────────────────────────────────────────────────────────── function ScreenshotConfirm({ accent, items, setItems, onBack, onSubmit, langSel, setLangSel, tone, setTone, cat, setCat, customCats, addCustomCat }) { const [sheetOpen, setSheetOpen] = React.useState(null); const remove = (id) => setItems(arr => arr.filter(it => it.id !== id)); return (

{/* Top bar */}

담을 씨앗 확인

{/* Headline */}

{items.length}개의 표현

이대로 담으면 아래 설정으로 씨앗이 만들어져요.
각 씨앗은 눌러서 따로 고칠 수 있어요.

{/* Shared options */}

setSheetOpen('lang')} /> setSheetOpen('tone')} /> setSheetOpen('cat')} />

{/* Card preview list */}

{items.map((it, i) => ( remove(it.id)} /> ))} {items.length === 0 && (

모든 씨앗을 삭제했어요. 뒤로 가서 다시 골라주세요.

)}

{/* Footer disclaimer */}

번역과 발음은 완료 후 씨앗별로 자동 생성됩니다.
씨앗을 만든 뒤에도 편집 화면에서 다시 다듬을 수 있어요.

{/* Picker sheets reuse global versions */} {sheetOpen === 'lang' && ( ({ value: o.value, label: o.value, prefix: o.flag }))} current={langSel} accent={accent} onSelect={(v) => { setLangSel(v); setSheetOpen(null); }} onClose={() => setSheetOpen(null)} /> )} {sheetOpen === 'tone' && ( ({ value: o.value, label: o.value, desc: o.desc }))} current={tone} accent={accent} onSelect={(v) => { setTone(v); setSheetOpen(null); }} onClose={() => setSheetOpen(null)} /> )} {sheetOpen === 'cat' && ( { setCat(v); setSheetOpen(null); }} onAddCustom={(v) => { addCustomCat(v); setCat(v); setSheetOpen(null); }} onClose={() => setSheetOpen(null)} /> )}

); } function PreviewCard({ item, accent, index, onRemove }) { return (

{index}

{item.text}

번역 자동 생성

); } function SparkleBlipDark({ color }) { return ( ); } // ───────────────────────────────────────────────────────────── // Top-level wrapper used by app.jsx // ───────────────────────────────────────────────────────────── function ScreenshotFlow({ accent, initialItems, onBack, onSubmit, customCats, addCustomCat }) { // Single screen — confirm step. Detect step is rendered separately as 'detectScreenshot'. // (kept for symmetry; not currently used directly) return null; } // Expose to global scope so app.jsx can use them Object.assign(window, { ScreenshotSourceSheet, ScreenshotDetect, ScreenshotConfirm, SAMPLE_REGIONS, SCREENSHOT_PATH, });