Merge pull request #28 from KGU-Vote-System/feature/13

[FEAT] : 마이페이지 개발

Author: yummjin

src/app/stackflow/Stack.tsx

@@ -22,6 +22,8 @@ import { VoteResultContentScreen } from '@/screen/vote-result-content/ui';
 import { VoteResultScreen } from '@/screen/vote-result/ui';
 import { VoteScreen } from '@/screen/vote/ui';
 import { fetchLoginStatus } from '@/shared/utils';
+import { UserScreen } from '@/screen/user/ui';
+import { UserVoteStatusScreen } from '@/screen/user-vote-status/ui';
 
 export const { Stack, useFlow } = stackflow({
   transitionDuration: 350,
@@ -45,6 +47,8 @@ export const { Stack, useFlow } = stackflow({
     VoteResultScreen,
     VoteResultContentScreen,
     HomeScreen,
+    UserScreen,
+    UserVoteStatusScreen,
   },
   plugins: [
     basicRendererPlugin(),

src/assets/icon/icon-profile.png

@@ -20,6 +20,7 @@ import UserSquareIcon from './icon-user-square.svg';
 import VoteCompleteIcon from './icon-vote-complete.png';
 import VoteIcon from './icon-vote.svg';
 import WriteIcon from './icon-write.svg';
+import ProfileIcon from './icon-profile.png';
 
 export {
   Alert,
@@ -44,4 +45,5 @@ export {
   VoteCompleteIcon,
   VoteIcon,
   WriteIcon,
+  ProfileIcon,
 };

src/assets/icon/index.ts

@@ -8,7 +8,7 @@ import { PATH } from '@/shared/constants';
 import { logout } from '@/shared/utils';
 
 export default function HomeScreen() {
-  const { replace } = useFlow();
+  const { replace, push } = useFlow();
 
   return (
     <AppScreen
@@ -19,7 +19,7 @@ export default function HomeScreen() {
           replace(PATH.LOGIN, {}, { animate: false });
           logout();
         },
-        () => {},
+        () => push(PATH.USER, {}),
       )}
     >
       <HomeContainer />

src/screen/home/ui/HomeScreen.tsx

@@ -0,0 +1,12 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+
+import { TitleAppBar } from '@/shared/ui';
+import { AdminVoteResultContainer } from '@/widgets/admin-vote-result/ui';
+
+export default function NoticeCreateScreen() {
+  return (
+    <AppScreen backgroundColor="#fff" appBar={TitleAppBar('내 투표내역 보기')}>
+      <AdminVoteResultContainer />
+    </AppScreen>
+  );
+}

src/screen/user-vote-status/ui/UserVoteStatusScreen.tsx

@@ -0,0 +1 @@
+export { default as UserVoteStatusScreen } from './UserVoteStatusScreen';

src/screen/user-vote-status/ui/index.ts

@@ -0,0 +1,72 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+import { IoChevronForward } from 'react-icons/io5';
+
+import { useFlow } from '@/app/stackflow';
+import { ProfileIcon } from '@/assets/icon';
+
+import { Button, TitleAppBar } from '@/shared/ui';
+import { fetchSessionData, logout } from '@/shared/utils';
+import { PATH } from '@/shared/constants';
+import type { User } from '@/shared/types';
+
+export default function UserScreen() {
+  const { name, collegeMajorName } = fetchSessionData('userInfo') as User;
+  const { push } = useFlow();
+
+  return (
+    <AppScreen backgroundColor="#fff" appBar={TitleAppBar('')}>
+      <div className="p-normal flex size-full flex-col">
+        <div className="mb-[35px] flex w-full flex-col items-center justify-center">
+          <img src={ProfileIcon} className="size-25" />
+          <p className="text-m mt-4 text-center text-2xl font-bold">{name}</p>
+          <p className="mt-2.5">202311509</p>
+          <p>{collegeMajorName}</p>
+        </div>
+        <div className="shadow-resultItem mb-[15px] flex h-42 w-full gap-x-3 rounded-lg bg-white px-3 py-[17px]">
+          <InfoItem item="3회" label="나의 투표참여 횟수" />
+          <div className="h-full w-[1px] bg-[#ECECEC]" />
+          <InfoItem item="59%" label="전체 투표 참여율" />
+          <div className="h-full w-[1px] bg-[#ECECEC]" />
+          <InfoItem item="51%" label="학과 평균 참여율" />
+        </div>
+        <Button
+          intent="gradient"
+          className="mb-13"
+          onClick={() => push(PATH.USER_VOTE_STATUS, {})}
+        >
+          내 투표내역 보기
+        </Button>
+        <UserScreenButton label="문의하기" onClick={() => {}} />
+        <UserScreenButton
+          label="로그아웃"
+          onClick={() => {
+            logout();
+          }}
+        />
+      </div>
+    </AppScreen>
+  );
+}
+
+const InfoItem = ({ item, label }: { item: string; label: string }) => (
+  <div className="flex flex-1 flex-col items-center justify-center gap-y-[7px]">
+    <p className="text-m text-2xl font-bold">{item}</p>
+    <p className="text-[13px] font-light">{label}</p>
+  </div>
+);
+
+const UserScreenButton = ({
+  label,
+  onClick,
+}: {
+  label: string;
+  onClick: () => void;
+}) => (
+  <button
+    className="shadow-resultItem mb-4 flex items-center justify-between rounded-md px-[18px] py-5"
+    onClick={onClick}
+  >
+    {label}
+    <IoChevronForward size={20} />
+  </button>
+);

src/screen/user/ui/UserScreen.tsx

@@ -0,0 +1 @@
+export { default as UserScreen } from './UserScreen';

src/screen/user/ui/index.ts

@@ -18,6 +18,8 @@ export const PATH = {
   VOTE_PROMISE: 'VotePromiseScreen',
   VOTE_RESULT: 'VoteResultScreen',
   VOTE_RESULT_CONTENT: 'VoteResultContentScreen',
+  USER: 'UserScreen',
+  USER_VOTE_STATUS: 'UserVoteStatusScreen',
 } as const;
 
 export const RAW_PATH = {