Merge pull request #306 from SOPT-all/feat/#224/error-boundary

[Feat] 에러 바운더리, 로딩 적용

package.json

@@ -26,6 +26,7 @@
     "react": "^18.3.1",
     "react-calendar": "^5.1.0",
     "react-dom": "^18.3.1",
+    "react-error-boundary": "^5.0.0",
     "react-hot-toast": "^2.5.1",
     "react-router-dom": "^7.1.1",
     "swiper": "^11.2.1",

src/App.tsx

@@ -1,9 +1,12 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { Toaster } from 'react-hot-toast';
 import { RouterProvider } from 'react-router-dom';
+import Error from '@/pages/error';
 import { router } from '@/routes/router.tsx';
+import Loading from './pages/loading';
 import queryClient from './queryClient';
 import './styles/index.css';
 
@@ -31,7 +34,11 @@ const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools initialIsOpen={false} />
-      <RouterProvider router={router} />
+      <ErrorBoundary FallbackComponent={Error}>
+        <Suspense fallback={<Loading />}>
+          <RouterProvider router={router} />
+        </Suspense>
+      </ErrorBoundary>
       <Toaster />
     </QueryClientProvider>
   );

src/assets/gif/index.ts

@@ -2,6 +2,7 @@ import ClearGif from './clear.gif';
 import EmptyGif from './empty.gif';
 import HomeBlack from './home_black.gif';
 import HomeWhite from './home_white.gif';
+import LoadingGif from './loading.gif';
 import LoginGif from './login.gif';
 
-export { ClearGif, EmptyGif, LoginGif, HomeBlack, HomeWhite };
+export { ClearGif, EmptyGif, LoginGif, HomeBlack, HomeWhite, LoadingGif };

src/components/ClassCard/index.css.ts

