[FE] 마이페이지 화면 퍼블리싱

client/src/constants/routerUrls.ts

@@ -17,6 +17,7 @@ export const ROUTER_URLS = {
   qrCode: `${EVENT_WITH_EVENT_ID}/qrcode`,
   event: EVENT,
   login: '/login',
+  myPage: '/mypage',
   guestEventLogin: `${EVENT_WITH_EVENT_ID}/admin/guest/login`,
   memberEventLogin: `${EVENT_WITH_EVENT_ID}/admin/member/login`,
   kakaoLoginRedirectUri: process.env.KAKAO_REDIRECT_URI,

client/src/pages/MyPage/Container.tsx

@@ -0,0 +1,20 @@
+import {Flex} from '@components/Design';
+
+type ContainerProps = React.PropsWithChildren;
+
+const Container = ({children}: ContainerProps) => {
+  return (
+    <Flex
+      flexDirection="column"
+      width="100%"
+      gap="0.5rem"
+      backgroundColor="white"
+      padding="1rem"
+      css={{borderRadius: '0.75rem'}}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+export default Container;

client/src/pages/MyPage/MyPage.style.ts

@@ -0,0 +1,12 @@
+import {css} from '@emotion/react';
+
+import {Theme} from '@components/Design/theme/theme.type';
+
+export const mockImageStyle = (theme: Theme) =>
+  css({
+    width: '3rem',
+    height: '3rem',
+
+    borderRadius: '50%',
+    backgroundColor: theme.colors.gray,
+  });

client/src/pages/MyPage/index.tsx

@@ -0,0 +1,49 @@
+import {Button, Flex, FunnelLayout, MainLayout, Text, TextButton, TopNav, useTheme} from '@components/Design';
+
+import {mockImageStyle} from './MyPage.style';
+import Container from './Container';
+
+const MyPage = () => {
+  const {theme} = useTheme();
+
+  return (
+    <MainLayout backgroundColor="gray">
+      <TopNav>
+        <TopNav.Item displayName="뒤로가기" noEmphasis routePath="-1" />
+      </TopNav>
+      <FunnelLayout>
+        <Container>
+          <Flex justifyContent="spaceBetween" alignItems="center" margin="0 1rem">
+            <Flex gap="1rem" alignItems="center">
+              <div css={mockImageStyle(theme)}></div>
+              <Text size="bodyBold" textColor="onTertiary">
+                이름이 올 곳
+              </Text>
+            </Flex>
+            <Button variants="tertiary" size="small">
+              로그아웃
+            </Button>
+          </Flex>
+        </Container>
+        <Container>
+          <Flex flexDirection="column" margin="0 1.5rem" gap="1rem">
+            <TextButton textColor="onTertiary" textSize="body">
+              닉네임 설정하기
+            </TextButton>
+            <TextButton textColor="onTertiary" textSize="body">
+              기본 계좌 번호 설정하기
+            </TextButton>
+            <TextButton textColor="onTertiary" textSize="body">
+              내가 만든 행사 목록 보기
+            </TextButton>
+            <TextButton textColor="onTertiary" textSize="body">
+              탈퇴하기
+            </TextButton>
+          </Flex>
+        </Container>
+      </FunnelLayout>
+    </MainLayout>
+  );
+};
+
+export default MyPage;

client/src/router.tsx

@@ -30,6 +30,7 @@ const AddImagesPage = lazy(() => import('@pages/AddImagesPage/AddImagesPage'));
 const EssentialQueryApp = lazy(() => import('./EssentialQueryApp'));
 const QRCodePage = lazy(() => import('@pages/QRCodePage/QRCodePage'));
 const LoginPage = lazy(() => import('@pages/LoginPage'));
+const MyPage = lazy(() => import('@pages/MyPage'));
 const LoginRedirectPage = lazy(() => import('@pages/LoginPage/LoginRedirectPage'));
 const LoginFailFallback = lazy(() => import('@pages/LoginPage/LoginFailFallback'));
 
@@ -62,6 +63,10 @@ const router = createBrowserRouter([
             path: ROUTER_URLS.login,
             element: <LoginPage />,
           },
+          {
+            path: ROUTER_URLS.myPage,
+            element: <MyPage />,
+          },
           {
             path: ROUTER_URLS.kakaoLoginRedirectUri,
             element: <LoginRedirectPage />,