From 208d71922960498a1a4fe05c47b5113f65caaeac Mon Sep 17 00:00:00 2001
From: YIMSEBIN <jij09123@gmail.com>
Date: Fri, 15 Nov 2024 04:54:53 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B5=AC=EC=9D=B8=EA=B8=80=20=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=99=95=EC=9D=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../translator/PostNotice/postNoticeData.ts   |  2 ++
 .../postNotice/components/PostNoticeForm.tsx  | 33 ++++++++++++++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/assets/translator/PostNotice/postNoticeData.ts b/src/assets/translator/PostNotice/postNoticeData.ts
index bc20723..6e52f55 100644
--- a/src/assets/translator/PostNotice/postNoticeData.ts
+++ b/src/assets/translator/PostNotice/postNoticeData.ts
@@ -33,6 +33,7 @@ export const postNoticeData = {
       ELIGIBILITY_CRITERIA: '비자 자격 요건을 입력해주세요.',
       PREFERRED_CONDITIONS: '우대사항을 입력해주세요.',
     },
+    SUBMIT_CHECK: '구인글을 등록하시겠습니까?',
     SUBMIT: '등록하기',
   },
   [Languages.VE]: {
@@ -67,6 +68,7 @@ export const postNoticeData = {
       ELIGIBILITY_CRITERIA: 'Vui lòng nhập yêu cầu về điều kiện visa.',
       PREFERRED_CONDITIONS: 'Vui lòng nhập điều kiện ưu tiên.',
     },
+    SUBMIT_CHECK: 'Bạn có muốn đăng bài tuyển dụng không?',
     SUBMIT: 'Đăng ký',
   },
 };
diff --git a/src/features/postNotice/components/PostNoticeForm.tsx b/src/features/postNotice/components/PostNoticeForm.tsx
index 0f85429..0d2956c 100644
--- a/src/features/postNotice/components/PostNoticeForm.tsx
+++ b/src/features/postNotice/components/PostNoticeForm.tsx
@@ -1,5 +1,6 @@
 import { usePostNotice } from '@/apis/postNotice/hooks/usePostNotice';
-import { Button, Input } from '@/components/common';
+import { Button, Input, Modal } from '@/components/common';
+import useToggle from '@/hooks/useToggle';
 import ROUTE_PATH from '@/routes/path';
 import { NoticeRequestData } from '@/types';
 import styled from '@emotion/styled';
@@ -33,6 +34,8 @@ export default function PostNoticeForm() {
 
   const [inputs, setInputs] = useState({ ...default_inputs });
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const [isToggle, toggle] = useToggle();
+  inputs.companyId = Number(curCompanyId);
 
   const {
     title,
@@ -74,7 +77,7 @@ export default function PostNoticeForm() {
     });
   };
 
-  const handlePostNotice = () => {
+  const onClickSubmitButton = () => {
     const newErrors: { [key: string]: string } = {};
 
     if (!title) newErrors.title = t('postNotice.ERROR.NOTICE_TITLE');
@@ -94,9 +97,10 @@ export default function PostNoticeForm() {
 
     setErrors(newErrors);
     if (Object.keys(newErrors).length > 0) return;
+    toggle();
+  };
 
-    inputs.companyId = Number(curCompanyId);
-
+  const onPostNotice = () => {
     mutation.mutate(inputs, {
       onSuccess: () => {
         navigate(ROUTE_PATH.HOME);
@@ -264,9 +268,16 @@ export default function PostNoticeForm() {
         />
         {errors.preferredConditions && <ErrorText>{errors.preferredConditions}</ErrorText>}
       </InputContainer>
-      <Button onClick={handlePostNotice} design="default" style={{ marginTop: '52px' }}>
+      <Button onClick={onClickSubmitButton} design="default" style={{ marginTop: '52px' }}>
         {t('postNotice.SUBMIT')}
       </Button>
+      {isToggle && (
+        <Modal
+          textChildren={<ModalContainer>{t('postNotice.SUBMIT_CHECK')}</ModalContainer>}
+          buttonChildren={<CustomBtn onClick={onPostNotice}>{t('postNotice.SUBMIT')}</CustomBtn>}
+          onClose={toggle}
+        />
+      )}
     </>
   );
 }
@@ -288,3 +299,15 @@ const ErrorText = styled.span`
   font-size: 12px;
   margin-top: 5px;
 `;
+
+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;
+`;