diff --git a/src/apis/apiPath.ts b/src/apis/apiPath.ts
index b9b74e4..0cd4e1c 100644
--- a/src/apis/apiPath.ts
+++ b/src/apis/apiPath.ts
@@ -1,23 +1,26 @@
 const BASE_URL = '/api';
 
 export const APIPath = {
-  postNotice: '/api/recruitments',
-  allApplication: '/api/application/all',
-  signEmployeeContract: '/api/contract',
-  makeEmployerContract: '/api/categories',
-  downloadContract: '/api/contract/:applyId/download',
+  postNotice: `${BASE_URL}/recruitments`,
+  allApplication: `${BASE_URL}/application/all`,
+  signEmployeeContract: `${BASE_URL}/contract/employee`,
+  makeContract: `${BASE_URL}/contract`,
+  getContract: `${BASE_URL}/contract/:applyId`,
+  downloadContract: `${BASE_URL}/contract/:applyId/download`,
   registerSign: '/api/sign',
   getMyCompanies: `${BASE_URL}/company`,
   getMyRecruitments: `${BASE_URL}/recruitments/company/:companyId`,
   getMyApplicants: `${BASE_URL}/application/:recruitmentId`,
   getForeigner: `${BASE_URL}/visa/:userId`,
   registerVisa: `${BASE_URL}/visa`,
+  registerCompany: `${BASE_URL}/company`,
   apply: '/api/application/',
   recruitmentsDetail: '/api/recruitments/:postId',
 };
 
 export const getDynamicAPIPath = {
   downloadContract: (applyId: number) => APIPath.downloadContract.replace(':applyId', applyId.toString()),
+  getContract: (applyId: number) => APIPath.getContract.replace(':applyId', applyId.toString()),
   getMyRecruitments: (companyId: number) => APIPath.getMyRecruitments.replace(':companyId', companyId.toString()),
   getMyApplicants: (recruitmentId: number) =>
     APIPath.getMyApplicants.replace(':recruitmentId', recruitmentId.toString()),
diff --git a/src/apis/contract/hooks/useGetMyContract.tsx b/src/apis/contract/hooks/useGetMyContract.tsx
new file mode 100644
index 0000000..f9978f2
--- /dev/null
+++ b/src/apis/contract/hooks/useGetMyContract.tsx
@@ -0,0 +1,15 @@
+import { getDynamicAPIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useQuery } from '@tanstack/react-query';
+
+export const getMyContractPath = (applyId: number) => `${getDynamicAPIPath.getContract(applyId)}`;
+const getMyContract = async (applyId: number) => {
+  const res = await clientInstance.get(getMyContractPath(applyId));
+  return res.data;
+};
+
+export const useGetMyContract = (applyId: number) =>
+  useQuery({
+    queryKey: [getMyContractPath],
+    queryFn: () => getMyContract(applyId),
+  });
diff --git a/src/apis/contract/hooks/usePostContract.tsx b/src/apis/contract/hooks/usePostContract.tsx
new file mode 100644
index 0000000..a828e56
--- /dev/null
+++ b/src/apis/contract/hooks/usePostContract.tsx
@@ -0,0 +1,26 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+
+export type ContractRequestData = {
+  salary?: string;
+  workingHours?: string;
+  dayOff?: string;
+  annualPaidLeave?: string;
+  workingPlace?: string;
+  responsibilities?: string;
+  rule?: string;
+  applyId?: number;
+};
+
+export const getPostContractPath = () => `${APIPath.makeContract}`;
+
+export const postContract = async (req: ContractRequestData) => {
+  const response = await clientInstance.post(getPostContractPath(), req);
+  return response.data;
+};
+
+export const useFetchPostContract = () =>
+  useMutation({
+    mutationFn: postContract,
+  });
diff --git a/src/apis/contract/hooks/usePostEmployeeSign.tsx b/src/apis/contract/hooks/usePostEmployeeSign.tsx
new file mode 100644
index 0000000..b1fc0f5
--- /dev/null
+++ b/src/apis/contract/hooks/usePostEmployeeSign.tsx
@@ -0,0 +1,19 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+
+export type SignEmployeeContractRequestData = {
+  applyId?: number;
+};
+
+export const getPostSignEmployeeContractPath = () => `${APIPath.signEmployeeContract}`;
+
+export const postSignEmployeeContract = async (req: SignEmployeeContractRequestData) => {
+  const response = await clientInstance.post(getPostSignEmployeeContractPath(), req);
+  return response.data;
+};
+
+export const useFetchPostContract = () =>
+  useMutation({
+    mutationFn: postSignEmployeeContract,
+  });
diff --git a/src/apis/contract/mock/contract.mock.ts b/src/apis/contract/mock/contract.mock.ts
new file mode 100644
index 0000000..8a87559
--- /dev/null
+++ b/src/apis/contract/mock/contract.mock.ts
@@ -0,0 +1,28 @@
+import { http, HttpResponse } from 'msw';
+import { getPostContractPath } from '../hooks/usePostContract';
+import { getMyContractPath } from '../hooks/useGetMyContract';
+import { getPostSignEmployeeContractPath } from '../hooks/usePostEmployeeSign';
+
+export const contractsMockHandler = [
+  http.post(getPostContractPath(), async ({ request }) => {
+    const req = await request.json();
+    return HttpResponse.json(req, { status: 201 });
+  }),
+
+  http.get(getMyContractPath(1), () => HttpResponse.json(CONTRACT_DATA)),
+
+  http.post(getPostSignEmployeeContractPath(), async ({ request }) => {
+    const req = await request.json();
+    return HttpResponse.json(req, { status: 201 });
+  }),
+];
+
+const CONTRACT_DATA = {
+  salary: '월 2백만원',
+  workingHours: '월화수 10:00 ~ 15:00, 목금 12:00 ~ 16:00',
+  dayOff: '매월 마지막주 화요일',
+  annualPaidLeave: '통상근로자의 근로시간에 비례하여 연차유급휴가를 부여한다.',
+  workingPlace: '대전 유성구 궁동 대학로99',
+  responsibilities: '개발하기',
+  rule: '열심히 일하기!',
+};
diff --git a/src/apis/employee/mock/getMyApplication.mock.ts b/src/apis/employee/mock/getMyApplication.mock.ts
index 4217cbf..b7ef811 100644
--- a/src/apis/employee/mock/getMyApplication.mock.ts
+++ b/src/apis/employee/mock/getMyApplication.mock.ts
@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw';
 import { getMyApplicationPath } from '../hooks/useGetMyApplication';
-import { myRecruitList } from '@/pages/employee/myPage/data/index.mock';
+import { myRecruitList } from '@/pages/myPage/employee/data/index.mock';
 
 export const EmployeePageMockHandler = [
   http.get(getMyApplicationPath(), () => {
diff --git a/src/apis/employer/hooks/usePostNotice.ts b/src/apis/postNotice/hooks/usePostNotice.ts
similarity index 95%
rename from src/apis/employer/hooks/usePostNotice.ts
rename to src/apis/postNotice/hooks/usePostNotice.ts
index b54af4a..3d99f8b 100644
--- a/src/apis/employer/hooks/usePostNotice.ts
+++ b/src/apis/postNotice/hooks/usePostNotice.ts
@@ -26,7 +26,7 @@ export const postNotice = async (req: NoticeRequestData) => {
   return response.data;
 };
 
-export const FetchPostNotice = () =>
+export const useFetchPostNotice = () =>
   useMutation({
     mutationFn: postNotice,
   });
diff --git a/src/apis/employer/mock/postNotice.mock.ts b/src/apis/postNotice/mock/postNotice.mock.ts
similarity index 100%
rename from src/apis/employer/mock/postNotice.mock.ts
rename to src/apis/postNotice/mock/postNotice.mock.ts
diff --git a/src/apis/registerCompany/registerCompany.mock.ts b/src/apis/registerCompany/registerCompany.mock.ts
new file mode 100644
index 0000000..8bed0c8
--- /dev/null
+++ b/src/apis/registerCompany/registerCompany.mock.ts
@@ -0,0 +1,9 @@
+import { http, HttpResponse } from 'msw';
+import { getPostCompanyPath } from './useRegisterCompany';
+
+export const registerCompanyMockHandler = [
+  http.post(getPostCompanyPath(), async ({ request }) => {
+    const req = await request.json();
+    return HttpResponse.json(req, { status: 201 });
+  }),
+];
diff --git a/src/apis/registerCompany/useRegisterCompany.ts b/src/apis/registerCompany/useRegisterCompany.ts
new file mode 100644
index 0000000..b8a6d43
--- /dev/null
+++ b/src/apis/registerCompany/useRegisterCompany.ts
@@ -0,0 +1,23 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+
+export type CompanyRequestData = {
+  name?: string;
+  industryOccupation?: string;
+  brand?: string;
+  revenuePerYear?: number;
+  logoImage?: string;
+};
+
+export const getPostCompanyPath = () => `${APIPath.registerCompany}`;
+
+export const postCompany = async (req: CompanyRequestData) => {
+  const response = await clientInstance.post(getPostCompanyPath(), req);
+  return response.data;
+};
+
+export const useFetchPostCompany = () =>
+  useMutation({
+    mutationFn: postCompany,
+  });
diff --git a/src/assets/translator/EmployeeMyPage/ko.ts b/src/assets/translator/EmployeeMyPage/ko.ts
new file mode 100644
index 0000000..bdcb94e
--- /dev/null
+++ b/src/assets/translator/EmployeeMyPage/ko.ts
@@ -0,0 +1,7 @@
+export const EmployeeMyPage = {
+  UPDATE_PROFILE: '프로필 수정하기',
+  REGISTER_RESUME: '이력서 등록하기',
+  REGISTER_SIGN: '사인 등록',
+  REGISTER_VISA: '외국인 번호 및 비자 발급 일자 등록',
+  MYRECRUITLIST: '내가 지원한 공고',
+};
diff --git a/src/assets/translator/EmployeeMyPage/ve.ts b/src/assets/translator/EmployeeMyPage/ve.ts
new file mode 100644
index 0000000..5ddd79c
--- /dev/null
+++ b/src/assets/translator/EmployeeMyPage/ve.ts
@@ -0,0 +1,7 @@
+export const EmployeeMyPage = {
+  UPDATE_PROFILE: 'Cập nhật hồ sơ',
+  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',
+  MYRECRUITLIST: 'Công việc tôi đã ứng tuyển',
+};
diff --git a/src/assets/translator/PostNotice/ko.ts b/src/assets/translator/PostNotice/ko.ts
new file mode 100644
index 0000000..6e28f63
--- /dev/null
+++ b/src/assets/translator/PostNotice/ko.ts
@@ -0,0 +1,11 @@
+export const PostNotice = {
+  TITLE: '구인 글 등록하기',
+  SALARY: '급여',
+  WORKINGDURATION: '근무기간',
+  WORKDAYS: '근무요일',
+  WORKHOURS: '근무시간',
+  WORKTYPE: '고용형태',
+  ELIGIBILITY_CRITERIA: '비자조건',
+  PREFERRED_CONDITIONS: '우대사항',
+  SUBMIT: '등록하기',
+};
diff --git a/src/assets/translator/PostNotice/ve.ts b/src/assets/translator/PostNotice/ve.ts
new file mode 100644
index 0000000..d96469a
--- /dev/null
+++ b/src/assets/translator/PostNotice/ve.ts
@@ -0,0 +1,11 @@
+export const PostNotice = {
+  TITLE: 'Đăng bài tuyển dụng',
+  SALARY: 'Lương',
+  WORKINGDURATION: 'Thời gian làm việc',
+  WORKDAYS: 'Ngày làm việc',
+  WORKHOURS: 'Giờ làm việc',
+  WORKTYPE: 'Hình thức làm việc',
+  ELIGIBILITY_CRITERIA: 'Điều kiện visa',
+  PREFERRED_CONDITIONS: 'Ưu tiên',
+  SUBMIT: 'Đăng',
+};
diff --git a/src/assets/translator/RegisterCompany/ko.ts b/src/assets/translator/RegisterCompany/ko.ts
new file mode 100644
index 0000000..0d3663c
--- /dev/null
+++ b/src/assets/translator/RegisterCompany/ko.ts
@@ -0,0 +1,9 @@
+export const RegisterCompany = {
+  TITLE: '회사 등록',
+  LOGOIMAGE: '회사 이미지 업로드(선택)',
+  COMPANYNAME: '회사명',
+  INDUSTRY_OCCUPATION: '업직종',
+  BRAND: '브랜드',
+  REVENUE_PERYEAR: '연 평균 매출액',
+  SUBMIT: '등록하기',
+};
diff --git a/src/assets/translator/RegisterCompany/ve.ts b/src/assets/translator/RegisterCompany/ve.ts
new file mode 100644
index 0000000..d01e351
--- /dev/null
+++ b/src/assets/translator/RegisterCompany/ve.ts
@@ -0,0 +1,9 @@
+export const RegisterCompany = {
+  TITLE: 'Đăng ký công ty',
+  LOGOIMAGE: 'Tải lên logo công ty (tùy chọn)',
+  COMPANYNAME: 'Tên công ty',
+  INDUSTRY_OCCUPATION: 'Ngành nghề',
+  BRAND: 'Thương hiệu',
+  REVENUE_PERYEAR: 'Doanh thu hàng năm',
+  SUBMIT: 'Đăng ký',
+};
diff --git a/src/features/employee/myPage/CardButton.tsx b/src/features/employee/myPage/CardButton.tsx
index fc788ba..a5cac95 100644
--- a/src/features/employee/myPage/CardButton.tsx
+++ b/src/features/employee/myPage/CardButton.tsx
@@ -1,12 +1,12 @@
 import { Button } from '@/components/common';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 type Props = {
   design?: 'default' | 'outlined' | 'textbutton' | 'deactivate';
   children: ReactNode;
-};
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-export default function CardButton({ design, children }: Props) {
+export default function CardButton({ design, children, ...rest }: Props) {
   return (
     <Button
       design={design}
@@ -17,6 +17,7 @@ export default function CardButton({ design, children }: Props) {
         justifyContent: 'space-between',
         padding: '10px 20px',
       }}
+      {...rest}
     >
       {children}
     </Button>
diff --git a/src/features/employee/myPage/MyRecruitCard.tsx b/src/features/employee/myPage/MyRecruitCard.tsx
index 6f094af..0f4786e 100644
--- a/src/features/employee/myPage/MyRecruitCard.tsx
+++ b/src/features/employee/myPage/MyRecruitCard.tsx
@@ -1,24 +1,26 @@
 import { Card, Image, Typo, Button } from '@/components/common';
 import styled from '@emotion/styled';
-import { MyRecruitListProps, StateProps } from '@/types';
+import { MyRecruitListProps, StateProps, TextProps } from '@/types';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
 
 type DesignProps = {
   design: 'default' | 'outlined' | 'textbutton' | 'deactivate';
-  text: string;
+  text?: TextProps;
 };
 
 function getStateStyle(state: StateProps): DesignProps {
   switch (state) {
-    case '근로계약서 서명하기':
+    case 'LetsSign':
       return { design: 'default', text: '근로계약서 서명하기' };
-    case '채용 마감':
+    case 'Closed':
       return { design: 'deactivate', text: '채용 마감' };
-    case '지원서 검토중':
+    case 'Waiting':
       return { design: 'outlined', text: '지원서 검토중' };
-    case '채용 완료':
+    case 'Completed':
       return { design: 'deactivate', text: '채용 완료' };
     default:
-      return { design: 'deactivate', text: '알 수 없음' }; // 상태가 정의되지 않은 경우
+      return { design: 'deactivate' }; // 상태가 정의되지 않은 경우
   }
 }
 
@@ -27,8 +29,9 @@ type Props = {
 };
 
 export default function MyRecruitCard({ myRecruit }: Props) {
-  const { image, title, area, state } = myRecruit;
+  const { image, title, area, state, applyId } = myRecruit;
   const buttonStyle = getStateStyle(state);
+  const navigate = useNavigate();
 
   return (
     <Card
@@ -57,7 +60,15 @@ export default function MyRecruitCard({ myRecruit }: Props) {
         </Typo>
         <Typo size="14px">{area}</Typo>
       </TextSection>
-      <Button design={buttonStyle.design} style={{ width: '200px', padding: '10px 20px' }}>
+      <Button
+        design={buttonStyle.design}
+        style={{ width: '200px', padding: '10px 20px' }}
+        onClick={() => {
+          if (state == 'LetsSign') {
+            navigate(ROUTE_PATH.CONTRACT.EMPLOYEE.replace(':applyId', applyId.toString()));
+          }
+        }}
+      >
         {buttonStyle.text}
       </Button>
     </Card>
diff --git a/src/features/employee/myPage/MyRecruitList.tsx b/src/features/employee/myPage/MyRecruitList.tsx
index 8fad8c5..9cad734 100644
--- a/src/features/employee/myPage/MyRecruitList.tsx
+++ b/src/features/employee/myPage/MyRecruitList.tsx
@@ -10,7 +10,7 @@ export default function MyRecruitList({ myRecruitList }: Props) {
   return (
     <List
       items={myRecruitList}
-      renderItem={(myRecruit) => <MyRecruitCard myRecruit={myRecruit} key={myRecruit.id} />}
+      renderItem={(myRecruit) => <MyRecruitCard myRecruit={myRecruit} key={myRecruit.applyId} />}
     />
   );
 }
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 944bac2..ca57b72 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,7 +1,7 @@
 import { recruitmentsMockHandler } from '@/apis/home/mocks/recruitmentsMockHandler';
 import { slidesMockHandler } from '@/apis/home/mocks/slidesMockHandler';
 import { EmployeePageMockHandler } from '@/apis/employee/mock/getMyApplication.mock';
-import { noticesMockHandler } from '@/apis/employer/mock/postNotice.mock';
+import { noticesMockHandler } from '@/apis/postNotice/mock/postNotice.mock';
 import { registerSignMockHandler } from '@/apis/registerSign/registerSign.mock';
 import { myCompaniesMockHandler } from '@/apis/companies/mocks/myCompaniesMockHandler';
 import { myRecruitmentsMockHandler } from '@/apis/recruitments/mocks/myRecruitmentsMockHandler';
@@ -10,6 +10,8 @@ import { foreignerMockHandler } from '@/apis/applicants/mocks/foreignerMockHandl
 import { visaMockHandler } from '@/apis/applicants/mocks/visaMockHandler';
 import { postApplyMockHandler } from '@apis/apply/postApply.mock';
 import { recruitmentsDetailMockHandler } from '@apis/recruitmentsDetail/recruitmentsDetailMockHandler';
+import { registerCompanyMockHandler } from '@/apis/registerCompany/registerCompany.mock';
+import { contractsMockHandler } from '@/apis/contract/mock/contract.mock';
 
 export const handlers = [
   ...recruitmentsMockHandler,
@@ -24,4 +26,6 @@ export const handlers = [
   ...visaMockHandler,
   ...postApplyMockHandler,
   ...recruitmentsDetailMockHandler,
+  ...registerCompanyMockHandler,
+  ...contractsMockHandler,
 ];
diff --git a/src/pages/contract/EmployeeContract/EmployeeContract.tsx b/src/pages/contract/EmployeeContract/EmployeeContract.tsx
index 10a8df0..f72bbce 100644
--- a/src/pages/contract/EmployeeContract/EmployeeContract.tsx
+++ b/src/pages/contract/EmployeeContract/EmployeeContract.tsx
@@ -1,8 +1,44 @@
-import { Button, Flex, Input, Typo } from '@/components/common';
+import { useGetMyContract } from '@/apis/contract/hooks/useGetMyContract';
+import { useFetchPostContract } from '@/apis/contract/hooks/usePostContract';
+import { Button, Flex, Typo } from '@/components/common';
 import Layout from '@/features/layout';
+import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
+import { useNavigate, useParams } from 'react-router-dom';
+
+export type ContractResponseData = {
+  salary: string;
+  workingHours: string;
+  dayOff: string;
+  annualPaidLeave: string;
+  workingPlace: string;
+  responsibilities: string;
+  rule: string;
+};
 
 export default function EmployeeContract() {
+  const { applyId } = useParams();
+  const applicationId = Number(applyId);
+  const { data: contract } = useGetMyContract(applicationId);
+  const mutation = useFetchPostContract();
+  const navigate = useNavigate();
+  const contractData: ContractResponseData = contract || {};
+
+  const handlePostSignEmployeeContract = () => {
+    mutation.mutate(
+      { applyId: applicationId },
+      {
+        onSuccess: () => {
+          navigate(ROUTE_PATH.HOME);
+        },
+        onError: () => {
+          // 이부분 에러처리 결정해야함.
+          alert('값이 정상적으로 저장되지 않았습니다.');
+        },
+      },
+    );
+  };
+
   return (
     <Layout>
       <section>
@@ -10,117 +46,36 @@ export default function EmployeeContract() {
           <LineWrapper>
             <Flex direction="column" justifyContent="space-between" alignItems="center" style={{ width: '100%' }}>
               <Typo element="h1" size="24px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                근로계약서 작성하기
+                근 로 계 약 서
               </Typo>
               <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  사용자
-                </Typo>
                 <InputContainer>
-                  <Input label="업체명" style={{ width: '570px', height: '48px' }}></Input>
+                  <Typo>1. 근무장소</Typo>
+                  <Typo>{contractData.workingPlace}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="소재지" style={{ width: '570px', height: '48px' }}></Input>
+                  <Typo>2. 업무내용</Typo>
+                  <Typo>{contractData.responsibilities}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="전화번호" style={{ width: '570px', height: '48px' }}></Input>
+                  <Typo>3. 근로일 및 근로일별 근로시간</Typo>
+                  <Typo>{contractData.workingHours}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="성명" style={{ width: '570px', height: '48px' }}></Input>
+                  <Typo>4. 주휴일</Typo>
+                  <Typo>{contractData.dayOff}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="사업자등록번호" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  근로자
-                </Typo>
-                <InputContainer>
-                  <Input label="성명" style={{ width: '570px', height: '48px' }}></Input>
+                  <Typo>5. 임금</Typo>
+                  <Typo>{contractData.salary}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="생년월일" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="본국 주소" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  근로계약기간
-                </Typo>
-                <InputContainer>
-                  <Input label="시작일자" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="종료일자" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="수습기간" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  근로장소
-                </Typo>
-                <InputContainer>
-                  <Input label="근로장소" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  업무내용
-                </Typo>
-                <InputContainer>
-                  <Input label="업무내용" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  근로시간
-                </Typo>
-                <InputContainer>
-                  <Input label="근로시간" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="휴게시간" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  휴일
-                </Typo>
-                <InputContainer>
-                  <Input label="휴일" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  임금
-                </Typo>
-                <InputContainer>
-                  <Input label="월 통상임금" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="수습기간 중 임금" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="임금 지급일" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="지급방법" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  숙식제공
-                </Typo>
-                <InputContainer>
-                  <Input label="숙박시설 제공" style={{ width: '570px', height: '48px' }}></Input>
+                  <Typo>6. 연차유급휴가</Typo>
+                  <Typo>{contractData.annualPaidLeave}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="식사 제공" style={{ width: '570px', height: '48px' }}></Input>
+                  <Typo>7. 취업규칙</Typo>
+                  <Typo>{contractData.rule}</Typo>
                 </InputContainer>
               </InputWrapper>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
@@ -130,20 +85,12 @@ export default function EmployeeContract() {
                 이 계약에서 정하지 않은 사항은 '근로기준법'에서 정하는 바에 따른다.
               </Typo>
               <ButtonWrapper>
-                <div>
-                  <>
-                    <input type="checkbox" />
-                    <label>서명하기</label>
-                  </>
-                </div>
-                <div>
-                  <Button design="default" style={{ marginRight: '16px' }}>
-                    다운로드
-                  </Button>
-                  <Button design="default" style={{}}>
-                    제출하기
-                  </Button>
-                </div>
+                <Button design="outlined" style={{ marginRight: '16px' }}>
+                  서명하기
+                </Button>
+                <Button design="default" onClick={handlePostSignEmployeeContract} style={{}}>
+                  제출하기
+                </Button>
               </ButtonWrapper>
             </Flex>
           </LineWrapper>
diff --git a/src/pages/contract/EmployerContract/EmployerContract.tsx b/src/pages/contract/EmployerContract/EmployerContract.tsx
index a8463bd..bc3e0ce 100644
--- a/src/pages/contract/EmployerContract/EmployerContract.tsx
+++ b/src/pages/contract/EmployerContract/EmployerContract.tsx
@@ -1,8 +1,49 @@
+import { useFetchPostContract } from '@/apis/contract/hooks/usePostContract';
 import { Button, Flex, Input, Typo } from '@/components/common';
 import Layout from '@/features/layout';
+import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 
 export default function EmployerContract() {
+  const { applyId: applicationId } = useParams();
+  const mutation = useFetchPostContract();
+  const navigate = useNavigate();
+
+  const [inputs, setInputs] = useState({
+    salary: '',
+    workingHours: '',
+    dayOff: '',
+    annualPaidLeave: '',
+    workingPlace: '',
+    responsibilities: '',
+    rule: '',
+    applyId: Number(`${applicationId}`),
+  });
+
+  const { salary, workingHours, dayOff, annualPaidLeave, workingPlace, responsibilities, rule } = inputs;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value, name } = e.target;
+    setInputs({
+      ...inputs,
+      [name]: value,
+    });
+  };
+
+  const handlePostContract = () => {
+    mutation.mutate(inputs, {
+      onSuccess: () => {
+        navigate(ROUTE_PATH.HOME);
+      },
+      onError: () => {
+        // 이부분 에러처리 결정해야함.
+        alert('값이 정상적으로 저장되지 않았습니다.');
+      },
+    });
+  };
+
   return (
     <Layout>
       <section>
@@ -10,117 +51,34 @@ export default function EmployerContract() {
           <LineWrapper>
             <Flex direction="column" justifyContent="space-between" alignItems="center" style={{ width: '100%' }}>
               <Typo element="h1" size="24px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                근로계약서 작성하기
+                근 로 계 약 서
               </Typo>
               <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  사용자
-                </Typo>
-                <InputContainer>
-                  <Input label="업체명" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
                 <InputContainer>
-                  <Input label="소재지" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="1. 근무장소" value={workingPlace} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="전화번호" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="2. 업무내용" value={responsibilities} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="성명" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input
+                    label="3. 근로일 및 근로일별 근로시간"
+                    value={workingHours}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="사업자등록번호" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="4. 주휴일" value={dayOff} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  근로자
-                </Typo>
                 <InputContainer>
-                  <Input label="성명" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="5. 임금" value={salary} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="생년월일" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="6. 연차유급휴가" value={annualPaidLeave} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="본국 주소" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  근로계약기간
-                </Typo>
-                <InputContainer>
-                  <Input label="시작일자" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="종료일자" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="수습기간" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  근로장소
-                </Typo>
-                <InputContainer>
-                  <Input label="근로장소" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  업무내용
-                </Typo>
-                <InputContainer>
-                  <Input label="업무내용" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  근로시간
-                </Typo>
-                <InputContainer>
-                  <Input label="근로시간" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="휴게시간" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  휴일
-                </Typo>
-                <InputContainer>
-                  <Input label="휴일" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  임금
-                </Typo>
-                <InputContainer>
-                  <Input label="월 통상임금" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="수습기간 중 임금" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="임금 지급일" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="지급방법" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-              </InputWrapper>
-              <InputWrapper>
-                <Typo element="h3" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                  숙식제공
-                </Typo>
-                <InputContainer>
-                  <Input label="숙박시설 제공" style={{ width: '570px', height: '48px' }}></Input>
-                </InputContainer>
-                <InputContainer>
-                  <Input label="식사 제공" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="7. 취업규칙" value={rule} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
               </InputWrapper>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
@@ -131,19 +89,15 @@ export default function EmployerContract() {
               </Typo>
               <ButtonWrapper>
                 <div>
-                  <Button design="outlined" style={{ marginRight: '16px' }}>
-                    미리보기
-                  </Button>
                   <>
                     <input type="checkbox" />
                     <label>서명하기</label>
                   </>
                 </div>
                 <div>
-                  <Button design="default" style={{ marginRight: '16px' }}>
-                    다운로드
+                  <Button design="default" onClick={handlePostContract}>
+                    제출하기
                   </Button>
-                  <Button design="default">제출하기</Button>
                 </div>
               </ButtonWrapper>
             </Flex>
@@ -180,3 +134,5 @@ const ButtonWrapper = styled.div`
   justify-content: space-between;
   margin-top: 52px;
 `;
+
+const InputStyle = { width: '570px', height: '48px' };
diff --git a/src/pages/employee/myPage/EmployeeMyPage.stories.tsx b/src/pages/myPage/employee/EmployeeMyPage.stories.tsx
similarity index 100%
rename from src/pages/employee/myPage/EmployeeMyPage.stories.tsx
rename to src/pages/myPage/employee/EmployeeMyPage.stories.tsx
diff --git a/src/pages/employee/myPage/EmployeeMyPage.tsx b/src/pages/myPage/employee/EmployeeMyPage.tsx
similarity index 72%
rename from src/pages/employee/myPage/EmployeeMyPage.tsx
rename to src/pages/myPage/employee/EmployeeMyPage.tsx
index de02c3f..fd0c4ab 100644
--- a/src/pages/employee/myPage/EmployeeMyPage.tsx
+++ b/src/pages/myPage/employee/EmployeeMyPage.tsx
@@ -4,11 +4,13 @@ import styled from '@emotion/styled';
 import MyRecruitList from '../../../features/employee/myPage/MyRecruitList';
 import CardButton from '../../../features/employee/myPage/CardButton';
 import EmployeeProfile from '../../../features/employee/myPage/EmployeeProfile';
-// import { myRecruitList } from './data/index.mock';
 import { useGetMyApplication } from '@/apis/employee/hooks/useGetMyApplication';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
 
 export default function EmployeeMyPage() {
   const { data: myRecruitList } = useGetMyApplication();
+  const navigate = useNavigate();
 
   return (
     <Layout>
@@ -16,15 +18,30 @@ export default function EmployeeMyPage() {
         <Section>
           <EmployeeProfile />
           <ColumnSection>
-            <CardButton design="outlined">
+            <CardButton
+              design="outlined"
+              onClick={() => {
+                navigate(ROUTE_PATH.RESUME);
+              }}
+            >
               <Typo bold>이력서 등록</Typo>
               <Icon.EmployeePage.Bag />
             </CardButton>
-            <CardButton design="outlined">
+            <CardButton
+              design="outlined"
+              onClick={() => {
+                navigate(ROUTE_PATH.REGISTERSIGN);
+              }}
+            >
               <Typo bold>사인 등록</Typo>
               <Icon.EmployeePage.Pen />
             </CardButton>
-            <CardButton design="outlined">
+            <CardButton
+              design="outlined"
+              onClick={() => {
+                navigate(ROUTE_PATH.REGISTER_VISA);
+              }}
+            >
               <Typo bold>외국인 번호 및 비자 발급 일자 등록</Typo>
               <Icon.EmployeePage.Card />
             </CardButton>
diff --git a/src/pages/employee/myPage/data/index.mock.ts b/src/pages/myPage/employee/data/index.mock.ts
similarity index 87%
rename from src/pages/employee/myPage/data/index.mock.ts
rename to src/pages/myPage/employee/data/index.mock.ts
index 8a82202..c907fe9 100644
--- a/src/pages/employee/myPage/data/index.mock.ts
+++ b/src/pages/myPage/employee/data/index.mock.ts
@@ -7,7 +7,8 @@ export const myRecruitList: MyRecruitListProps[] = [
       'https://img.freepik.com/free-photo/low-angle-view-of-skyscrapers_1359-1105.jpg?size=626&ext=jpg&ga=GA1.1.1297763733.1727740800&semt=ais_hybrid',
     title: '제목',
     area: '대전광역시 유성구',
-    state: '근로계약서 서명하기',
+    state: 'LetsSign',
+    applyId: 1,
   },
   {
     id: 2,
@@ -15,7 +16,8 @@ export const myRecruitList: MyRecruitListProps[] = [
       'https://img.freepik.com/free-photo/low-angle-view-of-skyscrapers_1359-1105.jpg?size=626&ext=jpg&ga=GA1.1.1297763733.1727740800&semt=ais_hybrid',
     title: '제목2',
     area: '대전광역시 유성구',
-    state: '채용 마감',
+    state: 'Closed',
+    applyId: 2,
   },
   {
     id: 1,
@@ -23,7 +25,8 @@ export const myRecruitList: MyRecruitListProps[] = [
       'https://img.freepik.com/free-photo/low-angle-view-of-skyscrapers_1359-1105.jpg?size=626&ext=jpg&ga=GA1.1.1297763733.1727740800&semt=ais_hybrid',
     title: '제목3',
     area: '대전광역시 유성구',
-    state: '지원서 검토중',
+    state: 'Waiting',
+    applyId: 3,
   },
   {
     id: 1,
@@ -31,6 +34,7 @@ export const myRecruitList: MyRecruitListProps[] = [
       'https://img.freepik.com/free-photo/low-angle-view-of-skyscrapers_1359-1105.jpg?size=626&ext=jpg&ga=GA1.1.1297763733.1727740800&semt=ais_hybrid',
     title: '제목4',
     area: '대전광역시 유성구',
-    state: '채용 완료',
+    state: 'Completed',
+    applyId: 4,
   },
 ];
diff --git a/src/pages/employer/postNotice/PostNotice.stories.tsx b/src/pages/postNotice/PostNotice.stories.tsx
similarity index 100%
rename from src/pages/employer/postNotice/PostNotice.stories.tsx
rename to src/pages/postNotice/PostNotice.stories.tsx
diff --git a/src/pages/employer/postNotice/PostNotice.tsx b/src/pages/postNotice/PostNotice.tsx
similarity index 85%
rename from src/pages/employer/postNotice/PostNotice.tsx
rename to src/pages/postNotice/PostNotice.tsx
index 3b2f6a2..acec63a 100644
--- a/src/pages/employer/postNotice/PostNotice.tsx
+++ b/src/pages/postNotice/PostNotice.tsx
@@ -1,11 +1,15 @@
-import { FetchPostNotice } from '@/apis/employer/hooks/usePostNotice';
+import { useFetchPostNotice } from '@/apis/postNotice/hooks/usePostNotice';
 import { Button, Flex, Input, Typo } from '@/components/common';
 import Layout from '@/features/layout';
+import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 export default function PostNotice() {
-  const mutation = FetchPostNotice();
+  const mutation = useFetchPostNotice();
+  const navigate = useNavigate();
+
   const [inputs, setInputs] = useState({
     salary: '',
     workingDuration: '',
@@ -27,7 +31,15 @@ export default function PostNotice() {
   };
 
   const handlePostNotice = () => {
-    mutation.mutate(inputs);
+    mutation.mutate(inputs, {
+      onSuccess: () => {
+        navigate(ROUTE_PATH.HOME);
+      },
+      onError: () => {
+        // 이부분 에러처리 결정해야함.
+        alert('값이 정상적으로 저장되지 않았습니다.');
+      },
+    });
   };
 
   return (
diff --git a/src/pages/registerCompany/RegisterCompany.tsx b/src/pages/registerCompany/RegisterCompany.tsx
index 4b501e6..f461f5b 100644
--- a/src/pages/registerCompany/RegisterCompany.tsx
+++ b/src/pages/registerCompany/RegisterCompany.tsx
@@ -1,8 +1,44 @@
+import { useFetchPostCompany } from '@/apis/registerCompany/useRegisterCompany';
 import { Button, Flex, Input, Typo } from '@/components/common';
 import Layout from '@/features/layout';
+import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 export default function RegisterCompany() {
+  const mutation = useFetchPostCompany();
+  const navigate = useNavigate();
+
+  const [inputs, setInputs] = useState({
+    name: '',
+    industryOccupation: '',
+    brand: '',
+    revenuePerYear: 0,
+    logoImage: '',
+  });
+
+  const { name, industryOccupation, brand, revenuePerYear, logoImage } = inputs;
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value, name } = e.target;
+    setInputs({
+      ...inputs,
+      [name]: value,
+    });
+  };
+
+  const handlePostCompany = () => {
+    mutation.mutate(inputs, {
+      onSuccess: () => {
+        navigate(ROUTE_PATH.HOME);
+      },
+      onError: () => {
+        // 이부분 에러처리 결정해야함.
+        alert('값이 정상적으로 저장되지 않았습니다.');
+      },
+    });
+  };
   return (
     <Layout>
       <section>
@@ -17,24 +53,26 @@ export default function RegisterCompany() {
                   <Input
                     label="회사 이미지 업로드(선택)"
                     type="file"
+                    value={logoImage}
+                    onChange={onChange}
                     // style={{ width: '570px', height: '48px' }}
                   ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="회사명" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="회사명" value={name} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="업직종" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="업직종" value={industryOccupation} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="브랜드" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="브랜드" value={brand} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="연 평균 매출액" style={{ width: '570px', height: '48px' }}></Input>
+                  <Input label="연 평균 매출액" value={revenuePerYear} onChange={onChange} style={InputStyle}></Input>
                 </InputContainer>
               </InputWrapper>
               <ButtonWrapper>
-                <Button design="default" style={{}}>
+                <Button design="default" onClick={handlePostCompany} style={{}}>
                   등록하기
                 </Button>
               </ButtonWrapper>
@@ -72,3 +110,5 @@ const ButtonWrapper = styled.div`
   justify-content: center;
   margin-top: 52px;
 `;
+
+const InputStyle = { width: '570px', height: '48px' };
diff --git a/src/routes/path.ts b/src/routes/path.ts
index 4d735cc..66085f7 100644
--- a/src/routes/path.ts
+++ b/src/routes/path.ts
@@ -18,9 +18,9 @@ export const EMPLOYEE = {
 } as const;
 
 export const CONTRACT = {
-  EMPLOYER: '/employer-contract',
-  EMPLOYEE: '/employee-contract',
-};
+  EMPLOYER: '/employer-contract/:applyId',
+  EMPLOYEE: '/employee-contract/:applyId',
+} as const;
 
 const ROUTE_PATH = {
   HOME: '/',
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 5d2015d..befe1d3 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -6,14 +6,14 @@ import LoadingPage from '@/pages/auth/Loading';
 import App from '@/App';
 import Recruit from '@/pages/recruit';
 import RegisterVisa from '@/pages/registerVisa/RegisterVisa';
-import PostNotice from '@/pages/employer/postNotice/PostNotice';
+import PostNotice from '@/pages/postNotice/PostNotice';
 import Home from '@/pages/home';
 import ApplyGuide from '@/pages/apply/applyguide/ApplyGuide';
 import ApplyPage from '@/pages/apply/applypage/ApplyPage';
 import MyCompany from '@/pages/myCompany/MyCompany';
 import Applicants from '@/pages/applicants/Applicants';
 import Resume from '@/pages/resume/Resume';
-import EmployeeMyPage from '@/pages/employee/myPage/EmployeeMyPage';
+import EmployeeMyPage from '@/pages/myPage/employee/EmployeeMyPage';
 import RegisterSign from '@/pages/registerSign/RegisterSign';
 import RegisterCompany from '@/pages/registerCompany/RegisterCompany';
 import EmployerMyPage from '@/pages/myPage/employer/EmPloyerMyPage';
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 33c1bf2..cc00f42 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -27,7 +27,16 @@ export type UserData = {
   profileImage: string;
 };
 
-export type StateProps = '근로계약서 서명하기' | '채용 마감' | '지원서 검토중' | '채용 완료';
+// 백엔드에서 정하는 값에 따라 key 바꾸면 됨
+export const State = {
+  LetsSign: '근로계약서 서명하기',
+  Closed: '채용 마감',
+  Waiting: '지원서 검토중',
+  Completed: '채용 완료',
+} as const;
+
+export type StateProps = keyof typeof State;
+export type TextProps = (typeof State)[StateProps];
 
 export type MyRecruitListProps = {
   id: number;
@@ -35,6 +44,7 @@ export type MyRecruitListProps = {
   area: string;
   image: string;
   state: StateProps;
+  applyId: number;
 };
 
 export type RecruitmentItem = {