From 175dec76ea73f204f60abf936584ed92c0812ba8 Mon Sep 17 00:00:00 2001 From: JinJeongMin Date: Sat, 27 Jan 2024 18:51:32 +0900 Subject: [PATCH 1/6] Feat: not reveiws --- src/api/detail.ts | 17 +++++++++---- src/api/review.ts | 5 +++- src/components/Detail/Contents/Contents.tsx | 5 +++- .../ShortReveiws/ShortReviews.module.scss | 8 +++++- .../Information/ShortReveiws/ShortReviews.tsx | 11 +++++--- .../Contents/Reviews/Reviews.module.scss | 25 ++++++++++++------- .../Detail/Contents/Reviews/Reviews.tsx | 11 +++++--- src/components/Detail/Main/Title/Title.tsx | 4 ++- src/hooks/useInfiniteScroll.ts | 6 ++--- 9 files changed, 65 insertions(+), 27 deletions(-) diff --git a/src/api/detail.ts b/src/api/detail.ts index ca416352..a7f32ce1 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/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/ShortReveiws/ShortReviews.module.scss b/src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.module.scss index 14302691..881ffcbd 100644 --- a/src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.module.scss +++ b/src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.module.scss @@ -1,4 +1,4 @@ -@use "@/sass" as *; +@use '@/sass' as *; .container { padding: 40px 0; @@ -52,6 +52,12 @@ &__reviewsBox { margin-bottom: 16px; + &__notReviews { + margin: 64px 0; + text-align: center; + @include typography(subTitle); + color: $neutral400; + } } &__allBtn { diff --git a/src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.tsx b/src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.tsx index ac2884dd..f090024d 100644 --- a/src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.tsx +++ b/src/components/Detail/Contents/Information/ShortReveiws/ShortReviews.tsx @@ -52,10 +52,12 @@ function ShortReviews({onOpen, reviewsRating, reviews}: ContentsShortReviewsProp
{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} /> - ))} + )) + ) : ( +
리뷰가 아직 없습니다.
+ )}
{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/hooks/useInfiniteScroll.ts b/src/hooks/useInfiniteScroll.ts index 00e3b9cd..749dfdf8 100644 --- a/src/hooks/useInfiniteScroll.ts +++ b/src/hooks/useInfiniteScroll.ts @@ -42,12 +42,12 @@ export const useInfiniteScrollReviews = ( if (data) { const {last} = data.pages.at(-1).data; - if (data.pages[data.pages.length - 1].data.reviews.length === 0) { + if (data.pages[0].status !== 200) { + setHasNextData(false); + } else if (data.pages[data.pages.length - 1].data.reviews.length === 0) { setHasNextData(false); } - console.log(data.pages, '1'); - if (inView && !last) { fetchNextPage(); } From a22d304f2911d5912f183f3fc438093b50d0acac Mon Sep 17 00:00:00 2001 From: JinJeongMin Date: Sat, 27 Jan 2024 19:51:05 +0900 Subject: [PATCH 2/6] Feat: create link to Yanolja --- src/assets/logo_yanolja.svg | 10 +++++ .../BasicInformation.module.scss | 6 +-- .../Information/Information.module.scss | 38 +++++++++++++++++++ .../Contents/Information/Information.tsx | 16 ++++++++ .../ShortReveiws/ShortReviews.module.scss | 2 +- 5 files changed, 68 insertions(+), 4 deletions(-) create mode 100644 src/assets/logo_yanolja.svg 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/Contents/Information/BasicInformation/BasicInformation.module.scss b/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss index a14eac08..d018090e 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; 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 (
+ + +
+ 할인가 + 예약하러 가기 + +
+ Date: Sat, 27 Jan 2024 20:02:04 +0900 Subject: [PATCH 3/6] Feat: not login --- .../Detail/BottomFixedBtn/BottomFixedBtn.tsx | 34 ++++++++------ .../BasicInformation.module.scss | 1 + .../ReviewBottomSlide/ReviewBottomSlide.tsx | 2 +- .../Detail/Contents/Reviews/Reviews.tsx | 13 +++-- .../MeatballBottomSlide.tsx | 47 ++++++++++++------- 5 files changed, 62 insertions(+), 35 deletions(-) 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/Information/BasicInformation/BasicInformation.module.scss b/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss index d018090e..cd3e2dfc 100644 --- a/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss +++ b/src/components/Detail/Contents/Information/BasicInformation/BasicInformation.module.scss @@ -20,6 +20,7 @@ display: flex; flex-direction: column; gap: 12px; + text-overflow: ellipsis; &__item { display: flex; diff --git a/src/components/Detail/Contents/ReviewBottomSlide/ReviewBottomSlide.tsx b/src/components/Detail/Contents/ReviewBottomSlide/ReviewBottomSlide.tsx index 0026fddd..aeff44ca 100644 --- a/src/components/Detail/Contents/ReviewBottomSlide/ReviewBottomSlide.tsx +++ b/src/components/Detail/Contents/ReviewBottomSlide/ReviewBottomSlide.tsx @@ -96,7 +96,7 @@ function ReviewBottomSlide({placeId, contentTypeId, title, slideOnClose}: Review > -
롯데시티 호텔
+
{title}
{ + navigate('/auth/login'); + }, }; const showNotLoginModal = () => { diff --git a/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx b/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx index 97ab009b..715f1ba1 100644 --- a/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx +++ b/src/components/Detail/Navigation/MeatballBottomSlide/MeatballBottomSlide.tsx @@ -17,15 +17,17 @@ import ReviewBottomSlide from '../../Contents/ReviewBottomSlide/ReviewBottomSlid import {NavigationMeatballProps} from '@/types/detail'; import {useDeleteWishes, usePostWishes} from '@/hooks/Detail/useWish'; -import {useLocation} from 'react-router-dom'; +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: '로그인이 필요한 기능입니다.', @@ -33,6 +35,9 @@ const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId, tit cancelText: '닫기', actionButton: '로그인하기', isSmallSize: true, + onClickAction: () => { + navigate('/auth/login'); + }, }; const showNotLoginModal = () => { @@ -105,13 +110,17 @@ const MeatballBottomSlide = ({onBottomSlideOpen, onClose, id, contentTypeId, tit