Merge pull request #73 from pobu-team/feature/new-mypage

✨ 신규 마이페이지

src/components/layout/MyPageLayout.tsx

@@ -1,8 +1,6 @@
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
 import NavigationBar from '../footer/NavigationBar';
-import TitleHeader from '../header/TitleHeader';
-import FloatingHeader from '../../ui/FloatingHeader';
 
 const Container = styled.div`
   width: 100%;
@@ -14,17 +12,8 @@ const Container = styled.div`
 `;
 
 export default function MyPageLayout() {
-  const { pathname } = useLocation();
-  const Titles: Record<string, string> = {
-    '/mylike': '찜한 포즈',
-    '/upload': '업로드한 포즈',
-  };
-
   return (
     <Container>
-      <FloatingHeader>
-        <TitleHeader title={pathname === '/mypage' ? '마이페이지' : Titles[pathname]} />
-      </FloatingHeader>
       <main>
         <Outlet />
       </main>

src/components/mypage/myLike/KakaoLogIn.tsx → src/components/mypage/KakaoLogIn.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router';
 import { useRecoilValue } from 'recoil';
 import { useEffect } from 'react';
 import { useLocalStorage } from 'usehooks-ts';
-import { kakaoTokenSelector } from '../../../recoil/loginState';
+import { kakaoTokenSelector } from '../../recoil/loginState';
 
 export default function KakaoLogIn() {
   const navigate = useNavigate();

src/components/mypage/myLike/LikePoseList.tsx → src/components/mypage/LikePoseList.tsx

@@ -1,11 +1,10 @@
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
-import { AllPoseSelector, PoseSelector } from '../../../recoil/poseState';
-import EmptyPose from '../../common/EmptyPose';
-import PoseList from '../../common/PoseList';
-import { ALL_PEOPLE_TAG } from '../../../constant/tagId';
-import useFetchLikeList from '../../../hooks/useFetchLikeList';
-import { useFetchPoses } from '../../../queries/poses';
+import { AllPoseSelector, PoseSelector } from '../../recoil/poseState';
+import EmptyPose from '../common/EmptyPose';
+import PoseList from '../common/PoseList';
+import { ALL_PEOPLE_TAG } from '../../constant/tagId';
+import useFetchLikeList from '../../hooks/useFetchLikeList';
 
 const Container = styled.div`
   padding: ${(props) => props.theme.sizes.contentPadding};

src/components/mypage/PoseTab.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+
+const TabButton = styled.button<{active: boolean}>`
+  width: 50%;
+  background-color: transparent;
+  border: none;
+  font-size: 1.6rem;
+  line-height: 2.6rem;
+  font-weight: 600;
+  color:${(props) => (props.active ? props.theme.colors.text : props.theme.colors.textAlternative)};
+  padding-block: 1.2rem;
+  border-bottom: 2px solid ${(props) => (props.active ? props.theme.colors.text : 'transparent')};
+  cursor: pointer;
+`;
+
+interface PoseTabProps {
+  isShowingRegisteredPoses: boolean,
+  toggleTab: () => void
+}
+
+function PoseTab({ isShowingRegisteredPoses, toggleTab }: PoseTabProps) {
+  return (
+    <div>
+      <TabButton active={isShowingRegisteredPoses} onClick={toggleTab}>
+        등록한 포즈
+      </TabButton>
+      <TabButton active={!isShowingRegisteredPoses} onClick={toggleTab}>
+        찜한 포즈
+      </TabButton>
+    </div>
+  );
+}
+
+export default PoseTab;

src/components/mypage/RegisteredPoseList.tsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import useFetchLikeList from '../../hooks/useFetchLikeList';
+import useFetchMyPoses from '../../hooks/useFetchMyPoses';
+import PoseList from '../common/PoseList';
+import EmptyPose from '../common/EmptyPose';
+
+const PoseContainer = styled.div`
+  padding: ${(props) => props.theme.sizes.contentPadding};
+`;
+
+function RegisteredPoseList() {
+  const likePoseIdArr = useFetchLikeList();
+  const { isLoading, data: filteredPoses } = useFetchMyPoses();
+
+  if (!isLoading && filteredPoses && filteredPoses.length > 0) {
+    return (
+      <PoseContainer>
+        <PoseList
+          poses={filteredPoses}
+          likePoseIdArr={likePoseIdArr}
+        />
+      </PoseContainer>
+    );
+  }
+
+  return (
+    <EmptyPose text="등록한" />
+  );
+}
+
+export default RegisteredPoseList;

src/components/mypage/UserProfile.tsx

