feat: 마이페이지 ui 제작

src/App.tsx

@@ -1,11 +1,20 @@
 import Main from 'pages/Main';
-import React from 'react';
+import { Mypage } from 'pages/Mypage';
+import { MyComment } from 'pages/Mypage/MyComment';
+import { MyQna } from 'pages/Mypage/MyQna';
+import { MyScrap } from 'pages/Mypage/MyScrap';
+import { Provision } from 'pages/Mypage/Provision';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/myPage" element={<Mypage />} />
+        <Route path="/myPage/myQna" element={<MyQna />} />
+        <Route path="/myPage/myComment" element={<MyComment />} />
+        <Route path="/myPage/myScrap" element={<MyScrap />} />
+        <Route path="/myPage/provision" element={<Provision />} />
         <Route path="/" element={<Main />} />
       </Routes>
     </BrowserRouter>

src/assets/common.ts

@@ -1,11 +1,40 @@
 import { styled } from 'styled-components';
 import { Palette } from 'styles/Palette';
 
+export const EntireContainer = styled.div<{ homebar?: boolean }>`
+  padding: 25px 30px;
+  background: ${Palette.Gray05};
+  height: ${({ homebar }) =>
+    homebar ? 'calc(100vh - 156px)' : 'calc(100vh - 60px)'};
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  // 마이페이지
+  .mypage-submenu-container {
+    padding: 40px 0px;
+  }
+  .mypage-submenu-subcontainer {
+    height: fit-content;
+    background: ${Palette.White};
+    border-radius: 10px;
+  }
+  .mypage-list-container {
+    display: flex;
+    flex-direction: column;
+    padding: 25px 0px 5px 0px;
+    gap: 15px;
+  }
+`;
+
 interface divProps {
   gap?: number;
   justifyContent?: string;
   alignItems?: string;
 }
