Merge pull request #132 from KimJi-An/refactor/#130

Refactor/#130 채용공고 등록 버튼 위치 조정
kakao-tech-campus-2nd-step3 · Nov 11, 2024 · b18e3b8 · b18e3b8
2 parents 8f533c7 + 38a4c3c
commit b18e3b8
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 36 deletions.
diff --git a/src/assets/translator/Applicants/applicantsData.ts b/src/assets/translator/Applicants/applicantsData.ts
@@ -2,7 +2,6 @@ import { Languages } from '../Languages';
 
 export const applicantsData = {
   [Languages.KO]: {
-    salary: '시급',
     applicant_list: '지원자 목록',
     total_applicants: '총 {{count}}명',
     view_details: '자세히 보러가기',
@@ -17,7 +16,6 @@ export const applicantsData = {
     },
   },
   [Languages.VE]: {
-    salary: 'Lương theo giờ',
     applicant_list: 'Danh sách ứng viên',
     total_applicants: 'Tổng cộng {{count}} người',
     view_details: 'Xem chi tiết',

diff --git a/src/assets/translator/Header/headerData.ts b/src/assets/translator/Header/headerData.ts
@@ -2,12 +2,10 @@ import { Languages } from '../Languages';
 
 export const headerData = {
   [Languages.KO]: {
-    post_notice: '채용공고 등록',
     login: '로그인',
     logout: '로그아웃',
   },
   [Languages.VE]: {
-    post_notice: 'Đăng thông báo tuyển dụng',
     login: 'Đăng nhập',
     logout: 'Đăng xuất',
   },

diff --git a/src/assets/translator/MyCompany/myCompanyData.ts b/src/assets/translator/MyCompany/myCompanyData.ts
@@ -2,6 +2,7 @@ import { Languages } from '../Languages';
 
 export const myCompanyData = {
   [Languages.KO]: {
+    post_notice: '채용공고 등록',
     my_recruitments: '내 공고글',
     total_recruitments: '총 {{count}}건',
     table_headers: {
@@ -15,6 +16,7 @@ export const myCompanyData = {
     },
   },
   [Languages.VE]: {
+    post_notice: 'Đăng thông báo tuyển dụng',
     my_recruitments: 'Thông báo tuyển dụng của tôi',
     total_recruitments: 'Tổng cộng {{count}} bài',
     table_headers: {

diff --git a/src/features/layout/Header/index.styles.ts b/src/features/layout/Header/index.styles.ts
@@ -93,11 +93,6 @@ export const Nav = styled.nav<NavProps>`
   }
 `;
 
-export const commonButtonStyle = {
-  whiteSpace: 'nowrap',
-  borderRadius: '4px',
-};
-
 export const imageStyle = css`
   width: 40px;
   height: 40px;
@@ -106,7 +101,8 @@ export const imageStyle = css`
 `;
 
 export const customButtonStyle = {
-  ...commonButtonStyle,
+  whiteSpace: 'nowrap',
+  borderRadius: '4px',
   backgroundColor: `${palettes.blue}`,
   color: `${palettes.white}`,
 };
diff --git a/src/features/layout/Header/index.tsx b/src/features/layout/Header/index.tsx
@@ -4,16 +4,7 @@ import Button from '@components/common/Button';
 import { Flex, Image } from '@/components/common';
 import useToggle from '@/hooks/useToggle';
 import LanguageFilter from './components/LanguageFilter';
-import {
-  commonButtonStyle,
-  customButtonStyle,
-  flexStyle,
-  HeaderContainer,
-  imageStyle,
-  LogoImg,
-  menuIconStyle,
-  Nav,
-} from './index.styles';
+import { customButtonStyle, flexStyle, HeaderContainer, imageStyle, LogoImg, menuIconStyle, Nav } from './index.styles';
 import { startTransition } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
@@ -44,10 +35,6 @@ export default function Header() {
     navigate(ROUTE_PATH.HOME);
   };
 
-  const goToPostNotice = () => {
-    navigate(ROUTE_PATH.POST_NOTICE);
-  };
-
   const goToMyPage = () => {
     if (user?.type === 'employer') {
       navigate(ROUTE_PATH.MY_PAGE.EMPLOYER);
@@ -71,11 +58,6 @@ export default function Header() {
             </Button>
           ) : (
             <>
-              {user.type === 'employer' && (
-                <Button design="outlined" style={commonButtonStyle} onClick={goToPostNotice}>
-                  {t('header.post_notice')}
-                </Button>
-              )}
               <Flex justifyContent="center" alignItems="center" onClick={goToMyPage}>
                 <Image url={user.profileImage} size={{ width: '40px', height: '40px' }} css={imageStyle} />
               </Flex>

diff --git a/src/pages/myCompanyPage/MyCompany.tsx b/src/pages/myCompanyPage/MyCompany.tsx
@@ -1,16 +1,27 @@
 import Layout from '@/features/layout';
-import { Flex, InnerContainer, Image } from '@/components/common';
+import { Flex, InnerContainer, Image, Button } from '@/components/common';
 import CompanyInfo from '@/pages/myPage/employer/Companies/CompanyInfo';
 import { companyWrapperStyle, imageStyle, innerContainerStyle } from './MyCompany.styles';
 import RecruitmentList from '@/pages/myCompanyPage/Recruitments/RecruitmentList';
 import { CompanyData, RecruitmentItem } from '@/types';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
 
 interface MyCompanyProps {
-  companyData: CompanyData | null;
+  companyData: CompanyData;
   recruitmentsData: RecruitmentItem[] | null;
+  companyId: string;
 }
 
-export default function MyCompany({ companyData, recruitmentsData }: MyCompanyProps) {
+export default function MyCompany({ companyData, recruitmentsData, companyId }: MyCompanyProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const goToPostNotice = () => {
+    navigate(ROUTE_PATH.POST_NOTICE.replace(':companyId', companyId));
+  };
+
   return (
     <Layout>
       <div>
@@ -20,6 +31,9 @@ export default function MyCompany({ companyData, recruitmentsData }: MyCompanyPr
               <Flex alignItems="center" gap={{ x: '150px' }} css={companyWrapperStyle}>
                 <Image url={companyData.logoImage} size={{ width: '280px', height: '120px' }} css={imageStyle} />
                 <CompanyInfo {...companyData} />
+                <Button design="outlined" onClick={goToPostNotice} css={{ whiteSpace: 'nowrap' }}>
+                  {t('myCompany.post_notice')}
+                </Button>
               </Flex>
             )}
             {recruitmentsData && <RecruitmentList recruitmentList={recruitmentsData} />}

diff --git a/src/pages/myCompanyPage/MyCompanyPage.tsx b/src/pages/myCompanyPage/MyCompanyPage.tsx
@@ -17,5 +17,5 @@ export default function MyCompanyPage() {
     return <Spinner />;
   }
 
-  return <MyCompany companyData={companyData} recruitmentsData={recruitmentsData} />;
+  return <MyCompany companyData={companyData} recruitmentsData={recruitmentsData} companyId={companyId!} />;
 }
diff --git a/src/pages/myCompanyPage/Recruitments/RecruitmentInfo.tsx b/src/pages/myCompanyPage/Recruitments/RecruitmentInfo.tsx
@@ -54,9 +54,7 @@ export default function RecruitmentInfo({
           </Flex>
           <Flex alignItems="center" gap={{ x: '12px' }}>
             <SalaryIcon />
-            <Typo color="gray">
-              {t('applicants.salary')} {salary}
-            </Typo>
+            <Typo color="gray">{salary}</Typo>
           </Flex>
         </Flex>
       </Flex>