Merge branch 'main' into develop

Author: chaeseungyun

src/components/common/ErrorBoundary/index.tsx

@@ -1,6 +1,7 @@
 import React, { ErrorInfo } from 'react';
 import showToast from 'utils/ts/showToast';
 import { AxiosError } from 'axios';
+import { sendClientError } from '@bcsdlab/koin';
 
 interface Props {
   fallbackClassName: string;
@@ -33,6 +34,7 @@ export default class ErrorBoundary extends React.Component<Props, State> {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   componentDidCatch(error: AxiosError<any, any> | Error, __: ErrorInfo) {
     showToast('error', isAxiosError(error) ? error.response?.data.error.message : error.message);
+    sendClientError(error);
   }
 
   render() {

src/main.tsx

@@ -4,8 +4,7 @@ import './index.scss';
 import { BrowserRouter } from 'react-router-dom';
 import PortalProvider from 'components/common/Modal/PortalProvider';
 import { RecoilRoot } from 'recoil';
-import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { sendClientError } from '@bcsdlab/koin';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
@@ -16,9 +15,6 @@ const queryClient = new QueryClient({
       retry: false,
     },
   },
-  queryCache: new QueryCache({
-    onError: (error) => sendClientError(error),
-  }),
 });
 
 const root = ReactDOM.createRoot(

src/pages/Store/StoreDetailPage/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { Suspense, useEffect, useRef } from 'react';
 import getDayOfWeek from 'utils/ts/getDayOfWeek';
 import ImageModal from 'components/common/Modal/ImageModal';
 import {
@@ -21,6 +21,8 @@ import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import * as api from 'api';
 import useTokenState from 'utils/hooks/state/useTokenState';
 import { useABTestView } from 'utils/hooks/abTest/useABTestView';
+// eslint-disable-next-line
+import StoreDetailBoundary from '../components/StoreDetailBoundary/StoreDetailBoundary';
 import MenuTable from './MenuTable';
 import EventTable from './EventTable';
 import styles from './StoreDetailPage.module.scss';
@@ -37,7 +39,7 @@ function StoreDetailPage() {
   const logger = useLogger();
   // waterfall 현상 막기
   const { data: paralleData } = useSuspenseQuery({
-    queryKey: ['storeDetail', 'storeDetailMenu', 'review'],
+    queryKey: ['storeDetail', 'storeDetailMenu', 'review', params.id],
     queryFn: () => Promise.all([
       queryClient.fetchQuery({
         queryKey: ['storeDetail', params.id],
@@ -410,18 +412,29 @@ function StoreDetailPage() {
         {tapType === '리뷰' && <ReviewPage id={params.id!} />}
       </div>
       {testValue === 'call_floating' && (
-      <a
-        role="button"
-        aria-label="상점 전화하기"
-        href={`tel:${storeDetail?.phone}`}
-        onClick={onClickCallNumber}
-        className={styles['phone-button--floating']}
-      >
-        <Phone />
-      </a>
+        <a
+          role="button"
+          aria-label="상점 전화하기"
+          href={`tel:${storeDetail?.phone}`}
+          onClick={onClickCallNumber}
+          className={styles['phone-button--floating']}
+        >
+          <Phone />
+        </a>
       )}
     </div>
   );
 }
 
-export default StoreDetailPage;
+function StoreDetail() {
+  const navigate = useNavigate();
+  return (
+    <StoreDetailBoundary onErrorClick={() => navigate('/store')}>
+      <Suspense fallback={<div />}>
+        <StoreDetailPage />
+      </Suspense>
+    </StoreDetailBoundary>
+  );
+}
+
+export default StoreDetail;

src/pages/Store/StorePage/index.tsx

@@ -137,7 +137,32 @@ function StorePage() {
     localStorage.setItem('store-review-tooltip', 'used');
     closeTooltip();
   };
-  const navigation = useNavigate();
+  const navigate = useNavigate();
+
+  const handleCategoryClick = (categoryId: number) => {
+    logger.actionEventClick({
+      actionTitle: 'BUSINESS',
+      event_label: 'shop_categories',
+      value: categoryId.toString(),
+      event_category: 'click',
+      previous_page:
+        categories.shop_categories.find(
+          (item) => item.id === Number(searchParams.get('category')),
+        )?.name || '전체보기',
+      duration_time:
+        (new Date().getTime()
+          - Number(sessionStorage.getItem('enter_category')))
+        / 1000,
+      current_page: categoryId.toString(),
+    });
+
+    sessionStorage.setItem('enter_category', new Date().getTime().toString());
+
+    setParams('category', `${categoryId}`, {
+      deleteBeforeParam: false,
+      replacePage: false,
+    });
+  };
 
   const koreanCategory = selectedCategory === -1
     ? '전체보기'
@@ -251,40 +276,7 @@ function StorePage() {
               role="radio"
               aria-checked={category.id === selectedCategory}
               type="button"
-              onClick={() => {
-                logger.actionEventClick({
-                  actionTitle: 'BUSINESS',
-                  event_label: 'shop_categories',
-                  value: category.name,
-                  event_category: 'click',
-                  previous_page:
-                    categories.shop_categories.find(
-                      (item) => item.id === Number(searchParams.get('category')),
-                    )?.name || '전체보기',
-                  duration_time:
-                    (new Date().getTime()
-                      - Number(sessionStorage.getItem('enter_category')))
-                    / 1000,
-                  current_page: category.name,
-                });
-                sessionStorage.setItem(
-                  'enter_category',
-                  new Date().getTime().toString(),
-                );
-
-                setParams('category', `${category.id} `, {
-                  deleteBeforeParam: false,
-                  replacePage: true,
-                });
-                setParams('shopIds', '', {
-                  deleteBeforeParam: true,
-                  replacePage: true,
-                });
-                setParams('searchWord', '', {
-                  deleteBeforeParam: true,
-                  replacePage: true,
-                });
-              }}
+              onClick={() => handleCategoryClick(category.id)}
               key={category.id}
             >
               <img
@@ -298,7 +290,7 @@ function StorePage() {
         </div>
         <button
           type="button"
-          onClick={() => navigation(`${ROUTES.BenefitStore()}?category=1`)}
+          onClick={() => navigate(`${ROUTES.BenefitStore()}?category=1`)}
           className={styles.category__benefit}
         >
           혜택이 있는 상점 모아보기

src/pages/Store/components/StoreDetailBoundary/StoreDetailBoundary.module.scss

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 60vh;
+}
+
+.button {
+  color: #fff;
+  font-size: 15px;
+  text-decoration: none;
+  cursor: pointer;
+  width: 88px;
+  height: 36px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #175c8e;
+  margin-top: 25px;
+}

src/pages/Store/components/StoreDetailBoundary/StoreDetailBoundary.tsx

@@ -0,0 +1,68 @@
+import React, { ErrorInfo } from 'react';
+import { AxiosError } from 'axios';
+import showToast from 'utils/ts/showToast';
+import { isKoinError, sendClientError } from '@bcsdlab/koin';
+import styles from './StoreDetailBoundary.module.scss';
+
+interface Props {
+  onErrorClick: () => void;
+  children: React.ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  status?: number;
+}
+
+function isAxiosError(error: AxiosError<any, any> | Error): error is AxiosError<any, any> {
+  return ('response' in error);
+}
+
+export default class StoreDetailBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  // 이후에 사용시 해제
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  static getDerivedStateFromError(error: Error) {
+    if (isKoinError(error) || isAxiosError(error)) {
+      return { hasError: true, status: error.status };
+    }
+    return { hasError: true };
+  }
+
+  // 이후에 사용시 해제
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  componentDidCatch(error: Error, __: ErrorInfo) {
+    showToast('error', error.message);
+    sendClientError(error);
+  }
+
+  render() {
+    const { children, onErrorClick } = this.props;
+    const { hasError, status } = this.state;
+
+    if (hasError && status === 404) {
+      return (
+        <div className={styles.container}>
+          <h1>존재하지 않는 상점입니다.</h1>
+          <button
+            className={styles.button}
+            type="button"
+            onClick={onErrorClick}
+          >
+            상점 목록
+          </button>
+        </div>
+      );
+    }
+
+    if (hasError) {
+      return <div className={styles.container}>오류가 발생했습니다</div>;
+    }
+
+    return children;
+  }
+}