Feat. 인사 관리(스타일X) (#12)

Tasty-Inventory · Jun 18, 2024 · 82d9514 · 82d9514
1 parent efe7d22
commit 82d9514
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "http-proxy-middleware": "^3.0.0",
     "js-cookie": "^3.0.5",
     "react": "^18.2.0",
+    "react-datepicker": "^7.0.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "^5.0.1",

diff --git a/src/apis/EmployeeService.js b/src/apis/EmployeeService.js
@@ -76,7 +76,10 @@ export const useUpdateEmployee = () => {
   const updateEmployee = async (employeeId, employee) => {
     setLoading(true);
     try {
-      const response = await instance.put(`/employee/${employeeId}`, employee);
+      const response = await instance.patch(
+        `/employee/${employeeId}`,
+        employee,
+      );
       return response.data;
     } catch (error) {
       setError(error.message);

diff --git a/src/components/employee/EmployeeEditForm.jsx b/src/components/employee/EmployeeEditForm.jsx
@@ -22,36 +22,133 @@ const EmployeeEditForm = ({
     }));
   };
 
-  const handleSubmit = e => {
+  const handleSubmit = async e => {
     e.preventDefault();
-    onUpdateEmployee(employee);
+    try {
+      await onUpdateEmployee(employee);
+      alert('직원이 성공적으로 수정되었습니다.');
+      navigate('/employee'); // 수정 후 직원 목록 페이지로 이동
+    } catch (error) {
+      console.error('직원 수정 실패:', error);
+      alert('직원 수정에 실패했습니다. 다시 시도해주세요.');
+    }
   };
 
   const handleCancel = () => {
-    navigate(-1); // 이전 페이지로 이동
+    navigate('/employee'); // 직원 목록 페이지로 이동
+  };
+
+  const handleDelete = async () => {
+    try {
+      await onDeleteEmployee(employee.id);
+      alert('직원이 성공적으로 삭제되었습니다.');
+      navigate('/employee'); // 삭제 후 직원 목록 페이지로 이동
+    } catch (error) {
+      console.error('직원 삭제 실패:', error);
+      alert('직원 삭제에 실패했습니다. 다시 시도해주세요.');
+    }
   };
 
   return (
     <S.Container>
       <S.Title>직원 상세</S.Title>
       <S.Form onSubmit={handleSubmit}>
-        {Object.keys(employee).map(key => (
-          <div key={key}>
-            <label>{key}</label>
-            <input
-              type="text"
-              name={key}
-              value={employee[key]}
-              onChange={handleChange}
-            />
-          </div>
-        ))}
+        <div>
+          <label>이름</label>
+          <input
+            type="text"
+            name="name"
+            value={employee.name || ''}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label>주민등록번호</label>
+          <input
+            type="text"
+            name="rrn"
+            value={employee.rrn || ''}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label>전화번호</label>
+          <input
+            type="text"
+            name="phoneNumber"
+            value={employee.phoneNumber || ''}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label>이메일</label>
+          <input
+            type="email"
+            name="email"
+            value={employee.email || ''}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label>주소</label>
+          <input
+            type="text"
+            name="address"
+            value={employee.address || ''}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label>직책</label>
+          <input
+            type="text"
+            name="position"
+            value={employee.position || ''}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label>입사일</label>
+          <input
+            type="date"
+            name="hireDate"
+            value={employee.hireDate ? employee.hireDate.split('T')[0] : ''}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label>고용 상태</label>
+          <input
+            type="text"
+            name="employmentStatus"
+            value={employee.employmentStatus || ''}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label>은행 계좌</label>
+          <input
+            type="text"
+            name="bankAccount"
+            value={employee.bankAccount || ''}
+            onChange={handleChange}
+          />
+        </div>
+        <div>
+          <label>비고</label>
+          <input
+            type="text"
+            name="note"
+            value={employee.note || ''}
+            onChange={handleChange}
+          />
+        </div>
         <S.ButtonContainer>
           <S.Button type="submit">수정</S.Button>
           <S.Button type="button" onClick={handleCancel}>
             취소
           </S.Button>
-          <S.Button type="button" onClick={() => onDeleteEmployee(employee.id)}>
+          <S.Button type="button" onClick={handleDelete}>
             삭제
           </S.Button>
         </S.ButtonContainer>

diff --git a/src/pages/employee/AddEmployeeEdit.jsx b/src/pages/employee/AddEmployeeEdit.jsx
@@ -25,7 +25,7 @@ const AddEmployeeEdit = () => {
   const handleUpdateEmployee = async updatedEmployee => {
     try {
       await updateEmployee(id, updatedEmployee);
-      alert('Employee updated successfully');
+      // alert('Employee updated successfully');
     } catch (err) {
       alert('Error updating employee: ' + err.message);
     }
@@ -34,7 +34,7 @@ const AddEmployeeEdit = () => {
   const handleDeleteEmployee = async () => {
     try {
       await deleteEmployee(id);
-      alert('Employee deleted successfully');
+      // alert('Employee deleted successfully');
     } catch (err) {
       alert('Error deleting employee: ' + err.message);
     }
@@ -48,7 +48,7 @@ const AddEmployeeEdit = () => {
     <S.Container>
       {employee ? (
         <EmployeeEditForm
-          employeeData={employee}
+          employeeData={employee.data}
           onUpdateEmployee={handleUpdateEmployee}
           onDeleteEmployee={handleDeleteEmployee}
         />

diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import EmployeeTable from '../../components/employee/EmployeeTable';
-import EmployeeTabs from '../../components/employee/EmployeeTabs';
+import Tabs from '../../components/employee/EmployeeTabs';
 import * as S from '../../styles/Employee';
 import { useFetchEmployees } from '../../apis/EmployeeService';
 
@@ -22,14 +22,17 @@ const EmployeeList = () => {
   if (error) return <p>Error: {error}</p>;
 
   return (
-    <S.Container>
-      <EmployeeTabs />
-      <S.Title>직원 정보</S.Title>
-      <S.ButtonContainer>
-        <S.Button onClick={handleAddButtonClick}>등록</S.Button>
-      </S.ButtonContainer>
-      <EmployeeTable employees={employees} onRowClick={handleRowClick} />
-    </S.Container>
+    <S.PageContainer>
+      <S.PageTitle>Employee</S.PageTitle>
+      <Tabs />
+      <S.ContentContainer>
+        <S.Title>직원 정보</S.Title>
+        <S.ButtonContainer>
+          <S.Button onClick={handleAddButtonClick}>등록</S.Button>
+        </S.ButtonContainer>
+        <EmployeeTable employees={employees} onRowClick={handleRowClick} />
+      </S.ContentContainer>
+    </S.PageContainer>
   );
 };