🐛 검색 스크롤 초기화, 코드오류 수정

Read-bird · Dec 30, 2023 · 843d9a3 · 843d9a3
2 parents fad6369 + f257e0f
commit 843d9a3
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 47 deletions.
diff --git a/src/components/templates/HomeTemplate/HomeTemplate.tsx b/src/components/templates/HomeTemplate/HomeTemplate.tsx
@@ -6,7 +6,7 @@ import { Spacing } from '@components/common/Spacing';
 import { colors } from '@style/global-style';
 import { lastDayMonth } from '@utils/calendar';
 import dayjs from 'dayjs';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { Body, CalendarWrap, FlexBox, Head, TodayText, Wrap } from './Styled';
@@ -38,6 +38,12 @@ export const HomeTemplate = () => {
     dispatch(setMonthCurrentDate(dayjs(monthCurrentDate).add(1, 'month').format()));
   };
 
+  // 홈화면 접속시 오늘 날짜로 초기화
+  useEffect(() => {
+    dispatch(setCurrentDate(dayjs().format('YYYY-MM-DD')));
+    dispatch(setMonthCurrentDate(dayjs().format('YYYY-MM-DD')));
+  }, []);
+
   return (
     <Wrap>
       <Head>

diff --git a/src/components/templates/HomeTemplate/Plan/Stamp/Stamp.tsx b/src/components/templates/HomeTemplate/Plan/Stamp/Stamp.tsx
@@ -174,14 +174,14 @@ export const Stamp = ({
           }
         } catch (e: any) {
           if (e instanceof AxiosError) {
-            Swal.showValidationMessage(e.response?.data.message.replace(/^.*?:\s/g, ''));
+            Swal.showValidationMessage(e.response?.data.message.replace(/^.*?:\s*/g, ''));
           }
         } finally {
           setOpenModal(null);
         }
       }
     });
