From 57812a96b63b4c64a3ec0ee25bdd999299eb1531 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 00:55:02 +0900
Subject: [PATCH 01/37] feat : add icon for appbar

---
 src/assets/icon/icon-user-square.svg | 3 +++
 src/assets/icon/index.ts             | 2 ++
 2 files changed, 5 insertions(+)
 create mode 100644 src/assets/icon/icon-user-square.svg

diff --git a/src/assets/icon/icon-user-square.svg b/src/assets/icon/icon-user-square.svg
new file mode 100644
index 0000000..7c81cc3
--- /dev/null
+++ b/src/assets/icon/icon-user-square.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.00002 21.8174C4.6026 22 5.41649 22 6.8 22H17.2C18.5835 22 19.3974 22 20 21.8174M4.00002 21.8174C3.87082 21.7783 3.75133 21.7308 3.63803 21.673C3.07354 21.3854 2.6146 20.9265 2.32698 20.362C2 19.7202 2 18.8802 2 17.2V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H17.2C18.8802 2 19.7202 2 20.362 2.32698C20.9265 2.6146 21.3854 3.07354 21.673 3.63803C22 4.27976 22 5.11984 22 6.8V17.2C22 18.8802 22 19.7202 21.673 20.362C21.3854 20.9265 20.9265 21.3854 20.362 21.673C20.2487 21.7308 20.1292 21.7783 20 21.8174M4.00002 21.8174C4.00035 21.0081 4.00521 20.5799 4.07686 20.2196C4.39249 18.6329 5.63288 17.3925 7.21964 17.0769C7.60603 17 8.07069 17 9 17H15C15.9293 17 16.394 17 16.7804 17.0769C18.3671 17.3925 19.6075 18.6329 19.9231 20.2196C19.9948 20.5799 19.9996 21.0081 20 21.8174M16 9.5C16 11.7091 14.2091 13.5 12 13.5C9.79086 13.5 8 11.7091 8 9.5C8 7.29086 9.79086 5.5 12 5.5C14.2091 5.5 16 7.29086 16 9.5Z" stroke="#324160" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icon/index.ts b/src/assets/icon/index.ts
index e022a39..d25f58e 100644
--- a/src/assets/icon/index.ts
+++ b/src/assets/icon/index.ts
@@ -16,6 +16,7 @@ import NotificationIcon from './icon-notification.png';
 import ResultIcon from './icon-result.png';
 import TextBoxIcon from './icon-textbox.svg';
 import UserIcon from './icon-user.svg';
