diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..6c4516e
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true
+  }
\ No newline at end of file
diff --git a/README.md b/README.md
index a77b4ce..2db285a 100644
--- a/README.md
+++ b/README.md
@@ -1,68 +1,66 @@
-# 2주차 미션: React-Todo
+## 🔗 배포 링크
 
-# 서론
+[https://react-todo-19th-psi.vercel.app/](https://react-todo-19th-psi.vercel.app/)
 
-안녕하세요 🙌🏻 19기 프론트엔드 운영진 **변지혜**입니다.
+## 🕶️ 기능구현
 
-다들 1주차 미션 Vanilla Todo 만드시느라 수고 많으셨습니다! 1주차 미션을 통해 여러분들께서 본격적인 React 사용에 앞서 Vanilla JS로 SPA를 만들때의 불편한 점을 느끼셨을 것 이라 생각합니다.
+![screenshot](./public/img/screenshot.png)
 
-그리하여 이번 미션은, 1주차 스터의 미션으로 주어진 Todo list 만들기를 **React**로 리팩토링하는 것 입니다!
-기존에 리액트를 잘 아시던 분들께는, 조금 더 효울적인 디자인 패턴에 대해 고민할수 있는 주차가 될 것이고, 리액트를 제대로 접해보지 못하신 분들께는 기존의 어플리케이션을 리액트로 포팅하는 과정을 통해 왜 프론트엔드 시장에 리액트가 등장하게 되었고, 리액트에서 사용하는 여러가지 방식들이 왜 바닐라에 비해 효율적인지 꺠닫는 주차가 될 것이라 생각합니다.
+- todo 추가하기
+- local storage 구현
+- check버튼 클릭시 todo ↔ done으로 이동
+- delete버튼 클릭시 local storage에서 삭제
+- text overflow 관리
+- scroll 가능
 
-비교적 가벼운 미션인 만큼 코드를 짜는 데 있어 여러분의 **창의성**을 충분히 발휘해보시기 바랍니다. _❕작동하기만 하면 되는 것보다 같은 코드를 짜는 여러가지 방식과 패턴에 대해 많이 고민해보시고, 본인이 작성할 수 있는 가장 창의적인 방법으로 코드를 작성해주셨으면 합니다.❕_ 여러분이 미션 수행을 하는 과정에서 한 생각과 고민만큼 스터디에서 더 많은 것을 얻어가실 수 있을 거라 기대합니다!
+## 👩‍💻 느낀점
 
-막히는 부분이 있더라도 우선 스스로 공부하고 찾아보면서 미션을 진행하는 방식을 권고드리지만, 미션과 관련하여 운영진의 도움이 필요하시다면 얼마든지 슬랙 Q&A 채널이나 프론트엔드 카톡방에 질문을 남겨 주세요!
+지난 미션에서 local storage를 포함해서 여러가지 구현하지 못해 아쉬웠던 점을 많이 보완하고자 노력했습니다..! local storage로 데이터를 다루다 보니까 배열 형태를 가공하는 것이 많이 어려워서 헤매다 보니 시간이 부족해서 다른 분들의 코드를 많이 참고했습니다. 여전히 기능을 구현하는 것에 더 집중 해야겠다고 다짐했습니다. 리액트가 더 편할거라고 생각했는데 hook과 친해지지 못해서인지 오히려 더 어려웠던 미션이었습니다..🥹
 
-# 미션
+## 👻 어려웠던점
 
-## 예시
+1. deleteTodo() 가 toggleTodo() 이후에 불려오면 에러가 남
+deleteTodo 함수가 filter를 통해 새롭게 배열을 반환해주기 때문에 이 함수가 먼저 오면 undefined가 뜸.
+따라서 useEffect를 통해 직접 제어해 줄 수 있으면 더 좋았을거라고 생각하지만, 정확한 구현은 하지 못해 생각을 더 해보아야 할 것 같다. 배열 자체를 todolist에 들어갈 것과 donelist에 들어갈것으로 나누어서 아예 분리된 배열을 만드는 것도 고려해 봤지만, 로컬스토리지 크기 자체가 작아서 효율적이지 않다고 생각함.
+2. deleteTodo함수에서 직접 배열 인덱스를 찾아서 slice하는 방법도 고민해보고 직접 구현해 보았지만, 인덱스로 찾게되면 매번 마운팅 될 때 마다 id 값이 일치하는 것을 찾고, 또 인덱스 값을 매번 계산하게 되어 여러번의 순차탐색을 하게되므로 효율성이 떨어진다고 생각함.
+3. 아직 props와 친해지지 못해서 ToDo 컴포넌트에 거의 모든 기능을 몰아넣고 자식 컴포넌트에 하나하나 props로 전달하는 방법만 썼으나, 좀더 효율적인 컴포넌트 구성을 고민하고 배치하여 한 컴포넌트에 하나의 기능이 들어갈 수 있게 재사용성이 좋은 컴포넌트를 만들어야겠다고 반성함.
+4. 막상 html에서 react로 넘어가니 익숙하지 않았다. useState 뿐 아니라 useEffect로도 관리 할 수 있었으면 훨씬 좋았을 것 같다.
+5. 사소한 부분이지만, 날짜를 가져오는 라이브러리도 많이 쓰이던 moment.js는 잘 안쓰이는 추세이고 훨씬 가벼운 days 라이브러리를 사용했다. 포맷 변환도 어려웠는데 days는 한국어도 지원하기 때문에 days github 를 참고해서 포맷하면 유용하다.
 
-- [리액트 투두 예시](https://react-todo-18th-lemon.vercel.app/)
+## 🔑 key questions
 
-## 미션 목표
+<aside>
+1️⃣ **Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?**
 
-- VSCode, Prettier를 이용하여 개발환경을 관리합니다.
-- React의 기초를 이해합니다.
-- React를 통한 어플리케이션 상태 관리 방법을 이해합니다.
-- React Hooks에 대한 기초를 이해합니다.
-- Styled-Components를 통한 CSS-in-JS 및 CSS Preprocessor의 사용법을 익힙니다.
+리액트에서는 virtual-DOM을 사용한다. virtual-DOM이란, 실제 DOM(Document Object Model)을 조작하는 방식이 아닌, 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링 하는 방식으로 작동한다.
+실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문에 속도가 느리다는 단점이 있다. 리액트는 깜빡거림 없이 부드러운 UX를 사용자에게 제공하고자 변경사항만 빠르게 파악하고 리렌더링 하기 위해 DOM을 만들어 비교한다. 리액트는 성능 향상을 위해 실제 렌더링된 UI를 내부적으로 자바스크립트 객체로 따로 관리한다.
 
-## 기한
+![virtualDom](./public/img/virtualDom.png)
 
-- 2024년 3월 22일 금요일
+</aside>
 
-## Key Questions
+<aside>
+2️⃣ **미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
 
-- Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
-- 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
-- React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
-- Styled-Components 사용 후기 (CSS와 비교)
+1. virtual-DOM을 통해 리액트를 사용하지 않았을 때 보다 훨씬 빠른 렌더링이 가능했다. 
+2. 기존에는 append를 통해 리스트를 관리했다면, 리액트는 list 하나를 컴포넌트로 빼두어서 더 쉽게 관리할 수 있었다.
+3. 기능별 또는 페이지 별로 컴포넌트로 관리해서 오류를 고칠 때 훨씬 쉽게 오류가 난 부분을 찾을 수 있었다.
+4. 라이브러리 적용이 쉽고 props로 빼두어 코드가 훨씬 간결해졌다.
 
-## 필수 요건
+</aside>
 
-- 1주차 미션의 결과물을 그대로 React로 구현합니다. (‼️ todo / done 개수 잊지 마세요 ‼️)
-- Functional Components를 사용합니다.
-- React Hooks만을 사용해 상태를 관리합니다.
-- (이번주는 Redux, MobX, Recoil, SWR등의 외부 상태관리 라이브러리를 사용하지 않아도 미션 수행에 지장이 없습니다.)
+<aside>
+3️⃣ **React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?**
 
-## 선택 요건
+컴포넌트 내부에서 변할수 있는 값이다. 상태는 React State로 다룰 수 있다.
 
-- 기존 Todo-list에 여러분들이 추가하고 싶은 기능과 디자인을 자유롭게 추가해보세요.
+![state](./public/img/state.png)
 
-## 로컬 실행방법
+</aside>
 
----
+<aside>
+3️⃣ **Styled-Components 사용 후기 (CSS와 비교)**
 
-`npm start` : 로컬에서 react application을 자동으로 리로드하여 실행시켜줍니다.
+가장 먼저 자주 쓰는 스타일을 props로 처리할 수 있다는 점이 가장 좋았다. 그 외에도 default 스타일을 적용하고 특정 컴포넌트에만 약간 변형된 스타일을 적용 할 수 있다는 것도 배웠는데, 아직 사용 해 보지는 못했다.
 
-# 링크 및 참고자료
-
----
-
-- [create react app (CRA)](https://create-react-app.dev/docs/getting-started/)
-- [리액트 docs 주요 개념 1-12](https://react.dev/learn)
-- [리액트 docs Hook 1-3](https://react.dev/reference/react)
-- [리액트 useEffect 완벽 가이드](https://overreacted.io/ko/a-complete-guide-to-useeffect/)
-- [컴포넌트 네이밍을 위한 자바스크립트 네이밍 컨벤션](https://velog.io/@cada/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B0%80%EC%9D%B4%EB%93%9C-%EB%84%A4%EC%9D%B4%EB%B0%8D-%EC%BB%A8%EB%B2%A4%EC%85%98-%ED%8E%B8)
-- [useState, useEffect hooks](https://velog.io/@velopert/react-hooks#1-usestate)
-- [styled-component](https://styled-components.com/docs/basics#getting-started)
+</aside>
diff --git a/package-lock.json b/package-lock.json
index e523af2..f327cb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,10 +11,15 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "dayjs": "^1.11.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "styled-components": "^6.1.8",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -643,9 +648,17 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1888,6 +1901,17 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -2283,6 +2307,24 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "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.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
     "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",
@@ -4534,6 +4576,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.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+    },
     "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",
@@ -6037,6 +6084,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",
@@ -6469,6 +6524,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",
@@ -6659,6 +6722,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",
@@ -6922,6 +6995,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -15998,6 +16076,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",
@@ -16530,6 +16613,70 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.8",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.8.tgz",
+      "integrity": "sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.1",
+        "@emotion/unitless": "0.8.0",
+        "@types/stylis": "4.2.0",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.2",
+        "postcss": "8.4.31",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.1",
+        "tslib": "2.5.0"
+      },
+      "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/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "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.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16545,6 +16692,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "node_modules/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 6c9c71f..3bec54f 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/public/img/screenshot.png b/public/img/screenshot.png
new file mode 100644
index 0000000..939945b
Binary files /dev/null and b/public/img/screenshot.png differ
diff --git a/public/img/state.png b/public/img/state.png
new file mode 100644
index 0000000..e3c7c5e
Binary files /dev/null and b/public/img/state.png differ
diff --git a/public/img/virtualDom.png b/public/img/virtualDom.png
new file mode 100644
index 0000000..bad16d2
Binary files /dev/null and b/public/img/virtualDom.png differ
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 3b90819..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function App() {
-  return (
-    <div className="App">
-      <h1>CEOS 19기 프론트엔드 파이팅!( ¨̮ )و✧🔥</h1>
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..f019276
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,12 @@
+import Todos from "./components/Todos";
+
+
+function App() {
+  return (
+    <div>
+      <Todos/>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/assets/circle-check-regular.svg b/src/assets/circle-check-regular.svg
new file mode 100644
index 0000000..3b860b8
--- /dev/null
+++ b/src/assets/circle-check-regular.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#28c840" d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>
\ No newline at end of file
diff --git a/src/assets/circle-check-solid.svg b/src/assets/circle-check-solid.svg
new file mode 100644
index 0000000..3ff3458
--- /dev/null
+++ b/src/assets/circle-check-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#28c840" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>
\ No newline at end of file
diff --git a/src/assets/circle-minus-solid.svg b/src/assets/circle-minus-solid.svg
new file mode 100644
index 0000000..4910cd2
--- /dev/null
+++ b/src/assets/circle-minus-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#fe5f58" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232H328c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>
\ No newline at end of file
diff --git a/src/components/Date.jsx b/src/components/Date.jsx
new file mode 100644
index 0000000..0f54680
--- /dev/null
+++ b/src/components/Date.jsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import styled from 'styled-components'
+import dayjs from 'dayjs'
+import 'dayjs/locale/ko'
+dayjs.locale('ko')
+
+const DateWrapper = styled.div`
+  width: 100%;
+  height: 8.583rem;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 0.05rem solid #968E8E;
+`
+const Title = styled.div`
+  text-align: end;
+  color: #968E8E;
+  font-weight: 200;
+  font-size: 1.3rem;
+`
+const GetDate = styled.h1`
+  margin: 0;
+  font-size: 3rem;
+  font-weight: bold;
+`
+const GetWeek = styled.h3`
+  margin: 0.5rem 0;
+  font-size: 2rem;
+  font-weight: normal;
+`
+
+
+function Date() {
+const date = dayjs();
+const dateFormat = date.format('YYYY년 MM월 DD일');
+const weekFormat = date.format('dddd')
+
+
+  return (
+    <DateWrapper>
+      <Title>To do List</Title>
+      <GetDate>{dateFormat}</GetDate>
+      <GetWeek>{weekFormat}</GetWeek>
+    </DateWrapper>
+  )
+}
+
+export default Date
\ No newline at end of file
diff --git a/src/components/Lists/ListsItems.jsx b/src/components/Lists/ListsItems.jsx
new file mode 100644
index 0000000..549f8bd
--- /dev/null
+++ b/src/components/Lists/ListsItems.jsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import {styled, css} from 'styled-components'
+import iconLineCheck from '../../assets/circle-check-regular.svg'
+import iconSolidCheck from '../../assets/circle-check-solid.svg'
+import iconDelete from '../../assets/circle-minus-solid.svg'
+
+
+
+const ItemsWrapper = styled.div`
+  background-color: #fff;
+  width: 90%;
+  margin: 0.9rem auto;
+  border: 0.05rem solid #CBC0C0;
+  border-radius: 10px;
+  box-shadow: 0px 4px 4px #CBC0C0;
+  display: flex;
+  flex-direction: row;
+`
+const TodoText = styled.div`
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  margin: 1.2rem 0;
+  padding: 0 1rem;
+  font-size: 1.2rem;
+  font-weight: normal;
+  word-break:break-all;
+`
+export const button = css`
+  width: 1.2rem;
+  height: 1.2rem;
+  margin: auto 1rem auto 0rem;
+  cursor: pointer;
+`
+
+const DeleteButton = styled.img`
+  ${button}
+`
+const CheckButton = styled.img`
+  ${button}
+`
+
+function ListsItems({todo, data, deleteTodo, toggleTodo}) {
+  
+
+  return (
+    <ItemsWrapper>
+      <TodoText>{todo}</TodoText>
+      <CheckButton 
+        onClick={() => toggleTodo(data.id)}
+        src = {data.completed ? iconSolidCheck: iconLineCheck}
+      ></CheckButton>
+      <DeleteButton 
+      onClick={() => deleteTodo(data.id)}
+      src = {iconDelete}/>
+    </ItemsWrapper>
+  )
+}
+
+export default ListsItems
\ No newline at end of file
diff --git a/src/components/Lists/TodoInputField.jsx b/src/components/Lists/TodoInputField.jsx
new file mode 100644
index 0000000..7c2b511
--- /dev/null
+++ b/src/components/Lists/TodoInputField.jsx
@@ -0,0 +1,78 @@
+import styled from 'styled-components'
+import dayjs from 'dayjs'
+
+const TodoInputFieldWrapper = styled.form`
+    height: 3.5rem;
+    width: 90%;
+    display: flex;
+    flex-direction: row;
+    margin: 0 auto;
+    border-bottom: 0.1rem solid #968E8E;
+`
+const InputField = styled.input`
+    border: none;
+    padding: 0;
+    flex-grow: 1;
+    color: black;
+    font-size: 1.3rem;
+    font-weight: normal;
+    &::placeholder{
+    color: black;
+    font-size: 1.3rem;
+    font-weight: normal;
+    }
+`
+const SubmitButton = styled.button`
+    border: none;
+    margin-left: auto;
+    width: 10%;
+    background-color: #fff;
+    color: #2F82FE;
+    font-size: 3rem;
+    font-weight: normal;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+`
+
+function TodoInputField({ lists, setLists, value, setValue}) {
+//inputfield에 값 넣기
+const handleChange = (e) =>{
+    setValue(e.target.value);
+}
+
+const onSubmit = (e) => {
+    e.preventDefault();
+    if(!value.trim()){
+        alert('할일을 입력 해 주세요')
+    }
+    getList(value);
+    setValue("");
+}
+
+//객체 생성
+function getList(todo) {
+    const newList = {
+        id: dayjs(),
+        title: todo,
+        completed: false
+    }
+    setLists([...lists, newList]);
+    localStorage.setItem("lists", JSON.stringify([...lists, newList]))
+}
+
+  return (
+    <TodoInputFieldWrapper onSubmit={onSubmit}>
+        <InputField 
+            placeholder='To do'
+            onChange={handleChange}
+            value={value}
+        />
+        <SubmitButton type='submit'>+</SubmitButton>
+    </TodoInputFieldWrapper>
+  )
+  
+}
+
+export default TodoInputField
\ No newline at end of file
diff --git a/src/components/Todos.jsx b/src/components/Todos.jsx
new file mode 100644
index 0000000..1c8655b
--- /dev/null
+++ b/src/components/Todos.jsx
@@ -0,0 +1,138 @@
+import React, { useEffect } from 'react';
+import Date from './Date';
+import styled from 'styled-components';
+import {css} from 'styled-components';
+import TodoInputField from './Lists/TodoInputField';
+import { useState } from 'react';
+import ListsItems from './Lists/ListsItems';
+//전체 틀 잡기
+
+const TodoContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 70vw;
+    height: 70vh;
+    display: flex;
+    margin: 10vh auto;
+    border: 0.05rem solid #CBC0C0;
+    border-radius: 25px;
+    box-shadow: 5px 4px 4px #CBC0C0;
+    padding: 2rem;
+`
+
+//list가 표시되는 하단부
+export const textCenter = css`
+    width: 90%;
+    display: flex;
+    align-items: center;
+    font-size: 1.3rem;
+    font-weight: normal;
+`
+
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 54vh;
+`
+
+const TodoLists = styled.div`
+    display: flex;
+    flex-direction: column;
+    width:50%;
+`
+const DoneLists = styled.div`
+    display: flex;
+    flex-direction: column;
+    width:50%;
+    h4{
+     ${textCenter}
+     color: black;
+     margin: 0 auto;
+     height: 3.6rem;
+    }
+`
+
+const ListsWrapper = styled.div`
+    flex-grow: 1;
+    overflow: scroll;
+`
+const ListsCount = styled.div`
+   ${textCenter}
+   color: #968E8E;
+   justify-content: center;
+   margin-top: 0.9rem;
+`
+
+export default function Todos() {
+//로컬스토리지 기존 값 가져오기
+const savedLists = localStorage.getItem("lists")? JSON.parse(localStorage.getItem("lists")):[];
+const [lists, setLists] = useState(savedLists);
+const [value, setValue] = useState("");
+
+
+const deleteTodo = (id) => {
+    let deletedTodo = lists.filter((data) => data.id !== id);
+    setLists(deletedTodo);
+    localStorage.setItem("lists", JSON.stringify(deletedTodo));
+  };
+
+const toggleTodo = (id) => {
+    let toggledTodo = lists.map((data) =>
+      data.id === id ? { ...data, completed: !data.completed } : data
+    );
+    setLists(toggledTodo);
+    localStorage.setItem("lists", JSON.stringify(toggledTodo));
+  };
+
+
+const todoCount = lists.filter((data) => !data.completed).length;
+const doneCount = lists.filter((data) => data.completed).length;
+  
+  
+  return (
+    <TodoContainer>
+        <Date/>
+        <Wrapper>
+        <TodoLists>
+            <TodoInputField
+             lists={lists}
+             value={value}
+             setLists={setLists}
+             setValue={setValue}
+            />
+           <ListsWrapper>
+            {lists.map((data)=>
+            data.completed ? <></>:
+            <ListsItems
+            key = {data.id}
+            todo = {data.title}
+            data = {data}
+            toggleTodo = {toggleTodo}
+            deleteTodo = {deleteTodo}
+            />
+            )}
+            </ListsWrapper>
+            <ListsCount>{todoCount} lists are left</ListsCount>
+        </TodoLists>
+       
+        <DoneLists>
+            <h4>Done</h4>
+            <ListsWrapper>
+            {lists.map((data)=>
+            data.completed ? 
+            <ListsItems
+            key = {data.id}
+            todo = {data.title}
+            data = {data}
+            toggleTodo = {toggleTodo}
+            deleteTodo = {deleteTodo}
+            /> : <></>
+            )}
+            </ListsWrapper>
+            <ListsCount>{doneCount} lists are done! way to go : )</ListsCount>
+        </DoneLists>
+        </Wrapper>
+    </TodoContainer>
+  )
+}