From 0c226004842d86bf45dac2f50b1abbacf7b3c44c Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Mon, 16 Sep 2024 17:18:34 +0900
Subject: [PATCH 01/29] =?UTF-8?q?style=20:=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/reset.css | 129 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 public/reset.css

diff --git a/public/reset.css b/public/reset.css
new file mode 100644
index 0000000..a3f7681
--- /dev/null
+++ b/public/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

From f085121b260c904d47a76cac3920c2750acf49a8 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Mon, 16 Sep 2024 17:19:03 +0900
Subject: [PATCH 02/29] =?UTF-8?q?feat=20:=20=EC=8B=9C=EA=B3=84=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8D=BC=EB=84=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Clock.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/components/Clock.js

diff --git a/src/components/Clock.js b/src/components/Clock.js
new file mode 100644
index 0000000..c4fc2ef
--- /dev/null
+++ b/src/components/Clock.js
@@ -0,0 +1,12 @@
+import { useState, useEffect } from 'react';
+
+export default function Clock() {
+  const [time, setTime] = useState(() => new Date());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+  return <h1>{time.toLocaleTimeString()}</h1>;
+}

From 788e4ddc1fe7f2bf77b9e317784444d3ad4a4cc6 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Tue, 17 Sep 2024 11:57:21 +0900
Subject: [PATCH 03/29] =?UTF-8?q?feat=20:=20todo=20=EC=83=9D=EC=84=B1,=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/todo/Todo.js     | 21 ++++++++++++++++++
 src/components/todo/TodoForm.js | 38 +++++++++++++++++++++++++++++++++
 src/components/todo/TodoItem.js | 20 +++++++++++++++++
 src/components/todo/TodoList.js | 26 ++++++++++++++++++++++
 src/hooks/useLocalStorage.js    | 29 +++++++++++++++++++++++++
 5 files changed, 134 insertions(+)
 create mode 100644 src/components/todo/Todo.js
 create mode 100644 src/components/todo/TodoForm.js
 create mode 100644 src/components/todo/TodoItem.js
 create mode 100644 src/components/todo/TodoList.js
 create mode 100644 src/hooks/useLocalStorage.js

diff --git a/src/components/todo/Todo.js b/src/components/todo/Todo.js
new file mode 100644
index 0000000..43e59b8
--- /dev/null
+++ b/src/components/todo/Todo.js
@@ -0,0 +1,21 @@
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+import { useEffect } from 'react';
+import TodoForm from './TodoForm';
+import TodoList from './TodoList';
+
+export default function Todo() {
+  const [todos, setTodos] = useLocalStorage('todos', []);
+
+  useEffect(() => {
+    console.log(todos);
+  }, [todos]);
+  return (
+    <div>
+      <TodoForm setTodos={setTodos} />
+      <TodoList
+        todos={todos}
+        setTodos={setTodos}
+      />
+    </div>
+  );
+}
diff --git a/src/components/todo/TodoForm.js b/src/components/todo/TodoForm.js
new file mode 100644
index 0000000..a4915ac
--- /dev/null
+++ b/src/components/todo/TodoForm.js
@@ -0,0 +1,38 @@
+import { Button } from '../Button';
+import { useState } from 'react';
+
+export default function TodoForm({ setTodos }) {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault(); // form 제출 시 페이지 리로드 방지
+    console.log(inputValue);
+    if (inputValue.trim()) {
+      setTodos((prevTodos) => [
+        ...prevTodos,
+        {
+          id: Date.now(), // 유니크한 ID 생성
+          value: inputValue,
+          completed: false,
+        },
+      ]);
+      setInputValue(''); // 입력 필드 초기화
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        placeholder="할 일 추가"
+        value={inputValue} // inputValue 상태값을 value 속성에 연결
+        onChange={(e) => setInputValue(e.target.value)}
+      />
+      <Button
+        type="submit"
+        value="추가"
+        onClick={handleSubmit}
+      />
+    </form>
+  );
+}
diff --git a/src/components/todo/TodoItem.js b/src/components/todo/TodoItem.js
new file mode 100644
index 0000000..588fbdd
--- /dev/null
+++ b/src/components/todo/TodoItem.js
@@ -0,0 +1,20 @@
+import { Button } from '../Button';
+
+export function TodoItem({ id, value, isComplete = false, onEdit, onDelete }) {
+  return (
+    <li id={id}>
+      {isComplete ? <span>end</span> : <span>todo</span>}
+      {value}
+      <Button
+        value="수정"
+        type="button"
+        onClick={onEdit} // 수정 버튼 클릭 시 동작할 함수
+      />
+      <Button
+        value="삭제"
+        type="button"
+        onClick={onDelete} // 삭제 버튼 클릭 시 동작할 함수
+      />
+    </li>
+  );
+}
diff --git a/src/components/todo/TodoList.js b/src/components/todo/TodoList.js
new file mode 100644
index 0000000..c60b69c
--- /dev/null
+++ b/src/components/todo/TodoList.js
@@ -0,0 +1,26 @@
+import { TodoItem } from './TodoItem';
+
+export default function TodoList({ todos, setTodos }) {
+  // 투두 수정
+  const handleEdit = (id) => {
+    console.log(`Edit todo with id: ${id}`);
+  };
+
+  // 투두 삭제
+  const handleDelete = (id) => {
+    setTodos(todos.filter((todo) => todo.id !== id));
+  };
+  return (
+    <div>
+      <ul>
+        {todos.map((todo) => (
+          <TodoItem
+            {...todo}
+            onEdit={() => handleEdit(todo.id)}
+            onDelete={() => handleDelete(todo.id)}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js
new file mode 100644
index 0000000..8b2f8bc
--- /dev/null
+++ b/src/hooks/useLocalStorage.js
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+// localStorage 관리하는 커스텀 훅
+export function useLocalStorage(key, initialValue) {
+  // localStorage에서 값을 가져오거나 초기 값을 설정
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error('Error reading from localStorage', error);
+      return initialValue;
+    }
+  });
+
+  // localStorage에 값을 설정하는 함수
+  const setValue = (value) => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error('Error setting localStorage', error);
+    }
+  };
+
+  return [storedValue, setValue];
+}

From e3bb0f27586e3dbbeaab2952870fc6d6ef47444d Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Wed, 18 Sep 2024 23:10:11 +0900
Subject: [PATCH 04/29] =?UTF-8?q?style=20:=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?UTF-8?q?=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 34 +++++++++++++++++++++++++++++-----
 public/reset.css  |  5 +++++
 src/App.css       | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 src/App.css

