From 4297d185797881107a471c4eb3c1537dfd1662dd Mon Sep 17 00:00:00 2001
From: Jun Seong <drawbeat0112@gmail.com>
Date: Thu, 21 Sep 2023 10:10:36 +0900
Subject: [PATCH] =?UTF-8?q?=EB=82=98=EC=9D=98=20=EB=8B=A4=EC=A7=90=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/MotivationForm.jsx |  6 ++---
 client/src/components/MotivationList.jsx |  5 ++--
 client/src/style/Motivation.js           | 32 ++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/client/src/components/MotivationForm.jsx b/client/src/components/MotivationForm.jsx
index c3a2140..509c3f3 100644
--- a/client/src/components/MotivationForm.jsx
+++ b/client/src/components/MotivationForm.jsx
@@ -5,7 +5,7 @@ import {  MotivaionFormBox } from '../style/Motivation'
 
 const SERVER_URL = import.meta.env.VITE_SERVER_URL;
 
-const MotivationForm = ({isPost, setIsPost}, setFormattedTime) => {
+const MotivationForm = ({isPost, setIsPost , setFormattedTime}) => {
   const [memo, setMemo] = useState('');
 
   const userInfo = useSelector((state) => state.user);
@@ -40,8 +40,8 @@ const MotivationForm = ({isPost, setIsPost}, setFormattedTime) => {
         }
       );
 
-      // const savedMemo = response.data;
-      // setMemo([...memo, savedMemo]);
+      const savedMemo = response.data;
+      setMemo([...memo, savedMemo]);
 
       setMemo('');
       setIsPost(!isPost);
diff --git a/client/src/components/MotivationList.jsx b/client/src/components/MotivationList.jsx
index 5e05cf9..f7606bf 100644
--- a/client/src/components/MotivationList.jsx
+++ b/client/src/components/MotivationList.jsx
@@ -1,6 +1,7 @@
 import {  useEffect , useState} from 'react';
 import axios from 'axios';
 import { useSelector } from 'react-redux';
+import {MotivationListSection} from '../style/Motivation'
 
 const SERVER_URL = import.meta.env.VITE_SERVER_URL;
 
@@ -32,7 +33,7 @@ const MemoList = ( {isPost, formattedTime} ) => {
   };
 
   return (
-    <div>
+    <MotivationListSection>
       <h2>Motivation List</h2>
       <ul>
         {memos.map((memo) => (
@@ -42,7 +43,7 @@ const MemoList = ( {isPost, formattedTime} ) => {
           </li>
         ))}
       </ul>
-    </div>
+    </MotivationListSection>
   );
 };
 
diff --git a/client/src/style/Motivation.js b/client/src/style/Motivation.js
index a676a93..d09dd43 100644
--- a/client/src/style/Motivation.js
+++ b/client/src/style/Motivation.js
@@ -74,4 +74,36 @@ export const MotivationPages = styled.div`
         background-color: #09305E;
       }
     }
+  `
+
+  export const MotivationListSection = styled.div`
+    height: calc(100% - 10rem);
+    overflow: auto;
+
+    ul{
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 1.875rem;
+      padding: 0 1.25rem;
+    }
+    li{
+      display: flex;
+      flex-direction: column;
+      gap: 1.875rem;
+      width: 50%;
+      border: 1px solid var(--navy);
+      padding: 2.5rem 1.25rem;
+      border-radius: 30px;
+    }
+    li > p{
+      font-size: 2rem;
+      font-family: var(--nanum);
+    }
+    li > span{
+      align-self: flex-end;
+      font-size: .875rem;
+      color: #414141;
+      
+    }
   `
\ No newline at end of file