+
 export const Row = styled.div<divProps>`
   display: flex;
   gap: ${({ gap }) => (gap ? gap : 0)}px;

src/assets/data/MypageData.ts

@@ -0,0 +1,9 @@
+import { mypageMenuInterface } from 'pages/Mypage';
+
+export const myPageMemu: mypageMenuInterface[] = [
+  { link: 'myQna', icon: 'myQnaIcon', menu: '내 질문', margin: 0 },
+  { link: 'myComment', icon: 'myCommentIcon', menu: '내 댓글', margin: 0 },
+  { link: 'myScrap', icon: 'myScrapIcon', menu: '스크랩', margin: 0 },
+  { link: '', icon: 'newsLetterIcon', menu: '뉴스레터 구독하기', margin: 10 },
+  { link: '', icon: 'logoutIcon', menu: '로그아웃', margin: 10 },
+];

src/components/Card.tsx

@@ -9,7 +9,7 @@ import defaultTag from '@assets/icons/default-tag.svg';
 import Typo from 'styles/Typo';
 import { Column, Row } from 'assets/common';
 import { ShortBtn } from './Button';
-import { CategoryLabel } from 'components/Mypage/CategoryLabel';
+import { CategoryLabel } from 'components/CategoryLabel';
 
 /* Card components */
 

src/components/Homebar.tsx

@@ -11,6 +11,7 @@ import mypageOnJuni from '@assets/icons/mypage-on-juni.svg';
 import mypageOnCyni from '@assets/icons/mypage-on-cyni.svg';
 import Typo from 'styles/Typo';
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 
 const Homebar = () => {
   let userType = 2; //임시 변수
@@ -34,18 +35,18 @@ const Homebar = () => {
   return (
     <Container>
       {userType == 1 ? (
-        <Menu onClick={() => handleClick('ans')}>
+        <Menu to="/" onClick={() => handleClick('ans')}>
           <Icon src={`${icons.isAnsOn ? answerOn : answerOff}`} />
           <Typo.homebar isOn={icons.isAnsOn}>답변하기</Typo.homebar>
         </Menu>
       ) : (
-        <Menu onClick={() => handleClick('ask')}>
+        <Menu to="/" onClick={() => handleClick('ask')}>
           <Icon src={`${icons.isAskOn ? askOn : askOff}`} />
           <Typo.homebar isOn={icons.isAskOn}>질문하기</Typo.homebar>
         </Menu>
       )}
 
-      <Menu onClick={() => handleClick('juicy')}>
+      <Menu to="/" onClick={() => handleClick('juicy')}>
         <Icon
           src={`${
             icons.isJuicyOn
@@ -58,7 +59,7 @@ const Homebar = () => {
         <Typo.homebar isOn={icons.isJuicyOn}>주씨글</Typo.homebar>
       </Menu>
 
-      <Menu onClick={() => handleClick('mpg')}>
+      <Menu to="/myPage" onClick={() => handleClick('mpg')}>
         <Icon
           src={`${
             icons.isMpgOn
@@ -86,8 +87,9 @@ const Container = styled.div`
   align-items: center;
 
   padding: 0px 52px;
+  box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.1);
 `;
-const Menu = styled.div`
+const Menu = styled(Link)`
   height: 55px;
 
   display: flex;

src/components/Mypage/CommentListBox.tsx

@@ -2,21 +2,31 @@ import { MyPageBoxContainer, Row, TextContainer } from 'assets/common';
 import { Palette } from 'styles/Palette';
 import Typo from 'styles/Typo';
 
-export const CommentListBox = () => {
-  let userType = 1;
+interface commentBoxInterface {
+  children: string;
+  title: string;
+  date: string;
+}
+
+export const CommentListBox = ({
+  children,
+  title,
+  date,
+}: commentBoxInterface) => {
+  let userType = 0;
   let icon = 'juni_commentSubIcon';
   if (userType == 0) icon = 'juni_commentSubIcon';
   else if (userType == 1) icon = 'cyni_commentSubIcon';
 
   return (
     <MyPageBoxContainer padding="14px" height="79px">
       <TextContainer>
-        <Typo.b4>댓글입니다댓글입니다.댓글입니다댓글입니다.</Typo.b4>
+        <Typo.b4>{children}</Typo.b4>
         <Row gap={5}>
-          <img src={`img/${icon}.svg`} />
-          <Typo.b4 color={Palette.Gray4}>글 제목</Typo.b4>
+          <img src={`/img/${icon}.svg`} />
+          <Typo.b4 color={Palette.Gray4}>{title}</Typo.b4>
         </Row>
-        <Typo.s2 color={Palette.Gray4}>2023.09.09</Typo.s2>
+        <Typo.s2 color={Palette.Gray4}>{date}</Typo.s2>
       </TextContainer>
     </MyPageBoxContainer>
   );

src/components/Mypage/MyQnaListBox.tsx

@@ -1,27 +1,40 @@
 import { styled } from 'styled-components';
 import { Palette } from 'styles/Palette';
 import Typo from 'styles/Typo';
-import { CategoryLabel } from './CategoryLabel';
 import { MyPageBoxContainer, Row } from 'assets/common';
+import { CategoryLabel } from 'components/CategoryLabel';
 
-export const MyQnaListBox = () => {
-  let ansCount = 2;
-  let userType = 1; // userType 임시변수
+interface qnaBoxInterface {
+  children: string;
+  count: number;
+  dDay: number;
+  category: string;
+  date: string;
+}
+
+export const MyQnaListBox = ({
+  children,
+  count,
+  dDay,
+  category,
+  date,
+}: qnaBoxInterface) => {
+  let userType = 0; // userType 임시변수
 
   return (
     <MyPageBoxContainer height="72px">
-      <CountStick ansCount={ansCount} userType={userType} />
+      <CountStick ansCount={count} userType={userType} />
       <SubContainer>
         <Row gap={3}>
           <Typo.b3>{userType === 0 ? 'Q.' : 'A.'}</Typo.b3>
-          <Typo.b4>내 질문입니다.</Typo.b4>
+          <Typo.b4>{children}</Typo.b4>
         </Row>
         <Row justifyContent="space-between" alignItems="center">
           <Row gap={10} alignItems="center">
-            <CategoryLabel>일상</CategoryLabel>
-            <Typo.s2 color={Palette.Gray4}>2023.09.09</Typo.s2>
+            <CategoryLabel>{category}</CategoryLabel>
+            <Typo.s2 color={Palette.Gray4}>{date}</Typo.s2>
           </Row>
-          <Typo.s1 color={Palette.Main}>D-6</Typo.s1>
+          {count !== 3 && <Typo.s1 color={Palette.Main}>D-{dDay}</Typo.s1>}
         </Row>
       </SubContainer>
     </MyPageBoxContainer>

src/components/Mypage/ScrapListBox.tsx

@@ -1,28 +1,41 @@
 import { Palette } from 'styles/Palette';
 import Typo from 'styles/Typo';
-import { CategoryLabel } from './CategoryLabel';
 import { MyPageBoxContainer, Row, TextContainer } from 'assets/common';
+import { CategoryLabel } from 'components/CategoryLabel';
 
-export const ScrapListBox = () => {
+interface ScrapBoxInterface {
+  children: string;
+  title: string;
+  date: string;
+  category: string;
+  commentCount: number;
+  scrapCount: number;
+}
+
+export const ScrapListBox = ({
+  children,
+  title,
+  date,
+  category,
+  commentCount,
+  scrapCount,
+}: ScrapBoxInterface) => {
   return (
     <MyPageBoxContainer padding="14px 15px">
       <TextContainer gap={4}>
-        <CategoryLabel>인간관계</CategoryLabel>
-        <Typo.b1>글 제목입니다</Typo.b1>
-        <Typo.b3 color={Palette.Gray4}>
-          글 내용입니다 글 내용입니다 글 내용입니다 글 내용입니다 글 내용입니다
-          글 내용입니다 글 내용입니다 글 내용입니다 글내용
-        </Typo.b3>
+        <CategoryLabel>{category}</CategoryLabel>
+        <Typo.b1>{title}</Typo.b1>
+        <Typo.b3 color={Palette.Gray4}>{children}</Typo.b3>
         <Row gap={7}>
           <Row gap={4}>
-            <img src="img/comment.svg" />
-            <Typo.s2 color={Palette.Gray4}>12</Typo.s2>
+            <img src="/img/comment.svg" />
+            <Typo.s2 color={Palette.Gray4}>{commentCount}</Typo.s2>
           </Row>
           <Row gap={4}>
-            <img src="img/scrap.svg" />
-            <Typo.s2 color={Palette.Gray4}>123</Typo.s2>
+            <img src="/img/scrap.svg" />
+            <Typo.s2 color={Palette.Gray4}>{scrapCount}</Typo.s2>
           </Row>
-          <Typo.s2 color={Palette.Gray4}>2023.09.09</Typo.s2>
+          <Typo.s2 color={Palette.Gray4}>{date}</Typo.s2>
         </Row>
       </TextContainer>
     </MyPageBoxContainer>

src/components/Mypage/SubMenuBox.tsx

@@ -1,18 +1,23 @@
-import { MyPageBoxContainer, Row } from 'assets/common';
+import { Row } from 'assets/common';
+import { styled } from 'styled-components';
 import { Palette } from 'styles/Palette';
 import Typo from 'styles/Typo';
 
+interface submenuBoxInterface {
+  children: React.ReactNode;
+  count?: number;
+  icon: string;
+  borderRadius?: string;
+}
+
 export const SubMenuBox = ({
   children,
   count,
   icon,
-}: {
-  children: React.ReactNode;
-  count?: number;
-  icon: string;
-}) => {
+  borderRadius,
+}: submenuBoxInterface) => {
   return (
-    <MyPageBoxContainer borderRadius={10} height="75px" padding="25px 15px">
+    <Container borderRadius={borderRadius}>
       <Row
         alignItems="center"
         justifyContent="space-between"
@@ -35,6 +40,15 @@ export const SubMenuBox = ({
           <img src="/img/arrow.svg" />
         </Row>
       </Row>
-    </MyPageBoxContainer>
+    </Container>
   );
 };
+
+export const Container = styled.div<{ borderRadius?: string }>`
+  display: flex;
+  width: 100%;
+  height: 75px;
+  border-radius: 10px;
+  padding: 25px 15px;
+  background: ${Palette.White};
+`;

src/components/Mypage/WaitingTab.tsx

@@ -8,24 +8,29 @@ interface tabInterface {
   status: string;
 }
 
-export const Waitingtab = () => {
+export const Waitingtab = ({ setNowTab }: { setNowTab: any }) => {
   const [clickNum, setClickNum] = useState(0);
   let role = 'juni';
 
   const tabs: tabInterface[] = [
-    { label: role === 'juni' ? '답변' : '주씨', status: '완료' },
-    { label: role === 'juni' ? '답변' : '주씨', status: '대기' },
+    { label: role === 'juni' ? '답변' : '쥬시', status: '완료' },
+    { label: role === 'juni' ? '답변' : '쥬시', status: '대기' },
   ];
 
   return (
     <Container>
       {tabs.map((tab: tabInterface, index: number) => (
         <SubContainer
           key={index}
-          onClick={() => setClickNum(index)}
+          onClick={() => {
+            setClickNum(index);
+            setNowTab(index);
+          }}
           borderHeight={index === clickNum ? 3 : 0}
         >
-          <Typo.h4>{`${tab.label} ${tab.status}`}</Typo.h4>
+          <Typo.h4
+            color={index === clickNum ? Palette.Black : Palette.Gray4}
+          >{`${tab.label} ${tab.status}`}</Typo.h4>
         </SubContainer>
       ))}
     </Container>
@@ -39,7 +44,7 @@ const Container = styled.div`
   width: 100%;
   height: 41px;
   padding: 0 25px;
-  border-bottom: ${Palette.Gray3} 1px solid;
+  border-bottom: ${Palette.Gray2} 1px solid;
 `;
 const SubContainer = styled.div<{ borderHeight?: number }>`
   display: flex;

src/components/NotcieLabel.tsx

@@ -0,0 +1,25 @@
+import { styled } from 'styled-components';
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+
+export const NoticeLabel = ({
+  children,
+  margin,
+}: {
+  children: string;
+  margin?: string;
+}) => {
+  return (
+    <Container margin={margin}>
+      <Typo.b3>{children}</Typo.b3>
+    </Container>
+  );
+};
+
+const Container = styled.div<{ margin?: string }>`
+  width: 100%;
+  padding: 8px 15px;
+  background: ${Palette.Sub.yellow};
+  border-radius: 5px;
+  margin: ${({ margin }) => (margin ? margin : '0px')};
+`;