Feat: axios error handling

src/api/detail.ts

@@ -12,12 +12,19 @@ export const getPlaceInfo = async (id: number, typeId: number): Promise<placeInf
   return response.data;
 };
 
-export const getReviewsRating = async (id: number, typeId: number, title: string): Promise<ReviewsRating> => {
-  const response = await axios.get('/api/reviews/rating', {
-    params: {placeId: id, contentTypeId: typeId, placeTitle: title},
-  });
+export const getReviewsRating = async (id: number, typeId: number, title: string): Promise<ReviewsRating | any> => {
+  try {
+    const response = await axios.get('/api/reviews/rating', {
+      params: {placeId: id, contentTypeId: typeId, placeTitle: title},
+    });
 
-  return response.data;
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      console.log(error);
+      return error.response;
+    }
+  }
 };
 
 export const getIsWish = async (id: number) => {

src/api/review.ts

@@ -43,7 +43,10 @@ export const reviewRequest = {
 
       return res.data;
     } catch (error) {
-      console.log(error);
+      if (axios.isAxiosError(error)) {
+        console.log(error);
+        return error.response;
+      }
     }
   },
 };

src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx

@@ -1,36 +1,42 @@
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import {useSetRecoilState} from 'recoil';
 
-import styles from "./BottomFixedBtn.module.scss";
+import styles from './BottomFixedBtn.module.scss';
 
-import { IsLoginState } from "@/recoil/detail/detail";
-import { isModalOpenState, modalContentState } from "@/recoil/vote/alertModal";
+import {isModalOpenState, modalContentState} from '@/recoil/vote/alertModal';
 
-import { BottomFixedBtnProps } from "@/types/detail";
+import {BottomFixedBtnProps} from '@/types/detail';
+import {Cookies} from 'react-cookie';
+import {useNavigate} from 'react-router-dom';
 
