diff --git a/package-lock.json b/package-lock.json
index 97dcc3a..4826d0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
+        "styled-components": "^6.1.13",
         "web-vitals": "^2.1.4"
       }
     },
@@ -2280,6 +2281,24 @@
         "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==",
+      "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=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "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",
@@ -4465,6 +4484,11 @@
       "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=="
+    },
     "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 +5955,14 @@
         "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==",
+      "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 +6390,14 @@
         "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==",
+      "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 +6539,16 @@
       "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==",
+      "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",
@@ -15823,6 +15873,11 @@
       "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=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -16382,6 +16437,65 @@
         "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==",
+      "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"
+        }
+      ],
+      "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=="
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16397,6 +16511,11 @@
         "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=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -19681,6 +19800,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",
@@ -21307,6 +21444,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 +22509,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 +22829,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 +22906,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",
@@ -29258,6 +29420,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 +29845,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 +29887,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..9b23370 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/public/fonts/PretendardVariable.woff2 b/public/fonts/PretendardVariable.woff2
new file mode 100644
index 0000000..49c54b5
Binary files /dev/null and b/public/fonts/PretendardVariable.woff2 differ
diff --git a/public/index.html b/public/index.html
index aa069f2..3ff7bb7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,8 +13,8 @@
     <!--
       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/src/App.js b/src/App.js
