feat/#88 workEmployeeDetail

hanaro-on-and-on · Jul 3, 2024 · 7497f1d · 7497f1d
1 parent de89aae
commit 7497f1d
Show file tree

Hide file tree

Showing 4 changed files with 285 additions and 7 deletions.
diff --git 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
@@ -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<Date[]>([]);
+  const [selectedYear, setSelectedYear] = useState<number>(year);
+  const [selectedMonth, setSelectedMonth] = useState<number>(month);
+
+  //급여 명세서
+  const [payStub, setPayStub] = useState<EmployeePayStubGetResponse | null>(
+    null
+  );
+
+  //모달
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [modalMsg, setModalMsg] = useState<string>('');
+
+  //서명
+  const [getSign, setGetsign] = useState<boolean>(false);
+  const signRef = useRef<SignPadHandler>(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 && (
+        <ModalBottom
+          title='전자 서명 동의'
+          closeModal={closeModal}
+          btnText='동의후 서명 시작'
+          btnBottom={!getSign}
+          action={() => setGetsign(true)}
+        >
+          <div>
+            {!getSign ? (
+              <>{modalMsg}</>
+            ) : (
+              <SignPad
+                ref={signRef}
+                submit={() => signature(payStub.payStubId)}
+              />
+            )}
+          </div>
+        </ModalBottom>
+      )}
+      {payStub && (
+        <WhiteBox className='py-3 px-3 w-full border'>
+          <select>
+            {monthList.map((date) => (
+              <option
+                key={date.toISOString()}
+                value={date.toLocaleDateString()}
+                defaultChecked={
+                  date.getFullYear() === year && date.getMonth() === month
+                }
+                onSelect={() =>
+                  setSelectedYearMonth(date.getFullYear(), date.getMonth())
+                }
+              >
+                {`${styleMonths(formatMonths(date))} 예상 급여명세서`}
+              </option>
+            ))}
+          </select>
+          <div className='flex justify-between items-end mt-5'>
+            <div className='flex text-sm text-gray-500 text-start gap-1'>
+              <span>월급날:</span>
+              <span>{payStub.paymentDay}일</span>
+            </div>
+            <div className='text-xl font-bold'>
+              총 급여 : {payStub.totalPay.toLocaleString()} 원
+            </div>
+          </div>
+          {payStub.status === 'READY' ? (
+            <BtnPrimary
+              text={textConvert(payStub.status)}
+              action={() =>
+                openModal('급여 수령을 위한 전자 서명을 시작하시겠습니까?')
+              }
+              className='w-full my-2'
+            />
+          ) : (
+            <BtnGray
+              text={textConvert(payStub.status)}
+              action={() => {}}
+              className='w-full my-2'
+              disabled
+            />
+          )}
+
+          {/* 지급 합계 */}
+          <div className='flex flex-col border-t border-gray-100 py-5 gap-2'>
+            <HStack className='text-start justify-between mb-3'>
+              <span className='font-bold'>지급 합계</span>
+              <span className='font-semibold'>
+                {(
+                  payStub.basicHour * payStub.basicPay +
+                  payStub.overHour * payStub.overPay
+                ).toLocaleString()}
+                원
+              </span>
+            </HStack>
+            {/* 근무수당 */}
+            <div className='grid grid-cols-12 justify-between items-start'>
+              <div className='col-span-1'>
+                <Circle color='red' />
+              </div>
+              <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
+                <div>근무수당</div>
+                <div className='flex justify-between  text-gray-400'>
+                  <div>
+                    {payStub.basicPay.toLocaleString()}원 * {payStub.basicHour}H
+                  </div>
+                  <div>
+                    {(payStub.basicHour * payStub.basicPay).toLocaleString()}원
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* 추가 근무 수당 */}
+            <div className='grid grid-cols-12 justify-between items-start'>
+              <div className='col-span-1'>
+                <Circle color='red' />
+              </div>
+              <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
+                <div>추가수당</div>
+                <div className='flex justify-between  text-gray-400'>
+                  <div>
+                    {payStub.overPay.toLocaleString()}원 * {payStub.overHour}H
+                  </div>
+                  <div>
+                    {(payStub.overPay * payStub.overHour).toLocaleString()}원
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* 주휴 수당 */}
+            {payStub.weeklyHolidayTime > 0 && (
+              <div className='grid grid-cols-12 justify-between items-start'>
+                <div className='col-span-1'>
+                  <Circle color='red' />
+                </div>
+                <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
+                  <div>주휴수당</div>
+                  <div className='flex justify-between  text-gray-400'>
+                    <div>
+                      {payStub.weeklyHolidayPay.toLocaleString()}원 *
+                      {payStub.weeklyHolidayTime}H
+                    </div>
+                    <div>
+                      {(
+                        payStub.weeklyHolidayTime * payStub.weeklyHolidayPay
+                      ).toLocaleString()}
+                      원
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+          {/* 공제 합계 */}
+          <div className='flex flex-col border-t border-gray-100 py-5'>
+            <div className='text-start flex justify-between mb-3'>
+              <span className='font-bold'>공제 합계</span>
+              <span className='font-semibold'>
+                {payStub.totalTaxPay.toLocaleString()}원
+              </span>
+            </div>
+            <div className='grid grid-cols-12 justify-between items-start'>
+              <div className='col-span-1'>
+                <Circle color='blue' />
+              </div>
+              <div className='col-span-11 flex flex-col justify-start text-start pl-3'>
+                <div>세금</div>
+                <div className='flex justify-between text-gray-400'>
+                  <div>세율 {payStub.taxRate} </div>
+                  <div>{payStub.totalPay.toLocaleString()}원</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </WhiteBox>
+      )}
+    </>
+  );
+};
+
+export default OwnerPayStub;
diff --git 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 (
-    <>
-      <div>{placeId}</div>
-      <div>{id}</div>
+    <VStack className='m-6 gap-3'>
+      <HStack className='border border-gray-300 p-3 rounded-xl justify-evenly items-center gap-3'>
+        <div>롯데리아</div>
+        <VStack className='text-start'>
+          <div>최은진</div>
+          <div className='text-xs'>근무 시작일: 24.06.01</div>
+        </VStack>
+      </HStack>
 
       {/* 토글버튼 */}
       <NavToggle
@@ -30,9 +37,9 @@ const WorkEmployeeDetail = () => {
 
       {/* 급여명세서 */}
       {selectedToggle === ToggleStatus.PAYMENT && (
-        <PayStub year={today.getFullYear()} month={today.getMonth()} />
+        <OwnerPayStub year={today.getFullYear()} month={today.getMonth()} />
       )}
-    </>
+    </VStack>
   );
 };
 export default WorkEmployeeDetail;
diff --git 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,
+  //     },
+  //   },
+  // },
 });