From bfc174d7366b64cc1ee0f2339bc9e8f3255873f8 Mon Sep 17 00:00:00 2001
From: Jisoo Kim <ooSoo2Soo2oo@gmail.com>
Date: Mon, 3 Jul 2023 18:31:47 +0900
Subject: [PATCH 1/5] =?UTF-8?q?Date=20=EA=B4=80=EB=A0=A8=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=EC=97=90=20=EB=8C=80=ED=95=9C=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EB=94=94=EC=96=B4=20=EB=96=A0=EC=98=AC=EB=9D=BC=EC=84=9C=20?=
 =?UTF-8?q?=EC=8B=9C=EB=8F=84=ED=96=88=EC=9C=BC=EB=82=98=20=EC=8B=A4?=
 =?UTF-8?q?=ED=8C=A8.=20=EB=8B=A4=EC=8B=9C=20=EB=9C=AF=EC=96=B4=EA=B3=A0?=
 =?UTF-8?q?=EC=B3=90=EC=95=BC=20=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jisoo-Repo             |  1 +
 src/App.js             | 32 ++++++++++++++++++++++++--------
 src/components/Form.js | 11 ++++-------
 src/components/List.js | 23 +++++++++++------------
 4 files changed, 40 insertions(+), 27 deletions(-)
 create mode 160000 Jisoo-Repo

diff --git a/Jisoo-Repo b/Jisoo-Repo
new file mode 160000
index 0000000..7c2625f
--- /dev/null
+++ b/Jisoo-Repo
@@ -0,0 +1 @@
+Subproject commit 7c2625f827c9a8cf8087d3b17a347f47c36c17cd
diff --git a/src/App.js b/src/App.js
index 6e96c08..033c055 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,14 @@
 import "./App.css";
-import { useState } from "react";
+import React, { useState } from "react";
 import Form from "./components/Form";
 import List from "./components/List";
 
 const initialDiaryData = localStorage.getItem("diaryData")
   ? JSON.parse(localStorage.getItem("diaryData"))
   : [];
+const initialDateData = localStorage.getItem("dateData")
+  ? JSON.parse(localStorage.getItem("dateData"))
+  : [];
 
 // JSON.parse() 함수는 JSON 형식의 문자열을 JavaScript 객체로 변환
 // 일반적으로 아래와 같은 방식으로 JSON.stringify(), JSON.parse() 사용
