const { useState, useEffect, useRef } = React; // Design System — BUBA "Enchanted Storybook" (DESIGN.md 기반) const COLORS = { // Primary Brand primary: '#B39DDB', // Lavender Dream — 메인 브랜드 primaryDark: '#7E57C2', // Deep Storybook — 호버/프레스 dark: '#311B57', // Royal Purple — 가장 어두운 보라 // Warm Neutrals (양피지 스케일) lightBackground: '#FBF8FF', // Parchment White — 페이지 배경 warmCream: '#F3E5F5', // Cream Lavender — 대체 섹션 배경 warmLight: '#EDE7F6', // Soft Lilac — 서브 섹션 배경 // Text text: '#37274A', // Story Brown — 주요 텍스트 subtitle: '#9575CD', // Muted Lavender — 부제목 (큰 텍스트용) warmGray: '#7B6B8A', // Warm Gray — 본문 보조 텍스트 placeholder: '#B0A3BF', // Light Gray — 플레이스홀더 // Borders & Surfaces border: '#D1C4E9', // Lavender Border white: '#FFFFFF', // Cloud White — 카드 표면 disabled: '#D1C4E9', // Disabled 배경 // Accents (동화 테마) magicGold: '#FFD166', // Magic Gold — 별점, 프리미엄, 마법 fairyCoral: '#FF8A80', // Fairy Coral — 하트, 좋아요 forestSage: '#81C784', // Forest Sage — 성공, 자연 카테고리 skyBlue: '#64B5F6', // Sky Blue — 정보, 하늘 카테고리 sunsetOrange: '#FFB74D', // Sunset Orange — 경고, 모험 카테고리 rosePink: '#F48FB1', // Rose Pink — 공주 카테고리 magicPurple: '#CE93D8', // Magic Purple — 판타지 카테고리 // Semantic success: '#81C784', // Forest Sage warning: '#FFB74D', // Sunset Orange error: '#EF5350', // Admin (별도 팔레트) adminNavy: '#1A1A2E', adminBlue: '#7C4DFF', adminLight: '#F8F7FC', lightGray: '#F5F3FA', }; // Shadow System — 따뜻한 보라-갈색 기반 (cold black 금지) const SHADOWS = { card: '0 4px 16px rgba(55,39,74,0.08), 0 2px 6px rgba(55,39,74,0.05)', elevated: '0 8px 32px rgba(55,39,74,0.12), 0 4px 12px rgba(55,39,74,0.06)', floating: '0 16px 48px rgba(55,39,74,0.16), 0 4px 16px rgba(55,39,74,0.08)', magicGlow: '0 4px 24px rgba(179,157,219,0.35)', goldGlow: '0 4px 20px rgba(255,209,102,0.30)', focusRing: '0 0 0 4px rgba(179,157,219,0.30)', }; // Gradient System const GRADIENTS = { cta: `linear-gradient(135deg, ${COLORS.primary} 0%, ${COLORS.primaryDark} 100%)`, hero: 'linear-gradient(135deg, #F3E5F5 0%, #EDE7F6 40%, #FBF8FF 100%)', magic: `linear-gradient(135deg, #B39DDB 0%, #CE93D8 50%, #F48FB1 100%)`, gold: 'linear-gradient(135deg, #FFD166, #FFB74D)', dark: `linear-gradient(145deg, ${COLORS.dark}, #37274A)`, progressFill: 'linear-gradient(90deg, #B39DDB, #CE93D8, #F48FB1)', }; // Toast Notification System const ToastContext = React.createContext(); const ToastProvider = ({ children }) => { const [toasts, setToasts] = useState([]); const addToast = (message, type = 'info', duration = 3000) => { const id = Date.now(); setToasts(prev => [...prev, { id, message, type }]); setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), duration); }; return ( {children}
{toasts.map(t => (
{t.type === 'error' ? '❌ ' : t.type === 'success' ? '✅ ' : 'ℹ️ '}{t.message}
))}
); }; // API Helper const useApi = (token) => { return async (url, options = {}) => { const headers = { 'Content-Type': 'application/json' }; if (token) headers['Authorization'] = `Bearer ${token}`; const res = await fetch(`/api${url}`, { ...options, headers: { ...headers, ...options.headers }, }); const data = await res.json(); if (!res.ok) throw new Error(data.error || '오류가 발생했습니다'); return data; }; }; // ===== 수채화 배경 SVG 컴포넌트 ===== const WatercolorLandingBg = () => ( {/* 달 */} {/* 별들 */} {[[150,120],[320,80],[500,150],[680,60],[850,130],[1000,90],[1200,110],[1350,70],[200,200],[600,190],[900,170],[1280,160]].map(([x,y],i)=>( ))} {/* 부드러운 언덕 (라벤더) */} {/* 펼쳐진 책 모양 */} {/* 작은 별 반짝임들 (스토리북 분위기) */} {[[100,500,"#CE93D8"],[250,450,"#B39DDB"],[400,520,"#E1BEE7"],[550,470,"#D1C4E9"],[700,510,"#CE93D8"],[850,460,"#B39DDB"],[1000,500,"#E1BEE7"],[1150,470,"#D1C4E9"],[1300,510,"#CE93D8"]].map(([x,y,c],i)=>( ))} {/* 부드러운 라벤더 번짐 */} ); const WatercolorBlob = ({ color, size = 200, x = 0, y = 0, opacity = 0.15 }) => ( ); // ============ Home C 공용 컴포넌트 (아이콘 · 로고 · 스펙 · 푸터) ============ const Ico = { Sparkle: ({size=16, color='#FFD166'}) => (), Star: ({size=16, filled=true}) => (), Book: ({size=20, color='currentColor'}) => (), Camera: ({size=20}) => (), Chat: ({size=20}) => (), Wand: ({size=20}) => (), }; const BubaLogo = ({size=36}) => (
부바
BUBA
); const BookSpecs = ({variant='light'}) => { const dark = variant === 'dark'; const fg = dark ? '#fff' : '#37274A'; const sub = dark ? 'rgba(255,255,255,0.7)' : '#7B6B8A'; const panel = dark ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.7)'; const border = dark ? 'rgba(255,255,255,0.12)' : 'rgba(209,196,233,0.55)'; return (
E-Book Viewer Format

전자 동화책 뷰어 · 400 x 200 규격

부바의 동화는 펼침 기준 400 x 200 (2:1) 와이드 뷰어로 재생되는 전자책입니다.

