Merge pull request #217 from Strong-Potato/212-fix-catch-err-in-detai…

…l-page Fix: error fixed and modify feature
Strong-Potato · Jan 27, 2024 · 164eeb0 · 164eeb0
2 parents eee5342 + e522b93
commit 164eeb0
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 47 deletions.
diff --git a/src/api/detail.ts b/src/api/detail.ts
@@ -21,12 +21,19 @@ export const getReviewsRating = async (id: number, typeId: number, title: string
 };
 
 export const getIsWish = async (id: number) => {
-  const response = await axios.get(`/api/wishes/${id}`, {
-    withCredentials: true,
-  });
-  console.log(response.data);
+  try {
+    const response = await axios.get(`/api/wishes/${id}`, {
+      withCredentials: true,
+    });
+    console.log(response.data);
 
-  return response.data;
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error);
+      return error.response;
+    }
+  }
 };
 
 export const getPlacesNearby = async (

diff --git a/...s/Detail/BottomFixedBtn/RegistrationSlide/RegistrationTripSpace/RegistrationTripSpace.tsx b/...s/Detail/BottomFixedBtn/RegistrationSlide/RegistrationTripSpace/RegistrationTripSpace.tsx
@@ -30,7 +30,9 @@ function RegistrationTripSpace({tripSelectedId, setTripSelectedId, spaces}: Regi
           <div
             className={styles.container__select}
             onClick={() => {
-              setIsDropped(!isDropped);
+              if (spaces.length > 0) {
+                setIsDropped(!isDropped);
+              }
             }}
           >
             {isSelected ? (

diff --git a/src/components/Detail/Contents/Information/BasicInformation/MapInDetail/MapInDetail.tsx b/src/components/Detail/Contents/Information/BasicInformation/MapInDetail/MapInDetail.tsx
@@ -6,6 +6,8 @@ import {CustomOverlayMap, Map} from 'react-kakao-maps-sdk';
 import styles from './MapInDetail.module.scss';
 
 import BigHomeMarker from '@/assets/homeIcons/map/house_big.svg?react';
+import BigFlagMarker from '@/assets/homeIcons/map/flag_big.svg?react';
+import BigRestaurantMarker from '@/assets/homeIcons/map/restaurant_big.svg?react';
 
 import MapModal from '../MapModal/MapModal';
 
@@ -52,7 +54,9 @@ function MapInDetail({lat, lng, title, thumbnail, id, contentTypeId, areaCode}:
         onDoubleClick={handleMapDoubleClick}
       >
         <CustomOverlayMap position={{lat: lat, lng: lng}}>
-          <BigHomeMarker />
+          {contentTypeId === 32 && <BigHomeMarker />}
+          {contentTypeId === 39 && <BigRestaurantMarker />}
+          {contentTypeId !== 39 && contentTypeId !== 32 && <BigFlagMarker />}
         </CustomOverlayMap>
       </Map>
       <MapModal

diff --git a/src/components/Detail/Contents/Information/BasicInformation/MapModal/MapModal.tsx b/src/components/Detail/Contents/Information/BasicInformation/MapModal/MapModal.tsx
@@ -5,6 +5,8 @@ import {CustomOverlayMap, Map} from 'react-kakao-maps-sdk';
 import styles from './MapModal.module.scss';
 
 import BigHomeMarker from '@/assets/homeIcons/map/house_big.svg?react';
+import BigFlagMarker from '@/assets/homeIcons/map/flag_big.svg?react';
+import BigRestaurantMarker from '@/assets/homeIcons/map/restaurant_big.svg?react';
 import WishBtn from '@/components/WishBtn/WishBtn';
 
 interface MapModalProps {
@@ -38,7 +40,9 @@ function MapModal({isOpen, onClose, lat, lng, title, thumbnail, id, contentTypeI
         <DrawerBody className={styles.body} p='0'>
           <Map center={{lat: lat, lng: lng}} className={styles.map} level={3}>
             <CustomOverlayMap position={{lat: lat, lng: lng}}>
-              <BigHomeMarker />
+              {contentTypeId === 32 && <BigHomeMarker />}
+              {contentTypeId === 39 && <BigRestaurantMarker />}
+              {contentTypeId !== 39 && contentTypeId !== 32 && <BigFlagMarker />}
             </CustomOverlayMap>
           </Map>
         </DrawerBody>

diff --git a/src/components/Detail/Contents/Review/Review.tsx b/src/components/Detail/Contents/Review/Review.tsx
@@ -8,6 +8,11 @@ import ReviewImageSlider from './ReviewImageSlider/ReviewImageSlider';
 import {ReviewPropsTypes} from '@/types/detail';
 
 function Review({name, isGoogle, rating, visitedAt, content, images, profileImage}: ReviewPropsTypes) {
+  const changeDateFormat = (visitedAt: string) => {
+    const arr = visitedAt.split('-');
+    return `${arr[0]}년 ${arr[1]}월 방문`;
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.container__imgWrapper}>
@@ -20,8 +25,8 @@ function Review({name, isGoogle, rating, visitedAt, content, images, profileImag
         </div>
         <div className={styles.container__contentsBox__secondItems}>
           <GoStarFill className={styles.container__contentsBox__secondItems__star} />
-          <span className={styles.container__contentsBox__secondItems__point}>{rating}</span>
-          <span className={styles.container__contentsBox__secondItems__visitedAt}>{visitedAt}</span>
+          <span className={styles.container__contentsBox__secondItems__point}>{rating.toFixed(1)}</span>
+          <span className={styles.container__contentsBox__secondItems__visitedAt}>{changeDateFormat(visitedAt)}</span>
         </div>
         <div className={styles.container__contentsBox__content}>{content}</div>
         {images && <ReviewImageSlider images={images} />}

diff --git a/src/components/Detail/Main/Title/Title.tsx b/src/components/Detail/Main/Title/Title.tsx
@@ -7,6 +7,7 @@ import CustomToast from '@/components/CustomToast/CustomToast';
 import WishBtn from '@/components/WishBtn/WishBtn';
 
 import {translateCategoryToStr} from '@/utils/translateSearchData';
+import {useLocation} from 'react-router-dom';
 
 interface TitleProps {
   id: number;
@@ -21,6 +22,19 @@ function Title({id, contentTypeId, title, rating, reviewsCount}: TitleProps) {
 
   const categoryStr = translateCategoryToStr(contentTypeId);
 
+  // 링크 복사
+  const location = useLocation();
+
+  const handleCopyClipBoard = async () => {
+    try {
+      console.log(location);
+      await navigator.clipboard.writeText(`tripvote.site${location.pathname}`);
+      showToast('링크가 복사되었습니다.');
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return (
     <div className={styles.container}>
       <h2 className={styles.container__header}>{title}</h2>
@@ -32,13 +46,7 @@ function Title({id, contentTypeId, title, rating, reviewsCount}: TitleProps) {
       </div>
       <div className={styles.container__positionAbsoluteIcons}>
         <WishBtn placeId={id} contentTypeId={contentTypeId} size={'2.4rem'} />
-        <IoShareSocialOutline
-          fontSize='2.4rem'
-          cursor='pointer'
-          onClick={() => {
-            showToast('링크가 복사되었습니다.');
-          }}
-        />
+        <IoShareSocialOutline fontSize='2.4rem' cursor='pointer' onClick={() => handleCopyClipBoard()} />
       </div>
     </div>
   );

diff --git a/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx b/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx
@@ -17,6 +17,7 @@ import ReviewBottomSlide from '../../Contents/ReviewBottomSlide/ReviewBottomSlid
 
 import {NavigationMeatballProps} from '@/types/detail';
 import {useDeleteWishes, usePostWishes} from '@/hooks/Detail/useWish';
+import {useLocation} from 'react-router-dom';
 
 const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId, title}: NavigationMeatballProps) => {
   const [isWish, setIsWish] = useRecoilState(IsHeartValued);
@@ -61,6 +62,19 @@ const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId, tit
     }
   };
 
+  // 링크 복사
+  const location = useLocation();
+
+  const handleCopyClipBoard = async () => {
+    try {
+      console.log(location);
+      await navigator.clipboard.writeText(`tripvote.site${location.pathname}`);
+      showToast('링크가 복사되었습니다.');
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   return (
     <div className={styles.container}>
       <button
@@ -123,7 +137,7 @@ const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId, tit
       </button>
       <button
         onClick={() => {
-          showToast('링크가 복사되었습니다.');
+          handleCopyClipBoard();
           onClose();
           document.body.style.removeProperty('overflow');
         }}

diff --git a/src/components/WishBtn/WishBtn.module.scss b/src/components/WishBtn/WishBtn.module.scss
@@ -0,0 +1,24 @@
+@use '@/sass' as *;
+
+.title {
+  @include typography(subTitle);
+  color: $neutral900;
+  margin-bottom: 8px;
+}
+.subText {
+  @include typography(tabLabel);
+  color: $neutral400;
+}
+
+.buttons {
+  &__cancel {
+    @include typography(button);
+    width: 50%;
+    color: $neutral400;
+  }
+  &__action {
+    @include typography(button);
+    width: 50%;
+    color: $primary400;
+  }
+}
diff --git a/src/components/WishBtn/WishBtn.tsx b/src/components/WishBtn/WishBtn.tsx
@@ -1,12 +1,15 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import {FaHeart, FaRegHeart} from 'react-icons/fa';
-import {useSetRecoilState} from 'recoil';
 
 import {useDeleteWishes, useGetIsWish, usePostWishes} from '@/hooks/Detail/useWish';
 
-import {isModalOpenState, modalContentState} from '@/recoil/vote/alertModal';
-
 import CustomToast from '../CustomToast/CustomToast';
+import {useDebounceBoolean} from '@/hooks/useDebounce';
+import {Cookies} from 'react-cookie';
+
+import {Modal, ModalBody, ModalContent, ModalFooter, ModalOverlay} from '@chakra-ui/react';
+
+import styles from './WishBtn.module.scss';
 
 interface WishBtnProps {
   placeId: number;
@@ -15,36 +18,34 @@ interface WishBtnProps {
   className?: string;
 }
 
-const notLoginContent = {
-  title: '로그인이 필요한 기능입니다.',
-  subText: '로그인하고 모든 서비스를 이용해 보세요! ',
-  cancelText: '닫기',
-  actionButton: '로그인하기',
-  isSmallSize: true,
-};
-
 function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: WishBtnProps) {
-  const setIsModalOpen = useSetRecoilState(isModalOpenState);
-  const setModalContent = useSetRecoilState(modalContentState);
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [wishInitial, setWishInitial] = useState<boolean>(false);
 
-  // isLogin 구현해야 함
-  const isLogin = true;
+  const cookies = new Cookies();
+  const isLogin = cookies.get('isLogin');
 
   const showNotLoginModal = () => {
     setIsModalOpen(true);
-    setModalContent({...notLoginContent});
   };
 
   const showToast = CustomToast();
 
-  const {
-    data: {data: wish},
-  } = useGetIsWish(placeId);
-  const [isWish, setIsWish] = useState(wish);
+  const [isWish, setIsWish] = useState<boolean>(false);
+
+  if (isLogin) {
+    const {
+      data: {data: wish},
+    } = useGetIsWish(placeId);
+
+    setIsWish(wish);
+  }
+
   const postWishes = usePostWishes();
   const deleteWishes = useDeleteWishes();
 
-  // postWishes error 리턴 시 로그인 모달 띄우기
+  const debounce = useDebounceBoolean(isWish, 1000);
+
   const handleWishClick = () => {
     if (isLogin) {
       if (!isWish) {
@@ -58,11 +59,23 @@ function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: Wish
         showToast('찜 목록에서 제거되었습니다.');
         setIsWish(false);
       }
+      setWishInitial(true);
     } else {
       showNotLoginModal();
     }
   };
 
+  useEffect(() => {
+    if (wishInitial) {
+      if (debounce) {
+        postWishes.mutate({placeId: placeId, contentTypeId: contentTypeId});
+      } else {
+        deleteWishes.mutate(placeId);
+      }
+    }
+    console.log(debounce);
+  }, [debounce]);
+
   return (
     <>
       {isWish ? (
@@ -89,6 +102,24 @@ function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: Wish
           className={className}
         />
       )}
+      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} variant='alertModal'>
+        <ModalOverlay />
+        <ModalContent style={{margin: '288px 48px auto'}}>
+          <ModalBody>
+            <p className={styles.title}>로그인이 필요한 기능입니다.</p>
+            <span className={styles.subText}>로그인하고 모든 서비스를 이용해 보세요!</span>
+          </ModalBody>
+
+          <ModalFooter>
+            <button onClick={() => setIsModalOpen(false)} className={styles.buttons__cancel}>
+              닫기
+            </button>
+            <button onClick={() => {}} className={styles.buttons__action}>
+              로그인하
+            </button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </>
   );
 }

diff --git a/src/hooks/Detail/useReviews.ts b/src/hooks/Detail/useReviews.ts
@@ -7,6 +7,7 @@ export const useGetReviewsRating = (id: number, typeId: number, title: string) =
   return useSuspenseQuery({
     queryKey: ['reviewsRating', id, typeId, title],
     queryFn: () => getReviewsRating(id, typeId, title),
+    retry: false,
   });
 };
 

diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
@@ -15,3 +15,19 @@ export const useDebounce = (value: string, delay: number) => {
 
   return debouncedValue;
 };
+
+export const useDebounceBoolean = (value: boolean, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
diff --git a/src/pages/Detail/Detail.tsx b/src/pages/Detail/Detail.tsx
@@ -38,13 +38,6 @@ function Detail() {
     data: {data: reviewsRating},
   } = useGetReviewsRating(Number(params?.split(' ')[0]), Number(params?.split(' ')[1]), placeInfo.title);
 
-  // const reviewsRating = {
-  //   rating: 5.0,
-  //   userRatingCount: 5,
-  // };
-
-  console.log(reviewsRating);
-
   console.log(placeInfo);
 
   const onBottomSlideOpen = (content: ReactNode, isReview: boolean) => {