[Feature] - 마이 페이지 구현

frontend/src/components/common/AvatarCircle/AvatarCircle.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
     $size: {
       control: {
         type: "select",
-        options: ["small", "large"],
+        options: ["small", "medium", "large"],
       },
     },
     profileImageUrl: { control: "text" },
@@ -36,6 +36,13 @@ export const Small: Story = {
   },
 };
 
+export const Medium: Story = {
+  args: {
+    $size: "medium",
+    profileImageUrl: "https://i.pinimg.com/564x/c0/d6/5e/c0d65ef2ff5b3e752b70fe54d94d6206.jpg",
+  },
+};
+
 export const Large: Story = {
   args: {
     $size: "large",
@@ -50,6 +57,13 @@ export const WithDefaultAvatar: Story = {
   },
 };
 
+export const MediumWithDefaultAvatar: Story = {
+  args: {
+    $size: "medium",
+    profileImageUrl: "https://invalid-image-url.jpg",
+  },
+};
+
 export const LargeWithDefaultAvatar: Story = {
   args: {
     $size: "large",

frontend/src/components/common/AvatarCircle/AvatarCircle.styled.ts

@@ -3,22 +3,26 @@ import styled from "@emotion/styled";
 import type { AvatarCircleSize } from "./AvatarCircle.type";
 
 const getSize = ($size: AvatarCircleSize) => {
-  return $size === "small" ? "2.2rem" : "12.9rem";
+  if ($size === "small") return "2.2rem";
+  if ($size === "medium") return "6rem";
+  if ($size === "large") return "12.9rem";
 };
 
 const getIconSize = ($size: AvatarCircleSize) => {
-  return $size === "small" ? "1.5rem" : "10rem";
+  if ($size === "small") return "1.5rem";
+  if ($size === "medium") return "5rem";
+  if ($size === "large") return "10rem";
 };
 
 export const FallbackIcon = styled.div<{ $size: AvatarCircleSize }>`
   display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
   width: 100%;
   height: 100%;
 
   background-color: #d9d9d9;
-  justify-content: center;
-  align-items: center;
 
   svg {
     position: absolute;

frontend/src/components/common/AvatarCircle/AvatarCircle.tsx

@@ -6,15 +6,16 @@ import type { AvatarCircleSize } from "./AvatarCircle.type";
 interface AvatarCircleProps {
   $size?: AvatarCircleSize;
   profileImageUrl?: string;
+  imageAlt?: string;
 }
 
-const AvatarCircle = ({ $size = "small", profileImageUrl }: AvatarCircleProps) => {
+const AvatarCircle = ({ $size = "small", profileImageUrl, imageAlt }: AvatarCircleProps) => {
   const { imageError, handleImageError } = useImageError({ imageUrl: profileImageUrl });
 
   return (
     <S.AvatarCircleContainer $size={$size}>
       {!imageError ? (
-        <img src={profileImageUrl} alt="사용자 프로필 이미지" onError={handleImageError} />
+        <img src={profileImageUrl} alt={imageAlt} onError={handleImageError} />
       ) : (
         <S.FallbackIcon $size={$size}>
           <svg

frontend/src/components/common/AvatarCircle/AvatarCircle.type.ts

@@ -1 +1 @@
-export type AvatarCircleSize = "small" | "large";
+export type AvatarCircleSize = "small" | "medium" | "large";

frontend/src/components/common/Header/Header.tsx

@@ -25,6 +25,8 @@ const Header = () => {
       ? () => navigate(ROUTE_PATHS_MAP.root)
       : () => navigate(ROUTE_PATHS_MAP.back);
 
+  const handleClickMyPage = () => navigate(ROUTE_PATHS_MAP.my);
+
   const { user } = useUser();
 
   return (
@@ -57,8 +59,7 @@ const Header = () => {
       <Drawer.Content>
         <S.MenuList>
           <Drawer.Trigger>
-            {/* TODO: 마이페이지 로직 필요함 */}
-            <S.MenuItem>마이페이지</S.MenuItem>
+            <S.MenuItem onClick={handleClickMyPage}>마이페이지</S.MenuItem>
           </Drawer.Trigger>
           <Drawer.Trigger>
             {user ? (

frontend/src/components/common/Tab/Tab.tsx

@@ -1,23 +1,30 @@
-import { useRef, useState } from "react";
+import { ComponentPropsWithoutRef, useLayoutEffect, useRef, useState } from "react";
+
+import { STORAGE_KEYS_MAP } from "@constants/storage";
 
 import * as S from "./Tab.styled";
 
-interface TabProps {
+interface TabProps extends React.PropsWithChildren<ComponentPropsWithoutRef<"ul">> {
   tabContent: (selectedIndex: number) => JSX.Element;
   labels: string[];
 }
 
-const Tab = ({ labels, tabContent }: TabProps) => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
+const Tab = ({ labels, tabContent, ...props }: TabProps) => {
+  const FIRST_TAB_INDEX = 0;
+  const INITIAL_START_X = 0;
+  const INITIAL_SCROLL_LEFT = 0;
+
+  const [selectedIndex, setSelectedIndex] = useState(FIRST_TAB_INDEX);
 
   const tabRefs = useRef<(HTMLLIElement | null)[]>([]);
   const tabListRef = useRef<HTMLUListElement>(null);
   const [isDragging, setIsDragging] = useState(false);
-  const [startX, setStartX] = useState(0);
-  const [scrollLeft, setScrollLeft] = useState(0);
+  const [startX, setStartX] = useState(INITIAL_START_X);
+  const [scrollLeft, setScrollLeft] = useState(INITIAL_SCROLL_LEFT);
 
   const handleClickTab = (index: number) => {
     setSelectedIndex(index);
+    localStorage.setItem(STORAGE_KEYS_MAP.myPageSelectedTab, JSON.stringify(index));
   };
 
   const handleMouseDown = (e: React.MouseEvent) => {
@@ -46,6 +53,16 @@ const Tab = ({ labels, tabContent }: TabProps) => {
     }
   };
 
+  useLayoutEffect(() => {
+    const currentSelectedTabIndex = JSON.parse(
+      localStorage.getItem(STORAGE_KEYS_MAP.myPageSelectedTab) ?? FIRST_TAB_INDEX.toString(),
+    );
+    setSelectedIndex(currentSelectedTabIndex);
+
+    return () =>
+      localStorage.setItem(STORAGE_KEYS_MAP.myPageSelectedTab, JSON.stringify(FIRST_TAB_INDEX));
+  }, []);
+
   return (
     <>
       <S.TabList
@@ -54,6 +71,7 @@ const Tab = ({ labels, tabContent }: TabProps) => {
         onMouseLeave={handleMouseLeave}
         onMouseUp={handleMouseUp}
         onMouseMove={handleMouseMove}
+        {...props}
       >
         {labels.map((label, index) => (
           <S.TabItem

frontend/src/components/pages/my/MyPage.styled.ts

@@ -0,0 +1,37 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+import theme from "@styles/theme";
+
+export const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: ${(props) => props.theme.spacing.xl};
+  padding: ${(props) => props.theme.spacing.l};
+`;
+
+export const BoxButton = styled.button`
+  display: flex;
+  gap: ${(props) => props.theme.spacing.m};
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  padding: ${(props) => props.theme.spacing.m};
+  border: solid 1px ${(props) => props.theme.colors.border};
+  border-radius: 10px;
+`;
+
+export const ColorButtonStyle = css`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 6.8rem;
+  padding: ${theme.spacing.m};
+  border-radius: 10px;
+
+  background-color: #f3faff;
+  gap: ${theme.spacing.m};
+`;

frontend/src/components/pages/my/MyPage.tsx

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { css } from "@emotion/react";
+
+import { AvatarCircle, Tab, Text } from "@components/common";
+
+import useUser from "@hooks/useUser";
+
+import { ERROR_MESSAGE_MAP } from "@constants/errorMessage";
+import { ROUTE_PATHS_MAP } from "@constants/route";
+
+import theme from "@styles/theme";
+
+import * as S from "./MyPage.styled";
+import MyTravelPlans from "./MyTravelPlans/MyTravelPlans";
+import MyTravelogues from "./MyTravelogues/MyTravelogues";
+
+const MyPage = () => {
+  const navigate = useNavigate();
+
+  const { user } = useUser();
+
+  useEffect(() => {
+    if (!user?.accessToken) {
+      alert(ERROR_MESSAGE_MAP.api.login);
+      navigate(ROUTE_PATHS_MAP.login);
+    }
+  }, [user?.accessToken, navigate]);
+
+  return (
+    <S.Layout>
+      <AvatarCircle $size="large" profileImageUrl={user?.profileImageUrl} />
+      <Text
+        textType="body"
+        css={css`
+          font-weight: 600;
+        `}
+      >
+        {user?.nickname}
+      </Text>
+
+      <Tab
+        labels={["내 여행 계획", "내 여행기"]}
+        tabContent={(selectedIndex) => (
+          <>{selectedIndex === 0 ? <MyTravelPlans /> : <MyTravelogues />}</>
+        )}
+        css={css`
+          li {
+            ${theme.typography.mobile.body};
+            font-weight: 600;
+          }
+        `}
+      />
+    </S.Layout>
+  );
+};
+
+export default MyPage;

frontend/src/components/pages/my/MyTravelPlans/MyTravelPlans.styled.ts

@@ -0,0 +1,28 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+import theme from "@styles/theme";
+
+export const Layout = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${(props) => props.theme.spacing.s};
+  width: 100%;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${(props) => props.theme.spacing.s};
+`;
+
+export const iconButtonStyle = css`
+  display: flex;
+  gap: ${theme.spacing.s};
+  padding: ${theme.spacing.m};
+  border: 1px solid ${theme.colors.border};
+  border-radius: 10px;
+  ${theme.typography.mobile.detail};
+`;

frontend/src/components/pages/my/MyTravelPlans/MyTravelPlans.tsx

@@ -0,0 +1,94 @@
+import { useNavigate } from "react-router-dom";
+
+import { css } from "@emotion/react";
+
+import { useTravelTransformDetailContext } from "@contexts/TravelTransformDetailProvider";
+import useInfiniteMyTravelPlans from "@queries/useInfiniteMyTravelPlans";
+import addDaysToDateString from "@utils/addDaysToDateString";
+
+import { IconButton, Text } from "@components/common";
+
+import useIntersectionObserver from "@hooks/useIntersectionObserver";
+
+import { ROUTE_PATHS_MAP } from "@constants/route";
+
+import theme from "@styles/theme";
+
+import TabContent from "../TabContent/TabContent";
+import * as S from "./MyTravelPlans.styled";
+
+const MyTravelPlans = () => {
+  const { onTransformTravelDetail } = useTravelTransformDetailContext();
+  const navigate = useNavigate();
+
+  const { myTravelPlans, status, fetchNextPage } = useInfiniteMyTravelPlans();
+  const { lastElementRef } = useIntersectionObserver(fetchNextPage);
+
+  const handleClickAddButton = () => {
+    navigate(ROUTE_PATHS_MAP.travelPlanRegister);
+  };
+
+  const handleClickTravelPlan = (id: string) => {
+    navigate(ROUTE_PATHS_MAP.travelPlan(Number(id)));
+  };
+
+  if (status === "pending") return <div>로딩 중...</div>;
+
+  return (
+    <>
+      <TabContent
+        iconButtonLabel="새 여행 계획 추가하기"
+        onClickIconButton={handleClickAddButton}
+        data={myTravelPlans}
+        renderItem={({ id, title, startDate, days }) => (
+          <S.Layout onClick={() => handleClickTravelPlan(id)}>
+            <S.Container>
+              <Text
+                textType="body"
+                css={css`
+                  font-weight: 500;
+                `}
+              >
+                {title}
+              </Text>
+              <Text
+                textType="detail"
+                css={css`
+                  color: ${theme.colors.text.secondary};
+                `}
+              >
+                {days.length !== 1
+                  ? `${startDate} - ${addDaysToDateString({
+                      dateString: startDate,
+                      daysToAdd: days.length - 1,
+                    })}`
+                  : `${startDate}`}
+              </Text>
+            </S.Container>
+
+            <IconButton
+              onClick={(e) => {
+                e.stopPropagation();
+                onTransformTravelDetail(ROUTE_PATHS_MAP.travelogueRegister, { days: days ?? [] });
+              }}
+              size="16"
+              position="left"
+              iconType="plus"
+              css={S.iconButtonStyle}
+            >
+              여행기로 전환
+            </IconButton>
+          </S.Layout>
+        )}
+      />
+      <div
+        ref={lastElementRef}
+        css={css`
+          height: 1px;
+        `}
+      />
+    </>
+  );
+};
+
+export default MyTravelPlans;