Feat/33 검색 api

App.tsx

@@ -1,12 +1,16 @@
-import * as React from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { useFonts } from "expo-font";
+import * as React from "react";
 
-import TabNavigation from "./src/components/navBar/TabNavigation";
-import OnboardingOverlay from "./src/components/libary/OnboardingOverlay";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import OnboardingOverlay from "./src/components/libary/OnboardingOverlay";
+import TabNavigation from "./src/components/navBar/TabNavigation";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 export default function App() {
+  const queryClient = new QueryClient();
+
   //처음 방문 시 온보딩 화면 실행
   const [showOnboarding, setShowOnboarding] = React.useState(false);
 
@@ -35,11 +39,13 @@ export default function App() {
   if (!fontsLoaded) return null;
 
   return (
-    <NavigationContainer>
-      <TabNavigation />
-      {showOnboarding && (
-        <OnboardingOverlay onDismiss={handleOnboardingDismiss} />
-      )}
-    </NavigationContainer>
+    <QueryClientProvider client={queryClient}>
+      <NavigationContainer>
+        <TabNavigation />
+        {showOnboarding && (
+          <OnboardingOverlay onDismiss={handleOnboardingDismiss} />
+        )}
+      </NavigationContainer>
+    </QueryClientProvider>
   );
 }

package.json

@@ -13,6 +13,7 @@
     "@react-navigation/bottom-tabs": "^6.6.0",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.10.0",
+    "@tanstack/react-query": "^5.64.2",
     "axios": "^1.7.9",
     "expo": "~51.0.24",
     "expo-camera": "~15.0.14",

src/api/book/deleteKeyword.ts

@@ -0,0 +1,7 @@
+import api from "..";
+
+//최근 검색어 삭제
+export const deleteKeyword = async (keywordId: number): Promise<string> => {
+  const response = await api.delete(`/api/v1/book/keyword/${keywordId}`);
+  return response.data;
+};

src/api/book/getBestSeller.ts

@@ -0,0 +1,22 @@
+import api from "..";
+import { RequestBestSeller } from "../../types/search/bestbook";
+import { ResponseBookSearchResult } from "../../types/search/search";
+
+// 베스트셀러 조회
+export const getBestSeller = async ({
+  category = 0,
+  size = 12,
+}: RequestBestSeller): Promise<ResponseBookSearchResult | undefined> => {
+  try {
+    const response = await api.get(`/api/v1/book/best-seller`, {
+      params: {
+        category,
+        size,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching best sellers:", error);
+    return undefined;
+  }
+};

src/api/book/getKeyword.ts

@@ -0,0 +1,15 @@
+import api from "..";
+import { ResponseResentSearch } from "../../types/search/resentSearch";
+
+//최근 검색어 조회
+export const getKeyword = async (): Promise<
+  ResponseResentSearch | undefined
+> => {
+  try {
+    const response = await api.get(`/api/v1/book/keyword`);
+    return response.data;
+  } catch (e) {
+    console.log(e);
+    return undefined;
+  }
+};

src/api/book/getSearch.ts

@@ -0,0 +1,15 @@
+import api from "..";
+import { ResponseBookSearchResult } from "../../types/search/search";
+
+// 검색 조회
+export const getSearch = async (
+  keyword: string
+): Promise<ResponseBookSearchResult | undefined> => {
+  try {
+    const response = await api.get(`api/v1/book/search?keyword=${keyword}`);
+    return response.data;
+  } catch (e) {
+    console.log(e);
+    return undefined;
+  }
+};

src/components/search/BestSellerBook.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Text, View, Image } from "react-native";
-import { BestBook } from "../../types/search/bestbook";
+import { Image, Text, View } from "react-native";
 import { styles } from "../../styles/search/BestSellerBookStyle";
+import { BestBook } from "../../types/search/bestbook";
 
 const BestSellerBook = ({ id, title, image, name }: BestBook) => {
   return (
@@ -10,7 +10,7 @@ const BestSellerBook = ({ id, title, image, name }: BestBook) => {
         <Text style={styles.id}>{id}</Text>
       </View>
       <View style={styles.imageContainer}>
-        <Image style={styles.image} source={image} />
+        <Image style={styles.image} source={{ uri: image }} />
       </View>
       <Text style={styles.title} numberOfLines={1} ellipsizeMode="tail">
         {title}

src/components/search/BookCollection.tsx

@@ -1,25 +1,28 @@
 import { ScrollView, View } from "react-native";
-import BestSellerBook from "./BestSellerBook";
-import { dummyList } from "../../assets/data/dummyBestBookList";
+import { useBestSeller } from "../../hooks/book/useBestSeller";
 import { styles } from "../../styles/search/BestSellerStyle";
+import BestSellerBook from "./BestSellerBook";
 
 const BookCollection = () => {
+  const { data } = useBestSeller({});
+  const bestSellerList = data.item;
+
   // 3*4 배열을 만들기 위해 3개씩 푸시함.
   const groupedBooks = [];
-  for (let i = 0; i < dummyList.length; i += 3) {
-    groupedBooks.push(dummyList.slice(i, i + 3));
+  for (let i = 0; i < bestSellerList.length; i += 3) {
+    groupedBooks.push(bestSellerList.slice(i, i + 3));
   }
   return (
     <ScrollView style={styles.bestSellerContainer}>
-      {groupedBooks.map((group, index) => (
-        <View key={index} style={styles.row}>
-          {group.map((book) => (
+      {groupedBooks.map((group, groupIndex) => (
+        <View key={groupIndex} style={styles.row}>
+          {group.map((book, index) => (
             <BestSellerBook
-              key={book.id}
-              id={book.id}
-              image={book.image}
+              key={index}
+              id={groupIndex * group.length + index + 1}
+              image={book.cover}
               title={book.title}
-              name={book.name}
+              name={book.title}
             />
           ))}
         </View>

src/components/search/RecentSearch.tsx

@@ -1,16 +1,36 @@
-import React, { useState } from "react";
-import { View, Text, ScrollView } from "react-native";
+import { useFocusEffect } from "@react-navigation/native";
+import React, { useCallback } from "react";
+import { ScrollView, Text, View } from "react-native";
 import { RecentSearchText } from "../../constans/search";
+import { useDeleteKeyword, useGetKeyword } from "../../hooks/book/useKeyword";
 import { styles } from "../../styles/search/RecentSearchStyle";
-import { dummyRecentSearchList } from "../../assets/data/dummyRecentSearchList";
 import RecentSearchCard from "./RecentSearchCard";
 
 const RecentSearch = () => {
-  const [searchList, setSearchList] = useState(dummyRecentSearchList);
+  const { data, refetch } = useGetKeyword();
+  const searchList = data.information;
 
-  // 같은 이름이 있을 경우 delete함수가 안 먹히는데 이는 어처피 api호출로 해결될 문제로 보임.
-  const handleDeleteCard = (text: string) => {
-    setSearchList(searchList.filter((item) => item !== text));
+  const { mutate } = useDeleteKeyword();
+
+  useFocusEffect(
+    useCallback(() => {
+      refetch();
+    }, [])
+  );
+
+  const handleDeleteKeyword = (keywordId: number) => {
+    mutate(
+      { keywordId },
+      {
+        onSuccess: (data) => {
+          console.log("Success");
+          refetch();
+        },
+        onError: (error) => {
+          console.log("Error", error.message);
+        },
+      }
+    );
   };
 
   return (
@@ -23,9 +43,9 @@ const RecentSearch = () => {
       >
         {searchList.map((search) => (
           <RecentSearchCard
-            key={search}
-            text={search}
-            onDelete={handleDeleteCard}
+            key={search.keywordId}
+            text={search.content}
+            onDelete={() => handleDeleteKeyword(search.keywordId)}
           />
         ))}
       </ScrollView>

src/components/search/ResultBookCard.tsx

@@ -1,6 +1,6 @@
-import { View, Image, Text } from "react-native";
-import { ResultBookProp } from "../../types/search";
+import { Image, Text, View } from "react-native";
 import { styles } from "../../styles/search/ResultBookCardStyle";
+import { ResultBookProp } from "../../types/search";
 const ResultBookCard = ({
   image,
   title,
@@ -9,7 +9,7 @@ const ResultBookCard = ({
 }: ResultBookProp) => {
   return (
     <View style={styles.container}>
-      <Image style={styles.image} source={image} />
+      <Image style={styles.image} source={{ uri: image }} />
       <View style={styles.cardConatiner}>
         <Text style={styles.title} ellipsizeMode="tail">
           {title}

src/hooks/book/useBestSeller.ts

@@ -0,0 +1,17 @@
+import {
+  useSuspenseQuery,
+  UseSuspenseQueryResult,
+} from "@tanstack/react-query";
+import { ResponseBookSearchResult } from "../../types/search/bestbook";
+import { getBestSeller } from "./../../api/book/getBestSeller";
+
+// 베스트 셀러 조회
+export function useBestSeller({
+  category = 0,
+  size = 12,
+}): UseSuspenseQueryResult<ResponseBookSearchResult, Error> {
+  return useSuspenseQuery({
+    queryKey: ["GetBestSeller"],
+    queryFn: () => getBestSeller({ category, size }),
+  });
+}

src/hooks/book/useKeyword.ts

@@ -0,0 +1,26 @@
+import {
+  useMutation,
+  useSuspenseQuery,
+  UseSuspenseQueryResult,
+} from "@tanstack/react-query";
+import { deleteKeyword } from "../../api/book/deleteKeyword";
+import { getKeyword } from "../../api/book/getKeyword";
+import { ResponseResentSearch } from "../../types/search/resentSearch";
+
+//최근 검색어 조회
+export function useGetKeyword(): UseSuspenseQueryResult<
+  ResponseResentSearch,
+  Error
+> {
+  return useSuspenseQuery({
+    queryKey: ["GetResentKeyword"],
+    queryFn: () => getKeyword(),
+  });
+}
+
+// 최근 검색어 삭제
+export function useDeleteKeyword() {
+  return useMutation<{}, Error, { keywordId: number }>({
+    mutationFn: ({ keywordId }) => deleteKeyword(keywordId),
+  });
+}

src/hooks/book/useSearch.ts

@@ -0,0 +1,16 @@
+import {
+  useSuspenseQuery,
+  UseSuspenseQueryResult,
+} from "@tanstack/react-query";
+import { getSearch } from "../../api/book/getSearch";
+import { ResponseBookSearchResult } from "../../types/search/search";
+
+//최근 검색어 조회
+export function useSearch(
+  keyword: string
+): UseSuspenseQueryResult<ResponseBookSearchResult, Error> {
+  return useSuspenseQuery({
+    queryKey: ["GetSearch"],
+    queryFn: () => getSearch(keyword),
+  });
+}

src/pages/searchPage/SearchResultPage.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { ScrollView, View } from "react-native";
-import { dummyList } from "../../assets/data/dummyBestBookList";
 import ResultBookCard from "../../components/search/ResultBookCard";
 import SearchHeader from "../../components/search/SearchHeader";
+import { useSearch } from "../../hooks/book/useSearch";
 import { styles } from "../../styles/search/SearchResultPageStyle";
 import { BestSellerPageRouteProp } from "../../types/navigation/navigation";
 
@@ -12,19 +12,20 @@ type Props = {
 
 const SearchResultPage: React.FC<Props> = ({ route }) => {
   const { query } = route.params;
-
+  const { data } = useSearch(query);
+  const searchList = data.item;
   return (
     <View style={styles.container}>
       <SearchHeader search={query} />
       <View style={styles.separator} />
       <ScrollView style={styles.cardContainer}>
-        {dummyList.map((book) => (
+        {searchList.map((book, index) => (
           <ResultBookCard
-            key={book.id}
-            image={book.image}
+            key={index}
+            image={book.cover}
             title={book.title}
-            artist={book.name}
-            publisher={book.name}
+            artist={book.author}
+            publisher={book.publisher}
           />
         ))}
       </ScrollView>