fix: api 경로 에러 hotfix

woowacourse-teams · Aug 9, 2024 · 067e04a · 067e04a
1 parent 15fb5a1
commit 067e04a
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 22 deletions.
diff --git a/frontend/src/api/process.ts b/frontend/src/api/process.ts
@@ -4,7 +4,7 @@ import ApiError from './ApiError';
 
 const processApis = {
   get: async ({ id }: { id: string }) => {
-    const response = await fetch(`${PROCESSES}?${createParams({ dashboard_id: id })}`, {
+    const response = await fetch(`${PROCESSES}?${createParams({ dashboardId: id })}`, {
       headers: {
         Accept: 'application/json',
       },
@@ -23,7 +23,7 @@ const processApis = {
   },
 
   create: async (params: { dashboardId: number; orderIndex: number; name: string; description?: string }) => {
-    const response = await fetch(`${PROCESSES}?${createParams({ dashboard_id: String(params.dashboardId) })}`, {
+    const response = await fetch(`${PROCESSES}?${createParams({ dashboardId: String(params.dashboardId) })}`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

diff --git a/frontend/src/components/appModal/ApplicantBaseInfo/index.tsx b/frontend/src/components/appModal/ApplicantBaseInfo/index.tsx
@@ -14,19 +14,21 @@ interface ApplicantBaseInfoProps {
 }
 
 export default function ApplicantBaseInfo({ applicantId }: ApplicantBaseInfoProps) {
-  const { data: applicantBaseDetail } = specificApplicant.useGetBaseInfo({ applicantId });
+  const { data: applicantBaseInfo } = specificApplicant.useGetBaseInfo({ applicantId });
   const { mutate: rejectMutate } = specificApplicant.useRejectApplicant();
   const { dashboardId, postId } = useParams() as { dashboardId: string; postId: string };
   const { processList } = useProcess({ dashboardId, postId });
   const { moveApplicantProcess } = useApplicant({ applicantId });
   const { close } = useModal();
 
-  if (!applicantBaseDetail) {
+  if (!applicantBaseInfo) {
     return <div>no data</div>; // TODO: 핸들링
   }
 
+  const { applicant, process } = applicantBaseInfo;
+
   const items = processList
-    .filter(({ processName }) => processName !== applicantBaseDetail.processName)
+    .filter(({ processName }) => processName !== process.name)
     .map(({ processId, processName }) => ({
       id: processId,
       name: processName,
@@ -42,10 +44,10 @@ export default function ApplicantBaseInfo({ applicantId }: ApplicantBaseInfoProp
 
   return (
     <S.Container>
-      <S.Title>{applicantBaseDetail.name}</S.Title>
+      <S.Title>{applicant.name}</S.Title>
       <S.ActionRow>
         <Dropdown
-          initValue={applicantBaseDetail.processName}
+          initValue={process.name}
           size="sm"
           items={items}
           width={112}
@@ -62,15 +64,15 @@ export default function ApplicantBaseInfo({ applicantId }: ApplicantBaseInfoProp
       <S.DetailContainer>
         <S.DetailRow>
           <S.Label>이메일</S.Label>
-          <S.Value>{applicantBaseDetail.email}</S.Value>
+          <S.Value>{applicant.email}</S.Value>
         </S.DetailRow>
         <S.DetailRow>
           <S.Label>연락처</S.Label>
-          <S.Value>{applicantBaseDetail.phone}</S.Value>
+          <S.Value>{applicant.phone}</S.Value>
         </S.DetailRow>
         <S.DetailRow>
           <S.Label>접수일</S.Label>
-          <S.Value>{formatDate(applicantBaseDetail.createdAt)}</S.Value>
+          <S.Value>{formatDate(applicant.createdAt)}</S.Value>
         </S.DetailRow>
       </S.DetailContainer>
     </S.Container>

diff --git a/frontend/src/components/appModal/ApplicantDetailInfo/QuestionSection/style.ts b/frontend/src/components/appModal/ApplicantDetailInfo/QuestionSection/style.ts
@@ -21,6 +21,10 @@ const InnerContainer = styled.div`
   border-radius: 1.6rem;
   padding: 2.4rem 3.6rem;
   background-color: ${({ theme }) => theme.baseColors.grayscale[50]};
+
+  display: flex;
+  flex-direction: column;
+  gap: 3.6rem;
 `;
 
 const S = {

diff --git a/frontend/src/components/appModal/style.ts b/frontend/src/components/appModal/style.ts
@@ -6,7 +6,7 @@ const Container = styled.div`
 
   display: grid;
   grid-template-columns: 4fr 9fr 5fr;
-  grid-template-rows: 1fr 2fr 14fr;
+  grid-template-rows: 1fr 1.5fr 14fr;
   grid-template-areas:
     'header header header'
     'sidebar nav evalHeader'

diff --git a/frontend/src/hooks/useApplicant/index.ts b/frontend/src/hooks/useApplicant/index.ts
@@ -1,16 +1,17 @@
 import applicantApis from '@api/applicant';
-import { DASHBOARD_ID } from '@constants/constants';
 import QUERY_KEYS from '@hooks/queryKeys';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+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 moveApplicantProcess = useMutation({
     mutationFn: ({ processId, applicants }: { processId: number; applicants: number[] }) =>
       applicantApis.move({ processId, applicants }),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, DASHBOARD_ID] });
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.DASHBOARD, dashboardId, postId] });
       if (applicantId) {
         queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.APPLICANT, applicantId] });
       }

diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -26,11 +26,11 @@ Sentry.init({
 });
 
 async function setPrev() {
-  if (process.env.NODE_ENV === 'development') {
-    Sentry.getCurrentScope().setLevel('info');
-    const worker = await import('@mocks/browser');
-    await worker.default.start();
-  }
+  // if (process.env.NODE_ENV === 'development') {
+  //   Sentry.getCurrentScope().setLevel('info');
+  //   const worker = await import('@mocks/browser');
+  //   await worker.default.start();
+  // }
   if (process.env.NODE_ENV === 'production') {
     ReactGA.initialize(process.env.GA_MEASUREMENT_ID);
   }

diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx
@@ -32,6 +32,7 @@ export default function Dashboard() {
       <Tab postUrl={postUrl}>
         {Object.values(DASHBOARD_TAB_MENUS).map((label) => (
           <Tab.TabItem
+            key={label}
             label={label}
             name={label}
             isActive={currentMenu === label}

diff --git a/frontend/src/types/applicant.ts b/frontend/src/types/applicant.ts
@@ -1,10 +1,19 @@
-export interface SpecificApplicant {
-  applicantId: number;
-  createdAt: string;
+interface ApplicantBaseInfo {
+  id: number;
   name: string;
   email: string;
   phone: string;
-  processName: string;
+  createdAt: string;
+}
+
+interface ApplicantProcessInfo {
+  id: number;
+  name: string;
+}
+
+export interface SpecificApplicant {
+  applicant: ApplicantBaseInfo;
+  process: ApplicantProcessInfo;
 }
 
 interface DetailInfo {