From 1e143dcc7d4d8e43c426255b2ededdb4b8462a1a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 4 Sep 2024 02:48:45 +0000
Subject: [PATCH 1/6] Create draft PR for #639


From ef0520121e2327bac4c11eb4043d922be2c3a170 Mon Sep 17 00:00:00 2001
From: Kim Da Eun <midekuna@gmail.com>
Date: Mon, 9 Sep 2024 19:47:43 +0900
Subject: [PATCH 2/6] =?UTF-8?q?=08fix:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=EA=B4=80=EB=A0=A8=20=EC=9A=94=EC=B2=AD=EC=9D=98=20?=
 =?UTF-8?q?clubId=20=ED=95=84=EB=93=9C=EC=97=90=20dashboardId=EA=B0=80=20?=
 =?UTF-8?q?=EB=93=A4=EC=96=B4=EA=B0=80=EB=8A=94=20=EB=B2=84=EA=B7=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- url 패턴 리팩토링: 대시보드 생성, 특정 공고의 대시보드 페이지 url, 공고 목록 페이지의 url이 변경됨.
- url 상수화
- 대시보드 응답 body의 postUrl 삭제 및 dashboardId와 postId를 전달하는 것으로 변경
- clubId가 들어가야 할 곳에 dashboardId가 들어가는 오류 픽스
- API 명세 변경에 따른 mock data 변경(postUrl 제거, id 정보를 전달하는 것으로 변경)
- clubId 관리 기능(useClubId) 추가
---
 frontend/src/api/domain/dashboard.ts          |  6 ++--
 frontend/src/api/domain/process.ts            |  4 +--
 .../common/ApiErrorBoundary/index.tsx         |  7 ++++
 .../DashboardCreate/Finish/Finish.stories.tsx |  6 ++--
 .../DashboardCreate/Finish/index.tsx          | 13 ++++----
 .../DashboardSidebar.stories.tsx              | 12 ++++---
 .../dashboard/DashboardSidebar/index.tsx      | 16 +++++-----
 .../RecruitmentCard.stories.tsx               |  4 +--
 .../recruitment/RecruitmentCard/index.tsx     |  6 ++--
 frontend/src/constants/constants.ts           |  1 +
 frontend/src/hooks/apply.ts                   |  3 +-
 frontend/src/hooks/service/useClubId.ts       | 32 +++++++++++++++++++
 .../hooks/useDashboardCreateForm/index.tsx    | 22 ++++++-------
 frontend/src/hooks/useGetDashboards/index.tsx | 12 +++----
 frontend/src/hooks/useProcess/index.ts        |  6 ++--
 frontend/src/hooks/useSignIn/index.tsx        |  6 +++-
 frontend/src/hooks/useSignOut/index.ts        |  6 +++-
 frontend/src/mocks/dashboardList.json         |  6 ++--
 .../src/mocks/handlers/dashboardHandlers.ts   |  4 +--
 frontend/src/mocks/processMockData.json       |  2 +-
 frontend/src/pages/ConfirmApply/index.tsx     |  5 +--
 frontend/src/pages/DashBoardList/index.tsx    | 19 ++++++-----
 frontend/src/pages/Dashboard/index.tsx        |  4 +--
 frontend/src/pages/DashboardCreate/index.tsx  | 14 +++-----
 frontend/src/pages/DashboardLayout/index.tsx  | 13 ++++----
 frontend/src/pages/ErrorPage/index.tsx        | 10 ++++--
 frontend/src/pages/Landing/index.tsx          |  3 +-
 frontend/src/router/AppRouter.tsx             | 23 ++++++-------
 frontend/src/router/path.ts                   | 27 ++++++++++++++++
 frontend/src/types/dashboard.ts               |  2 +-
 frontend/src/types/process.ts                 |  2 +-
 frontend/tsconfig.json                        |  3 +-
 frontend/webpack.config.js                    |  1 +
 33 files changed, 192 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/hooks/service/useClubId.ts
 create mode 100644 frontend/src/router/path.ts

