feat: 고용주 근로계약서 확인 모달 구현

kakao-tech-campus-2nd-step3 · Nov 14, 2024 · 7b947d0 · 7b947d0
1 parent 208d719
commit 7b947d0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/src/assets/translator/Contract/contractData.ts b/src/assets/translator/Contract/contractData.ts
@@ -13,6 +13,7 @@ export const contractData = {
     SENTENCE1: '사용자와 근로자는 각자가 근로계약, 취업규칙, 단체협약을 지키고 성실하게 이행하여야 한다.',
     SENTENCE2: "이 계약에서 정하지 않은 사항은 '근로기준법'에서 정하는 바에 따른다.",
     SIGN: '서명하기',
+    SUBMIT_CHECK: '정말 제출하시겠습니까?',
     SUBMIT: '제출하기',
     ERROR: {
       WORKING_PLACE: '근무장소를 작성해주세요.',
@@ -39,6 +40,7 @@ export const contractData = {
       'Người sử dụng lao động và người lao động cần tuân thủ hợp đồng lao động, quy tắc lao động và thỏa thuận tập thể một cách nghiêm túc.',
     SENTENCE2: 'Các điều khoản không được quy định trong hợp đồng này sẽ được điều chỉnh theo "Luật lao động".',
     SIGN: 'Ký tên',
+    SUBMIT_CHECK: 'Bạn có chắc chắn muốn nộp không?',
     SUBMIT: 'Gửi đi',
     ERROR: {
       WORKING_PLACE: 'Vui lòng điền nơi làm việc.',

diff --git a/src/features/contract/EmployerContract/components/ContractRegistrationForm.tsx b/src/features/contract/EmployerContract/components/ContractRegistrationForm.tsx
@@ -1,5 +1,6 @@
 import { useFetchPostContract } from '@/apis/contract/hooks/usePostContract';
-import { Button, Input, Typo } from '@/components/common';
+import { Button, Input, Modal, Typo } from '@/components/common';
+import useToggle from '@/hooks/useToggle';
 import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
 import { useState } from 'react';
@@ -22,9 +23,9 @@ export default function ContractRegistrationForm() {
   const mutation = useFetchPostContract();
   const navigate = useNavigate();
 
+  const [isToggle, toggle] = useToggle();
   const [isSigned, setIsSigned] = useState(false);
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
-
   const [inputs, setInputs] = useState({ ...default_inputs });
 
   const { salary, workingHours, dayOff, annualPaidLeave, workingPlace, responsibilities, rule } = inputs;
@@ -50,7 +51,7 @@ export default function ContractRegistrationForm() {
     });
   };
 
-  const handlePostContract = () => {
+  const onClickSubmitButton = () => {
     const newErrors: { [key: string]: string } = {};
 
     if (!salary) newErrors.salary = t('contract.ERROR.SALARY');
@@ -65,7 +66,10 @@ export default function ContractRegistrationForm() {
     setErrors(newErrors);
 
     if (Object.keys(newErrors).length > 0) return;
+    toggle();
+  };
 
+  const onPostContract = () => {
     const postData = { ...inputs, applyId: Number(`${applicationId}`) };
 
     mutation.mutate(postData, {
@@ -174,11 +178,18 @@ export default function ContractRegistrationForm() {
           <TypoWrapper isSigned={isSigned}>{t('contract.SIGN')}</TypoWrapper>
           {isSigned && <CheckIcon>✅</CheckIcon>}
         </SignButton>
-        <Button design="default" onClick={handlePostContract}>
+        <Button design="default" onClick={onClickSubmitButton}>
           {t('contract.SUBMIT')}
         </Button>
       </ButtonWrapper>
       {!isSigned && errors.sign && <ErrorText>{errors.sign}</ErrorText>}
+      {isToggle && (
+        <Modal
+          textChildren={<ModalContainer>{t('contract.SUBMIT_CHECK')}</ModalContainer>}
+          buttonChildren={<CustomBtn onClick={onPostContract}>{t('contract.SUBMIT')}</CustomBtn>}
+          onClose={toggle}
+        />
+      )}
     </>
   );
 }
@@ -234,3 +245,15 @@ const ErrorText = styled.span`
 `;
 
 const InputStyle = { width: '450px', height: '48px' };
+
+const CustomBtn = styled(Button)`
+  background: #0a65cc;
+  color: white;
+  border: 1px solid #e4e5e8;
+  align-self: center;
+`;
+
+const ModalContainer = styled.div`
+  font-size: 24px;
+  margin: 30px 30px;
+`;