Merge pull request #51 from KNU-AEYE/38-search-page-too-slow

38 search page too slow

aeye/app/(nav)/home/SearchResult.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
-import { searchQueryState } from "@/app/recoil-states";
+import { searchQueryState, selectedTagsState } from "@/app/recoil-states";
 import fetchWithInterception from "@/app/fetchWrapper";
 import Vidpane from "@/app/components/Vidpane";
 import { Grid, Typography, Pagination, Container } from "@mui/material";
@@ -37,13 +37,18 @@ const SearchResult: React.FC = () => {
   const searchQuery = useRecoilValue(searchQueryState);
   const [results, setResults] = useState<Vidarr | null>(null);
   const [currentPage, setCurrentPage] = useState<number>(0);
+  const selectedTags = useRecoilValue(selectedTagsState);
+  const cityPlaceholder = "";
+  const districtPlaceholder = "";
 
   useEffect(() => {
     let searchTimeout: NodeJS.Timeout;
 
     const fetchResults = () => {
       fetchWithInterception(
-        `https://api.a-eye.live/video/search?keyword=${searchQuery}&page=${currentPage}&size=${PAGE_SIZE}`,
+        `https://api.a-eye.live/video/search/v2?keyword=${searchQuery}&city=${cityPlaceholder}&district=${districtPlaceholder}&tag=${
+          selectedTags === undefined ? "" : selectedTags
+        }&page=${currentPage}&size=${PAGE_SIZE}`,
         { method: "GET" }
       )
         .then((response) => response.json())
@@ -55,7 +60,7 @@ const SearchResult: React.FC = () => {
       searchTimeout = setTimeout(fetchResults, FETCH_TIMEOUT);
     }
     return () => clearTimeout(searchTimeout);
-  }, [searchQuery, currentPage]);
+  }, [searchQuery, currentPage, selectedTags]);
 
   const handlePaginationChange = (
     event: React.ChangeEvent<unknown>,

aeye/app/(nav)/home/SearchTagList.tsx

@@ -0,0 +1,33 @@
+import { Chip, Stack } from "@mui/material";
+import { selectedTagsState } from "@/app/recoil-states";
+import { useRecoilState } from "recoil";
+
+const tags = ["새 객체", "넘어짐", "화재", "자동차", "도로"];
+
+export default function SearchTagList() {
+  const [selectedTags, setSelectedTags] = useRecoilState(selectedTagsState);
+
+  const handleChipClick = (tag: string) => {
+    setSelectedTags((prevSelectedTags) => {
+      if (prevSelectedTags.includes(tag)) {
+        return prevSelectedTags.filter((t) => t !== tag);
+      } else {
+        return [...prevSelectedTags, tag];
+      }
+    });
+  };
+  return (
+    <Stack flexDirection="row" mb="15px">
+      {tags.map((tag, index) => (
+        <Chip
+          label={tag}
+          key={index}
+          variant={selectedTags.includes(tag) ? "filled" : "outlined"}
+          sx={{ margin: "0.5vh" }}
+          color={selectedTags.includes(tag) ? "primary" : "default"}
+          onClick={() => handleChipClick(tag)}
+        />
+      ))}
+    </Stack>
+  );
+}

aeye/app/(nav)/home/page.tsx

@@ -2,11 +2,13 @@
 
 import SearchBar from "./SearchBar";
 import SearchResult from "./SearchResult";
+import SearchTagList from "./SearchTagList";
 
 export default function Home() {
   return (
     <>
       <SearchBar />
+      <SearchTagList />
       <SearchResult />
     </>
   );

aeye/app/recoil-states.ts

@@ -10,4 +10,9 @@ const memberState = atom<Member | null>({
   default: null,
 });
 
-export { searchQueryState, memberState };
+const selectedTagsState = atom<string[]>({
+  key: "selectedTagsState",
+  default: [],
+});
+
+export { searchQueryState, memberState, selectedTagsState };