Fix: 필터링 해제 실패 이슈 해결(#63)

MotuS-Web · Oct 19, 2023 · 2e4b9b8 · 2e4b9b8
1 parent be1f733
commit 2e4b9b8
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 32 deletions.
diff --git a/src/components/button/FilterButtons.jsx b/src/components/button/FilterButtons.jsx
@@ -64,21 +64,36 @@ const FilterButtons = ({ all, onChange }) => {
  const [poseList, setPoseList] = useState(["전체", "선", "앉은", "누운"]);
 
  const handleCategoryClick = (category) => {
- setSelectedCategory(category);
- onChange({ category, pose: selectedPose });
- };
+ if (selectedCategory === category) {
+ setSelectedCategory("전체");
+ onChange({ category: "전체", pose: selectedPose });
+ } else {
+ setSelectedCategory(category);
+ onChange({ category, pose: selectedPose });
+ }
+};
+
+const handlePoseClick = (pose) => {
+ if (selectedPose === pose) {
+ setSelectedPose("전체");
+ onChange({ category: selectedCategory, pose: "전체" });
+ } else {
+ setSelectedPose(pose);
+ onChange({ category: selectedCategory, pose });
+ }
+};
 
- const handlePoseClick = (pose) => {
- setSelectedPose(pose);
- onChange({ category: selectedCategory, pose });
- };
 
  useEffect(() => {
  if (!all) {
  setCategoryList(categoryList.filter((item) => item !== "전체"));
  setPoseList(poseList.filter((item) => item !== "전체"));
+ } else {
+ if (!categoryList.includes("전체")) setCategoryList(["전체", ...categoryList]);
+ if (!poseList.includes("전체")) setPoseList(["전체", ...poseList]);
  }
- }, []);
+}, [all]);
+
 
  return (
  <Container>

diff --git a/src/components/pagnation/Pagination.jsx b/src/components/pagnation/Pagination.jsx
@@ -58,8 +58,8 @@ function Pagination({ totalItems, itemsPerPage, onChange, currentPage }) {
  onChange(selected);
  }
  };
-
- const pageCount = Math.ceil(totalItems / itemsPerPage);
+ console.log(totalItems, itemsPerPage);
+ const pageCount = Math.floor(totalItems / itemsPerPage) + 1;
 
  return (
  <PaginateContainer>

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -45,7 +45,21 @@ const MainPage = () => {
 
  const handlePageChange = async (pageNumber) => {
  setCurrentPage(pageNumber);
- const response = await getPrograms(pageNumber, ITEMS_PER_PAGE);
+
+ const englishCategory = convertToEnglishTag(
+ selectedFilters.category,
+ CATEGORY,
+ );
+ const englishPose = convertToEnglishTag(selectedFilters.pose, POSITION);
+
+ const response = await searchPrograms(
+ null,
+ englishCategory,
+ englishPose,
+ pageNumber,
+ ITEMS_PER_PAGE,
+ );
+
  if (response && response.dtoList) {
  setList(response.dtoList);
  }
@@ -92,7 +106,7 @@ const MainPage = () => {
  console.log("API totalCount:", response.total);
  }
  fetchCourses();
- }, [currentPage]);
+ }, []);
 
 
  function openModal(id) {
@@ -118,21 +132,25 @@ const MainPage = () => {
  }
 
  const handleFilterChange = async (filters) => {
+ setCurrentPage(1);
  setSelectedFilters(filters);
-
+ 
  const englishCategory = convertToEnglishTag(filters.category, CATEGORY);
  const englishPose = convertToEnglishTag(filters.pose, POSITION);
-
+ 
  const response = await searchPrograms(
  searchTerm,
  englishCategory,
  englishPose,
- currentPage,
+ 1,
  ITEMS_PER_PAGE,
  );
  if (response && response.dtoList) {
  setList(response.dtoList);
  }
+ if (response && response.total) { 
+ setTotalItems(response.total);
+ }
  };
 
  const filteredList = list.filter((courseItem) => {
@@ -146,12 +164,11 @@ const MainPage = () => {
  !searchTerm || courseItem.name.includes(searchTerm);
  return matchesCategory && matchesPose && matchesSearchTerm;
  });
- console.log(totalItems);
- console.log("totalItems:", totalItems, "ITEMS_PER_PAGE:", ITEMS_PER_PAGE);
+
  return (
  <PageContainer>
  <Header onSearch={handleSearch} />
- <FilterButtons onChange={handleFilterChange} />
+ <FilterButtons all onChange={handleFilterChange} />
  <ExerciseContainer>
  {course && (
  <ExerciseModal
@@ -164,20 +181,20 @@ const MainPage = () => {
  {...course}
  />
  )}
-  {list.map((courseItem) => {
-  const tags = [
-  convertToKoreanTag(courseItem.category),
-  convertToKoreanTag(courseItem.position),
-  ];
-  return (
-  <ExerciseCard
-  key={courseItem.id}
-  onClick={() => openModal(courseItem.id)}
-  tags={tags}
-  {...courseItem}
-  />
-  );
-  })}
+ {filteredList.map((courseItem) => {
+ const tags = [
+ convertToKoreanTag(courseItem.category),
+ convertToKoreanTag(courseItem.position),
+ ];
+ return (
+ <ExerciseCard
+ key={courseItem.id}
+ onClick={() => openModal(courseItem.id)}
+ tags={tags}
+ {...courseItem}
+ />
+ );
+ })}
  </ExerciseContainer>
  <Pagination
  totalItems={totalItems}