Merge pull request #142 from codestates-seb/fe_kjs

나의 다짐 페이지 구현완료
codestates-seb · Sep 21, 2023 · 8c97401 · 8c97401
2 parents 1f9aba5 + 4297d18
commit 8c97401
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;
+      
+    }
   `