400 · 뷰어 펼침 (2:1)
삽화
본문
{[{t:'뷰어 판형', v:'펼침 400x200 (2:1) · 페이지 200x200 정사각'},{t:'분량', v:'표지 + 본문 12p'},{t:'해상도', v:'2048x1024 기본 / 레티나 4K 대응'},{t:'지원 기기', v:'PC · 태블릿 · 모바일 스와이프'},{t:'읽기 기능', v:'AI 내레이션(TTS) · 배경음 · 자동 넘김'},{t:'공유', v:'링크 공유 · PDF 다운로드 · 앨범 저장'}].map(s=>(
{s.t}
{s.v}
))}
); }; const SiteFooter = ({variant='dark'}) => { const dark = variant === 'dark'; const bg = dark ? '#1E1230' : '#F0EAE0'; const fg = dark ? '#fff' : '#37274A'; const sub = dark ? 'rgba(255,255,255,0.7)' : '#5B4A70'; const muted = dark ? 'rgba(255,255,255,0.45)' : '#9B8AAD'; const border = dark ? 'rgba(255,255,255,0.12)' : 'rgba(49,27,87,0.12)'; const hover = dark ? 'rgba(255,255,255,0.08)' : 'rgba(49,27,87,0.06)'; const socials = [ {k:'instagram', label:'인스타그램 @buba.kr', href:'https://instagram.com/buba.kr', svg:}, {k:'youtube', label:'유튜브 @buba', href:'https://youtube.com/@buba', svg:}, {k:'kakao', label:'카카오톡 채널 @부바', href:'https://pf.kakao.com/_buba', svg:}, ]; return ( ); }; // ============ Landing Page Component (Home C · 스크롤 내러티브) ============ // 이미지 플레이스홀더 — 관리자가 이미지 업로드 전 표시 const ImgOrPlaceholder = ({src, alt='', style={}, gradient='linear-gradient(135deg, #B39DDB, #7E57C2)', label}) => { const [broken, setBroken] = useState(false); if (!src || broken) { return
{label || '관리자 페이지에서 이미지를 등록하세요'}
; } return {alt} setBroken(true)} />; }; // 이미지 로드 실패 시 큰 emoji로 폴백하는 컴포넌트 (템플릿 카드용) const EmojiFallbackImg = ({ src, emoji = '📖', emojiSize = 56, style = {}, bgColor }) => { const [broken, setBroken] = useState(false); if (!src || broken) { return (
{emoji}
); } return ( setBroken(true)} draggable={false} onDragStart={(e) => e.preventDefault()} onContextMenu={(e) => e.preventDefault()} style={{ ...style, objectFit: 'cover', WebkitUserDrag: 'none', userSelect: 'none' }} /> ); }; // 랜딩 Chapter 2 스토리 카드 — admin 슬롯 이미지 우선, 없거나 깨지면 stories.js cover, 그것도 없으면 gradient+emoji 폴백 const StoryCard = ({ s, slotImg }) => { const [broken, setBroken] = useState(false); const src = !broken ? (slotImg || s.cover) : null; if (src) { return (
{s.title} setBroken(true)} draggable={false} onDragStart={(e) => e.preventDefault()} onContextMenu={(e) => e.preventDefault()} style={{width:'100%', aspectRatio:'2/1', objectFit:'cover', display:'block', WebkitUserDrag:'none', userSelect:'none'}} />
{s.tag}
{s.title}
); } return (
{s.emoji}
{s.tag}
{s.title}
); }; const LandingPage = ({ onNavigate, user, token, onLogout }) => { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [uploadedPhoto, setUploadedPhoto] = useState(null); const [convertedPhoto, setConvertedPhoto] = useState(null); const [converting, setConverting] = useState(false); const [storyTemplates, setStoryTemplates] = useState([]); const [landingImages, setLandingImages] = useState({}); const fileInputRef = useRef(null); useEffect(() => { fetch('/api/templates').then(r => r.json()).then(data => { const list = Array.isArray(data) ? data : (data.templates || []); setStoryTemplates(list); }).catch(() => {}); // 관리자가 업로드한 랜딩 이미지 로드 fetch('/api/admin/landing-images-public').then(r => r.json()).then(data => { setLandingImages(data); }).catch(() => {}); }, []); const handlePhotoUpload = (file) => { if (!file) return; const reader = new FileReader(); reader.onload = (e) => setUploadedPhoto(e.target.result); reader.readAsDataURL(file); }; const handleConvertFace = async () => { if (!uploadedPhoto) return; setConverting(true); try { const res = await fetch('/api/trial/face-convert', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ imageData: uploadedPhoto }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || '변환 실패'); setConvertedPhoto('data:image/jpeg;base64,' + data.image); } catch (err) { alert('사진 변환에 실패했습니다: ' + err.message); } finally { setConverting(false); } }; // 네비게이션 const TopNav = () => ( ); return (
{mobileMenuOpen && (
{token && user ? (<> {user.name || user.email}님 ) : (<> )}
)} {/* HERO */}
✦ 옛날 옛날에 ✦

사진 한 장이,
우리 아이의 동화가 돼요.

AI가 아이의 얼굴로 수채화 주인공을 그려내고,
전문 일러스트레이터가 모든 장면을 최종 검수합니다.

{/* CHAPTER 1: 사진 업로드 */}
— Chapter 1 —
01

사진 한 장, 그걸로
충분해요.

아이의 정면 얼굴 사진 한 장이면 돼요. 정돈된 스튜디오 사진이 아니어도, 일상에서 찍은 환한 웃음 사진이면 충분합니다. AI는 얼굴의 특징만 부드럽게 학습해, 수채화 속 주인공으로 그려냅니다.

업로드한 원본 사진은 48시간 후 자동 삭제됩니다. 개인정보는 안전하게 보호돼요.
{/* 무료 체험 */}
FREE TRIAL
지금 바로 변환을 체험해보세요
fileInputRef.current?.click()} onDragOver={(e)=>e.preventDefault()} onDrop={(e)=>{e.preventDefault(); const f=e.dataTransfer.files[0]; if(f) handlePhotoUpload(f);}} style={{border:'2px dashed #B39DDB', borderRadius:10, padding:24, textAlign:'center', cursor:'pointer', background:'#FBF8FF', minHeight:160, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}> {uploadedPhoto ? 업로드한 사진 : <>

사진 선택 또는 드래그

} handlePhotoUpload(e.target.files?.[0])}/>
{uploadedPhoto &&
{convertedPhoto ? <>변환된 일러스트 : }
}
[아이의 얼굴 사진]
{/* CHAPTER 2: 스토리 선택 */}
{(window.BUBA_STORIES?.boy || []).slice(0,3).map((s, i)=>( ))} {(window.BUBA_STORIES?.girl || []).slice(0,3).map((s, i)=>( ))}
— Chapter 2 —
02

우리 아이에게
어울리는 이야기를 고르세요.

남자아이 주인공 부키 12편, 여자아이 주인공 바바 10편. 판타지, 모험, 전래동화, 우주 과학까지 — 연령과 취향에 맞춰 고를 수 있어요.

{(window.BUBA_TAGS || []).slice(1,7).map(t=>{t})}
{/* CHAPTER 3: 전문가 검수 */}
— Chapter 3 —
03

AI가 아닌,
사람의 손으로 완성합니다.

AI가 만든 초안을 전문 일러스트레이터가 한 장 한 장 검수하고 다듬습니다. 어색한 표정, 구도, 색감 불일치 — 모두 사람이 봅니다. 그래서 부바 동화책은 3~5일이 걸립니다.

{[{n:'03', t:'장인의 수정', d:'표정·구도·색감 수작업 보정'},{n:'04', t:'이중 승인', d:'내부 검수 → 부모님 최종 확인'}].map((s,i)=>(
Step {s.n}
{s.t}
{s.d}
))}
디자이너 수정 중
3/5 단계
{[{slot:'ch3_preview1',l:'미리보기 1'},{slot:'ch3_preview2',l:'미리보기 2'},{slot:'ch3_preview3',l:'미리보기 3'}].map(p=>
)}
✓ 얼굴 일관성 확인 · ✓ 배경 색감 조정 · ⏳ 최종 검수 대기
카카오톡 알림
[부바] 지우의 동화책이 완성됐어요!
지금 바로 읽어보세요 →
{/* FINAL: 평생 소장 */}
— Final Chapter —

그리고, 아이는
평생 간직할 이야기를 얻습니다.

전자책은 마이페이지에서 언제든 다시 열람할 수 있고, 카톡 링크로 할머니·할아버지에게도 쉽게 공유할 수 있어요.

{['#FF8A80','#FFD166','#81C784'].map((c,i)=>
)}
buba.co.kr/reader/yr-dongwha
{/* CTA */}

오늘 이야기의 주인공,
우리 아이입니다.

); }; // Auth Page Component const AuthPage = ({ isRegister, onNavigate, onLoginSuccess }) => { const [formData, setFormData] = useState({ name: '', email: '', password: '', passwordConfirm: '', phone: '', address: '', addressDetail: '', zonecode: '', }); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const [showAddressModal, setShowAddressModal] = useState(false); const api = useApi(null); // 카카오 주소 검색 (Daum Postcode API) const openAddressSearch = () => { setShowAddressModal(true); // 다음 렌더 사이클에서 iframe 생성 setTimeout(() => { const container = document.getElementById('daum-postcode-container'); if (!container) return; container.innerHTML = ''; new daum.Postcode({ oncomplete: (data) => { const fullAddr = data.roadAddress || data.jibunAddress; setFormData(prev => ({ ...prev, address: fullAddr, zonecode: data.zonecode, })); setShowAddressModal(false); }, onclose: () => setShowAddressModal(false), width: '100%', height: '100%', }).embed(container); }, 100); }; const handleSubmit = async (e) => { e.preventDefault(); setError(''); setLoading(true); try { if (isRegister) { if (formData.password !== formData.passwordConfirm) { throw new Error('비밀번호가 일치하지 않습니다'); } const response = await api('/auth/register', { method: 'POST', body: JSON.stringify({ email: formData.email, password: formData.password, passwordConfirm: formData.passwordConfirm, name: formData.name, phone: formData.phone, address: formData.address, addressDetail: formData.addressDetail, }), }); localStorage.setItem('token', response.token); onLoginSuccess(response.user, response.token); } else { const response = await api('/auth/login', { method: 'POST', body: JSON.stringify({ email: formData.email, password: formData.password, }), }); localStorage.setItem('token', response.token); onLoginSuccess(response.user, response.token); } } catch (err) { setError(err.message); } finally { setLoading(false); } }; return (
{/* Header */}
{/* Auth Card */}

