From 82925efaa64a59ce60fa0ba39ccd958638757057 Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 2 Jul 2024 13:03:39 +0900
Subject: [PATCH 1/9] =?UTF-8?q?feat:=20=EC=95=8C=EB=B0=94=EC=83=9D=20?=
 =?UTF-8?q?=EA=B8=89=EC=97=AC=EB=AA=85=EC=84=B8=EC=84=9C=20=EC=88=98?=
 =?UTF-8?q?=EB=A0=B9=ED=99=95=EC=9D=B8=20=EC=84=9C=EB=AA=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/apiClient.ts                       | 13 ++++
 src/api/interfaces/employeeApi.ts          |  2 +
 src/pages/employee/PartTimeTab/PayStub.tsx | 73 ++++++++++++++++++++--
 src/types/api/employee-api.d.ts            |  5 ++
 4 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/src/api/apiClient.ts b/src/api/apiClient.ts
index e39f130..d45e1da 100644
--- a/src/api/apiClient.ts
+++ b/src/api/apiClient.ts
@@ -110,6 +110,19 @@ class ApiClient implements employeeApi {
     return response.data;
   }
 
+  //알바생 - 급여 명세서 서명
+  public async employeeSignature(
+    payStubId: number
+  ): Promise<EmployeeSignatureResponse> {
+    const response: BaseResponse<EmployeeSignatureResponse> =
+      await this.axiosInstance.request({
+        method: 'get',
+        url: `papers/pay-stubs/${payStubId}/e-sign`,
+      });
+
+    return response.data;
+  }
+
   //==========================
   // 생성 메소드
   private static createAxiosInstance() {
diff --git a/src/api/interfaces/employeeApi.ts b/src/api/interfaces/employeeApi.ts
index 559b8fb..67485cd 100644
--- a/src/api/interfaces/employeeApi.ts
+++ b/src/api/interfaces/employeeApi.ts
@@ -19,6 +19,8 @@ interface employeeApi {
     yearn: number,
     month: number
   ): Promise<EmployeePayStubGetResponse>;
+
+  employeeSignature(payStubId: number): Promise<EmployeeSignatureResponse>;
 }
 
 export default employeeApi;
diff --git a/src/pages/employee/PartTimeTab/PayStub.tsx b/src/pages/employee/PartTimeTab/PayStub.tsx
index d792eab..159b425 100644
--- a/src/pages/employee/PartTimeTab/PayStub.tsx
+++ b/src/pages/employee/PartTimeTab/PayStub.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import WhiteBox from '../../../components/ui/WhiteBox';
 import { formatMonths, styleMonths } from '../../../utils/format-date';
 import BtnGray from '../../../components/BtnGray';
@@ -6,6 +6,9 @@ import Circle from '../../../components/ui/Circle';
 import ApiClient from '../../../api/apiClient';
 import generateMonthList from '../../../utils/generateMonthList';
 import BtnPrimary from '../../../components/BtnPrimary';
