Merge pull request #435 from LikeLion-at-DGU/dev

Fix: 에러픽스
LikeLion-at-DGU · Aug 6, 2024 · 29c6b48 · 29c6b48
2 parents 09ed20d + 4c17b6d
commit 29c6b48
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/src/pages/SubCategoryPage/SubCategoryPage.jsx b/src/pages/SubCategoryPage/SubCategoryPage.jsx
@@ -4,31 +4,37 @@ import { getSearchContent } from "@/apis/search";
 import { Header } from "../../components/common/Header/Header";
 import { useParams, useNavigate } from "react-router-dom";
 import { SearchResultStar } from "@/components/MyStar/SearchResultStar";
+import { useRecoilState } from "recoil";
+import { isLoading } from "@/stores/loading";
+import { Loading } from "../Loading/Loading";
+
 const SubCategoryPage = () => {
   const { section, subCategory } = useParams();
-  console.log("useParams로 불러온 get할 data", subCategory);
+  const [loadingStatus, setLoadingStatus] = useRecoilState(isLoading);
   const [searchData, setSearchData] = useState(null);
   const navigate = useNavigate();
+
   useEffect(() => {
     const fetchData = async () => {
       try {
+        setLoadingStatus(true);
         const res = await getSearchContent(subCategory);
-        console.log("서브카테고리P에서 불러온 값", res.data);
         setSearchData(res.data);
       } catch (err) {
         console.error("Error:", err);
+      } finally {
+        setLoadingStatus(false);
       }
     };
 
     fetchData();
-  }, [subCategory]);
+  }, [subCategory, setLoadingStatus]);
 
-  if (!searchData) {
-    return <div>Loading...</div>;
+  if (loadingStatus) {
+    return <Loading />;
   }
 
   const { 인물 } = searchData;
-  console.log(인물);
 
   const moveOnSearch = () => {
     navigate("/search");
@@ -37,13 +43,14 @@ const SubCategoryPage = () => {
   const moveOnStarP = (id) => {
     navigate(`/star/${id}`);
   };
+
   return (
     <S.Layout>
       <Header $margin={"1rem 0 0 0"} $padding={"1rem 1rem 0 1rem"}>
-        <div onClick={moveOnSearch}> {`${section} / ${subCategory}`}</div>
+        <div onClick={moveOnSearch}>{`${section} / ${subCategory}`}</div>
       </Header>
       <S.Container>
-        {인물 ? (
+        {인물 && 인물.length > 0 ? (
           <S.CategoryWrapper>
             {인물.map((item) => (
               <SearchResultStar
@@ -58,7 +65,7 @@ const SubCategoryPage = () => {
             ))}
           </S.CategoryWrapper>
         ) : (
-          <div>Loading...</div>
+          <div>No results found.</div>
         )}
       </S.Container>
     </S.Layout>