feat: 회사 등록 페이지 확인 모달 구현

kakao-tech-campus-2nd-step3 · Nov 14, 2024 · 65cf440 · 65cf440
1 parent a70f18d
commit 65cf440
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/assets/translator/RegisterCompany/registerCompanyData.ts b/src/assets/translator/RegisterCompany/registerCompanyData.ts
@@ -9,6 +9,7 @@ export const registerCompanyData = {
     BRAND: '브랜드',
     REVENUE_PERYEAR: '연 평균 매출액',
     SUBMIT: '등록하기',
+    SUBMIT_CHECK: '회사를 등록하시겠습니까?',
     ERROR: {
       COMPANYNAME: '회사명을 입력해주세요.',
       INDUSTRY_OCCUPATION: '산업/직종을 입력해주세요.',
@@ -25,6 +26,7 @@ export const registerCompanyData = {
     BRAND: 'Thương hiệu',
     REVENUE_PERYEAR: 'Doanh thu hàng năm',
     SUBMIT: 'Đăng ký',
+    SUBMIT_CHECK: 'Bạn có muốn đăng ký công ty không?',
     ERROR: {
       COMPANYNAME: 'Vui lòng nhập tên công ty.',
       INDUSTRY_OCCUPATION: 'Vui lòng nhập ngành nghề.',

diff --git a/src/features/registerCompany/components/CompanyRegistrationForm.tsx b/src/features/registerCompany/components/CompanyRegistrationForm.tsx
@@ -1,5 +1,6 @@
 import { CompanyRequestData, usePostCompany } from '@/apis/registerCompany/hooks/useRegisterCompany';
-import { Button, Flex, Input } from '@/components/common';
+import { Button, Flex, Input, Modal } from '@/components/common';
+import useToggle from '@/hooks/useToggle';
 import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
 import { useState } from 'react';
@@ -17,6 +18,7 @@ const default_inputs = {
 export default function CompanyRegistrationForm() {
   const { t } = useTranslation();
   const mutation = usePostCompany();
+  const [isToggle, toggle] = useToggle();
   const navigate = useNavigate();
   const [inputs, setInputs] = useState<CompanyRequestData>({ ...default_inputs });
   const [file, setFile] = useState<File | null>(null);
@@ -63,7 +65,7 @@ export default function CompanyRegistrationForm() {
     }
   };
 
-  const handlePostCompany = () => {
+  const onClickSubmitButton = () => {
     const newErrors: { [key: string]: string } = {};
 
     if (!name) newErrors.name = t('registerCompany.ERROR.COMPANYNAME');
@@ -74,7 +76,10 @@ export default function CompanyRegistrationForm() {
     setErrors(newErrors);
 
     if (Object.keys(newErrors).length > 0) return;
+    toggle();
+  };
 
+  const onPostCompany = () => {
     const formData = new FormData();
 
     const companyRequest = {
@@ -182,10 +187,17 @@ export default function CompanyRegistrationForm() {
         </Flex>
       </InputWrapper>
       <ButtonWrapper>
-        <Button design="default" onClick={handlePostCompany}>
+        <Button design="default" onClick={onClickSubmitButton}>
           {t('registerCompany.SUBMIT')}
         </Button>
       </ButtonWrapper>
+      {isToggle && (
+        <Modal
+          textChildren={<ModalContainer>{t('registerCompany.SUBMIT_CHECK')}</ModalContainer>}
+          buttonChildren={<CustomBtn onClick={onPostCompany}>{t('registerCompany.SUBMIT')}</CustomBtn>}
+          onClose={toggle}
+        />
+      )}
     </>
   );
 }
@@ -221,3 +233,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;
+`;