-  }, [setOpenModal, planId, maxPage, dispatch, openFailed]);
+  }, [setOpenModal, planId, maxPage, dispatch, openFailed, currentPage]);
 
   return (
     <Wrap>

diff --git a/src/components/templates/LoadingTemplate/LoadingTemplate.tsx b/src/components/templates/LoadingTemplate/LoadingTemplate.tsx
@@ -35,5 +35,5 @@ const Wrap = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: #f5f5f580;
+  background-color: #f5f5f5aa;
 `;
diff --git a/src/components/templates/LoadingTemplate/RouterLoading.tsx b/src/components/templates/LoadingTemplate/RouterLoading.tsx
@@ -26,5 +26,5 @@ const Wrap = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: #f5f5f580;
+  background-color: #f5f5f5aa;
 `;
diff --git a/src/components/templates/SearchTemplate/Book/Book.tsx b/src/components/templates/SearchTemplate/Book/Book.tsx
@@ -8,19 +8,22 @@ import { useDispatch } from 'react-redux';
 import { areEqual } from 'react-window';
 import styled, { CSSObject } from 'styled-components';
 
+export type TBookData = {
+  list: TBookDetail[];
+  totalPage: number;
+  lastIndex: number;
+  currentPage: number;
+  getNextPage?: () => void;
+};
+
 type TProps = {
-  data: {
-    list: TBookDetail[];
-    totalPage: number;
-    lastIndex: number;
-    currentPage: number;
-    getNextPage?: () => void;
-  };
+  data: TBookData;
   index: number;
   style: CSSProperties;
 };
 
 export const Book = memo(({ data, index, style }: TProps) => {
+  const { totalPage, currentPage, lastIndex, getNextPage } = data;
   const props = data.list[index];
   const { coverImage, title, author, publisher } = props;
   const dispatch = useDispatch<TAppDispatch>();
@@ -34,12 +37,12 @@ export const Book = memo(({ data, index, style }: TProps) => {
   );
 
   useEffect(() => {
-    if (data.lastIndex === index) {
+    if (lastIndex === index) {
       const handleObserver = (entries: IntersectionObserverEntry[]) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            if (data.totalPage > data.currentPage) {
-              data.getNextPage?.();
+            if (totalPage > currentPage) {
+              getNextPage?.();
             }
           }
         });
@@ -54,7 +57,7 @@ export const Book = memo(({ data, index, style }: TProps) => {
     return () => {
       observer.current?.disconnect();
     };
-  }, [data, index]);
+  }, [lastIndex, index, totalPage, currentPage, getNextPage]);
 
   return (
     <div style={style} onClick={handleClickItem(props)}>

diff --git a/src/components/templates/SearchTemplate/SearchMain/SearchMain.tsx b/src/components/templates/SearchTemplate/SearchMain/SearchMain.tsx
@@ -81,15 +81,19 @@ export const SearchMain = () => {
       <Spacing height={18} />
       <Title>지금 가장 인기 있는 책 TOP 10</Title>
       <Spacing height={18} />
-      <FixedSizeList
-        itemSize={142}
-        width="100%"
-        height={listHeight}
-        itemCount={topBookList.length}
-        itemData={itemData}
-      >
-        {Book}
-      </FixedSizeList>
+      {!!topBookList.length ? (
+        <FixedSizeList
+          itemSize={142}
+          width="100%"
+          height={listHeight}
+          itemCount={topBookList.length}
+          itemData={itemData}
+        >
+          {Book}
+        </FixedSizeList>
+      ) : (
+        <Empty>검색된 도서가 없어요</Empty>
+      )}
     </Wrap>
   );
 };
@@ -121,3 +125,16 @@ const Title = styled.h1`
   color: ${({ theme }) => theme.colors.basicDark};
   align-self: flex-start;
 `;
+
+const Empty = styled.p`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  text-align: center;
+  line-height: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #747474;
+`;
diff --git a/src/components/templates/SearchTemplate/SearchResult/SearchResult.tsx b/src/components/templates/SearchTemplate/SearchResult/SearchResult.tsx
@@ -2,12 +2,14 @@ import { initBookList } from '@/store/reducers';
 import { TRootState } from '@/store/state';
 import { IconDayBird } from '@assets/icons';
 import { Book } from '@components/templates/SearchTemplate/Book';
+import { TBookData } from '@components/templates/SearchTemplate/Book/Book';
 import { TFormValue } from '@components/templates/SearchTemplate/SearchTemplate';
 import { useGetSearchList } from '@components/templates/SearchTemplate/hooks';
 import { Alert } from '@utils/Alert';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
+import { useOutletContext } from 'react-router-dom';
 import { FixedSizeList } from 'react-window';
 import styled from 'styled-components';
 
@@ -19,6 +21,7 @@ const CheckBoxType = {
 };
 
 export const SearchResult = memo(() => {
+  const { listRef } = useOutletContext<{ listRef: React.RefObject<FixedSizeList<TBookData>> }>();
   const checkboxes = useMemo(() => ['전체', '책 이름', '글쓴이', '출판사'], []);
   const dispatch = useDispatch();
   const { bookList, totalPage } = useSelector((state: TRootState) => state.bookSearchStore);
@@ -39,6 +42,7 @@ export const SearchResult = memo(() => {
       // 타입 변경
       setValue('searchType', CheckBoxType[checkbox as keyof typeof CheckBoxType]);
       setValue('page', 1);
+      listRef.current?.scrollToItem(0, 'start');
 
       const result = await searchList({
         ...props,
@@ -50,7 +54,7 @@ export const SearchResult = memo(() => {
         setValue('page', 2);
       }
     },
-    [setValue, searchList, getValues]
+    [setValue, searchList, getValues, listRef]
   );
 
   const listHeight = useMemo(() => {
@@ -71,17 +75,6 @@ export const SearchResult = memo(() => {
     }
   }, [getValues, setValue, searchList]);
 
-  const itemData = useMemo(
-    () => ({
-      list: bookList,
-      totalPage: totalPage,
-      lastIndex: bookList.length - 1,
-      currentPage: currentPage,
-      getNextPage: getNextPage
-    }),
-    [bookList, totalPage, currentPage, getNextPage]
-  );
-
   useEffect(() => {
     return () => {
       dispatch(initBookList());
@@ -111,11 +104,18 @@ export const SearchResult = memo(() => {
       </CheckList>
       {!!bookList.length ? (
         <FixedSizeList
+          ref={listRef}
           height={listHeight}
           itemSize={142}
           width="100%"
           itemCount={bookList.length}
-          itemData={itemData}
+          itemData={{
+            list: bookList,
+            totalPage: totalPage,
+            lastIndex: bookList.length - 1,
+            currentPage: currentPage,
+            getNextPage: getNextPage
+          }}
         >
           {Book}
         </FixedSizeList>

diff --git a/src/components/templates/SearchTemplate/SearchTemplate.tsx b/src/components/templates/SearchTemplate/SearchTemplate.tsx
@@ -1,14 +1,16 @@
 import { initBookList, setBookDetail } from '@/store/reducers';
 import { TRootState } from '@/store/state';
 import { Spacing } from '@components/common/Spacing';
+import { TBookData } from '@components/templates/SearchTemplate/Book/Book';
 import { SearchDetail } from '@components/templates/SearchTemplate/SearchDetail';
 import { SearchInput } from '@components/templates/SearchTemplate/SearchInput';
 import { useGetSearchList } from '@components/templates/SearchTemplate/hooks';
 import { Alert } from '@utils/Alert';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
 import { Outlet, useNavigate } from 'react-router-dom';
+import { FixedSizeList } from 'react-window';
 import { Body, Head, Wrap } from './Styled';
 
 export type TFormValue = {
@@ -22,6 +24,7 @@ export const SearchTemplate = () => {
   const bookDetail = useSelector((state: TRootState) => state.bookDetailStore);
   const dispatch = useDispatch();
   const { searchList } = useGetSearchList();
+  const listRef = useRef<FixedSizeList<TBookData>>(null);
 
   const methods = useForm<TFormValue>({
     defaultValues: {
@@ -44,6 +47,7 @@ export const SearchTemplate = () => {
 
     // 페이지 변경
     methods.setValue('page', 2);
+    listRef.current?.scrollToItem(0, 'start');
 
     const result = await searchList({ ...props, page: 1 });
 
@@ -68,7 +72,7 @@ export const SearchTemplate = () => {
           <Spacing height={10} />
         </Head>
         <Body>
-          <Outlet />
+          <Outlet context={{ listRef }} />
         </Body>
         {bookDetail !== null && <SearchDetail {...bookDetail} />}
       </Wrap>

diff --git a/src/components/templates/SearchTemplate/hooks.ts b/src/components/templates/SearchTemplate/hooks.ts
@@ -28,7 +28,7 @@ export const useGetSearchList = () => {
         return true;
       } catch (e) {
         if (e instanceof AxiosError) {
-          Alert.error({ title: convertError(e.response?.data.messgae) });
+          Alert.error({ title: convertError(e.response?.data.message) });
         }
         return false;
       }

diff --git a/src/hooks/axiosInterceptor.ts b/src/hooks/axiosInterceptor.ts
@@ -7,7 +7,6 @@ import { useDispatch } from 'react-redux';
 
 export const useAxiosInterceptor = () => {
   const dispatch = useDispatch<TAppDispatch>();
-  // const navigate = useNavigate();
 
   useEffect(() => {
     authFetch.interceptors.request.use(
@@ -37,7 +36,6 @@ export const useAxiosInterceptor = () => {
             action: () => {
               dispatch(setAccessToken(''));
               localStorage.clear();
-              // navigate('/');
             }
           });
           throw new Error('서버와 연결이 원활하지 않습니다.');
@@ -75,7 +73,6 @@ export const useAxiosInterceptor = () => {
               action: () => {
                 dispatch(setAccessToken(''));
                 localStorage.clear();
-                // navigate('/');
               }
             });
           }
@@ -87,7 +84,6 @@ export const useAxiosInterceptor = () => {
             action: () => {
               dispatch(setAccessToken(''));
               localStorage.clear();
-              // navigate('/');
             }
           });
         } else {

diff --git a/src/utils/errors/errors.ts b/src/utils/errors/errors.ts
@@ -1,6 +1,6 @@
 export const convertError = (err: string) => {
-  if (err?.includes('Bad Request')) {
-    return err.replace('Bad Request', '');
+  if (err?.includes(':')) {
+    return err.replace(/^.*?:\s*/g, '');
   }
 
   switch (err) {