✨ feat: 문서 수정 페이지와 연결 #54

Team-inglo · Oct 27, 2024 · 449c803 · 449c803
1 parent 222b701
commit 449c803
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 8 deletions.
diff --git a/src/components/Document/DocumentCard.tsx b/src/components/Document/DocumentCard.tsx
@@ -27,9 +27,11 @@ type DocumentCardProps = {
 const TemporarySaveCard = ({
   title,
   onNext,
+  onEdit,
 }: {
   title: string;
   onNext: () => void;
+  onEdit: () => void;
 }) => {
   return (
     <div className="w-full relative rounded-[1.125rem] bg-white border border-[#dcdcdc] flex flex-col items-center justify-center gap-2 caption-2 text-left text-[#1e1926]">
@@ -74,7 +76,7 @@ const TemporarySaveCard = ({
           fontColor="text-[#222]"
           isBorder={false}
           title="Edit"
-          onClick={onNext}
+          onClick={onEdit}
         />
         <Button
           type="large"
@@ -357,7 +359,20 @@ const DocumentCardDispenser = ({
     );
   switch (document.status) {
     case DocumentStatus.TEMPORARY_SAVE:
-      return <TemporarySaveCard title={title} onNext={onNext} />;
+      return (
+        <TemporarySaveCard
+          title={title}
+          onNext={onNext}
+          onEdit={() =>
+            navigate('/write-documents', {
+              state: {
+                type: type,
+                isEdit: true,
+              },
+            })
+          }
+        />
+      );
     case DocumentStatus.SUBMITTED:
       return <SubmittedCard title={title} />;
     case DocumentStatus.BEFORE_CONFIRMATION:

diff --git a/src/components/WriteDocuments/DocumentFormDispenser.tsx b/src/components/WriteDocuments/DocumentFormDispenser.tsx
@@ -1,7 +1,18 @@
-import { DocumentType } from '@/types/api/document';
+import {
+  DocumentType,
+  IntegratedApplicationData,
+  LaborContractDataResponse,
+  PartTimePermitData,
+} from '@/types/api/document';
 import PartTimePermitWriteForm from '@/components/WriteDocuments/PartTimePermitWriteForm';
 import LaborContractWriteForm from '@/components/WriteDocuments/LaborContractWriteForm';
 import IntegratedApplicationWriteForm from '@/components/WriteDocuments/IntegratedApplicationWriteForm';
+import { useEffect, useState } from 'react';
+import {
+  useGetIntegratedApplication,
+  useGetPartTimeEmployPermit,
+  useGetStandardLaborContract,
+} from '@/hooks/api/useDocument';
 
 type DocumentFormDispenserProps = {
   type: DocumentType;
@@ -12,13 +23,55 @@ const DocumentFormDispenser = ({
   type,
   isEdit,
 }: DocumentFormDispenserProps) => {
+  const [document, setDocument] = useState<
+    PartTimePermitData | LaborContractDataResponse | IntegratedApplicationData
+  >();
+  const { mutate: getPartTimeEmployPermit } = useGetPartTimeEmployPermit({
+    onSuccess: (data) => setDocument(data),
+  });
+  const { mutate: getStandardLaborContract } = useGetStandardLaborContract({
+    onSuccess: (data) => setDocument(data),
+  });
+  const { mutate: getIntegratedApplication } = useGetIntegratedApplication({
+    onSuccess: (data) => setDocument(data),
+  });
+  {
+    useEffect(() => {
+      switch (type) {
+        case DocumentType.PART_TIME_PERMIT:
+          getPartTimeEmployPermit(1);
+          break;
+        case DocumentType.LABOR_CONTRACT:
+          getStandardLaborContract(1);
+          break;
+        case DocumentType.INTEGRATED_APPLICATION:
+          getIntegratedApplication(1);
+          break;
+      }
+    }, [type]);
+  }
   switch (type) {
     case DocumentType.PART_TIME_PERMIT:
-      return <PartTimePermitWriteForm isEdit={isEdit} />;
+      return (
+        <PartTimePermitWriteForm
+          document={document as PartTimePermitData}
+          isEdit={isEdit}
+        />
+      );
     case DocumentType.LABOR_CONTRACT:
-      return <LaborContractWriteForm isEdit={isEdit} />;
+      return (
+        <LaborContractWriteForm
+          document={document as LaborContractDataResponse}
+          isEdit={isEdit}
+        />
+      );
     case DocumentType.INTEGRATED_APPLICATION:
-      return <IntegratedApplicationWriteForm isEdit={isEdit} />;
+      return (
+        <IntegratedApplicationWriteForm
+          document={document as IntegratedApplicationData}
+          isEdit={isEdit}
+        />
+      );
   }
 };
 

diff --git a/src/pages/WriteDocuments/WriteDocumentsPage.tsx b/src/pages/WriteDocuments/WriteDocumentsPage.tsx
@@ -7,7 +7,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 const WriteDocumentsPage = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { type } = location.state || {};
+  const { type, isEdit } = location.state || {};
   return (
     <div>
       <BaseHeader
@@ -17,7 +17,7 @@ const WriteDocumentsPage = () => {
         onClickBackButton={() => navigate('/application-documents')}
       />
       <DocumentSubHeader type={type as DocumentType} />
-      <DocumentFormDispenser type={type as DocumentType} isEdit={false} />
+      <DocumentFormDispenser type={type as DocumentType} isEdit={isEdit} />
     </div>
   );
 };