Merge branch 'main' into feat/#24

hanaro-on-and-on · Jul 2, 2024 · c985fe3 · c985fe3
2 parents 4477146 + 69bb60f
commit c985fe3
Show file tree

Hide file tree

Showing 23 changed files with 732 additions and 165 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "react-router-dom": "^6.24.0",
     "swiper": "^11.1.4",
     "react-kakao-maps-sdk": "^1.1.27"
+    "react-signature-canvas": "^1.0.6"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -18,7 +18,6 @@ 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 AddWorkPlace from './pages/owner/AddWorkPlace';
 import ManualWorkPlaceAddition from './pages/employee/PartTimeTab/ManualWorkPlaceAddition';
 
 function App() {

diff --git a/src/api/apiClient.ts b/src/api/apiClient.ts
@@ -38,18 +38,19 @@ class ApiClient implements employeeApi {
   public async getMonthlyPayment(
     year: number,
     month: number
-  ): Promise<BaseResponse<MonthlyPayment>> {
-    const response = await this.axiosInstance.request({
-      method: 'get',
-      url: `employee/salaries?year=${year}&month=${month}`,
-    });
+  ): Promise<MonthlyPayment> {
+    const response: BaseResponse<MonthlyPayment> =
+      await this.axiosInstance.request({
+        method: 'get',
+        url: `employee/salaries?year=${year}&month=${month}`,
+      });
 
     return response.data;
   }
 
   //알바생 - 서류 목록
   public async getPaperList(): Promise<EmploymentContractListGetResponse[]> {
-    const response: BaseResponse<EmploymentContractListGetResponse> =
+    const response: BaseResponse<EmploymentContractListGetResponse[]> =
       await this.axiosInstance.request({
         method: 'get',
         url: 'papers',
@@ -58,6 +59,57 @@ class ApiClient implements employeeApi {
     return response.data;
   }
 
+  //알바생 - 대표 계좌 등록
+  public async registerEmployeeAccount({
+    accountNumber,
+    employeeNm,
+  }: RegisterEmployeeAccount): Promise<RegisterEmployeeAccountResponse> {
+    const dat: RegisterEmployeeAccount = {
+      accountNumber,
+      employeeNm,
+    };
+
+    const response: BaseResponse<RegisterEmployeeAccountResponse> =
+      await this.axiosInstance.request({
+        method: 'post',
+        url: 'employee/accounts',
+        data: dat,
+      });
+
+    return response.data;
+  }
+
+  //알바생 - 대표 계좌 수정
+  public async employeeUpdateAccount(
+    prop: EmployeeAccountUpdate
+  ): Promise<any> {
+    const dat: EmployeeAccountUpdate = {
+      accountNumber: prop.accountNumber,
+    };
+    const response = await this.axiosInstance.request({
+      method: 'put',
+      url: 'employee/accounts',
+      data: dat,
+    });
+
+    return response.data;
+  }
+
+  //알바생 - 월별 급여 명세서 조회
+  public async employeeGetPayStub(
+    workPlaceEmployeeId: string,
+    year: number,
+    month: number
+  ): Promise<EmployeePayStubGetResponse> {
+    const response: BaseResponse<EmployeePayStubGetResponse> =
+      await this.axiosInstance.request({
+        method: 'get',
+        url: `papers/${workPlaceEmployeeId}/pay-stubs?year=${year}&month=${month}`,
+      });
+
+    return response.data;
+  }
+
   //==========================
   // 생성 메소드
   private static createAxiosInstance() {

diff --git a/src/api/interfaces/employeeApi.ts b/src/api/interfaces/employeeApi.ts
@@ -1,15 +1,24 @@
 interface employeeApi {
   manualWorkPlaceAddition(
     req: ManualWorkPlaceAdditionRequest
-  ): Promise<BaseResponse<ManualWorkPlaceAdditionResponse>>;
+  ): Promise<ManualWorkPlaceAdditionResponse>;
 
-  getConfirmReq(): Promise<BaseResponse<ConfirmReqResponse>>;
-  getMonthlyPayment(
-    year: number,
-    month: number
-  ): Promise<BaseResponse<MonthlyPayment>>;
+  getConfirmReq(): Promise<ConfirmReqResponse>;
+  getMonthlyPayment(year: number, month: number): Promise<MonthlyPayment>;
 
   getPaperList(): Promise<EmploymentContractListGetResponse[]>;
+
+  registerEmployeeAccount(
+    prop: RegisterEmployeeAccount
+  ): Promise<RegisterEmployeeAccountResponse>;
+
+  employeeUpdateAccount(prop: EmployeeAccountUpdate): Promise<any>;
+
+  employeeGetPayStub(
+    id: string,
+    yearn: number,
+    month: number
+  ): Promise<EmployeePayStubGetResponse>;
 }
 
 export default employeeApi;
diff --git a/src/components/BtnGray.tsx b/src/components/BtnGray.tsx
@@ -4,9 +4,10 @@ type Prop = {
   text: string;
   action: () => void;
   className?: string;
+  disabled?: boolean;
 };
 
-const BtnGray = ({ text, action, className }: Prop) => {
+const BtnGray = ({ text, action, className = '', disabled = false }: Prop) => {
   return (
     <>
       <button
@@ -15,6 +16,7 @@ const BtnGray = ({ text, action, className }: Prop) => {
           `bg-slate-300 rounded-md px-5 text-white font-semibold h-[45px] text-center ${className}`
         )}
         onClick={action}
+        disabled={disabled}
       >
         {text}
       </button>

diff --git a/src/components/BtnPrimary.tsx b/src/components/BtnPrimary.tsx
@@ -1,14 +1,20 @@
+import clsx from 'clsx';
+
 type Prop = {
   text: string;
   action: () => void;
+  className?: string;
 };
 
-const BtnPrimary = ({ text, action }: Prop) => {
+const BtnPrimary = ({ text, action, className = '' }: Prop) => {
   return (
     <>
       <button
         type='button'
-        className='bg-hanaLightGreen rounded-md px-5 text-white font-semibold h-[45px] text-center'
+        className={clsx(
+          'bg-hanaLightGreen rounded-md px-5 text-white font-semibold h-[45px] text-center',
+          className
+        )}
         onClick={action}
       >
         {text}

diff --git a/src/components/InputBorderSelect.tsx b/src/components/InputBorderSelect.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { ForwardedRef, forwardRef, useState } from 'react';
+import { ForwardedRef, forwardRef, useEffect, useState } from 'react';
 
 type SelectionProp = {
   text: string;
@@ -33,7 +33,7 @@ const InputBorderSelect = forwardRef(
             }
           )}
         >
-          <div className='font-bold'>{title}</div>
+          <div className='font-bold text-start'>{title}</div>
           <select
             ref={ref}
             onFocus={handleFocused}

diff --git a/src/components/ModalBottom.tsx b/src/components/ModalBottom.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ReactNode } from 'react';
 import BtnBottom from './BtnBottom';
 
@@ -20,8 +22,14 @@ const ModalBottom = ({
 }: Prop) => {
   return (
     <>
-      <div className='fixed bottom-0 self-center w-[390px] h-screen bg-black bg-opacity-50 z-40 flex justify-center items-center'>
-        <div className='fixed bottom-0 w-[390px]  bg-white rounded-t-3xl drop-shadow-sm min-h-[200px] flex flex-col justify-between px-5 pt-0 pb-5 '>
+      <div
+        className='fixed bottom-0 self-center w-[390px] h-screen bg-black bg-opacity-50 z-40 flex justify-center items-center'
+        onClick={closeModal}
+      >
+        <div
+          className='fixed bottom-0 w-[390px]  bg-white rounded-t-3xl drop-shadow-sm min-h-[200px] flex flex-col justify-between px-5 pt-0 pb-5 '
+          onClick={(e) => e.stopPropagation()}
+        >
           <button
             className='w-full py-3 flex justify-center bg-transparent'
             onClick={closeModal}
@@ -33,13 +41,7 @@ const ModalBottom = ({
           <div>{children}</div>
           {btnBottom && (
             <div>
-              <BtnBottom
-                text={btnText || ''}
-                action={() => {
-                  action();
-                  closeModal();
-                }}
-              />
+              <BtnBottom text={btnText || ''} action={action} />
             </div>
           )}
         </div>

diff --git a/src/components/SignPad.tsx b/src/components/SignPad.tsx
@@ -0,0 +1,54 @@
+import { ForwardedRef, forwardRef, useImperativeHandle, useRef } from 'react';
+import SignatureCanvas from 'react-signature-canvas';
+
+type Prop = {
+  submit: () => void;
+};
+const SignPad = forwardRef(
+  ({ submit }: Prop, ref: ForwardedRef<SignPadHandler>) => {
+    const canvasRef = useRef<any>(null);
+
+    const handle = {
+      canvasRef: canvasRef,
+    };
+
+    useImperativeHandle(ref, () => handle);
+
+    const clearSign = () => {
+      if (canvasRef.current) canvasRef.current.clear();
+    };
+
+    return (
+      <div className='flex flex-col gap-2'>
+        <SignatureCanvas
+          ref={canvasRef}
+          canvasProps={{
+            className: 'signature-canvas',
+            width: '320px',
+            height: 230,
+          }}
+          clearOnResize={false}
+          backgroundColor='#e9ecef'
+        />
+        <div className='flex justify-between gap-1'>
+          <button
+            className='bg-gray-300 rounded-lg w-full py-3'
+            onClick={clearSign}
+          >
+            clear
+          </button>
+          <button
+            className='bg-hanaLightGreen rounded-lg w-full py-3 text-white'
+            onClick={submit}
+          >
+            submit
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+
+SignPad.displayName = 'SignPad';
+
+export default SignPad;