Merge pull request #56 from BCSDLab/feature/#50

[상점페이지] 주변 상점 업데이트 관련 로직 수정
BCSDLab · Jan 8, 2024 · c05c6c5 · c05c6c5
2 parents 25fe929 + 3d456e8
commit c05c6c5
Show file tree

Hide file tree

Showing 5 changed files with 223 additions and 195 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,7 @@
 .env.test.local
 .env.production.local
 
+.prettierrc
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

diff --git a/src/pages/Store/StoreDetailPage/hooks/useStoreDetail.ts b/src/pages/Store/StoreDetailPage/hooks/useStoreDetail.ts
@@ -1,29 +1,18 @@
 import { useQuery } from 'react-query';
 import * as api from 'api';
 
-const useStoreDetail = (params: string | undefined) => {
-  const { data: storeDetail, isError: storeDetailError } = useQuery(
-    ['storeDetail', params],
+const useStoreDetail = (id: string) => {
+  const { data: storeDetail, isError: isStoreDetailError } = useQuery(
+    ['storeDetail', id],
     ({ queryKey }) => api.store.getStoreDetailInfo(queryKey[1] ?? ''),
   );
-  const storeDescription = storeDetail?.description ? storeDetail?.description.replace(/(?:\/)/g, '\n') : '-';
-  const { data: storeMenus, isError: storeMenusError } = useQuery(
-    ['storeDetailMenu', params],
-    ({ queryKey }) => api.store.getStoreDetailMenu(queryKey[1] ?? ''),
-  );
-
-  if (storeMenusError || storeDetailError) {
-    return {
-      storeDetail: null,
-      storeDescription: null,
-      storeMenus: null,
-    };
-  }
+  const storeDescription = storeDetail?.description
+    ? storeDetail?.description.replace(/(?:\/)/g, '\n')
+    : '-';
 
   return {
-    storeDetail,
+    storeDetail: isStoreDetailError ? null : storeDetail,
     storeDescription,
-    storeMenus,
   };
 };
 

diff --git a/src/pages/Store/StoreDetailPage/hooks/useStoreMenus.ts b/src/pages/Store/StoreDetailPage/hooks/useStoreMenus.ts
@@ -0,0 +1,15 @@
+import { useQuery } from 'react-query';
+import * as api from 'api';
+
+const useStoreMenus = (params: string) => {
+  const { data: storeMenus, isError: isStoreMenuError } = useQuery(
+    ['storeDetailMenu', params],
+    ({ queryKey }) => api.store.getStoreDetailMenu(queryKey[1] ?? ''),
+  );
+
+  return {
+    storeMenus: isStoreMenuError ? null : storeMenus,
+  };
+};
+
+export default useStoreMenus;
diff --git a/src/pages/Store/StoreDetailPage/index.tsx b/src/pages/Store/StoreDetailPage/index.tsx
@@ -9,13 +9,15 @@ import { Portal } from 'components/common/Modal/PortalProvider';
 import useModalPortal from 'utils/hooks/useModalPortal';
 import useScrollToTop from 'utils/hooks/useScrollToTop';
 import useStoreDetail from './hooks/useStoreDetail';
+import useStoreMenus from './hooks/useStoreMenus';
 import styles from './StoreDetailPage.module.scss';
 
 function StoreDetailPage() {
   const params = useParams();
   const isMobile = useMediaQuery();
   const navigate = useNavigate();
-  const { storeDetail, storeDescription, storeMenus } = useStoreDetail(params.id);
+  const { storeDetail, storeDescription } = useStoreDetail(params.id!);
+  const { storeMenus } = useStoreMenus(params.id!);
   const storeMenuCategories = storeMenus ? storeMenus.menu_categories : null;
   const portalManager = useModalPortal();
 
@@ -41,98 +43,108 @@ function StoreDetailPage() {
           </button>
         )}
         <div className={styles['section__store-info']}>
-          {
-            storeDetail && (
-              <div className={styles.store}>
-                <div className={styles.store__name}>{storeDetail?.name}</div>
-                <div className={styles.store__detail}>
-                  <span>전화번호</span>
-                  { storeDetail?.phone }
-                  <br />
-                  <span>운영시간</span>
-                  {
-                    storeDetail?.open ? (`${storeDetail?.open[getDayOfWeek()].open_time} ~ ${storeDetail?.open[getDayOfWeek()].close_time}`) : '-'
-                  }
-                  <br />
-                  <span>주소정보</span>
-                  { storeDetail?.address }
-                  <br />
-                  <span>배달요금</span>
-                  { storeDetail?.delivery_price.toLocaleString() }
-                  원
-                  <br />
-                  <div className={styles.etc}>
-                    <span>기타정보</span>
-                    <div className={styles.etc__content}>
-                      { storeDescription }
-                    </div>
-                  </div>
-                </div>
-                <div className={styles.store__tag}>
-                  { storeDetail?.delivery && <span>#배달가능</span> }
-                  { storeDetail?.pay_card && <span>#카드가능</span> }
-                  { storeDetail?.pay_bank && <span>#계좌이체가능</span> }
-                </div>
-                <div className={styles['button-wrapper']}>
-                  <a
-                    className={cn({
-                      [styles['button-wrapper__button']]: true,
-                      [styles['button-wrapper__button--call']]: true,
-                    })}
-                    role="button"
-                    aria-label="상점 전화하기"
-                    href={`tel:${storeDetail?.phone}`}
-                  >
-                    전화하기
-                  </a>
-                  <button
-                    className={cn({
-                      [styles['button-wrapper__button']]: true,
-                      [styles['button-wrapper__button--store-list']]: true,
-                    })}
-                    aria-label="상점 목록 이동"
-                    type="button"
-                    onClick={() => navigate('/store')}
-                  >
-                    상점목록
-                  </button>
+          {storeDetail && (
+            <div className={styles.store}>
+              <div className={styles.store__name}>{storeDetail?.name}</div>
+              <div className={styles.store__detail}>
+                <span>전화번호</span>
+                {storeDetail?.phone}
+                <br />
+                <span>운영시간</span>
+                {storeDetail?.open
+                  ? `${storeDetail?.open[getDayOfWeek()].open_time} ~ ${
+                    storeDetail?.open[getDayOfWeek()].close_time
+                  }`
+                  : '-'}
+                <br />
+                <span>주소정보</span>
+                {storeDetail?.address}
+                <br />
+                <span>배달요금</span>
+                {storeDetail?.delivery_price.toLocaleString()}
+                원
+                <br />
+                <div className={styles.etc}>
+                  <span>기타정보</span>
+                  <div className={styles.etc__content}>{storeDescription}</div>
                 </div>
               </div>
-            )
-          }
-          <div className={styles.image}>
-            { storeDetail?.image_urls && storeDetail.image_urls.map((img, index) => (
-              <div key={`${img}`} className={styles.image__content}>
+              <div className={styles.store__tag}>
+                {storeDetail?.delivery && <span>#배달가능</span>}
+                {storeDetail?.pay_card && <span>#카드가능</span>}
+                {storeDetail?.pay_bank && <span>#계좌이체가능</span>}
+              </div>
+              <div className={styles['button-wrapper']}>
+                <a
+                  className={cn({
+                    [styles['button-wrapper__button']]: true,
+                    [styles['button-wrapper__button--call']]: true,
+                  })}
+                  role="button"
+                  aria-label="상점 전화하기"
+                  href={`tel:${storeDetail?.phone}`}
+                >
+                  전화하기
+                </a>
                 <button
-                  className={styles.image__button}
-                  aria-label="이미지 확대"
+                  className={cn({
+                    [styles['button-wrapper__button']]: true,
+                    [styles['button-wrapper__button--store-list']]: true,
+                  })}
+                  aria-label="상점 목록 이동"
                   type="button"
-                  onClick={() => onClickImage(storeDetail!.image_urls, index)}
+                  onClick={() => navigate('/store')}
                 >
-                  <img
-                    className={styles.image__poster}
-                    src={`${img}`}
-                    alt="상점이미지"
-                  />
+                  상점목록
                 </button>
               </div>
-            ))}
+            </div>
+          )}
+          <div className={styles.image}>
+            {
+              storeDetail?.image_urls && storeDetail.image_urls.map((img, index) => (
+                <div key={`${img}`} className={styles.image__content}>
+                  <button
+                    className={styles.image__button}
+                    aria-label="이미지 확대"
+                    type="button"
+                    onClick={() => onClickImage(storeDetail!.image_urls, index)}
+                  >
+                    <img className={styles.image__poster} src={`${img}`} alt="상점이미지" />
+                  </button>
+                </div>
+              ))
+            }
           </div>
         </div>
-        { (storeMenuCategories && storeMenuCategories.length > 0) && (
+        {storeMenuCategories && storeMenuCategories.length > 0 && (
           <>
             <div className={styles['menu-title']}>MENU</div>
             <div className={styles['menu-info']}>
-              { storeMenuCategories.map((menu_categories: MenuCategory) => (
-                menu_categories.menus.map((menu: Menu) => (
-                  menu.option_prices === null && (
+              {storeMenuCategories.map((menuCategories: MenuCategory) => (
+                menuCategories.menus.map((menu: Menu) => (
+                  menu.option_prices === null ? (
+                    <div className={styles['menu-card']} key={menu.id}>
+                      {menu.name}
+                      <span>
+                        {
+                          !!menu.single_price && (
+                            menu.single_price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+                          )
+                        }
+                      </span>
+                    </div>
+                  ) : (
                     <div className={styles['menu-card']} key={menu.id}>
-                      { menu.name }
-                      <span>{ !!menu.single_price && menu.single_price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') }</span>
+                      {menu.name}
+                      <span>
+                        {
+                          menu.option_prices[0].price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+                        }
+                      </span>
                     </div>
                   )
-                ))
-              ))}
+                ))))}
             </div>
           </>
         )}