{isRegister ? '회원가입' : '로그인'}

{isRegister ? '새로운 계정을 만들어보세요' : '계정에 로그인하세요'}

{isRegister && ( setFormData({ ...formData, name: e.target.value })} className="input-focus" style={{ padding: '14px', borderRadius: '10px', border: `1px solid ${COLORS.border}`, fontSize: '14px', outline: 'none', }} required /> )} setFormData({ ...formData, email: e.target.value })} className="input-focus" style={{ padding: '14px', borderRadius: '10px', border: `1px solid ${COLORS.border}`, fontSize: '14px', outline: 'none', }} required /> setFormData({ ...formData, password: e.target.value })} className="input-focus" style={{ padding: '14px', borderRadius: '10px', border: `1px solid ${COLORS.border}`, fontSize: '14px', outline: 'none', }} required /> {isRegister && ( <> setFormData({ ...formData, passwordConfirm: e.target.value })} className="input-focus" style={{ padding: '14px', borderRadius: '10px', border: `1px solid ${COLORS.border}`, fontSize: '14px', outline: 'none', }} required /> setFormData({ ...formData, phone: e.target.value })} className="input-focus" style={{ padding: '14px', borderRadius: '10px', border: `1px solid ${COLORS.border}`, fontSize: '14px', outline: 'none', }} /> {/* 주소 검색 */}
{formData.zonecode && (
우편번호: {formData.zonecode}
)} setFormData({ ...formData, addressDetail: e.target.value })} className="input-focus" style={{ padding: '14px', borderRadius: '10px', border: `1px solid ${COLORS.border}`, fontSize: '14px', outline: 'none', }} /> )} {error && (
{error}
)}
{/* 소셜 로그인 구분선 */}
또는
{/* Google 로그인 버튼 */}

{isRegister ? '이미 계정이 있으신가요?' : '계정이 없으신가요?'}{' '}

{/* 주소 검색 모달 (Daum Postcode API) */} {showAddressModal && (
setShowAddressModal(false)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0, 0, 0, 0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10000, animation: 'fadeIn 0.2s ease-out', }} >
e.stopPropagation()} style={{ background: COLORS.white, borderRadius: '20px', width: '90%', maxWidth: '500px', height: '500px', overflow: 'hidden', boxShadow: SHADOWS.floating, display: 'flex', flexDirection: 'column', }} >

