[4주차] 이지수 과제 제출합니다

src/App.jsx

@@ -1,3 +1,4 @@
+//eslint-disabled- vite
 import { useState } from 'react';
 import './App.css';
 import AddTodo from './AddTodo';
@@ -10,72 +11,116 @@ const initialTodos = [
 ];
 
 export default function App() {
-  const [todos, setTodos] = useState(
-    initialTodos
-  );
+  const [todos, setTodos] = useState(initialTodos);
+  const [isEditing, setIsEditing] = useState(false);
+  const [profile, setProfile] = useState({
+    name: "이지수",
+    major: "정보통신공학과",
+    email: "leeland21@naver.com ",
+    github: "jisssu.github",
+  });
 
   function handleAddTodo(title) {
-    todos.push({
-      id: nextId++,
-      title: title,
-      done: false
-    });
+    setTodos(prevTodos => [
+      ...prevTodos,
+      { id: nextId++, title: title, done: false }
+    ]);
   }
 
   function handleChangeTodo(nextTodo) {
-    const todo = todos.find(t =>
-      t.id === nextTodo.id
+    setTodos(prevTodos => 
+      prevTodos.map(todo =>
+        todo.id === nextTodo.id ? nextTodo : todo
+      )
     );
-    todo.title = nextTodo.title;
-    todo.done = nextTodo.done;
   }
 
   function handleDeleteTodo(todoId) {
-    const index = todos.findIndex(t =>
-      t.id === todoId
-    );
-    todos.splice(index, 1);
+    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== todoId));
   }
 
+  const handleEditProfile = (e) => {
+    e.preventDefault();
+    setIsEditing(!isEditing);
+  };
+
+  const handleProfileChange = (e) => {
+    const { name, value } = e.target;
+    setProfile(prevProfile => ({
+      ...prevProfile,
+      [name]: value,
+    }));
+  };
 
   return (
     <>
       <form>
-        <h2>안녕하세요, 프론트엔드 개발자 고윤정<input/>입니다.</h2>
+        <h2>안녕하세요, 프론트엔드 개발자{' '}
+          {isEditing ? (
+            <input
+              value={profile.name}
+              onChange={handleProfileChange}
+            />
+          ) : (
+            <>{profile.name}입니다.</>
+          )}
+       </h2>
         <div className="box">
           <label>
             📎 전공 : {' '}
-            창의소프트학부 디자인이노베이션
-            <input/>
+            {isEditing ? (
+              <input
+                type="text"
+                name="major"
+                value={profile.major}
+                onChange={handleProfileChange}
+              />
+            ) : (
+              profile.major
+            )}
           </label>
           <label>
             📎 이메일 : {' '}
-            jejukyj@naver.com
-            <input/>
+            {isEditing ? (
+              <input
+                type="email"
+                name="email"
+                value={profile.email}
+                onChange={handleProfileChange}
+              />
+            ) : (
+              profile.email
+            )}
           </label>
           <label>
             📎 깃허브 : {' '}
-            github.com/jejukyj
-            <input/>
+            {isEditing ? (
+              <input
+                type="text"
+                name="github"
+                value={profile.github}
+                onChange={handleProfileChange}
+              />
+            ) : (
+              profile.github
+            )}
           </label>
         </div>
         <div className="profile-edit">
-          <button type="submit">
-            Edit Profile
+          <button type="button" onClick={handleEditProfile}>
+            {isEditing ? '저장' : 'Edit Profile'}
           </button>
         </div>
       </form>
       <div className="todo">
         <h3>오늘의 할일</h3>
-        <AddTodo
-        onAddTodo={handleAddTodo}
-        />
+        <AddTodo onAddTodo={handleAddTodo} />
         <List
           todos={todos}
           onChangeTodo={handleChangeTodo}
           onDeleteTodo={handleDeleteTodo}
         />
       </div>
-  </>
+    </>
   );
 }