feat: 모바일 마이페이지 구현

src/App.tsx

@@ -19,6 +19,7 @@ import TalkPickVotes from '@/pages/MyPage/TalkPick/TalkPickVotes';
 import TalkPickComments from '@/pages/MyPage/TalkPick/TalkPickComments';
 import BalanceGameWritten from '@/pages/MyPage/BalanceGame/BalanceGameWritten';
 import BalanceGameEditPage from '@/pages/BalanceGameEditPage/BalanceGameEditPage';
+import MyMobilePage from '@/pages/mobile/MyMobilePage/MyMobilePage';
 import ProtectedRoutes from './components/Routes/ProtectedRoutes';
 import { PATH } from './constants/path';
 import { useTokenRefresh } from './hooks/common/useTokenRefresh';
@@ -119,20 +120,24 @@ const App: React.FC = () => {
 
         <Route element={<ProtectedRoutes token={accessToken} />}>
           <Route path={PATH.MYPAGE} element={<LayoutNoFooter />}>
-            <Route element={<MyPage />}>
-              <Route path="talkpick" element={<TalkPickLayout />}>
-                <Route path="bookmarks" element={<TalkPickBookmarks />} />
-                <Route path="written" element={<TalkPickWritten />} />
-                <Route path="votes" element={<TalkPickVotes />} />
-                <Route path="comments" element={<TalkPickComments />} />
+            {isMobile ? (
+              <Route index element={<MyMobilePage />} />
+            ) : (
+              <Route element={<MyPage />}>
+                <Route path="talkpick" element={<TalkPickLayout />}>
+                  <Route path="bookmarks" element={<TalkPickBookmarks />} />
+                  <Route path="written" element={<TalkPickWritten />} />
+                  <Route path="votes" element={<TalkPickVotes />} />
+                  <Route path="comments" element={<TalkPickComments />} />
+                </Route>
+                <Route path="balancegame" element={<BalanceGameLayout />}>
+                  <Route path="bookmarks" element={<BalanceGameBookmarks />} />
+                  <Route path="votes" element={<BalanceGameVotes />} />
+                  <Route path="written" element={<BalanceGameWritten />} />
+                </Route>
+                <Route index element={<TalkPickBookmarks />} />
               </Route>
-              <Route path="balancegame" element={<BalanceGameLayout />}>
-                <Route path="bookmarks" element={<BalanceGameBookmarks />} />
-                <Route path="votes" element={<BalanceGameVotes />} />
-                <Route path="written" element={<BalanceGameWritten />} />
-              </Route>
-              <Route index element={<TalkPickBookmarks />} />
-            </Route>
+            )}
           </Route>
           <Route path="/" element={<Layout />}>
             <Route path={PATH.CREATE.TALK_PICK} element={<CreatePostPage />} />

src/assets/index.ts

@@ -153,6 +153,9 @@ export { default as MobileDefaultPerson } from './svg/mobile-default-person.svg'
 export { default as MobilePlus } from './svg/mobile-plus.svg';
 export { default as MobileReport } from './svg/mobile-report.svg';
 export { default as PickIcon } from './svg/pick-icon.svg';
+export { default as MobileCardSampleFirst } from './images/my-card-sample-first.png';
+export { default as MobileCardSampleSecond } from './images/my-card-sample-second.png';
+export { default as SmileEmoji } from './svg/smile-emoji.svg';
 
 // TODO: 이전 SVG
 export { default as Email } from './svg/email.svg';

src/components/atoms/MenuTap/MenuTap.style.ts

@@ -1,38 +1,39 @@
-import { css } from '@emotion/react';
-import color from '@/styles/color';
-import typo from '@/styles/typo';
-
-export const menuTapStyling = css({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-end',
-});
-
-export const menuIconStlying = css({
-  width: '11px',
-  height: '17px',
-  cursor: 'pointer',
-});
-
-export const menuStlying = css({
-  position: 'absolute',
-  marginTop: '23px',
-  marginRight: '4px',
-  width: '86px',
-  backgroundColor: color.WT,
-  border: `1px solid ${color.GY[2]}`,
-  borderRadius: '10px',
-  overflow: 'hidden',
-  boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.07)',
-});
-
-export const menuItemStyling = css(typo.Comment.SemiBold, {
-  width: '100%',
-  padding: '10px',
-  cursor: 'pointer',
-  color: color.BK,
-  borderBottom: `1px solid ${color.GY[2]}`,
-  ':last-child': {
-    borderBottom: 'none',
-  },
-});
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const menuTapStyling = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end',
+});
+
+export const menuIconStlying = css({
+  width: '11px',
+  height: '17px',
+  cursor: 'pointer',
+});
+
+export const menuStlying = css({
+  position: 'absolute',
+  marginTop: '23px',
+  marginRight: '4px',
+  minWidth: '86px',
+  width: 'max-content',
+  backgroundColor: color.WT,
+  border: `1px solid ${color.GY[2]}`,
+  borderRadius: '10px',
+  overflow: 'hidden',
+  boxShadow: '1px 2px 10px rgba(0, 0, 0, 0.07)',
+});
+
+export const menuItemStyling = css(typo.Comment.SemiBold, {
+  width: '100%',
+  padding: '10px',
+  cursor: 'pointer',
+  color: color.BK,
+  borderBottom: `1px solid ${color.GY[2]}`,
+  ':last-child': {
+    borderBottom: 'none',
+  },
+});

