[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

@@ -29,6 +29,7 @@ const Header = () => {
   const handleClickLogout = () => {
     saveUser({ accessToken: "" });
   };
+  const handleClickMyPage = () => navigate(ROUTE_PATHS_MAP.my);
 
   return (
     <Drawer>
@@ -60,8 +61,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?.accessToken ? (

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

@@ -1,23 +1,30 @@
-import { useRef, useState } from "react";
+import { ComponentPropsWithoutRef, useRef, useState } from "react";
+
+import { STORAGE_KEYS_MAP } from "@constants/storage";
 
 import * as S from "./Tab.styled";
+import { FIRST_TAB_INDEX, INITIAL_SCROLL_LEFT, INITIAL_START_X } from "./constants";
 
-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 [selectedIndex, setSelectedIndex] = useState(() =>
+    JSON.parse(
+      localStorage.getItem(STORAGE_KEYS_MAP.myPageSelectedTab) ?? FIRST_TAB_INDEX.toString(),
+    ),
+  );
   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) => {
@@ -54,6 +61,7 @@ const Tab = ({ labels, tabContent }: TabProps) => {
         onMouseLeave={handleMouseLeave}
         onMouseUp={handleMouseUp}
         onMouseMove={handleMouseMove}
+        {...props}
       >
         {labels.map((label, index) => (
           <S.TabItem

frontend/src/components/common/Tab/constants.ts

@@ -0,0 +1,3 @@
+export const FIRST_TAB_INDEX = 0;
+export const INITIAL_START_X = 0;
+export const INITIAL_SCROLL_LEFT = 0;

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

@@ -0,0 +1,45 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+import theme from "@styles/theme";
+import { PRIMITIVE_COLORS } from "@styles/tokens";
+
+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: 1px solid ${(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: ${PRIMITIVE_COLORS.blue[50]};
+  gap: ${theme.spacing.m};
+`;
+
+export const ListStyle = css`
+  li {
+    ${theme.typography.mobile.body};
+    font-weight: 700;
+  }
+`;

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

@@ -0,0 +1,37 @@
+import { css } from "@emotion/react";
+
+import { useUserProfile } from "@queries/useUserProfile";
+
+import { AvatarCircle, Tab, Text } from "@components/common";
+
+import * as S from "./MyPage.styled";
+import MyTravelPlans from "./MyTravelPlans/MyTravelPlans";
+import MyTravelogues from "./MyTravelogues/MyTravelogues";
+
+const MyPage = () => {
+  const { data } = useUserProfile();
+
+  return (
+    <S.Layout>
+      <AvatarCircle $size="large" profileImageUrl={data?.profileImageUrl} />
+      <Text
+        textType="body"
+        css={css`
+          font-weight: 700;
+        `}
+      >
+        {data?.nickname}
+      </Text>
+
+      <Tab
+        labels={["내 여행 계획", "내 여행기"]}
+        tabContent={(selectedIndex) => (
+          <>{selectedIndex === 0 ? <MyTravelPlans /> : <MyTravelogues />}</>
+        )}
+        css={S.ListStyle}
+      />
+    </S.Layout>
+  );
+};
+
+export default MyPage;

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

@@ -0,0 +1,44 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+import theme from "@styles/theme";
+import { PRIMITIVE_COLORS } from "@styles/tokens";
+
+export const Container = styled.div`
+  display: flex;
+  gap: ${(props) => props.theme.spacing.s};
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+export const List = styled.ul`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: ${(props) => props.theme.spacing.m};
+`;
+
+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: ${PRIMITIVE_COLORS.blue[50]};
+  gap: ${theme.spacing.m};
+`;
+
+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: 1px solid ${(props) => props.theme.colors.border};
+  border-radius: 10px;
+`;

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

@@ -0,0 +1,52 @@
+import { css } from "@emotion/react";
+
+import { IconButton } from "@components/common";
+
+import { SEMANTIC_COLORS } from "@styles/tokens";
+
+import * as S from "./MyPageTabContent.styled";
+
+const ICON_BUTTON_TEXT = {
+  ADD_TRAVEL_PLAN: "새 여행 계획 추가하기",
+  ADD_TRAVELOGUE: "새 여행기 추가하기",
+} as const;
+
+interface MyPageTabContentProps<T extends { id: string }> {
+  iconButtonLabel: (typeof ICON_BUTTON_TEXT)[keyof typeof ICON_BUTTON_TEXT];
+  onClickIconButton: () => void;
+  contentDetail: T[];
+  renderItem: (item: T) => React.ReactNode;
+}
+
+const MyPageTabContent = <T extends { id: string }>({
+  contentDetail,
+  iconButtonLabel,
+  onClickIconButton,
+  renderItem,
+}: React.PropsWithChildren<MyPageTabContentProps<T>>) => {
+  return (
+    <S.List>
+      <IconButton
+        size="16"
+        position="left"
+        iconType="plus"
+        color={SEMANTIC_COLORS.primary}
+        css={[
+          S.ColorButtonStyle,
+          css`
+            font-weight: 600;
+          `,
+        ]}
+        onClick={onClickIconButton}
+      >
+        {iconButtonLabel}
+      </IconButton>
+
+      {contentDetail.map((item) => (
+        <S.BoxButton key={item.id}>{renderItem(item)}</S.BoxButton>
+      ))}
+    </S.List>
+  );
+};
+
+export default MyPageTabContent;

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};
+`;