index 777b355..7938a33 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,149 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import Header from './components/Header';
+import Main from './components/Main';
+import Modal from './components/Modal';
+import ConfirmModal from './components/ConfirmModal';
+import styled, { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+  * {
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Pretendard Variable', sans-serif;
+  }
+  @font-face {
+    font-family: 'Pretendard Variable';
+    font-weight: 45 920;
+    font-style: normal;
+    font-display: swap;
+    src: url('/fonts/PretendardVariable.woff2') format('woff2-variations');
+  }
+`; // 전체 페이지의 기본 여백 제거, 코드의 중복을 줄이고 모든 컴포넌트에 일관된 스타일 적용
+
+const AppContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
 function App() {
+  const [todos, setTodos] = useState([]);
+  const [isAllCompleted, setIsAllCompleted] = useState(false); // 모든 todo가 완료되었는지 여부를 추적
+  const [modalText, setModalText] = useState(''); // 기능마다 모달 text를 다르게 하기 위함
+  const [isModalOpen, setIsModalOpen] = useState(false); // 모달 상태
+  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
+  const [todoToDelete, setTodoToDelete] = useState(null); // 삭제할 todo
+
+  // 전체 todo와 완료된 todo의 개수를 계산하는 함수
+  const totalTodos = todos.length;
+  const completedTodos = todos.filter(todo => todo.completed).length;
+
+
+  useEffect(() => {
+    const storedTodos = localStorage.getItem('todos');
+    if (storedTodos) {
+      try {
+        setTodos(JSON.parse(storedTodos)); // 데이터가 있다면 JSON 파싱
+      } catch (error) {
+        console.error("로컬 스토리지에서 데이터를 불러오는 중 오류 발생:", error);
+        setTodos([]); // 오류가 있으면 빈 배열로 초기화
+      }
+    }
+    const storedIsAllCompleted = localStorage.getItem('isAllCompleted');
+    if (storedIsAllCompleted) {
+      setIsAllCompleted(JSON.parse(storedIsAllCompleted));
+    }
+  }, []); // 새로고침 시 이전 데이터를 불러오기. localStorage로부터 todo 배열을 todo state에 저장하고 모든 todo 완료 상태를 저장
+
+  useEffect(() => {
+    // todos 배열이 비어 있지 않을 때만 로컬 스토리지 업데이트, 새로고침 시 todos 배열이 비어진 상태일 때 비동기로 인해 로컬 스토리지를 덮어씌우지 않게 하기 위함.
+    // 이미 todo를 다 완료해서 삭제 했다면 상관 없지! 빈 배열로 덮어씌워져도.
+    if (todos.length > 0) {
+      localStorage.setItem('todos', JSON.stringify(todos));
+    }
+  }, [todos]);
+
+
+  useEffect(() => {
+    if (totalTodos > 0 && totalTodos === completedTodos) {
+      if (!isAllCompleted) {
+        // 모든 TODO가 완료되고 isAllCompleted가 false일 때만 모달 표시 및 상태 업데이트
+        setModalText('축하합니다!🩷 모든 todo를 완료했습니다.👍🏻');
+        setIsModalOpen(true);
+        setIsAllCompleted(true);
+        localStorage.setItem('isAllCompleted', JSON.stringify(true));
+      }
+    } else {
+      if (isAllCompleted) {
+        // 모든 TODO가 완료되지 않았고 isAllCompleted가 true일 때만 상태 업데이트
+        setIsAllCompleted(false);
+        localStorage.setItem('isAllCompleted', JSON.stringify(false));
+      }
+    }
+  }, [totalTodos, completedTodos, isAllCompleted]);
+  
+  const addTodo = useCallback((newTodo) => {
+    // 입력된 할 일이 빈 문자열이거나 공백만 있을 경우 처리
+  if (newTodo.trim() === '') {
+    setModalText('오늘의 할 일을 입력해 주세요!🍀'); // 모달에 띄울 텍스트 설정
+    setIsModalOpen(true);
+    return; 
+  }
+    
+  setTodos(prevTodos => [
+    ...prevTodos, 
+    { 
+      text: newTodo, 
+      completed: false, 
+      timestamp: Date.now() // 고유한 timestamp 추가
+    }
+  ]);
+  },[]); // useCallback으로 함수 재생성을 방지, todo 상태가 변화해도 재생성 x
+
+  const toggleTodoCompletion = useCallback((todoTimeStamp) => {
+    setTodos(prevTodos =>
+      prevTodos.map(todo =>
+        todo.timestamp === todoTimeStamp ? { ...todo, completed: !todo.completed } : todo
+      )
+    );
+  }, []);
+
+  const deleteTodo = useCallback((todoTimestamp) => {
+    setTodoToDelete(todoTimestamp);
+    setIsConfirmModalOpen(true);
+  }, []);
+
+  const handleConfirmDelete = useCallback(() => {
+    setTodos(prevTodos => {
+      const updatedTodos = prevTodos.filter(todo => todo.timestamp !== todoToDelete);
+      localStorage.setItem('todos', JSON.stringify(updatedTodos));
+      return updatedTodos;
+    });
+    setIsConfirmModalOpen(false);
+    setModalText('todo를 삭제했습니다. 🥲');
+    setIsModalOpen(true);
+  }, [todoToDelete]);
+  
+
   return (
-    <div className="App">
-      <h1>🐶CEOS 20기 프론트엔드 최고🐶</h1>
-    </div>
+    <AppContainer>
+      <GlobalStyle />
+      <Header />
+      <Main
+        addTodo={addTodo}
+        todos={todos}
+        toggleTodoCompletion={toggleTodoCompletion}
+        deleteTodo={deleteTodo}
+        totalTodos={totalTodos}
+        completedTodos={completedTodos}
+      /> 
+      <Modal ModalText={modalText} isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
+      <ConfirmModal
+        isOpen={isConfirmModalOpen}
+        onConfirm={handleConfirmDelete}
+        onCancel={() => setIsConfirmModalOpen(false)}
+      />
+    </AppContainer>
   );
 }
-
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/assets/checkmark.svg b/src/assets/checkmark.svg
new file mode 100644
index 0000000..8738f16
--- /dev/null
+++ b/src/assets/checkmark.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" ?><svg id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill:#41AD49;}
+</style><g><polygon class="st0" points="434.8,49 174.2,309.7 76.8,212.3 0,289.2 174.1,463.3 196.6,440.9 196.6,440.9 511.7,125.8 434.8,49     "/></g></svg>
\ No newline at end of file
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
new file mode 100644
index 0000000..3c7e298
--- /dev/null
+++ b/src/components/ConfirmModal.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ModalBackground } from './Modal';
+import { ModalContainer } from './Modal';
+
+const ButtonGroup = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 0.9375rem;
+`;
+
+const ModalButton = styled.button`
+  padding: 0.625rem 1.25rem;
+  background-color: ${props => props.$cancel ? '#6dc66deb' : '#e53434eb'};
+  color: white;
+  border: none;
+  border-radius: 0.3125rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${props => props.$cancel ? '#54a054eb' : '#cb3e3efd'};
+  }
+`;
+
+const ConfirmModal = ({ isOpen, onConfirm,  onCancel }) => {
+  if (!isOpen) return null;
+
+  return (
+    <ModalBackground onClick={onCancel}>
+      <ModalContainer  $isOpen={isOpen} onClick={(e) => e.stopPropagation()}>
+        <h3>정말 삭제하시겠습니까?</h3>
+        <ButtonGroup>
+          <ModalButton $cancel onClick={onCancel}>취소</ModalButton>
+          <ModalButton onClick={onConfirm}>삭제</ModalButton>
+        </ButtonGroup>
+      </ModalContainer>
+    </ModalBackground>
+  );
+};
+
+export default ConfirmModal;
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..bf0084e
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const HeaderContainer = styled.header`
+  display: flex;
+  background-color: rgba(110, 190, 110, 0.895);
+  width: 100%;
+  height: 4rem;
+  color: white;
+  font-weight: bold;
+  align-items: center;
+  justify-content: center;
+  text-shadow: 0 0.3125rem 0.3125rem rgba(0, 0, 0, 0.205);
+`;
+
+const Header = React.memo(() => {
+  return (
+    <HeaderContainer>
+      <h1>TO-DO✏️</h1>
+    </HeaderContainer>
+  );
+});
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/InputForm.js b/src/components/InputForm.js
new file mode 100644
index 0000000..cc92a9a
--- /dev/null
+++ b/src/components/InputForm.js
@@ -0,0 +1,71 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import checkmark from '../assets/checkmark.svg';
+
+const Form = styled.form`
+  display: flex;
+  position: relative;
+  width: 80%;
+  padding: 1.3rem 1.3rem 1.3rem 3.3rem;
+  box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.11), 0 0.3125rem 0.3125rem rgba(0, 0, 0, 0.178);
+  border-radius: 0.625rem;
+  background-image: url(${checkmark});
+  background-size: 1.5rem;
+  background-position: 1rem center;
+  background-repeat: no-repeat;
+`;
+
+const Input = styled.input`
+  width: calc(100% - 4rem);
+  font-size: 1rem;
+  border: none;
+  outline: 0;
+`;
+
+const SubmitButton = styled.button`
+  position: absolute;
+  top: 50%;
+  right: 1.25rem;
+  transform: translateY(-50%);
+  background-color: transparent;
+  color: rgb(94, 169, 139);
+  padding: 0.3125rem 0.625rem;
+  border: 0.0938rem solid rgb(94, 169, 139);
+  border-radius: 0.625rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #b5b6b779;
+    font-weight: bold;
+  }
+`;
+
+const InputForm = ({ addTodo }) => {
+  const inputRef = useRef(null);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (inputRef.current) {
+      const inputValue = inputRef.current.value.trim();
+      addTodo(inputValue); // 빈 문자열인 경우도 addTodo로 전달 후 addTodo에서 함수 종료
+      inputRef.current.value = ''; // 입력 필드 초기화
+    }
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <Input
+        type="text"
+        ref={inputRef}
+        placeholder="할 일을 입력하세요"
+      />
+      <SubmitButton type="submit">추가</SubmitButton>
+    </Form>
+  );
+};
+
+export default InputForm;
+
+
+
+
diff --git a/src/components/Main.js b/src/components/Main.js
new file mode 100644
index 0000000..672f869
--- /dev/null
+++ b/src/components/Main.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import styled from 'styled-components';
+import InputForm from './InputForm';
+import TodoList from './TodoList';
+
+const MainContainer = styled.main`
+  display: flex;
+  margin-top: 1.875rem;
+  padding-top: 0.9375rem;
+  max-width: 90%;
+  width: 50rem;
+  height: 80vh;
+  gap: 0.625rem;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 1.875rem;
+  box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.19), 0 0.375rem 0.375rem rgba(0,0,0,0.23);
+`;
+
+const DateContainer = styled.section`
+  display: flex;
+  gap: 0.3125rem;
+  flex-direction: column;
+  align-items: center;
+  color: rgba(84, 170, 84, 0.922);
+`;
+
+const TodoCountContainer = styled.section`
+  display: flex;
+  gap: 0.625rem;
+  color: rgba(84, 170, 84, 0.922);
+`;
+
+const Main = React.memo(({ addTodo, todos, toggleTodoCompletion, deleteTodo, totalTodos, completedTodos }) => {
+  const DateDisplay = React.memo(() => {
+    const today = new Date();
+    const monthAndDay = today.toLocaleDateString("ko-KR",  { month: "long", day: "numeric" });
+    const week = today.toLocaleDateString("en-US",  { weekday: "long" });
+    return (
+      <DateContainer>
+        <h2>🍀{monthAndDay}🍀</h2>
+        <p>{week}</p>
+      </DateContainer>
+    );
+  });  
+
+  return (
+    <MainContainer>
+      <DateDisplay />
+      <TodoCountContainer>
+        <span>✅: {totalTodos}</span>
+        <span>🥳: {completedTodos}</span>
+      </TodoCountContainer>
+      <InputForm addTodo={addTodo} />
+      <TodoList
+        todos={todos}
+        toggleTodoCompletion={toggleTodoCompletion}
+        deleteTodo={deleteTodo}
+      />
+    </MainContainer>
+  );
+});
+
+export default Main;
diff --git a/src/components/Modal.js b/src/components/Modal.js
new file mode 100644
index 0000000..c985701
--- /dev/null
+++ b/src/components/Modal.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { slideDown } from './TodoItem';
+
+export const ModalBackground = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ModalContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.875rem;
+  background: white;
+  padding: 3.125rem;
+  border-radius: 0.625rem;
+  text-align: center;
+  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
+
+  ${({ $isOpen }) =>
+    $isOpen &&
+    css`
+      animation: ${slideDown} 0.3s ease-out forwards;
+    `}
+`;
+
+const Modal = ({ ModalText, isOpen, onClose }) => {
+  if (!isOpen) return null;
+
+  return (
+    <ModalBackground onClick={onClose}>
+      <ModalContainer $isOpen={isOpen} onClick={(e) => e.stopPropagation()}>
+        <p>{ModalText}</p>
+      </ModalContainer>
+    </ModalBackground>
+  );
+};
+
+export default Modal;
+
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
new file mode 100644
index 0000000..19c7bcb
--- /dev/null
+++ b/src/components/TodoItem.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+export const slideDown = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-1.25rem);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const TodoItemContainer = styled.li`
+    display: flex;
+    width: 100%;
+    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.11), 0 0.3125rem 0.3125rem rgba(0, 0, 0, 0.178);
+    padding: 1rem 1.3rem 1rem 1rem;
+    font-size: 1rem;
+    color: white;
+    border: none;
+    border-radius: 0.625rem;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1rem;
+    color: rgb(94, 169, 139);
+    animation: ${slideDown} 0.3s ease-out;
+`;
+
+const Input = styled.input`
+    min-width: 1.5rem;
+    height: 1.5rem;
+    cursor: pointer;
+    appearance: none;
+    border-radius: 50%;
+    border: 0.125rem solid rgb(94, 169, 139);
+    background-color: transparent;
+
+    &:checked {
+        background-color: rgb(103, 219, 147);
+        border-color: rgb(103, 219, 147);
+        position: relative;
+    }
+
+    &:checked:before {
+        content: '✓';
+        font-size: 1rem;
+        color: white;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+`;
+
+const TodoSpan = styled.span`
+  text-decoration: ${props => (props.$completed ? 'line-through' : 'none')};
+  width: 80%;
+  overflow-wrap: break-word;
+`;
+
+const DeleteButton = styled.button`
+    display: flex;
+    min-width: 2.875rem;
+    color: rgba(209, 46, 46, 0.664);
+    padding: 0.3125rem 0.625rem;
+    border-radius: 0.625rem;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0.0938rem solid rgba(193, 49, 49, 0.664);
+
+  &:hover {
+    background-color: #b5b6b779;
+    font-weight: bold;
+  }
+`;
+
+const TodoItem = React.memo(({ todo, toggleTodoCompletion, deleteTodo }) => {
+  return (
+    <TodoItemContainer>
+      <Input
+        type="checkbox"
+        checked={todo.completed}
+        onChange={() => toggleTodoCompletion(todo.timestamp)}
+      />
+      <TodoSpan $completed={todo.completed}>{todo.text}</TodoSpan>
+      <DeleteButton onClick={() => deleteTodo(todo.timestamp)}>삭제</DeleteButton>
+    </TodoItemContainer>
+  );
+});
+
+export default TodoItem; // 여기에 todo checkbox가 있으니 직접적으로 todo의 완료 '상태'를 변경함.
+
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
new file mode 100644
index 0000000..dd87a73
--- /dev/null
+++ b/src/components/TodoList.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import TodoItem from './TodoItem';
+import styled from 'styled-components';
+
+const TodoListContainer = styled.section`
+display: flex;
+width: 80%;
+flex-direction: column;
+gap: 0.625rem;
+ overflow-y: auto; /* 세로 방향으로만 스크롤 가능 */
+ padding: 0.625rem;
+/* 스크롤바 숨기기 */
+  &::-webkit-scrollbar {
+    width: 0;
+}
+`;
+
+const TodoList = React.memo(({ todos, toggleTodoCompletion, deleteTodo }) => {
+  // todos 배열을 completed 속성에 따라 정렬.
+  const sortedTodos = [...todos].sort((a, b) => {
+    if (a.completed === b.completed) return 0;
+    return a.completed ? 1 : -1; // 완료된 항목을 맨 아래로 보내기
+  });
+
+  return (
+    <TodoListContainer>
+      {sortedTodos.map(todo => (
+        <TodoItem
+          key={todo.timestamp}
+          todo={todo}
+          toggleTodoCompletion={toggleTodoCompletion}
+          deleteTodo={deleteTodo}
+        />
+      ))}
+    </TodoListContainer> // sortedTodos 배열의 각 요소를 TodoItem 컴포넌트로 변환하여 나열(렌더링)
+  );
+});
+
+export default TodoList;
diff --git a/src/index.js b/src/index.js
index 8db5acb..0d1a2ed 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,8 +3,12 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
+// html 문서에서 id가 root인 DOM 요소를 가져와서 React의 루트 컨테이너로 설정. 이 컨테이너 안에 React 컴포넌트들이 렌더링 됨.
+// 즉, html의 id가 root인 DOM 요소가 React의 가장 큰 바깥 컨테이너가 되고, 그 컨테이너에 App 컴포넌트가 전달 되어 렌더링 된다. 
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
+// <React.StrictMode>:
+// React 컴포넌트가 더 안전하고 일관성 있게 동작하도록 돕는 래퍼 컴포넌트. 개발 모드에서만 활성화되며, 배포 시에는 제거 됨.
\ No newline at end of file