@@ -0,0 +1,67 @@
+import styled from 'styled-components';
+import { useNavigate } from 'react-router';
+import useFetchMyInfo from '../../hooks/useFetchMemberInfo';
+
+const ProfileContainer = styled.div`
+  padding: 1.6rem 2.4rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ImageNameBox = styled.div`
+  display: flex;
+  align-items: center;
+
+  img {
+    width: 64px;
+    height: 64px;
+    border-radius: 100%;
+    margin-right: 1.2rem;
+  }
+
+  p {
+    font-size: 2rem;
+    line-height: 2.6rem;
+    font-weight: 600;
+  }
+`;
+
+const LogoutButton = styled.button`
+  background-color: ${(props) => props.theme.colors.backgroundSecondary};
+  padding: 0.6rem 1.2rem;
+  font-size: 1.4rem;
+  line-height: 2.4rem;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.textNormal};
+  border: none;
+  border-radius: 99px;
+  width: 7.3rem;
+  height: 3.6rem;
+  cursor: pointer;
+`;
+
+function UserProfile() {
+  const { data: myInfoResponse } = useFetchMyInfo();
+  const navigate = useNavigate();
+  return (
+    <ProfileContainer>
+      <ImageNameBox>
+        <img src={myInfoResponse?.data.profileImageUrl} alt="profile pic" />
+        <p>{myInfoResponse?.data.name}</p>
+      </ImageNameBox>
+      <LogoutButton
+        type="button"
+        onClick={() => {
+          localStorage.removeItem('accessToken');
+          navigate('/');
+        }}
+      >
+        로그아웃
+
+      </LogoutButton>
+    </ProfileContainer>
+  );
+}
+
+export default UserProfile;

src/components/mypage/index.tsx

@@ -1,50 +1,29 @@
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { useReadLocalStorage } from 'usehooks-ts';
-import LogIn from './myLike/LogIn';
+import { useState } from 'react';
+import LogIn from './LogIn';
+import LikePoseList from './LikePoseList';
+import { ALL_PEOPLE_TAG } from '../../constant/tagId';
+import PoseTab from './PoseTab';
+import UserProfile from './UserProfile';
+import RegisteredPoseList from './RegisteredPoseList';
 
 const Container = styled.div`
-  padding: 2.4rem;
   height: 100vh;
   background-color: ${(props) => props.theme.colors.background};
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
 `;
 
-const CardContainer = styled.div`
-  display: flex;
-  height: 220px;
-  padding: 40px 30px 30px 30px;
-  align-items: center;
-  border-radius: 16px;
-  background-color: ${(props) => props.theme.colors.backgroundSecondary};
-
-  a {
-    color: ${(props) => props.theme.colors.text};
-    text-decoration: none;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-
-    img {
-      display: flex;
-      width: 100px;
-      height: 100px;
-    }
-
-    span {
-      margin-top: 2rem;
-      display: flex;
-    }
-  }
+const ProfileSection = styled.div`
+  position: fixed;
+  top: 0;
+  z-index: 99;
+  background-color: ${(props) => props.theme.colors.background};
+  width: 100%;
+  max-width: 375px;
+`;
 
-  &:first-child {
-    margin-top: 5.7rem;
-  }
+const PoseSection = styled.div`
+  padding-top: 14.8rem;
 `;
 
 export default function MyPage() {
@@ -53,20 +32,22 @@ export default function MyPage() {
     return <LogIn />;
   }
 
+  const [isShowingRegisteredPoses, setIsShowingRegisteredPoses] = useState(true);
+
   return (
     <Container>
-      <CardContainer>
-        <Link to="/mylike">
-          <img src="/images/mylike.svg" alt="mylike" />
-          <p>찜한 포즈</p>
-        </Link>
-      </CardContainer>
-      <CardContainer>
-        <Link to="/upload">
-          <img src="/images/upload.svg" alt="upload" />
-          <p>등록한 포즈</p>
-        </Link>
-      </CardContainer>
+      <ProfileSection>
+        <UserProfile />
+        <PoseTab
+          isShowingRegisteredPoses={isShowingRegisteredPoses}
+          toggleTab={() => setIsShowingRegisteredPoses((prev) => !prev)}
+        />
+      </ProfileSection>
+      <PoseSection>
+        {!isShowingRegisteredPoses
+          ? <LikePoseList selectedTagId={ALL_PEOPLE_TAG} />
+          : <RegisteredPoseList />}
+      </PoseSection>
     </Container>
   );
 }

src/components/register/AddImage.tsx

@@ -7,7 +7,7 @@ import ImageUploadButton from './ImageUploadButton';
 import ImagePreview from './ImagePreview';
 import { imgAtom, imgFileAtom } from '../../recoil/registerState';
 import NextButton from './NextButton';
-import LogIn from '../mypage/myLike/LogIn';
+import LogIn from '../mypage/LogIn';
 
 const Container = styled.div`
   display: flex;

src/components/register/AddInfo.tsx

@@ -8,7 +8,7 @@ import { AtmosphereTagSelector, PeopleTagSelector } from '../../recoil/tagState'
 import { Tag } from '../../types/Tag';
 import { imgAtom, imgFileAtom } from '../../recoil/registerState';
 import { apiService } from '../../service/ApiService';
-import LogIn from '../mypage/myLike/LogIn';
+import LogIn from '../mypage/LogIn';
 
 const Container = styled.div`
   padding: 2.4rem;