Feat/#197

src/App.tsx

@@ -33,6 +33,7 @@ import LoginPage from './pages/LoginPgae/LoginPage';
 import CalendarEmployee from './components/employee/CalendarEmployee';
 import WorkPlaceAdd from './components/owner-workplace/WorkPlaceAdd';
 import AddWorkPlace from './pages/owner/AddWorkPlace';
+import EmployeeCalendar from './pages/employee/Calendar/EmployeeCalendar';
 
 function App() {
   return (
@@ -92,6 +93,7 @@ function App() {
           path='/part-time/worktime/manual/addition'
           element={<ManualWorkPlaceAddition />}
         />
+        <Route path='/calendar' element={<EmployeeCalendar />} />
         <Route path='/my' element={<MyPage />} />
         <Route path='/my/edit' element={<EditMyPage />} />
         <Route path='/attendance' element={<Attendance />} />

src/components/employee/CalendarEmployee.tsx

@@ -2,13 +2,11 @@ import { useEffect, useState } from 'react';
 import './CalendarEmployee.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';
 import { useEmployeeCalendarData } from '../../contexts/Employee-Calender-Data-Context';
-import CalendarMark from '../ui/CalendarMark';
+import EmployeeCalendarMark from './EmployeeCalendarMark';
 
 type ValuePiece = Date | null;
 type Value = ValuePiece | [ValuePiece, ValuePiece];
@@ -20,8 +18,6 @@ const CalendarEmployee = () => {
   const { calendarData, setCalendarData } = useEmployeeCalendarData();
   const navigate = useNavigate();
 
-  console.log('🚀  CalendarCustom  value:', value);
-
   useEffect(() => {
     if (value instanceof Date) {
       const year = value.getFullYear();
@@ -54,17 +50,17 @@ const CalendarEmployee = () => {
 
   const onClickDate = (date: Date) => {
     const localDateString = date.toLocaleDateString('en-CA'); // 'YYYY-MM-DD' 형식
-    navigate(`/owner/calendar/${localDateString}`);
+    navigate(`/calendar/${localDateString}`);
   };
 
   const getListForDate = (date: Date) => {
     const list = [];
     calendarData &&
       calendarData.list.map((workPlace) => {
-        if (
-          new Date(parseYYYMMDD(workPlace.attendDate)).toDateString() ===
-          date.toDateString()
-        ) {
+        const result = new Date(
+          parseYYYMMDD(workPlace.attendDate)
+        ).toDateString();
+        if (result === date.toDateString()) {
           list.push({
             ...workPlace,
           });
@@ -76,6 +72,7 @@ const CalendarEmployee = () => {
   // const getEventsForDate = (date: Date) => {
   //   const events = [];
   //   calendarData.forEach((workPlace) => {
+
   //     workPlace.days.forEach((day) => {
   //       if (new Date(day.startTime).toDateString() === date.toDateString()) {
   //         events.push({
@@ -94,13 +91,12 @@ const CalendarEmployee = () => {
     if (view === 'month') {
       // const events = getEventsForDate(date);
       const list = getListForDate(date);
-      console.log(list, '>>>>>>>>>>>>>>>>>');
+      // console.log(list, '>>>>>>>>>>>>>>>>>');
       return (
         // <div>헬로</div>
         <div className='h-full w-full'>
           {list.map((data) => (
-            <div key={`${data}`}>{data.workPlaceName}</div>
-            // <CalendarMark key={`${data}`} {...data} />
+            <EmployeeCalendarMark key={`${data.id}`} {...data} />
           ))}
         </div>
       );

src/components/employee/EmployeeCalendarMark.tsx

@@ -0,0 +1,52 @@
+import { FaCircle } from 'react-icons/fa6';
+import calculateDailyWage from '../../utils/get-DailyPay';
+import { getBorderColor, getColor, getTextColor } from '../../utils/get-color';
+import { HStack } from './Stack';
+
+type EmployeeCalendarMarkProps = {
+  id: number;
+  workPlaceName: string;
+  workPlaceColorCode: string;
+  attendDate: string;
+  attendanceType: string;
+  payment: number;
+  startTime: string;
+  endTime: string;
+  restMinute: number;
+  isConnected: boolean;
+};
+
+const EmployeeCalendarMark = (props: EmployeeCalendarMarkProps) => {
+  const {
+    id,
+    workPlaceName,
+    workPlaceColorCode,
+    attendDate,
+    attendanceType,
+    payment,
+  } = props;
+
+  return (
+    <div
+      className={`flex flex-row rounded-lg border gap-0.5 ${getBorderColor(workPlaceColorCode)} items-center px-0.5`}
+    >
+      {/* <div
+        className={`font-semibold ${getColor(workPlaceColorCode)} rounded-lg pr-1`}
+      >
+        {'hi'}
+      </div> */}
+      <div
+        className={`text-2xs ${getColor(workPlaceColorCode)} ${getTextColor(workPlaceColorCode)} rounded-full h-2 w-2`}
+      >
+        _
+      </div>
+      <span className='font-semibold text-2xs'>{payment.toLocaleString()}</span>
+    </div>
+    // <div
+    //   className={`px-1 rounded-lg text-nowrap text-xs ${getColor(workPlaceColor)}`}
+    //   style={{ minWidth: 'fit-content' }}
+    // >{`${payment}`}</div>
+  );
+};
+
+export default EmployeeCalendarMark;

src/components/employee/EmployeeDateDetail.tsx

@@ -0,0 +1,117 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { useCalendarData } from '../../contexts/Calender-Data-Context';
+import { HStack, VStack } from '../ui/Stack';
+import WorkPlaceName from '../ui/WorkPlaceName';
+import { getTimeString } from '../../utils/get-TimeString';
+import { FaAngleRight } from 'react-icons/fa6';
+import { AiOutlinePlusCircle } from 'react-icons/ai';
+import { useAttendance } from '../../contexts/Attendance-Context';
+import { DateWorkDetail } from '../../types/calendar';
+import { differenceInHours, differenceInMinutes } from 'date-fns';
+import { useEmployeeCalendarData } from '../../contexts/Employee-Calender-Data-Context';
+export type Attendance = {
+  attendanceId?: number;
+  workPlaceEmployeeId: number;
+  payPerHour: number; // 시급
+  startTime: Date; // 시작 시간
+  endTime: Date; // 끝 시간
+  restStartTime: Date;
+  restEndTime: Date;
+};
+
+// 두 날짜 간의 총 시간을 계산하는 함수
+const calculateWorkedHours = (data: DateWorkDetail[]): string => {
+  let totalMinutes = 0;
+
+  data.forEach((item) => {
+    totalMinutes += differenceInMinutes(item.endTime, item.startTime);
+  });
+
+  // 전체 시간 차이 계산
+  const totalHours = Math.floor(totalMinutes / 60);
+  const remainingMinutes = totalMinutes % 60;
+
+  return `${totalHours}시간 ${remainingMinutes}분`;
+};
+
+const onClickChangeAttendance = (data: DateWorkDetail) => {
+  return {
+    attendenceId: data.attendanceId,
+    workPlaceEmployeeId: data.workPlaceEmployeeId,
+    payPerHour: data.payment,
+    startTime: data.startTime,
+    endTime: data.endTime,
+    restMinutes: data.restMinute,
+  };
+};
+
+const EmployeeDateDetail = () => {
+  const { date } = useParams();
+  const navigate = useNavigate();
+  const { calendarData, getFilteredData } = useEmployeeCalendarData();
+  const { changeAttendance } = useAttendance();
+
+  const onClickEditAttendance = (attendanceId: number) => {
+    navigate(`/calendar/attendance/${attendanceId}/edit`);
+  };
+  const onClickAddAttendance = () => {
+    navigate(`/calendar/${date}/add`);
+  };
+
+  const targetDate = new Date(date!);
+
+  const temp = getFilteredData(targetDate);
+  console.log(temp);
+
+  return (
+    <div className='px-6 py-7'>
+      <VStack className='gap-3'>
+        <HStack className='justify-between items-center'>
+          <div className='text-sm text-gray-400'>
+            총 근무 시간: {calculateWorkedHours(temp)}
+          </div>
+          <button
+            className='bg-hanaLightGreen gap-2 py-1 px-2 flex items-center rounded-lg text-white'
+            onClick={onClickAddAttendance}
+          >
+            <AiOutlinePlusCircle />
+            <div>근무 추가</div>
+          </button>
+        </HStack>
+
+        {temp &&
+          temp.map((item) => (
+            <button
+              key={item.attendanceId}
+              onClick={() => {
+                changeAttendance({
+                  attendanceId: item.attendanceId,
+                  workPlaceEmployeeId: item.workPlaceEmployeeId,
+                  payPerHour: item.payment,
+                  startTime: item.startTime,
+                  endTime: item.endTime,
+                  restMinutes: item.restMinute,
+                }),
+                  onClickEditAttendance(item.attendanceId);
+              }}
+              className='px-1 py-3 w-full rounded-lg border border-hanaLightGreen bg-white'
+            >
+              <HStack className='justify-around items-center'>
+                <WorkPlaceName
+                  name={`${item.workPlaceName}`}
+                  colorType={`${item.workPlaceColor}`}
+                />
+                <VStack className=''>
+                  <div className='text-lg'>{`${item.employeeName}`}</div>
+                  <div className='text-sm'>{`${getTimeString(new Date(item.startTime))} - ${getTimeString(new Date(item.endTime))}`}</div>
+                </VStack>
+                <FaAngleRight />
+              </HStack>
+            </button>
+          ))}
+      </VStack>
+    </div>
+  );
+};
+
+export default EmployeeDateDetail;

src/components/owner-workplace/WorkEmployeeAdd-Third.tsx

@@ -76,14 +76,15 @@ const WorkEmployeeAddThird = () => {
       console.error('API 호출 실패:', error);
     }
   };
-  const [ready, setReady] = useState(false);
-  if (ready) {
-    console.log(employeeContract);
-    fetchContract();
-    setReady(false);
-  }
 
-  const onClickAddThird = () => {
+  // const [ready, setReady] = useState(false);
+  // if (ready) {
+  //   console.log(employeeContract);
+  //   fetchContract();
+  //   setReady(false);
+  // }
+
+  const onClickAddThird = async () => {
     addThirdInfo({
       payPerHour,
       paymentDay,
@@ -108,8 +109,9 @@ const WorkEmployeeAddThird = () => {
       otherAllowancesName: allowance === Allowance.OFF ? undefined : '제수당',
       overtimeRate,
     });
-    setReady(true);
-    navigate(`/owner/myWorkPlaces/${placeId}/addEmployee/third`);
+    await fetchContract();
+    // setReady(true);
+    navigate(`/owner/myWorkPlaces/${placeId}/addEmployee/complete`);
   };
 
   return (

src/components/ui/CalendarMark.tsx

@@ -1,5 +1,5 @@
 import calculateDailyWage from '../../utils/get-DailyPay';
-import { getColor } from '../../utils/get-color';
+import { getBorderColor, getColor } from '../../utils/get-color';
 import { HStack } from './Stack';
 
 type CalendarMarkProps = {
@@ -17,9 +17,11 @@ const CalendarMark = (props: CalendarMarkProps) => {
 
   return (
     <div
-      className={`flex flex-row rounded-lg border gap-0.5 border-red-300 text-2xs items-left`}
+      className={`flex flex-row rounded-lg border gap-0.5 ${getBorderColor(workPlaceColor)} text-2xs items-left`}
     >
-      <div className='font-semibold bg-red-300 rounded-lg pr-1'>
+      <div
+        className={`font-semibold ${getColor(workPlaceColor)} rounded-lg pr-1`}
+      >
         {employeeSize}
       </div>
       <span className='font-semibold'>{payment.toLocaleString()}</span>

src/contexts/Employee-Calender-Data-Context.tsx

@@ -20,21 +20,21 @@ export const EmployeeCalendarDataProvider = ({
   const [calendarData, setCalendarData] =
     useState<EmployeeCalendarDataResponse | null>(null);
 
-  // const getFilteredData = (date: Date) => {
-  //   const filteredData: DateWorkDetail[] = [];
-  //   calendarData?.workPlaceList.forEach((data) => {
-  //     data.employeeList.forEach((emp) => {
-  //       if (new Date(emp.startTime).toDateString() === date.toDateString()) {
-  //         filteredData.push({
-  //           ...emp,
-  //           workPlaceName: data.workPlaceName,
-  //           workPlaceColor: data.workPlaceColorCode,
-  //         });
-  //       }
-  //     });
-  //   });
-  //   return filteredData;
-  // };
+  const getFilteredData = (date: Date) => {
+    const filteredData: DateWorkDetail[] = [];
+    calendarData?.list.forEach((data) => {
+      data.employeeList.forEach((emp) => {
+        if (new Date(emp.startTime).toDateString() === date.toDateString()) {
+          filteredData.push({
+            ...emp,
+            workPlaceName: data.workPlaceName,
+            workPlaceColor: data.workPlaceColorCode,
+          });
+        }
+      });
+    });
+    return filteredData;
+  };
 
   return (
     <EmployeeCalendarDataContext.Provider

src/pages/employee/Calendar/EmployeeCalendar.tsx

@@ -0,0 +1,18 @@
+import CalendarEmployee from '../../../components/employee/CalendarEmployee';
+import Frame from '../../../components/Frame';
+import { EmployeeCalendarDataProvider } from '../../../contexts/Employee-Calender-Data-Context';
+
+const EmployeeCalendar = () => {
+  return (
+    <>
+      <Frame navTitle='알바ON' toolBar footer>
+        <div className='w-full flex flex-col  items-center'>
+          <EmployeeCalendarDataProvider>
+            <CalendarEmployee />
+          </EmployeeCalendarDataProvider>
+        </div>
+      </Frame>
+    </>
+  );
+};
+export default EmployeeCalendar;