diff --git a/src/api/booksnap.api.ts b/src/api/booksnap.api.ts index 3938b1e..140c6f1 100644 --- a/src/api/booksnap.api.ts +++ b/src/api/booksnap.api.ts @@ -128,21 +128,6 @@ export const searchReview = async (bookName: string) => { } }; -// 책 검색 기록 저장 -export const postSearchHistory = async (searchType: string, searchWord: string) => { - try { - const response = await instance.post(`/api/search-history`, { - searchType: searchType, - searchWord: searchWord, - }); - if (response.status === 200) { - return response.data; - } - } catch (err) { - console.log(err); - } -}; - // 최근 검색어 불러오기 export const getRecentSearch = async (searchtype: string, page: number, size: number) => { try { diff --git a/src/components/Booksnap/RecentSearch.tsx b/src/components/Booksnap/RecentSearch.tsx index bf0697a..ae0dc22 100644 --- a/src/components/Booksnap/RecentSearch.tsx +++ b/src/components/Booksnap/RecentSearch.tsx @@ -3,11 +3,12 @@ import { IoTrashSharp } from 'react-icons/io5'; interface RecentSearchProps { name: string; + onClick: (book: string) => void; } -const RecentSearch = ({ name }: RecentSearchProps) => { +const RecentSearch = ({ name, onClick }: RecentSearchProps) => { return ( -
+
onClick(name)}>

{name}

diff --git a/src/components/Header/BookSearchHeader.tsx b/src/components/Header/BookSearchHeader.tsx index c289135..9b02bf4 100644 --- a/src/components/Header/BookSearchHeader.tsx +++ b/src/components/Header/BookSearchHeader.tsx @@ -1,28 +1,35 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import Arrow from '../../../public/icons/menu-bar/ArrowLeft.svg?react'; - import { useNavigate } from 'react-router-dom'; import SearchBar from '../Zip/SearchBar'; -import { postSearchHistory } from '../../api/booksnap.api'; -const BookSearchHeader = () => { - const [searchWord, setSearchWord] = useState(''); +interface BookSearchHeaderProps { + query?: string; +} + +const BookSearchHeader = ({ query }: BookSearchHeaderProps) => { + const [searchWord, setSearchWord] = useState(query || ''); const nav = useNavigate(); + useEffect(() => { + if (query !== undefined) { + setSearchWord(query); + } + }, [query]); + const handleSearch = () => { nav(`/booksnap?query=${searchWord}`); - postSearchHistory('booktitle', searchWord); }; return (
- nav(-1)} /> + nav('/booksnap')} /> + />
); }; diff --git a/src/pages/Booksnap/BookSearch.tsx b/src/pages/Booksnap/BookSearch.tsx index 7b2b6e3..a2be2e5 100644 --- a/src/pages/Booksnap/BookSearch.tsx +++ b/src/pages/Booksnap/BookSearch.tsx @@ -12,6 +12,7 @@ interface RecentType { const BookSearch = () => { const bookname = ['구원의 날', '지구에서 한아뿐', '사이키쿠스오']; const [recent, setRecent] = useState([]); + const [word, setWord] = useState(''); useEffect(() => { getRecentSearch('booktitle', 1, 10).then((data) => { @@ -19,10 +20,14 @@ const BookSearch = () => { }); }, []); + const handleClick = (bookName: string) => { + setWord(bookName); + }; + return (
{/* 헤더 */} - +
{/* 인기 검색어 */}
@@ -38,7 +43,7 @@ const BookSearch = () => {

최근 검색

{recent.map((book, index) => ( - + handleClick(book.searchWord)} /> ))}
diff --git a/src/pages/Booksnap/BookSnap.tsx b/src/pages/Booksnap/BookSnap.tsx index 5e40d4d..89e258c 100644 --- a/src/pages/Booksnap/BookSnap.tsx +++ b/src/pages/Booksnap/BookSnap.tsx @@ -9,27 +9,19 @@ import Toast from '../../components/Common/Toast'; import BooksnapHeader from '../../components/Header/BooksnapHeader'; import { useScrollRef } from '../../components/ScrollContext'; import { useSearchParams } from 'react-router-dom'; +import BookSearchHeader from '../../components/Header/BookSearchHeader'; const BookSnap = () => { const [filter, setFilter] = useState('createdAt'); const [review, setReview] = useState([]); const [page, setPage] = useState(1); - const [isLast, setIsLast] = useState(false); - const [isBottom, setIsBottom] = useState(false); - const isLastRef = useRef(false); + const [isLast, setIsLast] = useState(false); const [isLoading, setIsLoading] = useState(false); + const isLastRef = useRef(false); const mainRef = useScrollRef(); const [searchParams] = useSearchParams(); const query = searchParams.get('query'); - useEffect(() => { - if (query) { - searchReview(query).then((data) => { - setReview(data.booksnapPreview); - }); - } - }, [query]); - // 리뷰 목록 받아오기 const getReviews = async () => { setIsLoading(true); @@ -37,7 +29,6 @@ const BookSnap = () => { const data = await getReview(filter, page); setReview((prev) => (page === 1 ? data.data.booksnapPreview : [...prev, ...data.data.booksnapPreview])); setIsLast(data.data.last); - setIsBottom(false); } catch (error) { console.error('리뷰를 불러오는 중 에러 발생:', error); } finally { @@ -45,12 +36,22 @@ const BookSnap = () => { } }; - // filter가 변경될 때 상태 초기화 및 getReviews 호출 + // 검색어 있을 때는 검색 API 호출 + useEffect(() => { + setReview([]); + if (query) { + searchReview(query).then((data) => { + setReview(data.booksnapPreview); + }); + } else { + getReviews(); + } + }, [query]); + useEffect(() => { if (query) return; setReview([]); setIsLast(false); - setIsBottom(false); if (page !== 1) { setPage(1); // page가 1이 아니면 1로 초기화 (getReviews는 page가 바뀔 때 호출됨) @@ -59,28 +60,26 @@ const BookSnap = () => { } }, [filter]); - // page가 변경될 때만 getReviews 호출 + // page가 바뀌면 getReviews 호출 useEffect(() => { if (query) return; - - if (page !== 1 || review.length === 0) { - // 🔄 리뷰가 없거나 페이지가 1이 아닐 때만 호출 - getReviews(); - } + getReviews(); }, [page]); - // isLast 업데이트 시 참조 업데이트 + // isLast 상태를 ref에도 반영 useEffect(() => { isLastRef.current = isLast; }, [isLast]); + // 스크롤 이벤트 등록 useEffect(() => { const handleScroll = () => { if (!mainRef.current) return; const { scrollTop, clientHeight, scrollHeight } = mainRef.current; - if (scrollTop + clientHeight >= scrollHeight - 100 && !isBottom && !isLastRef.current) { - setIsBottom(true); + const nearBottom = scrollTop + clientHeight >= scrollHeight - 100; + + if (nearBottom && !isLastRef.current && !isLoading) { setPage((prev) => prev + 1); } }; @@ -93,9 +92,9 @@ const BookSnap = () => { return () => { el?.removeEventListener('scroll', handleScroll); }; - }, [mainRef, isBottom]); + }, [mainRef, isLoading]); - if (isLoading) { + if (isLoading && review.length === 0) { return ; } @@ -106,9 +105,9 @@ const BookSnap = () => { return (
{/* 헤더 */} - -
- + {query ? : } +
+ {!query && }
{review.map((preview, index) => (