feat: 고용주 마이페이지에 회사 등록 버튼 추가

kakao-tech-campus-2nd-step3 · Nov 7, 2024 · 7ddde2e · 7ddde2e
1 parent 6cb193a
commit 7ddde2e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 10 deletions.
diff --git a/src/assets/translator/EmployerMyPage/employerMyPageData.ts b/src/assets/translator/EmployerMyPage/employerMyPageData.ts
@@ -3,13 +3,15 @@ import { Languages } from '../Languages';
 export const employerMyPageData = {
   [Languages.KO]: {
     greeting: '사장님, 안녕하세요!',
+    register_company: '회사 등록',
     register_sign: '사인 등록',
     my_companies: '내 회사',
     total_companies: '총 {{count}} 곳',
     company_info: '회사 정보',
   },
   [Languages.VE]: {
     greeting: 'Chủ doanh nghiệp, xin chào!',
+    register_company: 'Đăng ký công ty',
     register_sign: 'Đăng ký chữ ký',
     my_companies: 'Công ty của tôi',
     total_companies: 'Tổng cộng {{count}} công ty',

diff --git a/src/pages/myPage/employer/EmPloyerMyPage.tsx b/src/pages/myPage/employer/EmPloyerMyPage.tsx
@@ -1,7 +1,14 @@
 import { Button, Flex, Icon, InnerContainer, Spinner, Typo } from '@/components/common';
 import Layout from '@/features/layout';
 import CompanyList from '@/pages/myPage/employer/Companies/CompanyList';
-import { flexStyle, innerContainerStyle, signButtonStyle, spinnerFlexStyle, typoStyle } from './EmployerMyPage.styles';
+import {
+  flexStyle,
+  innerContainerStyle,
+  buttonStyle,
+  spinnerFlexStyle,
+  typoStyle,
+  buttonGroupStyle,
+} from './EmployerMyPage.styles';
 import { useGetMyCompanies } from '@/apis/companies/hooks/useGetMyCompanies';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
@@ -16,6 +23,10 @@ export default function EmployerMyPage() {
     navigate(ROUTE_PATH.REGISTERSIGN);
   };
 
+  const goToRegisterCompanyPage = () => {
+    navigate(ROUTE_PATH.REGISTERCOMPANY);
+  };
+
   return (
     <Layout>
       <div>
@@ -25,14 +36,24 @@ export default function EmployerMyPage() {
               <Typo element="h2" size="36px" style={typoStyle} bold>
                 {t('employerMyPage.greeting')}
               </Typo>
-              <Button design="outlined" css={signButtonStyle} onClick={goToSignPage}>
-                <Flex justifyContent="space-between">
-                  <Typo size="20px" bold>
-                    {t('employerMyPage.register_sign')}
-                  </Typo>
-                  <Icon.EmployeePage.Pen />
-                </Flex>
-              </Button>
+              <Flex justifyContent="flex-end" alignItems="center" gap={{ x: '20px' }} css={buttonGroupStyle}>
+                <Button design="outlined" css={buttonStyle} onClick={goToRegisterCompanyPage}>
+                  <Flex justifyContent="space-between">
+                    <Typo size="20px" bold>
+                      {t('employerMyPage.register_company')}
+                    </Typo>
+                    <Icon.EmployeePage.Bag />
+                  </Flex>
+                </Button>
+                <Button design="outlined" css={buttonStyle} onClick={goToSignPage}>
+                  <Flex justifyContent="space-between">
+                    <Typo size="20px" bold>
+                      {t('employerMyPage.register_sign')}
+                    </Typo>
+                    <Icon.EmployeePage.Pen />
+                  </Flex>
+                </Button>
+              </Flex>
             </Flex>
             {isLoading ? (
               <Flex justifyContent="center" alignItems="center" css={spinnerFlexStyle}>

diff --git a/src/pages/myPage/employer/EmployerMyPage.styles.ts b/src/pages/myPage/employer/EmployerMyPage.styles.ts
@@ -44,7 +44,25 @@ export const typoStyle = {
   }),
 };
 
-export const signButtonStyle = css`
+export const buttonGroupStyle = css`
+  ${responsiveStyle({
+    default: {
+      maxWidth: '650px',
+    },
+    tablet: {
+      flexDirection: 'column',
+      alignItems: 'flex-end',
+      gap: '15px',
+      maxWidth: '320px',
+    },
+    mobile: {
+      alignItems: 'center',
+      gap: '10px',
+    },
+  })}
+`;
+
+export const buttonStyle = css`
   width: 300px;
   padding: 25px;
   border-radius: 8px;