simple diary : edit data

simplediary/src/App.js

@@ -47,16 +47,24 @@ const App = () => {
     setData([newItem, ...data]);
   };
 
-  const onDelete = (targetId) => {
+  const onRemove = (targetId) => {
     alert(`${targetId}가 삭제되었습니다.`);
     const newDiaryList = data.filter((it) => it.id !== targetId);
     setData(newDiaryList);
   };
 
+  const onEdit = (targetId, newContent) => {
+    setData(
+      data.map((it) =>
+        it.id === targetId ? { ...it, content: newContent } : it
+      )
+    );
+  };
+
   return (
     <div className="App">
       <DiaryEditor onCreate={onCreate} />
-      <DiaryList onDelete={onDelete} diaryList={data} />
+      <DiaryList onEdit={onEdit} onRemove={onRemove} diaryList={data} />
     </div>
   );
 };

simplediary/src/DiaryItem.js

@@ -1,11 +1,44 @@
+import { useRef, useState } from "react";
+
 const DiaryItem = ({
-  onDelete,
+  onEdit,
+  onRemove,
   author,
   content,
   created_date,
   emotion,
   id,
 }) => {
+  const [isEdit, setIsEdit] = useState(false);
+  const [localContent, setLocalContent] = useState(content);
+
+  const localContentInput = useRef();
+
+  const toggleIsEdit = () => setIsEdit(!isEdit);
+
+  const handleRemove = () => {
+    if (window.confirm(`${id}번째 일기를 삭제하시겠습니까?`)) {
+      onRemove(id);
+    }
+  };
+
+  const handleQuitEdit = () => {
+    setIsEdit(false);
+    setLocalContent(content);
+  };
+
+  const handleEdit = () => {
+    if (localContent.length < 5) {
+      localContentInput.current.focus();
+      return;
+    }
+
+    if (window.confirm(`${id}번째 일기를 수정하시겠습니까?`)) {
+      onEdit(id, localContent);
+      toggleIsEdit();
+    }
+  };
+
   return (
     <div className="DiaryItem">
       <div className="info">
@@ -15,16 +48,30 @@ const DiaryItem = ({
         <br />
         <span className="date">{new Date(created_date).toLocaleString()}</span>
       </div>
-      <div className="content">{content}</div>
-      <button
-        onClick={() => {
-          if (window.confirm(`${id}번째 일기를 삭제하시겠습니까?`)) {
-            onDelete(id);
-          }
-        }}
-      >
-        삭제하기
-      </button>
+      <div className="content">
+        {isEdit ? (
+          <>
+            <textarea
+              ref={localContentInput}
+              value={localContent}
+              onChange={(e) => setLocalContent(e.target.value)}
+            />
+          </>
+        ) : (
+          <>{content}</>
+        )}
+      </div>
+      {isEdit ? (
+        <>
+          <button onClick={handleQuitEdit}>수정취소</button>
+          <button onClick={handleEdit}>수정완료</button>
+        </>
+      ) : (
+        <>
+          <button onClick={handleRemove}>삭제하기</button>
+          <button onClick={toggleIsEdit}>수정하기</button>
+        </>
+      )}
     </div>
   );
 };

simplediary/src/DiaryList.js

@@ -1,13 +1,13 @@
 import DiaryItem from "./DiaryItem";
 
-const DiaryList = ({ onDelete, diaryList }) => {
+const DiaryList = ({ onEdit, onRemove, diaryList }) => {
   return (
     <div className="DiaryList">
       <h2>일기 리스트</h2>
       <h4>{diaryList.length}개의 일기가 있습니다.</h4>
       <div>
         {diaryList.map((it) => (
-          <DiaryItem key={it.id} {...it} onDelete={onDelete} />
+          <DiaryItem onEdit={onEdit} key={it.id} {...it} onRemove={onRemove} />
         ))}
       </div>
     </div>