diff --git a/package-lock.json b/package-lock.json
index 97dcc3a..909124c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,18 @@
       "name": "react-todo-20th",
       "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"
       }
     },
@@ -2280,6 +2286,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 +3328,49 @@
         }
       }
     },
+    "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/@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",
@@ -4465,6 +4535,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",
@@ -4478,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",
@@ -5380,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",
@@ -5931,6 +6038,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 +6474,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 +6624,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",
@@ -14605,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",
@@ -14946,11 +15088,43 @@
       "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",
       "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",
@@ -15086,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",
@@ -15233,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",
@@ -15823,6 +16018,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 +16583,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 +16660,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",
@@ -17232,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",
@@ -19681,6 +19959,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 +20701,30 @@
         "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": {}
+    },
+    "@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",
@@ -21307,6 +21627,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",
@@ -21320,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",
@@ -21957,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",
@@ -22367,6 +22719,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 +23039,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 +23116,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",
@@ -28382,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",
@@ -28623,11 +29000,26 @@
       "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",
       "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",
@@ -28731,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",
@@ -28847,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",
@@ -29258,6 +29666,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 +30091,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 +30133,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",
@@ -30297,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 af506b2..d6453c2 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "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"
   },
   "scripts": {
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
new file mode 100644
index 0000000..b2a087b
--- /dev/null
+++ b/public/reset.css
@@ -0,0 +1,134 @@
+/* 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;
+  background-color: #252423;
+  color: whitesmoke;
+}
+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;
+}
+button {
+  all: unset;
+}
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..1b447ad
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,23 @@
+:root {
+  --main-color: #788bff;
+  --sub-color: #484644;
+  --bg-primary: #252525;
+}
+
+nav {
+  display: flex;
+  padding: 0.7rem 2.5rem;
+  background-color: #1b1a19;
+  font-size: 1.2rem;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--sub-color);
+}
+
+main {
+  width: 820px;
+  min-height: 100vh;
+  margin: 0 auto;
+  text-align: center;
+  background-color: rgb(25, 25, 25);
+  padding: 2rem;
+}
diff --git a/src/App.js b/src/App.js
index 777b355..71b0b53 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,18 @@
+import Todo from './components/todo/Todo';
+import { IoCheckmarkSharp } from 'react-icons/io5';
+
+import './App.css';
+
 function App() {
   return (
     <div className="App">
-      <h1>🐶CEOS 20기 프론트엔드 최고🐶</h1>
+      <nav>
+        <IoCheckmarkSharp />
+        TO DO
+      </nav>
+      <main>
+        <Todo />
+      </main>
     </div>
   );
 }
diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 0000000..4f470df
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,46 @@
+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;
+  color: var(--main-color);
+  border: 2px solid var(--main-color);
+  align-items: center;
+  text-wrap: nowrap;
+`;
+
+// DeleteButton : 삭제 버튼
+export const DeleteButton = styled(MainButton)`
+  border-radius: 1rem;
+  color: var(--main-color);
+  border-color: var(--main-color);
+`;
+
+// IsCompletedButton : 완료 토글 버튼
+export const IsCompletedButton = styled(MainButton)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  font-size: 1.5em;
+  ${(props) =>
+    props.$isCompleted === 'true' &&
+    `padding: 0; /* 아이콘이 들어가려면 패딩 값이 없어야 함 */
+      `}
+`;
diff --git a/src/components/Clock.js b/src/components/Clock.js
new file mode 100644
index 0000000..e28889c
--- /dev/null
+++ b/src/components/Clock.js
@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+// 날짜
+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());
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  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);
+`;
diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
new file mode 100644
index 0000000..59afe8c
--- /dev/null
+++ b/src/components/ProgressBar.js
@@ -0,0 +1,80 @@
+import styled from 'styled-components';
+import Clock from './Clock';
+
+// ProgressBar : 오늘 정보 + 할 일 진척도
+export default function ProgressBar({ todos }) {
+  // 전체 할 일
+  const totalTodo = todos.length;
+
+  // 완료된 할 일의 개수
+  const completedCount = todos.filter((todo) => todo.isCompleted).length;
+
+  // 진행률 계산 (완료된 할 일의 수 / 전체 할 일 수)
+  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: 100%;
+    border-radius: 10px;
+    padding: 0.2rem;
+    overflow: hidden;
+    background-color: #3c3c3c;
+
+    // progressbar 내부 디자인
+    &::-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
new file mode 100644
index 0000000..5bd119d
--- /dev/null
+++ b/src/components/todo/Todo.js
@@ -0,0 +1,66 @@
+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 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} />
+      <TodoForm setTodos={setTodos} />
+
+      <TodoContainer>
+        <TodoList
+          title="TODO"
+          todos={memoizedTodos.filter((todo) => !todo.isCompleted)}
+          setTodos={setTodos}
+        />
+        <TodoList
+          title="COMPLETED"
+          todos={memoizedTodos.filter((todo) => todo.isCompleted)}
+          setTodos={setTodos}
+        />
+      </TodoContainer>
+    </>
+  );
+}
+
+const TodoContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+`;
+
+export default React.memo(Todo);
diff --git a/src/components/todo/TodoForm.js b/src/components/todo/TodoForm.js
new file mode 100644
index 0000000..b9f255b
--- /dev/null
+++ b/src/components/todo/TodoForm.js
@@ -0,0 +1,67 @@
+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 = async (e) => {
+    e.preventDefault();
+    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);
+    }
+  };
+
+  return (
+    <StyledForm onSubmit={handleSubmit}>
+      <input
+        type="text"
+        placeholder="할 일 추가"
+        value={inputValue} // inputValue 상태값을 value 속성에 연결 : 값 가져오려면 필요함
+        onChange={(e) => setInputValue(e.target.value)}
+      />
+      <Button
+        type="submit"
+        onClick={handleSubmit}
+      >
+        추가
+      </Button>
+    </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);
+  }
+`;
diff --git a/src/components/todo/TodoItem.js b/src/components/todo/TodoItem.js
new file mode 100644
index 0000000..d14977c
--- /dev/null
+++ b/src/components/todo/TodoItem.js
@@ -0,0 +1,65 @@
+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,
+}) {
+  return (
+    <StyledItem id={id}>
+      {isCompleted ? (
+        <IsCompletedButton
+          type="button"
+          onClick={toggleComplete} // 완료로 상태 변경
+          $isCompleted="true"
+        >
+          <IoCheckmarkCircle />
+        </IsCompletedButton>
+      ) : (
+        <IsCompletedButton
+          type="button"
+          onClick={toggleComplete} // 완료 취소
+          $isCompleted="false"
+        ></IsCompletedButton>
+      )}
+      <div className="todo">{value}</div>
+      <div className="button-group">
+        <DeleteButton
+          type="button"
+          onClick={onDelete}
+        >
+          <FaTrash />
+        </DeleteButton>
+      </div>
+    </StyledItem>
+  );
+}
+
+const StyledItem = styled.li`
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  padding: 0.5rem 1rem;
+  border-radius: 12px;
+  background-color: var(--bg-primary);
+  justify-content: space-between;
+
+  .todo {
+    margin-right: auto;
+    justify-content: center;
+    span {
+      margin: 1rem;
+    }
+  }
+  .button-group {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+`;
diff --git a/src/components/todo/TodoList.js b/src/components/todo/TodoList.js
new file mode 100644
index 0000000..49917d2
--- /dev/null
+++ b/src/components/todo/TodoList.js
@@ -0,0 +1,66 @@
+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) =>
+        prevTodos.map((todo) =>
+          todo.id === id ? { ...todo, isCompleted: !todo.isCompleted } : todo
+        )
+      );
+    },
+    [setTodos]
+  );
+
+  // 할 일 삭제
+  const handleDelete = useCallback(
+    (id) => {
+      setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
+    },
+    [setTodos]
+  );
+
+  return (
+    <StyledList>
+      <div className="statusTitle">
+        <span>{title}</span>
+        <span className="count">{todos.length}</span>
+      </div>
+      <ul>
+{todos.map((todo) => (
+  <TodoItem
+    key={todo.id}
+    {...todo}
+    onDelete={() => handleDelete(todo.id)}
+    toggleComplete={() => toggleComplete(todo.id)}
+  />
+))}
+
+      </ul>
+    </StyledList>
+  );
+}
+
+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;
+    flex-direction: column-reverse;
+    list-style-type: none;
+    padding-inline-start: 0;
+  }
+`;
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js
new file mode 100644
index 0000000..76b88fc
--- /dev/null
+++ b/src/hooks/useLocalStorage.js
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+// useLocalStorage : localStorage 관리하는 커스텀 훅
+export function useLocalStorage(key, initialValue) {
+  // localStorage에서 값을 가져오거나 초기 값을 설정
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key); // key에 해당하는 놈들 가져옴
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error('Error reading from localStorage', error);
+      return initialValue;
+    }
+  });
+
+  // setValue : localStorage에 값을 설정하는 함수
+  const setValue = (value) => {
+    try {
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value; // value가 함수인 경우에 실행해주려구
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore)); // 다시 스토리지에 저장
+    } catch (error) {
+      console.error('Error setting localStorage', error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
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/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 />
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