From f9bc9c58dc43bf0e5441c9e80461d5ef57f91ee3 Mon Sep 17 00:00:00 2001 From: kwang Date: Wed, 3 Jul 2024 11:27:47 +0900 Subject: [PATCH] feat/#88 Make owner-myPlacesList page --- src/App.tsx | 15 +++- .../owner-workplace/MyWorkPlaceDetail.tsx | 83 +++++++++++++++++ .../owner-workplace/MyWorkPlaceListView.tsx | 35 ++++++++ .../owner-workplace/MyWorkPlaces.tsx | 89 +++++++++++++++++++ .../owner-workplace/WorkEmployeeDetail.tsx | 38 ++++++++ .../owner-workplace/WorkEmployeeListView.tsx | 29 ++++++ src/utils/is-current-date.ts | 3 + 7 files changed, 288 insertions(+), 4 deletions(-) create mode 100644 src/components/owner-workplace/MyWorkPlaceDetail.tsx create mode 100644 src/components/owner-workplace/MyWorkPlaceListView.tsx create mode 100644 src/components/owner-workplace/MyWorkPlaces.tsx create mode 100644 src/components/owner-workplace/WorkEmployeeDetail.tsx create mode 100644 src/components/owner-workplace/WorkEmployeeListView.tsx create mode 100644 src/utils/is-current-date.ts diff --git a/src/App.tsx b/src/App.tsx index 02e9f2d..548f9b9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,21 +4,23 @@ 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'; import EmployeeGreeting from './pages/LandingPage/EmployeeGreeting'; 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 ( @@ -34,8 +36,13 @@ function App() { path='calendar/attendance/:id/edit' element={} /> + } /> + } /> + } + /> - {/* } /> */} }> } /> } /> diff --git a/src/components/owner-workplace/MyWorkPlaceDetail.tsx b/src/components/owner-workplace/MyWorkPlaceDetail.tsx new file mode 100644 index 0000000..0f6b242 --- /dev/null +++ b/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 ( + + + + + +
+ +
+ +
{`${data.workPlaceName}`}
+
{`총 ${length}명`}
+ + + + {data.totalPayPerMonth.toLocaleString()} 원 + + + + + {}} + secondSelected={() => {}} + /> + +
+ {data.workEmployees.map((employee) => ( + + ))} +
+ + ); +}; +export default MyWorkPlaceDetail; diff --git a/src/components/owner-workplace/MyWorkPlaceListView.tsx b/src/components/owner-workplace/MyWorkPlaceListView.tsx new file mode 100644 index 0000000..42288ed --- /dev/null +++ b/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 ( + + ); +}; + +export default MyWorkPlaceListView; diff --git a/src/components/owner-workplace/MyWorkPlaces.tsx b/src/components/owner-workplace/MyWorkPlaces.tsx new file mode 100644 index 0000000..68f0f71 --- /dev/null +++ b/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 ( + + + +
{`총 ${data.totalPayment.toLocaleString()} 원`}
+ + + + {data.ownerSalaryEmployeeListGetResponseList.map((item) => ( + + ))} + + + + {/* {data.ownerSalaryEmployeeListGetResponseList.map((item) => + + )} */} + + ); +}; + +export default MyWorkPlaces; diff --git a/src/components/owner-workplace/WorkEmployeeDetail.tsx b/src/components/owner-workplace/WorkEmployeeDetail.tsx new file mode 100644 index 0000000..de1a204 --- /dev/null +++ b/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.PAYMENT + ); + return ( + <> +
{placeId}
+
{id}
+ + {/* 토글버튼 */} + setSelectedToggle(ToggleStatus.PAYMENT)} + secondSelected={() => setSelectedToggle(ToggleStatus.WORKTIME)} + /> + + {/* 급여명세서 */} + {selectedToggle === ToggleStatus.PAYMENT && ( + + )} + + ); +}; +export default WorkEmployeeDetail; diff --git a/src/components/owner-workplace/WorkEmployeeListView.tsx b/src/components/owner-workplace/WorkEmployeeListView.tsx new file mode 100644 index 0000000..850c447 --- /dev/null +++ b/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 ( + + ); +}; + +export default WorkEmployeeListView; diff --git a/src/utils/is-current-date.ts b/src/utils/is-current-date.ts new file mode 100644 index 0000000..e114357 --- /dev/null +++ b/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; +};