diff --git a/public/index.html b/public/index.html
index aa069f2..6d54e15 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,19 +2,43 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <script
+      type="module"
+      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
+    ></script>
+    <script
+      nomodule
+      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
+    ></script>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
+    <meta
+      name="theme-color"
+      content="#000000"
+    />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      rel="apple-touch-icon"
+      href="%PUBLIC_URL%/logo192.png"
+    />
+    <link
+      rel="stylesheet"
+      href="%PUBLIC_URL%/reset.css"
+    />
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="manifest"
+      href="%PUBLIC_URL%/manifest.json"
+    />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/public/reset.css b/public/reset.css
index a3f7681..e29017d 100644
--- a/public/reset.css
+++ b/public/reset.css
@@ -107,6 +107,8 @@ section {
 }
 body {
   line-height: 1;
+  background-color: rgb(41, 42, 52);
+  color: whitesmoke;
 }
 ol,
 ul {
@@ -127,3 +129,6 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+button {
+  all: unset;
+}
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..5fd6faa
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,47 @@
+nav {
+  display: flex;
+  padding: 0.5rem 1rem;
+  background-color: rgb(12, 9, 45);
+}
+
+main {
+  width: 50vw;
+  margin: 0 auto;
+  text-align: center;
+}
+
+form {
+  border: 16px;
+  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 14px;
+  min-height: 48px;
+  min-width: 320px;
+  padding: 0.5rem 1rem;
+  gap: 8px;
+  border-radius: 12px;
+  color: rgb(150, 130, 224);
+  background-color: rgb(37, 37, 37);
+
+  input {
+    flex-grow: 1;
+    color: white;
+    margin-right: auto;
+    background-color: rgb(37, 37, 37);
+    border: none;
+    outline: none;
+    font-size: 16px;
+  }
+  input::placeholder {
+    color: rgb(150, 130, 224);
+  }
+}
+
+ul {
+  /* background-color: aliceblue; */
+  display: flex;
+  flex-direction: column-reverse;
+  list-style-type: none;
+  padding-inline-start: 0;
+}

From 6c7139d37c0d34edf243963d345bd47da480e744 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Thu, 19 Sep 2024 18:59:11 +0900
Subject: [PATCH 05/29] =?UTF-8?q?style=20:=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button.js        | 51 +++++++++++++++++++
 src/components/todo/TodoItem.js | 87 +++++++++++++++++++++++++++------
 2 files changed, 122 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Button.js

diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 0000000..19bc707
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+export function Button({ type, children, onClick }) {
+  return (
+    <MainButton
+      onClick={onClick}
+      type={type}
+    >
+      {children} {/* children을 버튼 내부의 텍스트로 표시 */}
+    </MainButton>
+  );
+}
+
+// MainButton : 메인 버튼
+const MainButton = styled.button`
+  font-size: 1em;
+  margin: 0.5em;
+  padding: 0.5em;
+  border-radius: 3px;
+  cursor: pointer;
+  background-color: transparent;
+  // text-align: center;
+  color: rgb(150, 130, 224);
+  border: 2px solid rgb(150, 130, 224);
+  align-items: center;
+  text-wrap: nowrap;
+`;
+
+// IconButton : icon 감싸는 버튼
+export const IconButton = styled(MainButton)`
+  border-radius: 1rem;
+  width: 1rem;
+  height: 1rem;
+`;
+
+// BlueButton : 파란 버튼
+export const BlueButton = styled(MainButton)`
+  border-radius: 1rem;
+  color: rgb(34, 209, 142);
+  border-color: rgb(34, 209, 142);
+`;
+
+// IsCompletedButton : 완료 토글 버튼
+export const IsCompletedButton = styled(MainButton)`
+  border-radius: 1rem;
+  width: 0.5em;
+  height: 0.5em;
+  color: ${(props) => (props.$isCompleted === 'true' ? 'green' : 'yellow')};
+  border-color: ${(props) =>
+    props.$isCompleted === 'true' ? 'green' : 'yellow'};
+`;
diff --git a/src/components/todo/TodoItem.js b/src/components/todo/TodoItem.js
index 588fbdd..7afd061 100644
--- a/src/components/todo/TodoItem.js
+++ b/src/components/todo/TodoItem.js
@@ -1,20 +1,75 @@
-import { Button } from '../Button';
+import { IconButton, BlueButton, IsCompletedButton } from '../Button';
+import styled from 'styled-components';
 
-export function TodoItem({ id, value, isComplete = false, onEdit, onDelete }) {
+import { FaTrash } from 'react-icons/fa';
+import { MdEdit } from 'react-icons/md';
+
+export function TodoItem({
+  id,
+  value,
+  isCompleted = false,
+  onEdit,
+  onDelete,
+  toggleComplete,
+}) {
   return (
-    <li id={id}>
-      {isComplete ? <span>end</span> : <span>todo</span>}
-      {value}
-      <Button
-        value="수정"
-        type="button"
-        onClick={onEdit} // 수정 버튼 클릭 시 동작할 함수
-      />
-      <Button
-        value="삭제"
-        type="button"
-        onClick={onDelete} // 삭제 버튼 클릭 시 동작할 함수
-      />
-    </li>
+    <StyledItem id={id}>
+      <div className="todo">
+        {isCompleted ? (
+          <IsCompletedButton
+            type="button"
+            onClick={toggleComplete} // 완료로 상태 변경
+            $isCompleted="true"
+          ></IsCompletedButton>
+        ) : (
+          <IsCompletedButton
+            type="button"
+            onClick={toggleComplete} // 완료 취소
+            $isCompleted="false"
+          ></IsCompletedButton>
+        )}
+        <span>{value}</span>
+      </div>
+      <div className="button-group">
+        <IconButton
+          type="button"
+          onClick={onEdit}
+        >
+          <MdEdit />
+        </IconButton>
+        <BlueButton
+          type="button"
+          onClick={onDelete}
+        >
+          <FaTrash />
+        </BlueButton>
+      </div>
+    </StyledItem>
   );
 }
+
+const StyledItem = styled.li`
+  margin-top: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 14px;
+  padding: 1rem;
+  border-radius: 12px;
+  background-color: rgb(37, 37, 37);
+  justify-content: space-between;
+
+  .todo {
+    display: flex;
+    gap: 0.5rem;
+    margin-right: auto;
+    span {
+      // padding: 1rem;
+      margin: 1rem;
+    }
+  }
+  .button-group {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+`;

From 0508919a8e874413e3a41438cf1805a0e3d04319 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 02:38:19 +0900
Subject: [PATCH 06/29] =?UTF-8?q?refactor=20:=20=20=EB=B3=80=EC=88=98,=20?=
 =?UTF-8?q?=EA=B8=B0=ED=98=B8=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/todo/TodoForm.js | 7 ++++---
 src/index.js                    | 8 ++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/todo/TodoForm.js b/src/components/todo/TodoForm.js
index a4915ac..83d678f 100644
--- a/src/components/todo/TodoForm.js
+++ b/src/components/todo/TodoForm.js
@@ -13,7 +13,7 @@ export default function TodoForm({ setTodos }) {
         {
           id: Date.now(), // 유니크한 ID 생성
           value: inputValue,
-          completed: false,
+          isCompleted: false,
         },
       ]);
       setInputValue(''); // 입력 필드 초기화
@@ -30,9 +30,10 @@ export default function TodoForm({ setTodos }) {
       />
       <Button
         type="submit"
-        value="추가"
         onClick={handleSubmit}
-      />
+      >
+        추가
+      </Button>
     </form>
   );
 }
diff --git a/src/index.js b/src/index.js
index 8db5acb..593edf1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />

From 0e1d06625b9de8b5a73d9467d2b5146d1faf1ba8 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 02:39:07 +0900
Subject: [PATCH 07/29] =?UTF-8?q?feat=20:=20=EB=A9=94=EC=9D=B8=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=ED=94=84=EB=A0=88=EC=9E=84=20=EA=B5=AC=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 777b355..37b5eb5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,18 @@
+import Clock from './components/Clock';
+import Todo from './components/todo/Todo';
+
+import './App.css';
+
 function App() {
   return (
     <div className="App">
-      <h1>🐶CEOS 20기 프론트엔드 최고🐶</h1>
+      <nav>
+        todo
+        <Clock />
+      </nav>
+      <main>
+        <Todo />
+      </main>
     </div>
   );
 }

From 8da58e96ba1078b093766ba7d0a553e6329e6986 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 02:39:45 +0900
Subject: [PATCH 08/29] feat : Add progress bar

---
 src/components/todo/Todo.js | 50 +++++++++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/components/todo/Todo.js b/src/components/todo/Todo.js
