HOTFIX: 각종 minor 에러 해결

oooppq · Sep 4, 2023 · e75ffa8 · e75ffa8
1 parent c8b0d29
commit e75ffa8
Show file tree

Hide file tree

Showing 27 changed files with 272 additions and 241 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
 import { Routes, Route } from 'react-router-dom';
+import { useQueryClient } from 'react-query';
+import { useSelector } from 'react-redux';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import Nav from './components/Nav';
@@ -24,8 +26,16 @@ import ParticipatingRestaurant from './pages/MyPage/ParticipatingRestaurant/Part
 
 const App = () => {
   const { login, refresh, handleAuthState } = useAuth();
+  const authState = useSelector((state) => state.userAuth.state);
+  const queryClient = useQueryClient();
+  queryClient.setDefaultOptions({
+    queries: {
+      enabled: authState !== 'initial' && authState !== 'pending',
+    },
+  });
 
   useEffect(handleAuthState);
+
   return (
     <>
       <Header />

diff --git a/src/libs/common.helpers.jsx b/src/libs/common.helpers.jsx
@@ -21,19 +21,6 @@ export const useWish = (id, _isWish) => {
   const { authInfo, isAuthorized } = useAuth();
   const queryClient = useQueryClient();
   const [isWish, setIsWish] = useState(_isWish);
-  // const { data: isWishRes } = (id &&
-  //   useQuery(
-  //     ['get', 'wishIsLike', id],
-  //     () =>
-  //       axios
-  //         .get(url, {
-  //           headers: {
-  //             Authorization: `${authInfo && authInfo.accessToken}`,
-  //           },
-  //         })
-  //         .then((res) => res.data),
-  //     { refetchOnWindowFocus: false }
-  //   )) || { data: false };
 
   const { mutate: pushWish } = useMutation(
     ['push', 'isLike'],
@@ -43,7 +30,12 @@ export const useWish = (id, _isWish) => {
           Authorization: `${authInfo && authInfo.accessToken}`,
         },
       }),
-    { onSuccess: () => queryClient.invalidateQueries(['wishList']) }
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['wishList']);
+        queryClient.invalidateQueries(['restaurant', String(id)]);
+      },
+    }
   );
 
   // const isWish = isAuthorized() && isWishRes;