주소 검색

)}
); }; // My Page Component const MyPage = ({ onNavigate, token, user }) => { const [books, setBooks] = useState([]); const [loading, setLoading] = useState(true); const api = useApi(token); useEffect(() => { const fetchBooks = async () => { try { const res = await api('/books'); setBooks(res.books || []); } catch (err) { console.error('내 동화책 로드 실패:', err); } finally { setLoading(false); } }; fetchBooks(); }, []); const getStatusInfo = (status) => { const map = { processing: { label: '생성 중', color: '#FF9800', bg: '#FFF3E0', icon: '⏳' }, page1_ready: { label: '1페이지 완성', color: '#2196F3', bg: '#E3F2FD', icon: '📄' }, generating_all: { label: '전체 생성 중', color: '#FF9800', bg: '#FFF3E0', icon: '⏳' }, paid: { label: '결제 완료', color: '#2196F3', bg: '#E3F2FD', icon: '💳' }, completed: { label: '완성', color: '#4CAF50', bg: '#E8F5E9', icon: '✅' }, approved: { label: '검수 완료', color: '#4CAF50', bg: '#E8F5E9', icon: '🎉' }, review_pending: { label: '검수 대기', color: '#9C27B0', bg: '#F3E5F5', icon: '🔍' }, revision_needed: { label: '수정 필요', color: '#F44336', bg: '#FFEBEE', icon: '✏️' }, }; return map[status] || { label: status || '알 수 없음', color: COLORS.subtitle, bg: COLORS.lightGray, icon: '📖' }; }; return (
{/* Header */}
onNavigate('landing')}> BUBA
{user?.name || user?.email}님
{/* Profile section */}
{(user?.name || '?')[0]}

{user?.name || '사용자'}님

{user?.email}

{user?.plan === 'premium' ? '프리미엄' : '무료'}
{/* Books section */}

내 동화책 ({books.length})

{loading ? (
로딩 중...
) : books.length === 0 ? (
📚

아직 만든 동화책이 없어요

우리 아이만의 특별한 동화책을 만들어보세요!

) : (
{books.map((book) => { const statusInfo = getStatusInfo(book.status); const isGenerating = book.status === 'processing' || book.status === 'generating_all'; return (
{ if (book.status !== 'processing') { onNavigate('preview', { bookId: book.id }); } }} style={{ background: 'white', borderRadius: '16px', padding: '20px', boxShadow: '0 4px 15px rgba(55,39,74,0.08)', cursor: book.status === 'processing' ? 'default' : 'pointer', display: 'flex', alignItems: 'center', gap: '16px', transition: 'transform 0.2s ease, box-shadow 0.2s ease', border: isGenerating ? `2px solid ${COLORS.warning}` : '2px solid transparent', }} onMouseEnter={(e) => { if (book.status !== 'processing') { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 25px rgba(55,39,74,0.12)'; }}} onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 4px 15px rgba(55,39,74,0.08)'; }} > {/* Book thumbnail */}
{book.generated_face_url ? ( ) : ( {book.template_emoji || '📖'} )}
{/* Book info */}

{book.character_name}의 모험

{statusInfo.icon} {statusInfo.label}

{book.template_title || '동화책'} · {book.pages_generated}/{book.total_pages}페이지

{new Date(book.created_at).toLocaleDateString('ko-KR')}

{/* Generating notification */} {isGenerating && (
⏳

동화가 생성중이에요

완료되면 알림 보내드릴게요!

)}
{/* Arrow */} {!isGenerating && ( > )}
); })}
)}
); }; // Templates Page Component const TemplatesPage = ({ onNavigate, token, user }) => { const [templates, setTemplates] = useState([]); const [loading, setLoading] = useState(true); const [genderFilter, setGenderFilter] = useState('all'); const [detailTemplate, setDetailTemplate] = useState(null); const [previewIdx, setPreviewIdx] = useState(0); const api = useApi(token); useEffect(() => { const fetchTemplates = async () => { try { const response = await api('/templates'); const list = response.templates || (Array.isArray(response) ? response : []); setTemplates(list); } catch (err) { console.warn('템플릿 로드 실패:', err.message); } finally { setLoading(false); } }; fetchTemplates(); }, []); const filtered = templates.filter(t => genderFilter === 'all' || t.target_gender === genderFilter || t.target_gender === 'both'); if (loading) { return (

로딩 중...

); } return (
{/* Header */}
onNavigate('landing')}> BUBA

어떤 동화를 만들어볼까요?

우리 아이가 주인공이 되는 특별한 이야기를 골라보세요

{/* Gender Filter */}
{[ { id: 'all', label: '전체', icon: '📚' }, { id: 'boy', label: '남부바', icon: '👦' }, { id: 'girl', label: '여부바', icon: '👧' }, ].map((f) => ( ))}
{/* Template Grid */} {filtered.length === 0 ? (
등록된 스토리가 없습니다
) : (
{filtered.map((template) => (
{ setDetailTemplate(template); setPreviewIdx(0); }} style={{ background: 'white', borderRadius: '16px', overflow: 'hidden', boxShadow: '0 4px 15px rgba(55,39,74,0.08)', cursor: 'pointer', }} > {/* Thumbnail */}
{template.target_gender === 'boy' ? '👦 남아' : template.target_gender === 'girl' ? '👧 여아' : '공용'} {(template.previews || []).length > 0 && ( 미리보기 {template.previews.length}장 )}

{template.title}

{template.description || template.story_summary || ''}

📖 {template.age_range || '3-7세'}

))}
)}
{/* Story Detail Modal */} {detailTemplate && (
setDetailTemplate(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: '20px' }} >
e.stopPropagation()} style={{ background: 'white', borderRadius: '20px', maxWidth: '600px', width: '100%', maxHeight: '90vh', overflowY: 'auto', animation: 'fadeInScale 0.3s ease-out' }} > {/* Preview image slideshow */} {(detailTemplate.previews || []).length > 0 ? (
e.preventDefault()} style={{ position: 'relative', height: '300px', overflow: 'hidden', borderRadius: '20px 20px 0 0' }} > e.preventDefault()} style={{ width: '100%', height: '100%', objectFit: 'contain', background: '#F5F5F5', WebkitUserDrag: 'none', userSelect: 'none' }} /> {detailTemplate.previews.length > 1 && ( <>
{detailTemplate.previews.map((_, i) => (
setPreviewIdx(i)} style={{ width: '8px', height: '8px', borderRadius: '50%', background: i === previewIdx ? 'white' : 'rgba(255,255,255,0.5)', cursor: 'pointer' }} /> ))}
)}
) : detailTemplate.thumbnail_url ? ( ) : (
{detailTemplate.emoji || '📖'}
)}

{detailTemplate.title}

{detailTemplate.target_gender === 'boy' ? '👦 남아' : detailTemplate.target_gender === 'girl' ? '👧 여아' : '공용'}

{detailTemplate.description}

