[Frontend] 프로젝트 정렬, 삭제

개요

이 문서에서는 React로 구현된 프로젝트 목록에서 프로젝트 정렬 및 삭제 기능을 설명합니다. 사용자는 프로젝트를 여러 가지 기준에 따라 정렬할 수 있고, 선택한 프로젝트를 일괄 삭제할 수 있는 기능을 제공합니다.

프로젝트 목록 구성

ProjectsList 컴포넌트는 프로젝트 목록을 표시하고, 사용자가 프로젝트를 검색하거나 정렬할 수 있는 기능을 제공합니다. 이 컴포넌트는 여러 props를 사용하여 외부 데이터와 상태를 관리합니다.

프로젝트 검색

사용자는 프로젝트 이름을 검색하여 목록을 필터링할 수 있습니다. 검색어는 useState 훅을 사용하여 상태로 관리되며, 입력된 검색어는 대소문자를 구분하지 않고 프로젝트 이름에 포함된 텍스트를 찾습니다.

const [searchTerm, setSearchTerm] = useState(""); // 검색어
const filteredProjects = projects.filter((project) =>
  project['project_name'].toLowerCase().includes(searchTerm.toLowerCase())
);

프로젝트 정렬

프로젝트 목록은 사용자가 선택한 기준에 따라 정렬됩니다. 정렬 기준은 recent, oldest, model, category로 나누어지며, useState를 이용해 상태로 관리됩니다.

최근 생성순: 프로젝트 ID가 큰 순서대로 정렬

오래된 순: 프로젝트 ID가 작은 순서대로 정렬

모델 이름순: AI 모델 이름 기준으로 정렬

카테고리 이름순: 카테고리 이름 기준으로 정렬

const sortedProjects = [...filteredProjects].sort((a, b) => {
  if (sortBy === "recent") {
    return b.project_id - a.project_id; // id 큰 순 → 최근 생성
  } else if (sortBy === "oldest") {
    return a.project_id - b.project_id; // id 작은 순 → 오래된 생성
  } else if (sortBy === "model") {
    return a.ai_model.localeCompare(b.ai_model); // 모델 이름순
  } else if (sortBy === "category") {
    return a.category.localeCompare(b.category); // 카테고리 이름순
  }
  return 0;
});

프로젝트 선택 및 삭제

사용자는 체크박스를 통해 프로젝트를 선택하고, 선택한 프로젝트들을 일괄 삭제할 수 있습니다. 선택된 프로젝트 ID는 selectedProjects 배열로 관리되며, 삭제 버튼을 클릭하면 해당 ID들이 서버로 전달됩니다. 삭제는 fetch API를 사용해 백엔드에서 처리됩니다.

const handleDeleteSelected = async () => {
  if (window.confirm('정말로 삭제하시겠습니까?')) {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/DeleteProject`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ project_ids: selectedProjects }),
    });
    if (response.ok) {
      setProjects(projects.filter(pre => !selectedProjects.includes(pre.project_id)));
    } else {
      console.error("Failed to fetch data");
    }
  }
};

페이지네이션

페이지네이션은 프로젝트 목록이 많을 경우, 페이지별로 프로젝트를 표시할 수 있도록 합니다. projectsPerPage 변수로 한 페이지에 표시할 프로젝트 수를 설정하고, currentPage를 통해 현재 페이지를 관리합니다. 페이지가 변경될 때마다 해당 페이지에 맞는 프로젝트들을 슬라이싱하여 표시합니다.

const totalPages = Math.ceil(filteredProjects.length / projectsPerPage);
const currentProjects = sortedProjects.slice(indexOfFirstProject, indexOfLastProject);