Merge pull request #89 from hanaro-on-and-on/feat/#88

feat/#88 Make owner-myPlacesList page

src/App.tsx

@@ -4,15 +4,12 @@ import Test from './pages/test';
 // import UiTest from './pages/UiTest';
 import OwnerMainPage from './pages/OwnerMainPage';
 import CalendarCustom from './components/ui/CalendarCustom';
-// import DateDetail from './components/calendar-owner/DateDetail';
-// import AttendanceEdit from './components/calendar-owner/AttendanceEdit';
 import PaymentMain from './pages/employee/PartTimeTab/PaymentMain';
 import WorkTime from './pages/employee/PartTimeTab/WorkTime';
 import Payment from './pages/employee/PartTimeTab/Payment';
 import PaymentDetail from './pages/employee/PartTimeTab/PaymentDetail';
 import MyPage from './pages/employee/MyPageTab/MyPage';
 import EditMyPage from './pages/employee/MyPageTab/EditMyPage';
-import OwnerCalendarPage from './pages/OwnerMainPage';
 import Attendance from './pages/employee/Attendance/Attendance';
 import AttendanceDetail from './pages/employee/Attendance/AttendanceDeTail';
 import LandingPage from './pages/LandingPage/LandingPage';
@@ -21,6 +18,9 @@ import EmployeeAddMainAccount from './pages/LandingPage/EmployeeAddMainAccount';
 import ManualWorkPlaceAddition from './pages/employee/PartTimeTab/ManualWorkPlaceAddition';
 import DateDetail from './components/owner-calendar/DateDetail';
 import AttendanceEdit from './components/owner-calendar/AttendanceEdit';
