diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/App.jsx b/src/App.jsx
index 5d62758..4e9b0e3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,15 +1,53 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
+import { useState, useRef, useEffect } from "react";
+import "./style/App.css";
+import List from "./components/List";
+import DisplayTodosState from "./components/DisplayTodosState";
 
 function App() {
-  const [count, setCount] = useState(0);
-  const name = "류승찬";
+  const [todos, setTodos] = useState([]);
+  const inputRef = useRef(null);
+
+  const addTodos = () => {
+    const add = inputRef.current.value;
+    if (add) {
+      setTodos(prev => [...prev, 
+        { id: Date.now(), context: add, complete: false }
+      ]);
+      inputRef.current.value = '';
+    }
+  };
+  const deleteTodos = (deleteId) => {
+    setTodos(prev => prev.filter(todo => todo.id !== deleteId));
+  };
+  const setComplete = (setId) => {
+  setTodos(prev =>
+    prev.map(todo =>
+      todo.id === setId
+        ? { ...todo, complete: !todo.complete }
+        : todo
+      )
+    );
+  };
 
   return (
     <>
-      화이팅
+      <h1>To-Do List</h1>
+      <input
+        placeholder="내용을 입력하세요"
+        ref={inputRef}
+      />
+      <button onClick={addTodos}>추가</button>
+      <ul>
+        {todos.map(todo => 
+          <List 
+            key={todo.id} 
+            todo={todo}
+            changeState={setComplete}
+            onDelete={deleteTodos} 
+          />
+        )}
+      </ul>
+      <DisplayTodosState todos={todos} />
     </>
   );
 }
diff --git a/src/components/DisplayTodosState.jsx b/src/components/DisplayTodosState.jsx
new file mode 100644
index 0000000..19d6f92
--- /dev/null
+++ b/src/components/DisplayTodosState.jsx
@@ -0,0 +1,21 @@
+import '../style/DisplayTodosState.css';
+import { useState, useEffect } from 'react';
+
+function DisplayTodosState({ todos }) {
+  const [count, setCount] = useState(0);
+
+  // 수정 코드(한번만 계산)
+  useEffect(() => {
+    const completedCount = todos.filter(todo => todo.complete).length;
+    setCount(completedCount);
+  }, [todos]);
+  
+  return (
+    <p>
+      [ ToDo의 개수: <strong>{todos.length}</strong>개,
+       완료한 Todo: <strong>{count}</strong>개 ]
+    </p>
+  )
+}
+
+export default DisplayTodosState;
\ No newline at end of file
diff --git a/src/components/List.jsx b/src/components/List.jsx
new file mode 100644
index 0000000..9b22594
--- /dev/null
+++ b/src/components/List.jsx
@@ -0,0 +1,17 @@
+import "../style/List.css";
+
+function List({ todo, changeState, onDelete }) {
+  return (
+    <li className={todo.complete?"todo end":"todo"}>
+      {todo.context}
+      <button className="complete" onClick={() => changeState(todo.id)}>
+        완료
+      </button>
+      <button className="remove" onClick={() => onDelete(todo.id)}>
+        삭제
+      </button>
+    </li>
+  );
+}
+
+export default List;
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index b9a1a6d..b0944bb 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,6 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
+import './style/index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
diff --git a/src/style/App.css b/src/style/App.css
new file mode 100644
index 0000000..38f5c2f
--- /dev/null
+++ b/src/style/App.css
@@ -0,0 +1,15 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+ul {
+  padding: 0;
+}
+
+input {
+  display: inline-block;
+  margin: 10px;
+}
\ No newline at end of file
diff --git a/src/style/DisplayTodosState.css b/src/style/DisplayTodosState.css
new file mode 100644
index 0000000..f29ccb5
--- /dev/null
+++ b/src/style/DisplayTodosState.css
@@ -0,0 +1,10 @@
+strong {
+  color: green;
+  font-weight: 600;
+}
+
+p {
+  background-color: rgb(227, 242, 248);
+  padding: 5px;
+  border-radius: 15px;
+}
\ No newline at end of file
diff --git a/src/style/List.css b/src/style/List.css
new file mode 100644
index 0000000..3a00f25
--- /dev/null
+++ b/src/style/List.css
@@ -0,0 +1,38 @@
+.todo {
+  list-style: none;
+  margin: 10px;
+  background-color: lightgray;
+  padding: 20px;
+  border-radius: 20px;
+  width: 250px;
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+}
+
+.remove {
+  position: absolute;
+  height: 30px;
+  right: 10px;
+  background-color: red;
+  color: white;
+  padding: 0px 10px;
+  text-align: center;
+  line-height: 28px;
+  top: 35px;
+}
+
+.complete {
+  position: absolute;
+  height: 30px;
+  right: 10px;
+  background-color: yellowgreen;
+  padding: 0px 10px;
+  text-align: center;
+  line-height: 28px;
+  top: 5px;
+}
+
+.end {
+  background-color: gray !important;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/style/index.css
similarity index 100%
rename from src/index.css
rename to src/style/index.css