✨ feat: 문서 미리보기 페이지 추가 #54

Team-inglo · Oct 27, 2024 · 340bc86 · 340bc86
1 parent fdbfb1a
commit 340bc86
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 12 deletions.
diff --git a/src/pages/WriteDocuments/DocumentPreviewPage.tsx b/src/pages/WriteDocuments/DocumentPreviewPage.tsx
@@ -14,14 +14,24 @@ import {
   useGetPartTimeEmployPermit,
   useGetStandardLaborContract,
 } from '@/hooks/api/useDocument';
-
+import EmployeeInfoSection from '@/components/Document/write/EmployeeInfoSection';
+import {
+  mockIntegratedApplication,
+  mockLaborContractEmployeeInfo,
+  sampleLaborContract,
+} from '../../constants/documents';
+import InfoAlert from '@/components/Document/write/InfoAlert';
+import IntegratedApplicationPreview from '@/components/Document/write/IntegratedApplicationPreview';
 const DocumentPreview = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { type } = location.state || {};
   const [document, setDocument] = useState<
     PartTimePermitData | LaborContractDataResponse | IntegratedApplicationData
-  >();
+  >(
+    mockIntegratedApplication
+    //employer_information: sampleLaborContract,
+  );
   const { mutate: getPartTimeEmployPermit } = useGetPartTimeEmployPermit({
     onSuccess: (data) => setDocument(data),
   });
@@ -31,7 +41,8 @@ const DocumentPreview = () => {
   const { mutate: getIntegratedApplication } = useGetIntegratedApplication({
     onSuccess: (data) => setDocument(data),
   });
-  useEffect(() => {
+  {
+    /*  useEffect(() => {
     switch (type) {
       case DocumentType.PART_TIME_PERMIT:
         getPartTimeEmployPermit(1);
@@ -43,34 +54,61 @@ const DocumentPreview = () => {
         getIntegratedApplication(1);
         break;
     }
-  }, [type]);
+  }, [type]); */
+  }
 
-  const hasEmployerInfo = (
+  const hasInfo = (
     doc:
       | PartTimePermitData
       | LaborContractDataResponse
       | IntegratedApplicationData,
+    properties: ('employer_information' | 'employee_information')[] = [
+      'employer_information',
+      'employee_information',
+    ],
   ): doc is PartTimePermitData | LaborContractDataResponse => {
-    return 'employer_information' in doc;
+    return properties.every((prop) => prop in doc);
   };
 
+  const renderDocument = (
+    document: PartTimePermitData | LaborContractDataResponse,
+  ) => {
+    return (
+      <EmployeeInfoSection
+        employee={document.employee_information}
+        type={type as DocumentType}
+      />
+    );
+  };
   return (
-    <div>
+    <div className="last:pb-[10rem]">
       <BaseHeader
         hasBackButton={true}
         hasMenuButton={true}
         title="Fill in document"
         onClickBackButton={() => navigate('/application-documents')}
       />
       <DocumentSubHeader type={type as DocumentType} />
+      {type === DocumentType.INTEGRATED_APPLICATION ? (
+        <IntegratedApplicationPreview
+          document={document as IntegratedApplicationData}
+        />
+      ) : (
+        renderDocument(
+          document as PartTimePermitData | LaborContractDataResponse,
+        )
+      )}
       {type !== DocumentType.INTEGRATED_APPLICATION &&
         document &&
-        hasEmployerInfo(document) &&
+        hasInfo(document, ['employer_information']) &&
         document.employer_information && (
-          <EmployerInfoSection
-            employ={document.employer_information}
-            type={DocumentType.PART_TIME_PERMIT}
-          />
+          <div className="flex flex-col w-full gap-4 px-6">
+            <InfoAlert content="Make sure that the information written by the employer is correct." />
+            <EmployerInfoSection
+              employ={document.employer_information}
+              type={type}
+            />
+          </div>
         )}
     </div>
   );

diff --git a/src/router.tsx b/src/router.tsx
@@ -21,6 +21,7 @@ import ApplicationDetailPage from '@/pages/ApplicationDetail/ApplicationDetailPa
 import ApplicationResultPage from '@/pages/ApplicationResult/ApplicationResultPage';
 import EmployerPostDetailPage from '@/pages/Employer/PostDetail/EmployerPostDetailPage';
 import RequestModifyPage from './pages/WriteDocuments/RequestModifyPage';
+import DocumentPreview from './pages/WriteDocuments/DocumentPreviewPage';
 
 const Layout = () => {
   const location = useLocation();
@@ -69,6 +70,7 @@ const Router = () => {
             element={<EmployerPostDetailPage />}
           />
           <Route path="/write-documents" element={<WriteDocumentsPage />} />
+          <Route path="/document-preview" element={<DocumentPreview />} />
           <Route path="/request-modify" element={<RequestModifyPage />} />
 
           <Route path="/application" element={<ApplicationPage />} />