12장 (~12.4) 리덕스를 이용한 상태 관리

.gitignore

@@ -8,7 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
+# dist
 dist-ssr
 *.local
 
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+node_modules

README.md

@@ -0,0 +1 @@
+## 리액트 퀵스타트 스터디

package.json

@@ -9,14 +9,33 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.2",
+    "@types/react-redux": "^7.1.25",
+    "@types/styled-components": "^5.1.26",
+    "@types/youtube-player": "^5.5.6",
+    "axios": "^1.3.2",
+    "bootstrap": "^5.2.3",
+    "date-and-time": "^2.4.2",
+    "immer": "^9.0.17",
+    "p-min-delay": "^4.0.2",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-router": "^6.8.0",
+    "react-router-dom": "^6.8.0",
+    "react-spinners": "^0.13.8",
+    "react-youtube": "^10.1.0",
+    "redux": "^4.2.1",
+    "styled-component": "^2.8.0",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.0",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0",
+    "vite-plugin-webpackchunkname": "^0.2.4"
   }
-}
+}

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/App.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
-import './App.css'
+// import './App.css'
 
 function App() {
   const [count, setCount] = useState(0)

src/Chapter10/App.tsx

@@ -0,0 +1,36 @@
+import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Layout from './components/Layout'
+import Home from './pages/Home'
+import About from './pages/About'
+import TodoList from './pages/TodoList'
+import AddTodo from './pages/AddTodo'
+import EditTodo from './pages/EditTodo'
+import NotFound from './pages/NotFound'
+
+// import { CallbacksType, StatesType } from "./AppContainer";
+// import Loading from "./components/Loading";
+
+// type PropsType = {
+//   states: StatesType;
+//   callbacks: CallbacksType;
+// }
+
+const App = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="about" element={<About />} />
+          <Route path="todos" element={<TodoList />} />
+          <Route path="todos/add" element={<AddTodo />} />
+          <Route path="todos/edit/:id" element={<EditTodo />} />
+          <Route path="*" element={<NotFound />} />
+        </Route>
+      </Routes>
+      {/* {states.isLoading ? <Loading /> : ''} */}
+    </Router>
+  )
+}
+
+export default App

src/Chapter10/AppContainer.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useState } from "react"
+import App from "./App"
+import produce from 'immer'
+import axios from 'axios'
+// import { string } from "prop-types";
+
+export type TodoItemType = { id: number; todo: string; desc: string; done: boolean }
+export type StatesType = { todoList: Array<TodoItemType>; isLoading: boolean }
+export type CallbacksType = {
+  fetchTodoList: () => void;
+  addTodo: (todo: string, desc: string, callback: () => void) => void;
+  deleteTodo: (id: number) => void;
+  toggleDone: (id: number) => void;
+  updateTodo: (id: number, todo: string, desc: string, done: boolean, callback: () => void) => void;
+}
+
+// 다른 사용자 명을 사용하려면 변경할 것
+// --> http://localhost:8000/todolist/[user명]/create
+const USER = 'hs';
+// const BASEURI = '/api/todolist/' + USER;
+const BASEURI = '/api/todolist_long/' + USER;
+
+const AppContainer = () => {
+  let [todoList, setTodoList] = useState<Array<TodoItemType>>([
+    // {id: 1, todo: '투두1', desc: '투두1 설명', done: false},
+    // {id: 2, todo: '투두2', desc: '투두2 설명', done: true},
+    // {id: 3, todo: '투두3', desc: '투두3 설명', done: false},
+    // {id: 4, todo: '투두4', desc: '투두4 설명', done: false},
+  ])
+  let [isLoading, setIsLoading] = useState<boolean>(false)
+
+  useEffect(() => {
+    fetchTodoList();
+  }, []);
+
+  // 할 일 목록 조회하는 함수
+  const fetchTodoList = async () => {
+    setTodoList([]);
+    setIsLoading(true);
+    try {
+      const res = await axios.get(BASEURI);
+      setTodoList(res.data)
+    } catch (err) {
+      if ( err instanceof Error ) alert('조회 실패 : ' + err.message);
+      else alert('조회 실패 : ' + err);
+    }
+    setIsLoading(false);
+  }
+
+  // 할 일 추가하는 함수
+  // 할 일 추가가 성공하면 마지막 인자로 전달된 callback을 호출함
+  const addTodo = async (todo: string, desc: string, callback: () => void) => {
+    setIsLoading(true);
+    try {
+      const res = await axios.post(BASEURI, { todo, desc });
+      if (res.data.status === 'success') {
+        // 한 건의 할 일 추가가 성공하면 전체 할 일 목록을 다시 조회하는 것이 아니라
+        // 추가된 한 건의 정보만 state에 추가함
+        let newTodoList = produce(todoList, (draft) => {
+          draft.push({ id: new Date().getTime(), todo, desc, done: false})
+        });    
+        setTodoList(newTodoList)
+        callback();
+      } else {
+        alert('할 일 추가 실패 : ' + res.data.message);
+      }
+    } catch (err) {
+      if ( err instanceof Error ) console.log('할 일 추가 실패 : ' + err.message);
+      else alert('할 일 추가 실패 : ' + err);
+    }
+    setIsLoading(false);
+  }
+
+  // 할 일 한 건을 삭제하는 함수
+  const deleteTodo = async (id: number) => {
+    setIsLoading(true);
+    try {
+      const res = await axios.delete(`${BASEURI}/${id}`);
+      if (res.data.status === 'success') {
+        let index = todoList.findIndex((todo) => todo.id === id)
+        let newTodoList = produce(todoList, (draft) => {
+          draft.splice(index, 1)
+        })
+        setTodoList(newTodoList)        
+      } else {
+        alert('할 일 삭제 실패 : ' + res.data.message);
+      }
+    } catch (err) {
+      if ( err instanceof Error ) alert('할 일 삭제 실패 : ' + err.message);
+      else alert('할 일 삭제 실패 : ' + err)
+    }
+    setIsLoading(false);
+  }
+
+  // 할 일 완료 여부를 토글하는 함수
+  const toggleDone = async (id: number) => {
+    setIsLoading(true);
+    try {
+      let todoItem = todoList.find((todo) => todo.id === id);
+      const res = await axios.put(`${BASEURI}/${id}`, {...todoItem, done: !todoItem?.done })
+      if (res.data.status === 'success') {
+        let index = todoList.findIndex((todo) => todo.id === id)
+        let newTodoList = produce(todoList, (draft) => {
+          draft[index].done = !draft[index].done
+        })
+        setTodoList(newTodoList)
+      } else {
+        alert('완료 토글 실패 : ' + res.data.message)
+      }
+    } catch (err) {
+      if (err instanceof Error) alert('완료 토글 실패 : ' + err.message);
+      else alert('완료 토글 실패 : ' + err)
+    }
+    setIsLoading(false);
+  }
+
+  // 할 일 수정하는 함수
+  // 할 일 수정이 성공하면 마지막 인자로 전달된 callback 함수를 호출함
+  const updateTodo = async ( id: number, todo: string, desc: string, done: boolean, callback: () => void ) => {
+    setIsLoading(true);
+    try {
+      const res = await axios.put(`${BASEURI}/${id}`, { todo, desc, done });
+      if (res.data.success === 'success') {
+        let index = todoList.findIndex((todo) => todo.id === id)
+        let newTodoList = produce(todoList, (draft) => {
+          draft[index] = { ...draft[index], todo, desc, done }
+        })
+        setTodoList(newTodoList);
+        callback();
+      } else {
+        alert('할 일 수정 실패 : ' + res.data.message);
+      }
+    } catch (err) {
+      if (err instanceof Error) alert('할 일 수정 실패 : ' + err.message);
+      else alert('할 일 수정 실패 : ' + err);
+    } 
+    setIsLoading(false);
+  }
+
+  // 상태와 액션을 states, callbacks 객체로 묶어서 한꺼번에 속성 전달!!
+  const callbacks: CallbacksType = { fetchTodoList, addTodo, deleteTodo, toggleDone, updateTodo}
+  const states: StatesType = { todoList, isLoading }
+
+  return <App callbacks={callbacks} states={states} />
+}
+
+export default AppContainer

