diff --git a/src/api/detail.ts b/src/api/detail.ts index d2b112d0..a601d35b 100644 --- a/src/api/detail.ts +++ b/src/api/detail.ts @@ -12,12 +12,19 @@ export const getPlaceInfo = async (id: number, typeId: number): Promise => { - 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 => { + 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) => { diff --git a/src/api/review.ts b/src/api/review.ts index cc304559..fdd10e5a 100644 --- a/src/api/review.ts +++ b/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; + } } }, }; diff --git a/src/assets/logo_yanolja.svg b/src/assets/logo_yanolja.svg new file mode 100644 index 00000000..681f3d69 --- /dev/null +++ b/src/assets/logo_yanolja.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx b/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx index 1269d840..65d93f36 100644 --- a/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx +++ b/src/components/Detail/BottomFixedBtn/BottomFixedBtn.tsx @@ -1,28 +1,34 @@ -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 ( @@ -30,7 +36,7 @@ function BottomFixedBtn({ onOpen }: BottomFixedBtnProps) {
{ if (isLogin) { diff --git a/src/components/Detail/Contents/Contents.tsx b/src/components/Detail/Contents/Contents.tsx index 8dccb12e..366084a9 100644 --- a/src/components/Detail/Contents/Contents.tsx +++ b/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)); }); diff --git a/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss b/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss index a14eac08..cd3e2dfc 100644 --- a/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss +++ b/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; diff --git a/src/components/Detail/Contents/Information/Information.module.scss b/src/components/Detail/Contents/Information/Information.module.scss index e69de29b..1735e74c 100644 --- a/src/components/Detail/Contents/Information/Information.module.scss +++ b/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%); + } + } +} diff --git a/src/components/Detail/Contents/Information/Information.tsx b/src/components/Detail/Contents/Information/Information.tsx index 83d23874..bc4db51c 100644 --- a/src/components/Detail/Contents/Information/Information.tsx +++ b/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 (
+ + +
+ 할인가 + 예약하러 가기 + +
+ {reviewsRating.rating} - {`(${reviewsRating.userRatingCount})`} + {`(${ + reviewsRating.userRatingCount ? reviewsRating.userRatingCount : '리뷰 없음' + })`}
- {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} /> - ))} + )) + ) : ( +
리뷰가 아직 없습니다.
+ )}
-
롯데시티 호텔
+
{title}
{ + navigate('/auth/login'); + }, }; const showNotLoginModal = () => { @@ -51,10 +58,12 @@ function Reviews({onOpen, reviewsRating, reviews, hasNextData, inViewRef}: Conte
{reviewsRating.rating} - {`(${reviewsRating.userRatingCount})`} + {`(${ + reviewsRating.userRatingCount ? reviewsRating.userRatingCount : '리뷰 없음' + })`}
- {reviews && + {reviews.length > 0 ? ( reviews.map((data, i) => ( - ))} + )) + ) : ( +
리뷰가 아직 없습니다.
+ )}
{hasNextData && }
diff --git a/src/components/Detail/Main/Title/Title.tsx b/src/components/Detail/Main/Title/Title.tsx index eaf4584c..58d5e4dd 100644 --- a/src/components/Detail/Main/Title/Title.tsx +++ b/src/components/Detail/Main/Title/Title.tsx @@ -42,7 +42,9 @@ function Title({id, contentTypeId, title, rating, reviewsCount}: TitleProps) {
{rating} - {`(${reviewsCount})`} + {`(${ + reviewsCount ? reviewsCount : '리뷰 없음' + })`}
diff --git a/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx b/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx index bf78cb9d..e32eff83 100644 --- a/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx +++ b/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx @@ -2,13 +2,10 @@ 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 {useLocation} from 'react-router-dom'; import {useRecoilState, useSetRecoilState} from 'recoil'; import styles from './MeatballBottomSlide.module.scss'; -import {useDeleteWishes, usePostWishes} from '@/hooks/Detail/useWish'; - import CustomToast from '@/components/CustomToast/CustomToast'; import CloseIcon from '@/assets/close.svg?react'; @@ -19,14 +16,18 @@ import RegistrationSlide from '../../BottomFixedBtn/RegistrationSlide/Registrati import ReviewBottomSlide from '../../Contents/ReviewBottomSlide/ReviewBottomSlide'; import {NavigationMeatballProps} from '@/types/detail'; +import {useDeleteWishes, usePostWishes} from '@/hooks/Detail/useWish'; +import {useLocation, useNavigate} from 'react-router-dom'; +import {Cookies} from 'react-cookie'; const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId, title}: NavigationMeatballProps) => { const [isWish, setIsWish] = useRecoilState(IsHeartValued); const setIsModalOpen = useSetRecoilState(isModalOpenState); const setModalContent = useSetRecoilState(modalContentState); - // isLogin 구현해야 함 - const isLogin = true; + const cookies = new Cookies(); + const isLogin = cookies.get('isLogin'); + const navigate = useNavigate(); const notLoginContent = { title: '로그인이 필요한 기능입니다.', @@ -34,6 +35,9 @@ const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId, tit cancelText: '닫기', actionButton: '로그인하기', isSmallSize: true, + onClickAction: () => { + navigate('/auth/login'); + }, }; const showNotLoginModal = () => { @@ -106,13 +110,17 @@ const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId, tit