사원 관리 api제작 연동 완료

board-back/src/main/java/com/eogns/board_back/controller/UserController.java

@@ -6,14 +6,19 @@ import org.springframework.web.bind.annotation.RestController;
 import com.eogns.board_back.dto.request.user.PatchNicknameRequestDto;
 import com.eogns.board_back.dto.request.user.PatchProfileImageRequestDto;
 import com.eogns.board_back.dto.response.user.GetSignInUserResponseDto;
+import com.eogns.board_back.dto.response.user.GetUserAllResponseDto;
 import com.eogns.board_back.dto.response.user.GetUserResponseDto;
 import com.eogns.board_back.dto.response.user.PatchNicknameResponseDto;
 import com.eogns.board_back.dto.response.user.PatchProfileImageResponseDto;
+import com.eogns.board_back.entity.UserEntity;
 import com.eogns.board_back.service.UserService;
 
 import jakarta.validation.Valid;
 import lombok.RequiredArgsConstructor;
 
+import java.util.List;
+import java.util.stream.Collectors;
+
 import javax.sound.midi.Patch;
 
 import org.springframework.http.ResponseEntity;
@@ -32,6 +37,13 @@ import org.springframework.web.bind.annotation.RequestBody;
 public class UserController {
     private final UserService userService;
 
+    @GetMapping("/management")
+    public ResponseEntity<List<GetUserAllResponseDto>> getAllUsers() {
+        List<GetUserAllResponseDto> users = userService.getAllUsers().stream().map(this::convertToDTO).collect(Collectors.toList());
+        return ResponseEntity.ok(users);
+    }
+
+
     @GetMapping("/{email}")
     public ResponseEntity<? super GetUserResponseDto> getUser(
         @PathVariable("email") String email    
@@ -66,4 +78,15 @@ public class UserController {
         ResponseEntity<? super PatchProfileImageResponseDto> response = userService.patchProfileImage(requestBody, email);
         return response;
     }
+
+    private GetUserAllResponseDto convertToDTO(UserEntity user) {
+        GetUserAllResponseDto dto = new GetUserAllResponseDto();
+        dto.setEmail(user.getEmail());
+        dto.setNickname(user.getNickname());
+        dto.setTelNumber(user.getTelNumber());
+        dto.setAddress(user.getAddress());
+        dto.setAddressDetail(user.getAddressDetail());
+        dto.setProfileImage(user.getProfileImage());
+        return dto;
+    }
 }

board-back/src/main/java/com/eogns/board_back/dto/response/user/GetUserAllResponseDto.java

@@ -0,0 +1,13 @@
+package com.eogns.board_back.dto.response.user;
+
+import lombok.Data;
+
+@Data
+public class GetUserAllResponseDto {
+    private String email;
+    private String nickname;
+    private String telNumber;
+    private String address;
+    private String addressDetail;
+    private String profileImage;
+}

board-back/src/main/java/com/eogns/board_back/service/UserService.java

@@ -1,5 +1,7 @@
 package com.eogns.board_back.service;
 
+import java.util.List;
+
 import org.apache.catalina.connector.Response;
 import org.springframework.http.ResponseEntity;
 
@@ -8,12 +10,16 @@ import com.eogns.board_back.dto.request.user.PatchProfileImageRequestDto;
 import com.eogns.board_back.dto.response.user.GetSignInUserResponseDto;
 import com.eogns.board_back.dto.response.user.GetUserResponseDto;
 import com.eogns.board_back.dto.response.user.PatchNicknameResponseDto;
-import com.eogns.board_back.dto.response.user.PatchProfileImageResponseDto;;
+import com.eogns.board_back.dto.response.user.PatchProfileImageResponseDto;
+import com.eogns.board_back.entity.UserEntity;;
 
 public interface UserService {
     ResponseEntity<? super GetUserResponseDto> getUser(String email);
     ResponseEntity<? super GetSignInUserResponseDto> getSinInuser(String email);
     ResponseEntity<? super PatchNicknameResponseDto> patchNickname(PatchNicknameRequestDto dto, String email);
     ResponseEntity<? super PatchProfileImageResponseDto> patchProfileImage(PatchProfileImageRequestDto dto, String email);
+    
+    // 모든 사용자 조회
+    List<UserEntity> getAllUsers();
 
 }

board-back/src/main/java/com/eogns/board_back/service/implement/UserServiceImplement.java

@@ -1,5 +1,7 @@
 package com.eogns.board_back.service.implement;
 
+import java.util.List;
+
 //import org.springframework.boot.autoconfigure.security.SecurityProperties.User;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Service;
@@ -23,6 +25,11 @@ public class UserServiceImplement implements UserService {
     
     private final UserRepository userRepository;
     
+    @Override
+    public List<UserEntity> getAllUsers() {
+        return userRepository.findAll();
+    }
+
     @Override
     public ResponseEntity<? super GetUserResponseDto> getUser(String email) {
         UserEntity userEntity = null;
@@ -93,6 +100,7 @@ public class UserServiceImplement implements UserService {
        return PatchProfileImageResponseDto.success();
     }
 
+
     
     
 }

board-front/src/apis/index.ts

@@ -37,6 +37,8 @@ import {
   PatchNicknameRequestDto,
   PatchProfileImageRequestDto,
 } from "./request/user";
+import { EmployeeManagementResponseDto } from "./response/employee";
+import EmployeeManagementListItem from "types/interface/employee-list-item.interface";
 
 const DOMAIN = "http://localhost:4000";
 
@@ -54,6 +56,22 @@ const SIGN_UP_URL = () => `${API_DOMAIN}/auth/sign-up`;
 
 const EMPLOYEE_SIGN_UP_URL = () => `${API_DOMAIN}/menu/employee/sign-up`;
 
+const EMPLOYEE_MANAGEMENT_URL = () => `${API_DOMAIN}/user/management`;
+
+export const getEmployeeManagementRequest = async (): Promise<
+  EmployeeManagementListItem[] | null
+> => {
+  try {
+    const response = await axios.get<EmployeeManagementListItem[]>(
+      EMPLOYEE_MANAGEMENT_URL()
+    );
+    return response.data;
+  } catch (error: any) {
+    console.error("API request failed:", error);
+    return null;
+  }
+};
+
 export const employeeSignUpRequest = async (requestBody: SignUpRequestDto) => {
   const result = await axios
     .post(EMPLOYEE_SIGN_UP_URL(), requestBody)

board-front/src/apis/response/employee/employee-management.response.ts

@@ -0,0 +1,6 @@
+import EmployeeManagementListItem from "types/interface/employee-list-item.interface";
+import ResponseDto from "../reponse.dto";
+
+export default interface EmployeeManagementResponseDto extends ResponseDto {
+  employeeManagementList: EmployeeManagementListItem[];
+}

board-front/src/apis/response/employee/index.ts

@@ -0,0 +1,3 @@
+import EmployeeManagementResponseDto from "./employee-management.response";
+
+export type { EmployeeManagementResponseDto };

board-front/src/service/UserService.js

@@ -0,0 +1,15 @@
+// frontend/src/services/UserService.js
+
+import axios from "axios";
+
+// 백엔드의 API 주소를 정확히 지정합니다.
+// 프로덕션 환경에서는 환경 변수를 사용하여 동적으로 설정하는 것이 좋습니다.
+const API_BASE_URL = "http://localhost:4000/api/v1/user";
+
+const getAllUsers = () => {
+  return axios.get();
+};
+
+export default {
+  getAllUsers,
+};

board-front/src/types/interface/employee-list-item.interface.ts

@@ -0,0 +1,10 @@
+// types/interface/employee-list-item.interface.ts
+
+export default interface EmployeeManagementListItem {
+  email: string; // 소문자 string 사용
+  nickname: string;
+  telNumber: string;
+  address: string;
+  addressDetail?: string;
+  profileImage?: string;
+}

board-front/src/views/Menu/employee/management/index.tsx

@@ -1,3 +1,104 @@
-export default function EmployeeManagement() {
-  return <div>사원들의 정보를 보여주는 화면</div>;
+// frontend/src/components/UserList.jsx
+
+import React, { useEffect, useState } from "react";
+import "./style.css";
+import EmployeeManagementListItem from "types/interface/employee-list-item.interface";
+import { usePagination } from "hooks";
+import { getEmployeeManagementRequest } from "apis";
+
+export default function UserList() {
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 페이지네이션 관련 상태
+  const {
+    currentPage,
+    setCurrentPage,
+    currentSection,
+    setCurrentSection,
+    viewList,
+    viewPageList,
+    totalSection,
+    setTotalList,
+  } = usePagination<EmployeeManagementListItem>(20); // 20개씩 게시물 보여짐
+
+  // API 응답 처리 함수
+  const getEmployeeManagementResponse = (
+    responseBody: EmployeeManagementListItem[] | null
+  ) => {
+    console.log("API Response Body:", responseBody); // 디버깅용 로그
+    if (!responseBody) {
+      setError("No response from server.");
+      setLoading(false);
+      return;
+    }
+
+    setTotalList(responseBody); // 페이지네이션을 위한 데이터 설정
+    setLoading(false); // 로딩 종료
+  };
+
+  useEffect(() => {
+    getEmployeeManagementRequest()
+      .then(getEmployeeManagementResponse)
+      .catch((err) => {
+        console.error("API request failed:", err);
+        setError("API request failed.");
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return <p>Loading users...</p>;
+  }
+
+  if (error) {
+    return <p>Error: {error}</p>;
+  }
+
+  return (
+    <div className="container mt-4">
+      <h2>사용자 목록</h2>
+      <table className="table table-striped">
+        <thead>
+          <tr>
+            <th>Email</th>
+            <th>닉네임</th>
+            <th>전화번호</th>
+            <th>주소</th>
+            <th>상세주소</th>
+            <th>프로필 이미지</th>
+          </tr>
+        </thead>
+        <tbody>
+          {viewList.length > 0 ? (
+            viewList.map((user: EmployeeManagementListItem) => (
+              <tr key={user.email}>
+                <td>{user.email}</td>
+                <td>{user.nickname}</td>
+                <td>{user.telNumber}</td>
+                <td>{user.address}</td>
+                <td>{user.addressDetail || "N/A"}</td>
+                <td>
+                  {user.profileImage ? (
+                    <img
+                      src={user.profileImage}
+                      alt="Profile"
+                      width="50"
+                      height="50"
+                    />
+                  ) : (
+                    "N/A"
+                  )}
+                </td>
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td colSpan={6}>No users found.</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
 }

board-front/src/views/Menu/employee/management/style.css

@@ -0,0 +1,33 @@
+/* frontend/src/components/UserList.css */
+
+.user-list-container {
+  padding: 20px;
+}
+
+.user-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.user-table th,
+.user-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.user-table th {
+  background-color: #f2f2f2;
+}
+
+.user-table tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.user-table tr:hover {
+  background-color: #ddd;
+}
+
+.user-table img {
+  border-radius: 50%;
+}