index 43e59b8..cbae38d 100644
--- a/src/components/todo/Todo.js
+++ b/src/components/todo/Todo.js
@@ -1,21 +1,55 @@
 import { useLocalStorage } from '../../hooks/useLocalStorage';
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
+import styled from 'styled-components';
 import TodoForm from './TodoForm';
 import TodoList from './TodoList';
 
 export default function Todo() {
   const [todos, setTodos] = useLocalStorage('todos', []);
 
+  // 완료된 할 일의 개수
+  const completedCount = useMemo(
+    () => todos.filter((todo) => todo.isCompleted).length,
+    [todos]
+  );
+
+  // 진행률 계산 (완료된 할 일의 수 / 전체 할 일 수)
+  const progress = todos.length > 0 ? (completedCount / todos.length) * 100 : 0;
+
   useEffect(() => {
     console.log(todos);
-  }, [todos]);
+  });
   return (
-    <div>
+    <>
       <TodoForm setTodos={setTodos} />
-      <TodoList
-        todos={todos}
-        setTodos={setTodos}
-      />
-    </div>
+      <div>
+        <label htmlFor="todoProgress">진행률: {Math.round(progress)}%</label>
+        <progress
+          id="todoProgress"
+          max={todos.length} // 전체 할 일 수
+          value={completedCount} // 완료된 할 일 수
+        >
+          {Math.round(progress)}%
+        </progress>
+      </div>
+
+      <TodoContainer>
+        <TodoList
+          title="TODO"
+          todos={todos.filter((todo) => !todo.isCompleted)}
+          setTodos={setTodos}
+        />
+        <TodoList
+          title="완료"
+          todos={todos.filter((todo) => todo.isCompleted)}
+          setTodos={setTodos}
+        />
+      </TodoContainer>
+    </>
   );
 }
+
+const TodoContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+`;

From 309e75e7a0572003dadd115000249055c5d9a095 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 02:40:42 +0900
Subject: [PATCH 09/29] =?UTF-8?q?feat=20:=20Add=20toggleComplete=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/todo/TodoList.js | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/todo/TodoList.js b/src/components/todo/TodoList.js
index c60b69c..ed35071 100644
--- a/src/components/todo/TodoList.js
+++ b/src/components/todo/TodoList.js
@@ -1,23 +1,41 @@
+import { useCallback, useMemo } from 'react';
 import { TodoItem } from './TodoItem';
 
-export default function TodoList({ todos, setTodos }) {
+export default function TodoList({ title, todos, setTodos }) {
+  // 투두 토글 함수 :
+  const toggleComplete = useCallback(
+    (id) => {
+      setTodos((prevTodos) =>
+        prevTodos.map((todo) =>
+          todo.id === id ? { ...todo, isCompleted: !todo.isCompleted } : todo
+        )
+      );
+    },
+    [setTodos]
+  );
+
   // 투두 수정
   const handleEdit = (id) => {
     console.log(`Edit todo with id: ${id}`);
   };
 
   // 투두 삭제
-  const handleDelete = (id) => {
-    setTodos(todos.filter((todo) => todo.id !== id));
-  };
+  const handleDelete = useCallback(
+    (id) => {
+      setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
+    },
+    [setTodos]
+  );
   return (
     <div>
+      <div>{title}</div>
       <ul>
         {todos.map((todo) => (
           <TodoItem
             {...todo}
             onEdit={() => handleEdit(todo.id)}
             onDelete={() => handleDelete(todo.id)}
+            toggleComplete={() => toggleComplete(todo.id)}
           />
         ))}
       </ul>

From 90ae73913f522595a61695c5b5c45b1b81e9d938 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:31:39 +0900
Subject: [PATCH 10/29] build : add react-icon, styled-components

---
 package-lock.json | 249 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   3 +
 2 files changed, 252 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 97dcc3a..00914b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,15 @@
       "name": "react-todo-20th",
       "version": "0.1.0",
       "dependencies": {
+        "@react-icons/all-files": "^4.1.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
         "react-scripts": "5.0.1",
+        "styled-components": "^6.1.13",
         "web-vitals": "^2.1.4"
       }
     },
@@ -2280,6 +2283,27 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "license": "MIT"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3301,6 +3325,15 @@
         }
       }
     },
+    "node_modules/@react-icons/all-files": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
+      "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4465,6 +4498,12 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+      "license": "MIT"
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -5931,6 +5970,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6358,6 +6406,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -6499,6 +6556,17 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -14946,6 +15014,15 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15823,6 +15900,12 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -16382,6 +16465,68 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "license": "0BSD"
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16397,6 +16542,12 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -19681,6 +19832,24 @@
       "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
       "requires": {}
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -20405,6 +20574,12 @@
         "source-map": "^0.7.3"
       }
     },
+    "@react-icons/all-files": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@react-icons/all-files/-/all-files-4.1.0.tgz",
+      "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==",
+      "requires": {}
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -21307,6 +21482,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -22367,6 +22547,11 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
+    "camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -22682,6 +22867,11 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
     "css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -22754,6 +22944,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -28623,6 +28823,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -29258,6 +29464,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -29678,6 +29889,39 @@
       "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==",
       "requires": {}
     },
+    "styled-components": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
+      "requires": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.38",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+          "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+          "requires": {
+            "nanoid": "^3.3.7",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.2.0"
+          }
+        },
+        "tslib": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+        }
+      }
+    },
     "stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -29687,6 +29931,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
+    },
     "sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
diff --git a/package.json b/package.json
index af506b2..747038e 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-icons/all-files": "^4.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

From 2704357b8e7883dbe68a3c811011b242cfaa3bed Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:36:07 +0900
Subject: [PATCH 11/29] =?UTF-8?q?style=20:=20=EC=A0=84=EC=97=AD=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/reset.css |  2 +-
 src/App.css      | 22 +++++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/public/reset.css b/public/reset.css
index e29017d..b2a087b 100644
--- a/public/reset.css
+++ b/public/reset.css
@@ -107,7 +107,7 @@ section {
 }
 body {
   line-height: 1;
-  background-color: rgb(41, 42, 52);
+  background-color: #252423;
   color: whitesmoke;
 }
 ol,
diff --git a/src/App.css b/src/App.css
index 5fd6faa..b948041 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,13 +1,25 @@
+:root {
+  --main-color: #788bff;
+  --sub-color: #484644;
+}
+
 nav {
   display: flex;
-  padding: 0.5rem 1rem;
-  background-color: rgb(12, 9, 45);
+  padding: 0.7rem 2.5rem;
+  background-color: #1b1a19;
+  font-size: 1.2rem;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--sub-color);
 }
 
 main {
-  width: 50vw;
+  width: 920px;
+  min-height: 100vh;
+
   margin: 0 auto;
   text-align: center;
+  background-color: rgb(25, 25, 25);
+  padding: 2rem;
 }
 
 form {
@@ -21,7 +33,7 @@ form {
   padding: 0.5rem 1rem;
   gap: 8px;
   border-radius: 12px;
-  color: rgb(150, 130, 224);
+  color: var(--main-color);
   background-color: rgb(37, 37, 37);
 
   input {
@@ -34,7 +46,7 @@ form {
     font-size: 16px;
   }
   input::placeholder {
-    color: rgb(150, 130, 224);
+    color: var(--main-color);
   }
 }
 

From 6991533b63593430ff5a2c9447a333c742c6644a Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:37:22 +0900
Subject: [PATCH 12/29] feat : add progressbar

---
 src/components/ProgressBar.js | 84 +++++++++++++++++++++++++++++++++++
 src/components/todo/Todo.js   | 26 +++--------
 2 files changed, 89 insertions(+), 21 deletions(-)
 create mode 100644 src/components/ProgressBar.js

diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
new file mode 100644
index 0000000..f708ed7
--- /dev/null
+++ b/src/components/ProgressBar.js
@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import styled from 'styled-components';
+
+import Clock from './Clock';
+
+export default function ProgressBar({ todos }) {
+  // 전체 할 일
+  const totalTodo = todos.length;
+
+  // 완료된 할 일의 개수
+  const completedCount = useMemo(
+    () => todos.filter((todo) => todo.isCompleted).length,
+    [todos]
+  );
+
+  // 진행률 계산 (완료된 할 일의 수 / 전체 할 일 수)
+  const progress = todos.length > 0 ? (completedCount / totalTodo) * 100 : 0;
+
+  return (
+    <StyledProgress>
+      <div className="todayInfo">
+        <p>오늘 할 일</p>
+        <Clock />
+      </div>
+      <div className="progressInfo">
+        <label htmlFor="todoProgress">진행률: {Math.round(progress)}%</label>
+        <progress
+          id="todoProgress"
+          max={totalTodo} // 전체 할 일 수
+          value={completedCount} // 완료된 할 일 수
+        >
+          {Math.round(progress)}%
+        </progress>
+      </div>
+    </StyledProgress>
+  );
+}
+
+const StyledProgress = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin: 1rem 0;
+  .todayInfo {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    & > p {
+      font-size: 1.5rem;
+      margin-bottom: 0.7rem;
+    }
+  }
+  .progressInfo {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  label {
+    display: block;
+    text-align: right;
+    margin-bottom: 0.5rem;
+    border-radius: 10px;
+  }
+
+  progress {
+    width: 300px;
+    border-radius: 10px;
+    padding: 0.2rem;
+    overflow: hidden;
+    background-color: #3c3c3c;
+
+    //
+    &::-webkit-progress-bar {
+      background-color: #3c3c3c;
+      border-radius: 10px;
+    }
+
+    &::-webkit-progress-value {
+      background-color: var(--main-color);
+      border-radius: 10px 0 0 10px;
+    }
+  }
+`;
diff --git a/src/components/todo/Todo.js b/src/components/todo/Todo.js
index cbae38d..08182d4 100644
--- a/src/components/todo/Todo.js
+++ b/src/components/todo/Todo.js
@@ -3,35 +3,18 @@ import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import TodoForm from './TodoForm';
 import TodoList from './TodoList';
