✨ feat(admin): add User Block List Page (#336)

backend/streetdrop-admin/streetdrop-admin-server/src/main/java/com/depromeet/domains/user/controller/UserBlockController.java

@@ -0,0 +1,31 @@
+package com.depromeet.domains.user.controller;
+
+import com.depromeet.domains.user.dto.ResponseDto;
+import com.depromeet.domains.user.service.UserBlockService;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Sort;
+import org.springframework.data.web.PageableDefault;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@RequestMapping("/users/blocks")
+@RequiredArgsConstructor
+public class UserBlockController {
+
+    private final UserBlockService userBlockService;
+
+    @GetMapping
+    public ResponseEntity<?> getUserBlockList(
+            @PageableDefault(size = 20, page = 0, sort = "createdAt",
+                    direction = Sort.Direction.DESC) Pageable pageable
+    ) {
+        var response = userBlockService.getUserBlockList(pageable);
+        return ResponseDto.ok(response);
+    }
+
+
+}

backend/streetdrop-admin/streetdrop-admin-server/src/main/java/com/depromeet/domains/user/dto/UserBlockAllResponseDto.java

@@ -0,0 +1,16 @@
+package com.depromeet.domains.user.dto;
+
+import com.depromeet.common.dto.PageMetaData;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+
+import java.util.List;
+
+@AllArgsConstructor
+@NoArgsConstructor
+@Getter
+public class UserBlockAllResponseDto {
+    List<UserBlockResponseDto> data;
+    PageMetaData meta;
+}

backend/streetdrop-admin/streetdrop-admin-server/src/main/java/com/depromeet/domains/user/dto/UserBlockResponseDto.java

@@ -0,0 +1,21 @@
+package com.depromeet.domains.user.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+
+import java.time.LocalDateTime;
+
+@AllArgsConstructor
+@Getter
+@NoArgsConstructor
+@Builder
+public class UserBlockResponseDto {
+    private Long id;
+    private Long userId;
+    private String userNickname;
+    private Long blockUserId;
+    private String blockUserNickname;
+    private LocalDateTime createdAt;
+}

backend/streetdrop-admin/streetdrop-admin-server/src/main/java/com/depromeet/domains/user/repository/UserBlockRepository.java

@@ -0,0 +1,8 @@
+package com.depromeet.domains.user.repository;
+
+import com.depromeet.user.BlockUser;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface UserBlockRepository extends JpaRepository<BlockUser, Long> {
+
+}

backend/streetdrop-admin/streetdrop-admin-server/src/main/java/com/depromeet/domains/user/service/UserBlockService.java

@@ -0,0 +1,55 @@
+package com.depromeet.domains.user.service;
+
+import com.depromeet.common.dto.PageMetaData;
+import com.depromeet.domains.user.dto.UserBlockAllResponseDto;
+import com.depromeet.domains.user.dto.UserBlockResponseDto;
+import com.depromeet.domains.user.repository.UserBlockRepository;
+import com.depromeet.domains.user.repository.UserRepository;
+import com.depromeet.exception.BusinessException;
+import com.depromeet.exception.ErrorCode;
+import com.depromeet.user.BlockUser;
+import com.depromeet.user.User;
+import lombok.RequiredArgsConstructor;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.util.List;
+
+@RequiredArgsConstructor
+@Service
+public class UserBlockService {
+
+    private final UserBlockRepository userBlockRepository;
+    private final UserRepository userRepository;
+    @Transactional(readOnly = true)
+    public UserBlockAllResponseDto getUserBlockList(Pageable pageable) {
+        Page<BlockUser> userBlockResult = userBlockRepository.findAll(pageable);
+        PageMetaData pageMetaData = new PageMetaData(
+                userBlockResult.getNumber(),
+                userBlockResult.getSize(),
+                (int) userBlockResult.getTotalElements(),
+                userBlockResult.getTotalPages()
+        );
+
+        List<UserBlockResponseDto> data = userBlockResult.getContent()
+                .stream()
+                .map((userBlock) ->
+                {
+                    User blockerUser = userRepository.findById(userBlock.getBlockerId())
+                            .orElseThrow(() -> new BusinessException(ErrorCode.NOT_FOUND));
+                    User blockedUser = userRepository.findById(userBlock.getBlockerId())
+                            .orElseThrow(() -> new BusinessException(ErrorCode.NOT_FOUND));
+                    return UserBlockResponseDto.builder()
+                            .id(userBlock.getId())
+                            .userId(blockerUser.getId())
+                            .userNickname(blockerUser.getNickname())
+                            .blockUserId(blockedUser.getId())
+                            .blockUserNickname(blockedUser.getNickname())
+                            .createdAt(userBlock.getCreatedAt())
+                            .build();
+                }).toList();
+        return new UserBlockAllResponseDto(data, pageMetaData);
+    }
+}

backend/streetdrop-admin/streetdrop-admin-web/src/App.js

@@ -14,6 +14,7 @@ import ItemListPage from "./components/items/ItemListPage";
 import UserSignUpGraph from "./components/user/UserSignUpGraph";
 import LocationAnalysis from "./components/location/LocationAnalysis";
 import PrivateRoute from "./route/PrivateRoute";
+import UserBlockPage from "./components/user/UserBlockPage";
 
 const App = () => {
     return (
@@ -31,6 +32,7 @@ const App = () => {
                         <Route path='/music/recommend' element={<MusicRecommend/>}/>
                         <Route path='/location/analysis' element={<LocationAnalysis/>}/>
                         <Route path='/user/list' element={<UserListPage/>}/>
+                        <Route path='/user/block' element={<UserBlockPage/>}/>
                         <Route path='/user/signup-graph' element={<UserSignUpGraph/>}/>
                         <Route path='/notification/create' element={<CreateNotification/>}/>
                     </Route>

backend/streetdrop-admin/streetdrop-admin-web/src/api/domain/user/UserBlockApi.js

@@ -0,0 +1,17 @@
+import authService from "../../../service/AuthService";
+import axios from "axios";
+import {ADMIN_SERVER_URL} from "../../DefaultSetUp";
+
+const UserBlockApi = {
+    getAllBlockList: (page, size) => {
+        return axios.get(ADMIN_SERVER_URL+'/users/blocks' + '?page=' + page + '&size=' + size,
+            {
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Access-Control-Allow-Origin': '*',
+                    'Authorization': 'Bearer ' + authService.getToken()
+                }
+            });
+    }
+}
+export default UserBlockApi;

backend/streetdrop-admin/streetdrop-admin-web/src/components/user/UserBlockPage.js

@@ -0,0 +1,93 @@
+import React, {useEffect, useState} from "react"
+import BasicLayout from "../../layout/BasicLayout";
+import {Table} from "antd";
+import UserBlockApi from "../../api/domain/user/UserBlockApi";
+
+function UserBlockPage() {
+    const [data, setData] = useState([]);
+
+    const [tableParams, setTableParams] = useState({
+        pagination: {
+            current: 1,
+            pageSize: 30
+        },
+    });
+
+    useEffect(() => {
+        fetchData();
+    }, [JSON.stringify(tableParams)]);
+
+
+    const fetchData = async () => {
+        const response = await UserBlockApi.getAllBlockList(tableParams.pagination.current - 1, tableParams.pagination.pageSize);
+        setData(response.data['data']);
+        setTableParams({
+            ...tableParams,
+            pagination: {
+                ...tableParams.pagination,
+                total: response.data['meta']['totalElements'],
+            },
+        });
+    }
+
+    const columns = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '차단 요청 유저 ID',
+            dataIndex: 'userId',
+        },
+        {
+            title: '차단 요청 유저 닉네임',
+            dataIndex: 'userNickname',
+        },
+        {
+            title: '차단 대상 유저 ID',
+            dataIndex: 'blockUserId',
+        },
+        {
+            title: '차단 대상 유저 닉네임',
+            dataIndex: 'blockUserNickname',
+        },
+        {
+            title: '차단 일자',
+            dataIndex: 'createdAt',
+        }
+    ];
+
+    const handleTableChange = (
+        pagination,
+    ) => {
+        setTableParams({
+            pagination,
+        });
+
+
+        if (pagination.pageSize !== tableParams.pagination?.pageSize) {
+            setData([]);
+        }
+    };
+
+
+    return (
+        <>
+            <BasicLayout>
+                <h3 style={{marginBottom: '10px'}}>유저 차단 내역</h3>
+                <p style={{color: 'gray'}}>유저의 차단 내역을 확인할 수 있습니다.</p>
+                <Table
+                    style={{marginTop: '20px'}}
+                    columns={columns}
+                    rowKey={record => record.id}
+                    pagination={tableParams.pagination}
+                    dataSource={data}
+                    onChange={handleTableChange}
+                />
+            </BasicLayout>
+        </>
+    )
+}
+
+export default UserBlockPage;

backend/streetdrop-admin/streetdrop-admin-web/src/layout/common/Menu.js

@@ -37,6 +37,9 @@ const MenuComponent = () => {
                 <Menu.Item key="user-menu-2">
                     <Link to="/user/signup-graph">• 유저가입 분석</Link>
                 </Menu.Item>
+                <Menu.Item key="user-menu-3">
+                    <Link to="/user/block">• 유저 차단내역</Link>
+                </Menu.Item>
             </Menu.SubMenu>
             <Menu.SubMenu key="sub4" icon={<BellOutlined/>} title="푸시알림 관리">
                 <Menu.Item key="9">

backend/streetdrop-admin/streetdrop-admin-web/src/setupProxy.js

@@ -18,7 +18,7 @@ module.exports = function (app) {
     }));
 
     app.use('/admin', createProxyMiddleware({
-        target: 'http://172.21.0.2:8080',
+        target: 'http://localhost:8080',
         changeOrigin: true,
         pathRewrite: {
             '^/admin': ''