[#49]Feat:마이 페이지 라우팅

Sweet-red-beans · Mar 17, 2022 · f75dd73 · f75dd73
1 parent 862f25b
commit f75dd73
Show file tree

Hide file tree

Showing 17 changed files with 64 additions and 323 deletions.
diff --git a/frontend/sweet-red-beans/src/components/Comment/Comment.js b/frontend/sweet-red-beans/src/components/Comment/Comment.js
@@ -3,6 +3,7 @@ import axios from "axios";
 import { useNavigate } from "react-router";
 import { useSelector } from "react-redux";
 import style from "../../css/Comment/Comment.module.css";
+import { parseDate } from "../../parseDate/parseDate";
 
 const Comment = ({comment}) => {
     console.log("댓글 렌더");
@@ -59,32 +60,6 @@ const Comment = ({comment}) => {
         cancelConfirm
     );
 
-    //날짜 형식 바꾸기
-    const parseDate = (written_date) => {
-        const d = new Date(written_date);
-        const year = d.getFullYear();
-        let month = d.getMonth();
-        let date = d.getDate();
-        let hours = d.getHours();
-        let min = d.getMinutes();
-        if(month<10){
-            month = '0'+month;
-        }
-        if(date<10){
-            date = '0'+date;
-        }
-        if(hours<10){
-            hours = '0'+hours;
-        }
-        if(min<10){
-            min = '0'+min;
-        }
-        return (
-            `${year}-${month}-${date} ${hours} : ${min}`
-        )
-    }
-
-    console.log(comment.comment_nickname);
     return (
         <>
         <div className={style.comment}>

diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js b/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
@@ -8,6 +8,7 @@ import Modal from "../../components/Modals/TransactionModal";
 import style from "../../css/DMPage/DMDetail.module.css";
 import { useDispatch, useSelector } from "react-redux";
 import { SELECTED_DM } from "../../actions/types";
+import { parseDate } from "../../parseDate/parseDate";
 
 let stompClient = null;
 
@@ -259,30 +260,6 @@ const DMDetail = ({selectedRoom}) => {
 
     }, [imgFile])
 
-    const parseDate = (written_date) => {
-        const d = new Date(written_date);
-        const year = d.getFullYear();
-        let month = d.getMonth();
-        let date = d.getDate();
-        let hours = d.getHours();
-        let min = d.getMinutes();
-        if(month<10){
-            month = '0'+month;
-        }
-        if(date<10){
-            date = '0'+date;
-        }
-        if(hours<10){
-            hours = '0'+hours;
-        }
-        if(min<10){
-            min = '0'+min;
-        }
-        return (
-            `${year}-${month}-${date} ${hours}:${min}`
-        )
-    }
-
     return (
         <>
         <Modal open={modalOpen} close={closeModal} header="신고하기">

diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js b/frontend/sweet-red-beans/src/components/DMPage/DMListThumbnail.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import style from "../../css/DMPage/DMListThumbnail.module.css";
+import { parseDate } from "../../parseDate/parseDate";
 
 const DMListThumbnail = ({dm}) => {
     const [currentRoom, setCurrentRoom] = useState(false);
@@ -26,34 +27,6 @@ const DMListThumbnail = ({dm}) => {
         }
     }, [selectedRoomId])
 
-
-    const parseDate = (written_date) => {
-        const d = new Date(written_date);
-        const year = d.getFullYear();
-        let month = d.getMonth();
-        let date = d.getDate();
-        let hours = d.getHours();
-        let min = d.getMinutes();
-        if(month<10){
-            month = '0'+month;
-        }
-        if(date<10){
-            date = '0'+date;
-        }
-        if(hours<10){
-            hours = '0'+hours;
-        }
-        if(min<10){
-            min = '0'+min;
-        }
-        return (
-            <>
-            <div>{year}-{month}-{date}</div>
-            <div>{hours} : {min}</div>
-            </>
-        )
-    }
-
     return (
         <>
         <div className={currentRoom ? style.currentThumbnail : style.thumbnail}>

diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationShareDetailPage.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationShareDetailPage.js
@@ -6,6 +6,7 @@ import { useSelector } from "react-redux";
 import axios from "axios";
 import { useNavigate } from "react-router";
 import style from "../../css/InformationSharePage/InformationShareDetailPage.module.css";
+import { parseDate } from "../../parseDate/parseDate";
 
 const InformationShareDetailPage = () => {
 
@@ -137,31 +138,6 @@ const InformationShareDetailPage = () => {
         }
     }
 
-    //날짜 형식 바꾸기
-    const parseDate = (written_date) => {
-        const d = new Date(written_date);
-        const year = d.getFullYear();
-        let month = d.getMonth();
-        let date = d.getDate();
-        let hours = d.getHours();
-        let min = d.getMinutes();
-        if(month<10){
-            month = '0'+month;
-        }
-        if(date<10){
-            date = '0'+date;
-        }
-        if(hours<10){
-            hours = '0'+hours;
-        }
-        if(min<10){
-            min = '0'+min;
-        }
-        return (
-            `${year}-${month}-${date} ${hours} : ${min}`
-        )
-    }
-
     return(
         <>
         <div className={style.whiteBox}>

diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationShares.js
@@ -4,7 +4,7 @@ import Pagination from "./Pagination";
 import style from "../../css/InformationSharePage/InformationShares.module.css"
 import { useSelector } from "react-redux";
 import axios from "axios";
-
+import { parseDate } from "../../parseDate/parseDate";
 
 const InformationShares = ({searchWords, sort, cinemaName, cinemaArea, cinemaBranch}) => {
     const [infos, setInfos] = useState([]);
@@ -86,31 +86,6 @@ const InformationShares = ({searchWords, sort, cinemaName, cinemaArea, cinemaBra
         }
     },[searchWords])
 
-    //날짜 형식 바꾸기
-    const parseDate = (written_date) => {
-        const d = new Date(written_date);
-        const year = d.getFullYear();
-        let month = d.getMonth();
-        let date = d.getDate();
-        let hours = d.getHours();
-        let min = d.getMinutes();
-        if(month<10){
-            month = '0'+month;
-        }
-        if(date<10){
-            date = '0'+date;
-        }
-        if(hours<10){
-            hours = '0'+hours;
-        }
-        if(min<10){
-            min = '0'+min;
-        }
-        return (
-            <div>{year}-{month}-{date} {hours} : {min}</div>
-        )
-    }
-
     console.log(infos);
 
     return (
@@ -144,9 +119,7 @@ const InformationShares = ({searchWords, sort, cinemaName, cinemaArea, cinemaBra
                 <div>{item.title}</div>
                 </Link>
                 <div>{item.nickname}</div>
-                {
-                    parseDate(item.written_date)
-                }
+                <div>{parseDate(item.written_date)}</div>
                 <div>{item.view}</div>
 
                 </article>

diff --git a/frontend/sweet-red-beans/src/components/MainContent/MainContent.js b/frontend/sweet-red-beans/src/components/MainContent/MainContent.js
@@ -18,7 +18,11 @@ import MyPageNormal from "../MyPage/MyPageNormal";
 import KakaoLogin from "../TopBar/KakaoLogin";
 import GoogleLogin from "../TopBar/GoogleLogin";
 import MyEvents from "../MyPage/MyPageDetail/MyEvents";
+import MyTransactions from "../MyPage/MyPageDetail/MyTransactions";
+import MyLikeTransactions from "../MyPage/MyPageDetail/MyLikeTransactions";
+import MyPosts from "../MyPage/MyPageDetail/MyPosts";
 import MyPageDetail from "../MyPage/MyPageDetail";
+import MyComments from "../MyPage/MyPageDetail/MyComments";
 
 const MainContenet = () => {
     return (
@@ -34,8 +38,12 @@ const MainContenet = () => {
           <Route path="/informationShare/:postid" element={<InformationShareDetailPage/>}/>
           <Route path="/transaction/*" element={<TransactionPage/>}/>
           <Route path="/DM" element={<DMPage/>}/>
-          <Route path="/mypage/*" element={<MyPageNormal/>}>
-            {/* <Route path=":detail" element={<MyEvents/>}/> */}
+          <Route path="/mypage" element={<MyPageNormal/>}>
+            <Route path="myevents" element={<MyEvents/>}/>
+            <Route path="mytransactions" element={<MyTransactions/>}/>
+            <Route path="myliketransactions" element={<MyLikeTransactions/>}/>
+            <Route path="myposts" element={<MyPosts/>}/>
+            <Route path="mycomments" element={<MyComments/>}/>
           </Route>
           <Route path="/adminpage" element={<MyPageAdmin/>}/>
           <Route path="/signin/oauth2/code/kakao" element={<KakaoLogin/>}/>

diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail.js
@@ -16,8 +16,8 @@ const MyPageDetail = ({myMenu}) => {
     }, [id])
     return (
         <>
-        <Outlet/>
-        {myComponents[myMenu]}
+
+        {/* {myComponents[myMenu]} */}
         </>
     )
 }

diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyComments.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyComments.js
@@ -4,6 +4,7 @@ import Pagination from "./Pagination";
 import { useSelector } from "react-redux";
 import style from "../../../css/MyPage/MyPageDetail/MyComments.module.css";
 import { useNavigate } from "react-router";
+import { parseDate } from "../../../parseDate/parseDate";
 
 const MyComments = () => {
     const navigation = useNavigate();
@@ -27,31 +28,6 @@ const MyComments = () => {
         navigation('/informationShare/'+postid);
     }
 
-    //날짜 형식 바꾸기
-    const parseDate = (written_date) => {
-        const d = new Date(written_date);
-        const year = d.getFullYear();
-        let month = d.getMonth();
-        let date = d.getDate();
-        let hours = d.getHours();
-        let min = d.getMinutes();
-        if(month<10){
-            month = '0'+month;
-        }
-        if(date<10){
-            date = '0'+date;
-        }
-        if(hours<10){
-            hours = '0'+hours;
-        }
-        if(min<10){
-            min = '0'+min;
-        }
-        return (
-            <div>{year}-{month}-{date} {hours} : {min}</div>
-        )
-    }
-
     return (
         <>
         <div className={style.layout}>
@@ -62,9 +38,7 @@ const MyComments = () => {
             {myComments !== undefined ? myComments.slice(offset, offset + limit).map((item, index) => (
                 <article key={index} onClick={e => postClick(item.post_id, e)}>
                     <div>{item.comment_content}</div>
-                    {
-                        parseDate(item.written_date)
-                    }
+                    <div>{parseDate(item.written_date)}</div>
                 </article>
             )) : null}
         </div>

diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyPosts.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/MyPosts.js
@@ -4,6 +4,7 @@ import Pagination from "./Pagination";
 import { useNavigate } from "react-router";
 import { useSelector } from "react-redux";
 import style from "../../../css/MyPage/MyPageDetail/MyPosts.module.css";
+import { parseDate } from "../../../parseDate/parseDate";
 
 const MyPosts = () => {
     const navigation = useNavigate();
@@ -26,31 +27,6 @@ const MyPosts = () => {
         navigation('/informationShare/'+postid);
     }
 
-    //날짜 형식 바꾸기
-    const parseDate = (written_date) => {
-        const d = new Date(written_date);
-        const year = d.getFullYear();
-        let month = d.getMonth();
-        let date = d.getDate();
-        let hours = d.getHours();
-        let min = d.getMinutes();
-        if(month<10){
-            month = '0'+month;
-        }
-        if(date<10){
-            date = '0'+date;
-        }
-        if(hours<10){
-            hours = '0'+hours;
-        }
-        if(min<10){
-            min = '0'+min;
-        }
-        return (
-            <div>{year}-{month}-{date} {hours} : {min}</div>
-        )
-    }
-
     return (
         <>
         <div className={style.layout}>
@@ -63,9 +39,7 @@ const MyPosts = () => {
                 <article key={index} onClick={e => postClick(item.post_id, e)}>
                     <div>{item.title}</div>
                     <div>{item.category}</div>
-                    {
-                        parseDate(item.written_date)
-                    }
+                    <div>{parseDate(item.written_date)}</div>
                 </article>
             )) : null}
         </div>