+import ModalBottom from '../../../components/ModalBottom';
+import SignPad from '../../../components/SignPad';
+import { redirect, useNavigate } from 'react-router-dom';
 
 type Prop = {
   year: number;
@@ -13,16 +16,53 @@ type Prop = {
 };
 
 const PayStub = ({ year, month }: Prop) => {
+  const navigation = useNavigate();
   const [monthList, setMonthList] = useState<Date[]>([]);
   const [selectedYear, setSelectedYear] = useState<number>(year);
   const [selectedMonth, setSelectedMonth] = useState<number>(month);
-  const [payStub, setPayStub] = useState<EmployeePayStubGetResponse>(null);
+
+  //급여 명세서
+  const [payStub, setPayStub] = useState<EmployeePayStubGetResponse | null>(
+    null
+  );
+
+  //모달
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [modalMsg, setModalMsg] = useState<string>('');
+
+  //서명
+  const [getSign, setGetsign] = useState<boolean>(false);
+  const signRef = useRef<SignPadHandler>(null);
 
   const setSelectedYearMonth = (year: number, month: number) => {
     setSelectedYear(year);
     setSelectedMonth(month);
   };
 
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const openModal = (msg?: string) => {
+    setModalMsg(msg || '');
+    setIsModalOpen(true);
+  };
+
+  const signature = async (payStubId: number) => {
+    const sign: [] = signRef.current?.canvasRef.current.toData();
+    console.log(sign);
+    if (!sign) return;
+    try {
+      const response: EmployeeSignatureResponse =
+        await ApiClient.getInstance().employeeSignature(payStubId);
+      if (response) {
+        window.location.reload();
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   const getData = async () => {
     try {
       const response = await ApiClient.getInstance().employeeGetPayStub(
@@ -47,6 +87,26 @@ const PayStub = ({ year, month }: Prop) => {
 
   return (
     <>
+      {isModalOpen && payStub && (
+        <ModalBottom
+          title='전자 서명 동의'
+          closeModal={closeModal}
+          btnText='동의후 서명 시작'
+          btnBottom={!getSign}
+          action={() => setGetsign(true)}
+        >
+          <div>
+            {!getSign ? (
+              <>{modalMsg}</>
+            ) : (
+              <SignPad
+                ref={signRef}
+                submit={() => signature(payStub.payStubId)}
+              />
+            )}
+          </div>
+        </ModalBottom>
+      )}
       {payStub && (
         <WhiteBox className='py-3 px-3 w-full border'>
           <select>
@@ -74,10 +134,12 @@ const PayStub = ({ year, month }: Prop) => {
               총 {payStub.totalPay.toLocaleString()}
             </div>
           </div>
-          {payStub.status !== 'READY' ? (
+          {payStub.status === 'READY' ? (
             <BtnPrimary
-              text='수령 받기'
-              action={() => {}}
+              text={payStub.status === 'COMPLETED' ? '수령받기' : '수령완료'}
+              action={() =>
+                openModal('급여 수령을 위한 전자 서명을 시작하시겠습니까?')
+              }
               className='w-full my-2'
             />
           ) : (
@@ -85,6 +147,7 @@ const PayStub = ({ year, month }: Prop) => {
               text='수령예정'
               action={() => {}}
               className='w-full my-2'
+              disabled
             />
           )}
 
diff --git a/src/types/api/employee-api.d.ts b/src/types/api/employee-api.d.ts
index a0cad96..4d3f116 100644
--- a/src/types/api/employee-api.d.ts
+++ b/src/types/api/employee-api.d.ts
@@ -82,3 +82,8 @@ type EmployeePayStubGetResponse = {
   taxRate: number;
   taxPay: number;
 };
+
+//급여 명세서 전자 서명
+type EmployeeSignatureResponse = {
+  status: number;
+};

From a5087738edd3e0d8d370828769336299e0f1818b Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 2 Jul 2024 14:03:56 +0900
Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EC=95=8C=EB=B0=94=EC=83=9D=20?=
 =?UTF-8?q?=EA=B7=BC=EB=A1=9C=20=EA=B3=84=EC=95=BD=EC=84=9C=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/apiClient.ts              | 12 ++++++++++++
 src/api/interfaces/employeeApi.ts |  4 ++++
 src/types/api/employee-api.d.ts   | 28 ++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+)

diff --git a/src/api/apiClient.ts b/src/api/apiClient.ts
index e39f130..6a31cab 100644
--- a/src/api/apiClient.ts
+++ b/src/api/apiClient.ts
@@ -59,6 +59,18 @@ class ApiClient implements employeeApi {
     return response.data;
   }
 
+  //알바생 - 단일 근로 계약서 조회
+  public async employeeGetContract(
+    employmentContractId: number
+  ): Promise<EmployeePaperGetResponse> {
+    const response = await this.axiosInstance.request({
+      method: 'get',
+      url: `papers/employment-contracts/${employmentContractId}`,
+    });
+
+    return response.data;
+  }
+
   //알바생 - 대표 계좌 등록
   public async registerEmployeeAccount({
     accountNumber,
diff --git a/src/api/interfaces/employeeApi.ts b/src/api/interfaces/employeeApi.ts
index 559b8fb..f7f287e 100644
--- a/src/api/interfaces/employeeApi.ts
+++ b/src/api/interfaces/employeeApi.ts
@@ -19,6 +19,10 @@ interface employeeApi {
     yearn: number,
     month: number
   ): Promise<EmployeePayStubGetResponse>;
+
+  employeeGetContract(
+    employmentContractId: number
+  ): Promise<EmployeePaperGetResponse>;
 }
 
 export default employeeApi;
diff --git a/src/types/api/employee-api.d.ts b/src/types/api/employee-api.d.ts
index a0cad96..63828de 100644
--- a/src/types/api/employee-api.d.ts
+++ b/src/types/api/employee-api.d.ts
@@ -82,3 +82,31 @@ type EmployeePayStubGetResponse = {
   taxRate: number;
   taxPay: number;
 };
+
+//단일 근로 계약서 조회
+type WorkTimes = {
+  workDayOfWeek: string;
+  workStartTime: string;
+  workEndTime: string;
+  restStartTime: string;
+  restEndTime: string;
+};
+
+type EmployeePaperGetResponse = {
+  employmentContractId: number; // 근로계약서 id
+  workPlaceName: string;
+  workStartDate: Date;
+  workSite: string;
+  workDetail: string;
+  workTimes: WorkTimes[];
+  payPerHour: number;
+  paymentDay: number;
+  employeeNm: string;
+  employeeAddress: string;
+  employeePhone: string;
+  restDayOfWeek: number;
+  bonusAmount: number;
+  otherAllowancesAmount: number;
+  otherAllowancesName: string;
+  overTimeRate: number;
+};

From ff428fe5ba4f562ba4fe0f50c76a0eb2a2529161 Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 2 Jul 2024 14:04:08 +0900
Subject: [PATCH 3/9] =?UTF-8?q?bug:=20=EC=98=A4=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 src/App.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 07da1e1..92e3cd2 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0",
     "swiper": "^11.1.4",
-    "react-kakao-maps-sdk": "^1.1.27"
+    "react-kakao-maps-sdk": "^1.1.27",
     "react-signature-canvas": "^1.0.6"
   },
   "devDependencies": {
diff --git a/src/App.tsx b/src/App.tsx
index a0ef5bc..e192b46 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import { Route, Routes } from 'react-router-dom';
 import './App.css';
 import Test from './pages/test';
-import UiTest from './pages/UiTest';
+// import UiTest from './pages/UiTest';
 import OwnerMainPage from './pages/OwnerMainPage';
 import CalendarCustom from './components/ui/CalendarCustom';
 import DateDetail from './components/calendar-owner/DateDetail';
@@ -26,7 +26,7 @@ function App() {
       <Routes>
         <Route path='/' element={<LandingPage />} />
         <Route path='/test' element={<Test />} />
-        <Route path='/ui' element={<UiTest />} />
+        {/* <Route path='/ui' element={<UiTest />} /> */}
         <Route path='/owner/*' element={<OwnerMainPage />}>
           <Route path='calendar' element={<CalendarCustom />} />
           <Route path='calendar/:date' element={<DateDetail />} />

From 46c9f274693042f16adea18efc905d2c5c437431 Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 2 Jul 2024 14:04:20 +0900
Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=EC=95=8C=EB=B0=94=EC=83=9D=20?=
 =?UTF-8?q?=EA=B7=BC=EB=A1=9C=20=EA=B3=84=EC=95=BD=EC=84=9C=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/WorkPlaceName.tsx     |   2 +-
 src/pages/employee/MyPageTab/MyPage.tsx | 223 ++++++++++++++++++------
 2 files changed, 172 insertions(+), 53 deletions(-)

diff --git a/src/components/ui/WorkPlaceName.tsx b/src/components/ui/WorkPlaceName.tsx
index 10cd5b0..3cbe97c 100644
--- a/src/components/ui/WorkPlaceName.tsx
+++ b/src/components/ui/WorkPlaceName.tsx
@@ -8,7 +8,7 @@ type WorkPlaceNameProps = {
 const WorkPlaceName = ({ name, colorType }: WorkPlaceNameProps) => {
   return (
     <span
-      className={`px-3 py-1 rounded-xl m-3 text-sm ${getColor(colorType)} text-nowrap`}
+      className={`px-3 py-1 rounded-xl text-sm ${getColor(colorType)} text-nowrap`}
     >
       {name}
     </span>
diff --git a/src/pages/employee/MyPageTab/MyPage.tsx b/src/pages/employee/MyPageTab/MyPage.tsx
index 7fd52dd..b5cd574 100644
--- a/src/pages/employee/MyPageTab/MyPage.tsx
+++ b/src/pages/employee/MyPageTab/MyPage.tsx
@@ -6,10 +6,40 @@ import WorkPlaceName from '../../../components/ui/WorkPlaceName';
 import ToolBar2 from '../../../components/ui/ToolBar2';
 import { useEffect, useState } from 'react';
 import ApiClient from '../../../api/apiClient';
+import ModalBottom from '../../../components/ModalBottom';
+import { formatDate, styleDate } from '../../../utils/format-date';
 
 const MyPage = () => {
   const navigation = useNavigate();
   const [papers, setPapers] = useState<EmploymentContractListGetResponse[]>([]);
+  const [paperDetail, setPaperDetail] =
+    useState<EmployeePaperGetResponse | null>(null);
+  const [isModalOpen, setModalOpen] = useState<boolean>(false);
+  const [modalMsg, setModalMsg] = useState<string>('');
+
+  const openModal = (msg?: string) => {
+    setModalMsg(msg || '');
+    setModalOpen(true);
+  };
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+
+  const getContract = async (employmentContractId: number) => {
+    try {
+      const response =
+        await ApiClient.getInstance().employeeGetContract(employmentContractId);
+
+      console.log(response);
+
+      setPaperDetail(response);
+      if (response) {
+        openModal();
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
 
   const fetchData = async () => {
     try {
@@ -27,63 +57,152 @@ const MyPage = () => {
     fetchData();
   }, []);
   return (
-    <Frame navTitle='알바ON'>
-      <ToolBar2 isEmployee />
-      <div className='w-full flex flex-col gap-10 '>
-        {/* 나의 정보 */}
-        <Wrapper title='나의 정보' className='mt-7'>
-          <WhiteBox className='px-3 py-7' border>
-            <div className='flex flex-col gap-2 text-sm'>
-              {/* 성명 */}
-              <div className='flex justify-between'>
-                <div>성명</div>
-                <div className='text-gray-400'>이름</div>
-              </div>
-              {/* 전화번호 */}
-              <div className='flex justify-between'>
-                <div>전화번호</div>
-                <div className='text-gray-400'>이름</div>
+    <>
+      {isModalOpen && paperDetail && (
+        <ModalBottom
+          title='근로계약서'
+          closeModal={closeModal}
+          btnBottom
+          btnText='확인'
+          action={closeModal}
+        >
+          <div className='flex flex-col gap-3 mb-5 text-sm max-h-[450px] overflow-y-scroll'>
+            <div className='flex justify-between w-full pt-5'>
+              <div className='font-semibold text-start'>근무지</div>
+              <div>
+                <WorkPlaceName
+                  name={paperDetail?.workPlaceName}
+                  colorType='02'
+                />
               </div>
-              {/* 계좌번호 */}
-              <div className='flex justify-between'>
-                <div>계좌번호</div>
-                <div className='text-gray-400'>이름</div>
+            </div>
+            <div className='flex justify-between w-full'>
+              <div className='font-semibold text-start'>근무지 주소</div>
+              <div>{paperDetail?.workSite}</div>
+            </div>
+            <div className='flex justify-between w-full'>
+              <div className='font-semibold text-start'>근무 내용</div>
+              <div>{paperDetail?.workDetail}</div>
+            </div>
+            <div className='flex justify-between w-full'>
+              <div className='font-semibold text-start'>근무 시작일</div>
+              <div>
+                {paperDetail.workStartDate
+                  .toString()
+                  .substring(
+                    0,
+                    paperDetail.workStartDate.toString().indexOf('T')
+                  )}
               </div>
             </div>
-          </WhiteBox>
-          {/* 수정하기 버튼 */}
-          <button
-            className=' self-end text-gray-400 text-sm mt-2 pr-2 bg-transparent'
-            onClick={() => navigation('/my/edit')}
-          >
-            수정하기
-          </button>
-        </Wrapper>
 
-        {/* 근로계약서 */}
-        <Wrapper title='근로계약서'>
-          <div className='flex flex-col gap-2'>
-            {papers?.map((item, index) => (
-              <WhiteBox
-                className='px-3 py-5'
-                border
-                key={item.employmentContractId}
-              >
-                <div className='flex flex-col justify-center text-sm w-full'>
-                  <div className='w-full flex justify-between items-center'>
-                    <WorkPlaceName
-                      name={item.workPlaceNm}
-                      colorType={item.colorTypeCd}
-                    />
-                    <div>{item.employmentContractCreatedAt}</div>
-                  </div>
-                </div>
-              </WhiteBox>
-            ))}
+            <div className='flex justify-between'>
+              <div className='font-semibold text-start'>나의 주소</div>
+              <div>{paperDetail?.employeeAddress}</div>
+            </div>
+            <div className='flex justify-between gap-10'>
+              <div className='font-semibold text-start'>나의 연락처</div>
+              <div>{paperDetail?.employeePhone}</div>
+            </div>
+            <div className='flex justify-between w-full'>
+              <div className='font-semibold text-start'>휴무일</div>
+              <div>{paperDetail?.restDayOfWeek}</div>
+            </div>
+            <div className='flex justify-between w-full'>
+              <div className='font-semibold text-start'>시급</div>
+              <div>{paperDetail?.payPerHour.toLocaleString()}원</div>
+            </div>
+            <div className='flex justify-between w-full'>
+              <div className='font-semibold text-start'>급여일</div>
+              <div>{paperDetail?.paymentDay}일</div>
+            </div>
+
+            <div className='flex  justify-between w-full'>
+              <div className='font-semibold text-start mb-2'>근무일</div>
+              <div className='flex flex-col gap-3 justify-between'>
+                {paperDetail?.workTimes?.map((item) => {
+                  return (
+                    <div
+                      key={item.workDayOfWeek}
+                      className='flex justify-between'
+                    >
+                      <div className='text-start pr-3'>
+                        {item.workDayOfWeek}
+                      </div>
+                      <div className='flex flex-col'>
+                        <div>
+                          근무시간 {item.workStartTime} - {item.workEndTime}
+                        </div>
+                        <div>
+                          휴게시간 {item.restStartTime} - {item.restEndTime}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
           </div>
-        </Wrapper>
-      </div>
-    </Frame>
+        </ModalBottom>
+      )}
+      <Frame navTitle='알바ON'>
+        <ToolBar2 isEmployee />
+        <div className='w-full flex flex-col gap-10 '>
+          {/* 나의 정보 */}
+          <Wrapper title='나의 정보' className='mt-7'>
+            <WhiteBox className='px-3 py-7' border>
+              <div className='flex flex-col gap-2 text-sm'>
+                {/* 성명 */}
+                <div className='flex justify-between'>
+                  <div>성명</div>
+                  <div className='text-gray-400'>이름</div>
+                </div>
+                {/* 전화번호 */}
+                <div className='flex justify-between'>
+                  <div>전화번호</div>
+                  <div className='text-gray-400'>이름</div>
+                </div>
+                {/* 계좌번호 */}
+                <div className='flex justify-between'>
+                  <div>계좌번호</div>
+                  <div className='text-gray-400'>이름</div>
+                </div>
+              </div>
+            </WhiteBox>
+            {/* 수정하기 버튼 */}
+            <button
+              className=' self-end text-gray-400 text-sm mt-2 pr-2 bg-transparent'
+              onClick={() => navigation('/my/edit')}
+            >
+              수정하기
+            </button>
+          </Wrapper>
+
+          {/* 근로계약서 */}
+          <Wrapper title='근로계약서'>
+            <div className='flex flex-col gap-2'>
+              {papers?.map((item, index) => (
+                <WhiteBox border key={item.employmentContractId}>
+                  <button
+                    type='button'
+                    className='flex flex-col justify-center text-sm w-full h-full bg-transparent py-4'
+                    onClick={() => getContract(item.employmentContractId)}
+                  >
+                    <div className='w-full flex justify-between items-center'>
+                      <WorkPlaceName
+                        name={item.workPlaceNm}
+                        colorType={item.colorTypeCd}
+                      />
+                      <div>{item.employmentContractCreatedAt}</div>
+                    </div>
+                  </button>
+                </WhiteBox>
+              ))}
+            </div>
+          </Wrapper>
+        </div>
+      </Frame>
+    </>
   );
 };
 

From a8e85d40efb7f47b9e0f9d01407cabbf49e98fbe Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 2 Jul 2024 15:13:17 +0900
Subject: [PATCH 5/9] =?UTF-8?q?reafactor:=20=EA=B8=89=EC=97=AC=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=ED=83=AD=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/employee/PartTimeTab/PayStub.tsx    | 13 ++++++++--
 .../employee/PartTimeTab/PaymentDetail.tsx    | 25 +++++++++++++------
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/pages/employee/PartTimeTab/PayStub.tsx b/src/pages/employee/PartTimeTab/PayStub.tsx
index 159b425..e6d0627 100644
--- a/src/pages/employee/PartTimeTab/PayStub.tsx
+++ b/src/pages/employee/PartTimeTab/PayStub.tsx
@@ -63,6 +63,15 @@ const PayStub = ({ year, month }: Prop) => {
     }
   };
 
+  const textConvert = (status: string): string => {
+    if (status === 'READY') return '간편 지급';
+    if (status === 'SIGN') return '수령 받기';
+    if (status === 'WAITING') return '수령 대기';
+    if (status === 'COMPLETED') return '수령 완료';
+
+    return '';
+  };
+
   const getData = async () => {
     try {
       const response = await ApiClient.getInstance().employeeGetPayStub(
@@ -136,7 +145,7 @@ const PayStub = ({ year, month }: Prop) => {
           </div>
           {payStub.status === 'READY' ? (
             <BtnPrimary
-              text={payStub.status === 'COMPLETED' ? '수령받기' : '수령완료'}
+              text={textConvert(payStub.status)}
               action={() =>
                 openModal('급여 수령을 위한 전자 서명을 시작하시겠습니까?')
               }
@@ -144,7 +153,7 @@ const PayStub = ({ year, month }: Prop) => {
             />
           ) : (
             <BtnGray
-              text='수령예정'
+              text={textConvert(payStub.status)}
               action={() => {}}
               className='w-full my-2'
               disabled
diff --git a/src/pages/employee/PartTimeTab/PaymentDetail.tsx b/src/pages/employee/PartTimeTab/PaymentDetail.tsx
index 44e7c86..2b8f706 100644
--- a/src/pages/employee/PartTimeTab/PaymentDetail.tsx
+++ b/src/pages/employee/PartTimeTab/PaymentDetail.tsx
@@ -8,13 +8,21 @@ import Frame from '../../../components/Frame';
 import NavToggle from '../../../components/NavToggle';
 import PayStub from './PayStub';
 import generateMonthList from '../../../utils/generateMonthList';
+import useToggle from '../../../hooks/toggle';
+
+enum ToggleStatus {
+  PAYMENT = 'payment',
+  WORKTIME = 'worktime',
+}
 
 const PaymentDetail = () => {
   const today = new Date();
   const { workPlace, dayMonth } = useParams();
   const [monthList, setMonthList] = useState<Date[]>([]);
   const [selectedMonth, setSelectedMonth] = useState<Date>(today);
-
+  const [selectedToggle, setSelectedToggle] = useState<ToggleStatus>(
+    ToggleStatus.PAYMENT
+  );
   useEffect(() => {
     setMonthList(generateMonthList());
   }, []);
@@ -42,15 +50,18 @@ const PaymentDetail = () => {
             <NavToggle
               first='급여 명세서'
               second='근무 내역'
-              firstSelected={() => {}}
-              secondSelected={() => {}}
+              firstSelected={() => setSelectedToggle(ToggleStatus.PAYMENT)}
+              secondSelected={() => setSelectedToggle(ToggleStatus.WORKTIME)}
             />
 
             {/* 급여명세서 */}
-            <PayStub
-              year={selectedMonth.getFullYear()}
-              month={selectedMonth.getMonth()}
-            />
+            {selectedToggle === ToggleStatus.PAYMENT && (
+              <PayStub
+                year={selectedMonth.getFullYear()}
+                month={selectedMonth.getMonth()}
+              />
+            )}
+            {selectedToggle === ToggleStatus.WORKTIME && <div></div>}
           </div>
         )}
       </div>

From dab655a613ba8a14394958b0f51d306331655c21 Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 2 Jul 2024 17:20:16 +0900
Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=EC=B6=9C=EC=84=9D=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/apiClient.ts              | 11 +++++++++++
 src/api/interfaces/employeeApi.ts |  2 ++
 2 files changed, 13 insertions(+)

diff --git a/src/api/apiClient.ts b/src/api/apiClient.ts
index 46094c5..c65f2e5 100644
--- a/src/api/apiClient.ts
+++ b/src/api/apiClient.ts
@@ -135,6 +135,17 @@ class ApiClient implements employeeApi {
     return response.data;
   }
 
+  //알바생 - 출결 목록 조회
+  public async employeeGetAttendanceList(): Promise<EmployeeTodayAttendancesResponse> {
+    const response: BaseResponse<EmployeeTodayAttendancesResponse> =
+      await this.axiosInstance.request({
+        method: 'get',
+        url: 'attendances/today',
+      });
+
+    return response.data;
+  }
+
   //==========================
   // 생성 메소드
   private static createAxiosInstance() {
diff --git a/src/api/interfaces/employeeApi.ts b/src/api/interfaces/employeeApi.ts
index ce338b9..acba320 100644
--- a/src/api/interfaces/employeeApi.ts
+++ b/src/api/interfaces/employeeApi.ts
@@ -25,6 +25,8 @@ interface employeeApi {
   ): Promise<EmployeePaperGetResponse>;
 
   employeeSignature(payStubId: number): Promise<EmployeeSignatureResponse>;
+
+  employeeGetAttendanceList(): Promise<EmployeeTodayAttendancesResponse>;
 }
 
 export default employeeApi;

From b511d370f4ac9e38276d1a037e2f4428bd08af9b Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 2 Jul 2024 17:20:32 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=08fix:=20=EC=BB=AC=EB=9F=AC=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=ED=8C=8C=EC=8A=A4=ED=85=94=EB=A1=9C=20=EB=B0=94?=
 =?UTF-8?q?=EA=BE=B8=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/get-color.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/utils/get-color.ts b/src/utils/get-color.ts
index 2fa8020..8b2e9ce 100644
--- a/src/utils/get-color.ts
+++ b/src/utils/get-color.ts
@@ -3,26 +3,26 @@
 export function getColor(colorType: string) {
   switch (colorType) {
     case '01':
-      return 'bg-red-400';
+      return 'bg-red-200';
     case '02':
-      return 'bg-lime-500';
+      return 'bg-lime-200';
     case '03':
       return 'bg-yellow-200 ';
     case '04':
-      return 'bg-blue-300';
+      return 'bg-blue-100';
     case '05':
-      return 'bg-emerald-400';
+      return 'bg-emerald-200';
     case '06':
-      return 'bg-slate-300';
+      return 'bg-slate-200';
     case '07':
       return 'bg-cyan-200';
     case '08':
-      return 'bg-pink-300';
+      return 'bg-pink-100';
     case '09':
-      return 'bg-fuchsia-400';
+      return 'bg-fuchsia-100';
     case '10':
-      return 'bg-violet-300';
+      return 'bg-violet-100';
     default:
-      return 'bg-hanaLightGreen';
+      return 'bg-violet-200';
   }
 }

From fe774c678e5b680543a6f146266515587e6e394a Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 2 Jul 2024 17:20:47 +0900
Subject: [PATCH 8/9] =?UTF-8?q?chore:=20=EC=B6=9C=EA=B7=BC=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20type=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/api/employee-api.d.ts | 35 +++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/types/api/employee-api.d.ts b/src/types/api/employee-api.d.ts
index 2c5fa6e..9d84f08 100644
--- a/src/types/api/employee-api.d.ts
+++ b/src/types/api/employee-api.d.ts
@@ -115,3 +115,38 @@ type EmployeePaperGetResponse = {
 type EmployeeSignatureResponse = {
   status: number;
 };
+
+//오늘 출근 목록
+type Notice = {
+  notificationId: number;
+  title: string;
+  content: string;
+  date: Date;
+};
+type AttendanceWorkTime = {
+  workDayOfWeek: string;
+  workStartTime: string;
+  workEndTime: string;
+  restStartTime: string;
+  restEndTime: string;
+};
+
+type AttendanceTodayWork = {
+  workPlaceEmployeeId: number;
+  workPlaceName: string;
+  colorTypeCode: string;
+  workTime: AttendanceWorkTime[];
+  notice: Notice[]; // <- 차이점! 밑의 totalWorks 에는 없음
+};
+
+type AttendanceWork = {
+  workPlaceEmployeeId: number;
+  workPlaceName: string;
+  colorTypeCode: string;
+  workTime: AttendanceWorkTime[];
+};
+
+type EmployeeTodayAttendancesResponse = {
+  works: AttendanceTodayWork[];
+  totalWorks: AttendanceWork[];
+};

From ce92f6d1c780f3f2c1faf2b83db770dc0dd597bf Mon Sep 17 00:00:00 2001
From: jennyjoo <100cllr@gmail.com>
Date: Tue, 2 Jul 2024 17:20:59 +0900
Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20=ED=95=98=EB=93=9C=EC=BD=94?=
 =?UTF-8?q?=EB=94=A9=20=EC=97=86=EC=95=A0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/employee/Attendance/Attendance.tsx | 193 +++++++++++++++----
 src/pages/employee/PartTimeTab/WorkTime.tsx  |  12 +-
 2 files changed, 166 insertions(+), 39 deletions(-)

diff --git a/src/pages/employee/Attendance/Attendance.tsx b/src/pages/employee/Attendance/Attendance.tsx
index ca3d9d2..082f565 100644
--- a/src/pages/employee/Attendance/Attendance.tsx
+++ b/src/pages/employee/Attendance/Attendance.tsx
@@ -6,50 +6,169 @@ import WorkPlaceName from '../../../components/ui/WorkPlaceName';
 import BtnPrimary from '../../../components/BtnPrimary';
 import ToolBar2 from '../../../components/ui/ToolBar2';
 import { useNavigate } from 'react-router-dom';
+import ApiClient from '../../../api/apiClient';
+import { useEffect, useState } from 'react';
+import BtnGray from '../../../components/BtnGray';
+
+const today = new Date();
+const day = today.getDay();
+const month = today.getMonth() + 1;
+const currentTime = today.getHours();
+const currentTimeMin = today.getMinutes();
+
+const days = [
+  '일요일',
+  '월요일',
+  '화요일',
+  '수요일',
+  '목요일',
+  '금요일',
+  '토요일',
+];
 
 const Attendance = () => {
   const navigation = useNavigate();
+
+  const [attendances, setAttendances] =
+    useState<EmployeeTodayAttendancesResponse | null>(null);
+
+  const isActivated = (target: AttendanceTodayWork): boolean => {
+    const index = target.workTime.findIndex(
+      (item) => item.workDayOfWeek === days[day]
+    );
+    if (!index) return false;
+
+    const startTime = target.workTime[index].workStartTime;
+    const sh = startTime.substring(0, startTime.indexOf(':'));
+    const smin = startTime.substring(startTime.indexOf(':') + 1);
+
+    const endTime = target.workTime[index].workEndTime;
+    const eh = endTime.substring(0, startTime.indexOf(':'));
+    const emin = endTime.substring(startTime.indexOf(':') + 1);
+
+    const start = new Date();
+    start.setTime(+sh);
+    start.setMinutes(+smin);
+
+    const end = new Date();
+    end.setTime(+eh);
+    end.setMinutes(+emin);
+
+    if (start < today && start < end) return true;
+
+    return false;
+  };
+
+  const getAttendanceList = async () => {
+    try {
+      const response =
+        await ApiClient.getInstance().employeeGetAttendanceList();
+
+      console.log(response);
+      setAttendances(response);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  useEffect(() => {
+    getAttendanceList();
+  }, []);
+
   return (
     <>
-      <Frame navTitle='알바ON'>
-        <ToolBar2 isEmployee />
-        <div className='w-full flex flex-col gap-10 mt-7'>
-          {/* 오늘 출근 목록 */}
-          <Wrapper title='오늘 출근 목록'>
-            <WhiteBox border className='py-5'>
-              <div className='flex flex-col gap-1 text-start'>
-                <button
-                  type='button'
-                  className='flex justify-between items-center bg-transparent'
-                  onClick={() => navigation('detail/롯데리아')}
-                >
-                  <WorkPlaceName name='롯데리아' colorType='02' />
-                  <FaAngleRight />
-                </button>
-                <div className='font-bold text-gray-400'>9:00 ~ 10:00</div>
-                <div className='border rounded-sm text-sm border-hanaLightGreen px-3 mb-2'>
-                  [롯데리아] 행주 널어놓고 가세요
-                </div>
-                <BtnPrimary text='출근' action={() => {}} />
+      {attendances && (
+        <Frame navTitle='알바ON'>
+          <ToolBar2 isEmployee />
+          <div className='w-full flex flex-col gap-10 mt-7'>
+            {/* 오늘 출근 목록 */}
+            <Wrapper title='오늘 출근 목록'>
+              <div>
+                {attendances?.works.map((item) => (
+                  <WhiteBox
+                    key={item.workPlaceEmployeeId}
+                    border
+                    className='py-5'
+                  >
+                    <div className='flex flex-col gap-1 text-start'>
+                      <button
+                        type='button'
+                        className='flex justify-between items-center bg-transparent'
+                        onClick={() => navigation('detail/롯데리아')}
+                      >
+                        <WorkPlaceName
+                          name={item.workPlaceName}
+                          colorType={item.colorTypeCode}
+                        />
+                        <FaAngleRight />
+                      </button>
+                      <div>
+                        {item.workTime
+                          .filter((it) => it.workDayOfWeek === days[day])
+                          .map((i, index) => (
+                            <div
+                              key={i.restEndTime + String(index)}
+                              className='font-bold text-gray-400'
+                            >
+                              {i.workStartTime} - {i.workEndTime}
+                            </div>
+                          ))}
+                      </div>
+
+                      <div className='border rounded-sm text-sm border-hanaLightGreen px-3 mb-2'>
+                        <div className='flex font-semibold '>
+                          <span className='pr-1'>[{item.workPlaceName}]</span>
+                          <span>{item.notice[0].title}</span>
+                        </div>
+                        {` ${item.notice[0].content}`}
+                      </div>
+                      {isActivated(item) ? (
+                        <BtnPrimary text='출근' action={() => {}} />
+                      ) : (
+                        <BtnGray text='출근' action={() => {}} disabled />
+                      )}
+                    </div>
+                  </WhiteBox>
+                ))}
               </div>
-            </WhiteBox>
-          </Wrapper>
-          {/* 전체 출근 목록 */}
-          <Wrapper title='전체 출근 목록'>
-            <WhiteBox border className='py-3'>
-              <div className='flex justify justify-between items-center '>
-                <div className='flex flex-col items-start gap-1'>
-                  <WorkPlaceName name='롯데리아 자양점' colorType='03' />
-                  <div className='text-gray-400 text-sm'>
-                    월요일 08:00 ~ 09:00
-                  </div>
-                </div>
-                <FaAngleDown />
+            </Wrapper>
+            {/* 전체 출근 목록 */}
+            <Wrapper title='전체 출근 목록'>
+              <div className='flex flex-col gap-1'>
+                {attendances?.totalWorks?.map((item) => (
+                  <WhiteBox
+                    key={item.workPlaceEmployeeId}
+                    border
+                    className='py-3'
+                  >
+                    <div className='flex justify justify-between items-center '>
+                      <div className='flex flex-col items-start gap-1'>
+                        <WorkPlaceName
+                          name={item.workPlaceName}
+                          colorType={item.colorTypeCode}
+                        />
+                        {item.workTime.length > 0 ? (
+                          <div className='text-gray-400 text-sm'>
+                            {item.workTime[0]?.workDayOfWeek}{' '}
+                            {item.workTime[0]?.workStartTime}
+                            {' - '}
+                            {item.workTime[0]?.workEndTime}
+                          </div>
+                        ) : (
+                          <div className='text-gray-400 text-sm'>
+                            입력된 근무일정 없음
+                          </div>
+                        )}
+                      </div>
+                      <FaAngleDown />
+                    </div>
+                  </WhiteBox>
+                ))}
               </div>
-            </WhiteBox>
-          </Wrapper>
-        </div>
-      </Frame>
+            </Wrapper>
+          </div>
+        </Frame>
+      )}
     </>
   );
 };
diff --git a/src/pages/employee/PartTimeTab/WorkTime.tsx b/src/pages/employee/PartTimeTab/WorkTime.tsx
index 3a008cd..62b1a6a 100644
--- a/src/pages/employee/PartTimeTab/WorkTime.tsx
+++ b/src/pages/employee/PartTimeTab/WorkTime.tsx
@@ -56,8 +56,13 @@ const WorkTime = () => {
   useEffect(() => {
     getConfirmList();
     fetchPaperList();
+    console.log(papers);
   }, []);
 
+  useEffect(() => {
+    console.log(papers);
+  }, [papers]);
+
   return (
     // 연동 요청
     <div className='w-full flex flex-col gap-10'>
@@ -79,11 +84,14 @@ const WorkTime = () => {
       </Wrapper>
 
       {/* 사장님과 연동 */}
-      <Wrapper title='사장님과 연동'>
+      <Wrapper title='사장님과 연동' className='flex flex-col gap-1'>
         {papers?.map((item) => (
           <WhiteBox className='py-3' border key={item.employmentContractId}>
             <div className='flex justify-between items-center'>
-              <WorkPlaceName name={item.workPlaceNm} colorType='02' />
+              <WorkPlaceName
+                name={item.workPlaceNm}
+                colorType={item.colorTypeCd}
+              />
               <BtnBorder color='gray' text='계약 완료' onClick={() => {}} />
             </div>
           </WhiteBox>