Merge pull request #63 from obb8923/master

m
kookmin-sw · May 9, 2024 · 575debe · 575debe
2 parents 981af39 + ec1c748
commit 575debe
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 12 deletions.
diff --git a/front/src/components/MoreButton.js b/front/src/components/MoreButton.js
@@ -1,13 +1,35 @@
 import React from "react";
-import styles from "../css/MoreButton.module.css"
+import styles from "../css/MoreButton.module.css";
+import { useDispatch } from "react-redux";
+import { signOut } from "../redux/actions";
+import { useNavigate } from "react-router-dom";
+
 function MoreButton({nav}){
-    // const moreButton = document.querySelector(`.${styles.MoreButton}`)
-    // moreButton.addEventListener('click',()=>{})
+    const navigate = useNavigate();
+    const dispatch = useDispatch(); 
+    const handleClick =()=>{
+        switch(nav){
+            case 'modifyInfo':
+                break;
+            case 'announcement':
+                break;
+            case 'contactUs':
+                break;
+            case 'signOut':
+                signOutSequence();
+                break;
+            default:
+                break;
+        }
+    }
+    const signOutSequence=()=>{
+        dispatch(signOut());
+        navigate('/signIn');
+    }
     return (<>
-    <div className={styles.MoreButton}>
-        
+    <div className={styles.MoreButton} onClick={handleClick}>
+    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.3999 19.2058L2.72011 17.794C4.61414 19.7116 7.24477 20.4587 10.1529 20.4587C15.9226 20.4587 20.5999 15.7815 20.5999 10.0118C20.5999 7.15025 19.4494 4.55744 17.5858 2.67066L18.9056 1.54126M16.3468 9.69412C16.3468 13.4464 13.305 16.4882 9.55276 16.4882C5.80051 16.4882 2.75871 13.4464 2.75871 9.69412C2.75871 5.94187 5.80051 2.90007 9.55276 2.90007C13.305 2.90007 16.3468 5.94187 16.3468 9.69412Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
     </div>
-
     </>);
 }
 

diff --git a/front/src/components/MorePage.js b/front/src/components/MorePage.js
@@ -31,8 +31,10 @@ function MorePage() {
                 {/* Functional buttons */}
                 <div className={styles.buttonBox}>
                     {/* 정보수정,공지사항,문의하기,로그아웃 */}
-                    <div></div><div></div><div></div><div></div>
-
+                    <MoreButton nav='modifyInfo'/>
+                    <MoreButton nav='announcement'/>
+                    <MoreButton nav='contactUs'/>
+                    <MoreButton nav='signOut'/>                   
                 </div>
                 {/* Written Posts */}
                 <div className={styles.libraryBox}>

diff --git a/front/src/css/MoreButton.module.css b/front/src/css/MoreButton.module.css
@@ -0,0 +1,3 @@
+.MoreButton:hover{
+    cursor:pointer;
+}
diff --git a/front/src/css/MorePage.module.css b/front/src/css/MorePage.module.css
@@ -18,7 +18,7 @@
 .buttonBox div{
     width:40px;
     aspect-ratio: 1/1;
-    background-color: blueviolet;
+    /* background-color: blueviolet; */
 }
 .libraryBox{
     width:91vw;
@@ -36,9 +36,17 @@
     border:5px solid darkcyan;
 }
 .postBox{
-    width:30px;
-    height:20vh;
+
+    /* width:30px;
+    height:20vh; */
     border:0.5px solid green;
     align-content: center;
     margin: 1vh ;
+    padding : 1em;
+    writing-mode: vertical-rl;/* 세로글쓰기 */
+    text-orientation: upright; /* 누운 글자들을 수직으로 세우기 */
+    overflow: hidden; /* 넘어가면 안보이게 */
+    height: 17em;     /* div의 높이를 17em으로 제한*/
+    line-height: 1em; /* 각 글자의 세로 높이를 1em으로 설정 */
+    width: 4.5em;       /* 너비도 1em으로 설정하여 글자가 딱 맞게 들어가도록 함 */
 }
diff --git a/front/src/redux/reducers.js b/front/src/redux/reducers.js
@@ -1,7 +1,7 @@
 
 const initialState = {
     isSignIn:false,
-    UID:'0'
+    UID:''
 };
 
 function isSignInReducer(state = initialState, action) {