src/Chapter10/components/Header.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+const Header = () => {
+  let [isNavShow, setIsNavShow] = useState<boolean>(false)
+  return (
+    <nav className="navbar navbar-expand-sm bg-dark navbar-dark">
+      <span className="navbar-brand ps-2">TodoList App</span>
+      <button className="navbar-toggler" type="button"
+      onClick={() => setIsNavShow(!isNavShow)}>
+        <span className="navbar-toggler-icon"></span>
+      </button>
+      <div className={
+        isNavShow ?
+          'collapse navbar-collapse show' :
+          'collapse navbar-collapse'
+      }>
+        <ul className="navbar-nav">
+          <li className="nav-link">
+            <Link className="nav-link" to='/'>
+              Home
+            </Link>
+          </li>
+          <li className="nav-link">
+            <Link className="nav-link" to='/about'>
+              About
+            </Link>
+          </li>
+          <li className="nav-link">
+            <Link className="nav-link" to='/todos'>
+              TodoList
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  )
+}
+
+export default Header

src/Chapter10/components/Layout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router"
+import Header from "./Header"
+
+const Layout = () => {
+  return (
+    <div className="container">
+      <Header />
+      <Outlet />
+    </div>
+  )
+}
+
+export default Layout

src/Chapter10/components/Loading.tsx

@@ -0,0 +1,17 @@
+import { ScaleLoader } from "react-spinners"
+
+const Loading = () => {
+  return (
+    <div className="bg-white w-100 h-100 position-fixed"
+    style={{ top: 0, left: 0, opacity: 0.8}}>
+      <div className="row w-100 h-100 justify-content-center align-items-center">
+        <div className="col-6 text-center">
+          <h3>처리 중</h3>
+          <ScaleLoader height='40px' width='6px' radius='2px' margin='2px' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Loading

src/Chapter10/index.css

@@ -0,0 +1,23 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
+.title {
+  text-align: center;
+  font-weight: bold;
+  font-size: 20pt;
+}
+.todo-done {
+  text-decoration: line-through;
+}
+.container {
+  padding: 10px;
+}
+.panel-borderless {
+  border: 0;
+  box-shadow: none;
+}
+.pointer {
+  cursor: pointer;
+}

src/Chapter10/pages/About.tsx

@@ -0,0 +1,9 @@
+const About = () => {
+  return (
+    <div className="card card-body">
+      <h2>About</h2>
+    </div>
+  )
+}
+
+export default About