Merge pull request #14 from whatever-mentoring/feature/Mypage

feat: 마이페이지 컴포넌트 및 홈바 수정
whatever-mentoring · Sep 19, 2023 · 076e4ff · 076e4ff
2 parents 93411d7 + 2bf717c
commit 076e4ff
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 25 deletions.
diff --git a/src/assets/common.ts b/src/assets/common.ts
@@ -2,9 +2,12 @@ import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { Palette } from 'styles/Palette';
 
-export const EntireContainer = styled.div<{ homebar?: boolean }>`
+export const EntireContainer = styled.div<{
+  homebar?: boolean;
+  background?: string;
+}>`
   padding: 25px 30px;
-  background: ${Palette.White};
+  background: ${({ background }) => (background ? background : Palette.White)};
   height: ${({ homebar }) =>
     homebar ? 'calc(100vh - 156px)' : 'calc(100vh - 60px)'};
   overflow: auto;

diff --git a/src/components/Homebar.tsx b/src/components/Homebar.tsx
@@ -11,45 +11,37 @@ 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';
+import { Link, useLocation } from 'react-router-dom';
 
 const Homebar = () => {
+  const { pathname } = useLocation();
   let userType = 2; //임시 변수
+
   const [icons, setIcons] = useState({
     isAnsOn: false,
     isAskOn: false,
     isJuicyOn: false,
     isMpgOn: false,
   });
 
-  const handleClick = (iconName: string) => {
-    setIcons((prevState) => ({
-      ...prevState,
-      isAnsOn: iconName === 'ans',
-      isAskOn: iconName === 'ask',
-      isJuicyOn: iconName === 'juicy',
-      isMpgOn: iconName === 'mpg',
-    }));
-  };
-
   return (
     <Container>
       {userType == 1 ? (
-        <Menu to="/" onClick={() => handleClick('ans')}>
-          <Icon src={`${icons.isAnsOn ? answerOn : answerOff}`} />
+        <Menu to="/answer">
+          <Icon src={`${pathname === '/answer' ? answerOn : answerOff}`} />
           <Typo.homebar isOn={icons.isAnsOn}>답변하기</Typo.homebar>
         </Menu>
       ) : (
-        <Menu to="/" onClick={() => handleClick('ask')}>
-          <Icon src={`${icons.isAskOn ? askOn : askOff}`} />
+        <Menu to="/answer">
+          <Icon src={`${pathname === '/answer' ? askOn : askOff}`} />
           <Typo.homebar isOn={icons.isAskOn}>질문하기</Typo.homebar>
         </Menu>
       )}
 
-      <Menu to="/" onClick={() => handleClick('juicy')}>
+      <Menu to="/">
         <Icon
           src={`${
-            icons.isJuicyOn
+            pathname === '/'
               ? userType === 1
                 ? juicygeulOnCyni
                 : juicygeulOnJuni
@@ -59,10 +51,10 @@ const Homebar = () => {
         <Typo.homebar isOn={icons.isJuicyOn}>주씨글</Typo.homebar>
       </Menu>
 
-      <Menu to="/myPage" onClick={() => handleClick('mpg')}>
+      <Menu to="/myPage">
         <Icon
           src={`${
-            icons.isMpgOn
+            pathname === '/myPage'
               ? userType === 1
                 ? mypageOnCyni
                 : mypageOnJuni
@@ -98,6 +90,7 @@ const Menu = styled(Link)`
   align-items: center;
   gap: 3px;
 
+  text-decoration: none;
   cursor: pointer;
 `;
 const Icon = styled.img``;
diff --git a/src/pages/Mypage/MyComment/index.tsx b/src/pages/Mypage/MyComment/index.tsx
@@ -33,7 +33,7 @@ export const MyComment = () => {
       <Header borderBottom={false} btn="back">
         내댓글
       </Header>
-      <EntireContainer>
+      <EntireContainer background={`${Palette.Gray05}`}>
         <Row>
           <Typo.b2 color={Palette.Main}>4</Typo.b2>
           <Typo.b2> &nbsp; 개의 댓글</Typo.b2>

diff --git a/src/pages/Mypage/MyQna/index.tsx b/src/pages/Mypage/MyQna/index.tsx
@@ -92,7 +92,10 @@ export const MyQna = () => {
         {userType === 0 ? '내질문' : '내답변'}
       </Header>
       <Waitingtab setNowTab={setNowTab} />
-      <EntireContainer style={{ height: 'calc(100vh - 101px)' }}>
+      <EntireContainer
+        background={`${Palette.Gray05}`}
+        style={{ height: 'calc(100vh - 101px)' }}
+      >
         <Row>
           <Typo.b2>{text} &nbsp;</Typo.b2>
           <Typo.b2 color={Palette.Main}>12</Typo.b2>

diff --git a/src/pages/Mypage/MyScrap/index.tsx b/src/pages/Mypage/MyScrap/index.tsx
@@ -85,7 +85,7 @@ export const MyScrap = () => {
       <Header borderBottom={false} btn="back">
         스크랩
       </Header>
-      <EntireContainer>
+      <EntireContainer background={`${Palette.Gray05}`}>
         <Row>
           <Typo.b2 color={Palette.Main}>4</Typo.b2>
           <Typo.b2> &nbsp; 개의 스크랩</Typo.b2>

diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx
@@ -30,7 +30,7 @@ export const Mypage = () => {
       >
         MY
       </Header>
-      <EntireContainer homebar={true}>
+      <EntireContainer homebar={true} background={`${Palette.Gray05}`}>
         <Row justifyContent="space-between" alignItems="center">
           <Column>
             <Typo.h4>안녕하세요</Typo.h4>