🐛 fix: igw-55/127 - 유학생/고용주 서류작성 버그 해결

src/components/Common/Input.tsx

@@ -85,7 +85,7 @@ const Input = ({
 
   return (
     <div
-      className={`w-full flex gap-2 items-center justify-between text-left body-2 border rounded-xl ${inputStyler(currentStatus)} bg-white py-[10px] pl-4 pr-[14px]`}
+      className={`w-full flex gap-2 whitespace-nowrap items-center justify-between text-left body-2 border rounded-xl ${inputStyler(currentStatus)} bg-white py-[10px] pl-4 pr-[14px]`}
     >
       {/* 접두사가 존재할 경우 표시합니다. */}
       {isPrefix && <div className="w-8 body-2 text-[#464646]">{prefix}</div>}

src/components/Document/DocumentCard.tsx

@@ -8,8 +8,14 @@ import DownloadIcon from '@/assets/icons/DownloadIcon.svg?react';
 import CheckIconGreen from '@/assets/icons/CheckIconGreen.svg?react';
 import WriteIcon from '@/assets/icons/WriteIcon.svg?react';
 import { useNavigate } from 'react-router-dom';
-import { usePatchDocumentsStatusConfirmation, usePatchStatusSubmission } from '@/hooks/api/useDocument';
-import { useCurrentDocumentIdStore, useCurrentPostIdEmployeeStore } from '@/store/url';
+import {
+  usePatchDocumentsStatusConfirmation,
+  usePatchStatusSubmission,
+} from '@/hooks/api/useDocument';
+import {
+  useCurrentDocumentIdStore,
+  useCurrentPostIdEmployeeStore,
+} from '@/store/url';
 
 const enum DocumentStatus {
   TEMPORARY_SAVE = 'TEMPORARY_SAVE',
@@ -42,8 +48,8 @@ const TemporarySaveCard = ({
       <div className="self-stretch rounded-t-[1.125rem] bg-[#fef387] h-7 flex items-center justify-between px-4 pl-6 py-2 relative">
         <div className="flex items-center justify-start relative ">
           Check my Work Permit Form
+          <div className="w-1.5 absolute !m-0 top-[-0.3rem] right-[-0.5rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
         </div>
-        <div className="w-1.5 absolute !m-0 top-[0.4rem] left-[8rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
         <div className="w-[0.75rem] relative h-[0.75rem] z-[2]">
           <div
             className="absolute w-full h-full top-0 righ-0 bottom-0 left-0"
@@ -114,13 +120,12 @@ const BeforeConfirmationCard = ({
       <div className="self-stretch rounded-t-[1.125rem] bg-[#fef387] h-7 flex items-center justify-between px-4 pl-6 py-2 relative">
         <div className="flex items-center justify-start relative ">
           Check my Work Permit Form
+          <div className="w-1.5 absolute !m-0 top-[-0.3rem] right-[-0.5rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
         </div>
-        <div className="w-1.5 absolute !m-0 top-[0.4rem] left-[8rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
-        <div className="w-[0.75rem] relative h-[0.75rem] z-[2]">
-          <div
-            className="absolute w-full h-full top-0 righ-0 bottom-0 left-0"
-            onClick={onPreview}
-          />
+        <div
+          className="pl-1 w-[1.25rem] relative h-[1.25rem] z-[2]"
+          onClick={onPreview}
+        >
           <ArrowrightIcon />
         </div>
       </div>
@@ -271,13 +276,12 @@ const ConfirmationCard = ({
       <div className="self-stretch rounded-t-[1.125rem] bg-[#fef387] h-7 flex items-center justify-between px-4 pl-6 py-2 relative">
         <div className="flex items-center justify-start relative ">
           Check my Work Permit Form
+          <div className="w-1.5 absolute !m-0 top-[-0.3rem] right-[-0.5rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
         </div>
-        <div className="w-1.5 absolute !m-0 top-[0.4rem] left-[8rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
-        <div className="w-[0.75rem] relative h-[0.75rem] z-[2]">
-          <div
-            className="absolute w-full h-full top-0 righ-0 bottom-0 left-0"
-            onClick={onPreview}
-          />
+        <div
+          className="pl-1 w-[1.25rem] relative h-[1.25rem] z-[2]"
+          onClick={onPreview}
+        >
           <ArrowrightIcon />
         </div>
       </div>
@@ -350,8 +354,8 @@ const DocumentCardDispenser = ({
   const { mutate: confirmDocument } = usePatchDocumentsStatusConfirmation();
   const navigate = useNavigate();
   const { updateCurrentDocumentId } = useCurrentDocumentIdStore();
-  const { currentPostId }= useCurrentPostIdEmployeeStore();
-  console.log(`current: ${currentPostId}`) // 지원자 조회 - 지원자 상세 - 서류 상세 간 뒤로가기 문제 관련
+  const { currentPostId } = useCurrentPostIdEmployeeStore();
+  console.log(`current: ${currentPostId}`); // 지원자 조회 - 지원자 상세 - 서류 상세 간 뒤로가기 문제 관련
   const handleDownload = (url: string) => {
     window.open(url, '_blank');
   };

src/components/Document/write/EmployerInfoSection.tsx

@@ -60,7 +60,9 @@ const EmployerInfoSection = ({
                 ].includes(key) && (
                   <div className="w-full self-stretch drop-shadow-[0_1px_2px_rgba(107,110,116,0.04)] rounded-xl flex items-center justify-start py-2.5 pr-3.5 pl-4">
                     <div className="w-full flex-1 relative">
-                      {propertyToString(String(value))}
+                      {propertyToString(String(value)) === 'Null'
+                        ? 'none'
+                        : propertyToString(String(value))}
                     </div>
                   </div>
                 )}

src/components/Employer/ApplicantDocumentsDetail/DocumentCardDispenserEmployer.tsx

@@ -20,11 +20,7 @@ type DocumentCardProps = {
   onNext?: () => void;
 };
 
-const NullCard = ({
-  title,
-}: {
-  title: string;
-}) => {
+const NullCard = ({ title }: { title: string }) => {
   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]">
       <div className="self-stretch rounded-t-[1.125rem] bg-[#1e1926] h-7 flex items-center justify-between px-4 pl-6 py-2 relative">
@@ -67,20 +63,24 @@ const TemporarySaveCard = ({
   title,
   onNext,
   onEdit,
+  onPreview,
 }: {
   title: string;
   onNext: () => void;
   onEdit: () => void;
+  onPreview: () => 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]">
       <div className="self-stretch rounded-t-[1.125rem] bg-[#fef387] h-7 flex items-center justify-between px-4 pl-6 py-2 relative">
         <div className="flex items-center justify-start relative ">
-          클릭해서 서류 내용을 확인해보세요
+          클릭해서 서류 내용을 확인해보세요.
+          <div className="w-1.5 absolute !m-0 top-[-0.3rem] right-[-0.5rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
         </div>
-        <div className="w-1.5 absolute !m-0 top-[0.4rem] left-[8rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
-        <div className="w-[0.75rem] relative h-[0.75rem] z-[2]">
-          <div className="absolute w-full h-full top-0 righ-0 bottom-0 left-0" />
+        <div
+          className="pl-1 w-[1.25rem] relative h-[1.25rem] z-[2]"
+          onClick={onPreview}
+        >
           <ArrowrightIcon />
         </div>
       </div>
@@ -129,7 +129,8 @@ const TemporarySaveCard = ({
   );
 };
 
-{/* 
+{
+  /* 
   const BeforeConfirmationCard = ({ title }: { title: string }) => {
   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]">
@@ -168,7 +169,8 @@ const TemporarySaveCard = ({
     </div>
   );
 };
-  */}
+  */
+}
 
 const SubmittedCard = ({ title }: { title: string }) => {
   return (
@@ -213,22 +215,26 @@ const RewritingCard = ({
   title,
   onNext,
   onEdit,
+  onPreview,
   reason,
 }: {
   title: string;
   onNext: () => void;
   onEdit: () => void;
+  onPreview: () => void;
   reason: string;
 }) => {
   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]">
       <div className="self-stretch rounded-t-[1.125rem] bg-[#fef387] h-7 flex items-center justify-between px-4 pl-6 py-2 relative">
         <div className="flex items-center justify-start relative ">
-          Check my Work Permit Form
+          클릭해서 서류 내용을 확인해보세요.
+          <div className="w-1.5 absolute !m-0 top-[-0.3rem] right-[-0.5rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
         </div>
-        <div className="w-1.5 absolute !m-0 top-[0.4rem] left-[8rem] rounded-full bg-[#ff6f61] h-1.5 z-[1]" />
-        <div className="w-[0.75rem] relative h-[0.75rem] z-[2]">
-          <div className="absolute w-full h-full top-0 righ-0 bottom-0 left-0" />
+        <div
+          className="pl-1 w-[1.25rem] relative h-[1.25rem] z-[2]"
+          onClick={onPreview}
+        >
           <ArrowrightIcon />
         </div>
       </div>
@@ -282,6 +288,7 @@ const ConfirmationCard = ({
 }: {
   title: string;
   document: EmployDocumentInfo;
+
   onDownload: (url: string) => void;
 }) => {
   return (
@@ -290,10 +297,6 @@ const ConfirmationCard = ({
         <div className="flex items-center justify-start relative text-[#fef387]">
           서류 작성이 완료되었습니다.
         </div>
-        <div className="w-[0.75rem] relative h-[0.75rem] z-[2]">
-          <div className="absolute w-full h-full top-0 righ-0 bottom-0 left-0" />
-          <ArrowrightIcon />
-        </div>
       </div>
       <div className="self-stretch flex flex-col items-start px-4 gap-4 body-1">
         <div className="self-stretch border-b border-[#dcdcdc] h-10 flex items-center justify-center pl-2 pb-2 gap-4">
@@ -360,7 +363,7 @@ const DocumentCardDispenserEmployer = ({
   const handleDownload = (url: string) => {
     window.open(url, '_blank');
   };
-  const {updateCurrentDocumentId} = useCurrentDocumentIdStore();
+  const { updateCurrentDocumentId } = useCurrentDocumentIdStore();
   const { mutate: submitDocument } = usePatchStatusSubmissionEmployer();
   if (!document.status) return <NullCard title={title} />;
   switch (document.status) {
@@ -378,6 +381,14 @@ const DocumentCardDispenserEmployer = ({
               },
             });
           }}
+          onPreview={() => {
+            updateCurrentDocumentId(document.id);
+            navigate(`/document-preview/${document.id}`, {
+              state: {
+                type: type,
+              },
+            });
+          }}
         />
       );
     case DocumentStatusEmployer.SUBMITTED:
@@ -398,6 +409,14 @@ const DocumentCardDispenserEmployer = ({
                 },
               });
             }}
+            onPreview={() => {
+              updateCurrentDocumentId(document.id);
+              navigate(`/document-preview/${document.id}`, {
+                state: {
+                  type: type,
+                },
+              });
+            }}
           />
         );
       break;

src/components/Employer/WriteDocument/EmployeeInfoSectionKOR.tsx

@@ -11,7 +11,7 @@ import {
   LaborContractEmployeeInfoProperty,
 } from '@/types/api/document';
 import { Address } from '@/types/api/users';
-import { getDetailAddress, getImageType } from '@/utils/document';
+import { getDetailAddress } from '@/utils/document';
 import { renderMap } from '@/utils/map';
 
 const EmployeeInfoSectionKOR = ({
@@ -70,8 +70,8 @@ const EmployeeInfoSectionKOR = ({
                   <div className="border border-gray-200 rounded-xl">
                     {value !== '' && (
                       <img
-                        src={`data:image/${getImageType(value)};base64,${value}`}
-                        className="w-full h-full object-cover"
+                        src={`data:image/svg+xml;base64,${value}`}
+                        className="w-full h-full object-cover bg-white rounded-xl"
                         alt="signature preview"
                       />
                     )}

src/components/Employer/WriteDocument/EmployerLaborContractForm.tsx

@@ -4,7 +4,7 @@ import InputLayout from '@/components/WorkExperience/InputLayout';
 import {
   DAYS,
   initialLaborContractEmployerInfo,
-  INSURANCES,
+  InsuranceInfo,
 } from '@/constants/documents';
 import { useSearchAddress } from '@/hooks/api/useKaKaoMap';
 import {
@@ -112,10 +112,6 @@ const EmployerLaborContractForm = ({
 
   /* 정보 입력 시마다 유효성을 검사해 모든 값이 유효하면 버튼이 활성화 */
   useEffect(() => {
-    {
-      /* work_day_time_list 데이터가 안 들어가서 계속 유효성 실패 중 */
-    }
-    console.log(newDocumentData.work_day_time_list);
     setIsInvalid(
       !validateLaborContractEmployerInformation({
         ...newDocumentData,
@@ -608,40 +604,53 @@ const EmployerLaborContractForm = ({
           isEssential
         >
           <div className="w-full flex">
-            {Object.keys(INSURANCES).map((value, index) => (
-              <div
-                className="w-full relative flex items-center justify-start py-2 gap-2 text-left body-3 text-[#656565]"
-                key={`${value}_${index}`}
-              >
-                <div className="w-6 h-6 relative">
-                  <div
-                    className={`w-full h-full border border-[#f4f4f9] flex items-center justify-center ${newDocumentData.insurance.includes(value as Insurance) ? 'bg-[#1E1926]' : 'bg-white'}`}
-                    onClick={() => {
-                      const newInsurance = newDocumentData.insurance.includes(
-                        value as Insurance,
-                      )
-                        ? newDocumentData.insurance.filter(
-                            (insurance) => insurance !== value,
-                          )
-                        : [...newDocumentData.insurance, value];
+            {Object.entries(InsuranceInfo).map(
+              ([insuranceType, info], index) => (
+                <div
+                  className="w-full relative flex items-center justify-start py-2 gap-2 text-left body-3 text-[#656565]"
+                  key={`${insuranceType}_${index}`}
+                >
+                  <div className="w-6 h-6 relative">
+                    <div
+                      className={`w-full h-full border border-[#f4f4f9] flex items-center justify-center ${
+                        newDocumentData.insurance.includes(
+                          info.key as Insurance,
+                        )
+                          ? 'bg-[#1E1926]'
+                          : 'bg-white'
+                      }`}
+                      onClick={() => {
+                        const newInsurance = newDocumentData.insurance.includes(
+                          info.key as Insurance,
+                        )
+                          ? newDocumentData.insurance.filter(
+                              (insurance) => insurance !== info.key,
+                            )
+                          : [
+                              ...newDocumentData.insurance,
+                              info.key as Insurance,
+                            ];
 
-                      setNewDocumentData({
-                        ...newDocumentData,
-                        insurance: newInsurance as Insurance[],
-                      });
-                    }}
-                  >
-                    <CheckIcon />
+                        setNewDocumentData({
+                          ...newDocumentData,
+                          insurance: newInsurance,
+                        });
+                      }}
+                    >
+                      <CheckIcon />
+                    </div>
+                  </div>
+                  <div className="flex items-start justify-start">
+                    {info.name}
                   </div>
                 </div>
-                <div className="flex items-start justify-start">{value}</div>
-              </div>
-            ))}
+              ),
+            )}
           </div>
         </InputLayout>
         {/* 서명 입력 */}
         <InputLayout title="서명" isEssential>
-          <SignaturePad
+        <SignaturePad
             onSave={(signature: string) =>
               setNewDocumentData({
                 ...newDocumentData,
@@ -655,6 +664,7 @@ const EmployerLaborContractForm = ({
               })
             }
             isKorean
+            previewImg={newDocumentData.signature_base64}
           />
         </InputLayout>
       </div>

src/components/Home/HomeHeader.tsx

@@ -15,8 +15,6 @@ const HomeHeader = () => {
     return isRead;
   };
 
-  if (!data?.success) return <></>;
-
   return (
     <section className="w-full pt-[3.125rem] pb-[1rem] px-[1.5rem] bg-[#FEF387]">
       <p className="pb-[0.375rem] body-2 text-[#37383C9C]">
@@ -40,7 +38,7 @@ const HomeHeader = () => {
           >
             <AlarmIcon />
             {/* 알람이 있을 때만 표시하기 */}
-            {isReadAlarms(data?.data?.notification_list) ? (
+            {data?.success && isReadAlarms(data?.data?.notification_list) ? (
               <div className="absolute top-[0.3rem] right-[0.4rem] w-[0.438rem] h-[0.438rem] rounded-full bg-[#FF6F61]"></div>
             ) : (
               <></>