{detailTemplate.story_summary && (

{detailTemplate.story_summary}

)}
👶 {detailTemplate.age_range || '3-7세'}
)}
); }; // Create Book Page Component const CreatePage = ({ onNavigate, token, templateId }) => { const [step, setStep] = useState(1); const [selectedTemplate, setSelectedTemplate] = useState(null); const [childName, setChildName] = useState(''); const [childGender, setChildGender] = useState('남아'); const [photo, setPhoto] = useState(null); const [photoFile, setPhotoFile] = useState(null); const [loading, setLoading] = useState(false); const [bookId, setBookId] = useState(null); const fileInputRef = useRef(null); const api = useApi(token); useEffect(() => { const saved = localStorage.getItem('selectedTemplate'); if (saved) { setSelectedTemplate(JSON.parse(saved)); } }, []); const handlePhotoUpload = (file) => { if (!file) return; const reader = new FileReader(); reader.onload = (e) => setPhoto(e.target.result); reader.readAsDataURL(file); setPhotoFile(file); }; const handleNext = async () => { if (step === 2 && !childName) { alert('아이 이름을 입력해주세요'); return; } if (step === 3 && !photo) { alert('사진을 업로드해주세요'); return; } if (step === 3) { // Create book and upload photo setStep(4); setLoading(true); try { const createResponse = await api('/books/create', { method: 'POST', body: JSON.stringify({ template_id: selectedTemplate.id, child_name: childName, child_age: parseInt(childGender) || 5, }), }); setBookId(createResponse.book_id); // Upload photo const formData = new FormData(); formData.append('photo', photoFile); const uploadResponse = await fetch(`/api/books/${createResponse.book_id}/upload-photo`, { method: 'POST', headers: { 'Authorization': `Bearer ${token}` }, body: formData, }); const uploadData = await uploadResponse.json(); if (!uploadResponse.ok) throw new Error(uploadData.error || '사진 업로드 실패'); // Call generate-face API const generateResponse = await api(`/books/${createResponse.book_id}/generate-face`, { method: 'POST', }); setTimeout(() => { localStorage.setItem('lastBookId', createResponse.book_id); onNavigate('preview', { bookId: createResponse.book_id }); }, 2000); } catch (err) { alert('오류: ' + err.message); setStep(3); } finally { setLoading(false); } } else { setStep(step + 1); } }; const handlePrev = () => { if (step > 1) setStep(step - 1); }; const stepText = ['템플릿', '정보입력', '사진', '생성중']; const messages = [ 'AI가 수채화풍으로 변환 중...', '아이의 얼굴을 분석하는 중...', '스토리를 생성하는 중...', '완성이 거의 다 되었습니다...', ]; return (
{/* Header */}

동화책 만들기

{/* Progress Bar */}
{stepText.map((text, idx) => (
{idx < step ? '✓' : idx + 1}

{text}

))}
{/* Content */}
{step === 1 && selectedTemplate && (

선택한 템플릿

{selectedTemplate.thumbnail_url ? (

{selectedTemplate.title}

{selectedTemplate.description}

) : (
{selectedTemplate.emoji || '📖'}

{selectedTemplate.title}

{selectedTemplate.description}

대상: {selectedTemplate.age_range || '3~7세'}

)}
)} {step === 2 && (

아이 정보 입력

setChildName(e.target.value)} placeholder="예: 준호" style={{ width: '100%', padding: '14px', borderRadius: '10px', border: `1px solid ${COLORS.border}`, fontSize: '16px', outline: 'none', }} />
{['남아', '여아'].map((gender) => ( ))}
)} {step === 3 && (

아이 사진 업로드

fileInputRef.current?.click()} onDragOver={(e) => { e.preventDefault(); e.currentTarget.style.background = COLORS.warmCream; }} onDragLeave={(e) => { e.currentTarget.style.background = COLORS.lightGray; }} onDrop={(e) => { e.preventDefault(); e.currentTarget.style.background = COLORS.lightGray; const file = e.dataTransfer.files[0]; if (file) handlePhotoUpload(file); }} > {photo ? ( Preview ) : ( <>
📸

사진을 여기에 드래그하세요

또는 클릭하여 선택

)} handlePhotoUpload(e.target.files?.[0])} style={{ display: 'none' }} />
)} {step === 4 && (
⏳

동화가 생성중이에요

{messages[Math.floor(Math.random() * messages.length)]}

🔔 완료되면 알림 보내드릴게요!
)}
{/* Buttons */}
{step > 1 && step < 4 && ( )} {step < 4 && ( )}
); }; // Preview Page Component const PreviewPage = ({ onNavigate, token, bookId: propBookId }) => { // bookId를 prop 또는 localStorage에서 복원 const [bookId] = useState(() => { const id = propBookId || localStorage.getItem('lastBookId'); if (propBookId) localStorage.setItem('lastBookId', propBookId); return id; }); const [book, setBook] = useState(null); const [pages, setPages] = useState([]); const [currentPage, setCurrentPage] = useState(0); const [paid, setPaid] = useState(false); const [loading, setLoading] = useState(true); const [paymentStatus, setPaymentStatus] = useState('idle'); // 'idle' | 'confirming' | 'generating' | 'done' const [errorMsg, setErrorMsg] = useState(''); const api = useApi(token); // bookId 없으면 템플릿 선택으로 이동 if (!bookId) { return (

