hanaro-on-and-on · jennyjoo · Jul 9, 2024 · Jul 9, 2024 · Jul 9, 2024 · Jul 9, 2024
diff --git a/src/components/HWorkPlaceNameBox.tsx b/src/components/HWorkPlaceNameBox.tsx
@@ -8,22 +8,31 @@ import { FaAngleRight } from 'react-icons/fa6';
 type Prop = {
   workPlaceName: string | undefined;
   colorType: string | undefined;
+  onClick?: () => void;
   center?: boolean;
   hover?: boolean;
   arrow?: boolean;
+  className?: string;
   children?: ReactNode | string;
 };
 const HWorkPlaceNameBox = ({
   workPlaceName,
   colorType,
-  children,
+  onClick = () => {},
+  className = '',
   center = false,
   arrow = false,
+  children,
 }: Prop) => {
   return (
-    <WhiteBox border className='hover:bg-[#f2ebf2]'>
+    <button
+      onClick={onClick}
+      className={clsx(
+        `flex flex-col bg-white w-full rounded-xl border border-gray-200 ${className}`
+      )}
+    >
       <div
-        className={clsx('flex py-5 justify-between items-center', {
+        className={clsx('flex py-5 px-5 justify-between items-center w-full', {
           'justify-center': center,
         })}
       >
@@ -42,7 +51,7 @@ const HWorkPlaceNameBox = ({
           )}
         </div>
       </div>
-    </WhiteBox>
+    </button>
   );
 };
 

diff --git a/src/components/WorkPlaceNameBox.tsx b/src/components/WorkPlaceNameBox.tsx
@@ -1,29 +1,39 @@
 import clsx from 'clsx';
 import PulseWorkPlaceName from './ui/PulseWorkPlaceName';
-import WhiteBox from './ui/WhiteBox';
 import WorkPlaceName from './ui/WorkPlaceName';
 import { ReactNode } from 'react';
 import { FaAngleRight } from 'react-icons/fa6';
 
 type Prop = {
   workPlaceName: string | undefined;
   colorType: string | undefined;
+  onClick?: () => void;
   center?: boolean;
   hover?: boolean;
   arrow?: boolean;
-  children?: ReactNode;
+  arrowText?: string;
+  className?: string;
+  children?: ReactNode | string;
 };
 const WorkPlaceNameBox = ({
   workPlaceName,
   colorType,
-  children,
+  onClick = () => {},
+  className = '',
   center = false,
   arrow = false,
+  arrowText = '',
+  children,
 }: Prop) => {
   return (
-    <WhiteBox border className='hover:bg-[#f2ebf2]'>
+    <button
+      onClick={onClick}
+      className={clsx(
+        `flex flex-col bg-white w-full rounded-lg border border-gray-200 ${className}`
+      )}
+    >
       <div
-        className={clsx('flex py-5 justify-between', {
+        className={clsx('flex py-5 px-5 justify-between items-center w-full', {
           'justify-center': center,
         })}
       >
@@ -38,13 +48,20 @@ const WorkPlaceNameBox = ({
         </div>
 
         {arrow && (
-          <div className='flex items-center justify-end'>
+          <div className='flex items-center gap-2 justify-end'>
+            {arrowText}
             <FaAngleRight />
           </div>
         )}
       </div>
-    </WhiteBox>
+    </button>
   );
 };
 
 export default WorkPlaceNameBox;
+
+{
+  /* <WhiteBox border className='hover:bg-[#f2ebf2]'>
+
+</WhiteBox>; */
+}
diff --git a/src/components/owner-workplace/MyWorkPlaceDetail.tsx b/src/components/owner-workplace/MyWorkPlaceDetail.tsx
@@ -11,6 +11,9 @@ import { useEmployeeContract } from '../../contexts/EmployeeContract-Context';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import ApiClient from '../../api/apiClient';
 import Notification from './Notification';
+import WorkPlaceNameBox from '../WorkPlaceNameBox';
+import WorkPlaceName from '../ui/WorkPlaceName';
+import WhiteBox from '../ui/WhiteBox';
 
 enum ToggleStatus {
   EMPLOYEES = '근무자 보기',
@@ -78,26 +81,27 @@ const MyWorkPlaceDetail = () => {
   return (
     data && (
       <VStack className='m-6 gap-4 h-full'>
-        <VStack className='border border-gray-300 rounded-md items-center justify-center gap-3 py-2'>
-          <button className='flex items-center gap-3 text-sm'>
-            {`${year}년 ${month}월 ${isCurrentDate(currentDate, year, month) ? '예정' : '확정'} 인건비`}{' '}
-            <FaAngleDown />
-          </button>
-
-          <HStack className='px-3 w-full justify-between items-center'>
-            <div className='w-1/12'>
-              <ColorCircle workPlaceColor={data.workPlaceColor} />
-            </div>
-            <VStack className='text-start w-4/12'>
-              <div className='font-bold text-ellipsis overflow-hidden whitespace-nowrap'>{`${data.workPlaceName}`}</div>
-              <div className='text-sm text-gray-400 ho'>{`총 ${data.employeeList.length}명`}</div>
-            </VStack>
+        <WhiteBox border>
+          <VStack className='items-center justify-center gap-3 py-5'>
+            <VStack className='px-3 w-full justify-between items-center'>
+              <HStack className='gap-2 items-center'>
+                <WorkPlaceName
+                  name={data.workPlaceName}
+                  colorType={data.workPlaceColor}
+                />
+                <div className='text-sm text-gray-400 ho'>{`총 ${data.employeeList.length}명`}</div>
+              </HStack>
 
-            <HStack className='text-nowrap items-end w-5/12'>
-              {data.payment.toLocaleString()} 원
-            </HStack>
-          </HStack>
-        </VStack>
+              <HStack className='text-nowrap items-end text-2xl font-bold py-1'>
+                {data.payment.toLocaleString()} 원
+              </HStack>
+            </VStack>
+            <button className='flex items-center gap-3 text-sm'>
+              {`${year}년 ${month}월 ${isCurrentDate(currentDate, year, month) ? '예정' : '확정'} 인건비`}{' '}
+              <FaAngleDown />
+            </button>
+          </VStack>
+        </WhiteBox>
 
         <NavToggle
           selectedTab={selectedToggle}
@@ -113,15 +117,28 @@ const MyWorkPlaceDetail = () => {
 
         {selectedToggle === ToggleStatus.EMPLOYEES && (
           <>
-            <div className='flex flex-col border border-gray-300 rounded-lg max-h-96 overflow-y-scroll'>
+            <div className='flex flex-col gap-1'>
               {data.employeeList.map((employee) => (
-                <WorkEmployeeListView
+                <WorkPlaceNameBox
+                  className='hover:bg-[#f2ebf2]'
                   key={employee.workPlaceEmployeeId}
-                  employeeInfo={employee}
-                  placeId={data.workPlaceId}
-                />
+                  workPlaceName={employee.employeeName}
+                  colorType={data.workPlaceColor}
+                  arrowText={`${employee.payment.toLocaleString()}원`}
+                  arrow
+                  onClick={() => {
+                    navigate(
+                      `/owner/myWorkPlaces/${data.workPlaceId}/employees/${employee.workPlaceEmployeeId}`
+                    );
+                  }}
+                >
+                  <div className='flex justify-start text-sm text-gray-400'>
+                    {`근무 시작 ${employee.workStartDate}`}
+                  </div>
+                </WorkPlaceNameBox>
               ))}
             </div>
+
             <button
               onClick={() => onClickAddEmployee(data.workPlaceName)}
               className='bg-hanaLightGreen gap-2 py-1 px-2 mt-2 flex items-center rounded-lg text-white self-end'

diff --git a/src/components/owner-workplace/MyWorkPlaceListView.tsx b/src/components/owner-workplace/MyWorkPlaceListView.tsx
@@ -43,3 +43,23 @@ const MyWorkPlaceListView = (props: MyWorkPlaceListViewProps) => {
 };
 
 export default MyWorkPlaceListView;
+
+{
+  /* <button
+      className='flex border border-gray-300 bg-white rounded-md p-4 items-center gap-3 justify-between hover:bg-slate-300'
+      onClick={onClickWorkPlace}
+    >
+      <div className='w-1/12'>
+        <ColorCircle workPlaceColor={workPlaceColor} />
+      </div>
+      <VStack className='text-start w-4/12'>
+        <div className='text-ellipsis overflow-hidden whitespace-nowrap'>{`${workPlaceName}`}</div>
+        <div className='text-sm text-gray-400 ho'>{`총 ${length}명`}</div>
+      </VStack>
+
+      <HStack className='text-nowrap items-end text-sm w-4/12'>
+        {payment.toLocaleString()} 원
+      </HStack>
+      <FaAngleRight />
+    </button> */
+}
diff --git a/src/components/owner-workplace/MyWorkPlaces.tsx b/src/components/owner-workplace/MyWorkPlaces.tsx
@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
 import { HStack, VStack } from '../ui/Stack';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa6';
-import MyWorkPlaceListView from './MyWorkPlaceListView';
 import {
   AiOutlineExclamationCircle,
   AiOutlinePlusCircle,
 } from 'react-icons/ai';
 import { isCurrentDate } from '../../utils/is-current-date';
 import ApiClient from '../../api/apiClient';
 import { useNavigate } from 'react-router-dom';
+import WorkPlaceNameBox from '../WorkPlaceNameBox';
 
 const MyWorkPlaces = () => {
   const navigate = useNavigate();
@@ -80,15 +80,26 @@ const MyWorkPlaces = () => {
             <span className='text-2xl text-center'>사업장을 등록해주세요</span>
           </VStack>
         ) : (
-          <VStack className='ListView mt-7 gap-2'>
+          <div className='mt-5'>
             {data?.workPlaceList.map((item) => (
-              <MyWorkPlaceListView
+              <WorkPlaceNameBox
                 key={item.workPlaceId}
-                length={item.employeeList.length}
-                {...item}
-              />
+                workPlaceName={item.workPlaceName}
+                colorType={item.workPlaceColor}
+                arrow
+                arrowText={`총 ${item.payment.toLocaleString()}원`}
+                onClick={() =>
+                  navigate(`/owner/myWorkPlaces/${item.workPlaceId}`)
+                }
+              >
+                <div className='flex gap-3'>
+                  <span className='text-gray-400'>
+                    총 {item.employeeList.length}명
+                  </span>
+                </div>
+              </WorkPlaceNameBox>
             ))}
-          </VStack>
+          </div>
         )}
         <button
           className='bg-hanaLightGreen gap-2 py-1 px-2 mt-2 flex items-center rounded-lg text-white self-end'
@@ -97,10 +108,6 @@ const MyWorkPlaces = () => {
           <AiOutlinePlusCircle />
           <div>사업장 추가</div>
         </button>
-
-        {/* {data.ownerSalaryEmployeeListGetResponseList.map((item) =>
-
-      )} */}
       </VStack>
     )
   );

diff --git a/src/components/ui/WhiteBox.tsx b/src/components/ui/WhiteBox.tsx
@@ -20,7 +20,7 @@ const WhiteBox = ({
   return (
     <>
       <div
-        className={clsx(`flex flex-col bg-white px-5 rounded-xl ${className}`, {
+        className={clsx(`flex flex-col bg-white px-5 rounded-lg ${className}`, {
           'border border-gray-200': border,
           'drop-shadow-sm': dropShadow,
         })}

diff --git a/src/pages/employee/Attendance/Attendance.tsx b/src/pages/employee/Attendance/Attendance.tsx
@@ -73,6 +73,10 @@ const Attendance = () => {
     }
   };
 
+  useEffect(() => {
+    console.log(attendances), [];
+  });
+
   const checkIn = async (id: number) => {
     try {
       const response: EmployeeCheckInResponse =
@@ -145,7 +149,7 @@ const Attendance = () => {
         <div className='w-full flex flex-col gap-10 mt-7'>
           {/* 오늘 출근 목록 */}
           <Wrapper title='오늘 출근 목록'>
-            <div>
+            <div className='flex flex-col gap-1'>
               {attendances &&
                 attendances.works.map((item, index) => (
                   <WhiteBox