diff --git a/src/api/apiClient.ts b/src/api/apiClient.ts index da84de5..d50739f 100644 --- a/src/api/apiClient.ts +++ b/src/api/apiClient.ts @@ -173,6 +173,7 @@ class ApiClient implements employeeApi { config.headers['Content-Type'] = 'application/json'; config.headers['Authorization'] = `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`; + // config.headers['Access-Control-Allow-Origin'] = 'http://localhost:5173'; return config; }); diff --git a/src/components/owner-workplace/OwnerPayStub.tsx b/src/components/owner-workplace/OwnerPayStub.tsx new file mode 100644 index 0000000..3233d8e --- /dev/null +++ b/src/components/owner-workplace/OwnerPayStub.tsx @@ -0,0 +1,261 @@ +import { useEffect, useRef, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import ApiClient from '../../api/apiClient'; +import generateMonthList from '../../utils/generateMonthList'; +import ModalBottom from '../ModalBottom'; +import SignPad from '../SignPad'; +import WhiteBox from '../ui/WhiteBox'; +import { formatMonths, styleMonths } from '../../utils/format-date'; +import BtnGray from '../BtnGray'; +import BtnPrimary from '../BtnPrimary'; +import Circle from '../ui/Circle'; +import { HStack } from '../ui/Stack'; + +type Prop = { + year: number; + month: number; +}; + +const OwnerPayStub = ({ year, month }: Prop) => { + const navigation = useNavigate(); + const [monthList, setMonthList] = useState([]); + const [selectedYear, setSelectedYear] = useState(year); + const [selectedMonth, setSelectedMonth] = useState(month); + + //급여 명세서 + const [payStub, setPayStub] = useState( + null + ); + + //모달 + const [isModalOpen, setIsModalOpen] = useState(false); + const [modalMsg, setModalMsg] = useState(''); + + //서명 + const [getSign, setGetsign] = useState(false); + const signRef = useRef(null); + + const setSelectedYearMonth = (year: number, month: number) => { + setSelectedYear(year); + setSelectedMonth(month); + }; + + const closeModal = () => { + setIsModalOpen(false); + }; + + const openModal = (msg?: string) => { + setModalMsg(msg || ''); + setIsModalOpen(true); + }; + + const signature = async (payStubId: number) => { + const sign: [] = signRef.current?.canvasRef.current.toData(); + console.log(sign); + if (!sign) return; + try { + const response: EmployeeSignatureResponse = + await ApiClient.getInstance().employeeSignature(payStubId); + if (response) { + window.location.reload(); + } + } catch (err) { + console.log(err); + } + }; + + const textConvert = (status: string): string => { + if (status === 'READY') return '간편 지급'; + if (status === 'SIGN') return '수령 받기'; + if (status === 'WAITING') return '수령 대기'; + if (status === 'COMPLETED') return '수령 완료'; + + return ''; + }; + + const getData = async () => { + try { + const response = await ApiClient.getInstance().employeeGetPayStub( + '1', + selectedYear, + selectedMonth + ); + + if (response) { + console.log(response); + setPayStub(response); + } + } catch (err) { + console.log(err); + } + }; + + useEffect(() => { + getData(); + setMonthList(generateMonthList()); + }, []); + + return ( + <> + {isModalOpen && payStub && ( + setGetsign(true)} + > +
+ {!getSign ? ( + <>{modalMsg} + ) : ( + signature(payStub.payStubId)} + /> + )} +
+ + )} + {payStub && ( + + +
+
+ 월급날: + {payStub.paymentDay}일 +
+
+ 총 급여 : {payStub.totalPay.toLocaleString()} 원 +
+
+ {payStub.status === 'READY' ? ( + + openModal('급여 수령을 위한 전자 서명을 시작하시겠습니까?') + } + className='w-full my-2' + /> + ) : ( + {}} + className='w-full my-2' + disabled + /> + )} + + {/* 지급 합계 */} +
+ + 지급 합계 + + {( + payStub.basicHour * payStub.basicPay + + payStub.overHour * payStub.overPay + ).toLocaleString()} + 원 + + + {/* 근무수당 */} +
+
+ +
+
+
근무수당
+
+
+ {payStub.basicPay.toLocaleString()}원 * {payStub.basicHour}H +
+
+ {(payStub.basicHour * payStub.basicPay).toLocaleString()}원 +
+
+
+
+ {/* 추가 근무 수당 */} +
+
+ +
+
+
추가수당
+
+
+ {payStub.overPay.toLocaleString()}원 * {payStub.overHour}H +
+
+ {(payStub.overPay * payStub.overHour).toLocaleString()}원 +
+
+
+
+ {/* 주휴 수당 */} + {payStub.weeklyHolidayTime > 0 && ( +
+
+ +
+
+
주휴수당
+
+
+ {payStub.weeklyHolidayPay.toLocaleString()}원 * + {payStub.weeklyHolidayTime}H +
+
+ {( + payStub.weeklyHolidayTime * payStub.weeklyHolidayPay + ).toLocaleString()} + 원 +
+
+
+
+ )} +
+ {/* 공제 합계 */} +
+
+ 공제 합계 + + {payStub.totalTaxPay.toLocaleString()}원 + +
+
+
+ +
+
+
세금
+
+
세율 {payStub.taxRate}
+
{payStub.totalPay.toLocaleString()}원
+
+
+
+
+ + )} + + ); +}; + +export default OwnerPayStub; diff --git a/src/components/owner-workplace/WorkEmployeeDetail.tsx b/src/components/owner-workplace/WorkEmployeeDetail.tsx index de1a204..ae1a090 100644 --- a/src/components/owner-workplace/WorkEmployeeDetail.tsx +++ b/src/components/owner-workplace/WorkEmployeeDetail.tsx @@ -2,6 +2,8 @@ import { useParams } from 'react-router-dom'; import NavToggle from '../NavToggle'; import { useState } from 'react'; import PayStub from '../../pages/employee/PartTimeTab/PayStub'; +import { HStack, VStack } from '../ui/Stack'; +import OwnerPayStub from './OwnerPayStub'; enum ToggleStatus { PAYMENT = 'payment', @@ -16,9 +18,14 @@ const WorkEmployeeDetail = () => { ToggleStatus.PAYMENT ); return ( - <> -
{placeId}
-
{id}
+ + +
롯데리아
+ +
최은진
+
근무 시작일: 24.06.01
+ + {/* 토글버튼 */} { {/* 급여명세서 */} {selectedToggle === ToggleStatus.PAYMENT && ( - + )} - + ); }; export default WorkEmployeeDetail; diff --git a/vite.config.ts b/vite.config.ts index d366e8c..87a3a41 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,16 @@ -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react-swc"; +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react-swc'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + // server: { + // proxy: { + // '/api': { + // target: 'http://hanaro-channel.kro.kr:8080', // 백엔드 서버 주소 + // changeOrigin: true, + // secure: false, + // }, + // }, + // }, });