@@ -191,7 +183,7 @@ export const useShare = (restaurant) => {
         templateArgs: {
           imgUrl: restaurant.imageUrl,
           title: restaurant.restaurantName,
-          rating: restaurant.rating,
+          rating: Number(restaurant.rating).toFixed(1),
           reviewCount: restaurant.reviewCount,
           tags: `#${restaurant.foodCategory} #${restaurant.locationCategory} #${restaurant.locationTag}`,
           btnTitle: "'점메추'에서 자세히 보기",

diff --git a/src/pages/Detail/Detail.jsx b/src/pages/Detail/Detail.jsx
@@ -16,8 +16,9 @@ const Detail = () => {
     isNewMenuModalOpen,
     setIsNewMenuModalOpen,
     restaurant,
-    isRestaurantLoading,
-    restaurantError,
+    // isRestaurantLoading,
+    // restaurantError,
+    restaurantStatus,
     menus,
     // isMenusLoading,
     // menusError,
@@ -27,7 +28,7 @@ const Detail = () => {
     openNewMenuModal,
   } = useDetail(id);
 
-  if (isRestaurantLoading || restaurantError) return null;
+  if (restaurantStatus !== 'success') return null;
 
   return (
     <DetailContainer>

diff --git a/src/pages/Detail/DetailInfo.jsx b/src/pages/Detail/DetailInfo.jsx
@@ -48,16 +48,16 @@ const DetailInfo = ({
             {restaurantData.locationCategory} {'>'} {restaurantData.locationTag}
           </div>
         </div>
-        {restaurantData.recommendCategoryList.length > 0 && (
-          <div
-            className="info"
-            onClick={() => {
-              setIsMore((state) => !state);
-            }}
-          >
-            <div className="key">추천 태그</div>
-            <div className="value">
-              <div className="recom">
+        <div
+          className="info"
+          onClick={() => {
+            setIsMore((state) => !state);
+          }}
+        >
+          <div className="key">추천 태그</div>
+          <div className="value">
+            <div className="recom">
+              {restaurantData.recommendCategoryList.length > 0 ? (
                 <div
                   className="recomTag"
                   style={{
@@ -74,47 +74,51 @@ const DetailInfo = ({
                   </span>
                   {restaurantData.recommendCategoryList[0].name}
                 </div>
+              ) : (
+                <div className="">추천 태그를 추가해주세요.</div>
+              )}
+              {restaurantData.recommendCategoryList.length > 1 && (
                 <button type="button" className="etc">
                   <span className="">
                     외 {restaurantData.recommendCategoryList.length - 1}개
                   </span>
                   {/* <img src={detailIcon} alt="" className="" /> */}
                   <span className="moreBtn">{isMore ? '▲' : '▼'}</span>
                 </button>
-              </div>
-              {isMore &&
-                restaurantData.recommendCategoryList.slice(1).map((tag) => (
-                  <div
-                    key={tag.id}
-                    className="recomTag more"
+              )}
+            </div>
+            {isMore &&
+              restaurantData.recommendCategoryList.slice(1).map((tag) => (
+                <div
+                  key={tag.id}
+                  className="recomTag more"
+                  style={{
+                    borderColor: tag.color,
+                  }}
+                >
+                  <span
+                    className="hash"
                     style={{
-                      borderColor: tag.color,
+                      color: tag.color,
                     }}
                   >
-                    <span
-                      className="hash"
-                      style={{
-                        color: tag.color,
-                      }}
-                    >
-                      #
-                    </span>{' '}
-                    {tag.name}
-                  </div>
-                ))}
-            </div>
-            <button
-              type="button"
-              className="recomTagChangeBtn"
-              onClick={(e) => {
-                openRecomTagModal();
-                e.stopPropagation();
-              }}
-            >
-              <img src={pencilIcon} alt="" className="" />
-            </button>
+                    #
+                  </span>{' '}
+                  {tag.name}
+                </div>
+              ))}
           </div>
-        )}
+          <button
+            type="button"
+            className="recomTagChangeBtn"
+            onClick={(e) => {
+              openRecomTagModal();
+              e.stopPropagation();
+            }}
+          >
+            <img src={pencilIcon} alt="" className="" />
+          </button>
+        </div>
       </div>
       {isRecomTagOpen && (
         <RecommendTagFetchModal

diff --git a/src/pages/Detail/DetailMenuElement.jsx b/src/pages/Detail/DetailMenuElement.jsx
@@ -49,9 +49,9 @@ const DetailMenuElement = ({ menu, useMenuElem }) => {
           menu={menu}
         />
       )}
-      {isMenuSaleInfoModalOpen && menu.saleComment && (
+      {isMenuSaleInfoModalOpen && menu.saleExplain && (
         <DetailMenuSaleInfoModal
-          saleComment={menu.saleComment}
+          saleExplain={menu.saleExplain}
           closeMenuSaleInfoModal={() => {
             setIsMenuSaleInfoModalOpen(false);
           }}
@@ -67,7 +67,7 @@ const DetailMenuElement = ({ menu, useMenuElem }) => {
           }}
         >
           <img src={cameraIcon} alt="" className="" />
-          {menu.photoNum}
+          <div className="imageCount">{menu.imageCount}</div>
         </button>
 
         {menu.salePrice ? (

diff --git a/src/pages/Detail/DetailMenuFetchModal.jsx b/src/pages/Detail/DetailMenuFetchModal.jsx
@@ -19,7 +19,7 @@ const DetailMenuFetchModal = ({
     price,
     setPrice,
     setSalePrice,
-    setSaleComment,
+    setSaleExplain,
     isWarning,
     isMenuDeleteModalOpen,
     setIsMenuDeleteModalOpen,
@@ -31,9 +31,9 @@ const DetailMenuFetchModal = ({
       setName(menu.name);
       setPrice(menu.price);
       setSalePrice(menu.salePrice);
-      setSaleComment(menu.saleComment);
+      setSaleExplain(menu.saleExplain);
     }
-  }, [menu, setName, setPrice, setSaleComment, setSalePrice]);
+  }, [menu, setName, setPrice, setSaleExplain, setSalePrice]);
 
   return (
     <DetailMenuUpdateModalContainer>
@@ -146,10 +146,10 @@ const DetailMenuFetchModal = ({
             <textarea
               placeholder="예)학생증을 보여주면 1,000원을 할인해줘요."
               className="updateInput saleComment"
-              defaultValue={menu && menu.saleComment}
+              defaultValue={menu && menu.saleExplain}
               maxLength={200}
               onChange={(e) => {
-                setSaleComment(e.target.value);
+                setSaleExplain(e.target.value);
               }}
             />
           </div>

diff --git a/src/pages/Detail/DetailMenuPhotoInnerModal.jsx b/src/pages/Detail/DetailMenuPhotoInnerModal.jsx
@@ -101,10 +101,9 @@ const DetailMenuPhotoInnerModal = ({
         {/* <div className="fileName">{selectedPhoto.originalName}</div> */}
         <div className="photoInfo">
           <div className="userName">
-            photo by{' '}
-            <span className="bold">{selectedPhoto.member.nickname}</span>
+            photo by <span className="bold">{selectedPhoto.nickname}</span>
           </div>
-          {selectedPhoto.member.id === userId && (
+          {selectedPhoto.userId === userId && (
             <button
               type="button"
               className="deleteBtn"

diff --git a/src/pages/Detail/DetailMenuPhotoModal.jsx b/src/pages/Detail/DetailMenuPhotoModal.jsx
@@ -43,8 +43,8 @@ const DetailMenuPhotoModal = ({ closeMenuPhotoModal, menu }) => {
         </button>
         <div className="menuPhotoModalTop">
           <div className="menuPhotoModalTitle">{menu.name}</div>
-          {menu.photoNum && (
-            <div className="menuModalPhotoPhotoNum">[{menu.photoNum}]</div>
+          {menu.imageCount && (
+            <div className="menuModalPhotoPhotoNum">[{menu.imageCount}]</div>
           )}
           {/* <button type="button" className="changeThumbBtn">
             대표 이미지 설정

diff --git a/src/pages/Detail/DetailMenuSaleInfoModal.jsx b/src/pages/Detail/DetailMenuSaleInfoModal.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { DetailMenuSaleInfoModalContainer } from './detail.style';
 import xIcon from '../../assets/img/x-icon.svg';
 
-const DetailMenuSaleInfoModal = ({ saleComment, closeMenuSaleInfoModal }) => {
+const DetailMenuSaleInfoModal = ({ saleExplain, closeMenuSaleInfoModal }) => {
   return (
     <DetailMenuSaleInfoModalContainer>
       <div className="modalInner">
@@ -15,7 +15,7 @@ const DetailMenuSaleInfoModal = ({ saleComment, closeMenuSaleInfoModal }) => {
           <img src={xIcon} alt="" />
         </button>
         <div className="saleCommentTitle">세일 설명</div>
-        <div className="saleComment">{saleComment}</div>
+        <div className="saleComment">{saleExplain}</div>
       </div>
     </DetailMenuSaleInfoModalContainer>
   );

diff --git a/src/pages/Detail/DetailReviewElement.jsx b/src/pages/Detail/DetailReviewElement.jsx
@@ -26,6 +26,7 @@ const DetailReviewElement = ({ restaurantId, review }) => {
     pushLike,
     isAuthor,
     isLike,
+    likeCount,
   } = useReviewElem(restaurantId, review);
 
   const navigate = useNavigate();
@@ -94,7 +95,7 @@ const DetailReviewElement = ({ restaurantId, review }) => {
             }}
           >
             <img className="likeImg" alt="" />
-            <span className="likeNum">{handleLikeNum(review.likeCount)}</span>
+            <span className="likeNum">{handleLikeNum(likeCount)}</span>
           </button>
           <div className="date">{review.createdDate}</div>
         </div>

diff --git a/src/pages/Detail/DetailTop.jsx b/src/pages/Detail/DetailTop.jsx
@@ -24,6 +24,7 @@ const DetailTop = ({ restaurant, tab, changeTab }) => {
     restaurant && restaurant.id,
     restaurant.liked
   );
+
   const { isShareModalOpen, ShareModalBtn, ShareModal } = useShare(restaurant);
 
   return (
@@ -55,10 +56,10 @@ const DetailTop = ({ restaurant, tab, changeTab }) => {
           </div>
           <div className="wishDiv">
             <img src={smallHeartIcon} alt="" />
-            <span>{restaurant.wishCount}</span>
+            <span>{restaurant.likeCount}</span>
           </div>
         </div>
-        <div className="rate">{restaurant.rating}</div>
+        <div className="rate">{Number(restaurant.rating).toFixed(1)}</div>
         <div className="bestReview">"{restaurant.bestReview}"</div>
       </div>
 

diff --git a/src/pages/Detail/RecommendTagFetchModal.jsx b/src/pages/Detail/RecommendTagFetchModal.jsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/prop-types */
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import axios from 'axios';
 import { RecomTagModalContainer } from './detail.style';
 import xIcon from '../../assets/img/x-icon.svg';
@@ -14,6 +14,7 @@ const RecommendTagFetchModal = ({ closeModal, restId, recommendTag }) => {
   const [tags, setTags] = useState([]);
   const recommendTagIds = recommendTag.map((tag) => tag.id);
   const accessToken = useSelector((state) => state.userAuth.accessToken);
+  const queryClient = useQueryClient();
 
   const { data: recommendTags } = useQuery(
     'recommend-category',
@@ -26,7 +27,9 @@ const RecommendTagFetchModal = ({ closeModal, restId, recommendTag }) => {
         }
         return res.data;
       }),
-    { refetchOnWindowFocus: false }
+    {
+      refetchOnWindowFocus: false,
+    }
   );
 
   const { mutate: updateRecommendTag, status } = useMutation(
@@ -42,7 +45,12 @@ const RecommendTagFetchModal = ({ closeModal, restId, recommendTag }) => {
             Authorization: `${accessToken}`,
           },
         }
-      )
+      ),
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['restaurant', String(restId)]);
+      },
+    }
   );
 
   useEffect(() => {