+import MyWorkPlaces from './components/owner-workplace/MyWorkPlaces';
+import MyWorkPlaceDetail from './components/owner-workplace/MyWorkPlaceDetail';
+import WorkEmployeeDetail from './components/owner-workplace/WorkEmployeeDetail';
 
 function App() {
   return (
@@ -36,8 +36,13 @@ function App() {
             path='calendar/attendance/:id/edit'
             element={<AttendanceEdit />}
           />
+          <Route path='myWorkPlaces' element={<MyWorkPlaces />} />
+          <Route path='myWorkPlaces/:id' element={<MyWorkPlaceDetail />} />
+          <Route
+            path='myWorkPlaces/:placeId/employees/:id'
+            element={<WorkEmployeeDetail />}
+          />
         </Route>
-        {/* <Route path='/owner-calendar' element={<OwnerCalendarPage />} /> */}
         <Route path='/part-time/*' element={<PaymentMain />}>
           <Route path='worktime' element={<WorkTime />} />
         </Route>

src/components/owner-workplace/MyWorkPlaceDetail.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import NavToggle from '../NavToggle';
+import { HStack, VStack } from '../ui/Stack';
+import { isCurrentDate } from '../../utils/is-current-date';
+import { FaAngleDown, FaAngleRight } from 'react-icons/fa6';
+import ColorCircle from '../ui/ColorCircle';
+import WorkEmployeeListView from './WorkEmployeeListView';
+
+const mockData = {
+  year: '2024',
+  month: '06',
+  workPlaceId: 1,
+  workPlaceName: '롯데리아 어디어디어디 점',
+  workPlaceColor: '1',
+  totalPayPerMonth: 18000000,
+  workEmployees: [
+    {
+      workEmployeeId: 1,
+      employeeName: '이신광',
+      monthPay: 500000,
+      fromDay: '2021-04-05',
+    },
+    {
+      workEmployeeId: 2,
+      employeeName: '이서하',
+      monthPay: 1951400,
+      fromDay: '2024-03-14',
+    },
+    {
+      workEmployeeId: 3,
+      employeeName: '정연주',
+      monthPay: 102900,
+      fromDay: '2024-06-01',
+    },
+  ],
+};
+
+const MyWorkPlaceDetail = () => {
+  const [data, setData] = useState(mockData);
+  const currentDate = new Date();
+
+  const [year, setYear] = useState(currentDate.getFullYear());
+  const [month, setMonth] = useState(currentDate.getMonth() + 1);
+
+  return (
+    <VStack className='m-6 gap-4'>
+      <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'>{`총 ${length}명`}</div>
+          </VStack>
+
+          <HStack className='text-nowrap items-end w-5/12'>
+            {data.totalPayPerMonth.toLocaleString()} 원
+          </HStack>
+        </HStack>
+      </VStack>
+
+      <NavToggle
+        first='근무자 보기'
+        second='공지사항'
+        firstSelected={() => {}}
+        secondSelected={() => {}}
+      />
+
+      <div className='flex flex-col border border-gray-300 rounded-lg'>
+        {data.workEmployees.map((employee) => (
+          <WorkEmployeeListView key={employee.workEmployeeId} {...employee} />
+        ))}
+      </div>
+    </VStack>
+  );
+};
+export default MyWorkPlaceDetail;

src/components/owner-workplace/MyWorkPlaceListView.tsx

@@ -0,0 +1,35 @@
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa6';
+import { getColor } from '../../utils/get-color';
+import { HStack, VStack } from '../ui/Stack';
+import ColorCircle from '../ui/ColorCircle';
+
+type MyWorkPlaceListViewProps = {
+  id: number;
+  workPlaceName: string;
+  workPlaceColor: string;
+  payment: number;
+  length: number;
+};
+
+const MyWorkPlaceListView = (props: MyWorkPlaceListViewProps) => {
+  const { id, workPlaceName, workPlaceColor, payment, length } = props;
+
+  return (
+    <button className='flex border border-gray-300 bg-white rounded-md p-4 items-center gap-3 justify-between hover:bg-slate-300'>
+      <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>
+  );
+};
+
+export default MyWorkPlaceListView;

src/components/owner-workplace/MyWorkPlaces.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { VStack } from '../ui/Stack';
+import { FaAngleDown } from 'react-icons/fa6';
+import MyWorkPlaceListView from './MyWorkPlaceListView';
+import { AiOutlinePlusCircle } from 'react-icons/ai';
+import { isCurrentDate } from '../../utils/is-current-date';
+
+const mockData = {
+  year: 2024,
+  month: 6,
+  totalPayment: 140333000,
+  ownerSalaryEmployeeListGetResponseList: [
+    {
+      id: 1,
+      workPlaceName: '롯데리아 자양점',
+      workPlaceColor: '01',
+      payment: 140333000,
+      ownerSalaryGetResponseList: [
+        {
+          id: 1,
+          employeeName: '이서하',
+          workStartDate: '2024-07-01',
+          payment: 140333,
+        },
+      ],
+    },
+    {
+      id: 2,
+      workPlaceName: 'Example Work Place Name',
+      workPlaceColor: '02',
+      payment: 0,
+      ownerSalaryGetResponseList: [],
+    },
+    {
+      id: 3,
+      workPlaceName: '롯데월드 어드벤쳐 부산',
+      workPlaceColor: '03',
+      payment: 0,
+      ownerSalaryGetResponseList: [
+        {
+          id: 2,
+          employeeName: '최은진',
+          workStartDate: '2024-07-01',
+          payment: 0,
+        },
+      ],
+    },
+  ],
+};
+
+const MyWorkPlaces = () => {
+  const [data, setData] = useState(mockData);
+  const currentDate = new Date();
+
+  const [year, setYear] = useState(currentDate.getFullYear());
+  const [month, setMonth] = useState(currentDate.getMonth() + 1);
+
+  return (
+    <VStack className='m-6'>
+      <VStack className='border border-gray-300 rounded-md items-center justify-center gap-3 p-4'>
+        <button className='flex items-center gap-3 text-sm'>
+          {`${year}년 ${month}월 ${isCurrentDate(currentDate, year, month) ? '예정' : '확정'} 인건비`}{' '}
+          <FaAngleDown />
+        </button>
+        <div className='text-2xl'>{`총 ${data.totalPayment.toLocaleString()} 원`}</div>
+      </VStack>
+
+      <VStack className='ListView mt-7 gap-2'>
+        {data.ownerSalaryEmployeeListGetResponseList.map((item) => (
+          <MyWorkPlaceListView
+            key={item.id}
+            length={item.ownerSalaryGetResponseList.length}
+            {...item}
+          />
+        ))}
+      </VStack>
+      <button className='bg-hanaLightGreen gap-2 py-1 px-2 mt-2 flex items-center rounded-lg text-white self-end'>
+        <AiOutlinePlusCircle />
+        <div>사업장 추가</div>
+      </button>
+
+      {/* {data.ownerSalaryEmployeeListGetResponseList.map((item) =>
+
+      )} */}
+    </VStack>
+  );
+};
+
+export default MyWorkPlaces;

src/components/owner-workplace/WorkEmployeeDetail.tsx

@@ -0,0 +1,38 @@
+import { useParams } from 'react-router-dom';
+import NavToggle from '../NavToggle';
+import { useState } from 'react';
+import PayStub from '../../pages/employee/PartTimeTab/PayStub';
+
+enum ToggleStatus {
+  PAYMENT = 'payment',
+  WORKTIME = 'worktime',
+}
+
+const WorkEmployeeDetail = () => {
+  const { placeId, id } = useParams();
+
+  const today = new Date();
+  const [selectedToggle, setSelectedToggle] = useState<ToggleStatus>(
+    ToggleStatus.PAYMENT
+  );
+  return (
+    <>
+      <div>{placeId}</div>
+      <div>{id}</div>
+
+      {/* 토글버튼 */}
+      <NavToggle
+        first='급여 명세서'
+        second='근무 내역'
+        firstSelected={() => setSelectedToggle(ToggleStatus.PAYMENT)}
+        secondSelected={() => setSelectedToggle(ToggleStatus.WORKTIME)}
+      />
+
+      {/* 급여명세서 */}
+      {selectedToggle === ToggleStatus.PAYMENT && (
+        <PayStub year={today.getFullYear()} month={today.getMonth()} />
+      )}
+    </>
+  );
+};
+export default WorkEmployeeDetail;

src/components/owner-workplace/WorkEmployeeListView.tsx

@@ -0,0 +1,29 @@
+import { FaAngleRight } from 'react-icons/fa6';
+import { HStack, VStack } from '../ui/Stack';
+
+type WorkEmployeeListViewProps = {
+  workEmployeeId: number;
+  employeeName: string;
+  monthPay: number;
+  fromDay: string;
+};
+
+const WorkEmployeeListView = (props: WorkEmployeeListViewProps) => {
+  const { employeeName, monthPay, fromDay } = props;
+
+  return (
+    <button className='flex bg-white justify-between p-3 items-center border-b border-gray-300 last:border-b-0 hover:bg-gray-200'>
+      <VStack>
+        <HStack className='items-center'>
+          <span className='font-bold text-lg'>{employeeName}</span>
+          <FaAngleRight />
+        </HStack>
+        <div className='text-sm text-gray-400'>{`근무 시작: ${fromDay}`}</div>
+      </VStack>
+
+      <div className='text-lg'>{`${monthPay.toLocaleString()} 원`}</div>
+    </button>
+  );
+};
+
+export default WorkEmployeeListView;

src/utils/is-current-date.ts

@@ -0,0 +1,3 @@
+export const isCurrentDate = (date: Date, year: number, month: number) => {
+  return date.getFullYear() === year && date.getMonth() + 1 === month;
+};