refactor: 이력서 작성 페이지 msw 작성 (#289)

* hotfix: 이름 수정 * chore: 이름 수정 * fix: router 로더 원상복구 * feat: 이력서 관련 데이터 가져오기 msw * chore: position 타입 사용 * refactor: 이력서 카테고리 낙관적 업데이트 * fix: skills undefined 방어 코드 * feat: 참고링크 get, 기본정보 patch 핸들러 작성 * feat: 참고링크 post, delete 핸들러 작성 * fix: 이력서 포지션 타입 풀기
resumeme · May 1, 2024 · fc0b7da · fc0b7da
1 parent 995a815
commit fc0b7da
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 42 deletions.
diff --git a/src/components/organisms/BasicInfoView/BasicInfoView.tsx b/src/components/organisms/BasicInfoView/BasicInfoView.tsx
@@ -36,8 +36,7 @@ const BasicInfoView = ({ position, skills, introduce, onEditClick }: BasicInfoVi
   };
 
   const renderSkills = () => {
-    const hasNoEmptyString = skills.every((skill) => skill !== '');
-    if (skills.length > 0 && hasNoEmptyString) {
+    if (skills && skills.every((skill) => skill !== '')) {
       const skillLabels = skills.map((skill: string, index: number) => {
         return (
           <Badge

diff --git a/src/mocks/handlers/event/event.mock.ts b/src/mocks/handlers/event/event.mock.ts
@@ -86,31 +86,31 @@ export const eventListMock: EventList = {
       info: readEventMock0,
       mentorInfo: {
         mentorId: 0,
-        nickname: '윤지석',
+        nickname: '손웅정',
         imageUrl: '',
       },
     },
     {
       info: readEventMock1,
       mentorInfo: {
         mentorId: 0,
-        nickname: '윤지석',
+        nickname: '손웅정',
         imageUrl: '',
       },
     },
     {
       info: readEventMock2,
       mentorInfo: {
         mentorId: 0,
-        nickname: '윤지석',
+        nickname: '손웅정',
         imageUrl: '',
       },
     },
     {
       info: readEventMock3,
       mentorInfo: {
         mentorId: 0,
-        nickname: '윤지석',
+        nickname: '손웅정',
         imageUrl: '',
       },
     },

diff --git a/src/mocks/handlers/resume/resume.ts b/src/mocks/handlers/resume/resume.ts
@@ -1,8 +1,70 @@
 import { HttpResponse, http } from 'msw';
 import { environments } from '~/config/environments';
 
+const referenceLinkMock = [
+  {
+    componentId: 0,
+    reflectFeedback: false,
+    createdDate: '2024-05-01T23:59:59.999Z',
+    linkType: 'GITHUB',
+    url: 'https://github.com/resumeme/Frontend',
+  },
+];
+const MOCK_RESUME_ID = 0;
 export const handlers = [
   http.post(`${environments.baseUrlEnv()}/v1/resumes`, () => {
+    return HttpResponse.json({ id: MOCK_RESUME_ID });
+  }),
+  http.get(`${environments.baseUrlEnv()}/v1/resumes/:id/basic`, () => {
+    return HttpResponse.json();
+  }),
+  // patchResumeBasicInfo
+  http.patch(`${environments.baseUrlEnv()}/v2/resumes/:id`, () => {
+    return HttpResponse.json();
+  }),
+  http.post(`${environments.baseUrlEnv()}/v1/resumes/:id/links`, () => {
+    return HttpResponse.json();
+  }),
+  http.delete(`${environments.baseUrlEnv()}/v1/resumes/:id/components/:linkId`, () => {
+    return HttpResponse.json();
+  }),
+  http.get(`${environments.baseUrlEnv()}/v1/resumes/:id/links`, () => {
+    return HttpResponse.json(referenceLinkMock);
+  }),
+  http.get(`${environments.baseUrlEnv()}/v1/resumes/:id/careers`, () => {
+    return HttpResponse.json();
+  }),
+  http.get(`${environments.baseUrlEnv()}/v1/resumes/:id/projects`, () => {
+    return HttpResponse.json();
+  }),
+  http.get(`${environments.baseUrlEnv()}/v1/resumes/:id/activities`, () => {
+    return HttpResponse.json();
+  }),
+  http.get(`${environments.baseUrlEnv()}/v1/resumes/:id/certifications`, () => {
+    return HttpResponse.json();
+  }),
+  http.get(`${environments.baseUrlEnv()}/v1/resumes/:id/foreignLanguages`, () => {
+    return HttpResponse.json();
+  }),
+  http.get(`${environments.baseUrlEnv()}/v1/resumes/:id/trainings`, () => {
+    return HttpResponse.json();
+  }),
+  http.post(`${environments.baseUrlEnv()}/v1/resumes/:id/careers`, () => {
+    return HttpResponse.json();
+  }),
+  http.post(`${environments.baseUrlEnv()}/v1/resumes/:id/projects`, () => {
+    return HttpResponse.json();
+  }),
+  http.post(`${environments.baseUrlEnv()}/v1/resumes/:id/activities`, () => {
+    return HttpResponse.json();
+  }),
+  http.post(`${environments.baseUrlEnv()}/v1/resumes/:id/certifications`, () => {
+    return HttpResponse.json();
+  }),
+  http.post(`${environments.baseUrlEnv()}/v1/resumes/:id/foreignLanguages`, () => {
+    return HttpResponse.json();
+  }),
+  http.post(`${environments.baseUrlEnv()}/v1/resumes/:id/trainings`, () => {
     return HttpResponse.json();
   }),
 ];
diff --git a/src/mocks/handlers/user/user.ts b/src/mocks/handlers/user/user.ts
@@ -3,7 +3,7 @@ import { environments } from '~/config/environments';
 import { ReadMentor } from '~/types/mentor';
 
 const mentorMock: ReadMentor = {
-  nickname: '윤지석',
+  nickname: '손웅정',
   experiencedPositions: ['BACK', 'FRONT'],
   careerContent: '',
   careerYear: 4,

diff --git a/src/queries/resume/useOptimsticPostCategory.ts b/src/queries/resume/useOptimsticPostCategory.ts
@@ -17,7 +17,7 @@ export const useOptimisticPostCategory = <T extends Categories>({
   const toast = useToast();
   return useMutation({
     mutationFn,
-    onMutate: async (newCategoryBlock) => {
+    onMutate: async ({ body: newCategoryBlock }) => {
       await queryClient.cancelQueries({ queryKey: TARGET_QUERY_KEY });
       const previousCategoryData = queryClient.getQueryData(TARGET_QUERY_KEY);
       queryClient.setQueryData(TARGET_QUERY_KEY, (old: T[]) => {
@@ -36,7 +36,8 @@ export const useOptimisticPostCategory = <T extends Categories>({
       queryClient.setQueryData(TARGET_QUERY_KEY, context?.previousCategoryData);
     },
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: TARGET_QUERY_KEY });
+      /*NOTE - msw 작동으로 무조건 쿼리 업데이트 시키도록 임시 주석 처리! */
+      // queryClient.invalidateQueries({ queryKey: TARGET_QUERY_KEY });
     },
     onSuccess: () => {
       toast({

diff --git a/src/routes/UserLoader.tsx b/src/routes/UserLoader.tsx
@@ -1,6 +1,7 @@
-import { useToast } from '@chakra-ui/react';
-import { Navigate, Outlet } from 'react-router-dom';
-import { appPaths } from '~/config/paths';
+// import { useToast } from '@chakra-ui/react';
+// import { Navigate } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
+// import { appPaths } from '~/config/paths';
 import useUser from '~/hooks/useUser';
 
 export type CheckUser = {
@@ -10,29 +11,31 @@ export type CheckUser = {
 const useUserCheck = ({ role }: CheckUser) => {
   const { user } = useUser();
 
-  const toast = useToast();
+  // const toast = useToast();
 
   if (!user) {
-    toast.closeAll();
-    toast({
-      description: '로그인이 필요해요.',
-      status: 'info',
-    });
-    return (
-      <Navigate
-        to={appPaths.signIn()}
-        replace
-      />
-    );
+    //   toast.closeAll();
+    //   toast({
+    //     description: '로그인이 필요해요.',
+    //     status: 'info',
+    //   });
+    //   return (
+    //     <Navigate
+    //       to={appPaths.signIn()}
+    //       replace
+    //     />
+    //   );
+    /*TODO - 유저 mock 작성 후 수정 */
+    return <Outlet />;
   }
 
   if (role && user.role !== role) {
-    toast.closeAll();
-    toast({
-      description: `${role === 'mentee' ? '멘티' : '멘토'}로 로그인해야 확인할 수 있어요.`,
-      status: 'info',
-    });
-    return <Navigate to={appPaths.main()} />;
+    //   toast.closeAll();
+    //   toast({
+    //     description: `${role === 'mentee' ? '멘티' : '멘토'}로 로그인해야 확인할 수 있어요.`,
+    //     status: 'info',
+    //   });
+    //   return <Navigate to={appPaths.main()} />;
   }
 
   return <Outlet />;

diff --git a/src/routes/router.tsx b/src/routes/router.tsx
@@ -2,12 +2,12 @@ import { createBrowserRouter } from 'react-router-dom';
 import ErrorBoundary from './ErrorBoundary';
 import { EventCreateLoader } from './EventCreateLoader';
 import FeedbackLayout from './FeedbackLayout';
-// import { FeedbackResumeLoader } from './FeedbackResumeLoader';
+import { FeedbackResumeLoader } from './FeedbackResumeLoader';
 import FocusLayout from './FocusLayout';
 import GuestLoader from './GuestLoader';
 import Layout from './Layout';
 import MainLayout from './MainLayout';
-// import { MenteeLoader, MentorLoader, UserLoader } from './UserLoader';
+import { MenteeLoader, MentorLoader, UserLoader } from './UserLoader';
 import { CreateEventPage } from '~/pages/EventPages/CreateEventPage';
 import { EditEventPage } from '~/pages/EventPages/EditEventPage';
 import { EventDetailPage } from '~/pages/EventPages/EventDetailPage';
@@ -39,8 +39,7 @@ const router = createBrowserRouter([
         element: <Layout />,
         children: [
           {
-            // element: <UserLoader />,
-            element: <></>,
+            element: <UserLoader />,
             children: [
               { path: 'mypage', element: <MyPage /> },
               { path: 'user/edit-info', element: <EditProfilePage /> },
@@ -51,8 +50,7 @@ const router = createBrowserRouter([
             ],
           },
           {
-            // element: <MenteeLoader />,
-            element: <></>,
+            element: <MenteeLoader />,
             children: [
               {
                 path: 'resume/management',
@@ -63,8 +61,7 @@ const router = createBrowserRouter([
             ],
           },
           {
-            // element: <MentorLoader />,
-            element: <></>,
+            element: <MentorLoader />,
             children: [
               { path: 'write-review', element: <WriteReviewPage /> },
 
@@ -100,13 +97,11 @@ const router = createBrowserRouter([
         element: <FeedbackLayout />,
         children: [
           {
-            // element: <FeedbackResumeLoader />,
-            element: <></>,
+            element: <FeedbackResumeLoader />,
             children: [{ index: true, element: <FeedbackResumePage /> }],
           },
           {
-            // element: <MentorLoader />,
-            element: <></>,
+            element: <MentorLoader />,
             children: [{ path: 'feedback/reflect', element: <FeedbackReflectPage /> }],
           },
         ],