Merge pull request #193 from Team-Lecue/hotfix/#187-SyncSticker

[ HotFix ] Develop으로 가라!

src/Detail/components/ZigZagView/ZigZagView.style.ts

@@ -6,7 +6,7 @@ export const ZigZagViewWrapper = styled.div`
   position: relative;
 
   width: 34.2rem;
-  padding: 0.4rem 0 2rem;
+  padding: 1rem 0 2rem;
 `;
 
 export const LecueNoteContainer = styled.div`
@@ -28,6 +28,10 @@ export const Sticker = styled.div<{
   border-radius: 0.4rem;
   background-position: center;
   background-image: ${({ stickerImage }) => `url(${stickerImage})`};
+
+  background-size: 10rem 10rem;
+
   background-repeat: no-repeat;
-  object-fit: cover;
+
+  object-fit: contain;
 `;

src/Detail/hooks/useGetBookDetail.ts

@@ -12,6 +12,7 @@ export default function useGetBookDetail(bookUuid: string) {
       onError: () => {
         navigate('/error');
       },
+      refetchOnMount: 'always',
       refetchOnWindowFocus: false,
     },
   );

src/LecueNote/page/LeceuNotePage/index.tsx

@@ -86,7 +86,7 @@ function LecueNotePage() {
       isIconClicked: isIconClicked,
       bookId: bookId,
     });
-    setTimeout(() => navigate(`/lecue-book/${bookUuid}`), 1000);
+    navigate(`/lecue-book/${bookUuid}`);
   };
 
   return putMutation.isLoading || postMutation.isLoading ? (

src/Router.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
@@ -43,6 +44,7 @@ function Router() {
             <Route path="/loading" element={<LoginCallback />} />
             <Route path="/error" element={<ErrorPage />} />
             <Route path="/loading-page" element={<LoadingPage />} />
+            <Route path="/*" element={<ErrorPage />} />
           </Routes>
         </Suspense>
       </ErrorBoundary>
@@ -52,6 +54,18 @@ function Router() {
 
 export default Router;
 
-function fallbackRender() {
-  return <ErrorPage />;
+function fallbackRender({ error, resetErrorBoundary }: any) {
+  const errorData = error?.error.response?.data;
+  if (errorData.code === 404) {
+    resetErrorBoundary();
+    return <Login />;
+  } else if (errorData.code === 401) {
+    resetErrorBoundary();
+    localStorage.removeItem('token');
+    localStorage.removeItem('nickname');
+    return <Login />;
+    return;
+  } else {
+    return <ErrorPage resetErrorBoundary={resetErrorBoundary} />;
+  }
 }

src/components/common/ErrorPage/index.tsx

@@ -1,12 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useNavigate } from 'react-router-dom';
 
 import { ImgError } from '../../../assets';
 import * as S from './ErrorPage.style';
 
-function ErrorPage() {
+function ErrorPage({ resetErrorBoundary }: any) {
   const navigate = useNavigate();
 
   const handleClickHomeButton = () => {
+    resetErrorBoundary();
     navigate('/', { state: { step: 1 } });
   };