Merge pull request #204 from tukcom2023CD/FE/feat/#203

[FE/feat/#203] 마이페이지 추가 연동
tukcom2023CD · Jun 7, 2023 · 7f5a1f6 · 7f5a1f6
2 parents eddb95e + 2997808
commit 7f5a1f6
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 52 deletions.
diff --git a/frontend/src/components/NavBar/MypageNavBar.tsx b/frontend/src/components/NavBar/MypageNavBar.tsx
@@ -0,0 +1,65 @@
+import logo from 'images/logo.png';
+import { useNavigate } from 'react-router-dom';
+
+function QuesNavBar() {
+  const navigate = useNavigate();
+  const goToQueslistPage = () => {
+    navigate('/queslistpage');
+  };
+  const goToMain = () => {
+    navigate('/mainpage');
+  };
+  const goToQues = () => {
+    navigate('/quespage');
+  };
+  const goToPrivateQues = () => {
+    navigate('/privatequespage');
+  };
+  const goToMypage = () => {
+    navigate('/mypage');
+  };
+
+  return (
+    <div className="w-full h-30 border-b-2 bg-white">
+      <div className="flex flex-row">
+        <button type="button" onClick={goToMain}>
+          <img
+            className="left-0 w-48 max-sm:w-28 pl-12 pr-8 py-8 max-sm:pl-6 max-sm:pr-4 max-sm:py-4"
+            src={logo}
+            alt="logo"
+          />
+        </button>
+        <button
+          type="button"
+          className="lg:text-2xl md:text-xl max-sm:text-sm lg:pl-10 lg:pr-8 lg:py-8 lg:my-2 md:pl-8 md:pr-6 md:my-1 sm:pl-6 sm:pr-4 max-sm:pl-6 max-sm:pr-4 max-sm:py-3"
+          onClick={goToQues}
+        >
+          질문 작성
+        </button>
+        <button
+          type="button"
+          className="lg:text-2xl md:text-xl max-sm:text-sm lg:pl-10 lg:pr-8 lg:py-8 lg:my-2 md:pl-8 md:pr-6 md:my-1 sm:pl-6 sm:pr-4 max-sm:pl-6 max-sm:pr-4 max-sm:py-3"
+          onClick={goToPrivateQues}
+        >
+          멘토링 질문 작성
+        </button>
+        <button
+          type="button"
+          className="lg:text-2xl md:text-xl max-sm:text-sm lg:pl-10 lg:pr-8 lg:py-8 lg:my-2 md:pl-8 md:pr-6 md:my-1 sm:pl-6 sm:pr-4 max-sm:pl-6 max-sm:pr-4 max-sm:py-3"
+          onClick={goToQueslistPage}
+        >
+          질문게시판
+        </button>
+        <button
+          type="button"
+          className="lg:text-2xl md:text-xl max-sm:text-sm lg:pl-10 lg:pr-8 lg:py-8 lg:my-2 md:pl-8 md:pr-6 md:my-1 sm:pl-6 sm:pr-4 max-sm:pl-6 max-sm:pr-4 max-sm:py-3 font-bold text-purple-600"
+          onClick={goToMypage}
+        >
+          마이페이지
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default QuesNavBar;
diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
@@ -7,7 +7,7 @@ function NavBar() {
     navigate('/queslistpage');
   };
   const goToMain = () => {
-    navigate('/mainpage');
+    navigate('/');
   };
   const goToQues = () => {
     navigate('/quespage');

diff --git a/frontend/src/components/NavBar/PrivateQuesNavBar.tsx b/frontend/src/components/NavBar/PrivateQuesNavBar.tsx
@@ -50,13 +50,13 @@ function PrivateQuesNavBar() {
         >
           질문게시판
         </button>
-        {/* <button
+        <button
           type="button"
           className="lg:text-2xl md:text-xl max-sm:text-sm lg:pl-10 lg:pr-8 lg:py-8 lg:my-2 md:pl-8 md:pr-6 md:my-1 sm:pl-6 sm:pr-4 max-sm:pl-6 max-sm:pr-4 max-sm:py-3"
           onClick={goToMypage}
         >
           마이페이지
-        </button> */}
+        </button>
       </div>
     </div>
   );

diff --git a/frontend/src/components/NavBar/QuesListNavBar.tsx b/frontend/src/components/NavBar/QuesListNavBar.tsx
@@ -50,13 +50,13 @@ function QuesListNavBar() {
         >
           질문게시판
         </button>
-        {/* <button
+        <button
           type="button"
           className="lg:text-2xl md:text-xl max-sm:text-sm lg:pl-10 lg:pr-8 lg:py-8 lg:my-2 md:pl-8 md:pr-6 md:my-1 sm:pl-6 sm:pr-4 max-sm:pl-6 max-sm:pr-4 max-sm:py-3"
           onClick={goToMypage}
         >
           마이페이지
-        </button> */}
+        </button>
       </div>
     </div>
   );

diff --git a/frontend/src/components/NavBar/QuesNavBar.tsx b/frontend/src/components/NavBar/QuesNavBar.tsx
@@ -50,13 +50,13 @@ function QuesNavBar() {
         >
           질문게시판
         </button>
-        {/* <button
+        <button
           type="button"
           className="lg:text-2xl md:text-xl max-sm:text-sm lg:pl-10 lg:pr-8 lg:py-8 lg:my-2 md:pl-8 md:pr-6 md:my-1 sm:pl-6 sm:pr-4 max-sm:pl-6 max-sm:pr-4 max-sm:py-3"
           onClick={goToMypage}
         >
           마이페이지
-        </button> */}
+        </button>
       </div>
     </div>
   );

diff --git a/frontend/src/components/Ques.tsx b/frontend/src/components/Ques.tsx
@@ -27,10 +27,16 @@ function Ques({ count, title, date, type, postId, tags }: Props) {
         {/* 답변 수 */}
         <div className="h-14 w-14 my-4 ml-4 mr-2 rounded-lg bg-violet-100">
           <div className="flex justify-center item-center">
-            <div className="flex-col m-1">
-              <p className="m-0.5 mx-2 px-0.5 text-sm">{count}</p>
-              <p className="m-0.5 text-sm">답변</p>
-            </div>
+            {type === 'QUESTION' ? (
+              <div className="flex-col m-0.5">
+                <p className="m-0.5 mx-2 px-0.5 text-sm">{count}</p>
+                <p className="m-0.5 text-sm">답변</p>
+              </div>
+            ) : (
+              <div className="flex-col m-1.5">
+                <p className="m-0.5 text-sm">멘토링 예정</p>
+              </div>
+            )}
           </div>
         </div>
         {/* 질문 제목 */}

diff --git a/frontend/src/page/MainPage2.tsx b/frontend/src/page/MainPage2.tsx
diff --git a/frontend/src/page/MentoringPage.tsx b/frontend/src/page/MentoringPage.tsx
@@ -18,6 +18,7 @@ import 'monaco-editor/esm/vs/basic-languages/java/java.contribution';
 import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
 import 'monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution';
 import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
+import EndIndex from 'components/Index/EndIndex';
 
 function MentoringPage() {
   document.documentElement.setAttribute('data-color-mode', 'light');
@@ -143,7 +144,7 @@ function MentoringPage() {
 
   return (
     <div
-      className="h-screen"
+      className="min-h-screen"
       style={{ backgroundColor: ColorSystem.MainColor.Primary }}
     >
       {/* 상단바 */}
@@ -207,7 +208,25 @@ function MentoringPage() {
           <span className="pl-3 text-text-color text-2xl">CONTENT</span>
         </div>
       </div>
+      {/* 컴파일러 실행 버튼 */}
+      <div className="flex justify-center item-center my-2">
+        {/* FIXME : 컴파일러 api 호출하는 함수 구현 */}
+        <Btn text="RUN" onClick={goToAnsCheckPage} />
+      </div>
+      {/* 컴파일러 결과 */}
       <div className="flex justify-center item-center my-8">
+        <div className="relative flex flex-col-reverse w-3/5">
+          <div className="flex flex-col rounded-xl h-[20rem] w-full mx-1 my-2 bg-white border-4 border-violet-300">
+            {/* 추후 구현 예정 */}
+            <span className="text-text-color text-xl mt-4 mx-4">
+              컴파일러 결과
+            </span>
+          </div>
+          <EndIndex />
+          <span className="pl-3 text-text-color text-2xl">RESULT</span>
+        </div>
+      </div>
+      <div className="flex justify-center item-center my-4">
         <Btn text="FINISH" onClick={goToAnsCheckPage} />
       </div>
     </div>

diff --git a/frontend/src/page/MyPage.tsx b/frontend/src/page/MyPage.tsx
@@ -1,7 +1,7 @@
 import 'tailwindcss/tailwind.css';
 import 'utils/pageStyle.css';
 import ColorSystem from 'utils/ColorSystem';
-import NavBar from 'components/NavBar/NavBar';
+import MypageNavBar from 'components/NavBar/MypageNavBar';
 import { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import Tab from '@mui/material/Tab';
@@ -10,11 +10,11 @@ import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
 import BasicProfile from 'images/BasicProfile.png';
 import pencil from 'images/pencil.png';
-// import Tag from 'components/Tags/Tag';
 import ChatBox from 'components/ChatBox';
 import Profile from 'components/Profile';
 import axios from 'axios';
 import { useDispatch } from 'react-redux';
+import Ques from 'components/Ques';
 import { setUserName } from '../components/redux/userSlice';
 
 function MyPage() {
@@ -27,6 +27,8 @@ function MyPage() {
   const [menteeChatInfo, setMenteeChatInfo] = useState([]);
   const [mentorCharInfo, setMentorChatInfo] = useState([]);
   const [profileInfo, setProfileInfo] = useState('');
+  const [userId, setUserId] = useState(0);
+  const [userPostInfo, setUserPostInfo] = useState([]);
 
   const dispatch = useDispatch();
 
@@ -64,6 +66,7 @@ function MyPage() {
         .get(`/api/v1/users/info`)
         .then((res) => {
           setProfileInfo(res.data.data.name);
+          setUserId(res.data.data.userId);
           dispatch(setUserName(res.data.data.name));
         })
         .catch((error) => {
@@ -72,13 +75,27 @@ function MyPage() {
     })();
   }, []);
 
+  useEffect(() => {
+    (async () => {
+      await axios
+        .get(`/api/v1/posts/mypages/${userId}`)
+        .then((res) => {
+          console.log(res.data.data);
+          setUserPostInfo(res.data.data);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    })();
+  }, [userId]);
+
   return (
     <div
       className="h-screen"
       style={{ backgroundColor: ColorSystem.MainColor.Primary }}
     >
       {/* 상단바 */}
-      <NavBar />
+      <MypageNavBar />
       {/* 유저 이름과 프로필 사진 */}
       <div className="flex justify-center item-center my-8">
         <div className="m-2">
@@ -119,7 +136,17 @@ function MyPage() {
                   >
                     <div className="h-64">
                       <div className="flex flex-col p-1">
-                        추후 업데이트 될 예정입니다.
+                        {userPostInfo.map((data: any) => (
+                          <Ques
+                            key={Math.random() * 500}
+                            count={data.commentCount}
+                            title={data.title}
+                            type={data.type}
+                            postId={data.id}
+                            tags={data.tags}
+                            date={data.created_at}
+                          />
+                        ))}
                       </div>
                     </div>
                   </div>

diff --git a/frontend/src/page/QuesListPage.tsx b/frontend/src/page/QuesListPage.tsx
@@ -31,9 +31,7 @@ function QuesListPage() {
     const pageNumber = searchParams.get('page');
     (async () => {
       await axios
-        .get(
-          `/api/v1/posts?page=${pageNumber}`,
-        )
+        .get(`/api/v1/posts?page=${pageNumber}`)
         .then((res) => {
           setQuesInfo(res.data.data);
         })