diff --git a/src/App.jsx b/src/App.jsx
index aa4d827..bc8c345 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -10,61 +10,95 @@ const initialTodos = [
 ];
 
 export default function App() {
+  const [isName, setIsName] = useState()
+  const [isEditing, setIsEditing] = useState(false);
   const [todos, setTodos] = useState(
     initialTodos
   );
 
   function handleAddTodo(title) {
-    todos.push({
-      id: nextId++,
-      title: title,
-      done: false
-    });
+    setTodos([
+
+      ...todos,
+      {
+        id: nextId++,
+        title: title,
+        done: false,
+      }
+    ])
   }
 
   function handleChangeTodo(nextTodo) {
-    const todo = todos.find(t =>
-      t.id === nextTodo.id
+    setTodos(
+      todos.map((t) => {
+        if (t.id === nextTodo.id) {
+          return nextTodo;
+        } else {
+          return t;
+        }
+      }),
     );
-    todo.title = nextTodo.title;
-    todo.done = nextTodo.done;
   }
 
   function handleDeleteTodo(todoId) {
-    const index = todos.findIndex(t =>
-      t.id === todoId
-    );
-    todos.splice(index, 1);
+    setTodos(todos.filter((t) => t.id != todoId));
   }
+  const [info, setInfo] = useState({
+    name: "",
+    major: "",
+    email: "",
+    github: "",
+  });
 
+  const onChange = (e) => {
+    setInfo({...info, [e.target.name]:e.target.value});
+  };
 
+  const [isEdit, setIsEdit] = useState(false);
+  const handleClickBtn = () => {
+    setIsEdit(!isEdit);
+  };
   return (
     <>
+    {isEdit ? (
+
       <form>
-        <h2>안녕하세요, 프론트엔드 개발자 고윤정<input/>입니다.</h2>
+        <h2>안녕하세요, 프론트엔드 개발자<input name="name" value={info.name} onChange={onChange}/>입니다.</h2>
         <div className="box">
           <label>
             📎 전공 : {' '}
-            창의소프트학부 디자인이노베이션
-            <input/>
+            <input name='major' value={info.major} onChange={onChange}/>
           </label>
           <label>
             📎 이메일 : {' '}
-            jejukyj@naver.com
-            <input/>
+            <input name='email' value={info.email} onChange={onChange}/>
           </label>
           <label>
             📎 깃허브 : {' '}
-            github.com/jejukyj
-            <input/>
+            <input name='github' value={info.github} onChange={onChange}/>
           </label>
         </div>
         <div className="profile-edit">
-          <button type="submit">
-            Edit Profile
+          <button type="submit" onClick={handleClickBtn}>
+            Save
           </button>
         </div>
       </form>
+      ):(
+        <>
+          <h2>안녕하세요, 프론트엔드 개발자 {info.name}입니다.</h2>
+          <div className="box">
+            <label>📎 전공 : {info.major}</label>
+            <label>📎 이메일 : {info.email}</label>
+            <label>📎 깃허브 : {info.github}</label>
+          </div>
+          <div className="profile-edit">
+            <button type="submit" onClick={handleClickBtn}>
+              Edit Profile
+            </button>
+          </div>{" "}
+        </>
+      )}
       <div className="todo">
         <h3>오늘의 할일</h3>
         <AddTodo