✨ feat: 고용주 서류 제출 시 로딩 UI 처리 #127

Team-inglo · Dec 21, 2024 · aaa048f · aaa048f
1 parent 44331c8
commit aaa048f
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 68 deletions.
diff --git a/src/components/Employer/ApplicantDocumentsDetail/DocumentCardDispenserEmployer.tsx b/src/components/Employer/ApplicantDocumentsDetail/DocumentCardDispenserEmployer.tsx
@@ -17,7 +17,7 @@ type DocumentCardProps = {
   title: string;
   type: string;
   reason?: string;
-  onNext?: () => void;
+  setIsLoading: (loadingStatus: boolean) => void;
 };
 
 const NullCard = ({ title }: { title: string }) => {
@@ -288,7 +288,7 @@ const ConfirmationCard = ({
 }: {
   title: string;
   document: EmployDocumentInfo;
-  
+
   onDownload: (url: string) => void;
 }) => {
   return (
@@ -358,13 +358,21 @@ const DocumentCardDispenserEmployer = ({
   title,
   type,
   reason,
+  setIsLoading,
 }: DocumentCardProps) => {
   const navigate = useNavigate();
   const handleDownload = (url: string) => {
     window.open(url, '_blank');
   };
   const { updateCurrentDocumentId } = useCurrentDocumentIdStore();
-  const { mutate: submitDocument } = usePatchStatusSubmissionEmployer();
+  const { mutate: submitDocument } = usePatchStatusSubmissionEmployer({
+    onMutate: () => {
+      setIsLoading(true);
+    },
+    onSettled: () => {
+      setIsLoading(false);
+    },
+  });
   if (!document.status) return <NullCard title={title} />;
   switch (document.status) {
     case DocumentStatusEmployer.TEMPORARY_SAVE:

diff --git a/src/hooks/api/useDocument.ts b/src/hooks/api/useDocument.ts
@@ -269,7 +269,13 @@ export const usePatchStatusSubmission = () => {
 };
 
 // 8.16 (고용주) 서류 (근로계약서, 시간제 취업허가서, 통합 신청서) 제출하기 api hook
-export const usePatchStatusSubmissionEmployer = () => {
+export const usePatchStatusSubmissionEmployer = (
+  options?: UseMutationOptions<
+    RESTYPE<null>,
+    Error,
+    number
+  >,
+) => {
   return useMutation({
     mutationFn: patchStatusSubmissionEmployer,
     onSuccess: () => {
@@ -278,6 +284,7 @@ export const usePatchStatusSubmissionEmployer = () => {
     onError: (error) => {
       console.error('고용주의 서류 제출 실패', error);
     },
+    ...options
   });
 };
 

diff --git a/src/pages/Employer/WriteDocuments/ApplicantDocumentsDetailPage.tsx b/src/pages/Employer/WriteDocuments/ApplicantDocumentsDetailPage.tsx
@@ -3,24 +3,17 @@ import { DocumentTypeInfo } from '@/constants/documents';
 import { DocumentType, EmployDocumentInfo } from '@/types/api/document';
 import DocumentCardDispenserEmployer from '@/components/Employer/ApplicantDocumentsDetail/DocumentCardDispenserEmployer';
 import { useNavigate } from 'react-router-dom';
-import {
-  useGetDocumentsEmployer,
-  usePatchStatusSubmissionEmployer,
-} from '@/hooks/api/useDocument';
+import { useGetDocumentsEmployer } from '@/hooks/api/useDocument';
 import { useCurrentApplicantIdStore } from '@/store/url';
+import { useState } from 'react';
+import LoadingItem from '@/components/Common/LoadingItem';
 
 const ApplicantDocumentsDetailPage = () => {
+  const [isLoading, setIsLoading] = useState(false);
   const { currentApplicantId } = useCurrentApplicantIdStore();
   const { data } = useGetDocumentsEmployer(Number(currentApplicantId));
   const navigate = useNavigate();
 
-  // patch api mutate 설정 (8.16 고용주가 서류 제출하기)
-  const { mutate } = usePatchStatusSubmissionEmployer();
-
-  const handleOnNext = async (id: number) => {
-    mutate(id);
-  };
-
   {
     /*
   integrated_application: {
@@ -31,66 +24,75 @@ const ApplicantDocumentsDetailPage = () => {
     */
   }
   return (
-    <div>
-      <BaseHeader
-        hasBackButton={true}
-        hasMenuButton={false}
-        onClickBackButton={() =>
-          navigate('/employer/applicant/document-detail')
-        }
-        title="서류 관리"
-      />
-      <div className="flex flex-col gap-2 p-6">
-        {data && data?.data[DocumentType.PART_TIME_PERMIT] ? (
-          <DocumentCardDispenserEmployer
-            document={
-              data.data[DocumentType.PART_TIME_PERMIT] as EmployDocumentInfo
-            }
-            title={DocumentTypeInfo[DocumentType.PART_TIME_PERMIT].name}
-            type={DocumentType.PART_TIME_PERMIT}
-            reason={
-              data?.data[DocumentType.PART_TIME_PERMIT].reason || undefined
-            }
-            onNext={() =>
-              handleOnNext(data.data[DocumentType.PART_TIME_PERMIT]?.id || 0)
-            }
-          />
-        ) : (
-          <div className="w-full relative rounded-[1.125rem] bg-white border border-[#dcdcdc] flex flex-col items-start justify-start py-6 cursor-pointer text-left text-[#1e1926]">
-            <div className="self-stretch flex flex-col items-start justify-start px-4">
-              <div className="self-stretch flex flex-row items-center justify-center pl-2 gap-4">
-                <div className="flex-1 flex items-center justify-start head-3">
-                  {DocumentTypeInfo[DocumentType.PART_TIME_PERMIT].name}
+    <>
+      {isLoading && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-white bg-opacity-50 overflow-hidden"
+          style={{ touchAction: 'none' }}
+          onClick={(e) => e.preventDefault()}
+        >
+          <LoadingItem />
+        </div>
+      )}
+      <div>
+        <BaseHeader
+          hasBackButton={true}
+          hasMenuButton={false}
+          onClickBackButton={() =>
+            navigate('/employer/applicant/document-detail')
+          }
+          title="서류 관리"
+        />
+        <div className="flex flex-col gap-2 p-6">
+          {data && data?.data[DocumentType.PART_TIME_PERMIT] ? (
+            <DocumentCardDispenserEmployer
+              document={
+                data.data[DocumentType.PART_TIME_PERMIT] as EmployDocumentInfo
+              }
+              title={DocumentTypeInfo[DocumentType.PART_TIME_PERMIT].name}
+              type={DocumentType.PART_TIME_PERMIT}
+              reason={
+                data?.data[DocumentType.PART_TIME_PERMIT].reason || undefined
+              }
+              setIsLoading={setIsLoading}
+            />
+          ) : (
+            <div className="w-full relative rounded-[1.125rem] bg-white border border-[#dcdcdc] flex flex-col items-start justify-start py-6 cursor-pointer text-left text-[#1e1926]">
+              <div className="self-stretch flex flex-col items-start justify-start px-4">
+                <div className="self-stretch flex flex-row items-center justify-center pl-2 gap-4">
+                  <div className="flex-1 flex items-center justify-start head-3">
+                    {DocumentTypeInfo[DocumentType.PART_TIME_PERMIT].name}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        )}
-        {data && data?.data[DocumentType.LABOR_CONTRACT] ? (
-          <DocumentCardDispenserEmployer
-            document={
-              data.data[DocumentType.LABOR_CONTRACT] as EmployDocumentInfo
-            }
-            title={DocumentTypeInfo[DocumentType.LABOR_CONTRACT].name}
-            type={DocumentType.LABOR_CONTRACT}
-            reason={data?.data[DocumentType.LABOR_CONTRACT].reason || undefined}
-            onNext={() =>
-              handleOnNext(data.data[DocumentType.LABOR_CONTRACT]?.id || 0)
-            }
-          />
-        ) : (
-          <div className="w-full relative rounded-[1.125rem] bg-white border border-[#dcdcdc] flex flex-col items-start justify-start py-6 cursor-pointer text-left text-[#1e1926]">
-            <div className="self-stretch flex flex-col items-start justify-start px-4">
-              <div className="self-stretch flex flex-row items-center justify-center pl-2 gap-4">
-                <div className="flex-1 flex items-center justify-start head-3">
-                  {DocumentTypeInfo[DocumentType.LABOR_CONTRACT].name}
+          )}
+          {data && data?.data[DocumentType.LABOR_CONTRACT] ? (
+            <DocumentCardDispenserEmployer
+              document={
+                data.data[DocumentType.LABOR_CONTRACT] as EmployDocumentInfo
+              }
+              title={DocumentTypeInfo[DocumentType.LABOR_CONTRACT].name}
+              type={DocumentType.LABOR_CONTRACT}
+              reason={
+                data?.data[DocumentType.LABOR_CONTRACT].reason || undefined
+              }
+              setIsLoading={setIsLoading}
+            />
+          ) : (
+            <div className="w-full relative rounded-[1.125rem] bg-white border border-[#dcdcdc] flex flex-col items-start justify-start py-6 cursor-pointer text-left text-[#1e1926]">
+              <div className="self-stretch flex flex-col items-start justify-start px-4">
+                <div className="self-stretch flex flex-row items-center justify-center pl-2 gap-4">
+                  <div className="flex-1 flex items-center justify-start head-3">
+                    {DocumentTypeInfo[DocumentType.LABOR_CONTRACT].name}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 };