동화책 정보를 찾을 수 없습니다

); } useEffect(() => { const fetchBook = async () => { try { const response = await api(`/books/${bookId}/status`); setBook(response); // Fetch pages separately const pagesResponse = await api(`/books/${bookId}/pages`); const { paid: isPaid, pages: pagesList } = pagesResponse; setPaid(isPaid); if (isPaid) { setPages(pagesList || []); } else { setPages([pagesList?.[0]] || []); } } catch (err) { setErrorMsg('책 로드 실패: ' + err.message); } finally { setLoading(false); } }; fetchBook(); }, []); // 토스페이먼츠 결제 요청 (SDK v2) const handleTossPayment = async () => { try { // 1) 서버에서 결제 준비 (orderId, amount 생성) const prepareRes = await api('/payments/prepare', { method: 'POST', body: JSON.stringify({ book_id: bookId, amount: 29900 }), }); // 2) 토스페이먼츠 SDK v2 초기화 const clientKey = prepareRes.clientKey; const tossPayments = TossPayments(clientKey); // 3) 결제창 객체 생성 (customerKey: 고유 식별자) const customerKey = `user_${Date.now()}_${Math.random().toString(36).substring(2, 8)}`; const payment = tossPayments.payment({ customerKey }); // 4) 서버 기반 successUrl/failUrl (서버가 해시 라우팅으로 리다이렉트) const baseUrl = window.location.origin; const successUrl = `${baseUrl}/payment/success`; const failUrl = `${baseUrl}/payment/fail`; // 5) 토스 결제창 호출 (v2 방식: method, amount 객체) payment.requestPayment({ method: 'CARD', amount: { currency: 'KRW', value: prepareRes.amount, }, orderId: prepareRes.orderId, orderName: prepareRes.orderName, customerName: book?.character_name || '고객', successUrl, failUrl, }).catch((err) => { // 사용자가 결제창 닫으면 여기로 옴 if (err.code === 'USER_CANCEL' || err.code === 'PAY_PROCESS_CANCELED') { setErrorMsg('결제가 취소되었습니다. 다시 시도해주세요.'); setTimeout(() => setErrorMsg(''), 4000); } else { setErrorMsg('결제 오류: ' + (err.message || err.code || '알 수 없는 오류')); } }); } catch (err) { setErrorMsg('결제 준비 실패: ' + (err.message || '알 수 없는 오류')); } }; // 결제 성공 콜백 처리 (URL hash에서 paymentKey 파싱) useEffect(() => { const hash = window.location.hash; if (hash.includes('payment-success')) { const params = new URLSearchParams(hash.split('?')[1]); const paymentKey = params.get('paymentKey'); const orderId = params.get('orderId'); const amount = params.get('amount'); const urlBookId = params.get('bookId'); if (paymentKey && orderId && amount) { // URL 정리 window.history.replaceState(null, '', `#preview`); setPaymentStatus('confirming'); // 서버에 결제 승인 요청 (async () => { try { const confirmRes = await api('/payments/confirm', { method: 'POST', body: JSON.stringify({ paymentKey, orderId, amount: parseInt(amount) }), }); if (confirmRes.status === 'confirmed') { setPaymentStatus('generating'); // 전체 페이지 생성 await api(`/books/${bookId}/generate-all`, { method: 'POST' }); // 페이지 다시 불러오기 const pagesRes = await api(`/books/${bookId}/pages`); setPaid(true); setPages(pagesRes.pages || []); setPaymentStatus('done'); setTimeout(() => setPaymentStatus('idle'), 3000); } } catch (err) { setErrorMsg('결제 승인 실패: ' + err.message); setPaymentStatus('idle'); } })(); } } else if (hash.includes('payment-fail')) { window.history.replaceState(null, '', `#preview`); const params = new URLSearchParams(hash.split('?')[1]); const code = params.get('code'); const message = params.get('message'); if (message) setErrorMsg(`결제 실패: ${message}`); setPaymentStatus('idle'); } }, []); if (loading) { return (

로딩 중...

); } if (!book) { return (

책을 찾을 수 없습니다

); } return (
{/* Header */}

{book.character_name}의 모험

{/* Book Preview */}
{pages[currentPage] ? ( <>
{ if (!paid) e.preventDefault(); }} onDragStart={(e) => { if (!paid) e.preventDefault(); }} > {pages[currentPage].image_url && ( {`Page e.preventDefault()} draggable="false" /> )}

{pages[currentPage].text_content}

{/* 미결제 시 워터마크 + 잠금 오버레이 (흐린 컨텐츠 위에) */} {!paid && (
e.preventDefault()} > {/* 반복 워터마크 패턴 */}
{[0, 1, 2, 3, 4].map(row => ( [0, 1, 2].map(col => (
부바의 모험
)) ))}
{/* 중앙 잠금 아이콘 */}
🔒
미리보기
결제 후 전체 동화책을 감상하세요
)} {/* Page Navigation */}
{pages.map((_, idx) => ( ))}
{/* TTS 읽어주기 + 카카오톡 공유 */} {paid && pages[currentPage] && (
)} {/* 에러 메시지 */} {errorMsg && (
❌ {errorMsg}
)} {/* CTA */} {!paid && (

전체 {pages.length}쪽 동화책을 감상하려면 결제해주세요

)} ) : (

페이지 로드 실패

)}
{/* 결제 진행 상태 오버레이 (토스 결제창에서 돌아온 후) */} {paymentStatus !== 'idle' && (
{paymentStatus === 'confirming' && ( <>

결제 승인 중...

토스페이먼츠 결제를 확인하고 있습니다

)} {paymentStatus === 'generating' && ( <>

결제 완료!

동화책 전체 페이지 생성 중...

잠시만 기다려주세요

)} {paymentStatus === 'done' && ( <>
✅

모든 준비 완료!

동화책 전체를 감상하세요

)}
)}
); }; // Admin Login Page Component const AdminLoginPage = ({ onNavigate, onAdminLoginSuccess }) => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const [loading, setLoading] = useState(false); const handleLogin = async (e) => { e.preventDefault(); setError(''); setLoading(true); try { const res = await fetch('/api/admin/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }), }); const data = await res.json(); if (!res.ok) throw new Error(data.error || '로그인 실패'); localStorage.setItem('adminToken', data.token); onAdminLoginSuccess(data.token); } catch (err) { setError(err.message); } finally { setLoading(false); } }; return (

관리자 로그인

관리자 계정으로 로그인하세요

setUsername(e.target.value)} style={{ padding: '14px', borderRadius: '8px', border: `1px solid ${COLORS.border}`, fontSize: '14px', outline: 'none', }} required /> setPassword(e.target.value)} style={{ padding: '14px', borderRadius: '8px', border: `1px solid ${COLORS.border}`, fontSize: '14px', outline: 'none', }} required /> {error && (
{error}
)}
); }; // Admin Pricing/Config Component const AdminPricing = ({ adminToken }) => { const [config, setConfig] = useState({}); const [saving, setSaving] = useState(false); const [saved, setSaved] = useState(false); const loadConfig = () => { fetch('/api/admin/config', { headers: { Authorization: `Bearer ${adminToken}` } }) .then(r => r.json()).then(data => { const flat = {}; Object.entries(data).forEach(([k, v]) => { flat[k] = v.value || ''; }); setConfig(flat); }).catch(() => {}); }; useEffect(() => { loadConfig(); }, []); const handleSave = async () => { setSaving(true); try { const res = await fetch('/api/admin/config', { method: 'PUT', headers: { Authorization: `Bearer ${adminToken}`, 'Content-Type': 'application/json' }, body: JSON.stringify(config), }); if (res.ok) { setSaved(true); setTimeout(() => setSaved(false), 2000); } } catch (e) { alert('저장 실패'); } finally { setSaving(false); } }; const Field = ({ k, type = 'text', suffix = '' }) => (
{k === 'sub_enabled' ? ( ) : (
setConfig({ ...config, [k]: e.target.value })} style={{ width: type === 'date' ? '180px' : '140px', padding: '8px 12px', borderRadius: '8px', border: `1px solid ${COLORS.border}`, fontSize: '14px', textAlign: type === 'number' ? 'right' : 'left' }} /> {suffix && {suffix}}
)}
); return (

가격/결제 설정

상품 가격, 할인, 구독 서비스를 관리합니다. 변경 즉시 사이트에 반영됩니다.

{/* 가격 설정 */}

💳 상품 가격

스토리 카탈로그 열람

{/* 구독 설정 */}

🔄 구독 서비스 {config.sub_enabled === 'true' ? '활성' : '비활성'}

{config.sub_enabled !== 'true' && (
구독 서비스가 비활성 상태입니다. 활성화하면 메인 페이지에 구독 플랜이 노출됩니다.
)}
{saved && 저장 완료!}
); }; // Admin Landing Images Component (extracted to avoid hooks-in-IIFE error) const AdminLandingImages = ({ adminToken }) => { const [slots, setSlots] = useState({}); const [uploading, setUploading] = useState(null); const loadImages = () => { fetch('/api/admin/landing-images', { headers: { Authorization: `Bearer ${adminToken}` } }) .then(r => r.json()).then(setSlots).catch(() => {}); }; useEffect(() => { loadImages(); }, []); const handleUpload = async (slot) => { const input = document.createElement('input'); input.type = 'file'; input.accept = 'image/png,image/jpeg,image/webp'; input.onchange = async (e) => { const file = e.target.files?.[0]; if (!file) return; setUploading(slot); const form = new FormData(); form.append('image', file); try { const res = await fetch(`/api/admin/landing-images/${slot}`, { method: 'POST', headers: { Authorization: `Bearer ${adminToken}` }, body: form }); if (!res.ok) throw new Error('업로드 ���패'); loadImages(); } catch (err) { alert(err.message); } finally { setUploading(null); } }; input.click(); }; const handleDelete = async (slot) => { if (!confirm('이 이미지를 삭제할까요?')) return; await fetch(`/api/admin/landing-images/${slot}`, { method: 'DELETE', headers: { Authorization: `Bearer ${adminToken}` } }); loadImages(); }; return (

랜딩 페이지 이미지 관리

메인 페이지에 표시되는 이미지를 업로드/교체할 수 있습니다.

{Object.entries(slots).map(([slot, info]) => (
{info.url ? {info.label} : 미등록}
{info.label}
{info.desc}
권장 비율: {info.ratio}
{info.url && }
))}
); }; // Admin Panel Component const AdminPanel = ({ onNavigate, adminToken, onAdminLogout }) => { const [adminPage, setAdminPage] = useState('dashboard'); const [customers, setCustomers] = useState([]); const [orders, setOrders] = useState([]); const [stats, setStats] = useState({ users: 0, revenue: 0, books: 0, shipments: 0 }); const [books, setBooks] = useState([]); const [templates, setTemplates] = useState([]); const [shippingOrders, setShippingOrders] = useState([]); const [editingTemplate, setEditingTemplate] = useState(null); const [newTemplate, setNewTemplate] = useState(null); const [shippingFilter, setShippingFilter] = useState('all'); const [analyticsData, setAnalyticsData] = useState(null); const [flipbooks, setFlipbooks] = useState([]); const [selectedFlipbook, setSelectedFlipbook] = useState(null); const [flipbookPages, setFlipbookPages] = useState([]); const [newFlipbookTitle, setNewFlipbookTitle] = useState(''); const [flipbookUploading, setFlipbookUploading] = useState(false); const api = useApi(adminToken); useEffect(() => { const fetchData = async () => { try { if (adminPage === 'dashboard') { const statsRes = await api('/admin/stats'); setStats(statsRes); const usersRes = await api('/admin/users'); setOrders(usersRes.users || []); } else if (adminPage === 'customers') { const usersRes = await api('/admin/users'); setCustomers(usersRes.users || []); } else if (adminPage === 'books') { const booksRes = await api('/admin/reviews'); setBooks(booksRes.reviews || []); } else if (adminPage === 'templates') { const tplRes = await api('/admin/templates'); setTemplates(Array.isArray(tplRes) ? tplRes : []); } else if (adminPage === 'analytics') { const analyticsRes = await api('/admin/analytics'); const statsRes = await api('/admin/stats'); setAnalyticsData({ ...analyticsRes, total_revenue: statsRes.total_revenue || 0, total_payments: statsRes.total_payments || 0 }); } else if (adminPage === 'flipbooks') { const fbRes = await api('/admin/flipbooks'); setFlipbooks(fbRes.flipbooks || []); } else if (adminPage === 'shipping') { const shipUrl = shippingFilter === 'all' ? '/admin/shipping' : `/admin/shipping?status=${shippingFilter}`; const shipRes = await api(shipUrl); setShippingOrders(shipRes.orders || []); } } catch (err) { console.error('데이터 로드 실패:', err); } }; fetchData(); }, [adminPage, shippingFilter]); const handleBookReview = async (bookId, status, reviewNote) => { try { await api(`/admin/reviews/${bookId}`, { method: 'PUT', body: JSON.stringify({ status, review_score: status === 'approved' ? 5 : 3, review_note: reviewNote || '' }), }); const booksRes = await api('/admin/reviews'); setBooks(booksRes.reviews || []); } catch (err) { console.error('검수 처리 실패:', err); } }; const handleTemplateUpdate = async (templateId, data) => { try { await api(`/admin/templates/${templateId}`, { method: 'PUT', body: JSON.stringify(data), }); const tplRes = await api('/admin/templates'); setTemplates(Array.isArray(tplRes) ? tplRes : []); setEditingTemplate(null); } catch (err) { console.error('템플릿 수정 실패:', err); } }; const handleTemplateCreate = async (data) => { try { await api('/admin/templates', { method: 'POST', body: JSON.stringify(data), }); const tplRes = await api('/admin/templates'); setTemplates(Array.isArray(tplRes) ? tplRes : []); setNewTemplate(null); } catch (err) { console.error('템플릿 생성 실패:', err); } }; const handleTemplateDelete = async (templateId) => { if (!confirm('정말 이 템플릿을 삭제하시겠습니까?')) return; try { await api(`/admin/templates/${templateId}`, { method: 'DELETE' }); const tplRes = await api('/admin/templates'); setTemplates(Array.isArray(tplRes) ? tplRes : []); } catch (err) { console.error('템플릿 삭제 실패:', err); } }; const handleShippingUpdate = async (orderId, data) => { try { await api(`/admin/shipping/${orderId}`, { method: 'PUT', body: JSON.stringify(data), }); const shipRes = await api('/admin/shipping'); setShippingOrders(shipRes.orders || []); } catch (err) { console.error('배송 업데이트 실패:', err); } }; // Flipbook handlers const handleFlipbookCreate = async () => { if (!newFlipbookTitle.trim()) return; try { await api('/admin/flipbooks', { method: 'POST', body: JSON.stringify({ title: newFlipbookTitle.trim() }), }); setNewFlipbookTitle(''); const fbRes = await api('/admin/flipbooks'); setFlipbooks(fbRes.flipbooks || []); } catch (err) { console.error('플립북 생성 실패:', err); } }; const handleFlipbookSelect = async (flipbook) => { try { const res = await api(`/admin/flipbooks/${flipbook.id}`); setSelectedFlipbook(res); setFlipbookPages(res.pages || []); } catch (err) { console.error('플립북 로드 실패:', err); } }; const handleFlipbookUploadPages = async (e) => { const files = e.target.files; if (!files || files.length === 0 || !selectedFlipbook) return; setFlipbookUploading(true); try { const formData = new FormData(); // Sort files by name for correct page ordering const sorted = Array.from(files).sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true })); sorted.forEach(f => formData.append('pages', f)); const res = await fetch(`/api/admin/flipbooks/${selectedFlipbook.id}/pages`, { method: 'POST', headers: { 'Authorization': `Bearer ${adminToken}` }, body: formData, }); const data = await res.json(); if (!res.ok) throw new Error(data.error); // Reload flipbook await handleFlipbookSelect(selectedFlipbook); // Refresh list const fbRes = await api('/admin/flipbooks'); setFlipbooks(fbRes.flipbooks || []); } catch (err) { console.error('페이지 업로드 실패:', err); alert('업로드 실패: ' + err.message); } finally { setFlipbookUploading(false); e.target.value = ''; } }; const handleFlipbookDeletePage = async (pageId) => { if (!selectedFlipbook) return; try { await api(`/admin/flipbooks/${selectedFlipbook.id}/pages/${pageId}`, { method: 'DELETE' }); await handleFlipbookSelect(selectedFlipbook); const fbRes = await api('/admin/flipbooks'); setFlipbooks(fbRes.flipbooks || []); } catch (err) { console.error('페이지 삭제 실패:', err); } }; const handleFlipbookPublish = async (flipbookId, newStatus) => { try { await api(`/admin/flipbooks/${flipbookId}`, { method: 'PUT', body: JSON.stringify({ status: newStatus }), }); const fbRes = await api('/admin/flipbooks'); setFlipbooks(fbRes.flipbooks || []); if (selectedFlipbook && selectedFlipbook.id === flipbookId) { setSelectedFlipbook({ ...selectedFlipbook, status: newStatus }); } } catch (err) { console.error('상태 변경 실패:', err); } }; const handleFlipbookDelete = async (flipbookId) => { if (!confirm('정말 이 플립북을 삭제하시겠습니까? 모든 페이지가 함께 삭제됩니다.')) return; try { await api(`/admin/flipbooks/${flipbookId}`, { method: 'DELETE' }); if (selectedFlipbook && selectedFlipbook.id === flipbookId) { setSelectedFlipbook(null); setFlipbookPages([]); } const fbRes = await api('/admin/flipbooks'); setFlipbooks(fbRes.flipbooks || []); } catch (err) { console.error('플립북 삭제 실패:', err); } }; const handleFlipbookCoverUpload = async (e) => { const file = e.target.files?.[0]; if (!file || !selectedFlipbook) return; try { const formData = new FormData(); formData.append('cover', file); const res = await fetch(`/api/admin/flipbooks/${selectedFlipbook.id}/cover`, { method: 'POST', headers: { 'Authorization': `Bearer ${adminToken}` }, body: formData, }); const data = await res.json(); if (!res.ok) throw new Error(data.error); setSelectedFlipbook({ ...selectedFlipbook, cover_url: data.cover_url }); const fbRes = await api('/admin/flipbooks'); setFlipbooks(fbRes.flipbooks || []); } catch (err) { console.error('표지 업로드 실패:', err); alert('표지 업로드 실패: ' + err.message); } finally { e.target.value = ''; } }; const menuItems = [ { id: 'dashboard', icon: '📊', label: '대시보드' }, { id: 'customers', icon: '👥', label: '고객관리' }, { id: 'photos', icon: '📸', label: '사진/얼굴관리' }, { id: 'books', icon: '📖', label: '동화검수' }, { id: 'flipbooks', icon: '📚', label: '플립북관리' }, { id: 'templates', icon: '🎨', label: '템플릿관리' }, { id: 'pricing', icon: '💰', label: '가격/결제 설정' }, { id: 'landing-images', icon: '🖼️', label: '랜딩 이미지' }, { id: 'api', icon: '🔑', label: 'API 키 설정' }, { id: 'shipping', icon: '📦', label: '배송관리' }, { id: 'analytics', icon: '📈', label: '매출분석' }, ]; return (
{/* Sidebar */}
BUBA
관리자
{menuItems.map((item) => ( ))}
{/* Content */}
{adminPage === 'dashboard' && (

대시보드

{/* Stats */}
{[ { label: '회원수', value: stats.total_users || stats.users || 0, icon: '👥' }, { label: '매출', value: `₩${(stats.total_revenue || stats.revenue || 0).toLocaleString()}`, icon: '💰' }, { label: '제작건', value: stats.total_books || stats.books || 0, icon: '📖' }, { label: '결제건', value: stats.total_payments || stats.shipments || 0, icon: '📦' }, ].map((stat, idx) => (
{stat.icon}

{stat.label}

{stat.value}

))}
{/* Recent Orders */}

최근 주문

{orders.slice(0, 5).map((order, idx) => ( ))}
주문자 책 제목 금액 상태
{order.customerName || '-'} {order.bookTitle || '-'} ₩{(order.amount || 0).toLocaleString()} {order.status === 'completed' ? '완료' : '진행중'}
)} {adminPage === 'customers' && (

고객관리

{['전체', '무료', '프리미염'].map((filter) => ( ))}
{customers.map((customer, idx) => ( ))}
이름 이메일 가입일 요금제 주문수 상태
{customer.name || '-'} {customer.email || '-'} {new Date(customer.createdAt).toLocaleDateString('ko-KR') || '-'} {customer.plan === 'premium' ? '프리미엄' : '무료'} {customer.orderCount || 0} {customer.active ? '활성' : '비활성'}
)} {adminPage === 'photos' && (

사진/얼굴관리

{[1, 2, 3, 4, 5, 6].map((idx) => (
원본
변환됨

2024-01-15

))}
)} {adminPage === 'pricing' && } {adminPage === 'landing-images' && } {adminPage === 'api' && (

API 키 설정

{['Midjourney', 'Gemini', 'Stable Diffusion', 'Toss', 'CJ Logistics'].map((service, idx) => (

{service}

{['Midjourney', 'Gemini', 'Stable Diffusion'].includes(service) && (