From b38fbd5144937f1b5b5d67133676ecc9af3e5d26 Mon Sep 17 00:00:00 2001
From: kyoul10121 <kyoul10121@naver.com>
Date: Mon, 14 Oct 2024 15:43:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=83=81=EB=8B=A8,=20=20=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=20=EB=AF=B8=EC=85=98=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 78 ++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 56 insertions(+), 22 deletions(-)

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