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) => (