Merge branch 'main' of https://github.com/hanaro-on-and-on/client int…

…o feat/#24
hanaro-on-and-on · Jul 2, 2024 · fe9f23c · fe9f23c
2 parents 4ad29b2 + f90200e
commit fe9f23c
Show file tree

Hide file tree

Showing 11 changed files with 557 additions and 116 deletions.
diff --git 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 />} />

diff --git 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,
@@ -110,6 +122,30 @@ 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;
+  }
+
+  //알바생 - 출결 목록 조회
+  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
@@ -19,6 +19,14 @@ interface employeeApi {
     yearn: number,
     month: number
   ): Promise<EmployeePayStubGetResponse>;
+
+  employeeGetContract(
+    employmentContractId: number
+  ): Promise<EmployeePaperGetResponse>;
+
+  employeeSignature(payStubId: number): Promise<EmployeeSignatureResponse>;
+
+  employeeGetAttendanceList(): Promise<EmployeeTodayAttendancesResponse>;
 }
 
 export default employeeApi;
diff --git 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/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>
+      )}
     </>
   );
 };