From 7693855d45fd97f7258bc926ca4518a087c6cfc6 Mon Sep 17 00:00:00 2001 From: JinJeongMin Date: Thu, 25 Jan 2024 02:38:10 +0900 Subject: [PATCH 1/2] Feat: create API connected WishBtn component --- src/api/detail.ts | 24 +++++++- src/components/Detail/Main/Title/Title.tsx | 48 +-------------- src/components/WishBtn/WishBtn.tsx | 70 ++++++++++++++++++++++ src/hooks/Detail/useWish.ts | 8 ++- 4 files changed, 101 insertions(+), 49 deletions(-) create mode 100644 src/components/WishBtn/WishBtn.tsx diff --git a/src/api/detail.ts b/src/api/detail.ts index 811f0e18..a5885e31 100644 --- a/src/api/detail.ts +++ b/src/api/detail.ts @@ -34,6 +34,8 @@ export const getIsWish = async (id: number, setIsWish: React.Dispatch { +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); + } +}; diff --git a/src/components/Detail/Main/Title/Title.tsx b/src/components/Detail/Main/Title/Title.tsx index ab791230..34c6b91c 100644 --- a/src/components/Detail/Main/Title/Title.tsx +++ b/src/components/Detail/Main/Title/Title.tsx @@ -1,16 +1,13 @@ -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 {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'; interface TitleProps { id: number; @@ -22,42 +19,8 @@ interface TitleProps { } 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}); - }; - const showToast = CustomToast(); - const handleHeartClick = () => { - if (isLogin) { - if (!isWish) { - showToast('찜 목록에 저장되었습니다.'); - postWishes.mutate({placeId: id, contentTypeId: contentTypeId}); - } - setIsWish(!isWish); - } else { - showNotLoginModal(); - } - }; - return (

{title}

@@ -68,12 +31,7 @@ function Title({id, contentTypeId, title, category, rating, reviewsCount}: Title {`(${reviewsCount})`}
- {isWish ? ( - - ) : ( - - )} - + { + setIsModalOpen(true); + setModalContent({...notLoginContent}); + }; + + const showToast = CustomToast(); + + useGetIsWish(id, setIsWish); + const postWishes = usePostWishes(); + const deleteWishes = useDeleteWishes(); + + // postWishes error 리턴 시 로그인 모달 띄우기 + const handleHeartClick = () => { + if (isLogin) { + if (!isWish) { + postWishes.mutate({placeId: id, contentTypeId: contentTypeId}); + + setIsWish(true); + showToast('찜 목록에 저장되었습니다.'); + } else { + deleteWishes.mutate(id); + + setIsWish(false); + } + } else { + showNotLoginModal(); + } + }; + + return ( + <> + {isWish ? ( + + ) : ( + + )} + + ); +} + +export default WishBtn; diff --git a/src/hooks/Detail/useWish.ts b/src/hooks/Detail/useWish.ts index f0854f56..b8f17fb0 100644 --- a/src/hooks/Detail/useWish.ts +++ b/src/hooks/Detail/useWish.ts @@ -1,4 +1,4 @@ -import {PostWishes, getIsWish} from '@/api/detail'; +import {deleteWishes, getIsWish, postWishes} from '@/api/detail'; import {useSuspenseQuery} from '@tanstack/react-query'; import {useCustomMutation} from '../Votes/vote'; @@ -10,5 +10,9 @@ export const useGetIsWish = (id: number, setIsWish: React.Dispatch { - return useCustomMutation(PostWishes, ['isWish']); + return useCustomMutation(postWishes, ['isWish']); +}; + +export const useDeleteWishes = () => { + return useCustomMutation(deleteWishes, ['isWish']); }; From 1cc99fca9a512ee38bcb458abcaeff82b819ac3b Mon Sep 17 00:00:00 2001 From: JinJeongMin Date: Thu, 25 Jan 2024 15:24:36 +0900 Subject: [PATCH 2/2] Feat: use WishBtn component --- .../BasicInformation/BasicInformation.tsx | 4 +- .../MapInDetail/MapInDetail.tsx | 4 +- .../BasicInformation/MapModal/MapModal.tsx | 12 +-- .../Contents/Information/Information.tsx | 1 + .../ReviewImageSlider/ReviewImageSlider.tsx | 21 ++-- .../Detail/Main/ImageSwiper/Swiper.tsx | 2 +- src/components/Detail/Main/Main.tsx | 12 +-- src/components/Detail/Main/Title/Title.tsx | 12 +-- .../MeatballBottomSlide.tsx | 97 ++++++++++--------- src/components/WishBtn/WishBtn.tsx | 20 ++-- src/main.tsx | 20 ++-- src/pages/Detail/Detail.tsx | 8 +- src/types/detail.ts | 2 + 13 files changed, 112 insertions(+), 103 deletions(-) diff --git a/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.tsx b/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.tsx index d72cc2dd..b0ec35cf 100644 --- a/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.tsx +++ b/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 (
기본정보
@@ -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} /> diff --git a/src/components/Detail/Contents/Information/BasicInformation/MapInDetail/MapInDetail.tsx b/src/components/Detail/Contents/Information/BasicInformation/MapInDetail/MapInDetail.tsx index 2dd25b34..696c5eae 100644 --- a/src/components/Detail/Contents/Information/BasicInformation/MapInDetail/MapInDetail.tsx +++ b/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} /> ); diff --git a/src/components/Detail/Contents/Information/BasicInformation/MapModal/MapModal.tsx b/src/components/Detail/Contents/Information/BasicInformation/MapModal/MapModal.tsx index c1092eea..1d9f0b81 100644 --- a/src/components/Detail/Contents/Information/BasicInformation/MapModal/MapModal.tsx +++ b/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 (
- +
diff --git a/src/components/Detail/Contents/Information/Information.tsx b/src/components/Detail/Contents/Information/Information.tsx index fd7a6b60..76711263 100644 --- a/src/components/Detail/Contents/Information/Information.tsx +++ b/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} /> diff --git a/src/components/Detail/Contents/Review/ReviewImageSlider/ReviewImageSlider.tsx b/src/components/Detail/Contents/Review/ReviewImageSlider/ReviewImageSlider.tsx index 638652e9..eea5c7d7 100644 --- a/src/components/Detail/Contents/Review/ReviewImageSlider/ReviewImageSlider.tsx +++ b/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(0); const [componentRef, size] = useComponentSize(); const [imageIndex, setImageIndex] = useState(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} /> )}
{images.map((data, i) => ( diff --git a/src/components/Detail/Main/ImageSwiper/Swiper.tsx b/src/components/Detail/Main/ImageSwiper/Swiper.tsx index 816ca7f9..fb75c38d 100644 --- a/src/components/Detail/Main/ImageSwiper/Swiper.tsx +++ b/src/components/Detail/Main/ImageSwiper/Swiper.tsx @@ -33,7 +33,7 @@ function ImageSwiper({images}: ImageSwiperProps) { }} > {images.map((data) => ( - + # ))} diff --git a/src/components/Detail/Main/Main.tsx b/src/components/Detail/Main/Main.tsx index 120f742b..c5c78e1f 100644 --- a/src/components/Detail/Main/Main.tsx +++ b/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 (
- + <Title id={id} contentTypeId={contentTypeId} title={title} rating={rating} reviewsCount={reviewsCount} /> </div> ); } diff --git a/src/components/Detail/Main/Title/Title.tsx b/src/components/Detail/Main/Title/Title.tsx index 34c6b91c..6878c368 100644 --- a/src/components/Detail/Main/Title/Title.tsx +++ b/src/components/Detail/Main/Title/Title.tsx @@ -1,37 +1,37 @@ import {GoStarFill} from 'react-icons/go'; import {IoShareSocialOutline} from 'react-icons/io5'; -import {useSetRecoilState} from 'recoil'; import styles from './Title.module.scss'; import CustomToast from '@/components/CustomToast/CustomToast'; -import {isModalOpenState, modalContentState} from '@/recoil/vote/alertModal'; 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) { +function Title({id, contentTypeId, title, rating, reviewsCount}: TitleProps) { const showToast = CustomToast(); + 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}> - <WishBtn id={id} contentTypeId={contentTypeId} size={'2.4rem'} /> + <WishBtn placeId={id} contentTypeId={contentTypeId} size={'2.4rem'} /> <IoShareSocialOutline fontSize='2.4rem' cursor='pointer' diff --git a/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx b/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx index fdd8d3f6..760a88ac 100644 --- a/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx +++ b/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx @@ -1,51 +1,64 @@ -import { BiTask } from "react-icons/bi"; -import { CiEdit } from "react-icons/ci"; -import { FaRegHeart } from "react-icons/fa"; -import { IoShareSocialOutline } from "react-icons/io5"; -import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; +import {BiTask} from 'react-icons/bi'; +import {CiEdit} from 'react-icons/ci'; +import {FaRegHeart} from 'react-icons/fa'; +import {IoShareSocialOutline} from 'react-icons/io5'; +import {useRecoilState, useSetRecoilState} from 'recoil'; -import styles from "./MeatballBottomSlide.module.scss"; +import styles from './MeatballBottomSlide.module.scss'; -import CustomToast from "@/components/CustomToast/CustomToast"; +import CustomToast from '@/components/CustomToast/CustomToast'; -import CloseIcon from "@/assets/close.svg?react"; -import { IsHeartValued, IsLoginState } from "@/recoil/detail/detail"; -import { isModalOpenState, modalContentState } from "@/recoil/vote/alertModal"; +import CloseIcon from '@/assets/close.svg?react'; +import {IsHeartValued} from '@/recoil/detail/detail'; +import {isModalOpenState, modalContentState} from '@/recoil/vote/alertModal'; -import RegistrationSlide from "../../BottomFixedBtn/RegistrationSlide/RegistrationSlide"; -import ReviewBottomSlide from "../../Contents/ReviewBottomSlide/ReviewBottomSlide"; +import RegistrationSlide from '../../BottomFixedBtn/RegistrationSlide/RegistrationSlide'; +import ReviewBottomSlide from '../../Contents/ReviewBottomSlide/ReviewBottomSlide'; -import { NavigationMeatballProps } from "@/types/detail"; +import {NavigationMeatballProps} from '@/types/detail'; +import {useDeleteWishes, usePostWishes} from '@/hooks/Detail/useWish'; -const MeatballBottomSlide = ({ - onBottomSlideOpen, - onClose, -}: NavigationMeatballProps) => { - const [isHeart, setIsHeart] = useRecoilState(IsHeartValued); +const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId}: NavigationMeatballProps) => { + const [isWish, setIsWish] = useRecoilState(IsHeartValued); const setIsModalOpen = useSetRecoilState(isModalOpenState); const setModalContent = useSetRecoilState(modalContentState); - const isLogin = useRecoilValue(IsLoginState); + + // isLogin 구현해야 함 + const isLogin = true; const notLoginContent = { - title: "로그인이 필요한 기능입니다.", - subText: "로그인하고 모든 서비스를 이용해 보세요! ", - cancelText: "닫기", - actionButton: "로그인하기", + title: '로그인이 필요한 기능입니다.', + subText: '로그인하고 모든 서비스를 이용해 보세요! ', + cancelText: '닫기', + actionButton: '로그인하기', isSmallSize: true, }; const showNotLoginModal = () => { setIsModalOpen(true); - setModalContent({ ...notLoginContent }); + setModalContent({...notLoginContent}); }; const showToast = CustomToast(); + const postWishes = usePostWishes(); + const deleteWishes = useDeleteWishes(); + const handleHeartClick = () => { - if (!isHeart) { - showToast("찜 목록에 저장되었습니다."); - } + if (isLogin) { + if (!isWish) { + postWishes.mutate({placeId: id, contentTypeId: contentTypeId}); - setIsHeart(!isHeart); + setIsWish(true); + showToast('찜 목록에 저장되었습니다.'); + } else { + deleteWishes.mutate(id); + + showToast('찜 목록에서 제거되었습니다.'); + setIsWish(false); + } + } else { + showNotLoginModal(); + } }; return ( @@ -53,11 +66,11 @@ const MeatballBottomSlide = ({ <button onClick={() => { onClose(); - document.body.style.removeProperty("overflow"); + document.body.style.removeProperty('overflow'); }} className={styles.container__top} > - <CloseIcon width="2rem" height="2rem" /> + <CloseIcon width='2rem' height='2rem' /> </button> <button onClick={() => { @@ -65,14 +78,14 @@ const MeatballBottomSlide = ({ if (isLogin) { handleHeartClick(); onClose(); - document.body.style.removeProperty("overflow"); + document.body.style.removeProperty('overflow'); } else { showNotLoginModal(); } }} > <div className={styles.container__iconWrapper}> - <FaRegHeart fontSize="1.6rem" /> + <FaRegHeart fontSize='1.6rem' /> </div> <p>찜하기</p> </button> @@ -80,15 +93,12 @@ const MeatballBottomSlide = ({ onClick={() => { onClose(); setTimeout(() => { - onBottomSlideOpen( - <RegistrationSlide slideOnClose={onClose} />, - false, - ); + onBottomSlideOpen(<RegistrationSlide slideOnClose={onClose} />, false); }, 300); }} > <div className={styles.container__iconWrapper}> - <BiTask fontSize="1.6rem" /> + <BiTask fontSize='1.6rem' /> </div> <p>후보에 추가</p> </button> @@ -96,27 +106,24 @@ const MeatballBottomSlide = ({ onClick={() => { onClose(); setTimeout(() => { - onBottomSlideOpen( - <ReviewBottomSlide slideOnClose={onClose} />, - true, - ); + onBottomSlideOpen(<ReviewBottomSlide slideOnClose={onClose} />, true); }, 300); }} > <div className={styles.container__iconWrapper}> - <CiEdit fontSize="1.6rem" /> + <CiEdit fontSize='1.6rem' /> </div> <p>리뷰 쓰기</p> </button> <button onClick={() => { - showToast("링크가 복사되었습니다."); + showToast('링크가 복사되었습니다.'); onClose(); - document.body.style.removeProperty("overflow"); + document.body.style.removeProperty('overflow'); }} > <div className={styles.container__iconWrapper}> - <IoShareSocialOutline fontSize="1.6rem" /> + <IoShareSocialOutline fontSize='1.6rem' /> </div> <p>공유하기</p> </button> diff --git a/src/components/WishBtn/WishBtn.tsx b/src/components/WishBtn/WishBtn.tsx index a11c271a..37839599 100644 --- a/src/components/WishBtn/WishBtn.tsx +++ b/src/components/WishBtn/WishBtn.tsx @@ -6,9 +6,10 @@ import CustomToast from '../CustomToast/CustomToast'; import {useDeleteWishes, useGetIsWish, usePostWishes} from '@/hooks/Detail/useWish'; interface WishBtnProps { - id: number; + placeId: number; contentTypeId: number; size: string; + className?: string; } const notLoginContent = { @@ -19,13 +20,13 @@ const notLoginContent = { isSmallSize: true, }; -function WishBtn({id, contentTypeId, size}: WishBtnProps) { +function WishBtn({placeId, contentTypeId, size = '2.4rem', className = ''}: WishBtnProps) { const [isWish, setIsWish] = useRecoilState(IsHeartValued); const setIsModalOpen = useSetRecoilState(isModalOpenState); const setModalContent = useSetRecoilState(modalContentState); // isLogin 구현해야 함 - const isLogin = false; + const isLogin = true; const showNotLoginModal = () => { setIsModalOpen(true); @@ -34,21 +35,22 @@ function WishBtn({id, contentTypeId, size}: WishBtnProps) { const showToast = CustomToast(); - useGetIsWish(id, setIsWish); + useGetIsWish(placeId, setIsWish); const postWishes = usePostWishes(); const deleteWishes = useDeleteWishes(); // postWishes error 리턴 시 로그인 모달 띄우기 - const handleHeartClick = () => { + const handleWishClick = () => { if (isLogin) { if (!isWish) { - postWishes.mutate({placeId: id, contentTypeId: contentTypeId}); + postWishes.mutate({placeId: placeId, contentTypeId: contentTypeId}); setIsWish(true); showToast('찜 목록에 저장되었습니다.'); } else { - deleteWishes.mutate(id); + deleteWishes.mutate(placeId); + showToast('찜 목록에서 제거되었습니다.'); setIsWish(false); } } else { @@ -59,9 +61,9 @@ function WishBtn({id, contentTypeId, size}: WishBtnProps) { return ( <> {isWish ? ( - <FaHeart fontSize={size} cursor='pointer' color='#E23774' onClick={handleHeartClick} /> + <FaHeart fontSize={size} cursor='pointer' color='#E23774' onClick={handleWishClick} className={className} /> ) : ( - <FaRegHeart fontSize={size} cursor='pointer' onClick={handleHeartClick} /> + <FaRegHeart fontSize={size} cursor='pointer' onClick={handleWishClick} className={className} /> )} </> ); diff --git a/src/main.tsx b/src/main.tsx index b7509afa..7aba7a43 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,22 +1,22 @@ -import { ChakraProvider } from "@chakra-ui/react"; -import React from "react"; -import ReactDOM from "react-dom/client"; -import { RecoilRoot } from "recoil"; +import {ChakraProvider} from '@chakra-ui/react'; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import {RecoilRoot} from 'recoil'; -import App from "./App.tsx"; -import { customTheme } from "./chakra/chakraCustomTheme.ts"; +import App from './App.tsx'; +import {customTheme} from './chakra/chakraCustomTheme.ts'; async function enableMocking() { - if (import.meta.env.MODE !== "development") { + if (import.meta.env.MODE !== 'development') { return; } - const { worker } = await import("./mocks/browser"); - return worker.start(); + // const {worker} = await import('./mocks/browser'); + // return worker.start(); } enableMocking().then(() => { - ReactDOM.createRoot(document.getElementById("root")!).render( + ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <RecoilRoot> <ChakraProvider theme={customTheme}> diff --git a/src/pages/Detail/Detail.tsx b/src/pages/Detail/Detail.tsx index e111e55e..92b989c4 100644 --- a/src/pages/Detail/Detail.tsx +++ b/src/pages/Detail/Detail.tsx @@ -59,7 +59,12 @@ function Detail() { <Navigation onOpen={() => onBottomSlideOpen( - <MeatballBottomSlide onBottomSlideOpen={onBottomSlideOpen} onClose={handleSlideOnClose} />, + <MeatballBottomSlide + onBottomSlideOpen={onBottomSlideOpen} + onClose={handleSlideOnClose} + id={placeInfo.id} + contentTypeId={placeInfo.contentTypeId} + />, false, ) } @@ -69,7 +74,6 @@ function Detail() { contentTypeId={placeInfo.contentTypeId} images={placeInfo.gallery} title={placeInfo.title} - category={placeInfo.category} rating={reviewsRating.rating} reviewsCount={reviewsRating.userRatingCount} /> diff --git a/src/types/detail.ts b/src/types/detail.ts index a9c81e91..d4815970 100644 --- a/src/types/detail.ts +++ b/src/types/detail.ts @@ -37,6 +37,8 @@ export interface NavigationProps { export interface NavigationMeatballProps { onBottomSlideOpen: (content: ReactNode, isReview: boolean) => void; onClose: () => void; + id: number; + contentTypeId: number; } // Main