diff --git a/frontend/src/api/domain/dashboard.ts b/frontend/src/api/domain/dashboard.ts
index 87af9e577..bc0f38a67 100644
--- a/frontend/src/api/domain/dashboard.ts
+++ b/frontend/src/api/domain/dashboard.ts
@@ -6,9 +6,9 @@ import APIClient from '../APIClient';
 const apiClient = new APIClient(DASHBOARDS);
 
 const dashboardApis = {
-  get: async ({ dashboardId }: { dashboardId: string }) => {
+  get: async ({ clubId }: { clubId: string }) => {
     const queryParams = {
-      clubId: dashboardId,
+      clubId,
     };
 
     return apiClient.get<Club>({
@@ -18,7 +18,7 @@ const dashboardApis = {
 
   create: async ({ clubId, dashboardFormInfo }: { clubId: string; dashboardFormInfo: DashboardFormInfo }) =>
     apiClient.post<{
-      postUrl: string;
+      dashboardId: string;
       postId: string;
     }>({
       path: `?${convertParamsToQueryString({ clubId })}`,
diff --git a/frontend/src/api/domain/process.ts b/frontend/src/api/domain/process.ts
index e8dd34fa8..079e7903e 100644
--- a/frontend/src/api/domain/process.ts
+++ b/frontend/src/api/domain/process.ts
@@ -6,9 +6,9 @@ import APIClient from '../APIClient';
 const apiClient = new APIClient(PROCESSES);
 
 const processApis = {
-  get: async ({ id }: { id: string }): Promise<ProcessResponse> =>
+  get: async ({ dashboardId }: { dashboardId: string }): Promise<ProcessResponse> =>
     apiClient.get({
-      path: `?${createParams({ dashboardId: id })}`,
+      path: `?${createParams({ dashboardId })}`,
     }),
 
   create: async (params: { dashboardId: number; orderIndex: number; name: string; description?: string }) =>
diff --git a/frontend/src/components/common/ApiErrorBoundary/index.tsx b/frontend/src/components/common/ApiErrorBoundary/index.tsx
index 85c40f983..d3299a855 100644
--- a/frontend/src/components/common/ApiErrorBoundary/index.tsx
+++ b/frontend/src/components/common/ApiErrorBoundary/index.tsx
@@ -2,12 +2,15 @@ import ApiError from '@api/ApiError';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { ErrorBoundary, ErrorBoundaryPropsWithComponent, FallbackProps } from 'react-error-boundary';
 import * as Sentry from '@sentry/react';
+import useClubId from '@hooks/service/useClubId';
 
 interface ApiErrorBoundaryProps extends ErrorBoundaryPropsWithComponent {
   FallbackComponent: React.ComponentType<FallbackProps>;
 }
 
 export default function ApiErrorBoundary({ FallbackComponent, children }: ApiErrorBoundaryProps) {
+  const { clearClubId } = useClubId();
+
   const fallbackRender = (props: FallbackProps) => {
     if (!(props.error instanceof ApiError)) {
       throw props.error;
@@ -24,6 +27,10 @@ export default function ApiErrorBoundary({ FallbackComponent, children }: ApiErr
           onError={(error, info) => {
             const apiError = error as ApiError;
 
+            if (apiError.statusCode === 401) {
+              clearClubId();
+            }
+
             Sentry.withScope((scope) => {
               scope.setLevel('error');
               scope.setTag('statusCode', apiError.statusCode);
diff --git a/frontend/src/components/dashboard/DashboardCreate/Finish/Finish.stories.tsx b/frontend/src/components/dashboard/DashboardCreate/Finish/Finish.stories.tsx
index ca995218a..c92709a8f 100644
--- a/frontend/src/components/dashboard/DashboardCreate/Finish/Finish.stories.tsx
+++ b/frontend/src/components/dashboard/DashboardCreate/Finish/Finish.stories.tsx
@@ -23,8 +23,8 @@ const meta: Meta<typeof Finish> = {
   },
   tags: ['autodocs'],
   argTypes: {
-    postUrl: {
-      description: '게시된 공고의 URL입니다.',
+    dashboardId: {
+      description: '게시된 공고의 대시보드 ID입니다.',
       control: { type: 'text' },
       table: {
         type: { summary: 'string' },
@@ -45,7 +45,7 @@ type Story = StoryObj<typeof Finish>;
 
 export const Template: Story = {
   args: {
-    postUrl: 'https://www.cruru.kr/123543920/recruit',
+    dashboardId: '1',
     postId: '1',
   },
 };
diff --git a/frontend/src/components/dashboard/DashboardCreate/Finish/index.tsx b/frontend/src/components/dashboard/DashboardCreate/Finish/index.tsx
index 6c23c8ffd..2c7057b6e 100644
--- a/frontend/src/components/dashboard/DashboardCreate/Finish/index.tsx
+++ b/frontend/src/components/dashboard/DashboardCreate/Finish/index.tsx
@@ -1,27 +1,28 @@
 import Button from '@components/common/Button';
 import ChevronButton from '@components/common/ChevronButton';
-import { useNavigate, useParams } from 'react-router-dom';
+import { routes } from '@router/path';
+import { useNavigate } from 'react-router-dom';
+import { DOMAIN_URL } from '@constants/constants';
 import SharePost from '../SharePost';
 import S from './style';
 
 interface FinishProps {
-  postUrl: string;
+  dashboardId: string;
   postId: string;
 }
 
-export default function Finish({ postUrl, postId }: FinishProps) {
+export default function Finish({ dashboardId, postId }: FinishProps) {
   const navigate = useNavigate();
-  const { dashboardId } = useParams() as { dashboardId: string };
 
   const handleClickButton = () => {
-    navigate(`/dashboard/${dashboardId}/${postId}`);
+    navigate(routes.dashboard.post({ dashboardId, postId }));
   };
 
   return (
     <S.Container>
       <S.Icon>🎉</S.Icon>
       <S.Message>공고가 게시됐어요!</S.Message>
-      <SharePost url={`https://${postUrl}`} />
+      <SharePost url={`${DOMAIN_URL}${routes.post({ postId })}`} />
       <Button
         size="sm"
         color="white"
diff --git a/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx b/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx
index d0793e4df..4fb31b1cc 100644
--- a/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx
+++ b/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx
@@ -24,12 +24,14 @@ const meta: Meta<typeof DashboardSidebar> = {
       {
         text: '첫번째 옵션',
         isSelected: true,
-        postId: 1,
+        dashboardId: '1',
+        postId: '10',
       },
       {
         text: '두번째 옵션',
         isSelected: false,
-        postId: 2,
+        dashboardId: '2',
+        postId: '11',
       },
     ],
   },
@@ -59,9 +61,9 @@ type Story = StoryObj<typeof DashboardSidebar>;
 export const Default: Story = {
   args: {
     options: [
-      { text: '우아한테크코스 6기 프론트엔드', isSelected: true, postId: 1 },
-      { text: '우아한테크코스 6기 백엔드', isSelected: false, postId: 2 },
-      { text: '우아한테크코스 6기 안드로이드', isSelected: false, postId: 3 },
+      { text: '우아한테크코스 6기 프론트엔드', isSelected: true, dashboardId: '1', postId: '10' },
+      { text: '우아한테크코스 6기 백엔드', isSelected: false, dashboardId: '2', postId: '11' },
+      { text: '우아한테크코스 6기 안드로이드', isSelected: false, dashboardId: '3', postId: '12' },
     ],
   },
 };
diff --git a/frontend/src/components/dashboard/DashboardSidebar/index.tsx b/frontend/src/components/dashboard/DashboardSidebar/index.tsx
index 73145d1c3..2188c1a28 100644
--- a/frontend/src/components/dashboard/DashboardSidebar/index.tsx
+++ b/frontend/src/components/dashboard/DashboardSidebar/index.tsx
@@ -1,13 +1,15 @@
 import Logo from '@assets/images/logo.svg';
 import Accordion from '@components/common/Accordion';
-import { Link, useParams } from 'react-router-dom';
+import { routes } from '@router/path';
+import { Link } from 'react-router-dom';
 import LogoutButton from './LogoutButton';
 import S from './style';
 
 interface Option {
   text: string;
   isSelected: boolean;
-  postId: number;
+  postId: string;
+  dashboardId: string;
 }
 
 interface DashboardSidebarProps {
@@ -15,11 +17,9 @@ interface DashboardSidebarProps {
 }
 
 export default function DashboardSidebar({ options }: DashboardSidebarProps) {
-  const { dashboardId } = useParams<{ dashboardId: string }>();
-
   return (
     <S.Container>
-      <Link to={`/dashboard/${dashboardId}/posts`}>
+      <Link to={routes.dashboard.list()}>
         <S.Logo
           src={Logo}
           alt="크루루 로고"
@@ -27,12 +27,12 @@ export default function DashboardSidebar({ options }: DashboardSidebarProps) {
       </Link>
 
       <S.Contents>
-        <Accordion title={<Link to={`/dashboard/${dashboardId}/posts`}>공고</Link>}>
-          {options.map(({ text, isSelected, postId }, index) => (
+        <Accordion title={<Link to={routes.dashboard.list()}>공고</Link>}>
+          {options.map(({ text, isSelected, postId, dashboardId }, index) => (
             // eslint-disable-next-line react/no-array-index-key
             <Accordion.ListItem key={index}>
               <S.LinkContainer isSelected={isSelected}>
-                <Link to={`/dashboard/${dashboardId}/${postId}`}>{text}</Link>
+                <Link to={routes.dashboard.post({ dashboardId, postId })}>{text}</Link>
               </S.LinkContainer>
             </Accordion.ListItem>
           ))}
diff --git a/frontend/src/components/recruitment/RecruitmentCard/RecruitmentCard.stories.tsx b/frontend/src/components/recruitment/RecruitmentCard/RecruitmentCard.stories.tsx
index 7c25a308e..938ad6032 100644
--- a/frontend/src/components/recruitment/RecruitmentCard/RecruitmentCard.stories.tsx
+++ b/frontend/src/components/recruitment/RecruitmentCard/RecruitmentCard.stories.tsx
@@ -14,7 +14,7 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {
-    dashboardId: { control: 'number' },
+    dashboardId: { control: 'text' },
     title: { control: 'text' },
     postStats: {
       accept: { control: 'number' },
@@ -32,7 +32,7 @@ type Story = StoryObj<typeof meta>;
 
 export const RecruitmentCardDefault: Story = {
   args: {
-    dashboardId: 1,
+    dashboardId: '1',
     title: '프론트엔드 7기 모집',
     postStats: {
       accept: 42,
diff --git a/frontend/src/components/recruitment/RecruitmentCard/index.tsx b/frontend/src/components/recruitment/RecruitmentCard/index.tsx
index 957d3d628..a657b3e42 100644
--- a/frontend/src/components/recruitment/RecruitmentCard/index.tsx
+++ b/frontend/src/components/recruitment/RecruitmentCard/index.tsx
@@ -14,12 +14,12 @@ interface RecruitmentStats {
 }
 
 interface RecruitmentCardProps {
-  dashboardId: number;
+  dashboardId: string;
   title: string;
   postStats: RecruitmentStats;
   startDate: string;
   endDate: string;
-  onClick: (dashboardId: number) => void;
+  onClick: () => void;
 }
 
 const POST_STATS_KEY: Record<string, string> = {
@@ -53,7 +53,7 @@ export default function RecruitmentCard({
   ];
 
   return (
-    <S.CardWrapper onClick={() => onClick(dashboardId)}>
+    <S.CardWrapper onClick={onClick}>
       <S.RecruitmentInfoContainer>
         <S.RecruitmentTitle>{title}</S.RecruitmentTitle>
         <S.RecruitmentStatusFlag status={status}>{RECRUITMENT_STATUS[status]}</S.RecruitmentStatusFlag>
diff --git a/frontend/src/constants/constants.ts b/frontend/src/constants/constants.ts
index 2018fec29..b2e489e46 100644
--- a/frontend/src/constants/constants.ts
+++ b/frontend/src/constants/constants.ts
@@ -2,6 +2,7 @@ import { RecruitmentPostTabItems } from '@components/recruitmentPost/Recruitment
 import { DashboardTabItems } from '@pages/Dashboard';
 import type { Question } from '@customTypes/dashboard';
 
+export const DOMAIN_URL = process.env.NODE_ENV === 'development' ? process.env.DEV_URL : process.env.PROD_URL;
 export const BASE_URL = `${process.env.API_URL}/${process.env.API_VERSION}`;
 
 export const DASHBOARD_TAB_MENUS: Record<string, DashboardTabItems> = {
diff --git a/frontend/src/hooks/apply.ts b/frontend/src/hooks/apply.ts
index e78f51f43..0637b983b 100644
--- a/frontend/src/hooks/apply.ts
+++ b/frontend/src/hooks/apply.ts
@@ -3,6 +3,7 @@ import { ApplyRequestBody } from '@customTypes/apply';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { getTimeStatus } from '@utils/compareTime';
+import { routes } from '@router/path';
 import QUERY_KEYS from './queryKeys';
 
 const useGetRecruitmentInfo = ({ postId }: { postId: string }) => {
@@ -46,7 +47,7 @@ export const applyMutations = {
     return useMutation({
       mutationFn: (params: { body: ApplyRequestBody }) => applyApis.apply({ ...params, postId }),
       onSuccess: () => {
-        navigate(`/post/${postId}/confirm`, { state: { title } });
+        navigate(routes.confirmApply({ postId }), { state: { title } });
       },
     });
   },
diff --git a/frontend/src/hooks/service/useClubId.ts b/frontend/src/hooks/service/useClubId.ts
new file mode 100644
index 000000000..09daeaa2a
--- /dev/null
+++ b/frontend/src/hooks/service/useClubId.ts
@@ -0,0 +1,32 @@
+import { useToast } from '@contexts/ToastContext';
+
+const CLUB_ID_KEY = 'clubId';
+
+export default function useClubId() {
+  const { error } = useToast();
+
+  const saveClubId = (clubId: string) => {
+    localStorage.setItem(CLUB_ID_KEY, clubId);
+  };
+
+  const getClubId = () => {
+    const clubId = localStorage.getItem(CLUB_ID_KEY);
+
+    if (!clubId) {
+      error('세션이 만료되었습니다. 다시 로그인해주세요.');
+      return null;
+    }
+
+    return clubId;
+  };
+
+  const clearClubId = () => {
+    localStorage.removeItem(CLUB_ID_KEY);
+  };
+
+  return {
+    saveClubId,
+    getClubId,
+    clearClubId,
+  };
+}
diff --git a/frontend/src/hooks/useDashboardCreateForm/index.tsx b/frontend/src/hooks/useDashboardCreateForm/index.tsx
index 2ad002899..8349e8d86 100644
--- a/frontend/src/hooks/useDashboardCreateForm/index.tsx
+++ b/frontend/src/hooks/useDashboardCreateForm/index.tsx
@@ -1,11 +1,12 @@
 import dashboardApis from '@api/domain/dashboard';
 import { DEFAULT_QUESTIONS } from '@constants/constants';
 import type { Question, QuestionOptionValue, RecruitmentInfoState, StepState } from '@customTypes/dashboard';
+import useClubId from '@hooks/service/useClubId';
 import { useMutation, UseMutationResult } from '@tanstack/react-query';
 import { useState } from 'react';
 
 interface FinishResJson {
-  postUrl: string;
+  dashboardId: string;
   postId: string;
 }
 
@@ -27,14 +28,7 @@ interface UseDashboardCreateFormReturn {
   setQuestionNext: (index: number) => () => void;
   deleteQuestion: (index: number) => void;
 
-  submitMutator: UseMutationResult<
-    FinishResJson,
-    Error,
-    {
-      clubId: string;
-    },
-    unknown
-  >;
+  submitMutator: UseMutationResult<FinishResJson, Error, void, unknown>;
   finishResJson: FinishResJson | null;
 }
 
@@ -52,8 +46,10 @@ export default function useDashboardCreateForm(): UseDashboardCreateFormReturn {
   const [finishResJson, setFinishResJson] = useState<FinishResJson | null>(null);
   const [uniqueId, setUniqueId] = useState(DEFAULT_QUESTIONS.length);
 
+  const clubId = useClubId().getClubId() || '';
+
   const submitMutator = useMutation({
-    mutationFn: ({ clubId }: { clubId: string }) =>
+    mutationFn: () =>
       dashboardApis.create({
         clubId,
         dashboardFormInfo: {
@@ -75,11 +71,11 @@ export default function useDashboardCreateForm(): UseDashboardCreateFormReturn {
     if (stepState === 'applyForm') setStepState('recruitmentForm');
   };
 
-  const nextStep = (dashboardId?: string) => {
+  const nextStep = () => {
     if (stepState === 'recruitmentForm') setStepState('applyForm');
     if (stepState === 'applyForm') {
-      if (dashboardId) {
-        submitMutator.mutate({ clubId: dashboardId });
+      if (clubId) {
+        submitMutator.mutate();
       }
     }
   };
diff --git a/frontend/src/hooks/useGetDashboards/index.tsx b/frontend/src/hooks/useGetDashboards/index.tsx
index e3692e9dd..644a7f7b3 100644
--- a/frontend/src/hooks/useGetDashboards/index.tsx
+++ b/frontend/src/hooks/useGetDashboards/index.tsx
@@ -1,16 +1,16 @@
 import dashboardApis from '@api/domain/dashboard';
 import type { Club } from '@customTypes/dashboard';
 import QUERY_KEYS from '@hooks/queryKeys';
+import useClubId from '@hooks/service/useClubId';
 import { useQuery } from '@tanstack/react-query';
 
-interface UseGetDashboardsProps {
-  dashboardId: string;
-}
+export default function useGetDashboards() {
+  const clubId = useClubId().getClubId() || '';
 
-export default function useGetDashboards({ dashboardId }: UseGetDashboardsProps) {
   const { data, error, isLoading } = useQuery<Club>({
-    queryKey: [QUERY_KEYS.DASHBOARD, dashboardId],
-    queryFn: () => dashboardApis.get({ dashboardId }),
+    queryKey: [QUERY_KEYS.DASHBOARD, clubId],
+    queryFn: () => dashboardApis.get({ clubId }),
+    enabled: !!clubId,
   });
 
   return { data, error, isLoading };
diff --git a/frontend/src/hooks/useProcess/index.ts b/frontend/src/hooks/useProcess/index.ts
index a4bdb1c2e..8720bcbb3 100644
--- a/frontend/src/hooks/useProcess/index.ts
+++ b/frontend/src/hooks/useProcess/index.ts
@@ -4,6 +4,8 @@ import type { Process, ProcessResponse } from '@customTypes/process';
 
 import processApis from '@api/domain/process';
 import QUERY_KEYS from '@hooks/queryKeys';
+import { routes } from '@router/path';
+import { DOMAIN_URL } from '../../constants/constants';
 
 interface SimpleProcess {
   processName: string;
@@ -27,7 +29,7 @@ interface UseProcessReturn {
 export default function useProcess({ dashboardId, postId }: UseProcessProps): UseProcessReturn {
   const { data, error, isLoading } = useQuery<ProcessResponse>({
     queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId],
-    queryFn: () => processApis.get({ id: postId }),
+    queryFn: () => processApis.get({ dashboardId }),
   });
 
   const processes = data?.processes || [];
@@ -35,7 +37,7 @@ export default function useProcess({ dashboardId, postId }: UseProcessProps): Us
   const processList = processes.map((p) => ({ processName: p.name, processId: p.processId }));
   return {
     title: data?.title ?? '',
-    postUrl: data?.postUrl ?? '',
+    postUrl: `${DOMAIN_URL}${routes.post({ postId: data?.postId ?? '' })}`,
     processes: processes.sort((processA, processB) => processA.orderIndex - processB.orderIndex),
     processList,
     error,
diff --git a/frontend/src/hooks/useSignIn/index.tsx b/frontend/src/hooks/useSignIn/index.tsx
index 2fb567ff8..f0bd49904 100644
--- a/frontend/src/hooks/useSignIn/index.tsx
+++ b/frontend/src/hooks/useSignIn/index.tsx
@@ -1,14 +1,18 @@
 import authApi from '@api/domain/auth';
+import useClubId from '@hooks/service/useClubId';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
+import { routes } from '@router/path';
 
 export default function useSignIn() {
   const navigate = useNavigate();
+  const { saveClubId } = useClubId();
 
   const signInMutate = useMutation({
     mutationFn: ({ email, password }: { email: string; password: string }) => authApi.login({ email, password }),
     onSuccess: ({ clubId }) => {
-      navigate(`/dashboard/${clubId}/posts`);
+      saveClubId(clubId);
+      navigate(routes.dashboard.list());
     },
   });
 
diff --git a/frontend/src/hooks/useSignOut/index.ts b/frontend/src/hooks/useSignOut/index.ts
index 8ccb37e46..364c8ec13 100644
--- a/frontend/src/hooks/useSignOut/index.ts
+++ b/frontend/src/hooks/useSignOut/index.ts
@@ -1,14 +1,18 @@
 import authApi from '@api/domain/auth';
+import useClubId from '@hooks/service/useClubId';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
+import { routes } from '@router/path';
 
 export default function useSignOut() {
   const navigate = useNavigate();
+  const { clearClubId } = useClubId();
 
   return useMutation({
     mutationFn: () => authApi.logout(),
     onSuccess: () => {
-      navigate('/sign-in');
+      clearClubId();
+      navigate(routes.signIn());
     },
   });
 }
diff --git a/frontend/src/mocks/dashboardList.json b/frontend/src/mocks/dashboardList.json
index a558df315..e35ddcbe1 100644
--- a/frontend/src/mocks/dashboardList.json
+++ b/frontend/src/mocks/dashboardList.json
@@ -3,6 +3,7 @@
   "dashboards": [
     {
       "dashboardId": "1",
+      "postId": "1",
       "title": "우아한테크코스 프론트엔드 크루 모집",
       "stats": {
         "accept": 3,
@@ -10,12 +11,12 @@
         "inProgress": 9,
         "total": 15
       },
-      "postUrl": "www.cruru.kr/123543920/recruit",
       "startDate": "1900-01-21T00:00:00",
       "endDate": "2024-09-24T18:00:00"
     },
     {
       "dashboardId": "2",
+      "postId": "2",
       "title": "백엔드 7기 모집",
       "stats": {
         "accept": 3,
@@ -23,12 +24,12 @@
         "inProgress": 9,
         "total": 15
       },
-      "postUrl": "www.cruru.kr/98765101/recruit",
       "startDate": "2024-12-21T00:00:00",
       "endDate": "2024-12-24T20:30:00"
     },
     {
       "dashboardId": "3",
+      "postId": "3",
       "title": "안드로이드 7기 모집",
       "stats": {
         "accept": 3,
@@ -36,7 +37,6 @@
         "inProgress": 9,
         "total": 15
       },
-      "postUrl": "www.cruru.kr/7777890/recruit",
       "startDate": "1900-01-21T00:00:00",
       "endDate": "2024-07-24T21:00:00"
     }
diff --git a/frontend/src/mocks/handlers/dashboardHandlers.ts b/frontend/src/mocks/handlers/dashboardHandlers.ts
index 883891052..2764a81b9 100644
--- a/frontend/src/mocks/handlers/dashboardHandlers.ts
+++ b/frontend/src/mocks/handlers/dashboardHandlers.ts
@@ -7,7 +7,7 @@ import DASHBOARD_LIST from '../dashboardList.json';
 const dashboardHandlers = [
   http.post(DASHBOARDS, async ({ request }) => {
     const url = new URL(request.url);
-    const clubId = url.searchParams.get('dashboardId');
+    const clubId = url.searchParams.get('clubId');
     const body = (await request.json()) as DashboardFormInfo;
 
     if (!body.startDate || !body.endDate || !body.postingContent || !body.title || clubId) {
@@ -19,7 +19,7 @@ const dashboardHandlers = [
 
     const responseBody = JSON.stringify({
       postId: 1,
-      postUrl: 'www.hihi.hjihihiaeraewraeraewraew.com',
+      dashboardId: 1,
     });
 
     return new Response(responseBody, {
diff --git a/frontend/src/mocks/processMockData.json b/frontend/src/mocks/processMockData.json
index 97b7bd796..adc87e8ce 100644
--- a/frontend/src/mocks/processMockData.json
+++ b/frontend/src/mocks/processMockData.json
@@ -1,6 +1,6 @@
 {
   "title": "우아한테크코스 프론트엔드 크루 모집",
-  "postUrl": "www.cruru.kr/post/1",
+  "postId": "1",
   "processes": [
     {
       "processId": 1,
diff --git a/frontend/src/pages/ConfirmApply/index.tsx b/frontend/src/pages/ConfirmApply/index.tsx
index 89da2b45b..60f006825 100644
--- a/frontend/src/pages/ConfirmApply/index.tsx
+++ b/frontend/src/pages/ConfirmApply/index.tsx
@@ -3,17 +3,18 @@ import Button from '@components/common/Button';
 
 import { LuCheckCircle } from 'react-icons/lu';
 
+import { routes } from '@router/path';
 import S from './style';
 
 export default function ConfirmApply() {
   const location = useLocation();
   const state = location.state as { title: string };
 
-  const { postId } = useParams<{ postId: string }>();
+  const { postId } = useParams() as { postId: string };
 
   const navigate = useNavigate();
   const navigateToPost = () => {
-    navigate(`/post/${postId}`);
+    navigate(routes.post({ postId }));
   };
 
   if (!state) {
diff --git a/frontend/src/pages/DashBoardList/index.tsx b/frontend/src/pages/DashBoardList/index.tsx
index b13282193..fd01e14af 100644
--- a/frontend/src/pages/DashBoardList/index.tsx
+++ b/frontend/src/pages/DashBoardList/index.tsx
@@ -1,15 +1,15 @@
 import RecruitmentCard from '@components/recruitment/RecruitmentCard';
-import { useNavigate, useParams } from 'react-router-dom';
 import useGetDashboards from '@hooks/useGetDashboards';
+import { useNavigate } from 'react-router-dom';
+import { routes } from '@router/path';
 import S from './style';
 
 export default function DashboardList() {
-  const { dashboardId } = useParams() as { dashboardId: string };
-  const { data } = useGetDashboards({ dashboardId });
+  const { data } = useGetDashboards();
   const navigate = useNavigate();
 
-  const handleCardClick = (postId: number) => {
-    navigate(`/dashboard/${dashboardId}/${postId}`);
+  const handleCardClick = (dashboardId: string, postId: string) => {
+    navigate(routes.dashboard.post({ dashboardId, postId }));
   };
 
   return (
@@ -18,17 +18,16 @@ export default function DashboardList() {
       <S.CardGrid>
         {data?.dashboards.map((dashboard) => (
           <RecruitmentCard
-            key={dashboard.dashboardId}
-            // TODO: dashboardId -> postId로 변경
-            dashboardId={Number(dashboard.dashboardId)}
+            key={`${dashboard.dashboardId}-${dashboard.postId}`}
+            dashboardId={dashboard.dashboardId}
             title={dashboard.title}
             postStats={dashboard.stats}
             startDate={dashboard.startDate}
             endDate={dashboard.endDate}
-            onClick={handleCardClick}
+            onClick={() => handleCardClick(dashboard.dashboardId, dashboard.postId)}
           />
         ))}
-        <S.AddCard onClick={() => navigate(`/dashboard/${dashboardId}/create`)}>
+        <S.AddCard onClick={() => navigate(routes.dashboard.create())}>
           <div>+</div>
           <span>새 공고 추가</span>
         </S.AddCard>
diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx
index 286029d47..520329b8a 100644
--- a/frontend/src/pages/Dashboard/index.tsx
+++ b/frontend/src/pages/Dashboard/index.tsx
@@ -38,10 +38,10 @@ export default function Dashboard() {
 
         <S.CopyWrapper>
           <OpenInNewTab
-            url={`https://${postUrl}`}
+            url={postUrl}
             title="공고로 이동"
           />
-          <CopyToClipboard url={`https://${postUrl}`} />
+          <CopyToClipboard url={postUrl} />
         </S.CopyWrapper>
       </S.Header>
 
diff --git a/frontend/src/pages/DashboardCreate/index.tsx b/frontend/src/pages/DashboardCreate/index.tsx
index 10db8cd4f..2e5a5eee9 100644
--- a/frontend/src/pages/DashboardCreate/index.tsx
+++ b/frontend/src/pages/DashboardCreate/index.tsx
@@ -1,10 +1,8 @@
-import RecruitmentSidebar from '@components/recruitment/RecruitmentSidebar';
-import useDashboardCreateForm from '@hooks/useDashboardCreateForm';
-import Recruitment from '@components/dashboard/DashboardCreate/Recruitment';
 import Apply from '@components/dashboard/DashboardCreate/Apply';
 import Finish from '@components/dashboard/DashboardCreate/Finish';
-
-import { useParams } from 'react-router-dom';
+import Recruitment from '@components/dashboard/DashboardCreate/Recruitment';
+import RecruitmentSidebar from '@components/recruitment/RecruitmentSidebar';
+import useDashboardCreateForm from '@hooks/useDashboardCreateForm';
 
 import S from './style';
 
@@ -30,8 +28,6 @@ export default function DashboardCreate() {
     finishResJson,
   } = useDashboardCreateForm();
 
-  const { dashboardId } = useParams() as { dashboardId: string };
-
   const isRecruitmentStep = stepState === 'recruitmentForm';
   const isApplyStep = stepState === 'applyForm';
   const isFinish = stepState === 'finished';
@@ -67,14 +63,14 @@ export default function DashboardCreate() {
             setQuestionNext={setQuestionNext}
             deleteQuestion={deleteQuestion}
             prevStep={prevStep}
-            nextStep={() => nextStep(dashboardId)}
+            nextStep={nextStep}
           />
         )}
 
         {finishResJson && (
           <Finish
             postId={finishResJson.postId}
-            postUrl={finishResJson.postUrl}
+            dashboardId={finishResJson.dashboardId}
           />
         )}
       </S.MainContainer>
diff --git a/frontend/src/pages/DashboardLayout/index.tsx b/frontend/src/pages/DashboardLayout/index.tsx
index 06fe91029..4c8ef949c 100644
--- a/frontend/src/pages/DashboardLayout/index.tsx
+++ b/frontend/src/pages/DashboardLayout/index.tsx
@@ -1,19 +1,20 @@
-import useGetDashboards from '@hooks/useGetDashboards';
 import DashboardSidebar from '@components/dashboard/DashboardSidebar';
+import useGetDashboards from '@hooks/useGetDashboards';
 import { Outlet, useParams } from 'react-router-dom';
 import S from './style';
 
 export default function DashboardLayout() {
-  const { dashboardId, postId } = useParams() as { dashboardId: string; postId: string };
-  const { data, isLoading } = useGetDashboards({ dashboardId });
+  const { postId: currentPostId } = useParams();
+  const { data, isLoading } = useGetDashboards();
 
   if (isLoading) return <div>Loading...</div>;
   if (!data) return <div>something wrong</div>;
 
-  const titleList = data.dashboards.map(({ title, dashboardId: postId2 }) => ({
+  const titleList = data.dashboards.map(({ title, dashboardId, postId }) => ({
     text: title,
-    isSelected: !!postId && postId === postId2,
-    postId: Number(postId2),
+    isSelected: !!currentPostId && currentPostId === postId,
+    postId,
+    dashboardId,
   }));
 
   return (
diff --git a/frontend/src/pages/ErrorPage/index.tsx b/frontend/src/pages/ErrorPage/index.tsx
index dc0605def..2cb8a8667 100644
--- a/frontend/src/pages/ErrorPage/index.tsx
+++ b/frontend/src/pages/ErrorPage/index.tsx
@@ -2,6 +2,8 @@ import ApiError from '@api/ApiError';
 import Button from '@components/common/Button';
 import { ButtonColor } from '@components/common/Button/style';
 import { isRouteErrorResponse, useNavigate, useRouteError } from 'react-router-dom';
+import { routes } from '@router/path';
+import useClubId from '@hooks/service/useClubId';
 import S from './style';
 
 interface ButtonConfig {
@@ -24,12 +26,12 @@ const ErrorMessages: Record<number | string, ErrorMessageConfig> = {
     buttons: [
       {
         label: '로그인',
-        to: '/sign-in',
+        to: routes.signIn(),
         color: 'primary',
       },
       {
         label: '회원가입',
-        to: '/sign-up',
+        to: routes.signUp(),
         color: 'white',
       },
     ],
@@ -103,6 +105,7 @@ function renderButtons(buttons: ButtonConfig[], navigate: ReturnType<typeof useN
 export default function ErrorPage() {
   const error = useRouteError();
   const navigate = useNavigate();
+  const { clearClubId } = useClubId();
 
   let status;
 
@@ -110,6 +113,9 @@ export default function ErrorPage() {
     status = error.status;
   } else if (error instanceof ApiError) {
     status = error.statusCode;
+    if (status === 401) {
+      clearClubId();
+    }
   }
 
   const { title, description, buttons } = ErrorMessages[status ?? 'default'] || ErrorMessages.default;
diff --git a/frontend/src/pages/Landing/index.tsx b/frontend/src/pages/Landing/index.tsx
index b183a05cb..4a7a5749f 100644
--- a/frontend/src/pages/Landing/index.tsx
+++ b/frontend/src/pages/Landing/index.tsx
@@ -1,13 +1,14 @@
 import { useNavigate } from 'react-router-dom';
 import Logo from '@assets/images/logo.svg';
 import { useEffect } from 'react';
+import { routes } from '@router/path';
 import S from './style';
 
 export default function Landing() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    setTimeout(() => navigate('/sign-in'), 2000);
+    setTimeout(() => navigate(routes.signIn()), 2000);
   }, [navigate]);
 
   return (
diff --git a/frontend/src/router/AppRouter.tsx b/frontend/src/router/AppRouter.tsx
index 5e0c75290..a438f937c 100644
--- a/frontend/src/router/AppRouter.tsx
+++ b/frontend/src/router/AppRouter.tsx
@@ -14,11 +14,12 @@ import Landing from '@pages/Landing';
 import { useToast } from '@contexts/ToastContext';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from '../App';
+import { PATH } from './path';
 
 const router = createBrowserRouter(
   [
     {
-      path: '/',
+      path: PATH.home,
       element: <App />,
       errorElement: <ErrorPage />,
       children: [
@@ -27,37 +28,37 @@ const router = createBrowserRouter(
           element: <Landing />,
         },
         {
-          path: '/sign-in',
+          path: PATH.signIn,
           element: <SignIn />,
         },
         {
-          path: '/sign-up',
+          path: PATH.signUp,
           element: <SignUp />,
         },
         {
-          path: 'post/:postId',
+          path: PATH.post,
           element: <RecruitmentPost />,
         },
         {
-          path: 'post/:postId/confirm',
+          path: PATH.confirmApply,
           element: <ConfirmApply />,
         },
         {
-          path: 'dashboard/:dashboardId/',
+          path: PATH.dashboard.list,
           element: <DashboardLayout />,
           children: [
             {
-              path: ':postId',
-              element: <Dashboard />,
+              index: true,
+              element: <DashboardList />,
             },
             {
-              path: 'posts',
-              element: <DashboardList />,
+              path: `${PATH.dashboard.list}${PATH.dashboard.post}`,
+              element: <Dashboard />,
             },
           ],
         },
         {
-          path: 'dashboard/:dashboardId/create',
+          path: `${PATH.dashboard.list}${PATH.dashboard.create}`,
           element: <DashboardCreate />,
         },
       ],
diff --git a/frontend/src/router/path.ts b/frontend/src/router/path.ts
new file mode 100644
index 000000000..0ae043968
--- /dev/null
+++ b/frontend/src/router/path.ts
@@ -0,0 +1,27 @@
+import { generatePath } from 'react-router-dom';
+
+export const PATH = {
+  home: '/',
+  signIn: '/sign-in',
+  signUp: '/sign-up',
+  post: '/post/:postId',
+  confirmApply: '/post/:postId/confirm',
+  dashboard: { list: '/dashboard', create: '/create', post: '/:dashboardId/:postId' },
+};
+
+export const routes = {
+  home: () => generatePath(PATH.home),
+  signIn: () => generatePath(PATH.signIn),
+  signUp: () => generatePath(PATH.signUp),
+
+  post: ({ postId }: { postId: string }) => generatePath(PATH.post, { postId }),
+
+  confirmApply: ({ postId }: { postId: string }) => generatePath(PATH.confirmApply, { postId }),
+
+  dashboard: {
+    list: () => generatePath(PATH.dashboard.list),
+    create: () => generatePath(`${PATH.dashboard.list}${PATH.dashboard.create}`),
+    post: ({ dashboardId, postId }: { dashboardId: string; postId: string }) =>
+      generatePath(`${PATH.dashboard.list}${PATH.dashboard.post}`, { dashboardId, postId }),
+  },
+};
diff --git a/frontend/src/types/dashboard.ts b/frontend/src/types/dashboard.ts
index 1340bbd5f..165159fa2 100644
--- a/frontend/src/types/dashboard.ts
+++ b/frontend/src/types/dashboard.ts
@@ -44,9 +44,9 @@ interface Stats {
 
 interface Dashboard {
   dashboardId: string;
+  postId: string;
   title: string;
   stats: Stats;
-  postUrl: string;
   startDate: string;
   endDate: string;
 }
diff --git a/frontend/src/types/process.ts b/frontend/src/types/process.ts
index c653e19f6..e0d8b3355 100644
--- a/frontend/src/types/process.ts
+++ b/frontend/src/types/process.ts
@@ -16,7 +16,7 @@ export interface Process {
 }
 
 export interface ProcessResponse {
-  postUrl: string;
+  postId: string;
   title: string;
   processes: Process[];
 }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 67943b1c4..3d6230d4e 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -40,7 +40,8 @@
       "@customTypes/*": ["src/types/*"],
       "@utils/*": ["src/utils/*"],
       "@mocks/*": ["src/mocks/*"],
-      "@domain/*": ["src/domain/*"]
+      "@domain/*": ["src/domain/*"],
+      "@router/*": ["src/router/*"]
     }
   },
   "include": ["src/**/*", "setupTests.ts", ".storybook/*"]
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 890f6227d..8d441a373 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -48,6 +48,7 @@ module.exports = {
       '@utils': path.resolve(__dirname, 'src/utils/'),
       '@mocks': path.resolve(__dirname, 'src/mocks/'),
       '@domain': path.resolve(__dirname, 'src/domain/'),
+      '@router': path.resolve(__dirname, 'src/router/'),
     },
   },
 

From 8f0d0036dc58ecc1ed39741bd2f9685e13c0274c Mon Sep 17 00:00:00 2001
From: Kim Da Eun <midekuna@gmail.com>
Date: Mon, 9 Sep 2024 20:02:32 +0900
Subject: [PATCH 3/6] =?UTF-8?q?refactor:=20postId=20->=20applyFormId?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

백엔드와 용어 통일
---
 frontend/src/api/domain/apply/apply.ts        | 16 +++++++++------
 frontend/src/api/domain/dashboard.ts          |  2 +-
 .../appModal/ApplicantBaseInfo/index.tsx      |  8 ++++----
 .../ApplyManagement.stories.tsx               |  4 ++--
 .../src/components/applyManagement/index.tsx  |  6 +++---
 .../DashboardCreate/Finish/Finish.stories.tsx |  4 ++--
 .../DashboardCreate/Finish/index.tsx          |  8 ++++----
 .../DashboardSidebar.stories.tsx              | 10 +++++-----
 .../dashboard/DashboardSidebar/index.tsx      |  6 +++---
 .../ProcessColumn/ProcessColumn.stories.tsx   |  4 ++--
 .../dashboard/ProcessColumn/index.tsx         |  4 ++--
 .../postManagement/PostManageBoard/index.tsx  |  6 +++---
 .../ProcessAddButton.stories.tsx              |  2 +-
 .../ProcessAddButton/index.tsx                |  6 +++---
 .../ProcessAddForm/ProcessAddForm.stories.tsx |  2 +-
 .../ProcessAddForm/index.tsx                  |  8 ++++----
 .../ProcessManageBoard/index.tsx              |  8 ++++----
 .../ProcessModifyForm.stories.tsx             |  2 +-
 .../ProcessModifyForm/index.tsx               |  8 ++++----
 .../recruitmentPost/ApplyForm/index.tsx       |  6 +++---
 .../RecruitmentPostTab/index.tsx              |  6 +++---
 frontend/src/hooks/apply.ts                   | 20 +++++++++----------
 frontend/src/hooks/process.ts                 | 14 ++++++-------
 frontend/src/hooks/useApplicant/index.ts      |  4 ++--
 .../src/hooks/useApplyManagement/index.tsx    | 10 +++++-----
 .../hooks/useDashboardCreateForm/index.tsx    |  2 +-
 .../src/hooks/useEvaluationMutation/index.ts  |  4 ++--
 frontend/src/hooks/usePostManagement/index.ts | 10 +++++-----
 frontend/src/hooks/useProcess/index.ts        |  8 ++++----
 .../src/hooks/useProcess/useProcess.test.tsx  |  2 +-
 .../src/hooks/useSpecificApplicant/index.ts   |  8 ++++----
 frontend/src/mocks/dashboardList.json         |  6 +++---
 frontend/src/mocks/handlers/applyHandlers.ts  | 18 ++++++++---------
 .../src/mocks/handlers/dashboardHandlers.ts   |  2 +-
 frontend/src/mocks/processMockData.json       |  2 +-
 frontend/src/pages/ConfirmApply/index.tsx     |  4 ++--
 frontend/src/pages/DashBoardList/index.tsx    |  8 ++++----
 frontend/src/pages/Dashboard/index.tsx        |  8 ++++----
 frontend/src/pages/DashboardCreate/index.tsx  |  2 +-
 frontend/src/pages/DashboardLayout/index.tsx  |  8 ++++----
 frontend/src/pages/RecruitmentPost/index.tsx  |  4 ++--
 frontend/src/pages/SignIn/index.tsx           |  6 ++++--
 frontend/src/router/path.ts                   | 14 ++++++-------
 frontend/src/types/dashboard.ts               |  2 +-
 frontend/src/types/process.ts                 |  2 +-
 45 files changed, 150 insertions(+), 144 deletions(-)

diff --git a/frontend/src/api/domain/apply/apply.ts b/frontend/src/api/domain/apply/apply.ts
index 361b55e37..60c4fa171 100644
--- a/frontend/src/api/domain/apply/apply.ts
+++ b/frontend/src/api/domain/apply/apply.ts
@@ -7,9 +7,13 @@ import APIClient from '../../APIClient';
 const apiClient = new APIClient(APPLY);
 
 const applyApis = {
-  get: async ({ postId }: { postId: string }): Promise<{ recruitmentPost: RecruitmentPost; applyForm: ApplyForm }> => {
+  get: async ({
+    applyFormId,
+  }: {
+    applyFormId: string;
+  }): Promise<{ recruitmentPost: RecruitmentPost; applyForm: ApplyForm }> => {
     const data = await apiClient.get<any>({
-      path: `/${postId}`,
+      path: `/${applyFormId}`,
     });
 
     const recruitmentPost = dtoToRecruitmentPost(data);
@@ -18,15 +22,15 @@ const applyApis = {
     return { recruitmentPost, applyForm };
   },
 
-  apply: async ({ postId, body }: { postId: string; body: ApplyRequestBody }) =>
+  apply: async ({ applyFormId, body }: { applyFormId: string; body: ApplyRequestBody }) =>
     apiClient.post({
-      path: `/${postId}/submit`,
+      path: `/${applyFormId}/submit`,
       body,
     }),
 
-  modify: async ({ postId, body }: { postId: string; body: RecruitmentPost }) =>
+  modify: async ({ applyFormId, body }: { applyFormId: string; body: RecruitmentPost }) =>
     apiClient.patch({
-      path: `/${postId}`,
+      path: `/${applyFormId}`,
       body,
     }),
 };
diff --git a/frontend/src/api/domain/dashboard.ts b/frontend/src/api/domain/dashboard.ts
index bc0f38a67..9c93aabf2 100644
--- a/frontend/src/api/domain/dashboard.ts
+++ b/frontend/src/api/domain/dashboard.ts
@@ -19,7 +19,7 @@ const dashboardApis = {
   create: async ({ clubId, dashboardFormInfo }: { clubId: string; dashboardFormInfo: DashboardFormInfo }) =>
     apiClient.post<{
       dashboardId: string;
-      postId: string;
+      applyFormId: string;
     }>({
       path: `?${convertParamsToQueryString({ clubId })}`,
       body: dashboardFormInfo,
diff --git a/frontend/src/components/appModal/ApplicantBaseInfo/index.tsx b/frontend/src/components/appModal/ApplicantBaseInfo/index.tsx
index 6949ab0e3..7e5c2f1ad 100644
--- a/frontend/src/components/appModal/ApplicantBaseInfo/index.tsx
+++ b/frontend/src/components/appModal/ApplicantBaseInfo/index.tsx
@@ -14,11 +14,11 @@ interface ApplicantBaseInfoProps {
 }
 
 export default function ApplicantBaseInfo({ applicantId }: ApplicantBaseInfoProps) {
-  const { dashboardId, postId } = useParams() as { dashboardId: string; postId: string };
+  const { dashboardId, applyFormId } = useParams() as { dashboardId: string; applyFormId: string };
   const { mutate: moveApplicantProcess } = useApplicant({ applicantId });
-  const { mutate: rejectMutate } = specificApplicant.useRejectApplicant({ dashboardId, postId });
-  const { mutate: unrejectMutate } = specificApplicant.useUnrejectApplicant({ dashboardId, postId });
-  const { processList, isLoading: isProcessLoading } = useProcess({ dashboardId, postId });
+  const { mutate: rejectMutate } = specificApplicant.useRejectApplicant({ dashboardId, applyFormId });
+  const { mutate: unrejectMutate } = specificApplicant.useUnrejectApplicant({ dashboardId, applyFormId });
+  const { processList, isLoading: isProcessLoading } = useProcess({ dashboardId, applyFormId });
   const { data: applicantBaseInfo, isLoading: isBaseInfoLoading } = specificApplicant.useGetBaseInfo({ applicantId });
 
   const { close } = useModal();
diff --git a/frontend/src/components/applyManagement/ApplyManagement.stories.tsx b/frontend/src/components/applyManagement/ApplyManagement.stories.tsx
index 82171421d..3fa760117 100644
--- a/frontend/src/components/applyManagement/ApplyManagement.stories.tsx
+++ b/frontend/src/components/applyManagement/ApplyManagement.stories.tsx
@@ -15,9 +15,9 @@ const meta: Meta<typeof ApplyManagement> = {
     },
     reactRouter: reactRouterParameters({
       location: {
-        pathParams: { postId: '1' },
+        pathParams: { applyFormId: '1' },
       },
-      routing: { path: '/postId/:postId' },
+      routing: { path: '/applyFormId/:applyFormId' },
     }),
   },
   tags: ['autodocs'],
diff --git a/frontend/src/components/applyManagement/index.tsx b/frontend/src/components/applyManagement/index.tsx
index a7a4110b4..b554d2cd6 100644
--- a/frontend/src/components/applyManagement/index.tsx
+++ b/frontend/src/components/applyManagement/index.tsx
@@ -11,8 +11,8 @@ import S from './style';
 
 export default function ApplyManagement({ isVisible }: { isVisible: boolean }) {
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const { postId } = useParams<{ postId: string }>() as {
-    postId: string;
+  const { applyFormId } = useParams<{ applyFormId: string }>() as {
+    applyFormId: string;
   };
 
   const {
@@ -27,7 +27,7 @@ export default function ApplyManagement({ isVisible }: { isVisible: boolean }) {
     setQuestionPrev,
     setQuestionNext,
     deleteQuestion,
-  } = useApplyManagement({ postId });
+  } = useApplyManagement({ applyFormId });
 
   useEffect(() => {
     if (isVisible && wrapperRef.current && !isLoading) {
diff --git a/frontend/src/components/dashboard/DashboardCreate/Finish/Finish.stories.tsx b/frontend/src/components/dashboard/DashboardCreate/Finish/Finish.stories.tsx
index c92709a8f..8dfbeff73 100644
--- a/frontend/src/components/dashboard/DashboardCreate/Finish/Finish.stories.tsx
+++ b/frontend/src/components/dashboard/DashboardCreate/Finish/Finish.stories.tsx
@@ -30,7 +30,7 @@ const meta: Meta<typeof Finish> = {
         type: { summary: 'string' },
       },
     },
-    postId: {
+    applyFormId: {
       description: '게시된 공고의 ID입니다.',
       control: { type: 'text' },
       table: {
@@ -46,6 +46,6 @@ type Story = StoryObj<typeof Finish>;
 export const Template: Story = {
   args: {
     dashboardId: '1',
-    postId: '1',
+    applyFormId: '1',
   },
 };
diff --git a/frontend/src/components/dashboard/DashboardCreate/Finish/index.tsx b/frontend/src/components/dashboard/DashboardCreate/Finish/index.tsx
index 2c7057b6e..958903918 100644
--- a/frontend/src/components/dashboard/DashboardCreate/Finish/index.tsx
+++ b/frontend/src/components/dashboard/DashboardCreate/Finish/index.tsx
@@ -8,21 +8,21 @@ import S from './style';
 
 interface FinishProps {
   dashboardId: string;
-  postId: string;
+  applyFormId: string;
 }
 
-export default function Finish({ dashboardId, postId }: FinishProps) {
+export default function Finish({ dashboardId, applyFormId }: FinishProps) {
   const navigate = useNavigate();
 
   const handleClickButton = () => {
-    navigate(routes.dashboard.post({ dashboardId, postId }));
+    navigate(routes.dashboard.post({ dashboardId, applyFormId }));
   };
 
   return (
     <S.Container>
       <S.Icon>🎉</S.Icon>
       <S.Message>공고가 게시됐어요!</S.Message>
-      <SharePost url={`${DOMAIN_URL}${routes.post({ postId })}`} />
+      <SharePost url={`${DOMAIN_URL}${routes.post({ applyFormId })}`} />
       <Button
         size="sm"
         color="white"
diff --git a/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx b/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx
index 4fb31b1cc..75b2b1b88 100644
--- a/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx
+++ b/frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx
@@ -25,13 +25,13 @@ const meta: Meta<typeof DashboardSidebar> = {
         text: '첫번째 옵션',
         isSelected: true,
         dashboardId: '1',
-        postId: '10',
+        applyFormId: '10',
       },
       {
         text: '두번째 옵션',
         isSelected: false,
         dashboardId: '2',
-        postId: '11',
+        applyFormId: '11',
       },
     ],
   },
@@ -61,9 +61,9 @@ type Story = StoryObj<typeof DashboardSidebar>;
 export const Default: Story = {
   args: {
     options: [
-      { text: '우아한테크코스 6기 프론트엔드', isSelected: true, dashboardId: '1', postId: '10' },
-      { text: '우아한테크코스 6기 백엔드', isSelected: false, dashboardId: '2', postId: '11' },
-      { text: '우아한테크코스 6기 안드로이드', isSelected: false, dashboardId: '3', postId: '12' },
+      { text: '우아한테크코스 6기 프론트엔드', isSelected: true, dashboardId: '1', applyFormId: '10' },
+      { text: '우아한테크코스 6기 백엔드', isSelected: false, dashboardId: '2', applyFormId: '11' },
+      { text: '우아한테크코스 6기 안드로이드', isSelected: false, dashboardId: '3', applyFormId: '12' },
     ],
   },
 };
diff --git a/frontend/src/components/dashboard/DashboardSidebar/index.tsx b/frontend/src/components/dashboard/DashboardSidebar/index.tsx
index 2188c1a28..bf721bdce 100644
--- a/frontend/src/components/dashboard/DashboardSidebar/index.tsx
+++ b/frontend/src/components/dashboard/DashboardSidebar/index.tsx
@@ -8,7 +8,7 @@ import S from './style';
 interface Option {
   text: string;
   isSelected: boolean;
-  postId: string;
+  applyFormId: string;
   dashboardId: string;
 }
 
@@ -28,11 +28,11 @@ export default function DashboardSidebar({ options }: DashboardSidebarProps) {
 
       <S.Contents>
         <Accordion title={<Link to={routes.dashboard.list()}>공고</Link>}>
-          {options.map(({ text, isSelected, postId, dashboardId }, index) => (
+          {options.map(({ text, isSelected, applyFormId, dashboardId }, index) => (
             // eslint-disable-next-line react/no-array-index-key
             <Accordion.ListItem key={index}>
               <S.LinkContainer isSelected={isSelected}>
-                <Link to={routes.dashboard.post({ dashboardId, postId })}>{text}</Link>
+                <Link to={routes.dashboard.post({ dashboardId, applyFormId })}>{text}</Link>
               </S.LinkContainer>
             </Accordion.ListItem>
           ))}
diff --git a/frontend/src/components/dashboard/ProcessColumn/ProcessColumn.stories.tsx b/frontend/src/components/dashboard/ProcessColumn/ProcessColumn.stories.tsx
index a635af929..eb99147e2 100644
--- a/frontend/src/components/dashboard/ProcessColumn/ProcessColumn.stories.tsx
+++ b/frontend/src/components/dashboard/ProcessColumn/ProcessColumn.stories.tsx
@@ -16,9 +16,9 @@ const meta: Meta<typeof ProcessColumn> = {
     },
     reactRouter: reactRouterParameters({
       location: {
-        pathParams: { dashboardId: '1', postId: '1' },
+        pathParams: { dashboardId: '1', applyFormId: '1' },
       },
-      routing: { path: '/dashboard/:dashboardId/post/:postId' },
+      routing: { path: '/dashboard/:dashboardId/post/:applyFormId' },
     }),
   },
   tags: ['autodocs'],
diff --git a/frontend/src/components/dashboard/ProcessColumn/index.tsx b/frontend/src/components/dashboard/ProcessColumn/index.tsx
index dd119ac2c..ead11fd8b 100644
--- a/frontend/src/components/dashboard/ProcessColumn/index.tsx
+++ b/frontend/src/components/dashboard/ProcessColumn/index.tsx
@@ -17,8 +17,8 @@ interface ProcessColumnProps {
 }
 
 export default function ProcessColumn({ process, showRejectedApplicant }: ProcessColumnProps) {
-  const { dashboardId, postId } = useParams() as { dashboardId: string; postId: string };
-  const { processList } = useProcess({ dashboardId, postId });
+  const { dashboardId, applyFormId } = useParams() as { dashboardId: string; applyFormId: string };
+  const { processList } = useProcess({ dashboardId, applyFormId });
   const { mutate: moveApplicantProcess } = useApplicant({});
 
   const { setApplicantId } = useSpecificApplicantId();
diff --git a/frontend/src/components/postManagement/PostManageBoard/index.tsx b/frontend/src/components/postManagement/PostManageBoard/index.tsx
index b21fbb143..f3f08f151 100644
--- a/frontend/src/components/postManagement/PostManageBoard/index.tsx
+++ b/frontend/src/components/postManagement/PostManageBoard/index.tsx
@@ -15,14 +15,14 @@ import Button from '@components/common/Button';
 import S from './style';
 
 interface PostManageBoardProps {
-  postId: string;
+  applyFormId: string;
 }
 
-export default function PostManageBoard({ postId }: PostManageBoardProps) {
+export default function PostManageBoard({ applyFormId }: PostManageBoardProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const quillRef = useRef<ReactQuill | null>(null);
 
-  const { isLoading, postState, setPostState, modifyPostMutator } = usePostManagement({ postId });
+  const { isLoading, postState, setPostState, modifyPostMutator } = usePostManagement({ applyFormId });
   const todayText = new Date().toISOString().split('T')[0];
   const startDateText = postState ? formatDate(postState.startDate) : '';
   const endDateText = postState ? formatDate(postState.endDate) : '';
diff --git a/frontend/src/components/processManagement/ProcessAddButton/ProcessAddButton.stories.tsx b/frontend/src/components/processManagement/ProcessAddButton/ProcessAddButton.stories.tsx
index 89a363104..1fe51c0c0 100644
--- a/frontend/src/components/processManagement/ProcessAddButton/ProcessAddButton.stories.tsx
+++ b/frontend/src/components/processManagement/ProcessAddButton/ProcessAddButton.stories.tsx
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     dashboardId: '1',
-    postId: '1',
+    applyFormId: '1',
     priorOrderIndex: 0,
   },
 };
diff --git a/frontend/src/components/processManagement/ProcessAddButton/index.tsx b/frontend/src/components/processManagement/ProcessAddButton/index.tsx
index afd6d99d6..9d5ca14c6 100644
--- a/frontend/src/components/processManagement/ProcessAddButton/index.tsx
+++ b/frontend/src/components/processManagement/ProcessAddButton/index.tsx
@@ -9,11 +9,11 @@ import S from './style';
 
 interface ProcessAddButtonProps {
   dashboardId: string;
-  postId: string;
+  applyFormId: string;
   priorOrderIndex: number;
 }
 
-export default function ProcessAddButton({ dashboardId, postId, priorOrderIndex }: ProcessAddButtonProps) {
+export default function ProcessAddButton({ dashboardId, applyFormId, priorOrderIndex }: ProcessAddButtonProps) {
   const [isToggled, setIsToggled] = useState(false);
 
   const toggleProcessAddForm = () => {
@@ -25,7 +25,7 @@ export default function ProcessAddButton({ dashboardId, postId, priorOrderIndex
       {isToggled ? (
         <ProcessAddForm
           dashboardId={dashboardId}
-          postId={postId}
+          applyFormId={applyFormId}
           priorOrderIndex={priorOrderIndex}
           toggleForm={toggleProcessAddForm}
         />
diff --git a/frontend/src/components/processManagement/ProcessAddForm/ProcessAddForm.stories.tsx b/frontend/src/components/processManagement/ProcessAddForm/ProcessAddForm.stories.tsx
index 4c3d98c75..e0d6fba1d 100644
--- a/frontend/src/components/processManagement/ProcessAddForm/ProcessAddForm.stories.tsx
+++ b/frontend/src/components/processManagement/ProcessAddForm/ProcessAddForm.stories.tsx
@@ -36,7 +36,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     dashboardId: '1',
-    postId: '1',
+    applyFormId: '1',
     priorOrderIndex: 0,
     toggleForm: () => {},
   },
diff --git a/frontend/src/components/processManagement/ProcessAddForm/index.tsx b/frontend/src/components/processManagement/ProcessAddForm/index.tsx
index 3c7aafe09..d957ebbfc 100644
--- a/frontend/src/components/processManagement/ProcessAddForm/index.tsx
+++ b/frontend/src/components/processManagement/ProcessAddForm/index.tsx
@@ -13,15 +13,15 @@ import C from '../style';
 
 interface ProcessAddFormProps {
   dashboardId: string;
-  postId: string;
+  applyFormId: string;
   priorOrderIndex: number;
   toggleForm: () => void;
 }
 
-export default function ProcessAddForm({ dashboardId, postId, priorOrderIndex, toggleForm }: ProcessAddFormProps) {
+export default function ProcessAddForm({ dashboardId, applyFormId, priorOrderIndex, toggleForm }: ProcessAddFormProps) {
   const formRef = useClickOutside<HTMLFormElement>(toggleForm);
 
-  const { mutate } = processMutations.useCreateProcess({ handleSuccess: toggleForm, dashboardId, postId });
+  const { mutate } = processMutations.useCreateProcess({ handleSuccess: toggleForm, dashboardId, applyFormId });
 
   const [formState, setFormState] = useState<Pick<Process, 'name' | 'description'>>({
     name: '',
@@ -44,7 +44,7 @@ export default function ProcessAddForm({ dashboardId, postId, priorOrderIndex, t
     // 따라서 API로 데이터를 전송할 때, dashboardId 필드에는 Number로 변환된 postId를 보내야 합니다.
     // 2024-08-12 by 아르
     mutate({
-      dashboardId: Number(postId),
+      dashboardId: Number(applyFormId),
       orderIndex: priorOrderIndex + 1,
       ...formState,
     });
diff --git a/frontend/src/components/processManagement/ProcessManageBoard/index.tsx b/frontend/src/components/processManagement/ProcessManageBoard/index.tsx
index 78bf48e3b..f115faf04 100644
--- a/frontend/src/components/processManagement/ProcessManageBoard/index.tsx
+++ b/frontend/src/components/processManagement/ProcessManageBoard/index.tsx
@@ -6,11 +6,11 @@ import ProcessAddButton from '../ProcessAddButton';
 
 interface ProcessManageBoardProps {
   dashboardId: string;
-  postId: string;
+  applyFormId: string;
   processes: Process[];
 }
 
-export default function ProcessManageBoard({ dashboardId, postId, processes }: ProcessManageBoardProps) {
+export default function ProcessManageBoard({ dashboardId, applyFormId, processes }: ProcessManageBoardProps) {
   const FIRST_INDEX = 0;
   const LAST_INDEX = processes.length - 1;
   const isAddable = processes.length < 5;
@@ -21,7 +21,7 @@ export default function ProcessManageBoard({ dashboardId, postId, processes }: P
         <Fragment key={process.processId}>
           <ProcessModifyForm
             dashboardId={dashboardId}
-            postId={postId}
+            applyFormId={applyFormId}
             process={process}
             isDeletable={index !== FIRST_INDEX && index !== LAST_INDEX}
           />
@@ -29,7 +29,7 @@ export default function ProcessManageBoard({ dashboardId, postId, processes }: P
           {isAddable && index !== LAST_INDEX && (
             <ProcessAddButton
               dashboardId={dashboardId}
-              postId={postId}
+              applyFormId={applyFormId}
               priorOrderIndex={process.orderIndex}
             />
           )}
diff --git a/frontend/src/components/processManagement/ProcessModifyForm/ProcessModifyForm.stories.tsx b/frontend/src/components/processManagement/ProcessModifyForm/ProcessModifyForm.stories.tsx
index 363cb293a..3979dec12 100644
--- a/frontend/src/components/processManagement/ProcessModifyForm/ProcessModifyForm.stories.tsx
+++ b/frontend/src/components/processManagement/ProcessModifyForm/ProcessModifyForm.stories.tsx
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     dashboardId: '1',
-    postId: '1',
+    applyFormId: '1',
     process: {
       processId: 1,
       name: '서류 접수',
diff --git a/frontend/src/components/processManagement/ProcessModifyForm/index.tsx b/frontend/src/components/processManagement/ProcessModifyForm/index.tsx
index ce3e228b4..4dd8c766b 100644
--- a/frontend/src/components/processManagement/ProcessModifyForm/index.tsx
+++ b/frontend/src/components/processManagement/ProcessModifyForm/index.tsx
@@ -10,19 +10,19 @@ import C from '../style';
 
 interface ProcessModifyFormProps {
   dashboardId: string;
-  postId: string;
+  applyFormId: string;
   process: Process;
   isDeletable?: boolean;
 }
 
 export default function ProcessModifyForm({
   dashboardId,
-  postId,
+  applyFormId,
   process,
   isDeletable = false,
 }: ProcessModifyFormProps) {
-  const { mutate: modifyMutate } = processMutations.useModifyProcess({ dashboardId, postId });
-  const { mutate: deleteMutate } = processMutations.useDeleteProcess({ dashboardId, postId });
+  const { mutate: modifyMutate } = processMutations.useModifyProcess({ dashboardId, applyFormId });
+  const { mutate: deleteMutate } = processMutations.useDeleteProcess({ dashboardId, applyFormId });
 
   const [formState, setFormState] = useState<Pick<Process, 'name' | 'description'>>({
     name: process.name ?? '',
diff --git a/frontend/src/components/recruitmentPost/ApplyForm/index.tsx b/frontend/src/components/recruitmentPost/ApplyForm/index.tsx
index 757c78ee0..7d471e067 100644
--- a/frontend/src/components/recruitmentPost/ApplyForm/index.tsx
+++ b/frontend/src/components/recruitmentPost/ApplyForm/index.tsx
@@ -22,10 +22,10 @@ interface ApplyFormProps {
 }
 
 export default function ApplyForm({ questions, isClosed }: ApplyFormProps) {
-  const { postId } = useParams<{ postId: string }>() as { postId: string };
+  const { applyFormId } = useParams<{ applyFormId: string }>() as { applyFormId: string };
 
-  const { data: recruitmentPost } = applyQueries.useGetRecruitmentPost({ postId: postId ?? '' });
-  const { mutate: apply } = applyMutations.useApply(postId, recruitmentPost?.title ?? '');
+  const { data: recruitmentPost } = applyQueries.useGetRecruitmentPost({ applyFormId: applyFormId ?? '' });
+  const { mutate: apply } = applyMutations.useApply(applyFormId, recruitmentPost?.title ?? '');
 
   const {
     formData: applicant,
diff --git a/frontend/src/components/recruitmentPost/RecruitmentPostTab/index.tsx b/frontend/src/components/recruitmentPost/RecruitmentPostTab/index.tsx
index b21643f7f..18deb5a96 100644
--- a/frontend/src/components/recruitmentPost/RecruitmentPostTab/index.tsx
+++ b/frontend/src/components/recruitmentPost/RecruitmentPostTab/index.tsx
@@ -13,9 +13,9 @@ export type RecruitmentPostTabItems = '모집 공고' | '지원하기';
 export default function RecruitmentPostTab() {
   const { currentMenu, moveTab } = useTab<RecruitmentPostTabItems>({ defaultValue: '모집 공고' });
 
-  const { postId } = useParams<{ postId: string }>() as { postId: string };
-  const { data: questions } = applyQueries.useGetApplyForm({ postId: postId ?? '' });
-  const { data: recruitmentPost, isClosed } = applyQueries.useGetRecruitmentPost({ postId: postId ?? '' });
+  const { applyFormId } = useParams<{ applyFormId: string }>() as { applyFormId: string };
+  const { data: questions } = applyQueries.useGetApplyForm({ applyFormId: applyFormId ?? '' });
+  const { data: recruitmentPost, isClosed } = applyQueries.useGetRecruitmentPost({ applyFormId: applyFormId ?? '' });
 
   return (
     <>
diff --git a/frontend/src/hooks/apply.ts b/frontend/src/hooks/apply.ts
index 0637b983b..dd6b6f66b 100644
--- a/frontend/src/hooks/apply.ts
+++ b/frontend/src/hooks/apply.ts
@@ -6,10 +6,10 @@ import { getTimeStatus } from '@utils/compareTime';
 import { routes } from '@router/path';
 import QUERY_KEYS from './queryKeys';
 
-const useGetRecruitmentInfo = ({ postId }: { postId: string }) => {
+const useGetRecruitmentInfo = ({ applyFormId }: { applyFormId: string }) => {
   const queryObj = useQuery({
-    queryKey: [QUERY_KEYS.RECRUITMENT_INFO, postId],
-    queryFn: () => applyApis.get({ postId }),
+    queryKey: [QUERY_KEYS.RECRUITMENT_INFO, applyFormId],
+    queryFn: () => applyApis.get({ applyFormId }),
     staleTime: 1000 * 60 * 10, // 10 minutes
   });
 
@@ -17,8 +17,8 @@ const useGetRecruitmentInfo = ({ postId }: { postId: string }) => {
 };
 
 export const applyQueries = {
-  useGetRecruitmentPost: ({ postId }: { postId: string }) => {
-    const { data, ...restQueryObj } = useGetRecruitmentInfo({ postId });
+  useGetRecruitmentPost: ({ applyFormId }: { applyFormId: string }) => {
+    const { data, ...restQueryObj } = useGetRecruitmentInfo({ applyFormId });
 
     const { startDate, endDate } = data?.recruitmentPost ?? { startDate: '', endDate: '' };
     const isClosed = !getTimeStatus({ startDate, endDate }).isOngoing;
@@ -30,8 +30,8 @@ export const applyQueries = {
     };
   },
 
-  useGetApplyForm: ({ postId }: { postId: string }) => {
-    const { data, ...restQueryObj } = useGetRecruitmentInfo({ postId });
+  useGetApplyForm: ({ applyFormId }: { applyFormId: string }) => {
+    const { data, ...restQueryObj } = useGetRecruitmentInfo({ applyFormId });
 
     return {
       data: data?.applyForm.questions,
@@ -41,13 +41,13 @@ export const applyQueries = {
 };
 
 export const applyMutations = {
-  useApply: (postId: string, title: string) => {
+  useApply: (applyFormId: string, title: string) => {
     const navigate = useNavigate();
 
     return useMutation({
-      mutationFn: (params: { body: ApplyRequestBody }) => applyApis.apply({ ...params, postId }),
+      mutationFn: (params: { body: ApplyRequestBody }) => applyApis.apply({ ...params, applyFormId }),
       onSuccess: () => {
-        navigate(routes.confirmApply({ postId }), { state: { title } });
+        navigate(routes.confirmApply({ applyFormId }), { state: { title } });
       },
     });
   },
diff --git a/frontend/src/hooks/process.ts b/frontend/src/hooks/process.ts
index 0d393f537..d82e55aea 100644
--- a/frontend/src/hooks/process.ts
+++ b/frontend/src/hooks/process.ts
@@ -11,15 +11,15 @@ export const processMutations = {
   useCreateProcess: ({
     handleSuccess,
     dashboardId,
-    postId,
+    applyFormId,
   }: {
     handleSuccess: () => void;
     dashboardId: string;
-    postId: string;
+    applyFormId: string;
   }) => {
     const queryClient = useQueryClient();
     const invalidateQueries = () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, applyFormId] });
     };
 
     return useMutation({
@@ -32,10 +32,10 @@ export const processMutations = {
     });
   },
 
-  useModifyProcess: ({ dashboardId, postId }: { dashboardId: string; postId: string }) => {
+  useModifyProcess: ({ dashboardId, applyFormId }: { dashboardId: string; applyFormId: string }) => {
     const queryClient = useQueryClient();
     const invalidateQueries = () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, applyFormId] });
     };
 
     const toast = useToast();
@@ -49,10 +49,10 @@ export const processMutations = {
     });
   },
 
-  useDeleteProcess: ({ dashboardId, postId }: { dashboardId: string; postId: string }) => {
+  useDeleteProcess: ({ dashboardId, applyFormId }: { dashboardId: string; applyFormId: string }) => {
     const queryClient = useQueryClient();
     const invalidateQueries = () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, applyFormId] });
     };
 
     return useMutation({
diff --git a/frontend/src/hooks/useApplicant/index.ts b/frontend/src/hooks/useApplicant/index.ts
index 2850fed1d..7fdf55de2 100644
--- a/frontend/src/hooks/useApplicant/index.ts
+++ b/frontend/src/hooks/useApplicant/index.ts
@@ -6,7 +6,7 @@ import { useParams } from 'react-router-dom';
 
 export default function useApplicant({ applicantId }: { applicantId?: number }) {
   const queryClient = useQueryClient();
-  const { dashboardId, postId } = useParams() as { dashboardId: string; postId: string };
+  const { dashboardId, applyFormId } = useParams() as { dashboardId: string; applyFormId: string };
   const toast = useToast();
 
   return useMutation({
@@ -14,7 +14,7 @@ export default function useApplicant({ applicantId }: { applicantId?: number })
       applicantApis.move({ processId, applicants }),
     onSuccess: (_, variables) => {
       const { processId } = variables;
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, applyFormId] });
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.EVALUATION, processId, applicantId] });
       if (applicantId) {
         queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.APPLICANT, applicantId] });
diff --git a/frontend/src/hooks/useApplyManagement/index.tsx b/frontend/src/hooks/useApplyManagement/index.tsx
index 78b2fd833..e20f13248 100644
--- a/frontend/src/hooks/useApplyManagement/index.tsx
+++ b/frontend/src/hooks/useApplyManagement/index.tsx
@@ -24,7 +24,7 @@ interface UseApplyManagementReturn {
 }
 
 interface UseApplyManagementProps {
-  postId: string;
+  applyFormId: string;
 }
 
 function getQuestions(data: QuestionData[] | undefined): Question[] {
@@ -44,8 +44,8 @@ function getQuestions(data: QuestionData[] | undefined): Question[] {
     }));
 }
 
-export default function useApplyManagement({ postId }: UseApplyManagementProps): UseApplyManagementReturn {
-  const { data, isLoading } = applyQueries.useGetApplyForm({ postId: postId ?? '' });
+export default function useApplyManagement({ applyFormId }: UseApplyManagementProps): UseApplyManagementReturn {
+  const { data, isLoading } = applyQueries.useGetApplyForm({ applyFormId: applyFormId ?? '' });
   const [applyState, setApplyState] = useState(getQuestions(data));
   const [uniqueId, setUniqueId] = useState(DEFAULT_QUESTIONS.length);
   const toast = useToast();
@@ -67,7 +67,7 @@ export default function useApplyManagement({ postId }: UseApplyManagementProps):
   const modifyApplyQuestionsMutator = useMutation({
     mutationFn: () =>
       questionApis.patch({
-        applyformId: postId,
+        applyformId: applyFormId,
         questions: applyState.slice(DEFAULT_QUESTIONS.length).map((value, index) => ({
           orderIndex: index,
           type: value.type,
@@ -77,7 +77,7 @@ export default function useApplyManagement({ postId }: UseApplyManagementProps):
         })),
       }),
     onSuccess: async () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.RECRUITMENT_INFO, postId] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.RECRUITMENT_INFO, applyFormId] });
       toast.success('지원서의 사전 질문 항목 수정에 성공했습니다.');
     },
     onError: () => {
diff --git a/frontend/src/hooks/useDashboardCreateForm/index.tsx b/frontend/src/hooks/useDashboardCreateForm/index.tsx
index 8349e8d86..51c68aa82 100644
--- a/frontend/src/hooks/useDashboardCreateForm/index.tsx
+++ b/frontend/src/hooks/useDashboardCreateForm/index.tsx
@@ -7,7 +7,7 @@ import { useState } from 'react';
 
 interface FinishResJson {
   dashboardId: string;
-  postId: string;
+  applyFormId: string;
 }
 
 interface UseDashboardCreateFormReturn {
diff --git a/frontend/src/hooks/useEvaluationMutation/index.ts b/frontend/src/hooks/useEvaluationMutation/index.ts
index 9a7453dec..4b8c06f09 100644
--- a/frontend/src/hooks/useEvaluationMutation/index.ts
+++ b/frontend/src/hooks/useEvaluationMutation/index.ts
@@ -18,11 +18,11 @@ interface MutationParams {
 
 export default function useEvaluationMutation({ processId, applicantId, closeOnSuccess }: UseEvaluationMutationParams) {
   const queryClient = useQueryClient();
-  const { dashboardId, postId } = useParams() as { dashboardId: string; postId: string };
+  const { dashboardId, applyFormId } = useParams() as { dashboardId: string; applyFormId: string };
 
   const invalidateQueries = () => {
     queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.EVALUATION, processId, applicantId] });
-    queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId] });
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, applyFormId] });
   };
 
   return useMutation({
diff --git a/frontend/src/hooks/usePostManagement/index.ts b/frontend/src/hooks/usePostManagement/index.ts
index f538b1467..99a196614 100644
--- a/frontend/src/hooks/usePostManagement/index.ts
+++ b/frontend/src/hooks/usePostManagement/index.ts
@@ -9,7 +9,7 @@ import { RecruitmentPost } from '@customTypes/apply';
 import { useToast } from '@contexts/ToastContext';
 
 interface usePostManagementProps {
-  postId: string;
+  applyFormId: string;
 }
 
 const INITIAL_POST_INFO: RecruitmentInfoState = {
@@ -19,8 +19,8 @@ const INITIAL_POST_INFO: RecruitmentInfoState = {
   postingContent: '',
 };
 
-export default function usePostManagement({ postId }: usePostManagementProps) {
-  const { data: postInfo, isLoading } = applyQueries.useGetRecruitmentPost({ postId });
+export default function usePostManagement({ applyFormId }: usePostManagementProps) {
+  const { data: postInfo, isLoading } = applyQueries.useGetRecruitmentPost({ applyFormId });
   const [postState, setPostState] = useState<RecruitmentInfoState>(INITIAL_POST_INFO);
   const toast = useToast();
   const queryClient = useQueryClient();
@@ -32,9 +32,9 @@ export default function usePostManagement({ postId }: usePostManagementProps) {
   }, [isLoading, postInfo]);
 
   const modifyPostMutator = useMutation({
-    mutationFn: () => applyApis.modify({ postId, body: postState as RecruitmentPost }),
+    mutationFn: () => applyApis.modify({ applyFormId, body: postState as RecruitmentPost }),
     onSuccess: async () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.RECRUITMENT_INFO, postId] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.RECRUITMENT_INFO, applyFormId] });
       toast.success('공고의 내용 수정에 성공했습니다.');
     },
     onError: () => {
diff --git a/frontend/src/hooks/useProcess/index.ts b/frontend/src/hooks/useProcess/index.ts
index 8720bcbb3..df277d0c8 100644
--- a/frontend/src/hooks/useProcess/index.ts
+++ b/frontend/src/hooks/useProcess/index.ts
@@ -14,7 +14,7 @@ interface SimpleProcess {
 
 interface UseProcessProps {
   dashboardId: string;
-  postId: string;
+  applyFormId: string;
 }
 
 interface UseProcessReturn {
@@ -26,9 +26,9 @@ interface UseProcessReturn {
   postUrl: string;
 }
 
-export default function useProcess({ dashboardId, postId }: UseProcessProps): UseProcessReturn {
+export default function useProcess({ dashboardId, applyFormId }: UseProcessProps): UseProcessReturn {
   const { data, error, isLoading } = useQuery<ProcessResponse>({
-    queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId],
+    queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, applyFormId],
     queryFn: () => processApis.get({ dashboardId }),
   });
 
@@ -37,7 +37,7 @@ export default function useProcess({ dashboardId, postId }: UseProcessProps): Us
   const processList = processes.map((p) => ({ processName: p.name, processId: p.processId }));
   return {
     title: data?.title ?? '',
-    postUrl: `${DOMAIN_URL}${routes.post({ postId: data?.postId ?? '' })}`,
+    postUrl: `${DOMAIN_URL}${routes.post({ applyFormId: data?.applyFormId ?? '' })}`,
     processes: processes.sort((processA, processB) => processA.orderIndex - processB.orderIndex),
     processList,
     error,
diff --git a/frontend/src/hooks/useProcess/useProcess.test.tsx b/frontend/src/hooks/useProcess/useProcess.test.tsx
index 4ea4502c8..259318a18 100644
--- a/frontend/src/hooks/useProcess/useProcess.test.tsx
+++ b/frontend/src/hooks/useProcess/useProcess.test.tsx
@@ -11,7 +11,7 @@ const wrapper = ({ children }: PropsWithChildren) => (
 
 describe('useProcess', () => {
   it('should return processes and processNameList when data is loaded', async () => {
-    const { result } = renderHook(() => useProcess({ dashboardId: '1', postId: '1' }), { wrapper });
+    const { result } = renderHook(() => useProcess({ dashboardId: '1', applyFormId: '1' }), { wrapper });
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
 
diff --git a/frontend/src/hooks/useSpecificApplicant/index.ts b/frontend/src/hooks/useSpecificApplicant/index.ts
index 2ea38ca9e..ea10ece3b 100644
--- a/frontend/src/hooks/useSpecificApplicant/index.ts
+++ b/frontend/src/hooks/useSpecificApplicant/index.ts
@@ -15,7 +15,7 @@ const specificApplicant = {
       queryFn: () => applicantApis.get({ applicantId }),
     }),
 
-  useRejectApplicant: ({ dashboardId, postId }: { dashboardId: string; postId: string }) => {
+  useRejectApplicant: ({ dashboardId, applyFormId }: { dashboardId: string; applyFormId: string }) => {
     const queryClient = useQueryClient();
     const toast = useToast();
 
@@ -23,12 +23,12 @@ const specificApplicant = {
       mutationFn: ({ applicantId }: { applicantId: number }) => applicantApis.reject({ applicantId }),
       onSuccess: () => {
         toast.success('불합격 처리 되었습니다.');
-        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId] });
+        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, applyFormId] });
       },
     });
   },
 
-  useUnrejectApplicant: ({ dashboardId, postId }: { dashboardId: string; postId: string }) => {
+  useUnrejectApplicant: ({ dashboardId, applyFormId }: { dashboardId: string; applyFormId: string }) => {
     const queryClient = useQueryClient();
     const toast = useToast();
 
@@ -36,7 +36,7 @@ const specificApplicant = {
       mutationFn: ({ applicantId }: { applicantId: number }) => applicantApis.unreject({ applicantId }),
       onSuccess: () => {
         toast.success('부활하였습니다. 👻예토전생👻');
-        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId] });
+        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, applyFormId] });
       },
     });
   },
diff --git a/frontend/src/mocks/dashboardList.json b/frontend/src/mocks/dashboardList.json
index e35ddcbe1..4d6af70c7 100644
--- a/frontend/src/mocks/dashboardList.json
+++ b/frontend/src/mocks/dashboardList.json
@@ -3,7 +3,7 @@
   "dashboards": [
     {
       "dashboardId": "1",
-      "postId": "1",
+      "applyFormId": "1",
       "title": "우아한테크코스 프론트엔드 크루 모집",
       "stats": {
         "accept": 3,
@@ -16,7 +16,7 @@
     },
     {
       "dashboardId": "2",
-      "postId": "2",
+      "applyFormId": "2",
       "title": "백엔드 7기 모집",
       "stats": {
         "accept": 3,
@@ -29,7 +29,7 @@
     },
     {
       "dashboardId": "3",
-      "postId": "3",
+      "applyFormId": "3",
       "title": "안드로이드 7기 모집",
       "stats": {
         "accept": 3,
diff --git a/frontend/src/mocks/handlers/applyHandlers.ts b/frontend/src/mocks/handlers/applyHandlers.ts
index c36d71db5..89af45e87 100644
--- a/frontend/src/mocks/handlers/applyHandlers.ts
+++ b/frontend/src/mocks/handlers/applyHandlers.ts
@@ -4,33 +4,33 @@ import applyForm from '../applyForm.json';
 import { NotFoundError, Success } from './response';
 
 const applyHandlers = [
-  http.get(`${APPLY}/:postId`, async ({ request }) => {
+  http.get(`${APPLY}/:applyFormId`, async ({ request }) => {
     const url = new URL(request.url);
-    const postId = url.pathname.split('/').pop();
+    const applyFormId = url.pathname.split('/').pop();
 
-    if (!postId) {
+    if (!applyFormId) {
       return NotFoundError();
     }
 
     return HttpResponse.json(applyForm);
   }),
 
-  http.post(`${APPLY}/:postId/submit`, async ({ request }) => {
+  http.post(`${APPLY}/:applyFormId/submit`, async ({ request }) => {
     const url = new URL(request.url);
-    const postId = url.pathname.split('/').pop();
+    const applyFormId = url.pathname.split('/').pop();
 
-    if (!postId) {
+    if (!applyFormId) {
       return NotFoundError();
     }
 
     return Success();
   }),
 
-  http.patch(`${APPLY}/:postId`, async ({ request }) => {
+  http.patch(`${APPLY}/:applyFormId`, async ({ request }) => {
     const url = new URL(request.url);
-    const postId = url.pathname.split('/').pop();
+    const applyFormId = url.pathname.split('/').pop();
 
-    if (!postId) {
+    if (!applyFormId) {
       return NotFoundError();
     }
 
diff --git a/frontend/src/mocks/handlers/dashboardHandlers.ts b/frontend/src/mocks/handlers/dashboardHandlers.ts
index 2764a81b9..d8631bf20 100644
--- a/frontend/src/mocks/handlers/dashboardHandlers.ts
+++ b/frontend/src/mocks/handlers/dashboardHandlers.ts
@@ -18,7 +18,7 @@ const dashboardHandlers = [
     }
 
     const responseBody = JSON.stringify({
-      postId: 1,
+      applyFormId: 1,
       dashboardId: 1,
     });
 
diff --git a/frontend/src/mocks/processMockData.json b/frontend/src/mocks/processMockData.json
index adc87e8ce..bc173434c 100644
--- a/frontend/src/mocks/processMockData.json
+++ b/frontend/src/mocks/processMockData.json
@@ -1,6 +1,6 @@
 {
   "title": "우아한테크코스 프론트엔드 크루 모집",
-  "postId": "1",
+  "applyFormId": "1",
   "processes": [
     {
       "processId": 1,
diff --git a/frontend/src/pages/ConfirmApply/index.tsx b/frontend/src/pages/ConfirmApply/index.tsx
index 60f006825..89acb767e 100644
--- a/frontend/src/pages/ConfirmApply/index.tsx
+++ b/frontend/src/pages/ConfirmApply/index.tsx
@@ -10,11 +10,11 @@ export default function ConfirmApply() {
   const location = useLocation();
   const state = location.state as { title: string };
 
-  const { postId } = useParams() as { postId: string };
+  const { applyFormId } = useParams() as { applyFormId: string };
 
   const navigate = useNavigate();
   const navigateToPost = () => {
-    navigate(routes.post({ postId }));
+    navigate(routes.post({ applyFormId }));
   };
 
   if (!state) {
diff --git a/frontend/src/pages/DashBoardList/index.tsx b/frontend/src/pages/DashBoardList/index.tsx
index fd01e14af..6292aab95 100644
--- a/frontend/src/pages/DashBoardList/index.tsx
+++ b/frontend/src/pages/DashBoardList/index.tsx
@@ -8,8 +8,8 @@ export default function DashboardList() {
   const { data } = useGetDashboards();
   const navigate = useNavigate();
 
-  const handleCardClick = (dashboardId: string, postId: string) => {
-    navigate(routes.dashboard.post({ dashboardId, postId }));
+  const handleCardClick = (dashboardId: string, applyFormId: string) => {
+    navigate(routes.dashboard.post({ dashboardId, applyFormId }));
   };
 
   return (
@@ -18,13 +18,13 @@ export default function DashboardList() {
       <S.CardGrid>
         {data?.dashboards.map((dashboard) => (
           <RecruitmentCard
-            key={`${dashboard.dashboardId}-${dashboard.postId}`}
+            key={`${dashboard.dashboardId}-${dashboard.applyFormId}`}
             dashboardId={dashboard.dashboardId}
             title={dashboard.title}
             postStats={dashboard.stats}
             startDate={dashboard.startDate}
             endDate={dashboard.endDate}
-            onClick={() => handleCardClick(dashboard.dashboardId, dashboard.postId)}
+            onClick={() => handleCardClick(dashboard.dashboardId, dashboard.applyFormId)}
           />
         ))}
         <S.AddCard onClick={() => navigate(routes.dashboard.create())}>
diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx
index 520329b8a..68c76aa00 100644
--- a/frontend/src/pages/Dashboard/index.tsx
+++ b/frontend/src/pages/Dashboard/index.tsx
@@ -21,8 +21,8 @@ import S from './style';
 export type DashboardTabItems = '지원자 관리' | '모집 과정 관리' | '불합격자 관리' | '공고 관리' | '지원서 관리';
 
 export default function Dashboard() {
-  const { dashboardId, postId } = useParams() as { dashboardId: string; postId: string };
-  const { processes, isLoading, title, postUrl } = useProcess({ dashboardId, postId });
+  const { dashboardId, applyFormId } = useParams() as { dashboardId: string; applyFormId: string };
+  const { processes, isLoading, title, postUrl } = useProcess({ dashboardId, applyFormId });
 
   const { currentMenu, moveTab } = useTab<DashboardTabItems>({ defaultValue: '지원자 관리' });
 
@@ -87,7 +87,7 @@ export default function Dashboard() {
         <Tab.TabPanel isVisible={currentMenu === '모집 과정 관리'}>
           <ProcessManageBoard
             dashboardId={dashboardId}
-            postId={postId}
+            applyFormId={applyFormId}
             processes={processes}
           />
         </Tab.TabPanel>
@@ -95,7 +95,7 @@ export default function Dashboard() {
 
       {currentMenu === '공고 관리' && (
         <Tab.TabPanel isVisible={currentMenu === '공고 관리'}>
-          <PostManageBoard postId={postId} />
+          <PostManageBoard applyFormId={applyFormId} />
         </Tab.TabPanel>
       )}
 
diff --git a/frontend/src/pages/DashboardCreate/index.tsx b/frontend/src/pages/DashboardCreate/index.tsx
index 2e5a5eee9..318f612f3 100644
--- a/frontend/src/pages/DashboardCreate/index.tsx
+++ b/frontend/src/pages/DashboardCreate/index.tsx
@@ -69,7 +69,7 @@ export default function DashboardCreate() {
 
         {finishResJson && (
           <Finish
-            postId={finishResJson.postId}
+            applyFormId={finishResJson.applyFormId}
             dashboardId={finishResJson.dashboardId}
           />
         )}
diff --git a/frontend/src/pages/DashboardLayout/index.tsx b/frontend/src/pages/DashboardLayout/index.tsx
index 4c8ef949c..0bdc94be5 100644
--- a/frontend/src/pages/DashboardLayout/index.tsx
+++ b/frontend/src/pages/DashboardLayout/index.tsx
@@ -4,16 +4,16 @@ import { Outlet, useParams } from 'react-router-dom';
 import S from './style';
 
 export default function DashboardLayout() {
-  const { postId: currentPostId } = useParams();
+  const { applyFormId: currentPostId } = useParams();
   const { data, isLoading } = useGetDashboards();
 
   if (isLoading) return <div>Loading...</div>;
   if (!data) return <div>something wrong</div>;
 
-  const titleList = data.dashboards.map(({ title, dashboardId, postId }) => ({
+  const titleList = data.dashboards.map(({ title, dashboardId, applyFormId }) => ({
     text: title,
-    isSelected: !!currentPostId && currentPostId === postId,
-    postId,
+    isSelected: !!currentPostId && currentPostId === applyFormId,
+    applyFormId,
     dashboardId,
   }));
 
diff --git a/frontend/src/pages/RecruitmentPost/index.tsx b/frontend/src/pages/RecruitmentPost/index.tsx
index 59b617531..ca958c87a 100644
--- a/frontend/src/pages/RecruitmentPost/index.tsx
+++ b/frontend/src/pages/RecruitmentPost/index.tsx
@@ -7,9 +7,9 @@ import { useParams } from 'react-router-dom';
 import S from './style';
 
 export default function RecruitmentPost() {
-  const { postId } = useParams<{ postId: string }>();
+  const { applyFormId } = useParams<{ applyFormId: string }>();
 
-  const { data: recruitmentPost } = applyQueries.useGetRecruitmentPost({ postId: postId ?? '' });
+  const { data: recruitmentPost } = applyQueries.useGetRecruitmentPost({ applyFormId: applyFormId ?? '' });
   const recruitmentPeriod = {
     startDate: ISOtoLocaleString({ date: recruitmentPost?.startDate }),
     endDate: ISOtoLocaleString({ date: recruitmentPost?.endDate }),
diff --git a/frontend/src/pages/SignIn/index.tsx b/frontend/src/pages/SignIn/index.tsx
index f11342eef..fbded8d13 100644
--- a/frontend/src/pages/SignIn/index.tsx
+++ b/frontend/src/pages/SignIn/index.tsx
@@ -1,9 +1,11 @@
 import { Link } from 'react-router-dom';
-import InputField from '@components/common/InputField';
+
 import Button from '@components/common/Button';
+import Spinner from '@components/common/Spinner';
+import InputField from '@components/common/InputField';
+
 import useForm from '@hooks/utils/useForm';
 import useSignIn from '@hooks/useSignIn';
-import Spinner from '@components/common/Spinner';
 import S from './style';
 
 export default function SignIn() {
diff --git a/frontend/src/router/path.ts b/frontend/src/router/path.ts
index 0ae043968..33fd15c2b 100644
--- a/frontend/src/router/path.ts
+++ b/frontend/src/router/path.ts
@@ -4,9 +4,9 @@ export const PATH = {
   home: '/',
   signIn: '/sign-in',
   signUp: '/sign-up',
-  post: '/post/:postId',
-  confirmApply: '/post/:postId/confirm',
-  dashboard: { list: '/dashboard', create: '/create', post: '/:dashboardId/:postId' },
+  post: '/post/:applyFormId',
+  confirmApply: '/post/:applyFormId/confirm',
+  dashboard: { list: '/dashboard', create: '/create', post: '/:dashboardId/:applyFormId' },
 };
 
 export const routes = {
@@ -14,14 +14,14 @@ export const routes = {
   signIn: () => generatePath(PATH.signIn),
   signUp: () => generatePath(PATH.signUp),
 
-  post: ({ postId }: { postId: string }) => generatePath(PATH.post, { postId }),
+  post: ({ applyFormId }: { applyFormId: string }) => generatePath(PATH.post, { applyFormId }),
 
-  confirmApply: ({ postId }: { postId: string }) => generatePath(PATH.confirmApply, { postId }),
+  confirmApply: ({ applyFormId }: { applyFormId: string }) => generatePath(PATH.confirmApply, { applyFormId }),
 
   dashboard: {
     list: () => generatePath(PATH.dashboard.list),
     create: () => generatePath(`${PATH.dashboard.list}${PATH.dashboard.create}`),
-    post: ({ dashboardId, postId }: { dashboardId: string; postId: string }) =>
-      generatePath(`${PATH.dashboard.list}${PATH.dashboard.post}`, { dashboardId, postId }),
+    post: ({ dashboardId, applyFormId }: { dashboardId: string; applyFormId: string }) =>
+      generatePath(`${PATH.dashboard.list}${PATH.dashboard.post}`, { dashboardId, applyFormId }),
   },
 };
diff --git a/frontend/src/types/dashboard.ts b/frontend/src/types/dashboard.ts
index 165159fa2..2c517900a 100644
--- a/frontend/src/types/dashboard.ts
+++ b/frontend/src/types/dashboard.ts
@@ -44,7 +44,7 @@ interface Stats {
 
 interface Dashboard {
   dashboardId: string;
-  postId: string;
+  applyFormId: string;
   title: string;
   stats: Stats;
   startDate: string;
diff --git a/frontend/src/types/process.ts b/frontend/src/types/process.ts
index e0d8b3355..0520d8577 100644
--- a/frontend/src/types/process.ts
+++ b/frontend/src/types/process.ts
@@ -16,7 +16,7 @@ export interface Process {
 }
 
 export interface ProcessResponse {
-  postId: string;
+  applyFormId: string;
   title: string;
   processes: Process[];
 }

From 087275d6d7173085bdf7f89c73fdcb77e503e664 Mon Sep 17 00:00:00 2001
From: Kim Da Eun <midekuna@gmail.com>
Date: Mon, 9 Sep 2024 20:03:10 +0900
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20clubId=EA=B0=80=20=EC=97=86?=
 =?UTF-8?q?=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=EC=97=90=EB=9F=AC=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/service/useClubId.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/hooks/service/useClubId.ts b/frontend/src/hooks/service/useClubId.ts
index 09daeaa2a..7ac055917 100644
--- a/frontend/src/hooks/service/useClubId.ts
+++ b/frontend/src/hooks/service/useClubId.ts
@@ -1,3 +1,4 @@
+import ApiError from '@api/ApiError';
 import { useToast } from '@contexts/ToastContext';
 
 const CLUB_ID_KEY = 'clubId';
@@ -14,7 +15,7 @@ export default function useClubId() {
 
     if (!clubId) {
       error('세션이 만료되었습니다. 다시 로그인해주세요.');
-      return null;
+      throw new ApiError({ message: '세션이 만료되었습니다. 다시 로그인해주세요.', statusCode: 401, method: 'GET' });
     }
 
     return clubId;

From 85e03932bdb7295ae3b053bbb233f4bad45f275a Mon Sep 17 00:00:00 2001
From: Kim Da Eun <midekuna@gmail.com>
Date: Tue, 10 Sep 2024 10:53:59 +0900
Subject: [PATCH 5/6] =?UTF-8?q?test:=20=EA=B8=B0=EC=A1=B4=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=8B=A4=ED=8C=A8=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/jest.config.js                             |  1 +
 frontend/setupTests.ts                              |  6 ++++++
 .../useDashboardCreateForm.test.tsx                 | 13 ++++++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/jest.config.js b/frontend/jest.config.js
index 607b3f794..67c692f16 100644
--- a/frontend/jest.config.js
+++ b/frontend/jest.config.js
@@ -17,6 +17,7 @@ module.exports = {
     '^@types/(.*)$': '<rootDir>/src/types/$1',
     '^@utils/(.*)$': '<rootDir>/src/utils/$1',
     '^@mocks/(.*)$': '<rootDir>/src/mocks/$1',
+    '^@router/(.*)$': '<rootDir>/src/router/$1',
   },
   testEnvironmentOptions: {
     customExportConditions: [''],
diff --git a/frontend/setupTests.ts b/frontend/setupTests.ts
index 80e794f5c..652f6c236 100644
--- a/frontend/setupTests.ts
+++ b/frontend/setupTests.ts
@@ -5,10 +5,16 @@ global.React = React;
 
 beforeAll(() => {
   server.listen({ onUnhandledRequest: 'error' });
+
+  jest.spyOn(Storage.prototype, 'setItem');
+  jest.spyOn(Storage.prototype, 'getItem');
+  jest.spyOn(Storage.prototype, 'removeItem');
 });
 
 afterEach(() => {
   server.resetHandlers();
+
+  jest.restoreAllMocks();
 });
 
 afterAll(() => {
diff --git a/frontend/src/hooks/useDashboardCreateForm/useDashboardCreateForm.test.tsx b/frontend/src/hooks/useDashboardCreateForm/useDashboardCreateForm.test.tsx
index 192756c08..52a0da81f 100644
--- a/frontend/src/hooks/useDashboardCreateForm/useDashboardCreateForm.test.tsx
+++ b/frontend/src/hooks/useDashboardCreateForm/useDashboardCreateForm.test.tsx
@@ -1,14 +1,25 @@
 import { PropsWithChildren } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { act, renderHook } from '@testing-library/react';
+import ToastProvider from '@contexts/ToastContext';
 import useDashboardCreateForm from '.';
 
 describe('useDashboardCreateForm', () => {
+  beforeAll(() => {
+    localStorage.setItem('clubId', '1');
+  });
+
+  afterAll(() => {
+    localStorage.removeItem('clubId');
+  });
+
   const createWrapper = () => {
     const queryClient = new QueryClient();
     // eslint-disable-next-line react/function-component-definition
     return ({ children }: PropsWithChildren) => (
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <ToastProvider>
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      </ToastProvider>
     );
   };
 

From cacf58dae1ae28ef8671d065f35df9b8070232c8 Mon Sep 17 00:00:00 2001
From: Kim Da Eun <midekuna@gmail.com>
Date: Tue, 10 Sep 2024 11:12:16 +0900
Subject: [PATCH 6/6] =?UTF-8?q?test:=20storybook=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=EC=97=90=20router=20=EC=A0=88=EB=8C=80=EA=B2=BD=EB=A1=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.storybook/main.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
index 2624132ad..a84acf84f 100644
--- a/frontend/.storybook/main.ts
+++ b/frontend/.storybook/main.ts
@@ -33,6 +33,7 @@ const config: StorybookConfig = {
         '@utils': path.resolve(__dirname, '../src/utils/'),
         '@mocks': path.resolve(__dirname, '../src/mocks/'),
         '@domain': path.resolve(__dirname, '../src/domain/'),
+        '@router': path.resolve(__dirname, '../src/router/'),
       };
     }
     return config;