fix-fe: ID 버그

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;

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: [''],

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(() => {

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,
     }),
 };

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,8 +18,8 @@ const dashboardApis = {
 
   create: async ({ clubId, dashboardFormInfo }: { clubId: string; dashboardFormInfo: DashboardFormInfo }) =>
     apiClient.post<{
-      postUrl: string;
-      postId: string;
+      dashboardId: string;
+      applyFormId: string;
     }>({
       path: `?${convertParamsToQueryString({ clubId })}`,
       body: dashboardFormInfo,

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 }) =>

frontend/src/components/appModal/ApplicantBaseInfo/index.tsx

@@ -14,11 +14,11 @@
 }
 
 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();
@@ -45,7 +45,7 @@
 
   const rejectAppHandler = () => {
     const confirmAction = (message: string, action: () => void) => {
       const isConfirmed = window.confirm(message);
       if (isConfirmed) {
         action();
         close();

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'],

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) {

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);

frontend/src/components/dashboard/DashboardCreate/Finish/Finish.stories.tsx

@@ -23,14 +23,14 @@ const meta: Meta<typeof Finish> = {
   },
   tags: ['autodocs'],
   argTypes: {
-    postUrl: {
-      description: '게시된 공고의 URL입니다.',
+    dashboardId: {
+      description: '게시된 공고의 대시보드 ID입니다.',
       control: { type: 'text' },
       table: {
         type: { summary: 'string' },
       },
     },
-    postId: {
+    applyFormId: {
       description: '게시된 공고의 ID입니다.',
       control: { type: 'text' },
       table: {
@@ -45,7 +45,7 @@ type Story = StoryObj<typeof Finish>;
 
 export const Template: Story = {
   args: {
-    postUrl: 'https://www.cruru.kr/123543920/recruit',
-    postId: '1',
+    dashboardId: '1',
+    applyFormId: '1',
   },
 };

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;
-  postId: string;
+  dashboardId: string;
+  applyFormId: string;
 }
 
-export default function Finish({ postUrl, postId }: FinishProps) {
+export default function Finish({ dashboardId, applyFormId }: FinishProps) {
   const navigate = useNavigate();
-  const { dashboardId } = useParams() as { dashboardId: string };
 
   const handleClickButton = () => {
-    navigate(`/dashboard/${dashboardId}/${postId}`);
+    navigate(routes.dashboard.post({ dashboardId, applyFormId }));
   };
 
   return (
     <S.Container>
       <S.Icon>🎉</S.Icon>
       <S.Message>공고가 게시됐어요!</S.Message>
-      <SharePost url={`https://${postUrl}`} />
+      <SharePost url={`${DOMAIN_URL}${routes.post({ applyFormId })}`} />
       <Button
         size="sm"
         color="white"

frontend/src/components/dashboard/DashboardSidebar/DashboardSidebar.stories.tsx

@@ -24,12 +24,14 @@ const meta: Meta<typeof DashboardSidebar> = {
       {
         text: '첫번째 옵션',
         isSelected: true,
-        postId: 1,
+        dashboardId: '1',
+        applyFormId: '10',
       },
       {
         text: '두번째 옵션',
         isSelected: false,
-        postId: 2,
+        dashboardId: '2',
+        applyFormId: '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', applyFormId: '10' },
+      { text: '우아한테크코스 6기 백엔드', isSelected: false, dashboardId: '2', applyFormId: '11' },
+      { text: '우아한테크코스 6기 안드로이드', isSelected: false, dashboardId: '3', applyFormId: '12' },
     ],
   },
 };

frontend/src/components/dashboard/DashboardSidebar/index.tsx

@@ -1,38 +1,38 @@
 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;
+  applyFormId: string;
+  dashboardId: string;
 }
 
 interface DashboardSidebarProps {
   options: Option[];
 }
 
 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="크루루 로고"
         />
       </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, applyFormId, 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, applyFormId })}>{text}</Link>
               </S.LinkContainer>
             </Accordion.ListItem>
           ))}

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'],

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();

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) : '';

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,
   },
 };

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}
         />