Merge pull request #129 from YIMSEBIN/Weekly

Feat/#128 근로자마이페이지 수정, 유효성검사 및 구인글등록 API 완료

src/apis/contract/hooks/usePostContract.tsx

@@ -3,7 +3,7 @@ import { clientInstance } from '@/apis/instance';
 import { useMutation } from '@tanstack/react-query';
 
 export type ContractRequestData = {
-  salary?: string;
+  salary?: number;
   workingHours?: string;
   dayOff?: string;
   annualPaidLeave?: string;

src/apis/employee/mock/getMyApplication.mock.ts

@@ -1,9 +1,9 @@
 import { http, HttpResponse } from 'msw';
 import { getMyApplicationPath } from '../hooks/useGetMyApplication';
-import { myRecruitList } from '@/pages/myPage/employee/data/index.mock';
+import { myApplicationList } from '@/apis/employee/mock/myApplicationList.mock';
 
 export const EmployeePageMockHandler = [
   http.get(getMyApplicationPath(), () => {
-    return HttpResponse.json(myRecruitList);
+    return HttpResponse.json(myApplicationList);
   }),
 ];

src/pages/myPage/employee/data/index.mock.ts → src/apis/employee/mock/myApplicationList.mock.ts

@@ -1,6 +1,6 @@
 import { MyRecruitListProps } from '@/types';
 
-export const myRecruitList: MyRecruitListProps[] = [
+export const myApplicationList: MyRecruitListProps[] = [
   {
     id: 1,
     image:

src/assets/translator/EmployeeMyPage/employeeMyPageData.ts

@@ -2,17 +2,21 @@ import { Languages } from '../Languages';
 
 export const employeeMyPageData = {
   [Languages.KO]: {
-    REGISTER_RESUME: '이력서 등록하기',
+    REGISTER_RESUME: '이력서 등록',
     REGISTER_SIGN: '사인 등록',
-    REGISTER_VISA: '외국인 번호 및 비자 발급 일자 등록',
+    REGISTER_VISA: '외국인 번호 및 비자 등록',
+    UPDATE_RESUME: '이력서 수정',
+    UPDATE_SIGN: '사인 수정',
+    UPDATE_VISA: '외국인 번호 및 비자 수정',
     MYRECRUITLIST: '내가 지원한 공고',
-    GREETING: '구직자님 안녕하세요!',
   },
   [Languages.VE]: {
     REGISTER_RESUME: 'Đăng ký hồ sơ',
     REGISTER_SIGN: 'Đăng ký chữ ký',
-    REGISTER_VISA: 'Đăng ký số người nước ngoài và ngày cấp visa',
+    REGISTER_VISA: 'Đăng ký số người nước ngoài và visa',
+    UPDATE_RESUME: 'Cập nhật hồ sơ',
+    UPDATE_SIGN: 'Cập nhật chữ ký',
+    UPDATE_VISA: 'Cập nhật số người nước ngoài và visa',
     MYRECRUITLIST: 'Công việc tôi đã ứng tuyển',
-    GREETING: 'Xin chào người tìm việc!',
   },
 };

src/assets/translator/PostNotice/postNoticeData.ts

@@ -3,6 +3,7 @@ import { Languages } from '../Languages';
 export const postNoticeData = {
   [Languages.KO]: {
     TITLE: '구인 글 등록하기',
+    NOTICE_TITLE: '제목',
     COMPANY_NAME: '회사명',
     EMPLOYER_NAME: '담당자명',
     COMPANY_SCALE: '회사규모',
@@ -20,6 +21,7 @@ export const postNoticeData = {
   },
   [Languages.VE]: {
     TITLE: 'Đăng thông báo tuyển dụng',
+    NOTICE_TITLE: 'Tiêu đề',
     COMPANY_NAME: 'Tên công ty',
     EMPLOYER_NAME: 'Tên người phụ trách',
     COMPANY_SCALE: 'Quy mô công ty',

src/components/common/Button/index.tsx

@@ -25,10 +25,10 @@ const Wrapper = styled.button<Props>(
       return {
         backgroundColor: '#fff',
         color: '#0A65CC',
-        border: '2px solid #0A65CC',
+        border: '3px solid #0a65cc',
 
         '&:hover': {
-          backgroundColor: '#0033cc',
+          backgroundColor: '#0a65cc',
           color: '#fff',
         },
       };

src/components/common/Icon/EmployeePage.ts

@@ -1,11 +1,13 @@
 import Bag from '@assets/icons/employeePage/bag.svg?react';
 import Pen from '@assets/icons/employeePage/pen.svg?react';
 import Card from '@assets/icons/employeePage/card.svg?react';
+import Check from '@assets/icons/employeePage/check.svg?react';
 
 const EmployeePage = {
   Bag,
   Pen,
   Card,
+  Check,
 };
 
 export default EmployeePage;

src/components/common/Title/index.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Title from '.';
+
+const meta: Meta<typeof Title> = {
+  title: 'common/Title',
+  component: Title,
+  tags: ['autodocs'],
+  args: {
+    text: '스토리북',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Title>;
+
+export const Default: Story = {};

src/components/common/Title/index.tsx

@@ -0,0 +1,15 @@
+import Typo from '../Typo';
+
+type Props = {
+  text: string;
+  size?: string;
+};
+
+export default function Title({ text, size }: Props) {
+  const fontSize = size ? size : '24px';
+  return (
+    <Typo element="h1" size={fontSize} style={{ fontWeight: 'bold', marginBottom: '24px' }}>
+      {text}
+    </Typo>
+  );
+}

src/features/employee/myPage/ButtonGroup.tsx

@@ -0,0 +1,83 @@
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
+import { Button, Icon, Typo } from '@/components/common';
+import { useTranslation } from 'react-i18next';
+import { useGetRequiredFieldCheck } from '@/apis/recruitmentsDetail/useRequiredFieldCheck';
+import { type RequiredFieldCheckProps } from '@/pages/recruit/RecruitType';
+
+export default function ButtonGroup() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { data: requiredFieldCheck } = useGetRequiredFieldCheck();
+  const { resumeExistence, visaExistence, foreignerIdNumberExistence, signExistence }: RequiredFieldCheckProps =
+    requiredFieldCheck || {
+      resumeExistence: false,
+      visaExistence: false,
+      foreignerIdNumberExistence: false,
+      signExistence: false,
+    };
+
+  return (
+    <ColumnSection>
+      <ActiveButton
+        design="outlined"
+        style={{ borderRight: '3px solid #0a65cc' }}
+        onClick={() => {
+          navigate(ROUTE_PATH.RESUME);
+        }}
+      >
+        <Typo bold>{resumeExistence ? t('employeeMyPage.UPDATE_RESUME') : t('employeeMyPage.REGISTER_RESUME')}</Typo>
+        {resumeExistence ? <Icon.EmployeePage.Check /> : <Icon.EmployeePage.Bag />}
+      </ActiveButton>
+      <ActiveButton
+        design="outlined"
+        style={{ borderRight: '3px solid #0a65cc' }}
+        onClick={() => {
+          navigate(ROUTE_PATH.REGISTERSIGN);
+        }}
+      >
+        <Typo bold>{signExistence ? t('employeeMyPage.UPDATE_SIGN') : t('employeeMyPage.REGISTER_SIGN')}</Typo>
+        {signExistence ? <Icon.EmployeePage.Check /> : <Icon.EmployeePage.Pen />}
+      </ActiveButton>
+      <ActiveButton
+        design="outlined"
+        onClick={() => {
+          navigate(ROUTE_PATH.REGISTER_VISA);
+        }}
+      >
+        <Typo bold>
+          {visaExistence && foreignerIdNumberExistence
+            ? t('employeeMyPage.UPDATE_VISA')
+            : t('employeeMyPage.REGISTER_VISA')}
+        </Typo>
+        {visaExistence && foreignerIdNumberExistence ? <Icon.EmployeePage.Check /> : <Icon.EmployeePage.Card />}
+      </ActiveButton>
+    </ColumnSection>
+  );
+}
+
+const ColumnSection = styled.div`
+  width: 100%;
+  display: flex;
+`;
+
+const ActiveButton = styled(Button)`
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  border-radius: 0;
+  border: 0;
+  color: #000;
+  transition:
+    background-color 0.3s,
+    background-image 0.3s; // 배경 색상과 이미지 애니메이션
+
+  &:hover {
+    * {
+      color: #fff;
+    }
+  }
+`;

src/features/employee/myPage/EmployeeProfile.tsx

@@ -1,20 +1,19 @@
 import { Card, Image, Typo } from '@/components/common';
+import { userLocalStorage } from '@/utils/storage';
 import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
 
-export default function EmployeeProfile({
-  profileImage = 'https://img.freepik.com/free-photo/user-profile-icon-front-side-with-white-background_187299-40010.jpg?t=st=1729752570~exp=1729756170~hmac=4313719023c412dd92883d97ce79956fadf541e11d8cc3a4ef05150f301f5e7f&w=740',
-}) {
-  const { t } = useTranslation();
+export default function EmployeeProfile() {
+  const name = userLocalStorage.getUser()?.name || '';
+  const profileImage = userLocalStorage.getUser()?.profileImage || '';
+
   return (
     <Card
       style={{
         width: '100%',
         height: '100px',
         border: 0,
-        borderRadius: '4px',
-        marginBottom: '24px',
-        padding: '10px 30px',
+        borderRadius: 0,
+        padding: '0 30px',
         backgroundColor: '#0A65CC',
         display: 'flex',
         justifyContent: 'space-between',
@@ -32,7 +31,7 @@ export default function EmployeeProfile({
         />
         <TextSection>
           <Typo bold color="white" size="20px">
-            {t('employeeMyPage.GREETING')}
+            {name}
           </Typo>
         </TextSection>
       </ProfileSection>

src/features/employee/myPage/ProfileSection.tsx

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import EmployeeProfile from './EmployeeProfile';
+import ButtonGroup from './ButtonGroup';
+
+export default function ProfileSection() {
+  return (
+    <Wrapper>
+      <EmployeeProfile />
+      <ButtonGroup />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  width: 100%;
+  direction: column;
+  align-items: center;
+  margin-bottom: 52px;
+  border: 3px solid #0a65cc;
+  box-shadow:
+    rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
+    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+`;

src/pages/contract/EmployeeContract/EmployeeContract.tsx

@@ -119,8 +119,11 @@ export default function EmployeeContract() {
 const LineWrapper = styled.div`
   border: 1px solid #e9e9e9;
   border-radius: 3px;
-  padding: 100px 200px;
+  padding: 100px 100px;
   margin: 52px 0;
+  box-shadow:
+    rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
+    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
 `;
 
 const InputWrapper = styled.div`

src/pages/contract/EmployerContract/EmployerContract.tsx

@@ -17,7 +17,7 @@ export default function EmployerContract() {
   const [showSignError, setShowSignError] = useState(false);
 
   const [inputs, setInputs] = useState({
-    salary: '',
+    salary: 0,
     workingHours: '',
     dayOff: '',
     annualPaidLeave: '',
@@ -158,8 +158,11 @@ export default function EmployerContract() {
 const LineWrapper = styled.div`
   border: 1px solid #e9e9e9;
   border-radius: 3px;
-  padding: 100px 200px;
+  padding: 100px 100px;
   margin: 52px 0;
+  box-shadow:
+    rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
+    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
 `;
 
 const InputWrapper = styled.div`