+import ProgressBar from '../ProgressBar';
 
 export default function Todo() {
   const [todos, setTodos] = useLocalStorage('todos', []);
 
-  // 완료된 할 일의 개수
-  const completedCount = useMemo(
-    () => todos.filter((todo) => todo.isCompleted).length,
-    [todos]
-  );
-
-  // 진행률 계산 (완료된 할 일의 수 / 전체 할 일 수)
-  const progress = todos.length > 0 ? (completedCount / todos.length) * 100 : 0;
-
   useEffect(() => {
     console.log(todos);
   });
   return (
     <>
+      <ProgressBar todos={todos} />
       <TodoForm setTodos={setTodos} />
-      <div>
-        <label htmlFor="todoProgress">진행률: {Math.round(progress)}%</label>
-        <progress
-          id="todoProgress"
-          max={todos.length} // 전체 할 일 수
-          value={completedCount} // 완료된 할 일 수
-        >
-          {Math.round(progress)}%
-        </progress>
-      </div>
 
       <TodoContainer>
         <TodoList
@@ -40,7 +23,7 @@ export default function Todo() {
           setTodos={setTodos}
         />
         <TodoList
-          title="완료"
+          title="COMPLETED"
           todos={todos.filter((todo) => todo.isCompleted)}
           setTodos={setTodos}
         />
@@ -50,6 +33,7 @@ export default function Todo() {
 }
 
 const TodoContainer = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 1rem;
 `;

From c9c04c5e52ab674dfaee29dcf68ba70806f00391 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:40:14 +0900
Subject: [PATCH 13/29] =?UTF-8?q?chore=20:=20edit=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/todo/TodoItem.js | 50 +++++++++++++++------------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/components/todo/TodoItem.js b/src/components/todo/TodoItem.js
index 7afd061..8531a7a 100644
--- a/src/components/todo/TodoItem.js
+++ b/src/components/todo/TodoItem.js
@@ -2,41 +2,36 @@ import { IconButton, BlueButton, IsCompletedButton } from '../Button';
 import styled from 'styled-components';
 
 import { FaTrash } from 'react-icons/fa';
-import { MdEdit } from 'react-icons/md';
-
+import { HiCheck } from 'react-icons/hi';
+import { RiCheckboxBlankCircleFill } from 'react-icons/ri';
+import { IoCheckmarkCircle } from 'react-icons/io5';
 export function TodoItem({
   id,
   value,
   isCompleted = false,
-  onEdit,
+
   onDelete,
   toggleComplete,
 }) {
   return (
     <StyledItem id={id}>
-      <div className="todo">
-        {isCompleted ? (
-          <IsCompletedButton
-            type="button"
-            onClick={toggleComplete} // 완료로 상태 변경
-            $isCompleted="true"
-          ></IsCompletedButton>
-        ) : (
-          <IsCompletedButton
-            type="button"
-            onClick={toggleComplete} // 완료 취소
-            $isCompleted="false"
-          ></IsCompletedButton>
-        )}
-        <span>{value}</span>
-      </div>
-      <div className="button-group">
-        <IconButton
+      {isCompleted ? (
+        <IsCompletedButton
           type="button"
-          onClick={onEdit}
+          onClick={toggleComplete} // 완료로 상태 변경
+          $isCompleted="true"
         >
-          <MdEdit />
-        </IconButton>
+          <IoCheckmarkCircle />
+        </IsCompletedButton>
+      ) : (
+        <IsCompletedButton
+          type="button"
+          onClick={toggleComplete} // 완료 취소
+          $isCompleted="false"
+        ></IsCompletedButton>
+      )}
+      <div className="todo">{value}</div>
+      <div className="button-group">
         <BlueButton
           type="button"
           onClick={onDelete}
@@ -51,7 +46,8 @@ export function TodoItem({
 const StyledItem = styled.li`
   margin-top: 12px;
   display: flex;
-  flex-direction: row;
+  // min-width: 0; /* 긴 텍스트로 인해 박스가 커지는 문제를 방지 */
+  // word-wrap: break-word; /* 텍스트가 넘치지 않도록 줄바꿈 */
   align-items: center;
   font-size: 14px;
   padding: 1rem;
@@ -60,11 +56,9 @@ const StyledItem = styled.li`
   justify-content: space-between;
 
   .todo {
-    display: flex;
-    gap: 0.5rem;
     margin-right: auto;
+    justify-content: center;
     span {
-      // padding: 1rem;
       margin: 1rem;
     }
   }

From 6e7d5049cedec5801c4f244e73f7d6eb7d2ee1ca Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:41:26 +0900
Subject: [PATCH 14/29] =?UTF-8?q?chore=20:=20edit=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/todo/TodoList.js | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/todo/TodoList.js b/src/components/todo/TodoList.js
index ed35071..0d57c11 100644
--- a/src/components/todo/TodoList.js
+++ b/src/components/todo/TodoList.js
@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { TodoItem } from './TodoItem';
+import styled from 'styled-components';
 
 export default function TodoList({ title, todos, setTodos }) {
   // 투두 토글 함수 :
@@ -14,11 +15,6 @@ export default function TodoList({ title, todos, setTodos }) {
     [setTodos]
   );
 
-  // 투두 수정
-  const handleEdit = (id) => {
-    console.log(`Edit todo with id: ${id}`);
-  };
-
   // 투두 삭제
   const handleDelete = useCallback(
     (id) => {
@@ -28,12 +24,15 @@ export default function TodoList({ title, todos, setTodos }) {
   );
   return (
     <div>
-      <div>{title}</div>
+      <StyledListTitle>
+        <span>{title}</span>
+        <span className="count">{todos.length}</span>
+      </StyledListTitle>
       <ul>
         {todos.map((todo) => (
           <TodoItem
             {...todo}
-            onEdit={() => handleEdit(todo.id)}
+            // onEdit={() => handleEdit(todo.id)}
             onDelete={() => handleDelete(todo.id)}
             toggleComplete={() => toggleComplete(todo.id)}
           />
@@ -42,3 +41,15 @@ export default function TodoList({ title, todos, setTodos }) {
     </div>
   );
 }
+
+const StyledListTitle = styled.div`
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+  padding: 1.5rem 1.5rem 0.5rem 1.5rem;
+  border-bottom: 1px solid var(--sub-color);
+  .count {
+    font-size: 1.5rem;
+    color: var(--main-color);
+  }
+`;

From 40f9c7207addaf90f53573ee78eccd66a5568cfd Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:42:07 +0900
Subject: [PATCH 15/29] =?UTF-8?q?style=20:=20nav=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 37b5eb5..c118135 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import Clock from './components/Clock';
 import Todo from './components/todo/Todo';
+import { IoCheckmarkSharp } from 'react-icons/io5';
 
 import './App.css';
 
@@ -7,8 +8,8 @@ function App() {
   return (
     <div className="App">
       <nav>
-        todo
-        <Clock />
+        <IoCheckmarkSharp />
+        TO DO
       </nav>
       <main>
         <Todo />

From 10fb07828037309ff139e0c8f9e6865321f1244a Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:46:16 +0900
Subject: [PATCH 16/29] =?UTF-8?q?refactor(button)=20:=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button.js | 35 +++++++++++++++--------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 19bc707..2cd1e4e 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -19,33 +19,28 @@ const MainButton = styled.button`
   border-radius: 3px;
   cursor: pointer;
   background-color: transparent;
-  // text-align: center;
-  color: rgb(150, 130, 224);
-  border: 2px solid rgb(150, 130, 224);
+  color: var(--main-color);
+  border: 2px solid var(--main-color);
   align-items: center;
   text-wrap: nowrap;
 `;
 
-// IconButton : icon 감싸는 버튼
-export const IconButton = styled(MainButton)`
+// DeleteButton : 삭제 버튼
+export const DeleteButton = styled(MainButton)`
   border-radius: 1rem;
-  width: 1rem;
-  height: 1rem;
-`;
-
-// BlueButton : 파란 버튼
-export const BlueButton = styled(MainButton)`
-  border-radius: 1rem;
-  color: rgb(34, 209, 142);
-  border-color: rgb(34, 209, 142);
+  color: var(--main-color);
+  border-color: var(--main-color);
 `;
 
 // IsCompletedButton : 완료 토글 버튼
 export const IsCompletedButton = styled(MainButton)`
-  border-radius: 1rem;
-  width: 0.5em;
-  height: 0.5em;
-  color: ${(props) => (props.$isCompleted === 'true' ? 'green' : 'yellow')};
-  border-color: ${(props) =>
-    props.$isCompleted === 'true' ? 'green' : 'yellow'};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  font-size: 1.5em;
+  ${(props) =>
+    props.$isCompleted === 'true' &&
+    `padding: 0;
+      `}
 `;

From cbf5d174952c3f455467669b8f546a83c3911002 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Fri, 20 Sep 2024 15:46:29 +0900
Subject: [PATCH 17/29] =?UTF-8?q?chore=20:=20=EB=82=A0=EC=A7=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Clock.js | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/Clock.js b/src/components/Clock.js
index c4fc2ef..ecb4ff1 100644
--- a/src/components/Clock.js
+++ b/src/components/Clock.js
@@ -1,12 +1,46 @@
 import { useState, useEffect } from 'react';
+import styled from 'styled-components';
 
+const days = [
+  '일요일',
+  '월요일',
+  '화요일',
+  '수요일',
+  '목요일',
+  '금요일',
+  '토요일',
+];
 export default function Clock() {
   const [time, setTime] = useState(() => new Date());
+
+  // 날짜 세팅하기
+  const date = new Date();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const getDay = days[date.getDay()];
+
   useEffect(() => {
     const id = setInterval(() => {
       setTime(new Date());
     }, 1000);
     return () => clearInterval(id);
   }, []);
-  return <h1>{time.toLocaleTimeString()}</h1>;
+
+  return (
+    <StyledClock>
+      <p className="date">
+        {month}월 {day}일 {getDay}
+      </p>
+      <p>{time.toLocaleTimeString()}</p>
+    </StyledClock>
+  );
 }
+
+const StyledClock = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  font-size: 0.7rem;
+  color: rgb(220, 220, 220);
+`;

From 89cae850356c3e8eec0eb52d1fa29d1eb739d274 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Sat, 21 Sep 2024 19:53:16 +0900
Subject: [PATCH 18/29] =?UTF-8?q?chore(button)=20:=20=EC=BB=B4=ED=8D=BC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/todo/TodoItem.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/todo/TodoItem.js b/src/components/todo/TodoItem.js
index 8531a7a..84b4849 100644
--- a/src/components/todo/TodoItem.js
+++ b/src/components/todo/TodoItem.js
@@ -1,9 +1,7 @@
-import { IconButton, BlueButton, IsCompletedButton } from '../Button';
+import { DeleteButton, IsCompletedButton } from '../Button';
 import styled from 'styled-components';
 
 import { FaTrash } from 'react-icons/fa';
-import { HiCheck } from 'react-icons/hi';
-import { RiCheckboxBlankCircleFill } from 'react-icons/ri';
 import { IoCheckmarkCircle } from 'react-icons/io5';
 export function TodoItem({
   id,
@@ -32,12 +30,12 @@ export function TodoItem({
       )}
       <div className="todo">{value}</div>
       <div className="button-group">
-        <BlueButton
+        <DeleteButton
           type="button"
           onClick={onDelete}
         >
           <FaTrash />
-        </BlueButton>
+        </DeleteButton>
       </div>
     </StyledItem>
   );

From b332cda5a5062f434aae810a4fcb57672f18aa2e Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Sat, 21 Sep 2024 22:49:46 +0900
Subject: [PATCH 19/29] =?UTF-8?q?docs=20:=20=EC=A3=BC=EC=84=9D=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button.js        |  2 +-
 src/components/Clock.js         | 14 +++++++-------
 src/components/ProgressBar.js   | 10 +++-------
 src/components/todo/TodoList.js | 15 +++++++++++----
 src/hooks/useLocalStorage.js    | 10 +++++-----
 5 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 2cd1e4e..4f470df 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -41,6 +41,6 @@ export const IsCompletedButton = styled(MainButton)`
   font-size: 1.5em;
   ${(props) =>
     props.$isCompleted === 'true' &&
-    `padding: 0;
+    `padding: 0; /* 아이콘이 들어가려면 패딩 값이 없어야 함 */
       `}
 `;
diff --git a/src/components/Clock.js b/src/components/Clock.js
index ecb4ff1..e28889c 100644
--- a/src/components/Clock.js
+++ b/src/components/Clock.js
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
+// 날짜
 const days = [
   '일요일',
   '월요일',
@@ -10,15 +11,15 @@ const days = [
   '금요일',
   '토요일',
 ];
+const date = new Date();
+const month = date.getMonth() + 1;
+const day = date.getDate();
+const getDay = days[date.getDay()];
+
+// Clock : 날짜 + 시간
 export default function Clock() {
   const [time, setTime] = useState(() => new Date());
 
-  // 날짜 세팅하기
-  const date = new Date();
-  const month = date.getMonth() + 1;
-  const day = date.getDate();
-  const getDay = days[date.getDay()];
-
   useEffect(() => {
     const id = setInterval(() => {
       setTime(new Date());
@@ -40,7 +41,6 @@ const StyledClock = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-
   font-size: 0.7rem;
   color: rgb(220, 220, 220);
 `;
diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
index f708ed7..0697a3d 100644
--- a/src/components/ProgressBar.js
+++ b/src/components/ProgressBar.js
@@ -1,17 +1,13 @@
-import { useMemo } from 'react';
 import styled from 'styled-components';
-
 import Clock from './Clock';
 
+// ProgressBar : 오늘 정보 + 할 일 진척도
 export default function ProgressBar({ todos }) {
   // 전체 할 일
   const totalTodo = todos.length;
 
   // 완료된 할 일의 개수
-  const completedCount = useMemo(
-    () => todos.filter((todo) => todo.isCompleted).length,
-    [todos]
-  );
+  const completedCount = todos.filter((todo) => todo.isCompleted).length;
 
   // 진행률 계산 (완료된 할 일의 수 / 전체 할 일 수)
   const progress = todos.length > 0 ? (completedCount / totalTodo) * 100 : 0;
@@ -70,7 +66,7 @@ const StyledProgress = styled.div`
     overflow: hidden;
     background-color: #3c3c3c;
 
-    //
+    // progressbar 내부 디자인
     &::-webkit-progress-bar {
       background-color: #3c3c3c;
       border-radius: 10px;
diff --git a/src/components/todo/TodoList.js b/src/components/todo/TodoList.js
index 0d57c11..54e370e 100644
--- a/src/components/todo/TodoList.js
+++ b/src/components/todo/TodoList.js
@@ -1,9 +1,10 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { TodoItem } from './TodoItem';
 import styled from 'styled-components';
 
+// 할 일 집합
 export default function TodoList({ title, todos, setTodos }) {
-  // 투두 토글 함수 :
+  // 할 일 토글 함수
   const toggleComplete = useCallback(
     (id) => {
       setTodos((prevTodos) =>
@@ -15,13 +16,14 @@ export default function TodoList({ title, todos, setTodos }) {
     [setTodos]
   );
 
-  // 투두 삭제
+  // 할 일 삭제
   const handleDelete = useCallback(
     (id) => {
       setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
     },
     [setTodos]
   );
+
   return (
     <div>
       <StyledListTitle>
@@ -32,7 +34,6 @@ export default function TodoList({ title, todos, setTodos }) {
         {todos.map((todo) => (
           <TodoItem
             {...todo}
-            // onEdit={() => handleEdit(todo.id)}
             onDelete={() => handleDelete(todo.id)}
             toggleComplete={() => toggleComplete(todo.id)}
           />
@@ -52,4 +53,10 @@ const StyledListTitle = styled.div`
     font-size: 1.5rem;
     color: var(--main-color);
   }
+  ul {
+    display: flex;
+    flex-direction: column-reverse;
+    list-style-type: none;
+    padding-inline-start: 0;
+  }
 `;
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js
index 8b2f8bc..76b88fc 100644
--- a/src/hooks/useLocalStorage.js
+++ b/src/hooks/useLocalStorage.js
@@ -1,11 +1,11 @@
 import { useState } from 'react';
 
-// localStorage 관리하는 커스텀 훅
+// useLocalStorage : localStorage 관리하는 커스텀 훅
 export function useLocalStorage(key, initialValue) {
   // localStorage에서 값을 가져오거나 초기 값을 설정
   const [storedValue, setStoredValue] = useState(() => {
     try {
-      const item = window.localStorage.getItem(key);
+      const item = window.localStorage.getItem(key); // key에 해당하는 놈들 가져옴
       return item ? JSON.parse(item) : initialValue;
     } catch (error) {
       console.error('Error reading from localStorage', error);
@@ -13,13 +13,13 @@ export function useLocalStorage(key, initialValue) {
     }
   });
 
-  // localStorage에 값을 설정하는 함수
+  // setValue : localStorage에 값을 설정하는 함수
   const setValue = (value) => {
     try {
       const valueToStore =
-        value instanceof Function ? value(storedValue) : value;
+        value instanceof Function ? value(storedValue) : value; // value가 함수인 경우에 실행해주려구
       setStoredValue(valueToStore);
-      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      window.localStorage.setItem(key, JSON.stringify(valueToStore)); // 다시 스토리지에 저장
     } catch (error) {
       console.error('Error setting localStorage', error);
     }

From aaa2602577f1e53730fa6a1aa155218e40f33d56 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Sat, 21 Sep 2024 22:50:49 +0900
Subject: [PATCH 20/29] =?UTF-8?q?chore=20:=20ul=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EC=BD=94=EB=93=9C=20=EC=9C=84=EC=B9=98=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css                     | 40 ++-------------------------------
 src/components/todo/TodoForm.js | 38 +++++++++++++++++++++++++++----
 2 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/src/App.css b/src/App.css
index b948041..04de9c5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,7 @@
 :root {
   --main-color: #788bff;
   --sub-color: #484644;
+  --bg-primary: #252525;
 }
 
 nav {
@@ -13,47 +14,10 @@ nav {
 }
 
 main {
-  width: 920px;
+  width: 860px;
   min-height: 100vh;
-
   margin: 0 auto;
   text-align: center;
   background-color: rgb(25, 25, 25);
   padding: 2rem;
 }
-
-form {
-  border: 16px;
-  margin-top: 12px;
-  display: flex;
-  flex-wrap: wrap;
-  font-size: 14px;
-  min-height: 48px;
-  min-width: 320px;
-  padding: 0.5rem 1rem;
-  gap: 8px;
-  border-radius: 12px;
-  color: var(--main-color);
-  background-color: rgb(37, 37, 37);
-
-  input {
-    flex-grow: 1;
-    color: white;
-    margin-right: auto;
-    background-color: rgb(37, 37, 37);
-    border: none;
-    outline: none;
-    font-size: 16px;
-  }
-  input::placeholder {
-    color: var(--main-color);
-  }
-}
-
-ul {
-  /* background-color: aliceblue; */
-  display: flex;
-  flex-direction: column-reverse;
-  list-style-type: none;
-  padding-inline-start: 0;
-}
diff --git a/src/components/todo/TodoForm.js b/src/components/todo/TodoForm.js
index 83d678f..3c4567b 100644
--- a/src/components/todo/TodoForm.js
+++ b/src/components/todo/TodoForm.js
@@ -1,11 +1,13 @@
+import styled from 'styled-components';
 import { Button } from '../Button';
 import { useState } from 'react';
 
+// 할 일 입력 폼
 export default function TodoForm({ setTodos }) {
   const [inputValue, setInputValue] = useState('');
 
   const handleSubmit = (e) => {
-    e.preventDefault(); // form 제출 시 페이지 리로드 방지
+    e.preventDefault();
     console.log(inputValue);
     if (inputValue.trim()) {
       setTodos((prevTodos) => [
@@ -21,11 +23,11 @@ export default function TodoForm({ setTodos }) {
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <StyledForm onSubmit={handleSubmit}>
       <input
         type="text"
         placeholder="할 일 추가"
-        value={inputValue} // inputValue 상태값을 value 속성에 연결
+        value={inputValue} // inputValue 상태값을 value 속성에 연결 : 값 가져오려면 필요함
         onChange={(e) => setInputValue(e.target.value)}
       />
       <Button
@@ -34,6 +36,34 @@ export default function TodoForm({ setTodos }) {
       >
         추가
       </Button>
-    </form>
+    </StyledForm>
   );
 }
+
+const StyledForm = styled.form`
+  border: 0.5rem 1rem;
+  margin-top: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 14px;
+  min-height: 48px;
+  min-width: 320px;
+  padding: 0.5rem 1rem;
+  gap: 8px;
+  border-radius: 12px;
+  color: var(--main-color);
+  background-color: var(--bg-primary);
+
+  input {
+    flex-grow: 1;
+    color: white;
+    margin-right: auto;
+    background-color: var(--bg-primary);
+    border: none;
+    outline: none;
+    font-size: 16px;
+  }
+  input::placeholder {
+    color: var(--main-color);
+  }
+`;

From 7c681716e9c31383d639d7c82b416ce8dfadd449 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Sat, 21 Sep 2024 22:52:14 +0900
Subject: [PATCH 21/29] =?UTF-8?q?chore=20:=20=EB=AF=B8=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=20import=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                      |  1 -
 src/components/todo/TodoItem.js | 12 +++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/App.js b/src/App.js
index c118135..71b0b53 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,3 @@
-import Clock from './components/Clock';
 import Todo from './components/todo/Todo';
 import { IoCheckmarkSharp } from 'react-icons/io5';
 
diff --git a/src/components/todo/TodoItem.js b/src/components/todo/TodoItem.js
index 84b4849..d14977c 100644
--- a/src/components/todo/TodoItem.js
+++ b/src/components/todo/TodoItem.js
@@ -1,13 +1,13 @@
-import { DeleteButton, IsCompletedButton } from '../Button';
 import styled from 'styled-components';
-
+import { DeleteButton, IsCompletedButton } from '../Button';
 import { FaTrash } from 'react-icons/fa';
 import { IoCheckmarkCircle } from 'react-icons/io5';
+
+// 할 일 요소
 export function TodoItem({
   id,
   value,
   isCompleted = false,
-
   onDelete,
   toggleComplete,
 }) {
@@ -44,13 +44,11 @@ export function TodoItem({
 const StyledItem = styled.li`
   margin-top: 12px;
   display: flex;
-  // min-width: 0; /* 긴 텍스트로 인해 박스가 커지는 문제를 방지 */
-  // word-wrap: break-word; /* 텍스트가 넘치지 않도록 줄바꿈 */
   align-items: center;
   font-size: 14px;
-  padding: 1rem;
+  padding: 0.5rem 1rem;
   border-radius: 12px;
-  background-color: rgb(37, 37, 37);
+  background-color: var(--bg-primary);
   justify-content: space-between;
 
   .todo {

From 9ca41242f29f25700a4f1e7ef100e0a5571c5561 Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Sat, 21 Sep 2024 22:54:05 +0900
Subject: [PATCH 22/29] refactor : memoization

---
 src/components/todo/Todo.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/todo/Todo.js b/src/components/todo/Todo.js
index 08182d4..0d0ba99 100644
--- a/src/components/todo/Todo.js
+++ b/src/components/todo/Todo.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
@@ -5,26 +6,25 @@ import TodoForm from './TodoForm';
 import TodoList from './TodoList';
 import ProgressBar from '../ProgressBar';
 
-export default function Todo() {
+function Todo() {
   const [todos, setTodos] = useLocalStorage('todos', []);
-
-  useEffect(() => {
-    console.log(todos);
-  });
+  const memoizedTodos = useMemo(() => {
+    return todos;
+  }, [todos]);
   return (
     <>
-      <ProgressBar todos={todos} />
+      <ProgressBar todos={memoizedTodos} />
       <TodoForm setTodos={setTodos} />
 
       <TodoContainer>
         <TodoList
           title="TODO"
-          todos={todos.filter((todo) => !todo.isCompleted)}
+          todos={memoizedTodos.filter((todo) => !todo.isCompleted)}
           setTodos={setTodos}
         />
         <TodoList
           title="COMPLETED"
-          todos={todos.filter((todo) => todo.isCompleted)}
+          todos={memoizedTodos.filter((todo) => todo.isCompleted)}
           setTodos={setTodos}
         />
       </TodoContainer>
@@ -37,3 +37,5 @@ const TodoContainer = styled.div`
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
 `;
+
+export default React.memo(Todo);

From 593b319d706e4ed513a7fe2722470a29ab698a0a Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Sat, 21 Sep 2024 23:50:36 +0900
Subject: [PATCH 23/29] chore : fix item order

---
 src/components/todo/TodoList.js | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/todo/TodoList.js b/src/components/todo/TodoList.js
index 54e370e..9b4c3cb 100644
--- a/src/components/todo/TodoList.js
+++ b/src/components/todo/TodoList.js
@@ -25,11 +25,11 @@ export default function TodoList({ title, todos, setTodos }) {
   );
 
   return (
-    <div>
-      <StyledListTitle>
+    <StyledList>
+      <div className="statusTitle">
         <span>{title}</span>
         <span className="count">{todos.length}</span>
-      </StyledListTitle>
+      </div>
       <ul>
         {todos.map((todo) => (
           <TodoItem
@@ -39,19 +39,21 @@ export default function TodoList({ title, todos, setTodos }) {
           />
         ))}
       </ul>
-    </div>
+    </StyledList>
   );
 }
 
-const StyledListTitle = styled.div`
-  display: flex;
-  justify-content: space-between;
-  font-weight: bold;
-  padding: 1.5rem 1.5rem 0.5rem 1.5rem;
-  border-bottom: 1px solid var(--sub-color);
-  .count {
-    font-size: 1.5rem;
-    color: var(--main-color);
+const StyledList = styled.div`
+  .statusTitle {
+    display: flex;
+    justify-content: space-between;
+    font-weight: bold;
+    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
+    border-bottom: 1px solid var(--sub-color);
+    .count {
+      font-size: 1.5rem;
+      color: var(--main-color);
+    }
   }
   ul {
     display: flex;

From 164f085180a6d02b00b73467bde6cd1248575fad Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Sat, 21 Sep 2024 23:51:02 +0900
Subject: [PATCH 24/29] =?UTF-8?q?style=20:=20main=20width=20=EC=A4=84?=
 =?UTF-8?q?=EC=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.css b/src/App.css
index 04de9c5..1b447ad 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,7 +14,7 @@ nav {
 }
 
 main {
-  width: 860px;
+  width: 820px;
   min-height: 100vh;
   margin: 0 auto;
   text-align: center;

From c2a555a00333b7cdb7bd4cb36d7eb68650c8014d Mon Sep 17 00:00:00 2001
From: heewon lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Wed, 2 Oct 2024 21:14:35 +0900
Subject: [PATCH 25/29] Update src/components/todo/TodoList.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 김동혁 <132553964+ddhelop@users.noreply.github.com>
---
 src/components/todo/TodoList.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/todo/TodoList.js b/src/components/todo/TodoList.js
index 9b4c3cb..49917d2 100644
--- a/src/components/todo/TodoList.js
+++ b/src/components/todo/TodoList.js
@@ -31,13 +31,15 @@ export default function TodoList({ title, todos, setTodos }) {
         <span className="count">{todos.length}</span>
       </div>
       <ul>
-        {todos.map((todo) => (
-          <TodoItem
-            {...todo}
-            onDelete={() => handleDelete(todo.id)}
-            toggleComplete={() => toggleComplete(todo.id)}
-          />
-        ))}
+{todos.map((todo) => (
+  <TodoItem
+    key={todo.id}
+    {...todo}
+    onDelete={() => handleDelete(todo.id)}
+    toggleComplete={() => toggleComplete(todo.id)}
+  />
+))}
+
       </ul>
     </StyledList>
   );

From 9786c3105dbced36906b02ca16f0431447ca36fe Mon Sep 17 00:00:00 2001
From: hiwon-lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Mon, 9 Dec 2024 01:21:13 +0900
Subject: [PATCH 26/29] =?UTF-8?q?=F0=9F=92=84=20ui:=20=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProgressBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
index 0697a3d..59afe8c 100644
--- a/src/components/ProgressBar.js
+++ b/src/components/ProgressBar.js
@@ -60,7 +60,7 @@ const StyledProgress = styled.div`
   }
 
   progress {
-    width: 300px;
+    width: 100%;
     border-radius: 10px;
     padding: 0.2rem;
     overflow: hidden;

From a55319bbbb95077f733488a8e2606b93a779ed2b Mon Sep 17 00:00:00 2001
From: hiwon-lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Mon, 9 Dec 2024 01:21:45 +0900
Subject: [PATCH 27/29] =?UTF-8?q?=F0=9F=93=9D=20docs:=20=20for=20redux?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useTodo.js   | 46 ++++++++++++++++++++++++++++++++++++++++++
 src/redux/store.js     |  9 +++++++++
 src/redux/userSlice.js | 46 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 101 insertions(+)
 create mode 100644 src/hooks/useTodo.js
 create mode 100644 src/redux/store.js
 create mode 100644 src/redux/userSlice.js

diff --git a/src/hooks/useTodo.js b/src/hooks/useTodo.js
new file mode 100644
index 0000000..cb30ac2
--- /dev/null
+++ b/src/hooks/useTodo.js
@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import axios from 'axios';
+
+const API_URL = 'http://localhost:3000/todos';
+
+export const useTodo = () => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Todo 전체 가져오기 함수
+  const getTodos = async () => {
+    setLoading(true); // 로딩 상태 설정
+    setError(null); // 기존 에러 초기화
+    try {
+      const response = await axios.get('http://localhost:3000/todos'); // GET 요청
+      setLoading(false); // 로딩 상태 해제
+      return response.data; // 성공 시 데이터 반환
+    } catch (err) {
+      setLoading(false);
+      setError(err.response?.data || err.message); // 에러 상태 업데이트
+      throw err; // 호출하는 곳에서 에러 처리 가능하도록 다시 던짐
+    }
+  };
+
+  // Todo 생성 함수
+  const createTodo = async (todo) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const todoData = {
+        value: todo, // 폼의 텍스트 입력 값
+        isComplete: false, // 체크박스 상태 (true/false)
+      };
+      console.log(todoData);
+      const response = await axios.post(API_URL, todoData);
+      setLoading(false);
+      return response.data; // 성공 시 데이터 반환
+    } catch (err) {
+      setLoading(false);
+      setError(err.response?.data || err.message);
+      throw err; // 호출하는 쪽에서 에러 처리 가능하도록 다시 던짐
+    }
+  };
+
+  return { createTodo, loading, error };
+};
diff --git a/src/redux/store.js b/src/redux/store.js
new file mode 100644
index 0000000..f418ee3
--- /dev/null
+++ b/src/redux/store.js
@@ -0,0 +1,9 @@
+import { configureStore } from '@reduxjs/toolkit'
+import userReducer from './userSlice'
+
+
+export const store = configureStore({
+  reducer: {
+        user : userReducer
+  },
+})
\ No newline at end of file
diff --git a/src/redux/userSlice.js b/src/redux/userSlice.js
new file mode 100644
index 0000000..484df3d
--- /dev/null
+++ b/src/redux/userSlice.js
@@ -0,0 +1,46 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+const initialState = {
+  _id : "",
+  name : "",
+  email : "",
+  profile_pic : "",
+  token : "",
+  onlineUser : [],
+  socketConnection : null
+}
+
+export const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    setUser : (state,action)=>{
+        state._id = action.payload._id
+        state.name = action.payload.name 
+        state.email = action.payload.email 
+        state.profile_pic = action.payload.profile_pic 
+    },
+    setToken : (state,action)=>{
+        state.token = action.payload
+    },
+    logout : (state,action)=>{
+        state._id = ""
+        state.name = ""
+        state.email = ""
+        state.profile_pic = ""
+        state.token = ""
+        state.socketConnection = null
+    },
+    setOnlineUser : (state,action)=>{
+      state.onlineUser = action.payload
+    },
+    setSocketConnection : (state,action)=>{
+      state.socketConnection = action.payload
+    }
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { setUser, setToken ,logout, setOnlineUser,setSocketConnection } = userSlice.actions
+
+export default userSlice.reducer
\ No newline at end of file

From ba530ce5521be5498f5ddb99089a2842925888af Mon Sep 17 00:00:00 2001
From: hiwon-lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Mon, 9 Dec 2024 01:22:24 +0900
Subject: [PATCH 28/29] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20build:=20=20insta?=
 =?UTF-8?q?ll=20redux,=20axios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 208 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   3 +
 2 files changed, 211 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 00914b0..909124c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,15 @@
       "version": "0.1.0",
       "dependencies": {
         "@react-icons/all-files": "^4.1.0",
+        "@reduxjs/toolkit": "^2.2.7",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
+        "react-redux": "^9.1.2",
         "react-scripts": "5.0.1",
         "styled-components": "^6.1.13",
         "web-vitals": "^2.1.4"
@@ -3334,6 +3337,40 @@
         "react": "*"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz",
+      "integrity": "sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==",
+      "license": "MIT",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4517,6 +4554,12 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.12",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
@@ -5419,6 +5462,31 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -14673,6 +14741,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -15028,6 +15102,29 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -15163,6 +15260,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -15310,6 +15422,12 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -17383,6 +17501,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -20580,6 +20707,24 @@
       "integrity": "sha512-hxBI2UOuVaI3O/BhQfhtb4kcGn9ft12RWAFVMUeNjqqhLsHvFtzIkFaptBJpFDANTKoDfdVoHTKZDlwKCACbMQ==",
       "requires": {}
     },
+    "@reduxjs/toolkit": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz",
+      "integrity": "sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==",
+      "requires": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "dependencies": {
+        "immer": {
+          "version": "10.1.1",
+          "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+          "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw=="
+        }
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -21500,6 +21645,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
+    "@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "@types/ws": {
       "version": "8.5.12",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz",
@@ -22137,6 +22287,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.0.tgz",
       "integrity": "sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g=="
     },
+    "axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "requires": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+          "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
@@ -28582,6 +28754,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -28834,6 +29011,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "requires": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -28937,6 +29123,17 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "requires": {}
+    },
     "reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -29053,6 +29250,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
+    },
     "resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -30546,6 +30748,12 @@
         "requires-port": "^1.0.0"
       }
     },
+    "use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 747038e..d6453c2 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,15 @@
   "private": true,
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
+    "@reduxjs/toolkit": "^2.2.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-redux": "^9.1.2",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"

From b3c25f918513b88c28ee4e6518fec1f2a878769f Mon Sep 17 00:00:00 2001
From: hiwon-lee <84234411+hiwon-lee@users.noreply.github.com>
Date: Mon, 9 Dec 2024 01:23:02 +0900
Subject: [PATCH 29/29] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20=20local?=
 =?UTF-8?q?storage=20to=20axios=20database?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/todo/Todo.js     | 29 +++++++++++++++++++++++++++--
 src/components/todo/TodoForm.js | 24 +++++++++++-------------
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/todo/Todo.js b/src/components/todo/Todo.js
index 0d0ba99..5bd119d 100644
--- a/src/components/todo/Todo.js
+++ b/src/components/todo/Todo.js
@@ -1,16 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import TodoForm from './TodoForm';
 import TodoList from './TodoList';
 import ProgressBar from '../ProgressBar';
+import axios from 'axios';
 
 function Todo() {
-  const [todos, setTodos] = useLocalStorage('todos', []);
+  const API_URL = 'http://localhost:3000/todos'; // 서버 API URL
+  const [todos, setTodos] = useState([]); // 서버와 동기화된 상태 관리
+  const [loading, setLoading] = useState(true); // 로딩 상태
+  const [error, setError] = useState(null); // 에러 상태
+
+  // 서버에서 할 일 가져오기
+  useEffect(() => {
+    const fetchTodos = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await axios.get(API_URL); // 서버에서 데이터 가져오기
+        setTodos(response.data); // 상태 업데이트
+        setLoading(false);
+      } catch (err) {
+        setError(err.message || 'Failed to fetch todos');
+        setLoading(false);
+      }
+    };
+
+    fetchTodos();
+  }, []);
   const memoizedTodos = useMemo(() => {
     return todos;
   }, [todos]);
+  if (loading) return <p>Loading...</p>; // 로딩 상태 표시
+  if (error) return <p style={{ color: 'red' }}>Error: {error}</p>; // 에러 상태 표시
+
   return (
     <>
       <ProgressBar todos={memoizedTodos} />
diff --git a/src/components/todo/TodoForm.js b/src/components/todo/TodoForm.js
index 3c4567b..b9f255b 100644
--- a/src/components/todo/TodoForm.js
+++ b/src/components/todo/TodoForm.js
@@ -1,24 +1,22 @@
 import styled from 'styled-components';
 import { Button } from '../Button';
 import { useState } from 'react';
-
+import { useTodo } from '../../hooks/useTodo';
 // 할 일 입력 폼
 export default function TodoForm({ setTodos }) {
   const [inputValue, setInputValue] = useState('');
+  const { createTodo, loading, error } = useTodo();
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    console.log(inputValue);
-    if (inputValue.trim()) {
-      setTodos((prevTodos) => [
-        ...prevTodos,
-        {
-          id: Date.now(), // 유니크한 ID 생성
-          value: inputValue,
-          isCompleted: false,
-        },
-      ]);
-      setInputValue(''); // 입력 필드 초기화
+    try {
+      // const todoData = { value, false };
+      const createdTodo = await createTodo(inputValue, false); // Hook 호출
+      console.log('Todo created:', createdTodo);
+      // 성공적으로 생성 후 폼 초기화
+      setInputValue('');
+    } catch (err) {
+      console.error('Failed to create todo:', err);
     }
   };