src/components/atoms/MenuTap/MenuTap.tsx

@@ -1,59 +1,60 @@
-import React, { useState, useEffect } from 'react';
-import { Menu } from '@/assets';
-import {
-  menuIconStlying,
-  menuItemStyling,
-  menuStlying,
-  menuTapStyling,
-} from './MenuTap.style';
-
-export type MenuItem = {
-  label?: string;
-  onClick?: () => void;
-};
-
-export interface MenuTapProps {
-  menuData: MenuItem[];
-}
-
-const MenuTap = ({ menuData }: MenuTapProps) => {
-  const [view, setView] = useState<boolean>(false);
-
-  const handleMenuClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setView(!view);
-  };
-
-  const handleOutsideClick = () => {
-    setView(false);
-  };
-
-  useEffect(() => {
-    window.addEventListener('click', handleOutsideClick);
-    return () => {
-      window.removeEventListener('click', handleOutsideClick);
-    };
-  }, []);
-
-  return (
-    <div css={menuTapStyling}>
-      <Menu css={menuIconStlying} onClick={handleMenuClick} />
-      {view && (
-        <div css={menuStlying}>
-          {menuData.map((item) => (
-            <button
-              type="button"
-              key={item.label}
-              css={menuItemStyling}
-              onClick={item?.onClick}
-            >
-              {item.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default MenuTap;
+import React, { useState, useEffect, ReactNode } from 'react';
+import { Menu } from '@/assets';
+import {
+  menuIconStlying,
+  menuItemStyling,
+  menuStlying,
+  menuTapStyling,
+} from './MenuTap.style';
+
+export type MenuItem = {
+  id: number;
+  label?: ReactNode;
+  onClick?: () => void;
+};
+
+export interface MenuTapProps {
+  menuData: MenuItem[];
+}
+
+const MenuTap = ({ menuData }: MenuTapProps) => {
+  const [view, setView] = useState<boolean>(false);
+
+  const handleMenuClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setView(!view);
+  };
+
+  const handleOutsideClick = () => {
+    setView(false);
+  };
+
+  useEffect(() => {
+    window.addEventListener('click', handleOutsideClick);
+    return () => {
+      window.removeEventListener('click', handleOutsideClick);
+    };
+  }, []);
+
+  return (
+    <div css={menuTapStyling}>
+      <Menu css={menuIconStlying} onClick={handleMenuClick} />
+      {view && (
+        <div css={menuStlying}>
+          {menuData.map((item) => (
+            <button
+              type="button"
+              key={item.id}
+              css={menuItemStyling}
+              onClick={item?.onClick}
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MenuTap;

src/components/mobile/molecules/ProfileListItem/ProfileListItem.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import ProfileListItem from '@/components/mobile/molecules/ProfileListItem/ProfileListItem';
 import { ProfileInfoSample } from '@/assets';
+import { MemoryRouter } from 'react-router-dom';
 import { storyContainer, storyInnerContainer } from '@/stories/story.styles';
 
 const meta: Meta<typeof ProfileListItem> = {
@@ -21,6 +22,11 @@ const meta: Meta<typeof ProfileListItem> = {
       description: '이미지 URL',
       defaultValue: ProfileInfoSample,
     },
+    to: {
+      control: 'text',
+      description: '이동할 경로',
+      defaultValue: '/talkpick/1',
+    },
   },
 };
 
@@ -31,22 +37,46 @@ export const Default: Story = {
   args: {
     title: '제목제목제목제목',
     imgUrl: ProfileInfoSample,
+    to: '/talkpick/1',
   },
+  render: (args) => (
+    <MemoryRouter>
+      <ProfileListItem {...args} />
+    </MemoryRouter>
+  ),
 };
 
 export const All: Story = {
   render: (args) => (
-    <ul css={storyContainer}>
-      <li css={storyInnerContainer}>
-        <ProfileListItem {...args} title="제목1" imgUrl={ProfileInfoSample} />
-        <ProfileListItem {...args} title="제목2" imgUrl={ProfileInfoSample} />
-        <ProfileListItem {...args} title="제목3" imgUrl={ProfileInfoSample} />
-        <ProfileListItem
-          {...args}
-          title="제목제목제목제목제목"
-          imgUrl={ProfileInfoSample}
-        />
-      </li>
-    </ul>
+    <MemoryRouter>
+      <ul css={storyContainer}>
+        <li css={storyInnerContainer}>
+          <ProfileListItem
+            {...args}
+            title="제목1"
+            imgUrl={ProfileInfoSample}
+            to="/talkpick/1"
+          />
+          <ProfileListItem
+            {...args}
+            title="제목2"
+            imgUrl={ProfileInfoSample}
+            to="/talkpick/2"
+          />
+          <ProfileListItem
+            {...args}
+            title="제목3"
+            imgUrl={ProfileInfoSample}
+            to="/talkpick/3"
+          />
+          <ProfileListItem
+            {...args}
+            title="제목제목제목제목제목"
+            imgUrl={ProfileInfoSample}
+            to="/talkpick/4"
+          />
+        </li>
+      </ul>
+    </MemoryRouter>
   ),
 };