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-viewer{max-width:600px;margin:auto;padding:1rem}.form-row{display:flex;gap:10px;margin-bottom:1rem}select{flex:1;padding:8px}.page-details{border-top:1px solid #ccc;padding-top:1rem}.page-image{max-width:100%;margin-top:1rem;border:1px solid #ccc}