Merge branch 'main' of https://github.com/hanaro-on-and-on/client int…

…o feat/#88

src/App.tsx

@@ -45,7 +45,6 @@ function App() {
         </Route>
         <Route path='/part-time/*' element={<PaymentMain />}>
           <Route path='worktime' element={<WorkTime />} />
-          <Route path='payment' element={<Payment />} />
         </Route>
         <Route
           path='/part-time/payment/detail/:dayMonth/:workPlace'

src/api/apiClient.ts

@@ -146,6 +146,16 @@ class ApiClient implements employeeApi {
     return response.data;
   }
 
+  //알바생 - 대표 계좌 조회
+  public async employeeGetMyInfo(): Promise<MyInfo> {
+    const response: BaseResponse<MyInfo> = await this.axiosInstance.request({
+      method: 'get',
+      url: 'employee/accounts',
+    });
+
+    return response.data;
+  }
+
   //==========================
   // 생성 메소드
   private static createAxiosInstance() {

src/api/interfaces/employeeApi.ts

@@ -27,6 +27,8 @@ interface employeeApi {
   employeeSignature(payStubId: number): Promise<EmployeeSignatureResponse>;
 
   employeeGetAttendanceList(): Promise<EmployeeTodayAttendancesResponse>;
+
+  employeeGetMyInfo(): Promise<MyInfo>;
 }
 
 export default employeeApi;

src/components/ui/ToolBarLink.tsx

@@ -1,29 +1,20 @@
-import { useState } from 'react';
-import ToolBarDetail from './ToolBarDetail';
-import { Link } from 'react-router-dom';
 import { NavLink } from 'react-router-dom';
 
 // const mockData = ['나의 사업장', '캘린더'];
 
-type LinkData = {
-  idx: number;
-  title: string;
-  url: string;
-};
-
 type ToolBarLinkProps = {
   options: LinkData[];
 };
 
 const ToolBarLink = ({ options }: ToolBarLinkProps) => {
   return (
     <>
-      <div className='flex justify-evenly min-h-12 items-center border-b border-gray-200'>
+      <div className='flex justify-evenly min-h-12 items-center border-b border-gray-200 w-full'>
         {options.map((option) => {
           return (
             <NavLink
               className={({ isActive }) =>
-                `bg-white px-8 py-3 ${isActive ? 'text-hanaLightGreen border-b-2 border-hanaLightGreen' : ''}`
+                `bg-white px-3 py-3 ${isActive ? 'text-hanaLightGreen border-b-2 border-hanaLightGreen' : ''}`
               }
               key={option.idx}
               to={option.url}

src/pages/LandingPage/EmployeeAddMainAccount.tsx

@@ -9,17 +9,7 @@ import InputBorder from '../../components/InputBorder';
 import InputBorderSelect from '../../components/InputBorderSelect';
 import ModalCenter from '../../components/ModalCenter';
 import ApiClient from '../../api/apiClient';
-
-export const BankList: SelectionProp[] = [
-  { text: '하나은행', value: 'HANA' },
-  { text: '신한은행', value: 'SHIN_HAN' },
-  { text: '국민은행', value: 'KUK_MIN' },
-  { text: '우리은행', value: 'URI' },
-  { text: 'IBK기업은행', value: 'IBK' },
-  { text: '농협은행', value: 'NONG_HYEOP' },
-  { text: '수협은행', value: 'SU_HYEOP' },
-  { text: '부산은행', value: 'BUSAN' },
-];
+import { BankList } from '../employee/datas';
 
 const EmployeeAddMainAccount = () => {
   const [isModalOpen, setIsModal] = useState(false);

src/pages/employee/Attendance/Attendance.tsx

@@ -9,6 +9,8 @@ import { useNavigate } from 'react-router-dom';
 import ApiClient from '../../../api/apiClient';
 import { useEffect, useState } from 'react';
 import BtnGray from '../../../components/BtnGray';
+import ToolBarLink from '../../../components/ui/ToolBarLink';
+import { EmployeeMenuList } from '../datas';
 
 const today = new Date();
 const day = today.getDay();
@@ -79,7 +81,7 @@ const Attendance = () => {
     <>
       {attendances && (
         <Frame navTitle='알바ON'>
-          <ToolBar2 isEmployee />
+          <ToolBarLink options={EmployeeMenuList} />
           <div className='w-full flex flex-col gap-10 mt-7'>
             {/* 오늘 출근 목록 */}
             <Wrapper title='오늘 출근 목록'>
@@ -98,7 +100,7 @@ const Attendance = () => {
                       >
                         <WorkPlaceName
                           name={item.workPlaceName}
-                          colorType={item.colorTypeCode}
+                          colorType={item.colorTypeCd}
                         />
                         <FaAngleRight />
                       </button>
@@ -115,13 +117,15 @@ const Attendance = () => {
                           ))}
                       </div>
 
-                      <div className='border rounded-sm text-sm border-hanaLightGreen px-3 mb-2'>
-                        <div className='flex font-semibold '>
-                          <span className='pr-1'>[{item.workPlaceName}]</span>
-                          <span>{item.notice[0].title}</span>
+                      {item.notice.length > 0 && (
+                        <div className='border rounded-sm text-sm border-hanaLightGreen px-3 mb-2'>
+                          <div className='flex font-semibold '>
+                            <span className='pr-1'>[{item.workPlaceName}]</span>
+                            <span>{item?.notice[0].title}</span>
+                          </div>
+                          {` ${item?.notice[0].content}`}
                         </div>
-                        {` ${item.notice[0].content}`}
-                      </div>
+                      )}
                       {isActivated(item) ? (
                         <BtnPrimary text='출근' action={() => {}} />
                       ) : (
@@ -145,14 +149,14 @@ const Attendance = () => {
                       <div className='flex flex-col items-start gap-1'>
                         <WorkPlaceName
                           name={item.workPlaceName}
-                          colorType={item.colorTypeCode}
+                          colorType={item.colorTypeCd}
                         />
                         {item.workTime.length > 0 ? (
                           <div className='text-gray-400 text-sm'>
-                            {item.workTime[0]?.workDayOfWeek}{' '}
-                            {item.workTime[0]?.workStartTime}
+                            {item.workTime[0].workDayOfWeek}{' '}
+                            {item.workTime[0].workStartTime}
                             {' - '}
-                            {item.workTime[0]?.workEndTime}
+                            {item.workTime[0].workEndTime}
                           </div>
                         ) : (
                           <div className='text-gray-400 text-sm'>

src/pages/employee/MyPageTab/EditMyPage.tsx

@@ -1,15 +1,14 @@
 import { useNavigate } from 'react-router-dom';
 import BtnBottom from '../../../components/BtnBottom';
 import Frame from '../../../components/Frame';
-import InputBox from '../../../components/ui/InputBox';
 import ReturnArrow from '../../../components/ui/ReturnArrow';
 import ModalBottom from '../../../components/ModalBottom';
 import { useRef, useState } from 'react';
 import InputBorderSelect from '../../../components/InputBorderSelect';
-import { BankList } from '../../LandingPage/EmployeeAddMainAccount';
 import InputBorder from '../../../components/InputBorder';
 import ApiClient from '../../../api/apiClient';
 import ModalCenter from '../../../components/ModalCenter';
+import { BankList } from '../datas';
 
 const EditMyPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);

src/pages/employee/MyPageTab/MyPage.tsx

@@ -3,18 +3,19 @@ import Frame from '../../../components/Frame';
 import Wrapper from '../../../components/Wrapper';
 import WhiteBox from '../../../components/ui/WhiteBox';
 import WorkPlaceName from '../../../components/ui/WorkPlaceName';
-import ToolBar2 from '../../../components/ui/ToolBar2';
 import { useEffect, useState } from 'react';
 import ApiClient from '../../../api/apiClient';
 import ModalBottom from '../../../components/ModalBottom';
-import { formatDate, styleDate } from '../../../utils/format-date';
+import ToolBarLink from '../../../components/ui/ToolBarLink';
+import { EmployeeMenuList } from '../datas';
 
 const MyPage = () => {
   const navigation = useNavigate();
   const [papers, setPapers] = useState<EmploymentContractListGetResponse[]>([]);
   const [paperDetail, setPaperDetail] =
     useState<EmployeePaperGetResponse | null>(null);
   const [isModalOpen, setModalOpen] = useState<boolean>(false);
+  const [myInfo, setMyInfo] = useState<MyInfo | null>(null);
   const [modalMsg, setModalMsg] = useState<string>('');
 
   const openModal = (msg?: string) => {
@@ -41,6 +42,17 @@ const MyPage = () => {
     }
   };
 
+  const getMyInfo = async () => {
+    try {
+      const response: MyInfo =
+        await ApiClient.getInstance().employeeGetMyInfo();
+
+      setMyInfo(response);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   const fetchData = async () => {
     try {
       const response: EmploymentContractListGetResponse[] =
@@ -55,6 +67,7 @@ const MyPage = () => {
 
   useEffect(() => {
     fetchData();
+    getMyInfo();
   }, []);
   return (
     <>
@@ -146,7 +159,7 @@ const MyPage = () => {
         </ModalBottom>
       )}
       <Frame navTitle='알바ON'>
-        <ToolBar2 isEmployee />
+        <ToolBarLink options={EmployeeMenuList} />
         <div className='w-full flex flex-col gap-10 '>
           {/* 나의 정보 */}
           <Wrapper title='나의 정보' className='mt-7'>
@@ -155,17 +168,17 @@ const MyPage = () => {
                 {/* 성명 */}
                 <div className='flex justify-between'>
                   <div>성명</div>
-                  <div className='text-gray-400'>이름</div>
+                  <div className='text-gray-400'>{myInfo?.username}</div>
                 </div>
                 {/* 전화번호 */}
                 <div className='flex justify-between'>
                   <div>전화번호</div>
-                  <div className='text-gray-400'>이름</div>
+                  <div className='text-gray-400'>{myInfo?.phoneNumber}</div>
                 </div>
                 {/* 계좌번호 */}
                 <div className='flex justify-between'>
                   <div>계좌번호</div>
-                  <div className='text-gray-400'>이름</div>
+                  <div className='text-gray-400'>{myInfo?.accountNumber}</div>
                 </div>
               </div>
             </WhiteBox>

src/pages/employee/PartTimeTab/Payment.tsx

@@ -1,73 +1,73 @@
 import { useNavigate } from 'react-router-dom';
 import WhiteBox from '../../../components/ui/WhiteBox';
 import { formatMonths, styleMonths } from '../../../utils/format-date';
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { FaAngleRight } from 'react-icons/fa6';
 import WorkPlaceName from '../../../components/ui/WorkPlaceName';
 import ApiClient from '../../../api/apiClient';
-import generateMonthList from '../../../utils/generateMonthList';
 
-type Payment = {
-  name: string;
-  payment: number;
+type Prop = {
+  monthList: Date[];
+  selectedDate: Date;
+  selectDate: React.Dispatch<Date>;
 };
 
-const Payment = () => {
+const Payment = ({ monthList, selectedDate, selectDate }: Prop) => {
   const today = new Date();
   const navigate = useNavigate();
-  const [monthList, setMonthList] = useState<Date[]>([]);
-  const [selectedMonth, setSelectedMonth] = useState<number>(
-    today.getMonth() + 1
-  );
-  const [selectedYear, setSelectedYear] = useState<number>(today.getFullYear());
+
   const [totalMonthlyPayment, setTotalMonthlyPayment] = useState<number>(0);
   const [paymentList, setPaymentList] = useState<
     EmployeeSalaryGetResponseList[]
   >([]);
 
   const fetchData = async (year: number, month: number) => {
+    console.log(year, month);
     try {
       const response: MonthlyPayment =
         await ApiClient.getInstance().getMonthlyPayment(year, month);
 
       if (response) {
         setTotalMonthlyPayment(response.totalPayment);
-        setPaymentList(response.employeeSalaryGetResponseList);
+        setPaymentList(response.list);
+        console.log(response);
+        console.log('paymentList', paymentList);
       }
     } catch (err) {
       console.error(err);
     }
   };
 
   useEffect(() => {
-    fetchData(selectedYear, selectedMonth);
-
-    setMonthList(generateMonthList());
-  }, [selectedYear, selectedMonth]);
+    if (selectedDate) {
+      fetchData(selectedDate.getFullYear(), selectedDate.getMonth() + 1);
+    }
+  }, [selectedDate]);
 
   return (
     <>
       {/* 총금액, 날짜 */}
       <WhiteBox className='w-full py-5' border>
-        <div>
-          <select
-            value={`${selectedYear}-${selectedMonth}`}
-            onChange={(e) => {
-              const [year, month] = e.target.value.split('-');
-              setSelectedYear(Number(year));
-              setSelectedMonth(Number(month));
-            }}
-          >
-            {monthList.map((date) => (
-              <option
-                key={date.toISOString()}
-                value={`${date.getFullYear()}-${date.getMonth() + 1}`}
-              >
-                {`${styleMonths(formatMonths(date))} 총 급여`}
-              </option>
-            ))}
-          </select>
-        </div>
+        {selectedDate.getMonth() + 1 && (
+          <div>
+            <select
+              value={selectedDate.toString()}
+              onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+                selectDate(new Date(e.target.value));
+              }}
+            >
+              {monthList.map((date) => (
+                <option
+                  selected={selectedDate === date}
+                  key={date.toISOString()}
+                  value={date.toString()}
+                >
+                  {`${styleMonths(formatMonths(date))} 총 급여`}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
         <div className='font-bold text-2xl pt-5'>
           {totalMonthlyPayment.toLocaleString()} 원
         </div>
@@ -87,7 +87,7 @@ const Payment = () => {
                   type='button'
                   onClick={() =>
                     navigate(
-                      `detail/${selectedYear}-${selectedMonth}` +
+                      `/part-time/payment/detail/${selectedDate.getFullYear()}-${selectedDate.getMonth()}` +
                         `/${item.workPlaceName}`
                     )
                   }