-function BottomFixedBtn({ onOpen }: BottomFixedBtnProps) {
+function BottomFixedBtn({onOpen}: BottomFixedBtnProps) {
   const setIsModalOpen = useSetRecoilState(isModalOpenState);
   const setModalContent = useSetRecoilState(modalContentState);
-  const isLogin = useRecoilValue(IsLoginState);
+
+  const cookies = new Cookies();
+  const isLogin = cookies.get('isLogin');
+  const navigate = useNavigate();
 
   const notLoginContent = {
-    title: "로그인이 필요한 기능입니다.",
-    subText: "로그인하고 모든 서비스를 이용해 보세요! ",
-    cancelText: "닫기",
-    actionButton: "로그인하기",
+    title: '로그인이 필요한 기능입니다.',
+    subText: '로그인하고 모든 서비스를 이용해 보세요! ',
+    cancelText: '닫기',
+    actionButton: '로그인하기',
     isSmallSize: true,
+    onClickAction: () => {
+      navigate('/auth/login');
+    },
   };
-
   const showNotLoginModal = () => {
     setIsModalOpen(true);
-    setModalContent({ ...notLoginContent });
+    setModalContent({...notLoginContent});
   };
 
   return (
     <div className={styles.container}>
       <div
         className={styles.container__wrapper}
         style={{
-          backgroundColor: "#2388FF",
+          backgroundColor: '#2388FF',
         }}
         onClick={() => {
           if (isLogin) {

src/components/Detail/Contents/Contents.tsx

@@ -35,9 +35,12 @@ function Contents({data, onOpen, reviewsRating}: ContentsProps) {
     useGetReviews(data.id, data.contentTypeId, data.title),
   );
 
+  console.log(reviewsData, 'rd');
+
   const reviews: any[] = [];
 
-  if (reviewsData) {
+  if (reviewsData?.pages[0].status !== 200) {
+  } else {
     reviewsData?.pages.map((data: any) => {
       data.data.reviews.map((data: any) => reviews.push(data));
     });

src/components/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss

@@ -1,8 +1,8 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
-  margin: 20px 0;
-  padding-bottom: 40px;
+  margin: 24px 0;
+  padding-bottom: 48px;
 
   border-bottom: 12px solid $neutral100;
 
@@ -20,6 +20,7 @@
     display: flex;
     flex-direction: column;
     gap: 12px;
+    text-overflow: ellipsis;
 
     &__item {
       display: flex;

src/components/Detail/Contents/Information/Information.module.scss

@@ -0,0 +1,38 @@
+@use '@/sass' as *;
+
+.linkContainer {
+  padding: 32px 20px;
+
+  display: flex;
+  justify-content: space-between;
+
+  border-top: 1px solid $neutral100;
+  border-bottom: 1px solid $neutral100;
+
+  &__text {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    &__sale {
+      @include typography(button);
+
+      color: $primary300;
+
+      margin-right: 8px;
+    }
+
+    &__reserve {
+      @include typography(titleSmall);
+      color: $neutral900;
+      margin-right: 20px;
+    }
+
+    &__icon {
+      position: absolute;
+      top: 45%;
+      right: 0;
+      transform: translate(0, -50%);
+    }
+  }
+}

src/components/Detail/Contents/Information/Information.tsx

@@ -2,6 +2,10 @@ import {placeInfoDataPlace} from '@/types/detail';
 import BasicInformation from './BasicInformation/BasicInformation';
 // import Others from './Others/Others';
 import ShortReviews from './ShortReveiws/ShortReviews';
+import Yanolja from '@/assets/logo_yanolja.svg?react';
+import styles from './Information.module.scss';
+import {AiOutlineRight} from 'react-icons/ai';
+import {Link} from 'react-router-dom';
 
 export interface InformationProps {
   data: placeInfoDataPlace;
@@ -24,6 +28,18 @@ export interface InformationProps {
 function Information({data, onOpen, reviewsRating, reviews}: InformationProps) {
   return (
     <div>
+      <Link
+        className={styles.linkContainer}
+        to={`https://www.yanolja.com/search/${data.title}?keyword=${data.title}`}
+        target='_blank'
+      >
+        <Yanolja />
+        <div className={styles.linkContainer__text}>
+          <span className={styles.linkContainer__text__sale}>할인가</span>
+          <span className={styles.linkContainer__text__reserve}>예약하러 가기</span>
+          <AiOutlineRight fontSize='2rem' className={styles.linkContainer__text__icon} />
+        </div>
+      </Link>
       <BasicInformation
         location={data.location}
         openTime={data.openTime}

src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.module.scss

@@ -1,7 +1,7 @@
-@use "@/sass" as *;
+@use '@/sass' as *;
 
 .container {
-  padding: 40px 0;
+  padding-bottom: 48px;
   border-bottom: 12px solid $neutral100;
 
   &__title {
@@ -52,6 +52,12 @@
 
   &__reviewsBox {
     margin-bottom: 16px;
+    &__notReviews {
+      margin: 64px 0;
+      text-align: center;
+      @include typography(subTitle);
+      color: $neutral400;
+    }
   }
 
   &__allBtn {

src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.tsx

@@ -52,10 +52,12 @@ function ShortReviews({onOpen, reviewsRating, reviews}: ContentsShortReviewsProp
       <div className={styles.container__pointBox}>
         <GoStarFill className={styles.container__pointBox__star} />
         <span className={styles.container__pointBox__point}>{reviewsRating.rating}</span>
-        <span className={styles.container__pointBox__reviewsCount}>{`(${reviewsRating.userRatingCount})`}</span>
+        <span className={styles.container__pointBox__reviewsCount}>{`(${
+          reviewsRating.userRatingCount ? reviewsRating.userRatingCount : '리뷰 없음'
+        })`}</span>
       </div>
       <div className={styles.container__reviewsBox}>
-        {reviews &&
+        {reviews.length > 0 ? (
           reviews
             .slice(0, 2)
             .map((data, i) => (
@@ -69,7 +71,10 @@ function ShortReviews({onOpen, reviewsRating, reviews}: ContentsShortReviewsProp
                 content={data.content}
                 images={data.images}
               />
-            ))}
+            ))
+        ) : (
+          <div className={styles.container__reviewsBox__notReviews}>리뷰가 아직 없습니다.</div>
+        )}
       </div>
       <div
         className={styles.container__allBtn}

src/components/Detail/Contents/ReviewBottomSlide/ReviewBottomSlide.tsx

@@ -96,7 +96,7 @@ function ReviewBottomSlide({placeId, contentTypeId, title, slideOnClose}: Review
         >
           <CloseIcon width='2rem' height='2rem' />
         </button>
-        <div className={styles.container__top__title}>롯데시티 호텔</div>
+        <div className={styles.container__top__title}>{title}</div>
       </div>
       <StarsWrapper starCount={starCount} setStarCount={setStarCount} setIsValuedCount={setIsValuedCount} />
       <DateWrapper

src/components/Detail/Contents/Reviews/Reviews.module.scss

@@ -1,4 +1,4 @@
-@use "@/sass";
+@use '@/sass' as *;
 
 .container {
   padding: 40px 0;
@@ -11,15 +11,15 @@
     justify-content: space-between;
 
     h3 {
-      @include sass.typography(titleMedium);
+      @include typography(titleMedium);
     }
 
     &__rightBox {
       display: flex;
       cursor: pointer;
 
       span {
-        @include sass.typography(tabLabel);
+        @include typography(tabLabel);
       }
     }
   }
@@ -35,30 +35,37 @@
     &__star {
       display: inline;
       font-size: 32px;
-      color: sass.$etc0;
+      color: $etc0;
     }
 
     &__point {
       color: #1d2433;
-      @include sass.typography(headline);
+      @include typography(headline);
     }
 
     &__reviewsCount {
-      color: sass.$neutral400;
-      @include sass.typography(tabLabel);
+      color: $neutral400;
+      @include typography(tabLabel);
     }
   }
 
   &__reviewsBox {
     margin-bottom: 16px;
+
+    &__notReviews {
+      margin: 52px 0;
+      text-align: center;
+      @include typography(subTitle);
+      color: $neutral400;
+    }
   }
 
   &__allBtn {
     padding: 8px;
 
     margin: 0 20px;
 
-    border: 1px solid sass.$neutral300;
+    border: 1px solid $neutral300;
     border-radius: 8px;
 
     display: flex;
@@ -68,7 +75,7 @@
     cursor: pointer;
 
     span {
-      @include sass.typography(tabLabel);
+      @include typography(tabLabel);
     }
   }
 }