@@ -14,36 +17,48 @@ const initialDiaryData = localStorage.getItem("diaryData")
 function App() {
   const [diaryData, setDiaryData] = useState(initialDiaryData);
   const [dateData, setDateData] = useState(initialDateData);
+  const [diaryText, setDiaryText] = useState("");
+  const [dateText, setDateText] = useState("");
 
   // 일기 추가가 안 되는데 문제가 뭔지 모르겠음. id 문제인가?
   // * Create 기능
   const handleSubmitDiary = (e) => {
-    
     e.preventDefault();
-    console.log(e.dateValue)
-    console.log(e.diaryValue)
-    
+
     // 새로운 일기 데이터, 날짜 데이터
     let newDiary = {
       id: Date.now(),
-      date: 
       diaryValue: diaryText,
     };
+    let newDate = {
+      id: Date.now(),
+      dateValue: dateText,
+    };
 
     // 기존 일기에 새로운 일기, 날짜 추가
     setDiaryData((prev) => [...prev, newDiary]);
     localStorage.setItem("diaryData", JSON.stringify([newDiary, ...diaryData]));
+    setDateData((prev) => [...prev, newDate]);
+    localStorage.setItem("dateData", JSON.stringify([newDate, ...dateData]));
 
     // 입력란에 있던 글씨 지워주기
     setDiaryText("");
+    setDateText("");
   };
 
+  const handleRemoveAll = () => {
+    setDiaryData([]);
+    setDateData([]);
+    localStorage.setItem("diaryData", JSON.stringify([]));
+    localStorage.setItem("dateData", JSON.stringify([]));
+  };
 
   // * html 부분
   return (
     <div>
       <div>
         <h1>한 줄 일기</h1>
+        <button onClick={handleRemoveAll}>Delete All</button>
       </div>
       <div>
         <Form
@@ -52,8 +67,9 @@ function App() {
           setDiaryText={setDiaryText}
         />
         <List
-          // diaryValue={diaryValue}
-          // dateValue={dateValue}
+          // id={data.id} 
+          // diaryValue={data.diaryValue}
+          // dateValue={data.dateValue}
           diaryData={diaryData}
           setDiaryData={setDiaryData}
           dateData={dateData}
diff --git a/src/components/Form.js b/src/components/Form.js
index 4c5acdc..03df17b 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -8,18 +8,16 @@ export default function Form({
   setDateText,
 }) {
   const handleDiaryChange = (e) => {
-    setDiaryText(e.target.value);
+    setDiaryText(e.target.diaryText);
   };
 
   const handleDateChange = (e) => {
-    setDateText(e.target.value);
+    setDateText(e.target.dateText);
   };
 
   // * html 부분
   return (
-    <form 
-    className="dataInputField" 
-    onSubmit={handleSubmitDiary}>
+    <form className="dataInputField" onSubmit={handleSubmitDiary}>
       <input
         type="text"
         name="dateInput"
@@ -36,8 +34,7 @@ export default function Form({
         value={diaryText}
         onChange={handleDiaryChange}
       />
-      <input type="submit" value="입력" className="dataInputButton" 
-      />
+      <input type="submit" value="입력" className="dataInputButton" />
     </form>
   );
 }
diff --git a/src/components/List.js b/src/components/List.js
index cab139a..dbd731f 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -10,25 +10,24 @@ const List = ({
   setDateData,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
-  const [editedDateText, setEditedDateText] = useState(dateValue);
-  const [editedDiaryText, setEditedDiaryText] = useState(diaryValue);
+  const [editedDiaryValue, setEditedDiaryValue] = useState(diaryValue);
+  const [editedDateValue, setEditedDateValue] = useState(dateValue);
 
   // 업데이트 할 때 입력 받는 부분?
-  const handleDateEditChange = (e) => {
-    setEditedDateText(e.target.dateText);
-  };
-
   const handleDiaryEditChange = (e) => {
-    setEditedDiaryText(e.target.diaryText);
+    setEditedDiaryValue(e.target.diaryText);
   };
-
+  const handleDateEditChange = (e) => {
+    setEditedDateValue(e.target.dateText); //e.target.value?
+  };
+  
   // * Update 기능
   const handleSubmit = (e) => {
     e.preventDefault();
 
     let newDiaryData = diaryData.map((data) => {
       if (data.id === id) {
-        data.title = editedDiaryText;
+        data.diaryValue = editedDiaryValue;
       }
       return data;
     });
@@ -37,7 +36,7 @@ const List = ({
 
     let newDateData = dateData.map((data) => {
       if (data.id === id) {
-        data.title = editedDateText;
+        data.dateValue = editedDateValue;
       }
       return data;
     });
@@ -66,12 +65,12 @@ const List = ({
         <form onSubmit={handleSubmit}>
           <input
             className="editDateText"
-            value={editedDateText}
+            value={editedDateValue}
             onChange={handleDateEditChange}
           />
           <input
             className="editDiaryText"
-            value={editedDiaryText}
+            value={editedDiaryValue}
             onChange={handleDiaryEditChange}
             autoFocus /* 웹 페이지를 열었을 때 해당 요소에 자동으로 커서가 위치하여 사용자가 바로 입력을 시작할 수 있게 함 */
           />

From 8fc92572a599e12703e442c605787c6b6dcf90e9 Mon Sep 17 00:00:00 2001
From: Jisoo Kim <ooSoo2Soo2oo@gmail.com>
Date: Fri, 7 Jul 2023 14:18:18 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EC=88=98=EC=A0=95:=20=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EB=B0=9B=EB=8A=94=20value=20=EA=B0=92=20=EC=98=AC=EB=B0=94?=
 =?UTF-8?q?=EB=A5=B4=EA=B2=8C=20=EC=A7=80=EC=A0=95=20+=20=EC=83=88?=
 =?UTF-8?q?=EB=A1=9C=EC=9A=B4=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=EC=97=90=20=ED=91=9C=ED=98=84=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js             | 14 +++++++----
 src/components/Form.js |  4 +--
 src/components/List.js | 57 ++++++++++++++++++++++++++----------------
 3 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/src/App.js b/src/App.js
index 033c055..c8fed56 100644
--- a/src/App.js
+++ b/src/App.js
@@ -36,16 +36,20 @@ function App() {
     };
 
     // 기존 일기에 새로운 일기, 날짜 추가
-    setDiaryData((prev) => [...prev, newDiary]);
+    setDiaryData((prev) => [newDiary, ...prev]);
     localStorage.setItem("diaryData", JSON.stringify([newDiary, ...diaryData]));
-    setDateData((prev) => [...prev, newDate]);
+    setDateData((prev) => [newDate, ...prev]);
     localStorage.setItem("dateData", JSON.stringify([newDate, ...dateData]));
 
     // 입력란에 있던 글씨 지워주기
     setDiaryText("");
     setDateText("");
+
+    console.log(diaryData);
+    console.log(dateData);
   };
 
+  // 전체 삭제
   const handleRemoveAll = () => {
     setDiaryData([]);
     setDateData([]);
@@ -64,12 +68,12 @@ function App() {
         <Form
           handleSubmitDiary={handleSubmitDiary}
           diaryText={diaryText}
+          dateText={dateText}
           setDiaryText={setDiaryText}
+          setDateText={setDateText}
         />
         <List
-          // id={data.id} 
-          // diaryValue={data.diaryValue}
-          // dateValue={data.dateValue}
+     
           diaryData={diaryData}
           setDiaryData={setDiaryData}
           dateData={dateData}
diff --git a/src/components/Form.js b/src/components/Form.js
index 03df17b..29b889b 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -8,11 +8,11 @@ export default function Form({
   setDateText,
 }) {
   const handleDiaryChange = (e) => {
-    setDiaryText(e.target.diaryText);
+    setDiaryText(e.target.value);
   };
 
   const handleDateChange = (e) => {
-    setDateText(e.target.dateText);
+    setDateText(e.target.value);
   };
 
   // * html 부분
diff --git a/src/components/List.js b/src/components/List.js
index dbd731f..8e7680c 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -10,18 +10,18 @@ const List = ({
   setDateData,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
-  const [editedDiaryValue, setEditedDiaryValue] = useState(diaryValue);
   const [editedDateValue, setEditedDateValue] = useState(dateValue);
+  const [editedDiaryValue, setEditedDiaryValue] = useState(diaryValue); // Edit 할 때 입력되어 있는 부분
 
   // 업데이트 할 때 입력 받는 부분?
   const handleDiaryEditChange = (e) => {
-    setEditedDiaryValue(e.target.diaryText);
+    setEditedDiaryValue(e.target.value);
   };
   const handleDateEditChange = (e) => {
-    setEditedDateValue(e.target.dateText); //e.target.value?
+    setEditedDateValue(e.target.value); //e.target.diaryText 이런 식으로 하면 안 됨
   };
-  
-  // * Update 기능
+
+  // * Update 기능 (save 클릭했을 때 호출)
   const handleSubmit = (e) => {
     e.preventDefault();
 
@@ -61,7 +61,7 @@ const List = ({
   if (isEditing) {
     /* isEditing이 true 즉, 수정 중인 데이터 */
     return (
-      <div>
+      <div className="stateOfEditing">
         <form onSubmit={handleSubmit}>
           <input
             className="editDateText"
@@ -70,7 +70,7 @@ const List = ({
           />
           <input
             className="editDiaryText"
-            value={editedDiaryValue}
+            value={editedDiaryValue} /* 저장된 텍스트 값 부분 */
             onChange={handleDiaryEditChange}
             autoFocus /* 웹 페이지를 열었을 때 해당 요소에 자동으로 커서가 위치하여 사용자가 바로 입력을 시작할 수 있게 함 */
           />
@@ -89,21 +89,33 @@ const List = ({
   } else {
     /* isEditing이 false 즉, 작성이 완료된 데이터 */
     return (
-      <div>
-        <span className="editedDate">
-            {dateValue}
-        </span>
-        <span className="editedDiary">
-            {diaryValue}
-        </span>
+      <div className="notEditingState">
+        <div style={{ display: "flex" }}>
+          <div>
+            {diaryData.map((data) => (
+              <div style={{ display: "flex" }} key={data.id}> {/* 각 리스트들의 고유 key 가 필요함 */}
+                {data.diaryValue}
 
-        <div className="isEditedButtons">
-          <button onClick={() => handleRemove(id)} className="removeButton">
-            X
-          </button>
-          <button onClick={() => setIsEditing(true)} className="editButton">
-            Edit
-          </button>
+                <span className="editedDate">{dateValue}</span>
+                <span className="editedDiary">{diaryValue}</span>
+
+                <div className="isEditedButtons">
+                  <button
+                    onClick={() => handleRemove(data.id)}
+                    className="removeButton"
+                  >
+                    X
+                  </button>
+                  <button
+                    onClick={() => setIsEditing(true)}
+                    className="editButton"
+                  >
+                    Edit
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
         </div>
       </div>
     );
@@ -111,3 +123,6 @@ const List = ({
 };
 
 export default List;
+
+//Edit 눌렀을 때 값이 남아 있게 해 줘야 함
+//dateData로 나누지 말고 newDiary에 date값까지 들어가게 해 줘야 함
\ No newline at end of file

From 01070c046c3f3b8621a45821e6aac10b69402f4d Mon Sep 17 00:00:00 2001
From: Jisoo Kim <ooSoo2Soo2oo@gmail.com>
Date: Fri, 7 Jul 2023 17:27:59 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js             | 23 +--------------------
 src/components/Form.js | 15 +-------------
 src/components/List.js | 47 ++++++++----------------------------------
 3 files changed, 11 insertions(+), 74 deletions(-)

diff --git a/src/App.js b/src/App.js
index c8fed56..0967146 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,9 +6,6 @@ import List from "./components/List";
 const initialDiaryData = localStorage.getItem("diaryData")
   ? JSON.parse(localStorage.getItem("diaryData"))
   : [];
-const initialDateData = localStorage.getItem("dateData")
-  ? JSON.parse(localStorage.getItem("dateData"))
-  : [];
 
 // JSON.parse() 함수는 JSON 형식의 문자열을 JavaScript 객체로 변환
 // 일반적으로 아래와 같은 방식으로 JSON.stringify(), JSON.parse() 사용
@@ -16,9 +13,7 @@ const initialDateData = localStorage.getItem("dateData")
 
 function App() {
   const [diaryData, setDiaryData] = useState(initialDiaryData);
-  const [dateData, setDateData] = useState(initialDateData);
   const [diaryText, setDiaryText] = useState("");
-  const [dateText, setDateText] = useState("");
 
   // 일기 추가가 안 되는데 문제가 뭔지 모르겠음. id 문제인가?
   // * Create 기능
@@ -30,31 +25,19 @@ function App() {
       id: Date.now(),
       diaryValue: diaryText,
     };
-    let newDate = {
-      id: Date.now(),
-      dateValue: dateText,
-    };
 
     // 기존 일기에 새로운 일기, 날짜 추가
     setDiaryData((prev) => [newDiary, ...prev]);
     localStorage.setItem("diaryData", JSON.stringify([newDiary, ...diaryData]));
-    setDateData((prev) => [newDate, ...prev]);
-    localStorage.setItem("dateData", JSON.stringify([newDate, ...dateData]));
 
     // 입력란에 있던 글씨 지워주기
     setDiaryText("");
-    setDateText("");
-
-    console.log(diaryData);
-    console.log(dateData);
   };
 
   // 전체 삭제
   const handleRemoveAll = () => {
     setDiaryData([]);
-    setDateData([]);
     localStorage.setItem("diaryData", JSON.stringify([]));
-    localStorage.setItem("dateData", JSON.stringify([]));
   };
 
   // * html 부분
@@ -68,16 +51,12 @@ function App() {
         <Form
           handleSubmitDiary={handleSubmitDiary}
           diaryText={diaryText}
-          dateText={dateText}
           setDiaryText={setDiaryText}
-          setDateText={setDateText}
         />
         <List
-     
+          diaryText={diaryText}
           diaryData={diaryData}
           setDiaryData={setDiaryData}
-          dateData={dateData}
-          setDateData={setDateData}
         />
       </div>
     </div>
diff --git a/src/components/Form.js b/src/components/Form.js
index 29b889b..a680e66 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -3,29 +3,16 @@ import React from "react";
 export default function Form({
   handleSubmitDiary,
   diaryText,
-  dateText,
-  setDiaryText,
-  setDateText,
+  setDiaryText
 }) {
   const handleDiaryChange = (e) => {
     setDiaryText(e.target.value);
   };
 
-  const handleDateChange = (e) => {
-    setDateText(e.target.value);
-  };
 
   // * html 부분
   return (
     <form className="dataInputField" onSubmit={handleSubmitDiary}>
-      <input
-        type="text"
-        name="dateInput"
-        className="dateDataInput"
-        placeholder="xxxx-xx-xx"
-        value={dateText}
-        onChange={handleDateChange}
-      />
       <input
         type="text"
         name="diaryInput"
diff --git a/src/components/List.js b/src/components/List.js
index 8e7680c..cd49940 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -1,25 +1,15 @@
 import React, { useState } from "react";
 
-const List = ({
-  id,
-  diaryValue,
-  dateValue,
-  diaryData,
-  setDiaryData,
-  dateData,
-  setDateData,
-}) => {
+const List = ({ id, diaryText, diaryData, setDiaryData }) => {
   const [isEditing, setIsEditing] = useState(false);
-  const [editedDateValue, setEditedDateValue] = useState(dateValue);
-  const [editedDiaryValue, setEditedDiaryValue] = useState(diaryValue); // Edit 할 때 입력되어 있는 부분
+  const [editedDiaryValue, setEditedDiaryValue] = useState(diaryText); // Edit 할 때 입력되어 있는 부분
+
+  console.log(diaryText);
 
   // 업데이트 할 때 입력 받는 부분?
   const handleDiaryEditChange = (e) => {
     setEditedDiaryValue(e.target.value);
   };
-  const handleDateEditChange = (e) => {
-    setEditedDateValue(e.target.value); //e.target.diaryText 이런 식으로 하면 안 됨
-  };
 
   // * Update 기능 (save 클릭했을 때 호출)
   const handleSubmit = (e) => {
@@ -34,15 +24,6 @@ const List = ({
     setDiaryData(newDiaryData);
     localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
 
-    let newDateData = dateData.map((data) => {
-      if (data.id === id) {
-        data.dateValue = editedDateValue;
-      }
-      return data;
-    });
-    setDateData(newDateData);
-    localStorage.setItem("dateData", JSON.stringify(newDateData));
-
     setIsEditing(false);
   };
 
@@ -51,10 +32,6 @@ const List = ({
     let newDiaryData = diaryData.filter((data) => data.id !== id);
     setDiaryData(newDiaryData);
     localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
-
-    let newDateData = dateData.filter((data) => data.id !== id);
-    setDateData(newDateData);
-    localStorage.setItem("dateData", JSON.stringify(newDateData));
   };
 
   // * html 부분
@@ -63,11 +40,6 @@ const List = ({
     return (
       <div className="stateOfEditing">
         <form onSubmit={handleSubmit}>
-          <input
-            className="editDateText"
-            value={editedDateValue}
-            onChange={handleDateEditChange}
-          />
           <input
             className="editDiaryText"
             value={editedDiaryValue} /* 저장된 텍스트 값 부분 */
@@ -93,12 +65,11 @@ const List = ({
         <div style={{ display: "flex" }}>
           <div>
             {diaryData.map((data) => (
-              <div style={{ display: "flex" }} key={data.id}> {/* 각 리스트들의 고유 key 가 필요함 */}
+              <div style={{ display: "flex" }} key={data.id}>
+                {" "}
+                {/* 각 리스트들의 고유 key 가 필요함 */}
                 {data.diaryValue}
-
-                <span className="editedDate">{dateValue}</span>
-                <span className="editedDiary">{diaryValue}</span>
-
+                <span className="editedDiary">{diaryText}</span>
                 <div className="isEditedButtons">
                   <button
                     onClick={() => handleRemove(data.id)}
@@ -125,4 +96,4 @@ const List = ({
 export default List;
 
 //Edit 눌렀을 때 값이 남아 있게 해 줘야 함
-//dateData로 나누지 말고 newDiary에 date값까지 들어가게 해 줘야 함
\ No newline at end of file
+//dateData로 나누지 말고 newDiary에 date값까지 들어가게 해 줘야 함

From 999a850c18db20542d2d502d6cba83ce43ced42d Mon Sep 17 00:00:00 2001
From: Jisoo Kim <ooSoo2Soo2oo@gmail.com>
Date: Sat, 8 Jul 2023 11:25:47 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20diaryDate?=
 =?UTF-8?q?=EA=B0=80=20=ED=99=94=EB=A9=B4=EC=97=90=20=EC=95=88=20=EB=82=98?=
 =?UTF-8?q?=ED=83=80=EB=82=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EB=B0=9C?=
 =?UTF-8?q?=EC=83=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                 |   7 ++-
 src/components/Form.js     |  15 ++++-
 src/components/List.js     | 113 +++++++------------------------------
 src/components/ListItem.js |  90 +++++++++++++++++++++++++++++
 src/components/Lists.js    |   0
 5 files changed, 129 insertions(+), 96 deletions(-)
 create mode 100644 src/components/ListItem.js
 delete mode 100644 src/components/Lists.js

diff --git a/src/App.js b/src/App.js
index 0967146..39f15a5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,8 +14,9 @@ const initialDiaryData = localStorage.getItem("diaryData")
 function App() {
   const [diaryData, setDiaryData] = useState(initialDiaryData);
   const [diaryText, setDiaryText] = useState("");
+  const [diaryDate, setDiaryDate] = useState("");
+
 
-  // 일기 추가가 안 되는데 문제가 뭔지 모르겠음. id 문제인가?
   // * Create 기능
   const handleSubmitDiary = (e) => {
     e.preventDefault();
@@ -24,6 +25,7 @@ function App() {
     let newDiary = {
       id: Date.now(),
       diaryValue: diaryText,
+      diaryDate: diaryDate
     };
 
     // 기존 일기에 새로운 일기, 날짜 추가
@@ -32,6 +34,7 @@ function App() {
 
     // 입력란에 있던 글씨 지워주기
     setDiaryText("");
+    setDiaryDate("");
   };
 
   // 전체 삭제
@@ -52,6 +55,8 @@ function App() {
           handleSubmitDiary={handleSubmitDiary}
           diaryText={diaryText}
           setDiaryText={setDiaryText}
+          diaryDate={diaryDate}
+          setDiaryDate={setDiaryDate}
         />
         <List
           diaryText={diaryText}
diff --git a/src/components/Form.js b/src/components/Form.js
index a680e66..86561c2 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -3,16 +3,29 @@ import React from "react";
 export default function Form({
   handleSubmitDiary,
   diaryText,
-  setDiaryText
+  diaryDate,
+  setDiaryText,
+  setDiaryDate
 }) {
   const handleDiaryChange = (e) => {
     setDiaryText(e.target.value);
   };
+  const handleDateChange = (e) => {
+    setDiaryDate(e.target.value);;
+  };
 
 
   // * html 부분
   return (
     <form className="dataInputField" onSubmit={handleSubmitDiary}>
+      <input
+        type="text"
+        name="diaryInput"
+        className="dairyDateInput"
+        placeholder="한 줄 일기를 작성하세요."
+        value={diaryDate}
+        onChange={handleDateChange}
+      />
       <input
         type="text"
         name="diaryInput"
diff --git a/src/components/List.js b/src/components/List.js
index cd49940..535300c 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -1,99 +1,24 @@
-import React, { useState } from "react";
-
-const List = ({ id, diaryText, diaryData, setDiaryData }) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editedDiaryValue, setEditedDiaryValue] = useState(diaryText); // Edit 할 때 입력되어 있는 부분
-
-  console.log(diaryText);
-
-  // 업데이트 할 때 입력 받는 부분?
-  const handleDiaryEditChange = (e) => {
-    setEditedDiaryValue(e.target.value);
-  };
-
-  // * Update 기능 (save 클릭했을 때 호출)
-  const handleSubmit = (e) => {
-    e.preventDefault();
-
-    let newDiaryData = diaryData.map((data) => {
-      if (data.id === id) {
-        data.diaryValue = editedDiaryValue;
-      }
-      return data;
-    });
-    setDiaryData(newDiaryData);
-    localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
-
-    setIsEditing(false);
-  };
-
-  // * Delete 기능
-  const handleRemove = (id) => {
-    let newDiaryData = diaryData.filter((data) => data.id !== id);
-    setDiaryData(newDiaryData);
-    localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
-  };
-
-  // * html 부분
-  if (isEditing) {
-    /* isEditing이 true 즉, 수정 중인 데이터 */
-    return (
-      <div className="stateOfEditing">
-        <form onSubmit={handleSubmit}>
-          <input
-            className="editDiaryText"
-            value={editedDiaryValue} /* 저장된 텍스트 값 부분 */
-            onChange={handleDiaryEditChange}
-            autoFocus /* 웹 페이지를 열었을 때 해당 요소에 자동으로 커서가 위치하여 사용자가 바로 입력을 시작할 수 있게 함 */
-          />
-        </form>
-
-        <div className="isEditingButtons">
-          <button onClick={() => setIsEditing(false)} type="button">
-            X
-          </button>
-          <button onClick={handleSubmit} type="submit">
-            Save
-          </button>
+import React from "react";
+import ListItem from "./ListItem";
+
+const List = ({ diaryData, setDiaryData }) => {
+  return (
+    <div className="listItems">
+      <div style={{ display: "flex" }}>
+        <div>
+          {diaryData.map((data) => (
+            <ListItem
+              key={data.key}
+              id={data.id}
+              diaryValue={data.diaryValue}
+              diaryData={diaryData}
+              setDiaryData={setDiaryData}
+            />
+          ))}
         </div>
       </div>
-    );
-  } else {
-    /* isEditing이 false 즉, 작성이 완료된 데이터 */
-    return (
-      <div className="notEditingState">
-        <div style={{ display: "flex" }}>
-          <div>
-            {diaryData.map((data) => (
-              <div style={{ display: "flex" }} key={data.id}>
-                {" "}
-                {/* 각 리스트들의 고유 key 가 필요함 */}
-                {data.diaryValue}
-                <span className="editedDiary">{diaryText}</span>
-                <div className="isEditedButtons">
-                  <button
-                    onClick={() => handleRemove(data.id)}
-                    className="removeButton"
-                  >
-                    X
-                  </button>
-                  <button
-                    onClick={() => setIsEditing(true)}
-                    className="editButton"
-                  >
-                    Edit
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  }
+    </div>
+  );
 };
 
 export default List;
-
-//Edit 눌렀을 때 값이 남아 있게 해 줘야 함
-//dateData로 나누지 말고 newDiary에 date값까지 들어가게 해 줘야 함
diff --git a/src/components/ListItem.js b/src/components/ListItem.js
new file mode 100644
index 0000000..7d60c1f
--- /dev/null
+++ b/src/components/ListItem.js
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+
+const ListItem = ({ id, diaryValue, diaryDate, diaryData, setDiaryData }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedDiaryValue, setEditedDiaryValue] = useState(diaryValue); // Edit 할 때 입력되어 있는 부분
+  const [editedDiaryDate, setEditedDiaryDate] = useState(diaryDate);
+
+  console.log("editedDiaryDate", editedDiaryDate);
+
+  // 업데이트 할 때 입력 받는 부분?
+  const handleDiaryEditChange = (e) => {
+    setEditedDiaryValue(e.target.value);
+    setEditedDiaryDate(e.target.value);
+  };
+
+  // * Update 기능 (save 클릭했을 때 호출)
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    let newDiaryData = diaryData.map((data) => {
+      if (data.id === id) {
+        data.diaryValue = editedDiaryValue;
+        data.diaryDate = editedDiaryDate;
+      }
+      return data;
+    });
+    setDiaryData(newDiaryData);
+    localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
+
+    setIsEditing(false);
+  };
+
+  // * Delete 기능
+  const handleRemove = (id) => {
+    let newDiaryData = diaryData.filter((data) => data.id !== id);
+    setDiaryData(newDiaryData);
+    localStorage.setItem("diaryData", JSON.stringify(newDiaryData));
+  };
+
+  // * html 부분
+  if (isEditing) {
+    /* isEditing이 true 즉, 수정 중인 데이터 */
+    return (
+      <div className="stateOfEditing">
+        <form onSubmit={handleSubmit}>
+          <input
+            className="editDiaryText"
+            value={editedDiaryDate}
+            onChange={handleDiaryEditChange}
+          />
+          <input
+            className="editDiaryText"
+            value={editedDiaryValue} /* 저장된 텍스트 값 부분 */
+            onChange={handleDiaryEditChange}
+            autoFocus /* 웹 페이지를 열었을 때 해당 요소에 자동으로 커서가 위치하여 사용자가 바로 입력을 시작할 수 있게 함 */
+          />
+        </form>
+
+        <div className="isEditingButtons">
+          <button onClick={() => setIsEditing(false)} type="button">
+            X
+          </button>
+          <button onClick={handleSubmit} type="submit">
+            Save
+          </button>
+        </div>
+      </div>
+    );
+  } else {
+    /* isEditing이 false 즉, 작성이 완료된 데이터 */
+    return (
+      <div style={{ display: "flex" }} key={id}>
+        {" "}
+        {/* 각 리스트들의 고유 key 가 필요함 */}
+        <span className="editDate">{diaryDate}</span>
+        <span className="editDiary">{diaryValue}</span>
+        <div className="isEditedButtons">
+          <button onClick={() => handleRemove(id)} className="removeButton">
+            X
+          </button>
+          <button onClick={() => setIsEditing(true)} className="editButton">
+            Edit
+          </button>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default ListItem;
diff --git a/src/components/Lists.js b/src/components/Lists.js
deleted file mode 100644
index e69de29..0000000

From cba6c07ad30393d9d21bdf546ce8750cbf9abedc Mon Sep 17 00:00:00 2001
From: Jisoo Kim <ooSoo2Soo2oo@gmail.com>
Date: Sat, 8 Jul 2023 11:42:23 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C.=20css=EB=A7=8C=20=ED=95=98=EB=A9=B4=20?=
 =?UTF-8?q?=EB=90=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form.js     |  4 ++--
 src/components/List.js     |  1 +
 src/components/ListItem.js | 23 ++++++++++++++++-------
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index 86561c2..1849605 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -20,7 +20,7 @@ export default function Form({
     <form className="dataInputField" onSubmit={handleSubmitDiary}>
       <input
         type="text"
-        name="diaryInput"
+        name="diaryDateInput"
         className="dairyDateInput"
         placeholder="한 줄 일기를 작성하세요."
         value={diaryDate}
@@ -28,7 +28,7 @@ export default function Form({
       />
       <input
         type="text"
-        name="diaryInput"
+        name="diaryValueInput"
         className="dairyDataInput"
         placeholder="한 줄 일기를 작성하세요."
         value={diaryText}
diff --git a/src/components/List.js b/src/components/List.js
index 535300c..8fc357e 100644
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -11,6 +11,7 @@ const List = ({ diaryData, setDiaryData }) => {
               key={data.key}
               id={data.id}
               diaryValue={data.diaryValue}
+              diaryDate={data.diaryDate}
               diaryData={diaryData}
               setDiaryData={setDiaryData}
             />
diff --git a/src/components/ListItem.js b/src/components/ListItem.js
index 7d60c1f..96d4554 100644
--- a/src/components/ListItem.js
+++ b/src/components/ListItem.js
@@ -5,12 +5,15 @@ const ListItem = ({ id, diaryValue, diaryDate, diaryData, setDiaryData }) => {
   const [editedDiaryValue, setEditedDiaryValue] = useState(diaryValue); // Edit 할 때 입력되어 있는 부분
   const [editedDiaryDate, setEditedDiaryDate] = useState(diaryDate);
 
-  console.log("editedDiaryDate", editedDiaryDate);
 
   // 업데이트 할 때 입력 받는 부분?
   const handleDiaryEditChange = (e) => {
-    setEditedDiaryValue(e.target.value);
-    setEditedDiaryDate(e.target.value);
+    const { name, value } = e.target;
+    if (name === "diaryValue") {
+      setEditedDiaryValue(e.target.value);
+    } else if (name === "diaryDate") {
+      setEditedDiaryDate(e.target.value);
+    }
   };
 
   // * Update 기능 (save 클릭했을 때 호출)
@@ -44,12 +47,14 @@ const ListItem = ({ id, diaryValue, diaryDate, diaryData, setDiaryData }) => {
       <div className="stateOfEditing">
         <form onSubmit={handleSubmit}>
           <input
-            className="editDiaryText"
+            className="editDiaryDate"
+            name="diaryDate"
             value={editedDiaryDate}
             onChange={handleDiaryEditChange}
           />
           <input
-            className="editDiaryText"
+            className="editDiaryValue"
+            name="diaryValue"
             value={editedDiaryValue} /* 저장된 텍스트 값 부분 */
             onChange={handleDiaryEditChange}
             autoFocus /* 웹 페이지를 열었을 때 해당 요소에 자동으로 커서가 위치하여 사용자가 바로 입력을 시작할 수 있게 함 */
@@ -72,8 +77,12 @@ const ListItem = ({ id, diaryValue, diaryDate, diaryData, setDiaryData }) => {
       <div style={{ display: "flex" }} key={id}>
         {" "}
         {/* 각 리스트들의 고유 key 가 필요함 */}
-        <span className="editDate">{diaryDate}</span>
-        <span className="editDiary">{diaryValue}</span>
+        <span className="editDate">
+          {diaryDate}
+        </span>
+        <span className="editDiary">
+          {diaryValue}
+        </span>
         <div className="isEditedButtons">
           <button onClick={() => handleRemove(id)} className="removeButton">
             X