Feature/search page again

src/components/SearchBar/index.tsx

@@ -5,22 +5,23 @@ import SearchIcon from '@mui/icons-material/Search';
 
 import CategoryChips from '../CategoryChips';
 import { Item } from '../../models/item';
-import { getSearchAPICall } from '../../hooks/api/search/search';
-import { Categories, Seasons } from '../../data/enumLists';
+import { Categories, Seasons, Status } from '../../data/enumLists';
 
 interface SearchBarProps {
   searchKeyWord: string;
   categorySelected: string[];
   seasonSelected: string[];
+  filterSelected: string[];
+  handleSearch?: (a: string) => void;
 }
 
 export default function SearchBar(props: SearchBarProps) {
   const navigate = useNavigate();
-  const emptyStrArray: string[] = [];
-  const [searchKeyWord, setSearchKeyWord] = useState('');
-  const [categorySelected, setCategorySelected] = useState(emptyStrArray);
-  const [seasonSelected, setSeasonSelected] = useState(emptyStrArray);
-  const [filterSelected, setFilterSelected] = useState(emptyStrArray);
+  // const emptyStrArray: string[] = [];
+  const [searchKeyWord, setSearchKeyWord] = useState(props.searchKeyWord);
+  const [categorySelected, setCategorySelected] = useState(props.categorySelected);
+  const [seasonSelected, setSeasonSelected] = useState(props.seasonSelected);
+  const [filterSelected, setFilterSelected] = useState(props.filterSelected);
 
   const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     setSearchKeyWord(event.target.value);
@@ -44,7 +45,7 @@ export default function SearchBar(props: SearchBarProps) {
 
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
-    const keyWordQueryString = `keyword=${encodeURIComponent(searchKeyWord)}`;
+    const keyWordQueryString = `text=${encodeURIComponent(searchKeyWord)}`;
     const categoryQueryString = categorySelected
       .map((category) => `category=${encodeURIComponent(category)}`)
       .join('&');
@@ -53,10 +54,9 @@ export default function SearchBar(props: SearchBarProps) {
     const queryString = [keyWordQueryString, categoryQueryString, seasonQueryString, filterQueryString]
       .filter((query) => !!query)
       .join('&');
-    const url = `/search/?${queryString}`;
-    getSearchAPICall(url).then(() => {
-      navigate(url);
-    });
+    const url = `/search?${queryString}`;
+    navigate(url);
+    if (props.handleSearch) props.handleSearch(url);
   };
 
   const initCategories = Categories.map((value) => {
@@ -75,7 +75,14 @@ export default function SearchBar(props: SearchBarProps) {
     const item: Item = { label: value, isSelected: false };
     return item;
   });
-  const initFilter: Item[] = [{ label: '대여 가능', isSelected: false }];
+  const initFilter = Status.map((value) => {
+    if (props.filterSelected.includes(value)) {
+      const item: Item = { label: value, isSelected: true };
+      return item;
+    }
+    const item: Item = { label: value, isSelected: false };
+    return item;
+  });
 
   return (
     <Box display={'flex'} flexDirection={'column'} alignItems={'center'}>

src/data/enumLists.ts

@@ -2,3 +2,4 @@ import { Season, Category } from '../models/enum';
 
 export const Seasons = Object.values(Season);
 export const Categories = Object.values(Category);
+export const Status = ['대여가능', '대여중', '대여불가능'];

src/hooks/api/search/search.ts

@@ -3,12 +3,30 @@ import axios, { AxiosError } from 'axios';
 
 import { SEARCH_MESSAGE } from '../../../data/messages';
 
+interface Owner {
+  id?: number;
+  nickname?: string;
+  location?: string;
+}
+interface SearchClothesRes {
+  id?: number;
+  closetId: number;
+  category?: string;
+  season?: string;
+  status: string;
+  isOpen: boolean;
+  name: string;
+  tag?: string;
+  image?: string;
+  owner: Owner;
+  isWished: boolean;
+}
+
 export async function getSearchAPICall(url: string) {
   try {
-    const response = await axios.get(`${process.env.REACT_APP_API_URL}${url}`);
+    const response = await axios.get<SearchClothesRes[]>(`${process.env.REACT_APP_API_URL}${url}`);
     if (response.status === 200) {
-      const { searchResult } = response.data;
-      sessionStorage.setItem('searchResult', searchResult);
+      return response.data;
     }
   } catch (err) {
     if (err instanceof AxiosError) {
@@ -17,4 +35,5 @@ export async function getSearchAPICall(url: string) {
       enqueueSnackbar(SEARCH_MESSAGE.SEARCH_FAIL, { variant: 'error' });
     }
   }
+  return null;
 }

src/pages/Main/index.tsx

@@ -33,7 +33,7 @@ export function MainPage() {
             스타일을 공유하고 다른 사람의 스타일을 빌려보세요
           </Typography>
         </Box>
-        <SearchBar searchKeyWord={''} categorySelected={[]} seasonSelected={[]} />
+        <SearchBar searchKeyWord={''} categorySelected={[]} seasonSelected={[]} filterSelected={[]} />
       </Box>
       {!!applies && applies.length > 0 && (
         <Box sx={{ mt: 5, mb: 10 }} display={'flex'} flexDirection={'column'} alignItems={'center'}>

src/pages/Search/index.tsx

@@ -0,0 +1,93 @@
+import { useSearchParams } from 'react-router-dom';
+import { useState } from 'react';
+import { Box, Typography } from '@mui/material';
+
+import { getSearchAPICall } from '../../hooks/api/search/search';
+import SearchBar from '../../components/SearchBar';
+import ClothesPreviewCard from '../../components/ClothesPreviewCard';
+
+interface Owner {
+  id?: number;
+  nickname?: string;
+  location?: string;
+}
+interface SearchClothesRes {
+  id?: number;
+  closetId: number;
+  category?: string;
+  season?: string;
+  status: string;
+  isOpen: boolean;
+  name: string;
+  tag?: string;
+  image?: string;
+  owner: Owner;
+  isWished: boolean;
+}
+
+export function SearchPage() {
+  const [searchParams] = useSearchParams();
+  // const location = useLocation();
+  // const queryString = location.search;
+  // const url = `/search${queryString}`;
+
+  const searchKeyWord = searchParams.get('text') || '';
+  const categorySelected = searchParams.getAll('category');
+  const seasonSelected = searchParams.getAll('season');
+  const filterSelected = searchParams.getAll('status');
+
+  const defaultResult: JSX.Element = (
+    <Typography width="100%" textAlign="center" sx={{ mt: '50px', color: 'gray', fontSize: 20 }}>
+      검색 결과가 없어요
+    </Typography>
+  );
+
+  const emptySearchArray: SearchClothesRes[] = [];
+  const [searchedClothes, setSearchedClothes] = useState(emptySearchArray);
+  const handleSearch = async (query: string) => {
+    try {
+      const result = await getSearchAPICall(query);
+      if (result) {
+        setSearchedClothes(result);
+      } else setSearchedClothes(emptySearchArray);
+    } catch (error) {
+      //
+    }
+  };
+  // handleSearch(url);
+
+  const clothesCards = searchedClothes
+    ? searchedClothes.map((clothes: SearchClothesRes) => {
+        const { id, name, status, owner, isWished } = clothes;
+        return (
+          <Box sx={{ margin: 3, display: 'inline-block' }}>
+            <ClothesPreviewCard
+              key={id}
+              clothesId={id || 0}
+              clothesname={name}
+              imgsrc={''}
+              status={status}
+              userid={owner.id || 0}
+              username={'닉네임'}
+              isWished={isWished}
+            />
+          </Box>
+        );
+      })
+    : [];
+
+  return (
+    <>
+      <Box sx={{ paddingTop: '24px', backgroundColor: '#E9E9E9' }}>
+        <SearchBar
+          searchKeyWord={searchKeyWord}
+          categorySelected={categorySelected}
+          seasonSelected={seasonSelected}
+          filterSelected={filterSelected}
+          handleSearch={handleSearch}
+        />
+      </Box>
+      {clothesCards && clothesCards.length > 0 ? clothesCards : defaultResult}
+    </>
+  );
+}

src/route/index.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes } from 'react-router-dom';
 
+import { SearchPage } from '../pages/Search';
 import { RegisterPage } from '../pages/Register';
 import { ProfilePage } from '../pages/Profile';
 import MyPage from '../pages/Mypage';
@@ -20,6 +21,7 @@ export function RouteComponent() {
       <Route path="/clothes/:id" element={<ClothesPage />} />
       <Route path="/profile" element={<ProfilePage />} />
       <Route path="/mypage" element={<MyPage />} />
+      <Route path="/search" element={<SearchPage />} />
     </Routes>
   );
 }