deploy

src/api/books/useGetBooksInfoSearchUrl.ts

@@ -19,6 +19,7 @@ export const useGetBooksInfoSearchUrl = () => {
   });
   const [query, page, sort, category] =
     useParseUrlQueryString(searchUrlQueryKeys);
+  const [isFetched, setIsFetched] = useState(false);
 
   const { request } = useApi("get", "books/info/search", {
     query,
@@ -59,6 +60,7 @@ export const useGetBooksInfoSearchUrl = () => {
     );
     const { totalPages } = response.data.meta;
     const categoryIndex = categories.findIndex(i => i.name === category);
+    setIsFetched(true);
     setSearchResult({
       bookList: book,
       categoryList: categories,
@@ -73,5 +75,6 @@ export const useGetBooksInfoSearchUrl = () => {
 
   return {
     ...searchResult,
+    isFetched,
   };
 };

src/asset/css/reset.css

@@ -136,7 +136,6 @@ a {
   color: #2e363e;
   text-decoration: none;
 }
-
 body {
   font-family: "Noto Sans KR", sans-serif;
   font-stretch: normal;
@@ -147,6 +146,17 @@ body {
   white-space: nowrap;
 }
 
+button {
+  color: #2d2d2d;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+select {
+  -webkit-appearance: none;
+  appearance: none;
+  color: #2d2d2d;
+}
 /* styleguide CSS */
 
 .color-81 {

src/component/book/BookDetail.tsx

@@ -10,7 +10,6 @@ import Like from "~/component/book/like/Like";
 import TagWrapper from "~/component/book/tag/TagWrapper";
 import "~/asset/css/BookDetail.css";
 import { Book } from "~/type";
-import { Helmet } from "react-helmet-async";
 import HelmetComponent from "../utils/HelmetComponent";
 
 const callsignToNumbers = (callSign: string) =>
@@ -29,10 +28,17 @@ const compareCallsign = (a: Book, b: Book) => {
 const BookDetail = () => {
   const id = useParams().id || "";
   const myRef = useRef<HTMLDivElement>(null);
+  const recentScrollPosition = useRef(0);
   const location = useLocation();
-  useEffect(() => myRef.current?.scrollIntoView(), []);
-  const { bookDetailInfo } = useGetBooksInfoId({ id });
 
+  useEffect(() => {
+    recentScrollPosition.current = window.scrollY;
+    myRef.current?.scrollIntoView();
+    return () => {
+      window.scrollTo(0, recentScrollPosition.current);
+    };
+  }, [myRef.current]);
+  const { bookDetailInfo } = useGetBooksInfoId({ id });
 
   if (!bookDetailInfo) {
     return (
@@ -59,7 +65,11 @@ const BookDetail = () => {
 
   return (
     <main>
-      <HelmetComponent title={bookDetailInfo.title} description={ `집현전의 소중한 자산 "${bookDetailInfo.title}" 입니다.`}  img={bookDetailInfo.image} />
+      <HelmetComponent
+        title={bookDetailInfo.title}
+        description={`집현전의 소중한 자산 "${bookDetailInfo.title}" 입니다.`}
+        img={bookDetailInfo.image}
+      />
       <Banner
         img="bookdetail"
         titleKo="도서 상세 및 예약"

src/component/search/Search.tsx

@@ -12,7 +12,7 @@ import SearchSection from "./SearchSection";
 
 const Search = () => {
   const myRef = useRef<HTMLDivElement>(null);
-  const { bookList, categoryList, lastPage, categoryIndex } =
+  const { bookList, categoryList, lastPage, categoryIndex, isFetched } =
     useGetBooksInfoSearchUrl();
   const [urlSearchParams, setUrlSearchParams] = useSearchParams();
   const [query, page, sort] = useParseUrlQueryString(searchUrlQueryKeys);
@@ -63,6 +63,7 @@ const Search = () => {
         setPage={setPage}
         myRef={myRef}
       />
+      {!isFetched ? <div className="loader" /> : null}
       <section className="wish-book-wraper">
         <WishBook />
       </section>

src/component/utils/HeaderMobile.tsx

@@ -35,7 +35,11 @@ const HeaderMobile = () => {
           <Image src={Logo} alt="logo" />
         </Link>
         <nav className="header-mobile__gnb__wrapper">
-          <Link className="header-mobile__search" to={{ pathname: `/search` }}>
+          <Link
+            className="header-mobile__search"
+            to={{ pathname: `/search` }}
+            onClick={() => window.scrollTo(0, 0)}
+          >
             <Image src={SearchBook} alt="search" />
           </Link>
           <button