@@ -16,6 +16,8 @@ export const cardImageStyle = style({
   height: '8.4rem',
   flexShrink: 0,
 
+  objectFit: 'cover',
+
   borderRadius: 3.4,
 
   backgroundColor: vars.colors.gray04,

src/pages/error/index.tsx

@@ -12,6 +12,7 @@ const Error = () => {
 
   const handleHomeNavigation = () => {
     navigate(ROUTES_CONFIG.home.path);
+    window.location.reload();
   };
 
   return (

src/pages/home/components/HomeCarousel/index.tsx

@@ -9,12 +9,14 @@ const ADVERTISEMENTS = [
     imageUrl: KkukgirlImg,
     description: `5주 집중 커리큘럼, 스걸파 출연 댄서의 `,
     description2: '피메일 힙합 기본기 튼튼하게 다지기',
+    id: 25,
   },
-  { imageUrl: ChoreohongImg, description: '코레홍과 함께하는', description2: 'NMIXX-DASH 코레오그래피' },
+  { imageUrl: ChoreohongImg, description: '코레홍과 함께하는', description2: 'NMIXX-DASH 코레오그래피', id: 24 },
   {
     imageUrl: BannerImg,
     description: '알고 싶던 댄서나 관심있는 클래스를 ',
     description2: '한 눈에 모아볼 수 있어요!',
+    id: 0,
   },
 ];
 const HomeCarousel = () => {
@@ -32,7 +34,12 @@ const HomeCarousel = () => {
       {ADVERTISEMENTS.map((data, index) => {
         return (
           <SwiperSlide key={`${index}-${data.description}`}>
-            <SliderItem imageUrl={data.imageUrl} description={data.description} description2={data.description2} />
+            <SliderItem
+              imageUrl={data.imageUrl}
+              description={data.description}
+              description2={data.description2}
+              id={data.id}
+            />
           </SwiperSlide>
         );
       })}

src/pages/home/components/SliderItem/index.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import {
   descriptionStyle,
   moreButtonStyle,
@@ -8,15 +9,24 @@ import {
 } from '@/pages/home/components/SliderItem/index.css';
 import Flex from '@/components/Flex';
 import Head from '@/components/Head';
+import { ROUTES_CONFIG } from '@/routes/routesConfig';
 import { IcArrowRightWhite14 } from '@/assets/svg';
 
 interface SliderItemProps {
   imageUrl: string;
   description: string;
   description2: string;
+  id: number;
 }
 
-const SliderItem = ({ imageUrl, description, description2 }: SliderItemProps) => {
+const SliderItem = ({ imageUrl, description, description2, id }: SliderItemProps) => {
+  const navigate = useNavigate();
+  const handleDetailClick = () => {
+    if (id === 0) {
+      return;
+    }
+    navigate(ROUTES_CONFIG.class.path(`${id}`));
+  };
   return (
     <Flex position="relative" className={containerStyle}>
       <img src={imageUrl} className={imageStyle} />
@@ -29,7 +39,9 @@ const SliderItem = ({ imageUrl, description, description2 }: SliderItemProps) =>
       </Head>
 
       <Flex align="center" gap="0.2rem" position="absolute" className={moreWrapperStyle}>
-        <button className={moreButtonStyle}>자세히 보기</button>
+        <button className={moreButtonStyle} onClick={handleDetailClick}>
+          자세히 보기
+        </button>
         <IcArrowRightWhite14 width={14} height={14} />
       </Flex>
     </Flex>

src/pages/loading/index.tsx

@@ -0,0 +1,23 @@
+import Flex from '@/components/Flex';
+import Head from '@/components/Head';
+import { LoadingGif } from '@/assets/gif';
+
+const Loading = () => {
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      justify="center"
+      paddingTop="19.5rem"
+      paddingRight="11.7rem"
+      paddingBottom="27.3rem"
+      paddingLeft="11.8rem">
+      <Flex direction="column" align="center" justify="center" gap="1.3rem">
+        <img src={LoadingGif} width={300} />
+        <Head tag="h5">로딩 중...</Head>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Loading;

src/pages/reservation/components/TossPayments/Success/Success.tsx

@@ -53,12 +53,16 @@ export const SuccessPage = () => {
     navigate(ROUTES_CONFIG.mypageReservation.path);
   };
 
+  const handleHomeNavigate = () => {
+    navigate(ROUTES_CONFIG.home.path);
+  };
+
   return (
-    <div className={`${styles.wrapper}`}>
+    <div className={`${styles.flexCustomStyle}`}>
       {isConfirmed ? (
         <Flex direction="column" width="100%">
           <Header.Root>
-            <Header.CloseIcon />
+            <Header.CloseIcon onClick={handleHomeNavigate} />
           </Header.Root>
           <Flex direction="column" paddingTop="5.2rem" paddingLeft="2rem" paddingRight="2rem" width="100%" gap="2.8rem">
             <Completion
@@ -77,7 +81,7 @@ export const SuccessPage = () => {
             <h2 className={`${styles.title} ${styles.textCenter}`}>결제 요청까지 성공했어요.</h2>
             <h4 className={`${styles.textCenter} ${styles.description}`}>결제 승인하고 완료해보세요.</h4>
           </Flex>
-          <div className={styles.w100}>
+          <div className={styles.buttonCustomStyle}>
             <button className={`${styles.btn} ${styles.btnPrimary} ${styles.w100}`} onClick={confirmPayment}>
               결제 승인하기
             </button>

src/pages/reservation/components/TossPayments/index.css.ts

@@ -10,6 +10,11 @@ export const w100 = style({
   width: '100%',
 });
 
+export const buttonCustomStyle = style({
+  width: '100%',
+  padding: '0 3rem',
+});
+
 export const h100 = style({
   height: '100%',
 });
@@ -69,6 +74,14 @@ export const confirmLoading = style({
   justifyContent: 'space-between',
 });
 
+export const flexCustomStyle = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  height: '100vh',
+});
+
 export const confirmSuccess = style({
   display: 'none',
   marginTop: '7.2rem',

src/routes/router.tsx

@@ -1,25 +1,26 @@
+import { lazy } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import { LoginCallback } from '@/pages/auth';
-import Class from '@/pages/class';
-import Dancer from '@/pages/dancer';
-import Error from '@/pages/error';
-import Home from '@/pages/home';
-import ClassRegisterCompletion from '@/pages/instructor/ClassRegisterCompletion';
-import ClassDetail from '@/pages/instructor/classDetail';
-import ClassList from '@/pages/instructor/classList';
-import ClassRegister from '@/pages/instructor/classRegister';
-import InstructorRegister from '@/pages/instructorRegister';
-import Login from '@/pages/login';
-import MyPageReservation from '@/pages/mypage/mypageReservation';
-import MyPageReservationDetail from '@/pages/mypage/mypageReservationDetail';
-import Onboarding from '@/pages/onboarding';
-import Reservation from '@/pages/reservation';
 import { CheckoutPage } from '@/pages/reservation/components/TossPayments/CheckOut/CheckOut';
 import { FailPage } from '@/pages/reservation/components/TossPayments/Fail/Fail';
 import { SuccessPage } from '@/pages/reservation/components/TossPayments/Success/Success';
-import Search from '@/pages/search';
 import { ROUTES_CONFIG } from './routesConfig';
 
+const Home = lazy(() => import('@/pages/home'));
+const Login = lazy(() => import('@/pages/login'));
+const Onboarding = lazy(() => import('@/pages/onboarding'));
+const Search = lazy(() => import('@/pages/search'));
+const Class = lazy(() => import('@/pages/class'));
+const Dancer = lazy(() => import('@/pages/dancer'));
+const Reservation = lazy(() => import('@/pages/reservation'));
+const MyPageReservation = lazy(() => import('@/pages/mypage/mypageReservation'));
+const MyPageReservationDetail = lazy(() => import('@/pages/mypage/mypageReservationDetail'));
+const ClassRegister = lazy(() => import('@/pages/instructor/classRegister'));
+const InstructorRegister = lazy(() => import('@/pages/instructorRegister'));
+const ClassDetail = lazy(() => import('@/pages/instructor/classDetail'));
+const ClassList = lazy(() => import('@/pages/instructor/classList'));
+const Error = lazy(() => import('@/pages/error'));
+
 export const router = createBrowserRouter([
   {
     path: ROUTES_CONFIG.home.path,
@@ -65,10 +66,6 @@ export const router = createBrowserRouter([
     path: ROUTES_CONFIG.classRegister.path,
     element: <ClassRegister />,
   },
-  {
-    path: ROUTES_CONFIG.classRegisterCompletion.path,
-    element: <ClassRegisterCompletion />,
-  },
   {
     path: ROUTES_CONFIG.instructorRegister.path,
     element: <InstructorRegister />,
@@ -94,7 +91,7 @@ export const router = createBrowserRouter([
     element: <FailPage />,
   },
   {
-    path: ROUTES_CONFIG.error.path,
+    path: '*',
     element: <Error />,
   },
 ]);