feat: 나의 사업장리스트 백엔드 연결

package.json

@@ -14,10 +14,11 @@
     "axios": "^1.7.2",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "moment-timezone": "^0.5.45",
     "react": "^18.3.1",
     "react-calendar": "^5.0.0",
-    "react-datepicker": "^7.2.0",
     "react-cookie": "^7.1.4",
+    "react-datepicker": "^7.2.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-kakao-maps-sdk": "^1.1.27",

src/api/apiClient.ts

@@ -3,6 +3,7 @@ import employeeApi from './interfaces/employeeApi';
 import ownerApi from './interfaces/ownerApi';
 import userApi from './interfaces/userApi';
 import { getToken } from '../utils/token';
+import { EmployeeContract } from '../types/contract';
 
 class ApiClient implements employeeApi, userApi, ownerApi {
   //singleton pattern
@@ -336,6 +337,8 @@ class ApiClient implements employeeApi, userApi, ownerApi {
     return response.data;
   }
 
+  // ==========================
+
   // 사장님 - 캘린더 데이터
   public async getCalendarData(
     year: number,
@@ -398,6 +401,32 @@ class ApiClient implements employeeApi, userApi, ownerApi {
     return response.data;
   }
 
+  // 사장님 - 근로자 추가
+  public async registerEmployee(
+    id: number,
+    request: Partial<EmployeeContract>
+  ): Promise<RegisterEmployeeResponse> {
+    const respnose: BaseResponse<RegisterEmployeeResponse> =
+      await this.axiosInstance.request({
+        method: 'post',
+        url: `/papers/${id}/employment-contracts`,
+        data: request,
+      });
+    return respnose.data;
+  }
+  // 사장님 - 근무 수동 추가
+  public async registerAttendance(
+    request: RegisterAttendanceManualRequest
+  ): Promise<RegisterAttendanceManualResponse> {
+    const response: BaseResponse<RegisterAttendanceManualResponse> =
+      await this.axiosInstance.request({
+        method: 'post',
+        url: `/owner/attendances/manual`,
+        data: request,
+      });
+    return response.data;
+  }
+
   //==========================
   // 생성 메소드
   private static createAxiosInstance() {

src/api/interfaces/ownerApi.ts

@@ -1,3 +1,5 @@
+import { EmployeeContract } from '../../types/contract';
+
 interface ownerApi {
   getCalendarData(year: number, month: number): Promise<CalendarData>;
 
@@ -12,5 +14,15 @@ interface ownerApi {
   getMyEmployees(employeeStatus: string): Promise<GetEmployeeList>;
 
   getNotifications(id: number): Promise<NotificationsResponse>;
+
+  // 사장님 - 근로자 추가
+  registerEmployee(
+    id: number,
+    request: Partial<EmployeeContract>
+  ): Promise<RegisterEmployeeResponse>;
+
+  registerAttendance(
+    request: RegisterAttendanceManualRequest
+  ): Promise<RegisterAttendanceManualResponse>;
 }
 export default ownerApi;

src/components/employee/CalendarEmployee.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useState } from 'react';
+import './CalendarCustom.css';
+import Calendar, { OnArgs } from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
+import CalendarMark from './CalendarMark';
+import { useNavigate } from 'react-router-dom';
+import { useCalendarData } from '../../contexts/Calender-Data-Context';
+import ApiClient from '../../api/apiClient';
+import { parseYYYMMDD } from '../../utils/date-util';
+
+type ValuePiece = Date | null;
+type Value = ValuePiece | [ValuePiece, ValuePiece];
+
+const currentDate = new Date();
+
+const CalendarEmployee = () => {
+  const [value, setValue] = useState<Value>(currentDate);
+  const { calendarData, setCalendarData } = useCalendarData();
+  const navigate = useNavigate();
+
+  console.log('🚀  CalendarCustom  value:', value);
+
+  useEffect(() => {
+    if (value instanceof Date) {
+      const year = value.getFullYear();
+      const month = value.getMonth() + 1;
+      fetchData(year, month);
+    }
+  }, [value]);
+
+  const fetchData = async (year: number, month: number) => {
+    try {
+      const response = await ApiClient.getInstance().getCalendarData(
+        year,
+        month
+      );
+      console.log('API 호출 결과:', response);
+      setCalendarData(response);
+    } catch (error) {
+      console.error('API 호출 실패:', error);
+    }
+  };
+
+  const onChangeCurrentDate = (args: OnArgs) => {
+    const { action, activeStartDate, value, view } = args;
+    // console.log('🚀  activeStartDate:', activeStartDate);
+    // console.log('🚀  view:', view);
+    // console.log('🚀  value:', value);
+    // console.log('🚀  action:', action);
+    setValue(activeStartDate!);
+  };
+
+  const onClickDate = (date: Date) => {
+    const localDateString = date.toLocaleDateString('en-CA'); // 'YYYY-MM-DD' 형식
+    navigate(`/owner/calendar/${localDateString}`);
+  };
+
+  const getListForDate = (date: Date) => {
+    const list = [];
+    calendarData &&
+      calendarData.workPlaceList.map((workPlace) => {
+        if (
+          new Date(parseYYYMMDD(workPlace.attendDate)).toDateString() ===
+          date.toDateString()
+        ) {
+          list.push({
+            ...workPlace,
+          });
+        }
+      });
+    return list;
+  };
+
+  // const getEventsForDate = (date: Date) => {
+  //   const events = [];
+  //   calendarData.forEach((workPlace) => {
+  //     workPlace.days.forEach((day) => {
+  //       if (new Date(day.startTime).toDateString() === date.toDateString()) {
+  //         events.push({
+  //           ...day,
+  //           workPlaceName: workPlace.workPlaceName,
+  //           workPlaceColor: workPlace.workPlaceColor,
+  //         });
+  //       }
+  //     });
+  //   });
+  //   return events;
+  // };
+
+  // 날짜 타일에 맞춤 콘텐츠를 추가한다.
+  const tileContent = ({ date, view }: { date: Date; view: string }) => {
+    if (view === 'month') {
+      // const events = getEventsForDate(date);
+      const list = getListForDate(date);
+      return (
+        <div className='h-full w-full'>
+          {list.map((data) => (
+            <CalendarMark key={`${data}`} {...data} />
+          ))}
+          {/* {events.map((event) => (
+            <CalendarMark key={event.attendanceId} {...event} />
+            // <div
+            //   key={event.attendanceId}
+            //   className={`text-xs p-1 rounded-md mb-1 bg-color-${event.workPlaceColor}`}
+            //   title={`${event.employeeName} - ${event.workPlaceName}`}
+            // >
+            //   {event.employeeName} - {event.workPlaceName}
+            // </div>
+          ))} */}
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div className='rounded-mdw-ful'>
+      <Calendar
+        locale='en'
+        className={'w-full'}
+        onChange={setValue}
+        onClickDay={onClickDate}
+        onActiveStartDateChange={onChangeCurrentDate}
+        value={value}
+        tileClassName={['h-28']}
+        tileContent={tileContent}
+      />
+    </div>
+  );
+};
+export default CalendarEmployee;