import{useState}from "react"; import Page from "./Page"; function App(){const [pages,setPages] = useState([{chapter: 1,title: "",image: null,caption: "",memo: ""},]);const handlePageChange = (index,field,value) =>{const updatedPages = [...pages];updatedPages[index][field] = value;setPages(updatedPages)}const addPage = () =>{setPages([...pages,{chapter: pages.length + 1,title: "",image: null,caption: "",memo: ""},])}const sortedPages = [...pages].sort((a,b) => a.chapter - b.chapter);return (<div> <h1>📖 더원 - 책 만들기 프로젝트</h1> {sortedPages.map((page,idx) => (<Page key={idx} data={page} onChange={(field,value) => handlePageChange(idx,field,value)} />))} <button onClick={addPage}>📄 새 페이지 추가</button> </div>)}export default App; .page-form{width:500px;margin:40px auto;padding:30px;border:1px solid #ddd;border-radius:12px;background-color:#fafafa;box-shadow:0 4px 12px #0000000d;display:flex;flex-direction:column;gap:15px;font-family:sans-serif}.page-form h2{text-align:center;margin-bottom:10px}.page-form input[type=text],.page-form input[type=number],.page-form select,.page-form textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px}.page-form .form-row{display:flex;gap:10px}.page-form button{padding:10px;background-color:#2563eb;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;transition:background .2s ease}.page-form button:hover{background-color:#1d4ed8}.image-preview{margin:10px 0;text-align:center}.image-preview img{max-width:100%;height:auto;border:1px solid #ccc;border-radius:8px}