admin - 유저관리 cash 지급 후 렌더링 에러

"use client";

import React, { useState, useEffect, useCallback } from "react";

interface User { name: string; username: string; cash: number; activate: number; checked: boolean; addDate: string; }

const pageSize = 10;

export default function ManagePage() { const [users, setUsers] = useState<User[]>([]); const [giveCash, setGiveCash] = useState(""); const [selectedUsers, setSelectedUsers] = useState<string[]>([]); const [currentPage, setCurrentPage] = useState(1); const [searchTerm, setSearchTerm] = useState(""); const [totalPages, setTotalPages] = useState(1); const [pageInfo, setPageInfo] = useState({ currentPage: 1, pageSize: 10, totalPages: 1, });

const fetchData = useCallback( async (page: number) => { try { let apiUrl = /users?page=${page}&pageSize=${pageSize};

    if (searchTerm) {
      apiUrl += `&searchTerm=${searchTerm}`;
    }

    const response = await fetch(apiUrl);
    const data = await response.json();

    setUsers(data.users);
    setPageInfo({
      currentPage: data.pageInfo.currentPage,
      pageSize: data.pageInfo.pageSize,
      totalPages: data.pageInfo.totalPages,
    });
  } catch (error) {
    console.error("사용자 정보를 가져오는데 실패했습니다.", error);
  }
},
[searchTerm]

);

const handlePageChange = (newPage: number) => { setPageInfo({ ...pageInfo, currentPage: newPage, }); };

const handleCheckboxChange = (username: string) => { setSelectedUsers((prevSelected) => { const isSelected = prevSelected.includes(username); let updatedSelected: string[];

  if (isSelected) {
    updatedSelected = prevSelected.filter((name) => name !== username);
  } else {
    updatedSelected = [...prevSelected, username];
  }

  return updatedSelected;
});

};

const handleToggleActivation = async ( username: string, currentActivate: number ) => { try { // 서버에 활성화/비활성화 토글 요청 보내기 const response = await fetch(/users/${username}/toggle-activate, { method: "PUT", });

  if (!response.ok) {
    throw new Error("사용자 활성화/비활성화를 토글하는데 실패했습니다.");
  }

  // 성공적으로 토글된 경우, 사용자 목록 다시 불러오기
  fetchData(pageInfo.currentPage);
} catch (error) {
  console.error("사용자 활성화/비활성화 토글 중 오류 발생:", error);
}

};

const toggleCheckbox = (index: number) => { const updatedUsers = [...users]; updatedUsers[index].checked = !updatedUsers[index].checked; setUsers(updatedUsers); };

const giveCashToUsers = async () => { const checkedUsers = users.filter((user) => user.checked);

if (checkedUsers.length === 0) {
  alert("캐시를 지급할 사용자를 선택하세요.");
  return;
}

const usernamesToGiveCash = checkedUsers.map((user) => user.username);

try {
  const response = await fetch("/give-cash", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ usernames: usernamesToGiveCash, giveCash }),
  });

  if (!response.ok) {
    throw new Error("캐시 지급 중 오류가 발생했습니다.");
  }

  const data = await response.json();

  setUsers((prevUsers: User[]) =>
    prevUsers.map((user) => {
      const updatedUser = data.updatedUsers.find(
        (updatedUser: User) => updatedUser.username === user.username
      );
      return updatedUser ? updatedUser : user;
    })
  );
  setGiveCash("");

  alert("지급이 완료되었습니다");
} catch (error) {
  console.error("캐시 지급 중 오류 발생:", error);
}

};

useEffect(() => { setSearchTerm(""); }, []);

useEffect(() => { fetchData(pageInfo.currentPage); }, [fetchData, pageInfo.currentPage]);

KDT-IaaS-Class-One-Group / KDT-IaaS-1team-ERP

admin - 유저관리 cash 지급 후 렌더링 에러 #64