SearchCombinationPage.jsx

import React, { useEffect, useState } from "react";
import CombinationFilter from "@/components/CombinationFilter/CombinationFilter";
import CombinationBox from "./components/CombinationBox";
import getCombination from "@/api/parts/getCombination";
import getRecommendedParts from "@/api/parts/getRecommendedParts";

import "./SearchCombinationPage.css";

const SearchCombinationPage = () => {
  const [combinations, setCombinations] = useState([]);
  const [recommendedCombination, setRecommendedCombination] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const ITEMS_PER_PAGE = 5;

  const [selectedItems, setSelectedItems] = useState({
    CPU: [],
    GPU: [],
    MB: [],
    RAM: [],
    SSD: [],
    HDD: []
  });

  useEffect(() => {
    const fetchCombinations = async () => {
      try {
        if (Object.values(selectedItems).some(items => items.length > 0)) {
          const data = await getCombination({
            cpuId: selectedItems.CPU[0]?.id,
            gpuId: selectedItems.GPU[0]?.id,
            mbId: selectedItems.MB[0]?.id,
            ramId: selectedItems.RAM[0]?.id,
            ssdId: selectedItems.SSD[0]?.id,
            hddId: selectedItems.HDD[0]?.id,
          });

          if (data && Array.isArray(data)) {
            setCombinations(data);
          }
        } else {
          setCombinations([]);
        }
      } catch (error) {
        console.error("조합 정보를 불러오는 중 오류 발생:", error);
      }
    };

    fetchCombinations();
  }, [selectedItems]);

  useEffect(() => {
    const fetchRecommendedParts = async () => {
      try {
        const data = await getRecommendedParts();
        setRecommendedCombination(data.combination);
        setCurrentPage(1); // 초기 페이지 설정
      } catch (error) {
        console.error("추천 부품 정보를 불러오는 중 오류 발생:", error);
      }
    };
    fetchRecommendedParts();
  }, []);

  // 현재 페이지의 추천 조합 계산
  const indexOfLastItem = currentPage * ITEMS_PER_PAGE;
  const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE;
  const currentRecommendations = recommendedCombination.slice(indexOfFirstItem, indexOfLastItem);
  const totalPages = Math.ceil(recommendedCombination.length / ITEMS_PER_PAGE);

  // 검색된 조합을 위한 페이지네이션 계산
  const searchIndexOfLastItem = currentPage * ITEMS_PER_PAGE;
  const searchIndexOfFirstItem = searchIndexOfLastItem - ITEMS_PER_PAGE;
  const currentSearchCombinations = combinations.slice(searchIndexOfFirstItem, searchIndexOfLastItem);
  const searchTotalPages = Math.ceil(combinations.length / ITEMS_PER_PAGE);

  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  const getPageNumbers = (currentPage, totalPages) => {
    let pages = [];
    const maxVisible = 5;
    const halfVisible = Math.floor(maxVisible / 2);

    let start = Math.max(currentPage - halfVisible, 1);
    let end = Math.min(start + maxVisible - 1, totalPages);

    // 끝부분에서 시작점 조정
    if (end === totalPages) {
      start = Math.max(end - maxVisible + 1, 1);
    }

    // 시작점에서 끝점 조정
    if (start === 1) {
      end = Math.min(maxVisible, totalPages);
    }

    for (let i = start; i <= end; i++) {
      pages.push(i);
    }

    return pages;
  };

  return (
    <div className="search-combination-page">
      <aside className="filter-section">
        <CombinationFilter
          selectedItems={selectedItems}
          setSelectedItems={setSelectedItems}
        />
      </aside>
      <main className="content-section">
        {Object.values(selectedItems).every(arr => arr.length === 0) && 
         recommendedCombination.length > 0 && (
          <>
            <div className="recommendations-grid">
              {currentRecommendations.map((combination, index) => (
                <CombinationBox
                  key={indexOfFirstItem + index}
                  title={`최신 조합 ${indexOfFirstItem + index + 1}`}
                  combination={combination}
                />
              ))}
            </div>
            <div className="pagination">
              {currentPage > 1 && (
                <button
                  className="page-button"
                  onClick={() => handlePageChange(currentPage - 1)}
                >
                  &lt;
                </button>
              )}
              {getPageNumbers(currentPage, totalPages).map((pageNumber) => (
                <button
                  key={pageNumber}
                  onClick={() => handlePageChange(pageNumber)}
                  className={`page-button ${currentPage === pageNumber ? 'active' : ''}`}
                >
                  {pageNumber}
                </button>
              ))}
              {currentPage < totalPages && (
                <button
                  className="page-button"
                  onClick={() => handlePageChange(currentPage + 1)}
                >
                  &gt;
                </button>
              )}
            </div>
          </>
        )}
        {combinations.length > 0 ? (
          <>
            <div className="combinations-grid">
              {currentSearchCombinations.map((combination, index) => (
                <CombinationBox
                  key={searchIndexOfFirstItem + index}
                  title={`검색된 조합 ${searchIndexOfFirstItem + index + 1}`}
                  combination={combination}
                />
              ))}
            </div>
            <div className="pagination">
              {currentPage > 1 && (
                <button
                  className="page-button"
                  onClick={() => handlePageChange(currentPage - 1)}
                >
                  &lt;
                </button>
              )}
              {getPageNumbers(currentPage, searchTotalPages).map((pageNumber) => (
                <button
                  key={pageNumber}
                  onClick={() => handlePageChange(pageNumber)}
                  className={`page-button ${currentPage === pageNumber ? 'active' : ''}`}
                >
                  {pageNumber}
                </button>
              ))}
              {currentPage < searchTotalPages && (
                <button
                  className="page-button"
                  onClick={() => handlePageChange(currentPage + 1)}
                >
                  &gt;
                </button>
              )}
            </div>
          </>
        ) : (
          Object.values(selectedItems).some(arr => arr.length > 0) && (
            <div className="no-combinations">
              <div className="no-combinations-box">
                <h2>검색된 조합이 없습니다</h2>
                <p>다른 부품을 선택해보세요</p>
              </div>
            </div>
          )
        )}
      </main>
    </div>
  );
};

export default SearchCombinationPage;