Feat: create wishes api

src/api/detail.ts

@@ -34,6 +34,8 @@ export const getIsWish = async (id: number, setIsWish: React.Dispatch<React.SetS
 
   setIsWish(response.data.data);
 
+  console.log(response.data);
+
   return response.data;
 };
 
@@ -75,12 +77,30 @@ export const getMySpaces = async (page: number, size: number, sort: string): Pro
 
 // --------------------------- POST ---------------------------
 
-export const PostWishes = async ({placeId, contentTypeId}: Wishes) => {
+export const postWishes = async ({placeId, contentTypeId}: Wishes) => {
   try {
-    const response = await axios.post('/api/wishes', {placeId, contentTypeId});
+    const response = await axios.post(
+      '/api/wishes',
+      {placeId, contentTypeId},
+      {
+        withCredentials: true,
+      },
+    );
     console.log('axios 포스트 성공', response);
     return response.data;
   } catch (error) {
     console.error(error);
   }
 };
+
+// --------------------------- DELETE ---------------------------
+
+export const deleteWishes = async (id: number) => {
+  try {
+    const response = await axios.delete(`/api/wishes/${id}`);
+    console.log('axios delete success', response);
+    return response.data;
+  } catch (error) {
+    console.error(error);
+  }
+};

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

@@ -21,10 +21,11 @@ interface BasicInformationProps {
   openTime: string;
   title: string;
   thumbnail: string;
+  id: number;
   contentTypeId: number;
 }
 
-function BasicInformation({location, openTime, title, thumbnail, contentTypeId}: BasicInformationProps) {
+function BasicInformation({location, openTime, title, thumbnail, id, contentTypeId}: BasicInformationProps) {
   return (
     <div className={styles.container}>
       <div className={styles.container__title}>기본정보</div>
@@ -33,6 +34,7 @@ function BasicInformation({location, openTime, title, thumbnail, contentTypeId}:
         lng={location.longitude}
         title={title}
         thumbnail={thumbnail}
+        id={id}
         contentTypeId={contentTypeId}
         areaCode={location.areaCode}
       />

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

@@ -14,12 +14,13 @@ interface MapInDetailProps {
   lng: number;
   title: string;
   thumbnail: string;
+  id: number;
   contentTypeId: number;
   areaCode: number;
 }
 
 // 장소 정보에 따라 마커 다르게 표시
-function MapInDetail({lat, lng, title, thumbnail, contentTypeId, areaCode}: MapInDetailProps) {
+function MapInDetail({lat, lng, title, thumbnail, id, contentTypeId, areaCode}: MapInDetailProps) {
   const {isOpen, onOpen, onClose} = useDisclosure();
 
   // useEffect(() => {
@@ -63,6 +64,7 @@ function MapInDetail({lat, lng, title, thumbnail, contentTypeId, areaCode}: MapI
         thumbnail={thumbnail}
         contentTypeId={contentTypeId}
         areaCode={areaCode}
+        id={id}
       />
     </>
   );

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

@@ -1,11 +1,11 @@
 import {Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader} from '@chakra-ui/react';
 import {AiOutlineLeft} from 'react-icons/ai';
-import {FaRegHeart} from 'react-icons/fa';
 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 WishBtn from '@/components/WishBtn/WishBtn';
 
 interface MapModalProps {
   isOpen: boolean;
@@ -14,11 +14,12 @@ interface MapModalProps {
   lng: number;
   title: string;
   thumbnail: string;
+  id: number;
   contentTypeId: number;
   areaCode: number;
 }
 
-function MapModal({isOpen, onClose, lat, lng, title, thumbnail, contentTypeId, areaCode}: MapModalProps) {
+function MapModal({isOpen, onClose, lat, lng, title, thumbnail, id, contentTypeId, areaCode}: MapModalProps) {
   return (
     <Drawer
       isOpen={isOpen}
@@ -51,12 +52,7 @@ function MapModal({isOpen, onClose, lat, lng, title, thumbnail, contentTypeId, a
                 {contentTypeId} {areaCode}
               </p>
             </div>
-            <FaRegHeart
-              fontSize='2.4rem'
-              cursor='pointer'
-              className={styles.footer__card__icon}
-              // onClick={handleHeartClick}
-            />
+            <WishBtn placeId={id} contentTypeId={contentTypeId} size={'2.4rem'} className={styles.footer__card__icon} />
           </div>
         </DrawerFooter>
       </DrawerContent>

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

@@ -29,6 +29,7 @@ function Information({data, onOpen, reviewsRating, reviews}: InformationProps) {
         openTime={data.openTime}
         title={data.title}
         thumbnail={data.thumbnail}
+        id={data.id}
         contentTypeId={data.contentTypeId}
       />
       <ShortReviews onOpen={onOpen} reviewsRating={reviewsRating} reviews={reviews} />

src/components/Detail/Contents/Review/ReviewImageSlider/ReviewImageSlider.tsx

@@ -1,19 +1,19 @@
-import { useDisclosure } from "@chakra-ui/react";
-import { useState } from "react";
+import {useDisclosure} from '@chakra-ui/react';
+import {useState} from 'react';
 
-import styles from "./ReviewImageSlider.module.scss";
+import styles from './ReviewImageSlider.module.scss';
 
-import useComponentSize from "@/hooks/useComponetSize";
+import useComponentSize from '@/hooks/useComponetSize';
 
-import SlideModal from "@/components/Detail/Main/SlideModal/SlideModal";
-import SlideButton from "@/components/SlideButton/SlideButton";
+import SlideModal from '@/components/Detail/Main/SlideModal/SlideModal';
+import SlideButton from '@/components/SlideButton/SlideButton';
 
-function ReviewImageSlider({ images }: { images: string[] }) {
+function ReviewImageSlider({images}: {images: string[]}) {
   const [slideLocation, setSlideLocation] = useState<number>(0);
   const [componentRef, size] = useComponentSize();
 
   const [imageIndex, setImageIndex] = useState<number>(0);
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {isOpen, onOpen, onClose} = useDisclosure();
 
   const handleIsOpen = (index: number) => {
     setImageIndex(index);
@@ -36,14 +36,15 @@ function ReviewImageSlider({ images }: { images: string[] }) {
           itemNumber={images.length}
           // 목록 전체 넓이
           slideSize={size}
+          buttonSize={24}
         />
       )}
       <div
         className={styles.container__imgWrapper}
         ref={componentRef}
         style={{
-          overflow: window.innerWidth < 450 ? "scroll" : "visible",
-          left: slideLocation + "px",
+          overflow: window.innerWidth < 450 ? 'scroll' : 'visible',
+          left: slideLocation + 'px',
         }}
       >
         {images.map((data, i) => (

src/components/Detail/Main/ImageSwiper/Swiper.tsx

@@ -33,7 +33,7 @@ function ImageSwiper({images}: ImageSwiperProps) {
         }}
       >
         {images.map((data) => (
-          <SwiperSlide className={styles.container__swiperSlide} onClick={onOpen}>
+          <SwiperSlide className={styles.container__swiperSlide} onClick={onOpen} key={`imageSwiper_${data}`}>
             <img src={data} alt='#' />
           </SwiperSlide>
         ))}

src/components/Detail/Main/Main.tsx

@@ -8,23 +8,15 @@ interface MainProps {
   contentTypeId: number;
   images: string[];
   title: string;
-  category: string;
   rating: number;
   reviewsCount: number;
 }
 
-function Main({id, contentTypeId, images, title, category, rating, reviewsCount}: MainProps) {
+function Main({id, contentTypeId, images, title, rating, reviewsCount}: MainProps) {
   return (
     <div className={styles.container}>
       <ImageSwiper images={images} />
-      <Title
-        id={id}
-        contentTypeId={contentTypeId}
-        title={title}
-        category={category}
-        rating={rating}
-        reviewsCount={reviewsCount}
-      />
+      <Title id={id} contentTypeId={contentTypeId} title={title} rating={rating} reviewsCount={reviewsCount} />
     </div>
   );
 }

src/components/Detail/Main/Title/Title.tsx

@@ -1,79 +1,37 @@
-import {FaRegHeart} from 'react-icons/fa';
-import {FaHeart} from 'react-icons/fa';
 import {GoStarFill} from 'react-icons/go';
 import {IoShareSocialOutline} from 'react-icons/io5';
-import {useRecoilState, useRecoilValue, useSetRecoilState} from 'recoil';
 
 import styles from './Title.module.scss';
 
 import CustomToast from '@/components/CustomToast/CustomToast';
 
-import {IsHeartValued, IsLoginState} from '@/recoil/detail/detail';
-import {isModalOpenState, modalContentState} from '@/recoil/vote/alertModal';
-import {useGetIsWish, usePostWishes} from '@/hooks/Detail/useWish';
+import WishBtn from '@/components/WishBtn/WishBtn';
+import {translateCategoryToStr} from '@/hooks/Search/useSearch';
 
 interface TitleProps {
   id: number;
   contentTypeId: number;
   title: string;
-  category: string;
   rating: number;
   reviewsCount: number;
 }
 
-function Title({id, contentTypeId, title, category, rating, reviewsCount}: TitleProps) {
-  const [isWish, setIsWish] = useRecoilState(IsHeartValued);
-  const setIsModalOpen = useSetRecoilState(isModalOpenState);
-  const setModalContent = useSetRecoilState(modalContentState);
-
-  useGetIsWish(id, setIsWish);
-  const postWishes = usePostWishes();
-
-  const isLogin = useRecoilValue(IsLoginState);
-
-  const notLoginContent = {
-    title: '로그인이 필요한 기능입니다.',
-    subText: '로그인하고 모든 서비스를 이용해 보세요! ',
-    cancelText: '닫기',
-    actionButton: '로그인하기',
-    isSmallSize: true,
-  };
-
-  const showNotLoginModal = () => {
-    setIsModalOpen(true);
-    setModalContent({...notLoginContent});
-  };
-
+function Title({id, contentTypeId, title, rating, reviewsCount}: TitleProps) {
   const showToast = CustomToast();
 
-  const handleHeartClick = () => {
-    if (isLogin) {
-      if (!isWish) {
-        showToast('찜 목록에 저장되었습니다.');
-        postWishes.mutate({placeId: id, contentTypeId: contentTypeId});
-      }
-      setIsWish(!isWish);
-    } else {
-      showNotLoginModal();
-    }
-  };
+  const categoryStr = translateCategoryToStr(contentTypeId);
 
   return (
     <div className={styles.container}>
       <h2 className={styles.container__header}>{title}</h2>
-      <p className={styles.container__category}>{category}</p>
+      <p className={styles.container__category}>{categoryStr}</p>
       <div className={styles.container__alignCenter}>
         <GoStarFill className={styles.container__alignCenter__star} />
         <span className={styles.container__alignCenter__point}>{rating}</span>
         <span className={styles.container__alignCenter__reviewsCount}>{`(${reviewsCount})`}</span>
       </div>
       <div className={styles.container__positionAbsoluteIcons}>
-        {isWish ? (
-          <FaHeart fontSize='2.4rem' cursor='pointer' color='#E23774' onClick={handleHeartClick} />
-        ) : (
-          <FaRegHeart fontSize='2.4rem' cursor='pointer' onClick={handleHeartClick} />
-        )}
-
+        <WishBtn placeId={id} contentTypeId={contentTypeId} size={'2.4rem'} />
         <IoShareSocialOutline
           fontSize='2.4rem'
           cursor='pointer'