+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';
@@ -38,6 +39,7 @@ export {
   ResultIcon,
   TextBoxIcon,
   UserIcon,
+  UserSquareIcon,
   VerifiedCheckIcon,
   VoteCompleteIcon,
   VoteIcon,

From d4e538a18a81e3023c059f37c866ed83defd613f Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 01:05:28 +0900
Subject: [PATCH 02/37] feat : add icon at `AdminAppBar`

---
 src/shared/ui/AppBar.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/shared/ui/AppBar.tsx b/src/shared/ui/AppBar.tsx
index ec1cf6a..5875f25 100644
--- a/src/shared/ui/AppBar.tsx
+++ b/src/shared/ui/AppBar.tsx
@@ -1,5 +1,11 @@
 /* eslint-disable react-refresh/only-export-components */
-import { BackButton, LogoutIcon, UserIcon, WriteIcon } from '@/assets/icon';
+import {
+  BackButton,
+  LogoutIcon,
+  UserIcon,
+  UserSquareIcon,
+  WriteIcon,
+} from '@/assets/icon';
 import { HomeBg, LoginBg, VoteBg } from '@/assets/image';
 import type { MouseEvent } from 'react';
 
@@ -21,13 +27,13 @@ export const HomeAppBar = (
   renderRight: () => (
     <>
       <button
-        className="text-m mr-[12px] flex items-center gap-x-1"
+        className="text-m mr-[12px] flex cursor-pointer items-center gap-x-1"
         onClick={onLogoutClick}
       >
         <img src={LogoutIcon} />
       </button>
       <button
-        className="text-m mr-[4px] flex items-center gap-x-1"
+        className="text-m mr-[4px] flex cursor-pointer items-center gap-x-1"
         onClick={onUserClick}
       >
         <img src={UserIcon} />
@@ -39,6 +45,7 @@ export const HomeAppBar = (
 export const AdminAppBar = (
   onLogoutClick: () => void,
   onWriteClick: () => void,
+  onChangeModeClick: () => void,
 ) => ({
   ...baseStyle,
   backgroundImage: `url(${VoteBg})`,
@@ -46,17 +53,23 @@ export const AdminAppBar = (
   renderRight: () => (
     <>
       <button
-        className="text-m mr-[12px] flex items-center gap-x-1"
+        className="text-m mr-[12px] flex cursor-pointer items-center gap-x-1"
         onClick={onLogoutClick}
       >
         <img src={LogoutIcon} />
       </button>
       <button
-        className="text-m mr-[4px] flex items-center gap-x-1"
+        className="text-m mr-[12px] flex cursor-pointer items-center gap-x-1"
         onClick={onWriteClick}
       >
         <img src={WriteIcon} />
       </button>
+      <button
+        className="text-m mr-[4px] flex cursor-pointer items-center gap-x-1"
+        onClick={onChangeModeClick}
+      >
+        <img src={UserSquareIcon} />
+      </button>
     </>
   ),
 });

From 79e27ad8590a8ab0e4f7d9b1aa33e51690099ade Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 01:05:44 +0900
Subject: [PATCH 03/37] feat : add logout logic at `onLogoutClick` function

---
 src/screen/admin-home/ui/AdminHomeScreen.tsx | 7 ++++++-
 src/screen/home/ui/HomeScreen.tsx            | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/screen/admin-home/ui/AdminHomeScreen.tsx b/src/screen/admin-home/ui/AdminHomeScreen.tsx
index a57e615..42f409c 100644
--- a/src/screen/admin-home/ui/AdminHomeScreen.tsx
+++ b/src/screen/admin-home/ui/AdminHomeScreen.tsx
@@ -2,6 +2,7 @@ import { useFlow } from '@/app/stackflow';
 import { VoteBg } from '@/assets/image';
 import { PATH } from '@/shared/constants';
 import { AdminAppBar } from '@/shared/ui';
+import { logout } from '@/shared/utils';
 import { AdminHomeContainer } from '@/widgets/admin-home/ui';
 import { AppScreen } from '@stackflow/plugin-basic-ui';
 
@@ -13,8 +14,12 @@ export default function AdminHomeScreen() {
       preventSwipeBack
       backgroundImage={`url(${VoteBg})`}
       appBar={AdminAppBar(
-        () => replace(PATH.LOGIN, {}),
+        () => {
+          replace(PATH.LOGIN, {}, { animate: false });
+          logout();
+        },
         () => push(PATH.NOTICE_CREATE, {}),
+        () => replace(PATH.HOME, {}),
       )}
     >
       <AdminHomeContainer />
diff --git a/src/screen/home/ui/HomeScreen.tsx b/src/screen/home/ui/HomeScreen.tsx
index 7f967b8..76c0c48 100644
--- a/src/screen/home/ui/HomeScreen.tsx
+++ b/src/screen/home/ui/HomeScreen.tsx
@@ -5,6 +5,7 @@ import { HomeAppBar } from '@/shared/ui';
 import { HomeContainer } from '@/widgets/home/ui';
 import { useFlow } from '@/app/stackflow';
 import { PATH } from '@/shared/constants';
+import { logout } from '@/shared/utils';
 
 export default function HomeScreen() {
   const { replace } = useFlow();
@@ -14,7 +15,10 @@ export default function HomeScreen() {
       preventSwipeBack
       backgroundImage={`url(${HomeBg})`}
       appBar={HomeAppBar(
-        () => replace(PATH.LOGIN, {}),
+        () => {
+          replace(PATH.LOGIN, {}, { animate: false });
+          logout();
+        },
         () => {},
       )}
     >

From 0c272bf49234fe8d328ed8158d2a503999075d67 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 01:57:29 +0900
Subject: [PATCH 04/37] feat : implement logic fetches election data by status

---
 src/features/admin-dashboard/api/election.ts | 19 +++++++++++++++++++
 src/features/admin-dashboard/api/index.ts    |  1 +
 src/shared/api/requests.ts                   |  1 +
 3 files changed, 21 insertions(+)
 create mode 100644 src/features/admin-dashboard/api/election.ts
 create mode 100644 src/features/admin-dashboard/api/index.ts

diff --git a/src/features/admin-dashboard/api/election.ts b/src/features/admin-dashboard/api/election.ts
new file mode 100644
index 0000000..c9672f7
--- /dev/null
+++ b/src/features/admin-dashboard/api/election.ts
@@ -0,0 +1,19 @@
+import { REQUEST, userGet } from '@/shared/api';
+import type { Election, VoteStatus } from '@/shared/types';
+import { useQuery } from '@tanstack/react-query';
+
+const fetchElectionByStatus = async (status: VoteStatus) => {
+  const response = await userGet<Election[], { status: VoteStatus }>({
+    request: REQUEST.ELECTION_STATUS,
+    params: { status: status },
+  });
+  return response.data;
+};
+
+export const useFetchElectionByStatus = (status: VoteStatus) => {
+  return useQuery({
+    queryKey: ['election-status', `${status}`],
+    queryFn: () => fetchElectionByStatus(status),
+    staleTime: 60 * 5,
+  });
+};
diff --git a/src/features/admin-dashboard/api/index.ts b/src/features/admin-dashboard/api/index.ts
new file mode 100644
index 0000000..71fe4e1
--- /dev/null
+++ b/src/features/admin-dashboard/api/index.ts
@@ -0,0 +1 @@
+export * from './election';
diff --git a/src/shared/api/requests.ts b/src/shared/api/requests.ts
index acf0a63..ed51f73 100644
--- a/src/shared/api/requests.ts
+++ b/src/shared/api/requests.ts
@@ -4,6 +4,7 @@ export const REQUEST = {
   JOIN: '/auth/kakao/signup',
   REFRESH: '/auth/refresh',
   ELECTION_ALL: '/api/elections/all',
+  ELECTION_STATUS: '/api/elections/status',
   NOTICE_CAMPUS: '/api/notices/notices/campus/',
   NOTICE: '/api/notices/',
   CANDIDATE: '/api/candidates/all/',

From 7be72f0504003da3482c3a6233718f1ac9729950 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 01:58:03 +0900
Subject: [PATCH 05/37] feat : change `VoteStatus` type

---
 src/shared/types/vote.ts                                   | 2 +-
 src/widgets/admin-dashboard/ui/AdminDashboardContainer.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/shared/types/vote.ts b/src/shared/types/vote.ts
index 40fadc1..d82cc1c 100644
--- a/src/shared/types/vote.ts
+++ b/src/shared/types/vote.ts
@@ -1 +1 @@
-export type VoteStatus = '진행중' | '종료' | '예정';
+export type VoteStatus = 'ongoing' | 'ended' | 'upcoming';
diff --git a/src/widgets/admin-dashboard/ui/AdminDashboardContainer.tsx b/src/widgets/admin-dashboard/ui/AdminDashboardContainer.tsx
index c0535f6..ee798b7 100644
--- a/src/widgets/admin-dashboard/ui/AdminDashboardContainer.tsx
+++ b/src/widgets/admin-dashboard/ui/AdminDashboardContainer.tsx
@@ -1,11 +1,10 @@
 import { CardList } from '@/features/admin-dashboard/ui';
-import type { VoteStatus } from '@/shared/types';
 import { cn } from '@/shared/utils';
 import { useState } from 'react';
 
 export default function AdminDashboardContainer() {
   const [selected, setSelected] = useState(0);
-  const STATUS: VoteStatus[] = ['진행중', '종료', '예정'];
+  const STATUS = ['진행중', '종료', '예정'];
 
   return (
     <div className="py-normal flex size-full flex-col">

From 1976edcce04932924ca730a3f14b2cb08102a10e Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 01:58:33 +0900
Subject: [PATCH 06/37] feat : show real data at admin dashboard screen

---
 src/features/admin-dashboard/ui/CardList.tsx | 63 ++++++++++++++------
 1 file changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/features/admin-dashboard/ui/CardList.tsx b/src/features/admin-dashboard/ui/CardList.tsx
index 09adf57..1315a35 100644
--- a/src/features/admin-dashboard/ui/CardList.tsx
+++ b/src/features/admin-dashboard/ui/CardList.tsx
@@ -1,25 +1,52 @@
-import type { VoteStatus } from '@/shared/types';
-// import { Card } from '@/shared/ui';
-import { VOTE_MOCK } from '@/features/admin-dashboard/mock';
+import type { Election, VoteStatus } from '@/shared/types';
+import { Card } from '@/shared/ui';
+import { getDate } from '@/shared/utils';
 
-export default function CardList({ status }: { status: VoteStatus }) {
-  const data = VOTE_MOCK.filter(
-    ({ status: voteStatus }) => voteStatus === status,
+import { useFetchElectionByStatus } from '@/features/admin-dashboard/api';
+
+export default function CardList({ status }: { status: string }) {
+  const VOTE_STATUS: Record<string, VoteStatus> = {
+    진행중: 'ongoing',
+    예정: 'upcoming',
+    종료: 'ended',
+  };
+  const { data, isError, isFetching } = useFetchElectionByStatus(
+    VOTE_STATUS[status],
   );
-  console.log(data);
-  
+
+  const renderElection = (data: Election[]) => {
+    if (isError)
+      return (
+        <div className="px-normal mt-8 w-full text-center">
+          투표를 가져오던 중 오류가 발생했어요!
+        </div>
+      );
+    if (!isFetching && data.length === 0)
+      return (
+        <div className="px-normal mt-8 w-full text-center">투표가 없어요</div>
+      );
+    if (data && data.length > 0)
+      return (
+        <>
+          {data.map(({ id, campus, title, startAt, endAt }, index) => (
+            <Card
+              className={index === 0 ? 'mt-8' : ''}
+              id={id}
+              key={id}
+              campus={campus}
+              status={status}
+              title={title}
+              date={`${getDate(startAt, 'YYYY.MM.DD')} - ${getDate(endAt, 'YYYY.MM.DD')}`}
+            />
+          ))}
+        </>
+      );
+    return <></>;
+  };
+
   return (
     <div className="scrollbar-hide px-normal flex size-full flex-1 flex-col gap-y-[26px] overflow-scroll">
-{/*       {data.map(({ id, campus, status, title, date }, index) => (
-        <Card
-          className={index === 0 ? 'mt-8' : ''}
-          key={id}
-          campus={campus}
-          status={status}
-          title={title}
-          date={date}
-        />
-      ))} */}
+      {renderElection(data || [])}
     </div>
   );
 }

From 7eabc917c26375df7eb3e7fcd8873a2710169fe1 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:09:35 +0900
Subject: [PATCH 07/37] refactor : remove `Button` component at container due
 to make form component

---
 .../notice-create/ui/NoticeCreateContainer.tsx | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/widgets/notice-create/ui/NoticeCreateContainer.tsx b/src/widgets/notice-create/ui/NoticeCreateContainer.tsx
index 1e2c0b9..0a986cb 100644
--- a/src/widgets/notice-create/ui/NoticeCreateContainer.tsx
+++ b/src/widgets/notice-create/ui/NoticeCreateContainer.tsx
@@ -1,21 +1,5 @@
-import { useFlow } from '@/app/stackflow';
 import { NoticeForm } from '@/features/notice-create/ui';
-import { Button } from '@/shared/ui';
 
 export default function NoticeCreateContainer() {
-  const { pop } = useFlow();
-  return (
-    <>
-      <NoticeForm />
-      <div className="shadow-voteCreateDock px-normal fixed bottom-0 flex w-full gap-x-[9px] bg-white pt-4 pb-15">
-        <Button
-          intent="gradient"
-          className="flex-1 text-lg"
-          onClick={() => pop({ animate: false })}
-        >
-          작성 완료
-        </Button>
-      </div>
-    </>
-  );
+  return <NoticeForm />;
 }

From 70dabe83f195fea2872e1bb7c327cff3a1d0cd19 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:10:08 +0900
Subject: [PATCH 08/37] refactor : move `Notice` type to shared layer

---
 src/features/notice/types/index.ts  |  1 -
 src/features/notice/types/notice.ts | 15 ---------------
 src/shared/types/index.ts           |  2 ++
 src/shared/types/notice.ts          | 18 ++++++++++++++++++
 4 files changed, 20 insertions(+), 16 deletions(-)
 delete mode 100644 src/features/notice/types/index.ts
 delete mode 100644 src/features/notice/types/notice.ts
 create mode 100644 src/shared/types/notice.ts

diff --git a/src/features/notice/types/index.ts b/src/features/notice/types/index.ts
deleted file mode 100644
index 6351718..0000000
--- a/src/features/notice/types/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './notice';
diff --git a/src/features/notice/types/notice.ts b/src/features/notice/types/notice.ts
deleted file mode 100644
index 0ea5c2c..0000000
--- a/src/features/notice/types/notice.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export type NoticeType = 'UPCOMING' | 'NOTIFY';
-
-export type NoticeListType = NoticeType | 'ONGOING' | 'COMPLETED';
-
-export type Notice = {
-  id: number;
-  title: string;
-  startAt: string;
-  endAt: string;
-  noticeType: NoticeType;
-};
-
-export type NoticeList = Omit<Notice, 'noticeType'> & {
-  noticeStatus: NoticeListType;
-};
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
index eda329a..78cd548 100644
--- a/src/shared/types/index.ts
+++ b/src/shared/types/index.ts
@@ -4,3 +4,5 @@ export * from './election';
 export * from './path';
 export * from './user';
 export * from './vote';
+export * from './util';
+export * from './notice';
diff --git a/src/shared/types/notice.ts b/src/shared/types/notice.ts
new file mode 100644
index 0000000..5c48dc3
--- /dev/null
+++ b/src/shared/types/notice.ts
@@ -0,0 +1,18 @@
+import type { Campus } from '@/shared/types';
+
+export type NoticeStatus = 'UPCOMING' | 'NOTIFY' | 'ONGOING' | 'COMPLETED';
+export type NoticeType = 'NOTIFY' | 'ELECTION';
+
+export type Notice = {
+  title: string;
+  content: string;
+  noticeType: NoticeType;
+  campus: Campus;
+  startAt: string;
+  endAt: string;
+};
+
+export type NoticeList = Omit<Notice, 'noticeType' | 'content' | 'campus'> & {
+  noticeStatus: NoticeStatus;
+  id: number;
+};

From 24913f242025c2727321f211b6b074742c15a6f5 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:11:00 +0900
Subject: [PATCH 09/37] feat : add constant of `NoticeType`

---
 src/shared/constants/index.ts  | 1 +
 src/shared/constants/notice.ts | 6 ++++++
 2 files changed, 7 insertions(+)
 create mode 100644 src/shared/constants/notice.ts

diff --git a/src/shared/constants/index.ts b/src/shared/constants/index.ts
index fbd4605..6459150 100644
--- a/src/shared/constants/index.ts
+++ b/src/shared/constants/index.ts
@@ -1,3 +1,4 @@
 export * from './path';
 export * from './bottomSheet';
 export * from './campus';
+export * from './notice';
diff --git a/src/shared/constants/notice.ts b/src/shared/constants/notice.ts
new file mode 100644
index 0000000..b28de7f
--- /dev/null
+++ b/src/shared/constants/notice.ts
@@ -0,0 +1,6 @@
+import type { NoticeType } from '@/features/notice/types';
+
+export const NOTICE_TYPE: Record<NoticeType, string> = {
+  ELECTION: '선거 공지',
+  NOTIFY: '알림',
+};

From a68448e32802ddf0d772df5252cbfcd786e61a67 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:12:34 +0900
Subject: [PATCH 10/37] refactor : change type name and import

---
 src/features/notice/constants/status.ts | 4 ++--
 src/features/notice/ui/NoticeItem.tsx   | 4 ++--
 src/shared/constants/notice.ts          | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/features/notice/constants/status.ts b/src/features/notice/constants/status.ts
index dd5561b..387a303 100644
--- a/src/features/notice/constants/status.ts
+++ b/src/features/notice/constants/status.ts
@@ -1,4 +1,4 @@
-import type { NoticeListType } from '../types';
+import type { NoticeStatus } from '@/shared/types';
 
 type StatusStyle = {
   label: string;
@@ -6,7 +6,7 @@ type StatusStyle = {
   color: string;
 };
 
-export const NOTICE_STATUS: Record<NoticeListType, StatusStyle> = {
+export const NOTICE_STATUS: Record<NoticeStatus, StatusStyle> = {
   COMPLETED: { label: '종료', bgColor: '#F5F5F5', color: '#999' },
   NOTIFY: {
     label: '알림',
diff --git a/src/features/notice/ui/NoticeItem.tsx b/src/features/notice/ui/NoticeItem.tsx
index f8e4d6c..337cdfc 100644
--- a/src/features/notice/ui/NoticeItem.tsx
+++ b/src/features/notice/ui/NoticeItem.tsx
@@ -1,5 +1,5 @@
 import { MessageIcon, NotificationIcon } from '@/assets/icon';
-import type { NoticeList } from '../types';
+import type { NoticeList } from '@/shared/types';
 
 import { useFlow } from '@/app/stackflow';
 import { PATH } from '@/shared/constants';
@@ -21,7 +21,7 @@ export default function NoticeItem({
       className="flex w-full flex-shrink-0 cursor-pointer items-center overflow-hidden py-6 focus:outline-none"
       onClick={() =>
         push(PATH.NOTICE_CONTENT, {
-          notice: { id, title, startAt, endAt },
+          notice: { id, title, startAt, endAt, noticeStatus },
         })
       }
     >
diff --git a/src/shared/constants/notice.ts b/src/shared/constants/notice.ts
index b28de7f..a11d600 100644
--- a/src/shared/constants/notice.ts
+++ b/src/shared/constants/notice.ts
@@ -1,4 +1,4 @@
-import type { NoticeType } from '@/features/notice/types';
+import type { NoticeType } from '@/shared/types';
 
 export const NOTICE_TYPE: Record<NoticeType, string> = {
   ELECTION: '선거 공지',

From ec9c2f6aa258ecdd8141361b1b32e732bc94c15a Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:12:51 +0900
Subject: [PATCH 11/37] feat : implement logic submits notice creation

---
 src/features/notice-create/api/create.ts | 26 ++++++++++++++++++++++++
 src/features/notice-create/api/index.ts  |  1 +
 2 files changed, 27 insertions(+)
 create mode 100644 src/features/notice-create/api/create.ts
 create mode 100644 src/features/notice-create/api/index.ts

diff --git a/src/features/notice-create/api/create.ts b/src/features/notice-create/api/create.ts
new file mode 100644
index 0000000..5f9149a
--- /dev/null
+++ b/src/features/notice-create/api/create.ts
@@ -0,0 +1,26 @@
+import { useFlow } from '@/app/stackflow';
+import { useMutation } from '@tanstack/react-query';
+
+import { REQUEST, userPost } from '@/shared/api';
+import type { Replace, WholeCampus, Notice } from '@/shared/types';
+
+const submitNotice = async (data: Replace<Notice, 'campus', WholeCampus>) => {
+  const response = await userPost({
+    request: REQUEST.NOTICE.slice(0, -1),
+    data: data,
+  });
+  return response;
+};
+
+export const useSubmitNotice = () => {
+  const { pop } = useFlow();
+
+  return useMutation({
+    mutationFn: (data: Replace<Notice, 'campus', WholeCampus>) =>
+      submitNotice(data),
+    onSuccess: () => {
+      alert('공지 등록 성공!');
+      pop({ animate: false });
+    },
+  });
+};
diff --git a/src/features/notice-create/api/index.ts b/src/features/notice-create/api/index.ts
new file mode 100644
index 0000000..1e03cce
--- /dev/null
+++ b/src/features/notice-create/api/index.ts
@@ -0,0 +1 @@
+export * from './create';

From a08cb088049a85634f362528ed83c02039352cf6 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:14:34 +0900
Subject: [PATCH 12/37] feat : pass parameters with `rest` for  better
 flexibility

---
 .../notice-create/ui/NoticeFormButton.tsx     | 19 +++++++++++++++----
 .../notice-create/ui/NoticeFormInput.tsx      | 11 +++++++++--
 src/features/vote-create/ui/VoteButton.tsx    |  2 ++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/features/notice-create/ui/NoticeFormButton.tsx b/src/features/notice-create/ui/NoticeFormButton.tsx
index db0c58d..e273076 100644
--- a/src/features/notice-create/ui/NoticeFormButton.tsx
+++ b/src/features/notice-create/ui/NoticeFormButton.tsx
@@ -1,15 +1,26 @@
 import { cn } from '@/shared/utils';
-import { useState } from 'react';
+import type { HTMLAttributes } from 'react';
 
-export default function NoticeFormButton({ label }: { label: string }) {
-  const [selected, setSelected] = useState(false);
+interface NoticeFormButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  label: string;
+  selected: boolean;
+}
+
+export default function NoticeFormButton({
+  label,
+  selected,
+  onClick,
+  ...rest
+}: NoticeFormButtonProps) {
   return (
     <button
-      onClick={() => setSelected(!selected)}
+      type="button"
+      onClick={onClick}
       className={cn(
         selected ? 'text-m border-m' : 'border-sl text-s',
         'cursor-pointer rounded-md border-[1px] px-[14px] py-1 text-sm focus:outline-none',
       )}
+      {...rest}
     >
       {label}
     </button>
diff --git a/src/features/notice-create/ui/NoticeFormInput.tsx b/src/features/notice-create/ui/NoticeFormInput.tsx
index c632ae3..ef574bc 100644
--- a/src/features/notice-create/ui/NoticeFormInput.tsx
+++ b/src/features/notice-create/ui/NoticeFormInput.tsx
@@ -1,5 +1,12 @@
-export default function NoticeFormInput() {
+import type { HTMLAttributes } from 'react';
+
+type NoticeFormInputProps = HTMLAttributes<HTMLInputElement>;
+
+export default function NoticeFormInput({ ...rest }: NoticeFormInputProps) {
   return (
-    <input className="border-sl w-full rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
+    <input
+      className="border-sl w-full rounded-md border-[1px] px-5 py-[11px] focus:outline-none"
+      {...rest}
+    />
   );
 }
diff --git a/src/features/vote-create/ui/VoteButton.tsx b/src/features/vote-create/ui/VoteButton.tsx
index 5f3ac36..9d814ef 100644
--- a/src/features/vote-create/ui/VoteButton.tsx
+++ b/src/features/vote-create/ui/VoteButton.tsx
@@ -10,12 +10,14 @@ export default function VoteButton({
   arrowDown = false,
   label,
   onClick,
+  ...rest
 }: VoteButtonProps) {
   return (
     <button
       name="mainCandidate"
       className="border-sl flex h-17 w-full cursor-pointer items-center justify-between rounded-md border-[1px] px-5 font-normal text-[#999] focus:outline-none"
       onClick={onClick}
+      {...rest}
     >
       {label}
       {arrowDown ? (

From 78ab710ef3454dfd68b384a677fb2b6cf053c2c2 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:15:31 +0900
Subject: [PATCH 13/37] feat : add `ElectionPost` type, `WholeCampus` type,
 util type `Replace`

---
 src/shared/types/campus.ts   | 2 ++
 src/shared/types/election.ts | 2 ++
 src/shared/types/util.ts     | 3 +++
 3 files changed, 7 insertions(+)
 create mode 100644 src/shared/types/util.ts

diff --git a/src/shared/types/campus.ts b/src/shared/types/campus.ts
index 40d9c74..784d71c 100644
--- a/src/shared/types/campus.ts
+++ b/src/shared/types/campus.ts
@@ -1 +1,3 @@
 export type Campus = 'SUWON' | 'SEOUL';
+
+export type WholeCampus = 'ALL' | Campus;
diff --git a/src/shared/types/election.ts b/src/shared/types/election.ts
index 96d169e..471f7d6 100644
--- a/src/shared/types/election.ts
+++ b/src/shared/types/election.ts
@@ -12,6 +12,8 @@ export type Election = {
   collageMajorName: string;
 };
 
+export type ElectionPost = Omit<Election, 'ownerId' | 'isActive' | 'id'>;
+
 export type Candidate = {
   id: number;
   name: string;
diff --git a/src/shared/types/util.ts b/src/shared/types/util.ts
new file mode 100644
index 0000000..85a3758
--- /dev/null
+++ b/src/shared/types/util.ts
@@ -0,0 +1,3 @@
+export type Replace<T, K extends keyof T, NewType> = Omit<T, K> & {
+  [P in K]: NewType;
+};

From 3a702a5021fb631d245c7ff1fb26348c3ca21491 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:16:19 +0900
Subject: [PATCH 14/37] feat : implement util function returns typed keys from
 object

---
 src/shared/utils/index.ts  | 1 +
 src/shared/utils/object.ts | 2 ++
 2 files changed, 3 insertions(+)
 create mode 100644 src/shared/utils/object.ts

diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts
index ead9d8c..1ff26e2 100644
--- a/src/shared/utils/index.ts
+++ b/src/shared/utils/index.ts
@@ -5,3 +5,4 @@ export * from './logout';
 export * from './navigate';
 export * from './string';
 export * from './getDate';
+export * from './object';
diff --git a/src/shared/utils/object.ts b/src/shared/utils/object.ts
new file mode 100644
index 0000000..dabf6d5
--- /dev/null
+++ b/src/shared/utils/object.ts
@@ -0,0 +1,2 @@
+export const keys = <T extends object>(obj: T): Array<keyof T> =>
+  Object.keys(obj) as Array<keyof T>;

From e87aa50a663aa00b69490fddba8d20aa97a52606 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:16:37 +0900
Subject: [PATCH 15/37] refactor : reflect type change on `NoticeContentScreen`

---
 src/screen/notice-content/ui/NoticeContentScreen.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/screen/notice-content/ui/NoticeContentScreen.tsx b/src/screen/notice-content/ui/NoticeContentScreen.tsx
index 61e230e..ac3f692 100644
--- a/src/screen/notice-content/ui/NoticeContentScreen.tsx
+++ b/src/screen/notice-content/ui/NoticeContentScreen.tsx
@@ -1,13 +1,13 @@
 import { AppScreen } from '@stackflow/plugin-basic-ui';
 
 import { TitleAppBar } from '@/shared/ui';
-import type { Notice } from '@/features/notice/types';
+import type { NoticeList } from '@/shared/types';
 import type { ActivityComponentType } from '@stackflow/react';
 import { NoticeContentContainer } from '@/widgets/notice-content/ui';
 
 const NoticeContentScreen: ActivityComponentType<{
-  notice: Omit<Notice, 'noticeType'>;
-}> = ({ params }: { params: { notice: Omit<Notice, 'noticeType'> } }) => {
+  notice: NoticeList;
+}> = ({ params }: { params: { notice: NoticeList } }) => {
   const { title, id, startAt, endAt } = params.notice;
   return (
     <AppScreen backgroundColor="#fff" appBar={TitleAppBar('공지사항')}>

From 85358c0f4f62df4f5d46b4ee67595788c49df1c4 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 06:17:19 +0900
Subject: [PATCH 16/37] feat : complete implement of notice submitting
 functionality

---
 src/features/notice-create/ui/NoticeForm.tsx | 127 +++++++++++++++----
 1 file changed, 100 insertions(+), 27 deletions(-)

diff --git a/src/features/notice-create/ui/NoticeForm.tsx b/src/features/notice-create/ui/NoticeForm.tsx
index fcc492d..500805b 100644
--- a/src/features/notice-create/ui/NoticeForm.tsx
+++ b/src/features/notice-create/ui/NoticeForm.tsx
@@ -1,35 +1,108 @@
+import { useForm } from 'react-hook-form';
+import { useEffect, useState } from 'react';
+
+import type {
+  Campus,
+  Replace,
+  WholeCampus,
+  Notice,
+  NoticeType,
+} from '@/shared/types';
+import { CAMPUS, NOTICE_TYPE } from '@/shared/constants';
+import { keys } from '@/shared/utils';
+import { Button } from '@/shared/ui';
+
+import { useSubmitNotice } from '@/features/notice-create/api';
+
 import NoticeFormButton from './NoticeFormButton';
 import NoticeFormInput from './NoticeFormInput';
 import NoticeFormItem from './NoticeFormItem';
 
 export default function NoticeForm() {
+  const { mutate } = useSubmitNotice();
+  const [noticeType, setNoticeType] = useState<NoticeType | undefined>();
+  const [campus, setCampus] = useState<Campus[]>([]);
+  const { register, handleSubmit, watch, setValue } = useForm<
+    Replace<Notice, 'campus', WholeCampus>
+  >({
+    defaultValues: {
+      startAt: '2025-06-27',
+      endAt: '2025-06-28',
+    },
+  });
+  const isFormValid =
+    watch('title') &&
+    watch('campus') &&
+    watch('content') &&
+    watch('noticeType');
+
+  useEffect(() => {
+    const value = campus.length > 1 ? ('ALL' as const) : campus[0];
+    setValue('campus', value);
+  }, [campus, setValue]);
+
   return (
-    <div className="p-normal scrollbar-hide size-full space-y-6 overflow-scroll pb-38">
-      <NoticeFormItem label="공지 유형이 무엇인가요?" required>
-        <div className="items-center space-x-[10px]">
-          <NoticeFormButton label="알림" />
-          <NoticeFormButton label="선거 공지" />
-        </div>
-      </NoticeFormItem>
-      <NoticeFormItem label="어떤 캠퍼스 공지인가요?">
-        <div className="items-center space-x-[10px]">
-          <NoticeFormButton label="수원캠" />
-          <NoticeFormButton label="서울캠" />
-        </div>
-      </NoticeFormItem>
-      <NoticeFormItem label="기간">
-        <div className="flex w-full items-center gap-x-[10px]">
-          <div className="border-sl h-[46px] flex-1 rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
-          ~
-          <div className="border-sl h-[46px] flex-1 rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
-        </div>
-      </NoticeFormItem>
-      <NoticeFormItem label="제목">
-        <NoticeFormInput />
-      </NoticeFormItem>
-      <NoticeFormItem label="내용">
-        <textarea className="border-sl h-42 w-full resize-none rounded-md border-[1px] px-5 py-[18px] focus:outline-none" />
-      </NoticeFormItem>
-    </div>
+    <form onSubmit={handleSubmit(data => mutate(data))}>
+      <div className="p-normal scrollbar-hide size-full space-y-6 overflow-scroll pb-38">
+        <NoticeFormItem label="공지 유형이 무엇인가요?" required>
+          <div className="items-center space-x-[10px]">
+            {keys(NOTICE_TYPE).map(noti => (
+              <NoticeFormButton
+                key={noti}
+                label={NOTICE_TYPE[noti]}
+                selected={noti === noticeType}
+                onClick={() => {
+                  setNoticeType(noti);
+                  setValue('noticeType', noti);
+                }}
+              />
+            ))}
+          </div>
+        </NoticeFormItem>
+        <NoticeFormItem label="어떤 캠퍼스 공지인가요?">
+          <div className="items-center space-x-[10px]">
+            {keys(CAMPUS).map(cam => (
+              <NoticeFormButton
+                key={cam}
+                label={CAMPUS[cam]}
+                selected={campus.includes(cam)}
+                onClick={() => {
+                  setCampus(prev => {
+                    if (!prev?.includes(cam)) return [cam, ...prev];
+                    else return prev.filter(c => c !== cam);
+                  });
+                }}
+              />
+            ))}
+          </div>
+        </NoticeFormItem>
+        <NoticeFormItem label="기간">
+          <div className="flex w-full items-center gap-x-[10px]">
+            <div className="border-sl h-[46px] flex-1 rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
+            ~
+            <div className="border-sl h-[46px] flex-1 rounded-md border-[1px] px-5 py-[11px] focus:outline-none" />
+          </div>
+        </NoticeFormItem>
+        <NoticeFormItem label="제목">
+          <NoticeFormInput {...register('title')} />
+        </NoticeFormItem>
+        <NoticeFormItem label="내용">
+          <textarea
+            className="border-sl h-42 w-full resize-none rounded-md border-[1px] px-5 py-[18px] focus:outline-none"
+            {...register('content')}
+          />
+        </NoticeFormItem>
+      </div>
+      <div className="shadow-voteCreateDock px-normal fixed bottom-0 flex w-full gap-x-[9px] bg-white pt-4 pb-15">
+        <Button
+          intent={isFormValid ? 'gradient' : 'disabled'}
+          disabled={!isFormValid}
+          className="flex-1 text-lg"
+          type="submit"
+        >
+          작성 완료
+        </Button>
+      </div>
+    </form>
   );
 }

From 93b91b423785746e07875ef5770b16b2e932d410 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 23:57:31 +0900
Subject: [PATCH 17/37] refactor : change type imports

---
 src/features/notice/api/notice.ts     | 3 +--
 src/features/notice/ui/NoticeList.tsx | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/features/notice/api/notice.ts b/src/features/notice/api/notice.ts
index 43089a9..5659902 100644
--- a/src/features/notice/api/notice.ts
+++ b/src/features/notice/api/notice.ts
@@ -1,8 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { REQUEST, userGet } from '@/shared/api';
-import type { Campus } from '@/shared/types';
-import type { NoticeList } from '../types';
+import type { Campus, NoticeList } from '@/shared/types';
 
 const fetchNoticeByCampus = async (campus: Campus) => {
   const response = await userGet<NoticeList[]>({
diff --git a/src/features/notice/ui/NoticeList.tsx b/src/features/notice/ui/NoticeList.tsx
index 0f53cfc..75ecfd4 100644
--- a/src/features/notice/ui/NoticeList.tsx
+++ b/src/features/notice/ui/NoticeList.tsx
@@ -1,8 +1,7 @@
-import type { Campus } from '@/shared/types';
+import type { Campus, NoticeList } from '@/shared/types';
 import { Alert, CharacterFlat } from '@/assets/icon';
 
 import { useFetchNoticeByCampus } from '@/features/notice/api';
-import type { NoticeList } from '@/features/notice/types';
 
 import NoticeItem from './NoticeItem';
 

From 908c5433039eed6cd44d28a3f52b225c1577f23c Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 23:58:08 +0900
Subject: [PATCH 18/37] feat : add request and change past request

---
 src/shared/api/requests.ts       | 8 ++++++--
 src/widgets/vote/api/election.ts | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/shared/api/requests.ts b/src/shared/api/requests.ts
index ed51f73..b9b20dd 100644
--- a/src/shared/api/requests.ts
+++ b/src/shared/api/requests.ts
@@ -3,11 +3,15 @@ export const REQUEST = {
   LOGIN: '/auth/kakao',
   JOIN: '/auth/kakao/signup',
   REFRESH: '/auth/refresh',
+  ELECTION: '/api/elections/',
   ELECTION_ALL: '/api/elections/all',
   ELECTION_STATUS: '/api/elections/status',
-  NOTICE_CAMPUS: '/api/notices/notices/campus/',
   NOTICE: '/api/notices/',
-  CANDIDATE: '/api/candidates/all/',
+  NOTICE_CAMPUS: '/api/notices/notices/campus/',
+  CANDIDATE: '/api/candidates/',
+  CANDIDATE_ALL: '/api/candidates/all/',
+  NOMINEE_POST: '/api/nominees/{candidateId}',
   NOMINEE: '/api/nominees/{candidateId}/all',
   PLEDGE: '/api/pledges/{candidateId}/all',
+  PLEDGE_POST: '/api/pledges/{candidateId}',
 };
diff --git a/src/widgets/vote/api/election.ts b/src/widgets/vote/api/election.ts
index 20f6af0..699d846 100644
--- a/src/widgets/vote/api/election.ts
+++ b/src/widgets/vote/api/election.ts
@@ -15,7 +15,7 @@ interface ElectionDetailResponse {
 
 const fetchElectionDetail = async (id: number) => {
   const response = await userGet<ElectionDetailResponse>({
-    request: REQUEST.CANDIDATE + `${id}`,
+    request: REQUEST.CANDIDATE_ALL + `${id}`,
   });
   return response.data;
 };

From e82b0d83175f698799f4d77b02983fd116c4a5d2 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 23:58:24 +0900
Subject: [PATCH 19/37] feat : implement request logics to create vote

---
 src/features/vote-create/api/create.ts | 64 ++++++++++++++++++++++++++
 src/features/vote-create/api/index.ts  |  1 +
 2 files changed, 65 insertions(+)
 create mode 100644 src/features/vote-create/api/create.ts
 create mode 100644 src/features/vote-create/api/index.ts

diff --git a/src/features/vote-create/api/create.ts b/src/features/vote-create/api/create.ts
new file mode 100644
index 0000000..c4c9b6e
--- /dev/null
+++ b/src/features/vote-create/api/create.ts
@@ -0,0 +1,64 @@
+import { useMutation } from '@tanstack/react-query';
+import { REQUEST, userPost } from '@/shared/api';
+import type {
+  CandidatePost,
+  ElectionPost,
+  NomineePost,
+  PledgePost,
+} from '@/shared/types';
+
+const submitElection = async (data: ElectionPost) => {
+  const response = await userPost({
+    request: REQUEST.ELECTION,
+    data: data,
+  });
+  return response;
+};
+
+const submitCandidate = async (data: CandidatePost) => {
+  const response = await userPost({
+    request: REQUEST.CANDIDATE,
+    data: data,
+  });
+  return response;
+};
+
+const submitNominee = async (data: NomineePost) => {
+  const response = await userPost({
+    request: REQUEST.NOMINEE_POST,
+    data: data,
+  });
+  return response;
+};
+
+const submitPledge = async (data: PledgePost) => {
+  const response = await userPost({
+    request: REQUEST.PLEDGE_POST,
+    data: data,
+  });
+  return response;
+};
+
+export const useSubmitElection = () => {
+  return useMutation({
+    mutationFn: (data: ElectionPost) => submitElection(data),
+  });
+};
+
+export const useSubmitCandidate = () => {
+  return useMutation({
+    mutationFn: (data: CandidatePost) => submitCandidate(data),
+  });
+};
+
+export const useSubmitNominee = () => {
+  return useMutation({
+    mutationFn: (data: NomineePost) => submitNominee(data),
+  });
+};
+
+export const useSubmitPledge = () => {
+  return useMutation({
+    mutationFn: (data: PledgePost) => submitPledge(data),
+  });
+};
diff --git a/src/features/vote-create/api/index.ts b/src/features/vote-create/api/index.ts
new file mode 100644
index 0000000..1e03cce
--- /dev/null
+++ b/src/features/vote-create/api/index.ts
@@ -0,0 +1 @@
+export * from './create';

From 6ece9a61d4074024e7ec8baaf86d3424bb8d9178 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 23:59:24 +0900
Subject: [PATCH 20/37] feat : implement vote title form with real data

---
 src/features/vote-create/ui/VoteTitleForm.tsx | 60 ++++++++++++++++---
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/src/features/vote-create/ui/VoteTitleForm.tsx b/src/features/vote-create/ui/VoteTitleForm.tsx
index 7ca545b..f4a9e84 100644
--- a/src/features/vote-create/ui/VoteTitleForm.tsx
+++ b/src/features/vote-create/ui/VoteTitleForm.tsx
@@ -1,19 +1,63 @@
 import { VoteButton, VoteInput } from '@/features/vote-create/ui';
+import type {
+  UseFormRegister,
+  UseFormWatch,
+  UseFormSetValue,
+} from 'react-hook-form';
+import type { ElectionAllData } from '../types';
+import { BOTTOM_SHEET } from '@/shared/constants';
+import { useBottomSheet } from '@/shared/hook';
+import { useVoteCreateContext } from '@/features/vote-create/model';
+import { useEffect } from 'react';
+
+interface VoteTitleFormProps {
+  watch: UseFormWatch<ElectionAllData>;
+  register: UseFormRegister<ElectionAllData>;
+  setValue: UseFormSetValue<ElectionAllData>;
+}
+
+export default function VoteTitleForm({
+  register,
+  watch,
+  setValue,
+}: VoteTitleFormProps) {
+  const { openBottomSheet } = useBottomSheet();
+  const { voteType } = useVoteCreateContext();
+  const isVoteTypeDone = voteType !== '';
+
+  useEffect(() => {
+    if (voteType !== '') {
+      setValue('election.title', voteType);
+    }
+  }, [voteType, setValue]);
 
-export default function VoteTitleForm() {
   return (
-    <>
+    <div className='"p-normal scrollbar-hide pb-38" h-full overflow-scroll pt-0'>
       <p className="mt-11 text-lg font-semibold">선거 정보 등록하기</p>
       <div className="mt-[18px] flex w-full flex-col gap-[14px] font-semibold">
-        <VoteInput placeholder="투표 제목을 입력하세요" />
-        <VoteButton label="투표 시작일을 선택하세요" arrowDown />
-        <VoteButton label="투표 종료일을 선택하세요" arrowDown />
+        <VoteButton
+          label={isVoteTypeDone ? voteType : '투표 유형을 선택해 주세요'}
+          type="button"
+          onClick={() => {
+            openBottomSheet(BOTTOM_SHEET.VOTE_TYPE);
+          }}
+          done={isVoteTypeDone}
+        />
+        <VoteButton label="투표 기간을 선택하세요" arrowDown type="button" />
       </div>
       <p className="mt-6 text-lg font-semibold">선거운동본부 등록하기</p>
       <div className="mt-[18px] flex w-full flex-col gap-[14px]">
-        <VoteInput placeholder="후보팀명을 입력하세요" />
-        <VoteInput placeholder="후보팀명을 입력하세요" />
+        <VoteInput
+          placeholder="후보팀명을 입력하세요"
+          {...register('candidate1.info.name')}
+          value={watch('candidate1.info.name')}
+        />
+        <VoteInput
+          placeholder="후보팀명을 입력하세요"
+          {...register('candidate2.info.name')}
+          value={watch('candidate2.info.name')}
+        />
       </div>
-    </>
+    </div>
   );
 }

From 1ff9f8fa01a1d17a5f6d308451e9f52cc0fe8745 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Thu, 26 Jun 2025 23:59:53 +0900
Subject: [PATCH 21/37] feat : implement `VoteTypeBottomSheet`

---
 src/shared/constants/bottomSheet.ts           |  1 +
 .../vote-create/ui/VoteTypeBottomSheet.tsx    | 56 +++++++++++++++++++
 src/widgets/vote-create/ui/index.ts           |  1 +
 3 files changed, 58 insertions(+)
 create mode 100644 src/widgets/vote-create/ui/VoteTypeBottomSheet.tsx

diff --git a/src/shared/constants/bottomSheet.ts b/src/shared/constants/bottomSheet.ts
index 2b3f46b..e32a57c 100644
--- a/src/shared/constants/bottomSheet.ts
+++ b/src/shared/constants/bottomSheet.ts
@@ -1,3 +1,4 @@
 export const BOTTOM_SHEET = {
   VOTE_RESULT: 'VoteResultBottomSheet',
+  VOTE_TYPE: 'VoteTypeBottomSheet',
 } as const;
diff --git a/src/widgets/vote-create/ui/VoteTypeBottomSheet.tsx b/src/widgets/vote-create/ui/VoteTypeBottomSheet.tsx
new file mode 100644
index 0000000..fec95ed
--- /dev/null
+++ b/src/widgets/vote-create/ui/VoteTypeBottomSheet.tsx
@@ -0,0 +1,56 @@
+import { useBottomSheet } from '@/shared/hook';
+import { BottomSheet } from '@/shared/ui';
+import { BOTTOM_SHEET } from '@/shared/constants';
+import { cn } from '@/shared/utils';
+import { useVoteCreateContext } from '@/features/vote-create/model';
+
+export default function DatePickerBottomSheet() {
+  const { voteType, setVoteType } = useVoteCreateContext();
+  const { closeBottomSheet, bottomSheetState } = useBottomSheet();
+  const { isOpen } = bottomSheetState(BOTTOM_SHEET.VOTE_TYPE);
+  const year = [
+    '총학생회 선거',
+    '인문대학 선거',
+    '예술체육대학 선거',
+    '사회과학대학 선거',
+    '창의공과대학 선거',
+    '소프트웨어경영대학 선거',
+    '융합과학대학 선거',
+    '관광문화대학 선거',
+  ];
+
+  const handleSelectYear = (selectedType: string) => {
+    setVoteType(selectedType);
+    closeBottomSheet(BOTTOM_SHEET.VOTE_TYPE);
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <BottomSheet sheetKey={BOTTOM_SHEET.VOTE_TYPE}>
+          <div className="flex w-full justify-center">
+            <div className="h-[6px] w-[46px] rounded-full bg-[#ECECEC]" />
+          </div>
+          <p className="my-[23px] text-center text-xl font-semibold">
+            선거 유형을 선택해 주세요
+          </p>
+          <div className="scrollbar-hide flex h-[220px] w-full flex-col items-center gap-y-[23px] overflow-scroll">
+            {year.map(y => (
+              <button
+                key={y}
+                name={`${y}`}
+                onClick={() => handleSelectYear(y)}
+                className={cn(
+                  voteType === y && 'text-ml',
+                  'active:text-ml text-s focus:outline-none',
+                )}
+              >
+                {y}
+              </button>
+            ))}
+          </div>
+        </BottomSheet>
+      )}
+    </>
+  );
+}
diff --git a/src/widgets/vote-create/ui/index.ts b/src/widgets/vote-create/ui/index.ts
index 97f5cba..335fa20 100644
--- a/src/widgets/vote-create/ui/index.ts
+++ b/src/widgets/vote-create/ui/index.ts
@@ -1 +1,2 @@
 export { default as VoteCreateContainer } from './VoteCreateContainer';
+export { default as VoteTypeBottomSheet } from './VoteTypeBottomSheet';

From 3c239956be73afb8ae76a9664b32398ea21abc00 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 00:06:07 +0900
Subject: [PATCH 22/37] feat : define type for all data of election

---
 src/features/vote-create/types/data.ts  | 31 +++++++++++++++++++++++++
 src/features/vote-create/types/index.ts |  1 +
 2 files changed, 32 insertions(+)
 create mode 100644 src/features/vote-create/types/data.ts
 create mode 100644 src/features/vote-create/types/index.ts

diff --git a/src/features/vote-create/types/data.ts b/src/features/vote-create/types/data.ts
new file mode 100644
index 0000000..b5194a8
--- /dev/null
+++ b/src/features/vote-create/types/data.ts
@@ -0,0 +1,31 @@
+import type { CandidatePost, ElectionPost, NomineePost } from '@/shared/types';
+
+export type ElectionAllData = {
+  election: ElectionPost;
+  candidate1: {
+    info: CandidatePost;
+    nominee1: Omit<NomineePost, 'description'> & {
+      description1: string;
+      description2?: string;
+      description3?: string;
+    };
+    nominee2: Omit<NomineePost, 'description'> & {
+      description1: string;
+      description2?: string;
+      description3?: string;
+    };
+  };
+  candidate2: {
+    info: CandidatePost;
+    nominee1: Omit<NomineePost, 'description'> & {
+      description1: string;
+      description2?: string;
+      description3?: string;
+    };
+    nominee2: Omit<NomineePost, 'description'> & {
+      description1: string;
+      description2?: string;
+      description3?: string;
+    };
+  };
+};
diff --git a/src/features/vote-create/types/index.ts b/src/features/vote-create/types/index.ts
new file mode 100644
index 0000000..3707679
--- /dev/null
+++ b/src/features/vote-create/types/index.ts
@@ -0,0 +1 @@
+export * from './data';

From 76962223496c6070c222bf63ca3dc61eb14c6a15 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 04:33:51 +0900
Subject: [PATCH 23/37] chore : change linter setting

---
 tsconfig.app.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tsconfig.app.json b/tsconfig.app.json
index 4cb2e5d..bc6066b 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -23,7 +23,6 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },

From 2306551f90b46be082116e1c3809c63fcadc2712 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 12:38:34 +0900
Subject: [PATCH 24/37] chore : install `dotlottie-react` to implement
 animation

---
 package.json   |  1 +
 pnpm-lock.yaml | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/package.json b/package.json
index 07b5b07..72443ad 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@lottiefiles/dotlottie-react": "^0.14.2",
     "@stackflow/core": "^1.2.0",
     "@stackflow/plugin-basic-ui": "^1.14.1",
     "@stackflow/plugin-renderer-basic": "^1.1.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dff9fb0..a2a65f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@lottiefiles/dotlottie-react':
+        specifier: ^0.14.2
+        version: 0.14.2(react@19.1.0)
       '@stackflow/core':
         specifier: ^1.2.0
         version: 1.2.0
@@ -361,6 +364,14 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@lottiefiles/dotlottie-react@0.14.2':
+    resolution: {integrity: sha512-RR4r0HrKQbOAw6iS6C3mRARS2iu+yI+G1vICoUsRMHzlUUk1/26l3WyAjhcG+KoaGoKmORx8FgHjTNr4Sr/2Ug==}
+    peerDependencies:
+      react: ^17 || ^18 || ^19
+
+  '@lottiefiles/dotlottie-web@0.47.0':
+    resolution: {integrity: sha512-YN6wSB4iYZBYEAFKEs/taufrPH3rfNlUA632Ib61WoR58TALAJ1ZX8yDIGUBT28byMJhZR4+xdpRX4v7X8OeBQ==}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1970,6 +1981,13 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@lottiefiles/dotlottie-react@0.14.2(react@19.1.0)':
+    dependencies:
+      '@lottiefiles/dotlottie-web': 0.47.0
+      react: 19.1.0
+
+  '@lottiefiles/dotlottie-web@0.47.0': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5

From c5c0b3934e6fbb79a821e9720ea47dd7980aced7 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:20:40 +0900
Subject: [PATCH 25/37] feat : define `BaseResponse` type

---
 src/shared/types/response.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/shared/types/response.ts

diff --git a/src/shared/types/response.ts b/src/shared/types/response.ts
new file mode 100644
index 0000000..cdc52a6
--- /dev/null
+++ b/src/shared/types/response.ts
@@ -0,0 +1,9 @@
+export type BaseResponse = {
+  status: {
+    code: number;
+    message: string;
+  };
+  metadata: {
+    resultCount: number;
+  };
+};

From 1670789ba13a52a077d8803631b5472e53729483 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:21:27 +0900
Subject: [PATCH 26/37] feat : implement `DatePickerBottomSheet`

---
 src/shared/constants/bottomSheet.ts     |   1 +
 src/shared/ui/BottomSheet.tsx           |   2 +-
 src/shared/ui/DatePickerBottomSheet.tsx | 254 ++++++++++++++++++++++++
 src/shared/ui/index.ts                  |   1 +
 4 files changed, 257 insertions(+), 1 deletion(-)
 create mode 100644 src/shared/ui/DatePickerBottomSheet.tsx

diff --git a/src/shared/constants/bottomSheet.ts b/src/shared/constants/bottomSheet.ts
index e32a57c..5257673 100644
--- a/src/shared/constants/bottomSheet.ts
+++ b/src/shared/constants/bottomSheet.ts
@@ -1,4 +1,5 @@
 export const BOTTOM_SHEET = {
   VOTE_RESULT: 'VoteResultBottomSheet',
   VOTE_TYPE: 'VoteTypeBottomSheet',
+  DATE_PICKER: 'DatePickerBottomSheet',
 } as const;
diff --git a/src/shared/ui/BottomSheet.tsx b/src/shared/ui/BottomSheet.tsx
index ec471e9..9463713 100644
--- a/src/shared/ui/BottomSheet.tsx
+++ b/src/shared/ui/BottomSheet.tsx
@@ -22,7 +22,7 @@ export default function BottomSheet({ children, sheetKey }: BottomSheetProps) {
       />
       <div
         className={cn(
-          'fixed bottom-0 left-0 z-400 flex h-fit w-full flex-col rounded-t-[32px] bg-white px-[20px] pt-8 pb-18 shadow-lg transition-transform duration-300',
+          'fixed bottom-0 left-0 z-400 flex h-fit w-full flex-col rounded-t-[32px] bg-white px-[40px] pt-8 pb-18 shadow-lg transition-transform duration-300',
           isVisible ? 'translate-y-0' : 'translate-y-full',
           isVisible ? 'box-shadow-bottom-sheet block' : '',
         )}
diff --git a/src/shared/ui/DatePickerBottomSheet.tsx b/src/shared/ui/DatePickerBottomSheet.tsx
new file mode 100644
index 0000000..5dbdafd
--- /dev/null
+++ b/src/shared/ui/DatePickerBottomSheet.tsx
@@ -0,0 +1,254 @@
+import { IoChevronBackSharp, IoChevronForwardSharp } from 'react-icons/io5';
+
+import { cn } from '@/shared/utils';
+
+import { BottomSheet, Button } from '@/shared/ui';
+import { useBottomSheet } from '@/shared/hook';
+import { BOTTOM_SHEET } from '@/shared/constants';
+import { useVoteCreateContext } from '@/features/vote-create/model';
+
+export default function DatePickerBottomSheet() {
+  const { closeBottomSheet, bottomSheetState } = useBottomSheet();
+  const { isOpen } = bottomSheetState(BOTTOM_SHEET.DATE_PICKER);
+
+  const handleClick = async () => {
+    closeBottomSheet(BOTTOM_SHEET.DATE_PICKER);
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <BottomSheet sheetKey={BOTTOM_SHEET.DATE_PICKER}>
+          <div className="flex w-full justify-center">
+            <div className="h-[6px] w-[46px] rounded-full bg-[#ECECEC]" />
+          </div>
+          <p className="my-[23px] text-center text-xl font-semibold">
+            선거 기간을 선택해 주세요
+          </p>
+          <Calendar />
+          <Button onClick={handleClick} intent={'gradient'}>
+            완료
+          </Button>
+        </BottomSheet>
+      )}
+    </>
+  );
+}
+
+const WEEK = ['일', '월', '화', '수', '목', '금', '토'];
+
+const Calendar = () => {
+  const {
+    date: contextDate,
+    setDate,
+    startDate,
+    endDate,
+    setStartDate,
+    setEndDate,
+  } = useVoteCreateContext();
+  const date = contextDate ?? new Date();
+  const currentYear = date.getFullYear();
+  const currentMonth = date.getMonth();
+  const today = new Date();
+
+  const dayCnt = new Date(currentYear, currentMonth + 1, 0).getDate();
+  const firstDay = new Date(currentYear, currentMonth, 1);
+  const firstWeek = Array.from({ length: firstDay.getDay() }, () => '');
+  const wholeDay = Array.from({ length: dayCnt }, (_, i) => i + 1);
+  const lastWeek = Array.from(
+    {
+      length: (7 - ((firstWeek.length + wholeDay.length) % 7)) % 7,
+    },
+    () => '',
+  );
+  const formattedDay = [...firstWeek, ...wholeDay, ...lastWeek] as (
+    | number
+    | ''
+  )[];
+
+  // 주 단위로 분할
+  const weeks: (number | '')[][] = [];
+  for (let i = 0; i < formattedDay.length; i += 7) {
+    weeks.push(formattedDay.slice(i, i + 7));
+  }
+
+  const handleDateClick = (clickedDate: Date) => {
+    const todayStart = new Date(today);
+    todayStart.setHours(0, 0, 0, 0);
+    if (clickedDate < todayStart) return;
+    const clickedDateStart = new Date(clickedDate);
+    clickedDateStart.setHours(0, 0, 0, 0);
+    const isoDate = clickedDateStart.toISOString();
+    if (!startDate || (startDate && endDate)) {
+      setStartDate(isoDate);
+      setEndDate(null);
+    } else {
+      const startDateObj = new Date(startDate);
+      startDateObj.setHours(0, 0, 0, 0);
+      if (clickedDateStart < startDateObj) {
+        setStartDate(isoDate);
+        setEndDate(startDate);
+      } else {
+        setEndDate(isoDate);
+      }
+    }
+  };
+
+  const isDateInRange = (renderDate: Date) => {
+    if (!startDate || !endDate) return false;
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    const date = new Date(renderDate);
+    start.setHours(0, 0, 0, 0);
+    end.setHours(0, 0, 0, 0);
+    date.setHours(0, 0, 0, 0);
+    const currentMonthStart = new Date(currentYear, currentMonth, 1);
+    const currentMonthEnd = new Date(currentYear, currentMonth + 1, 0);
+    return (
+      date >= start &&
+      date <= end &&
+      date >= currentMonthStart &&
+      date <= currentMonthEnd
+    );
+  };
+
+  const isStartDate = (renderDate: Date) => {
+    if (!startDate) return false;
+    const start = new Date(startDate);
+    const date = new Date(renderDate);
+    start.setHours(0, 0, 0, 0);
+    date.setHours(0, 0, 0, 0);
+    const currentMonthStart = new Date(currentYear, currentMonth, 1);
+    const currentMonthEnd = new Date(currentYear, currentMonth + 1, 0);
+    return (
+      date.getTime() === start.getTime() &&
+      date >= currentMonthStart &&
+      date <= currentMonthEnd
+    );
+  };
+
+  const isEndDate = (renderDate: Date) => {
+    if (!endDate) return false;
+    const end = new Date(endDate);
+    const date = new Date(renderDate);
+    end.setHours(0, 0, 0, 0);
+    date.setHours(0, 0, 0, 0);
+    const currentMonthStart = new Date(currentYear, currentMonth, 1);
+    const currentMonthEnd = new Date(currentYear, currentMonth + 1, 0);
+    return (
+      date.getTime() === end.getTime() &&
+      date >= currentMonthStart &&
+      date <= currentMonthEnd
+    );
+  };
+
+  return (
+    <div className="my-6">
+      <div className="flex w-full items-center justify-center gap-4">
+        <button
+          disabled={date.getMonth() <= today.getMonth()}
+          className="cursor-pointer focus:outline-none disabled:text-gray-400"
+          onClick={() => {
+            const newDate = new Date(date);
+            newDate.setMonth(currentMonth - 1);
+            const todayStart = new Date(today);
+            todayStart.setHours(0, 0, 0, 0);
+            if (newDate < todayStart) setDate(today);
+            else setDate(newDate);
+          }}
+        >
+          <IoChevronBackSharp />
+        </button>
+        {currentYear}년 {currentMonth + 1}월
+        <button
+          className="cursor-pointer focus:outline-none"
+          onClick={() => {
+            const newDate = new Date(date);
+            newDate.setMonth(currentMonth + 1);
+            setDate(newDate);
+          }}
+        >
+          <IoChevronForwardSharp />
+        </button>
+      </div>
+      <div className="grid grid-cols-7">
+        {WEEK.map((w, i) => (
+          <div
+            key={w}
+            className={cn(
+              'flex h-11 w-full items-center justify-center text-sm font-medium',
+              i === 0 && 'text-important',
+            )}
+          >
+            {w}
+          </div>
+        ))}
+      </div>
+      <div className="flex flex-col gap-0 text-sm">
+        {weeks.map((week, weekIdx) => (
+          <div key={weekIdx} className={cn('grid grid-cols-7')}>
+            {week.map((d, dayIdx) => {
+              if (!d || typeof d !== 'number') {
+                return (
+                  <div key={dayIdx} className="cursor-pointer font-light">
+                    <button
+                      disabled
+                      className="text-sl grid h-11 w-full place-items-center rounded-[50%] text-sm"
+                    >
+                      {d}
+                    </button>
+                  </div>
+                );
+              }
+              const renderDate = new Date(currentYear, currentMonth, d);
+              const todayStart = new Date(today);
+              todayStart.setHours(0, 0, 0, 0);
+              const inRange = isDateInRange(renderDate);
+              if (renderDate < todayStart) {
+                return (
+                  <div key={dayIdx} className="cursor-pointer font-light">
+                    <button
+                      disabled
+                      className="text-sl grid h-11 w-full place-items-center rounded-[50%]"
+                    >
+                      {d}
+                    </button>
+                  </div>
+                );
+              } else {
+                return (
+                  <div
+                    key={dayIdx}
+                    className={cn(
+                      'cursor-pointer font-light',
+                      inRange &&
+                        !isStartDate(renderDate) &&
+                        !isEndDate(renderDate) &&
+                        'bg-[#6DA2FE1A]',
+                    )}
+                  >
+                    <button
+                      className={cn(
+                        'grid h-11 w-full place-items-center rounded-[50%]',
+                        isStartDate(renderDate) && 'text-white',
+                        isEndDate(renderDate) && 'text-white',
+                      )}
+                      style={
+                        isStartDate(renderDate) || isEndDate(renderDate)
+                          ? { background: '#6DA2FE' }
+                          : undefined
+                      }
+                      onClick={() => handleDateClick(renderDate)}
+                    >
+                      {d}
+                    </button>
+                  </div>
+                );
+              }
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 5c224df..3ec4345 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -5,3 +5,4 @@ export { default as Card } from './Card';
 export { default as DateBadge } from './DateBadge';
 export { default as Input } from './Input';
 export { default as Loader } from './Loader';
+export { default as DatePickerBottomSheet } from './DatePickerBottomSheet';

From 00f062e2f82c993bce4b2421edcc210acddc8c6f Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:22:37 +0900
Subject: [PATCH 27/37] feat : implement complete style to vote input and
 button components

---
 src/features/vote-create/ui/VoteButton.tsx | 39 ++++++++++++++---
 src/features/vote-create/ui/VoteInput.tsx  | 51 ++++++++++++++++++----
 2 files changed, 76 insertions(+), 14 deletions(-)

diff --git a/src/features/vote-create/ui/VoteButton.tsx b/src/features/vote-create/ui/VoteButton.tsx
index 9d814ef..acc28aa 100644
--- a/src/features/vote-create/ui/VoteButton.tsx
+++ b/src/features/vote-create/ui/VoteButton.tsx
@@ -1,29 +1,58 @@
+import { cn } from '@/shared/utils';
 import type { ButtonHTMLAttributes } from 'react';
-import { IoChevronDownSharp, IoChevronForwardSharp } from 'react-icons/io5';
+import { FaCheck } from 'react-icons/fa';
+import {
+  IoAdd,
+  IoChevronDownSharp,
+  IoChevronForwardSharp,
+} from 'react-icons/io5';
 
 interface VoteButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   label: string;
   arrowDown?: boolean;
+  done?: boolean;
+  className?: string;
+  plus?: boolean;
 }
 
 export default function VoteButton({
+  plus = false,
+  className,
   arrowDown = false,
   label,
   onClick,
+  done = false,
   ...rest
 }: VoteButtonProps) {
   return (
     <button
       name="mainCandidate"
-      className="border-sl flex h-17 w-full cursor-pointer items-center justify-between rounded-md border-[1px] px-5 font-normal text-[#999] focus:outline-none"
+      className={cn(
+        className,
+        done
+          ? 'border-ml text-ml shadow-voteCreateItem'
+          : 'border-sl text-[#999]',
+        'relative flex h-17 w-full cursor-pointer items-center justify-between rounded-md border-[1px] px-5 font-normal focus:outline-none',
+      )}
       onClick={onClick}
       {...rest}
     >
       {label}
-      {arrowDown ? (
-        <IoChevronDownSharp size={20} className="text-sl" />
+
+      {done ? (
+        <div className="bg-ml absolute top-5.5 right-5 mb-1.5 grid size-6 place-items-center rounded-full transition duration-150">
+          <FaCheck className="text-white" size={14} />
+        </div>
       ) : (
-        <IoChevronForwardSharp size={20} className="text-sl" />
+        <>
+          {plus ? (
+            <IoAdd size={20} className="text-sl" />
+          ) : arrowDown ? (
+            <IoChevronDownSharp size={20} className="text-sl" />
+          ) : (
+            <IoChevronForwardSharp size={20} className="text-sl" />
+          )}
+        </>
       )}
     </button>
   );
diff --git a/src/features/vote-create/ui/VoteInput.tsx b/src/features/vote-create/ui/VoteInput.tsx
index 5ca9035..aa35119 100644
--- a/src/features/vote-create/ui/VoteInput.tsx
+++ b/src/features/vote-create/ui/VoteInput.tsx
@@ -1,18 +1,51 @@
-import type { InputHTMLAttributes } from 'react';
+import { cn } from '@/shared/utils';
+import { useState, type InputHTMLAttributes } from 'react';
+import { FaCheck } from 'react-icons/fa';
 import { IoClose } from 'react-icons/io5';
 
-type VoteInputProps = InputHTMLAttributes<HTMLInputElement>;
+type VoteInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> & {
+  value?: string;
+};
+
+export default function VoteInput({ value, ...rest }: VoteInputProps) {
+  const [enterDone, setEnterDone] = useState<boolean>(false);
+
+  const handleComplete = () => {
+    if (value && value.trim().length > 0) {
+      setEnterDone(true);
+    }
+  };
 
-export default function VoteInput({ placeholder }: VoteInputProps) {
   return (
-    <div className="relative w-full">
+    <div
+      className={cn(
+        enterDone ? 'shadow-voteCreateItem border-ml text-m' : 'border-sl',
+        'relative w-full rounded-md border-[1px]',
+      )}
+    >
       <input
-        className="border-sl flex h-17 w-full items-center justify-between rounded-md border-[1px] px-5 font-normal placeholder:text-[#999] focus:outline-none"
-        placeholder={placeholder}
+        className="flex h-17 w-full items-center justify-between px-5 font-normal placeholder:text-[#999] focus:outline-none"
+        {...rest}
+        onBlur={handleComplete}
+        onKeyDown={e => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            handleComplete();
+          }
+        }}
       />
-      <button className="absolute top-1/2 right-5 size-fit -translate-y-1/2 transform cursor-pointer focus:outline-none">
-        <IoClose className="text-sl" size={20} />
-      </button>
+      {enterDone ? (
+        <div className="bg-ml absolute top-5.5 right-5 mb-1.5 grid size-6 place-items-center rounded-full transition duration-150">
+          <FaCheck className="text-white" size={14} />
+        </div>
+      ) : (
+        <button
+          className="absolute top-1/2 right-5 size-fit -translate-y-1/2 transform cursor-pointer focus:outline-none"
+          type="button"
+        >
+          <IoClose className="text-sl" size={20} />
+        </button>
+      )}
     </div>
   );
 }

From 76200f58732bddeb6f80eb8ccda658df4e02dbe2 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:23:13 +0900
Subject: [PATCH 28/37] feat : implement `VoteCreateLoadingScreen`

---
 src/app/stackflow/Stack.tsx                   |   2 +
 .../ui/VoteCreateLoadingScreen.tsx            | 114 ++++++++++++++++++
 src/screen/vote-create-loading/ui/index.ts    |   1 +
 3 files changed, 117 insertions(+)
 create mode 100644 src/screen/vote-create-loading/ui/VoteCreateLoadingScreen.tsx
 create mode 100644 src/screen/vote-create-loading/ui/index.ts

diff --git a/src/app/stackflow/Stack.tsx b/src/app/stackflow/Stack.tsx
index 62e29c3..b2dec08 100644
--- a/src/app/stackflow/Stack.tsx
+++ b/src/app/stackflow/Stack.tsx
@@ -14,6 +14,7 @@ import { NoticeCreateScreen } from '@/screen/notice-create/ui';
 import { NoticeScreen } from '@/screen/notice/ui';
 import { VoteCompleteScreen } from '@/screen/vote-complete/ui';
 import { VoteCreateCompleteScreen } from '@/screen/vote-create-complete/ui';
+import { VoteCreateLoadingScreen } from '@/screen/vote-create-loading/ui';
 import { VoteCreateScreen } from '@/screen/vote-create/ui';
 import { VoteEditScreen } from '@/screen/vote-edit/ui';
 import { VotePromiseScreen } from '@/screen/vote-promise/ui';
@@ -37,6 +38,7 @@ export const { Stack, useFlow } = stackflow({
     VoteEditScreen,
     VoteScreen,
     VoteCreateScreen,
+    VoteCreateLoadingScreen,
     VoteCreateCompleteScreen,
     VoteCompleteScreen,
     VotePromiseScreen,
diff --git a/src/screen/vote-create-loading/ui/VoteCreateLoadingScreen.tsx b/src/screen/vote-create-loading/ui/VoteCreateLoadingScreen.tsx
new file mode 100644
index 0000000..0b466c3
--- /dev/null
+++ b/src/screen/vote-create-loading/ui/VoteCreateLoadingScreen.tsx
@@ -0,0 +1,114 @@
+import { AppScreen } from '@stackflow/plugin-basic-ui';
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+
+import { Loader } from '@/shared/ui';
+import type { ActivityComponentType } from '@stackflow/react';
+import type { ElectionAllData } from '@/features/vote-create/types';
+import { useSubmitElection } from '@/features/vote-create/api';
+import type { NomineePost } from '@/shared/types';
+import { VoteBg } from '@/assets/image';
+
+const VoteCreateLoadingScreen: ActivityComponentType<ElectionAllData> = ({
+  params,
+}: {
+  params: ElectionAllData;
+}) => {
+  const getNomineeData = (
+    nominee: Omit<NomineePost, 'description'> & {
+      description1: string;
+      description2?: string;
+      description3?: string;
+    },
+  ): NomineePost => {
+    const description = `${nominee.description1}\n${nominee.description2 || ''}\n${nominee.description3 || ''}`;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { description1, description2, description3, ...rest } = nominee;
+    return { description: description, ...rest };
+  };
+
+  const candidates = [params.candidate1.info, params.candidate2.info];
+  const nominees = [
+    [
+      getNomineeData(params.candidate1.nominee1),
+      getNomineeData(params.candidate1.nominee2),
+    ],
+    [
+      getNomineeData(params.candidate2.nominee1),
+      getNomineeData(params.candidate2.nominee2),
+    ],
+  ];
+  const pledges = [
+    params.candidate1.info.description.split('\n'),
+    params.candidate2.info.description.split('\n'),
+  ];
+
+  const { mutate: submitElection } = useSubmitElection(
+    candidates,
+    nominees,
+    pledges,
+  );
+
+  useEffect(() => {
+    submitElection({
+      ...params.election,
+      title: `${params.election.startAt.slice(0, 4)}년도 ${params.election.title}`,
+    });
+  }, [submitElection, params]);
+
+  const letters = ['생', '성', '중', '.', '.', '.'];
+
+  const [visibleIndex, setVisibleIndex] = useState<number | null>(null);
+
+  useEffect(() => {
+    let step = 0;
+
+    const interval = setInterval(() => {
+      if (step < letters.length) {
+        setVisibleIndex(step);
+      } else if (step === letters.length) {
+        setVisibleIndex(null);
+      } else {
+        setVisibleIndex(-1); // 모두 사라짐
+      }
+      step = (step + 1) % (letters.length + 2); // 순환
+    }, 800);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <AppScreen backgroundImage={`url(${VoteBg})`}>
+      <div className="grid h-screen w-full place-items-center">
+        <div className="flex flex-col items-center justify-center">
+          <Loader />
+          <p className="text-m -mt-7 text-center text-lg font-semibold">
+            투표
+            {letters.map((char, i) => (
+              <motion.span
+                key={char + i}
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity:
+                    visibleIndex === null
+                      ? 1
+                      : visibleIndex === -1
+                        ? 0
+                        : i <= visibleIndex
+                          ? 1
+                          : 0,
+                }}
+                transition={{ duration: 0.4 }}
+              >
+                {char}
+              </motion.span>
+            ))}
+          </p>
+        </div>
+      </div>
+    </AppScreen>
+  );
+};
+
+export default VoteCreateLoadingScreen;
diff --git a/src/screen/vote-create-loading/ui/index.ts b/src/screen/vote-create-loading/ui/index.ts
new file mode 100644
index 0000000..0dc14e8
--- /dev/null
+++ b/src/screen/vote-create-loading/ui/index.ts
@@ -0,0 +1 @@
+export { default as VoteCreateLoadingScreen } from './VoteCreateLoadingScreen';

From 9fe74a87fcb153d2d1aa867e82be820659ef552f Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:24:26 +0900
Subject: [PATCH 29/37] fix : fix endpoints

---
 src/shared/api/requests.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/api/requests.ts b/src/shared/api/requests.ts
index b9b20dd..ffd1ab2 100644
--- a/src/shared/api/requests.ts
+++ b/src/shared/api/requests.ts
@@ -10,8 +10,8 @@ export const REQUEST = {
   NOTICE_CAMPUS: '/api/notices/notices/campus/',
   CANDIDATE: '/api/candidates/',
   CANDIDATE_ALL: '/api/candidates/all/',
-  NOMINEE_POST: '/api/nominees/{candidateId}',
+  NOMINEE_POST: '/api/nominees/',
   NOMINEE: '/api/nominees/{candidateId}/all',
   PLEDGE: '/api/pledges/{candidateId}/all',
-  PLEDGE_POST: '/api/pledges/{candidateId}',
+  PLEDGE_POST: '/api/pledges/',
 };

From ee0452f8ac8c2bf429a7bd41542b75858b866e22 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:24:44 +0900
Subject: [PATCH 30/37] feat : separate form mode to custom hook

---
 src/features/vote-create/model/hooks/index.ts |   1 +
 .../model/hooks/useElectionFormMode.ts        | 126 ++++++++++++++++++
 2 files changed, 127 insertions(+)
 create mode 100644 src/features/vote-create/model/hooks/useElectionFormMode.ts

diff --git a/src/features/vote-create/model/hooks/index.ts b/src/features/vote-create/model/hooks/index.ts
index 51c41d5..67d5489 100644
--- a/src/features/vote-create/model/hooks/index.ts
+++ b/src/features/vote-create/model/hooks/index.ts
@@ -1 +1,2 @@
 export { default as useVoteCreateContext } from './useVoteCreateContext';
+export { default as useElectionFormMode } from './useElectionFormMode';
diff --git a/src/features/vote-create/model/hooks/useElectionFormMode.ts b/src/features/vote-create/model/hooks/useElectionFormMode.ts
new file mode 100644
index 0000000..ffa298b
--- /dev/null
+++ b/src/features/vote-create/model/hooks/useElectionFormMode.ts
@@ -0,0 +1,126 @@
+import React from 'react';
+import type { MouseEvent } from 'react';
+import type { ElectionAllData } from '@/features/vote-create/types';
+import type {
+  UseFormRegister,
+  UseFormWatch,
+  UseFormSetValue,
+} from 'react-hook-form';
+import { useVoteCreateContext } from '@/features/vote-create/model';
+import { useFlow } from '@/app/stackflow';
+import { VoteDetailForm, VoteTitleForm } from '@/features/vote-create/ui';
+import { PATH } from '@/shared/constants';
+
+interface useElectionFormModeProps {
+  register: UseFormRegister<ElectionAllData>;
+  watch: UseFormWatch<ElectionAllData>;
+  setValue: UseFormSetValue<ElectionAllData>;
+  candidateKey?: 'candidate1' | 'candidate2';
+}
+
+export default function useElectionFormMode({
+  register,
+  watch,
+  setValue,
+}: useElectionFormModeProps) {
+  const {
+    mode,
+    setMode,
+    isCandidateMode,
+    setIsCandidateMode,
+    candidateKey,
+    nomineeKey,
+  } = useVoteCreateContext();
+  const { pop, replace } = useFlow();
+
+  const onSubmitClick = (data: ElectionAllData) => {
+    replace(PATH.VOTE_CREATE_LOADING, { ...data });
+  };
+
+  const handleBackClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (isCandidateMode) {
+      setIsCandidateMode(false);
+      return;
+    }
+    if (mode === 0) pop();
+    else setMode(prev => prev - 1);
+  };
+
+  const handleNextClick = () => {
+    if (isCandidateMode) {
+      setIsCandidateMode(false);
+    } else if (mode < 2) {
+      setMode(prev => prev + 1);
+    } else return;
+  };
+
+  const isNomineeValid = (
+    candidateKey: 'candidate1' | 'candidate2',
+    nomineeKey: 'nominee1' | 'nominee2',
+  ) => {
+    return !!(
+      watch(`${candidateKey}.${nomineeKey}.name` as const) &&
+      watch(`${candidateKey}.${nomineeKey}.studentId` as const) &&
+      watch(`${candidateKey}.${nomineeKey}.college` as const) &&
+      watch(`${candidateKey}.${nomineeKey}.department` as const) &&
+      watch(`${candidateKey}.${nomineeKey}.description1` as const)
+    );
+  };
+
+  const isCandidateValid = (candidateKey: 'candidate1' | 'candidate2') => {
+    return (
+      isNomineeValid(candidateKey, 'nominee1') &&
+      isNomineeValid(candidateKey, 'nominee2') &&
+      watch(`${candidateKey}.info.description`)
+    );
+  };
+
+  const MODE = [
+    {
+      form: React.createElement(VoteTitleForm, { register, watch, setValue }),
+      isFormValid:
+        watch('election.title') &&
+        watch('election.startAt') &&
+        watch('election.endAt') &&
+        watch('candidate1.info.name') &&
+        watch('candidate2.info.name'),
+    },
+    {
+      form: React.createElement(VoteDetailForm, {
+        teamName: watch('candidate1.info.name'),
+        watch,
+        register,
+        setValue,
+      }),
+      isFormValid: isCandidateValid('candidate1'),
+    },
+    {
+      form: React.createElement(VoteDetailForm, {
+        teamName: watch('candidate2.info.name'),
+        watch,
+        register,
+        setValue,
+      }),
+      isFormValid: isCandidateValid('candidate2'),
+    },
+  ];
+
+  const isFormValid = isCandidateMode
+    ? isNomineeValid(candidateKey, nomineeKey)
+    : MODE[mode]!.isFormValid;
+  const buttonIntent = isFormValid
+    ? ('gradient' as const)
+    : ('disabled' as const);
+
+  return {
+    MODE: MODE[mode],
+    handleBackClick,
+    handleNextClick,
+    isFormValid,
+    buttonIntent,
+    isCandidateValid,
+    isNomineeValid,
+    onSubmitClick,
+  };
+}

From dc6e376fbbe77c666c1cb89ccb8f5c3615ce72f9 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:25:00 +0900
Subject: [PATCH 31/37] feat : define types about elections

---
 src/shared/types/election.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/shared/types/election.ts b/src/shared/types/election.ts
index 471f7d6..61e0489 100644
--- a/src/shared/types/election.ts
+++ b/src/shared/types/election.ts
@@ -12,7 +12,9 @@ export type Election = {
   collageMajorName: string;
 };
 
-export type ElectionPost = Omit<Election, 'ownerId' | 'isActive' | 'id'>;
+export type ElectionPost = Omit<Election, 'ownerId' | 'isActive' | 'id'> & {
+  active: boolean;
+};
 
 export type Candidate = {
   id: number;
@@ -21,6 +23,13 @@ export type Candidate = {
   voteCount: number;
 };
 
+export type CandidatePost = Omit<
+  Candidate,
+  'id' | 'voteCount' | 'electionId'
+> & {
+  description: string;
+};
+
 export type Nominee = {
   id: number;
   name: string;
@@ -32,8 +41,12 @@ export type Nominee = {
   main: boolean;
 };
 
+export type NomineePost = Omit<Nominee, 'id' | 'candidateId'>;
+
 export type Pledge = {
   id: number;
   description: string;
   candidateId: number;
 };
+
+export type PledgePost = Omit<Pledge, 'id' | 'candidateId'>;

From 060781d8b51d8c61714908f3115d99c5624eb419 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:26:09 +0900
Subject: [PATCH 32/37] feat : connect form data at `VoteForm`s

---
 .../vote-create/ui/VoteCandidateForm.tsx      | 65 ++++++++++---
 .../vote-create/ui/VoteDetailForm.tsx         | 97 ++++++++++++++++---
 src/features/vote-create/ui/VoteTitleForm.tsx | 28 +++++-
 3 files changed, 166 insertions(+), 24 deletions(-)

diff --git a/src/features/vote-create/ui/VoteCandidateForm.tsx b/src/features/vote-create/ui/VoteCandidateForm.tsx
index a4ce439..29935d6 100644
--- a/src/features/vote-create/ui/VoteCandidateForm.tsx
+++ b/src/features/vote-create/ui/VoteCandidateForm.tsx
@@ -1,22 +1,65 @@
+import type { UseFormRegister, UseFormWatch } from 'react-hook-form';
+import type { ElectionAllData } from '../types';
 import VoteInput from './VoteInput';
+import { useVoteCreateContext } from '../model';
+
+interface VoteDetailFormProps {
+  register: UseFormRegister<ElectionAllData>;
+  watch: UseFormWatch<ElectionAllData>;
+}
+
+export default function VoteCandidateForm({
+  register,
+  watch,
+}: VoteDetailFormProps) {
+  const { candidateKey, nomineeKey } = useVoteCreateContext();
+  const isMain = nomineeKey === 'nominee1';
+
+  const fields = [
+    {
+      placeholder: `${isMain ? '정' : '부'}후보자 이름`,
+      field: 'name' as const,
+    },
+    {
+      placeholder: '학번',
+      field: 'studentId' as const,
+    },
+    {
+      placeholder: '소속 단과대',
+      field: 'college' as const,
+    },
+    {
+      placeholder: '학과',
+      field: 'department' as const,
+    },
+    {
+      placeholder: '후보자 약력1',
+      field: 'description1' as const,
+    },
+    {
+      placeholder: '후보자 약력2',
+      field: 'description2' as const,
+    },
+    {
+      placeholder: '후보자 약력3',
+      field: 'description3' as const,
+    },
+  ];
 
-export default function VoteCandidateForm() {
   return (
     <>
       <p className="mt-11 flex flex-col items-start text-lg font-semibold">
-        정후보자 등록하기
+        {isMain ? '정후보자' : '부후보자'} 등록하기
       </p>
       <div className="mt-[18px] flex w-full flex-col gap-[14px]">
-        <VoteInput placeholder="정후보자 이름" />
-        <VoteInput placeholder="학번" />
-        <VoteInput placeholder="소속 단과대" />
-        <VoteInput placeholder="학과" />
-        <div className="border-sl flex h-45 w-full flex-col gap-y-2.5 rounded-md border-[1px] p-5 font-normal">
-          <textarea
-            className="flex-1 resize-none text-black placeholder:text-[#999] focus:outline-none"
-            placeholder="약력을 짧게 작성해주세요"
+        {fields.map(({ placeholder, field }) => (
+          <VoteInput
+            key={field}
+            placeholder={placeholder}
+            {...register(`${candidateKey}.${nomineeKey}.${field}` as const)}
+            value={watch(`${candidateKey}.${nomineeKey}.${field}` as const)}
           />
-        </div>
+        ))}
       </div>
     </>
   );
diff --git a/src/features/vote-create/ui/VoteDetailForm.tsx b/src/features/vote-create/ui/VoteDetailForm.tsx
index 0580b50..da2aae9 100644
--- a/src/features/vote-create/ui/VoteDetailForm.tsx
+++ b/src/features/vote-create/ui/VoteDetailForm.tsx
@@ -1,17 +1,67 @@
-import { useVoteCreateContext } from '../model';
+import type {
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+} from 'react-hook-form';
+import { useElectionFormMode, useVoteCreateContext } from '../model';
+import type { ElectionAllData } from '../types';
 import { VoteButton, VoteCandidateForm, VoteInput } from '.';
+import { useEffect, useState } from 'react';
 
 interface VoteDetailFormProps {
   teamName: string;
+  watch: UseFormWatch<ElectionAllData>;
+  register: UseFormRegister<ElectionAllData>;
+  setValue: UseFormSetValue<ElectionAllData>;
 }
 
-export default function VoteDetailForm({ teamName }: VoteDetailFormProps) {
-  const { isCandidateMode, setIsCandidateMode } = useVoteCreateContext();
+export default function VoteDetailForm({
+  teamName,
+  watch,
+  register,
+  setValue,
+}: VoteDetailFormProps) {
+  const { isCandidateMode, setIsCandidateMode, setNomineeKey, candidateKey } =
+    useVoteCreateContext();
+
+  const { isNomineeValid } = useElectionFormMode({
+    register,
+    watch,
+    setValue,
+  });
+  const [pledge, setPledge] = useState<string[]>([]);
+
+  useEffect(() => {
+    setPledge([]);
+  }, [candidateKey]);
+
+  useEffect(() => {
+    if (pledge.length > 0) {
+      setValue(`${candidateKey}.info.description`, pledge.join('\n'));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pledge]);
+
+  const handleCandidateButtonClick = (isMainCandidate: boolean) => {
+    setNomineeKey(isMainCandidate ? 'nominee1' : 'nominee2');
+    setIsCandidateMode(true);
+  };
+
+  const candidateButtons = [
+    {
+      label: '정후보자',
+      isMain: true,
+    },
+    {
+      label: '부후보자',
+      isMain: false,
+    },
+  ];
 
   return (
     <>
       {isCandidateMode ? (
-        <VoteCandidateForm />
+        <VoteCandidateForm watch={watch} register={register} />
       ) : (
         <>
           <div className="mt-11 flex flex-col items-start text-lg font-semibold">
@@ -21,15 +71,40 @@ export default function VoteDetailForm({ teamName }: VoteDetailFormProps) {
             <p>후보자를 입력해주세요</p>
           </div>
           <div className="text-s mt-[18px] flex w-full flex-col gap-[14px]">
+            {candidateButtons.map(({ label, isMain: isMainCandidate }) => (
+              <VoteButton
+                key={label + candidateKey}
+                label={label}
+                onClick={() => handleCandidateButtonClick(isMainCandidate)}
+                done={isNomineeValid(
+                  candidateKey,
+                  isMainCandidate ? 'nominee1' : 'nominee2',
+                )}
+              />
+            ))}
+            {pledge.map((item, index) => (
+              <VoteInput
+                key={index}
+                placeholder={`핵심 공약 ${index + 1}`}
+                value={item}
+                onChange={e => {
+                  setPledge(prev => {
+                    const newPledge = [...prev];
+                    newPledge[index] = e.target.value;
+                    return newPledge;
+                  });
+                }}
+              />
+            ))}
             <VoteButton
-              label="정후보자"
-              onClick={() => setIsCandidateMode(true)}
-            />
-            <VoteButton
-              label="부후보자"
-              onClick={() => setIsCandidateMode(true)}
+              plus
+              label={`공약 추가하기 ${pledge.length}/7`}
+              type="button"
+              className="text-s border-[#F2F3F5] bg-[#F2F3F5]"
+              onClick={() => {
+                if (pledge.length < 7) setPledge([...pledge, '']);
+              }}
             />
-            <VoteInput placeholder="핵심 공약 1" />
           </div>
         </>
       )}
diff --git a/src/features/vote-create/ui/VoteTitleForm.tsx b/src/features/vote-create/ui/VoteTitleForm.tsx
index f4a9e84..6c2ea7a 100644
--- a/src/features/vote-create/ui/VoteTitleForm.tsx
+++ b/src/features/vote-create/ui/VoteTitleForm.tsx
@@ -9,6 +9,7 @@ import { BOTTOM_SHEET } from '@/shared/constants';
 import { useBottomSheet } from '@/shared/hook';
 import { useVoteCreateContext } from '@/features/vote-create/model';
 import { useEffect } from 'react';
+import { getDate } from '@/shared/utils';
 
 interface VoteTitleFormProps {
   watch: UseFormWatch<ElectionAllData>;
@@ -22,8 +23,9 @@ export default function VoteTitleForm({
   setValue,
 }: VoteTitleFormProps) {
   const { openBottomSheet } = useBottomSheet();
-  const { voteType } = useVoteCreateContext();
+  const { voteType, startDate, endDate } = useVoteCreateContext();
   const isVoteTypeDone = voteType !== '';
+  const isDateDone = startDate !== null && endDate !== null;
 
   useEffect(() => {
     if (voteType !== '') {
@@ -31,6 +33,13 @@ export default function VoteTitleForm({
     }
   }, [voteType, setValue]);
 
+  useEffect(() => {
+    if (startDate !== null && endDate !== null) {
+      setValue('election.startAt', startDate);
+      setValue('election.endAt', endDate);
+    }
+  }, [startDate, endDate, setValue]);
+
   return (
     <div className='"p-normal scrollbar-hide pb-38" h-full overflow-scroll pt-0'>
       <p className="mt-11 text-lg font-semibold">선거 정보 등록하기</p>
@@ -43,7 +52,22 @@ export default function VoteTitleForm({
           }}
           done={isVoteTypeDone}
         />
-        <VoteButton label="투표 기간을 선택하세요" arrowDown type="button" />
+        <VoteButton
+          label={
+            isDateDone
+              ? `${getDate(startDate, 'YYYY.MM.DD')} - ${getDate(
+                  endDate,
+                  'YYYY.MM.DD',
+                )}`
+              : '투표 기간을 선택하세요'
+          }
+          arrowDown
+          type="button"
+          onClick={() => {
+            openBottomSheet(BOTTOM_SHEET.DATE_PICKER);
+          }}
+          done={isDateDone}
+        />
       </div>
       <p className="mt-6 text-lg font-semibold">선거운동본부 등록하기</p>
       <div className="mt-[18px] flex w-full flex-col gap-[14px]">

From 862685db6041981d8780845d02b75f99f15314e6 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:26:47 +0900
Subject: [PATCH 33/37] feat : add properties to vote create context

---
 .../vote-create/model/context/create.ts       | 12 ++++++++++
 .../vote-create/model/provider/create.tsx     | 22 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/features/vote-create/model/context/create.ts b/src/features/vote-create/model/context/create.ts
index cc84bbe..61dc1ce 100644
--- a/src/features/vote-create/model/context/create.ts
+++ b/src/features/vote-create/model/context/create.ts
@@ -5,4 +5,16 @@ export const VoteCreateContext = createContext<{
   setMode: Dispatch<SetStateAction<number>>;
   isCandidateMode: boolean;
   setIsCandidateMode: Dispatch<SetStateAction<boolean>>;
+  voteType: string;
+  setVoteType: Dispatch<SetStateAction<string>>;
+  candidateKey: 'candidate1' | 'candidate2';
+  setCandidateKey: Dispatch<SetStateAction<'candidate1' | 'candidate2'>>;
+  nomineeKey: 'nominee1' | 'nominee2';
+  setNomineeKey: Dispatch<SetStateAction<'nominee1' | 'nominee2'>>;
+  date: Date;
+  setDate: Dispatch<SetStateAction<Date>>;
+  startDate: string | null;
+  setStartDate: Dispatch<SetStateAction<string | null>>;
+  endDate: string | null;
+  setEndDate: Dispatch<SetStateAction<string | null>>;
 } | null>(null);
diff --git a/src/features/vote-create/model/provider/create.tsx b/src/features/vote-create/model/provider/create.tsx
index 8d50101..afe0f96 100644
--- a/src/features/vote-create/model/provider/create.tsx
+++ b/src/features/vote-create/model/provider/create.tsx
@@ -9,6 +9,16 @@ export default function VoteCreateProvider({
 }) {
   const [mode, setMode] = useState(0);
   const [isCandidateMode, setIsCandidateMode] = useState<boolean>(false);
+  const [voteType, setVoteType] = useState<string>('');
+  const [candidateKey, setCandidateKey] = useState<'candidate1' | 'candidate2'>(
+    'candidate1',
+  );
+  const [nomineeKey, setNomineeKey] = useState<'nominee1' | 'nominee2'>(
+    'nominee1',
+  );
+  const [date, setDate] = useState<Date>(new Date());
+  const [startDate, setStartDate] = useState<string | null>(null);
+  const [endDate, setEndDate] = useState<string | null>(null);
 
   return (
     <VoteCreateContext.Provider
@@ -17,6 +27,18 @@ export default function VoteCreateProvider({
         setMode,
         isCandidateMode,
         setIsCandidateMode,
+        voteType,
+        setVoteType,
+        candidateKey,
+        setCandidateKey,
+        nomineeKey,
+        setNomineeKey,
+        date,
+        setDate,
+        startDate,
+        setStartDate,
+        endDate,
+        setEndDate,
       }}
     >
       {children}

From d7a87f0d823a6472fcf8bf89e90cc77b423c3f8d Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:27:07 +0900
Subject: [PATCH 34/37] feat : implement animation to
 `VoteCreateCompleteScreen`

---
 index.html                                            |  5 +++++
 .../ui/VoteCreateCompleteScreen.tsx                   | 11 ++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 24a65e6..bf8bd93 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,11 @@
       as="image"
       href="/src/assets/image/bg-vote-promise.png"
     />
+    <link
+      rel="preload"
+      as="image"
+      href="https://lottie.host/a0efbf08-977e-49af-926d-01b31d530dd8/7e8jbdwS7b.lottie"
+    />
     <link rel="preload" as="image" href="/src/assets/image/bg-vote.png" />
     <link rel="preload" as="image" href="/src/assets/icon/icon-notice.png" />
     <link rel="preload" as="image" href="/src/assets/icon/icon-result.png" />
diff --git a/src/screen/vote-create-complete/ui/VoteCreateCompleteScreen.tsx b/src/screen/vote-create-complete/ui/VoteCreateCompleteScreen.tsx
index 96d54bc..ce3b433 100644
--- a/src/screen/vote-create-complete/ui/VoteCreateCompleteScreen.tsx
+++ b/src/screen/vote-create-complete/ui/VoteCreateCompleteScreen.tsx
@@ -4,7 +4,7 @@ import { useFlow } from '@/app/stackflow';
 import { Button, NoBackAppBar } from '@/shared/ui';
 import { VoteBg } from '@/assets/image';
 import { CreateCompleteIcon } from '@/assets/icon';
-
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 export default function VoteCreateCompleteScreen() {
   const { pop } = useFlow();
 
@@ -22,6 +22,15 @@ export default function VoteCreateCompleteScreen() {
           <p className="text-s mb-12 text-center text-xl font-semibold">
             투표는 대시보드에서 수정 가능해요
           </p>
+          <div className="absolute top-70 left-1/2 -translate-x-1/2">
+            <DotLottieReact
+              style={{ width: 300, height: 300 }}
+              src="https://lottie.host/a0efbf08-977e-49af-926d-01b31d530dd8/7e8jbdwS7b.lottie"
+              autoplay
+              className="scale-500"
+            />
+          </div>
+
           <img src={CreateCompleteIcon} alt="voteComplete" className="mb-20" />
           <Button intent="gradient" onClick={() => pop({ animate: false })}>
             홈으로 돌아가기

From 025d1fd3375e59827b9611a66e53dae28680b6d8 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:27:27 +0900
Subject: [PATCH 35/37] feat: refactor submission functions to include election
 and candidate IDs

---
 src/features/vote-create/api/create.ts | 114 +++++++++++++++++++++----
 1 file changed, 97 insertions(+), 17 deletions(-)

diff --git a/src/features/vote-create/api/create.ts b/src/features/vote-create/api/create.ts
index c4c9b6e..c59f59c 100644
--- a/src/features/vote-create/api/create.ts
+++ b/src/features/vote-create/api/create.ts
@@ -1,64 +1,144 @@
 import { useMutation } from '@tanstack/react-query';
 import { REQUEST, userPost } from '@/shared/api';
 import type {
+  Candidate,
   CandidatePost,
+  Election,
   ElectionPost,
   NomineePost,
   PledgePost,
 } from '@/shared/types';
+import type { BaseResponse } from '@/shared/types/response';
+import { useFlow } from '@/app/stackflow';
+import { PATH } from '@/shared/constants';
+
+interface ElectionResponse extends BaseResponse {
+  results: Election[];
+}
+
+interface CandidateResponse extends BaseResponse {
+  results: Candidate[];
+}
 
 const submitElection = async (data: ElectionPost) => {
-  const response = await userPost({
+  const response = await userPost<ElectionPost, ElectionResponse>({
     request: REQUEST.ELECTION,
     data: data,
   });
-  return response;
+  return response.data;
 };
 
-const submitCandidate = async (data: CandidatePost) => {
-  const response = await userPost({
+const submitCandidate = async (data: CandidatePost, electionId: number) => {
+  const response = await userPost<
+    CandidatePost & Pick<Candidate, 'electionId'>,
+    CandidateResponse
+  >({
     request: REQUEST.CANDIDATE,
-    data: data,
+    data: { ...data, electionId: electionId },
   });
-  return response;
+  return response.data;
 };
 
-const submitNominee = async (data: NomineePost) => {
-  const response = await userPost({
-    request: REQUEST.NOMINEE_POST,
+const submitNominee = async (data: NomineePost, candidateId: number) => {
+  const response = await userPost<NomineePost>({
+    request: REQUEST.NOMINEE_POST + `${candidateId}`,
     data: data,
   });
-  return response;
+  return response.data;
 };
 
-const submitPledge = async (data: PledgePost) => {
+const submitPledge = async (data: PledgePost[], candidateId: number) => {
   const response = await userPost({
-    request: REQUEST.PLEDGE_POST,
+    request: REQUEST.PLEDGE_POST + `${candidateId}`,
     data: data,
   });
   return response;
 };
 
-export const useSubmitElection = () => {
+export const useSubmitElection = (
+  candidates: CandidatePost[],
+  nominees: NomineePost[][],
+  pledges: string[][],
+) => {
+  const { mutateAsync: submitCandidate1 } = useSubmitCandidate(
+    nominees[0],
+    pledges[0],
+  );
+  const { mutateAsync: submitCandidate2 } = useSubmitCandidate(
+    nominees[1],
+    pledges[1],
+  );
+
   return useMutation({
     mutationFn: (data: ElectionPost) => submitElection(data),
+    onSuccess: data => {
+      const electionId = data.results[0].id;
+      submitCandidate1({
+        data: candidates[0],
+        electionId: electionId,
+      }).then(() =>
+        submitCandidate2({
+          data: candidates[1],
+          electionId: electionId,
+        }),
+      );
+    },
   });
 };
 
-export const useSubmitCandidate = () => {
+export const useSubmitCandidate = (
+  nominees: NomineePost[],
+  pledges: string[],
+) => {
+  const { mutateAsync: submitNominee } = useSubmitNominee();
+  const { mutate } = useSubmitPledge();
+
   return useMutation({
-    mutationFn: (data: CandidatePost) => submitCandidate(data),
+    mutationFn: ({
+      data,
+      electionId,
+    }: {
+      data: CandidatePost;
+      electionId: number;
+    }) => submitCandidate(data, electionId),
+    onSuccess: data => {
+      const candidateId = data.results[0].id;
+      submitNominee({ data: nominees[0], candidateId: candidateId }).then(() =>
+        submitNominee({ data: nominees[1], candidateId: candidateId }).then(
+          () =>
+            mutate({
+              data: pledges.map(pledge => ({ description: pledge })),
+              candidateId: candidateId,
+            }),
+        ),
+      );
+    },
   });
 };
 
 export const useSubmitNominee = () => {
   return useMutation({
-    mutationFn: (data: NomineePost) => submitNominee(data),
+    mutationFn: ({
+      data,
+      candidateId,
+    }: {
+      data: NomineePost;
+      candidateId: number;
+    }) => submitNominee(data, candidateId),
   });
 };
 
 export const useSubmitPledge = () => {
+  const { replace } = useFlow();
+
   return useMutation({
-    mutationFn: (data: PledgePost) => submitPledge(data),
+    mutationFn: ({
+      data,
+      candidateId,
+    }: {
+      data: PledgePost[];
+      candidateId: number;
+    }) => submitPledge(data, candidateId),
+    onSuccess: () => replace(PATH.VOTE_CREATE_COMPLETE, {}),
   });
 };

From d5b48db5646eef516640c9b892ac2c2817e22dbf Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:27:45 +0900
Subject: [PATCH 36/37] feat : add path constant for `VoteCreateLoadingScreen`

---
 src/shared/constants/path.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/constants/path.ts b/src/shared/constants/path.ts
index ae885b4..0c1d8c5 100644
--- a/src/shared/constants/path.ts
+++ b/src/shared/constants/path.ts
@@ -12,6 +12,7 @@ export const PATH = {
   VOTE: 'VoteScreen',
   VOTE_COMPLETE: 'VoteCompleteScreen',
   VOTE_CREATE: 'VoteCreateScreen',
+  VOTE_CREATE_LOADING: 'VoteCreateLoadingScreen',
   VOTE_CREATE_COMPLETE: 'VoteCreateCompleteScreen',
   VOTE_EDIT: 'VoteEditScreen',
   VOTE_PROMISE: 'VotePromiseScreen',

From 79d6c1908f43d45247c919a47855272aa2d4b350 Mon Sep 17 00:00:00 2001
From: cho4u4o <cho4u4o@gmail.com>
Date: Fri, 27 Jun 2025 13:27:52 +0900
Subject: [PATCH 37/37] feat: refactor VoteCreateContainer to improve form
 handling and UI structure

---
 .../vote-create/ui/VoteCreateContainer.tsx    | 132 ++++++++++--------
 1 file changed, 71 insertions(+), 61 deletions(-)

diff --git a/src/widgets/vote-create/ui/VoteCreateContainer.tsx b/src/widgets/vote-create/ui/VoteCreateContainer.tsx
index 714f1a8..5152d21 100644
--- a/src/widgets/vote-create/ui/VoteCreateContainer.tsx
+++ b/src/widgets/vote-create/ui/VoteCreateContainer.tsx
@@ -1,73 +1,83 @@
-import type { MouseEvent } from 'react';
 import { AppScreen } from '@stackflow/plugin-basic-ui';
-
-import { useFlow } from '@/app/stackflow';
+import { useForm } from 'react-hook-form';
 
 import { cn } from '@/shared/utils';
-import { Button, VoteCreateAppBar } from '@/shared/ui';
+import { Button, DatePickerBottomSheet, VoteCreateAppBar } from '@/shared/ui';
 
-import { useVoteCreateContext } from '@/features/vote-create/model';
-import { VoteDetailForm, VoteTitleForm } from '@/features/vote-create/ui';
-import { PATH } from '@/shared/constants';
+import {
+  useVoteCreateContext,
+  useElectionFormMode,
+} from '@/features/vote-create/model';
+import type { ElectionAllData } from '@/features/vote-create/types';
 
-export default function VoteCreateContainer() {
-  const { mode, setMode, isCandidateMode, setIsCandidateMode } =
-    useVoteCreateContext();
-  const { pop, replace } = useFlow();
+import VoteTypeBottomSheet from './VoteTypeBottomSheet';
+import { useEffect } from 'react';
 
-  const handleBackClick = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    if (isCandidateMode) {
-      setIsCandidateMode(false);
-      return;
-    }
-    if (mode === 0) pop();
-    else setMode(prev => prev - 1);
-  };
+export default function VoteCreateContainer() {
+  const { mode, setCandidateKey } = useVoteCreateContext();
+  const { register, watch, setValue, handleSubmit } = useForm<ElectionAllData>({
+    defaultValues: {
+      election: {
+        description: '투표에 참여해주세요!',
+        campus: 'SUWON',
+        collageMajorName: '소프트웨어경영대학',
+        active: true,
+      },
+      candidate1: { nominee1: { main: true }, nominee2: { main: false } },
+      candidate2: { nominee1: { main: true }, nominee2: { main: false } },
+    },
+  });
 
-  const handleNextClick = () => {
-    if (mode < 2) setMode(prev => prev + 1);
-    else replace(PATH.VOTE_CREATE_COMPLETE, {});
-  };
+  const {
+    MODE,
+    handleBackClick,
+    handleNextClick,
+    isFormValid,
+    buttonIntent,
+    onSubmitClick,
+  } = useElectionFormMode({ register, watch, setValue });
 
-  const MODE = [
-    <VoteTitleForm />,
-    <VoteDetailForm teamName="구름" />,
-    <VoteDetailForm teamName="하늘" />,
-  ];
+  useEffect(() => {
+    if (mode !== 2) setCandidateKey('candidate1');
+    else setCandidateKey('candidate2');
+  }, [mode, setCandidateKey]);
 
   return (
-    <AppScreen
-      backgroundColor="#fff"
-      appBar={VoteCreateAppBar('투표 생성', handleBackClick)}
-    >
-      <div className="fixed top-[58px] h-[6px] w-full bg-[#F5F5F5]">
-        <div
-          className={cn(
-            mode === 0
-              ? 'w-1/3'
-              : mode === 1
-                ? 'w-2/3'
-                : mode === 2 && 'w-full',
-            'bg-m h-full rounded-r-full',
-          )}
-        />
-      </div>
-      <div className="p-normal scrollbar-hide h-full overflow-scroll pt-0 pb-38">
-        {MODE[mode]}
-      </div>
-      <div className="shadow-voteCreateDock px-normal fixed bottom-0 flex w-full gap-x-[9px] bg-white pt-4 pb-15">
-        <Button intent="disabled" className="flex-1 text-lg">
-          임시저장
-        </Button>
-        <Button
-          intent="disabled"
-          className="flex-1 text-lg"
-          onClick={handleNextClick}
-        >
-          다음
-        </Button>
-      </div>
-    </AppScreen>
+    <>
+      <AppScreen
+        backgroundColor="#fff"
+        appBar={VoteCreateAppBar('투표 생성', handleBackClick)}
+      >
+        <div className="fixed top-[58px] h-[6px] w-full bg-[#F5F5F5]">
+          <div
+            className={cn(
+              mode === 0 ? 'w-1/3' : mode === 1 ? 'w-2/3' : 'w-full',
+              'bg-m h-full rounded-r-full',
+            )}
+          />
+        </div>
+        <form onSubmit={handleSubmit(onSubmitClick)}>
+          <div className="p-normal scrollbar-hide h-full overflow-scroll pt-0 pb-38">
+            {MODE!.form}
+          </div>
+          <div className="shadow-voteCreateDock px-normal fixed bottom-0 flex w-full gap-x-[9px] bg-white pt-4 pb-15">
+            <Button intent="disabled" className="flex-1 text-lg">
+              임시저장
+            </Button>
+            <Button
+              disabled={!isFormValid}
+              intent={buttonIntent}
+              className="flex-1 text-lg"
+              onClick={handleNextClick}
+              type={watch('candidate2.info.description') ? 'submit' : 'button'}
+            >
+              다음
+            </Button>
+          </div>
+        </form>
+      </AppScreen>
+      <VoteTypeBottomSheet />
+      <DatePickerBottomSheet />
+    </>
   );
 }