diff --git a/src/assets/translator/RegisterCompany/registerCompanyData.ts b/src/assets/translator/RegisterCompany/registerCompanyData.ts index 718289e..1292254 100644 --- 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 index 853cf34..3a106b8 100644 --- 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({ ...default_inputs }); const [file, setFile] = useState(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() { - + {isToggle && ( + {t('registerCompany.SUBMIT_CHECK')}} + buttonChildren={{t('registerCompany.SUBMIT')}} + 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; +`;