.eslintrc.cjs .gitignore index.html package-lock.json package.json postcss.config.js public README.md src tailwind.config.js tsconfig.json tsconfig.node.json vite.config.ts =========================================================== \src\App.css =========================================================== #root { max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; } .logo { height: 6em; padding: 1.5em; will-change: filter; transition: filter 300ms; } .logo:hover { filter: drop-shadow(0 0 2em #646cffaa); } .logo.react:hover { filter: drop-shadow(0 0 2em #61dafbaa); } @keyframes logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: no-preference) { a:nth-of-type(2) .logo { animation: logo-spin infinite 20s linear; } } .card { padding: 2em; } .read-the-docs { color: #888; } =========================================================== \src\App.tsx =========================================================== import {RouterProvider} from "react-router-dom"; import root from "./router/root.tsx"; function App() { return ( ) } export default App =========================================================== \src\assets\react.svg =========================================================== =========================================================== \src\components\commons\PageComponent.tsx =========================================================== import * as React from 'react'; import { PageResponse } from '../../interfaces/PageResponse'; import { Todo } from '../../interfaces/Todo'; interface PageProps { serverData: PageResponse movePage: Function } const PageComponent: React.FC = ({serverData, movePage}: PageProps) => { return (
{serverData.prev ?
movePage({page:serverData.prevPage} )}> Prev
: <>} {serverData.pageNumList.map(pageNum =>
movePage( {page:pageNum})}> {pageNum}
)} {serverData.next ?
movePage( {page:serverData.nextPage})}> Next
: <>}
); }; export default PageComponent; =========================================================== \src\components\commons\ResultModal.tsx =========================================================== import * as React from 'react'; interface ResultModalProps { title: string, content: string, callbackFn: () => void } const ResultModal: React.FunctionComponent = ({title,content,callbackFn}) => { return (
{ if(callbackFn) { callbackFn() } }}>
{title}
{content}
); } export default ResultModal; =========================================================== \src\components\menus\BasicMenu.tsx =========================================================== import { Link } from "react-router-dom"; const BasicMenu = () => { return ( ); } export default BasicMenu; =========================================================== \src\components\todo\ReadComponent.tsx =========================================================== import * as React from 'react'; import { getOne } from '../../apis/todoApi'; import {Todo} from '../../interfaces/Todo' import useCustomMove, {TCustomMove} from '../../hooks/useCustomMove'; interface Tno { tno:number } const ReadComponent: React.FunctionComponent = ({tno}:Tno):JSX.Element => { const [todo, setTodo] = React.useState() const {moveToList, moveToModify}: TCustomMove = useCustomMove() React.useEffect(() => { getOne(tno).then( (data:Todo) => { console.log(data) setTodo(data) }) },[tno]) if(!todo) { return <> } return (
{makeDiv('Tno', todo.tno)} {makeDiv('Writer', todo.writer)} {makeDiv('Title', todo.title)} {makeDiv('Due Date', todo.dueDate)} {makeDiv('Complete', todo.complete ? 'Completed' : 'Not Yet')} {/* buttons.........start */}
) } const makeDiv = (title:string, value: string |number) : JSX.Element =>
{title}
{value}
export default ReadComponent; =========================================================== \src\hooks\useCustomMove.ts =========================================================== import { createSearchParams, useNavigate, useSearchParams } from "react-router-dom" import { PageParam } from "../interfaces/PageParam" import { useState } from "react" export interface TCustomMove { moveToList: (param?:PageParam) => void, moveToModify: (num:number) => void, moveToRead: (num:number) => void, page: number, size: number, refresh: boolean } const getNum = (param: string | null, defaultValue: number) : number => { if(!param){ return defaultValue } return parseInt(param) } const useCustomMove = () : TCustomMove => { const navigate = useNavigate() const [queryParams] = useSearchParams(); const [refresh, setRefresh] = useState(false) //추가 const page: number = getNum( queryParams.get('page'), 1) const size: number = getNum( queryParams.get('size'), 10) const queryDefault = createSearchParams({page: page.toString(), size: size.toString()}).toString() //새로 추가 const moveToList = (pageParam?: PageParam):void => { let queryStr = "" if(pageParam){ const pageNum = pageParam.page || 1 const sizeNum = pageParam.size || 10 console.log("-----------------") console.log(pageNum, sizeNum) queryStr = createSearchParams({page:pageNum.toString(), size: sizeNum.toString()}).toString() }else { queryStr = queryDefault } setRefresh(!refresh) //추가 navigate({pathname: `../list`,search:queryStr}) } const moveToModify = (num: number) : void => { console.log(queryDefault) navigate({ pathname: `../modify/${num}`, search: queryDefault //수정시에 기존의 쿼리 스트링 유지를 위해 }) } const moveToRead = (num:number) => { console.log(queryDefault) navigate({ pathname: `../read/${num}`, search: queryDefault }) } return {moveToList, page, size, moveToModify, refresh, moveToRead} } export default useCustomMove =========================================================== \src\index.css =========================================================== @tailwind base; @tailwind components; @tailwind utilities; =========================================================== \src\interfaces\PageParam.ts =========================================================== export interface PageParam { page: number, size: number } =========================================================== \src\interfaces\PageResponse.ts =========================================================== export interface PageResponse { totalCount: number, prevPage: number, nextPage: number, totalPage: number, current: number prev:boolean next:boolean pageNumList:[number] dtoList:[T] } =========================================================== \src\layouts\BasicLayout.tsx =========================================================== import {PropsWithChildren} from 'react'; import BasicMenu from "../components/menus/BasicMenu.tsx"; function BasicLayout({ children }: PropsWithChildren) { return ( <> {/* 기존 헤더 대신 BasicMenu*/ } {/* 상단 여백 my-5 제거 */}
{/* 상단 여백 py-40 변경 flex 제거 */} {children}
); } export default BasicLayout; =========================================================== \src\main.tsx =========================================================== import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' ReactDOM.createRoot(document.getElementById('root')!).render( , ) =========================================================== \src\pages\AboutPage.tsx =========================================================== import BasicLayout from "../layouts/BasicLayout.tsx"; function AboutPage() { return (
About Page
 ); } export default AboutPage; =========================================================== \src\pages\MainPage.tsx =========================================================== import BasicLayout from "../layouts/BasicLayout.tsx"; function MainPage() { return (
Main Page
 ); } export default MainPage; =========================================================== \src\pages\todo\AddPage.tsx =========================================================== function AddPage() { return (
Todo Add Page
); } export default AddPage; =========================================================== \src\pages\todo\IndexPage.tsx =========================================================== import { Outlet, useNavigate} from "react-router-dom"; import BasicLayout from "../../layouts/BasicLayout"; const IndexPage:React.FC> = () => { const navigate = useNavigate() const handleClickList = () : void => { navigate({pathname:'list'}) } const handleClickAdd = () : void => { navigate({pathname:'add'}) } return (
LIST
ADD
 ); } export default IndexPage; =========================================================== \src\pages\todo\ListPage.tsx =========================================================== import { useSearchParams} from "react-router-dom"; const ListPage:React.FC> = () => { const [queryParams] = useSearchParams(); const page: number = parseInt(queryParams.get('page')||'1') const size: number = parseInt(queryParams.get('size')||'10') return (
Todo List Page Component {page} --- {size}
); } export default ListPage; =========================================================== \src\pages\todo\ModifyPage.tsx =========================================================== import React, { useCallback } from "react"; import { useNavigate, useParams } from "react-router-dom"; const ModifyPage: React.FC> = () => { const {tno} = useParams<{tno:string}>() const navigate = useNavigate() const moveToModify = useCallback((tno:string) => { navigate({pathname:`/todo/modify/${tno}`}) },[tno]) return (
Todo Read Page Component {tno}
); } export default ModifyPage =========================================================== \src\pages\todo\ReadPage.tsx =========================================================== import { useCallback } from "react"; import {createSearchParams, useNavigate, useParams, useSearchParams} from "react-router-dom"; const ReadPage:React.FC> = () => { const {tno} = useParams<{ tno: string }>(); const navigate = useNavigate() const [queryParams] = useSearchParams(); const page: string = queryParams.get('page')||'1' const size: string = queryParams.get('size')||'10' const queryStr: string = createSearchParams({page,size}).toString() const moveToModify = useCallback((tno: string|undefined) => { navigate({ pathname: `/todo/modify/${tno}`, search: queryStr }) },[tno, page, size]) return (
Todo Read Page Component {tno}
); } export default ReadPage =========================================================== \src\router\productRouter.tsx =========================================================== import { ReactElement, Suspense, lazy } from 'react'; import { Navigate } from 'react-router-dom'; const Loading =
Loading....
const ProductsList = lazy(() => import("../pages/products/ListPage.tsx")) const ProductsAdd = lazy(() => import("../pages/products/AddPage.tsx")) const productRouter = ():Array<{path:string, element:ReactElement}> => { return [ { path: "list", element: }, { path: "", element: }, { path: "add", element: }, ] } export default productRouter; =========================================================== \src\router\root.tsx =========================================================== import {createBrowserRouter} from "react-router-dom"; import {ComponentType, lazy, ReactNode, Suspense} from "react"; import todoRouter from "./todoRouter.tsx"; const Loading: ReactNode =
Loading,,,,
const Main:ComponentType = lazy(() => import('../pages/MainPage')) const About:ComponentType = lazy(() => import('../pages/AboutPage')) const TodoIndex: ComponentType = lazy(() => import("../pages/todo/IndexPage.tsx")) const root = createBrowserRouter([ { path: '', element:
}, { path: 'about', element: }, { path: 'todo', element: , children: todoRouter() } ]) export default root =========================================================== \src\router\todoRouter.tsx =========================================================== import {Suspense, lazy, ReactNode, ComponentType, ReactElement} from "react"; import {Navigate} from "react-router-dom"; const Loading:ReactNode =
Loading....
const TodoList:ComponentType = lazy(() => import("../pages/todo/ListPage")) const TodoRead:ComponentType = lazy(() => import("../pages/todo/ReadPage")) const TodoAdd:ComponentType = lazy(() => import("../pages/todo/AddPage")) const todoRouter = ():Array<{path:string, element:ReactElement}> => { return [ { path: "list", element: }, { path: "", element: }, { path: "read/:tno", element: }, { path: "add", element: }, ] } export default todoRouter =========================================================== \src\vite-env.d.ts =========================================================== ///