From 6a774c353e7dc8d8646b0e9eb1dc76b4763cf526 Mon Sep 17 00:00:00 2001 From: jimin Date: Wed, 24 Jan 2024 18:05:48 +0900 Subject: [PATCH 01/24] =?UTF-8?q?=F0=9F=90=9Bfix=20:=20=EB=93=B1=EB=A1=9D?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20=EC=84=B1=EA=B3=B5=20=EC=BC=80=EC=9D=B4?= =?UTF-8?q?=EC=8A=A4=20=EB=B6=84=EB=A5=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bottomSheetsContent/fromSeller/index.tsx | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/components/sale/bottomSheetsContent/fromSeller/index.tsx b/components/sale/bottomSheetsContent/fromSeller/index.tsx index adf49169..888c20d2 100644 --- a/components/sale/bottomSheetsContent/fromSeller/index.tsx +++ b/components/sale/bottomSheetsContent/fromSeller/index.tsx @@ -44,6 +44,7 @@ const FromSeller = () => { const [isAutoCatch, setIsAutoCatch] = useRecoilState(catchState); const catchprice = useRecoilValue(catchPriceState); const isCatch = discountRate >= 50 ? true : false; + const [modalContent, setModalContent] = useState(''); const handleContentChange = (e: React.ChangeEvent) => { const currentValue = e.target.value; @@ -98,11 +99,26 @@ const FromSeller = () => { }); }; - const handleMutationSucess = () => { - router.push('/room-info'); - setHeaderUnVisible(false); + type APIresponse = { + code: number; + data: { + id: number; + accommodationName: string; + }; + }; + const handleMutationSucess = (data: APIresponse) => { + console.log(data); + if (data.code === 4010) { + router.push(`/room-info/${data.data.id}`); + setHeaderUnVisible(false); + } else if (data.code === 4012) { + setModalContent('이미 등록된 상품입니다.'); + setOpen(true); + setHeaderUnVisible(false); + } }; const handleMutationError = () => { + setModalContent('사유 : 서버 에러'); setOpen(true); setHeaderUnVisible(false); }; @@ -112,7 +128,7 @@ const FromSeller = () => { {open && ( Date: Wed, 24 Jan 2024 18:56:52 +0900 Subject: [PATCH 02/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=ED=8C=90=EB=A7=A4?= =?UTF-8?q?=EC=A4=91=EC=9D=B8=20=EC=83=81=ED=92=88=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/sale/api.ts | 5 +++++ api/sale/query.ts | 12 ++++++++++-- components/roomInfo/header/index.tsx | 26 ++++++++++++++++++++++++-- 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/api/sale/api.ts b/api/sale/api.ts index 38e08a3e..72885248 100644 --- a/api/sale/api.ts +++ b/api/sale/api.ts @@ -10,3 +10,8 @@ export const postSaleProduct = async (product: ProductItem) => { const res = await apiClient.post(`/v1/sales/product`, product); return res.data; }; + +export const deleteSaleProduct = async (id: number) => { + const res = await apiClient.delete(`/v1/sales/product?id=${id}`); + return res.data; +}; diff --git a/api/sale/query.ts b/api/sale/query.ts index 513f611d..39cb5454 100644 --- a/api/sale/query.ts +++ b/api/sale/query.ts @@ -1,5 +1,5 @@ -import { useQuery } from '@tanstack/react-query'; -import { getSaleProduct } from './api'; +import { useMutation, useQuery } from '@tanstack/react-query'; +import { deleteSaleProduct, getSaleProduct } from './api'; //31 export const useQueryGetSaleProduct = (id: number) => { @@ -14,3 +14,11 @@ export const useQueryGetSaleProduct = (id: number) => { data, }; }; + +export const useMutationDeleteSaleProduct = () => { + const mutation = useMutation({ + mutationKey: ['deleteSaleProduct'], + mutationFn: (id: number) => deleteSaleProduct(id), + }); + return mutation; +}; diff --git a/components/roomInfo/header/index.tsx b/components/roomInfo/header/index.tsx index 35879327..86a2b9f6 100644 --- a/components/roomInfo/header/index.tsx +++ b/components/roomInfo/header/index.tsx @@ -9,18 +9,28 @@ import { viewerTestButton } from '@/atoms/roomInfo/headerTitle'; import BottomSheetsWithoutCloseBtn from '@/components/common/bottomSheetsWithOutCloseBtn'; import { outerMoreBottomSheetsControl } from '@/atoms/commons/outerBottomSheetsControl'; import Modal from '@/components/common/modal'; -import { useRouter } from 'next/navigation'; +import { useParams, useRouter } from 'next/navigation'; +import { useMutationDeleteSaleProduct } from '@/api/sale/query'; const HeaderComponent = () => { const setMoreBottomSheetOpen = useSetRecoilState( outerMoreBottomSheetsControl, ); + type UseParamsType = { + id: string; + }; + const [open, setOpen] = useState(false); const router = useRouter(); + const { id } = useParams() as UseParamsType; + + const mutation = useMutationDeleteSaleProduct(); + + //const { id } = useSearchParams(); + console.log(router); // 지민님 작업 끝나시면 이어서 할 예정. - // const { id } = useParams(); // const { data } = useRoomItem(id); // ----------- 헤더부분에 스크롤에 따라 숙소이름 뜨게하려는 중... @@ -70,10 +80,22 @@ const HeaderComponent = () => { }; const onConfirm = () => { + //삭제 api 넣으면됨 + mutation.mutate(+id, { + onSuccess: handleMutationSucess, + onError: handleMutationError, + }); + }; + + const handleMutationSucess = () => { handleModalOpen(); router.push('/mypage/dashboard/sales'); }; + const handleMutationError = () => { + handleModalOpen(); + }; + const onCancel = () => { handleModalOpen(); }; From 39361899d4fa0082ad0c7936af382e6e36acebc1 Mon Sep 17 00:00:00 2001 From: jimin Date: Wed, 24 Jan 2024 19:03:27 +0900 Subject: [PATCH 03/24] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=8C=85=20url=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/home/catch/catchItem/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/home/catch/catchItem/index.tsx b/components/home/catch/catchItem/index.tsx index 96cfbe2f..ad7fefa6 100644 --- a/components/home/catch/catchItem/index.tsx +++ b/components/home/catch/catchItem/index.tsx @@ -27,7 +27,7 @@ const CatchItem = ({ }; const handleItemClick = () => { - router.push(`/room-info?id=${productId}`); + router.push(`/room-info/${productId}`); }; const checkInString = formatDateWithDay(checkIn!); From 45c5bc5719bd0bdba07421ceb844fc8ea54843b3 Mon Sep 17 00:00:00 2001 From: jimin Date: Wed, 24 Jan 2024 21:47:10 +0900 Subject: [PATCH 04/24] =?UTF-8?q?=E2=9C=A8feat=20:=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?API=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/sale/api.ts | 11 +++++-- api/sale/query.ts | 36 ++++++++++++++++++++- atoms/sale/productAtom.ts | 6 ++++ components/common/modal/index.tsx | 4 +-- components/roomInfo/header/index.tsx | 9 +++--- components/sale/saleInfoContainer/index.tsx | 12 +++++-- 6 files changed, 66 insertions(+), 12 deletions(-) create mode 100644 atoms/sale/productAtom.ts diff --git a/api/sale/api.ts b/api/sale/api.ts index 72885248..5393feb5 100644 --- a/api/sale/api.ts +++ b/api/sale/api.ts @@ -1,17 +1,24 @@ import { ProductItem } from '@/types/sale/type'; import { apiClient } from '../user/apiClient'; +//31. 판매할 숙박권 기본정보 조회 export const getSaleProduct = async (id: number) => { const res = await apiClient.get(`/v1/sales/yanolja/product/detail?id=${id}`); return res.data; }; - +//32. 상품 등록 export const postSaleProduct = async (product: ProductItem) => { const res = await apiClient.post(`/v1/sales/product`, product); return res.data; }; - +//34. 상품 삭제 export const deleteSaleProduct = async (id: number) => { const res = await apiClient.delete(`/v1/sales/product?id=${id}`); return res.data; }; + +//48. 상품 기존 등록정보 불러오기 +export const getProductInfo = async (id: number) => { + const res = await apiClient.delete(`/v1/sales/edit/info/product?id=${id}`); + return res.data; +}; diff --git a/api/sale/query.ts b/api/sale/query.ts index 845fa66c..94176a71 100644 --- a/api/sale/query.ts +++ b/api/sale/query.ts @@ -1,6 +1,13 @@ import { useMutation, useQuery } from '@tanstack/react-query'; -import { deleteSaleProduct, getSaleProduct, postSaleProduct } from './api'; +import { + deleteSaleProduct, + getProductInfo, + getSaleProduct, + postSaleProduct, +} from './api'; import { ProductItem } from '@/types/sale/type'; +import { useRecoilValue } from 'recoil'; +import { isProductState } from '@/atoms/sale/productAtom'; //31 export const useQueryGetSaleProduct = (id: number) => { @@ -31,3 +38,30 @@ export const useMutationDeleteSaleProduct = () => { }); return mutation; }; + +//48 +export const useQueryGetProductInfo = (id: number) => { + const { isLoading, error, data } = useQuery({ + queryKey: ['getProductInfo', id], + queryFn: () => getProductInfo(id), + select: ({ data }) => data, + }); + return { + isLoading, + error, + data, + }; +}; + +export const useConditionalQuery = (id: number) => { + const isProduct = useRecoilValue(isProductState); + + const queryKey = isProduct ? 'getProductInfo' : 'getSaleProduct'; + const queryFn = isProduct ? getProductInfo : getSaleProduct; + + return useQuery({ + queryKey: [queryKey, id], + queryFn: () => queryFn(id), + select: ({ data }) => data, + }); +}; diff --git a/atoms/sale/productAtom.ts b/atoms/sale/productAtom.ts new file mode 100644 index 00000000..82ad2e13 --- /dev/null +++ b/atoms/sale/productAtom.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const isProductState = atom({ + key: 'isProductState', + default: false, +}); diff --git a/components/common/modal/index.tsx b/components/common/modal/index.tsx index a718db13..f3528fe0 100644 --- a/components/common/modal/index.tsx +++ b/components/common/modal/index.tsx @@ -51,7 +51,7 @@ const Modal = ({ {showCancelButton && ( @@ -59,7 +59,7 @@ const Modal = ({ {showConfirmButton && ( diff --git a/components/roomInfo/header/index.tsx b/components/roomInfo/header/index.tsx index 86a2b9f6..7032c5ce 100644 --- a/components/roomInfo/header/index.tsx +++ b/components/roomInfo/header/index.tsx @@ -11,6 +11,7 @@ import { outerMoreBottomSheetsControl } from '@/atoms/commons/outerBottomSheetsC import Modal from '@/components/common/modal'; import { useParams, useRouter } from 'next/navigation'; import { useMutationDeleteSaleProduct } from '@/api/sale/query'; +import { isProductState } from '@/atoms/sale/productAtom'; const HeaderComponent = () => { const setMoreBottomSheetOpen = useSetRecoilState( @@ -26,10 +27,9 @@ const HeaderComponent = () => { const { id } = useParams() as UseParamsType; const mutation = useMutationDeleteSaleProduct(); + const setIsProduct = useSetRecoilState(isProductState); //const { id } = useSearchParams(); - console.log(router); - // 지민님 작업 끝나시면 이어서 할 예정. // const { data } = useRoomItem(id); @@ -70,8 +70,8 @@ const HeaderComponent = () => { const handleEditBtnClick = () => { setMoreBottomSheetOpen(false); - //판매할 id 추가해야함 - router.push('/sale'); + setIsProduct(true); + router.push(`/sale?id=${id}`); }; const handleDeleteBtnClick = () => { @@ -80,7 +80,6 @@ const HeaderComponent = () => { }; const onConfirm = () => { - //삭제 api 넣으면됨 mutation.mutate(+id, { onSuccess: handleMutationSucess, onError: handleMutationError, diff --git a/components/sale/saleInfoContainer/index.tsx b/components/sale/saleInfoContainer/index.tsx index 422bc15e..50cf4f0f 100644 --- a/components/sale/saleInfoContainer/index.tsx +++ b/components/sale/saleInfoContainer/index.tsx @@ -2,18 +2,26 @@ import CheckInDateComponent from '@/components/common/checkInDateComponent'; import Image from 'next/image'; import React, { useEffect } from 'react'; -import { useQueryGetSaleProduct } from '@/api/sale/query'; +import { useConditionalQuery } from '@/api/sale/query'; import { formatDateWithDay } from '@/utils/get-dot-date'; import { useSetRecoilState } from 'recoil'; import { checkInDateState } from '@/atoms/sale/timeAtom'; import { productPriceState } from '@/atoms/sale/priceAtom'; +// import { isProductState } from '@/atoms/sale/productAtom'; type Props = { id: string | string[] | undefined; }; const SaleInfoContainer = ({ id }: Props) => { - const { data } = useQueryGetSaleProduct(+id! as number); + // const [isProduct, setIsProduct] = useRecoilState(isProductState); + + const { data } = useConditionalQuery(+id!); + console.log(data); + + // if(isProduct) { + + // } const checkInString = formatDateWithDay(data?.checkIn); const checkOutString = formatDateWithDay(data?.checkOut); From 24740d451399f06577c92555ab910ba9f87221f0 Mon Sep 17 00:00:00 2001 From: jimin Date: Wed, 24 Jan 2024 21:53:05 +0900 Subject: [PATCH 05/24] =?UTF-8?q?=F0=9F=8E=A8=20style=20:=20=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EB=B3=B4=EB=8D=94=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/modal/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/common/modal/index.tsx b/components/common/modal/index.tsx index f3528fe0..55f03d74 100644 --- a/components/common/modal/index.tsx +++ b/components/common/modal/index.tsx @@ -47,11 +47,11 @@ const Modal = ({ )} -
+
{showCancelButton && ( @@ -59,7 +59,7 @@ const Modal = ({ {showConfirmButton && ( From 8762b0c5e7b5951c7cfa0df698b6f3830c80083d Mon Sep 17 00:00:00 2001 From: jimin Date: Wed, 24 Jan 2024 22:20:51 +0900 Subject: [PATCH 06/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=EC=BA=90=EC=B9=98?= =?UTF-8?q?=ED=8A=B9=EA=B0=80=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/catch/catchSkeletonUI/index.tsx | 86 +++++++++++++++++++ components/home/catch/catchSwiper/index.tsx | 4 +- 2 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 components/home/catch/catchSkeletonUI/index.tsx diff --git a/components/home/catch/catchSkeletonUI/index.tsx b/components/home/catch/catchSkeletonUI/index.tsx new file mode 100644 index 00000000..c7ea7370 --- /dev/null +++ b/components/home/catch/catchSkeletonUI/index.tsx @@ -0,0 +1,86 @@ +'use client'; +import React, { useEffect, useState } from 'react'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; + +const CatchSkeletonUI = () => { + const [slidesPerView, setSlidesPerView] = useState(1.1); + + useEffect(() => { + const handleResize = () => { + if (window.innerWidth >= 410) { + setSlidesPerView(1.2); + } else { + setSlidesPerView(1.1); + } + }; + handleResize(); + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return ( + + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ + +
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ + + ); +}; + +export default CatchSkeletonUI; diff --git a/components/home/catch/catchSwiper/index.tsx b/components/home/catch/catchSwiper/index.tsx index 9a7f6b8b..9e915585 100644 --- a/components/home/catch/catchSwiper/index.tsx +++ b/components/home/catch/catchSwiper/index.tsx @@ -6,9 +6,10 @@ import 'swiper/css'; import CatchItem from '../catchItem'; import { useQueryGetCatchItemsList } from '@/api/home/query'; import { catchItems } from '@/types/common/catchItems/types'; +import CatchSkeletonUI from '../catchSkeletonUI'; const CatchSwiper = () => { - const { data } = useQueryGetCatchItemsList(1); + const { data, isLoading } = useQueryGetCatchItemsList(1); const [slidesPerView, setSlidesPerView] = useState(1.1); @@ -24,6 +25,7 @@ const CatchSwiper = () => { window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); + if (isLoading && isLoading) return ; return ( {data?.list.map((item: catchItems) => { From 7ac0b17890e72ad77120fa898539f55543e38f62 Mon Sep 17 00:00:00 2001 From: jimin Date: Wed, 24 Jan 2024 22:31:44 +0900 Subject: [PATCH 07/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=EB=A6=AC=EB=B7=B0?= =?UTF-8?q?=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../home/review/ReviewSkeletonUI/index.tsx | 65 +++++++++++++++++++ components/home/review/reviewSwiper/index.tsx | 5 +- 2 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 components/home/review/ReviewSkeletonUI/index.tsx diff --git a/components/home/review/ReviewSkeletonUI/index.tsx b/components/home/review/ReviewSkeletonUI/index.tsx new file mode 100644 index 00000000..a8d80189 --- /dev/null +++ b/components/home/review/ReviewSkeletonUI/index.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { Swiper, SwiperSlide } from 'swiper/react'; + +const ReviewSkeletonUI = () => { + return ( + + +
+
+ +
+
+
+
+
+
+
+ +
+
+
+ + +
+
+ +
+
+
+
+
+
+
+ +
+
+
+ + + ); +}; + +export default ReviewSkeletonUI; diff --git a/components/home/review/reviewSwiper/index.tsx b/components/home/review/reviewSwiper/index.tsx index 75de84dc..65b68d0b 100644 --- a/components/home/review/reviewSwiper/index.tsx +++ b/components/home/review/reviewSwiper/index.tsx @@ -4,10 +4,13 @@ import 'swiper/css'; import ReviewItem from '../reviewItem'; import { useQueryGetReviewList } from '@/api/home/query'; import { ReviewItemType } from '@/types/home/types'; +import ReviewSkeletonUI from '../ReviewSkeletonUI'; const ReviewSwiper = () => { - const { data } = useQueryGetReviewList(1); + const { data, isLoading } = useQueryGetReviewList(1); console.log(data); + + if (isLoading) return ; return ( {data?.list.map((item: ReviewItemType) => { From dc28622b9ca95b05e41578b3716fd61938fc58a9 Mon Sep 17 00:00:00 2001 From: jimin Date: Wed, 24 Jan 2024 22:43:40 +0900 Subject: [PATCH 08/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=EB=A6=AC=EB=B7=B0?= =?UTF-8?q?=20=EC=A0=84=EC=B2=B4=EB=B3=B4=EA=B8=B0=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20UI=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/modal/index.tsx | 4 +- components/home/catch/catchSwiper/index.tsx | 2 +- components/review/reviewContainer/index.tsx | 5 +- components/review/reviewSkeletonUI/index.tsx | 135 +++++++++++++++++++ 4 files changed, 142 insertions(+), 4 deletions(-) create mode 100644 components/review/reviewSkeletonUI/index.tsx diff --git a/components/common/modal/index.tsx b/components/common/modal/index.tsx index 55f03d74..67f7f833 100644 --- a/components/common/modal/index.tsx +++ b/components/common/modal/index.tsx @@ -51,7 +51,7 @@ const Modal = ({ {showCancelButton && ( @@ -59,7 +59,7 @@ const Modal = ({ {showConfirmButton && ( diff --git a/components/home/catch/catchSwiper/index.tsx b/components/home/catch/catchSwiper/index.tsx index 9e915585..de8705ff 100644 --- a/components/home/catch/catchSwiper/index.tsx +++ b/components/home/catch/catchSwiper/index.tsx @@ -25,7 +25,7 @@ const CatchSwiper = () => { window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); - if (isLoading && isLoading) return ; + if (isLoading) return ; return ( {data?.list.map((item: catchItems) => { diff --git a/components/review/reviewContainer/index.tsx b/components/review/reviewContainer/index.tsx index 448794a4..3b599757 100644 --- a/components/review/reviewContainer/index.tsx +++ b/components/review/reviewContainer/index.tsx @@ -3,9 +3,12 @@ import React from 'react'; import ReviewItem from '../reviewItem'; import { useQueryGetReviewListForScroll } from '@/api/home/query'; import { ReviewItemType } from '@/types/home/types'; +import ReviewSkeletonUI from '../reviewSkeletonUI'; const ReviewContainer = () => { - const { data } = useQueryGetReviewListForScroll(2); + const { data, isLoading } = useQueryGetReviewListForScroll(2); + + if (isLoading) return ; return (
diff --git a/components/review/reviewSkeletonUI/index.tsx b/components/review/reviewSkeletonUI/index.tsx new file mode 100644 index 00000000..9286caf1 --- /dev/null +++ b/components/review/reviewSkeletonUI/index.tsx @@ -0,0 +1,135 @@ +import React from 'react'; + +const ReviewSkeletonUI = () => { + return ( +
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+ ); +}; + +export default ReviewSkeletonUI; From 0e4a28ada3139589f77bc23ec29ec35bbdd18948 Mon Sep 17 00:00:00 2001 From: jimin Date: Wed, 24 Jan 2024 22:51:07 +0900 Subject: [PATCH 09/24] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=ED=8C=90?= =?UTF-8?q?=EB=A7=A4=20API=20=EC=A3=BC=EC=84=9D=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/sale/query.ts | 24 ++++++++++----------- components/sale/saleInfoContainer/index.tsx | 4 ++-- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/api/sale/query.ts b/api/sale/query.ts index 94176a71..c66d38c6 100644 --- a/api/sale/query.ts +++ b/api/sale/query.ts @@ -6,8 +6,8 @@ import { postSaleProduct, } from './api'; import { ProductItem } from '@/types/sale/type'; -import { useRecoilValue } from 'recoil'; -import { isProductState } from '@/atoms/sale/productAtom'; +// import { useRecoilValue } from 'recoil'; +// import { isProductState } from '@/atoms/sale/productAtom'; //31 export const useQueryGetSaleProduct = (id: number) => { @@ -53,15 +53,15 @@ export const useQueryGetProductInfo = (id: number) => { }; }; -export const useConditionalQuery = (id: number) => { - const isProduct = useRecoilValue(isProductState); +// export const useConditionalQuery = (id: number) => { +// const isProduct = useRecoilValue(isProductState); - const queryKey = isProduct ? 'getProductInfo' : 'getSaleProduct'; - const queryFn = isProduct ? getProductInfo : getSaleProduct; +// const queryKey = isProduct ? 'getProductInfo' : 'getSaleProduct'; +// const queryFn = isProduct ? getProductInfo : getSaleProduct; - return useQuery({ - queryKey: [queryKey, id], - queryFn: () => queryFn(id), - select: ({ data }) => data, - }); -}; +// return useQuery({ +// queryKey: [queryKey, id], +// queryFn: () => queryFn(id), +// select: ({ data }) => data, +// }); +// }; diff --git a/components/sale/saleInfoContainer/index.tsx b/components/sale/saleInfoContainer/index.tsx index 50cf4f0f..f7e9f31f 100644 --- a/components/sale/saleInfoContainer/index.tsx +++ b/components/sale/saleInfoContainer/index.tsx @@ -2,7 +2,7 @@ import CheckInDateComponent from '@/components/common/checkInDateComponent'; import Image from 'next/image'; import React, { useEffect } from 'react'; -import { useConditionalQuery } from '@/api/sale/query'; +import { useQueryGetSaleProduct } from '@/api/sale/query'; import { formatDateWithDay } from '@/utils/get-dot-date'; import { useSetRecoilState } from 'recoil'; import { checkInDateState } from '@/atoms/sale/timeAtom'; @@ -16,7 +16,7 @@ type Props = { const SaleInfoContainer = ({ id }: Props) => { // const [isProduct, setIsProduct] = useRecoilState(isProductState); - const { data } = useConditionalQuery(+id!); + const { data } = useQueryGetSaleProduct(+id!); console.log(data); // if(isProduct) { From 921d1a98aa1330d8a9cc8f4ca4cb4e9d1545cafa Mon Sep 17 00:00:00 2001 From: jimin Date: Thu, 25 Jan 2024 12:12:27 +0900 Subject: [PATCH 10/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=ED=8C=90=EB=A7=A4?= =?UTF-8?q?=EC=A4=91=EC=9D=B8=20=EC=83=81=ED=92=88=20=EC=A0=95=EB=B3=B4=20?= =?UTF-8?q?=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/sale/api.ts | 8 ++- api/sale/query.ts | 64 ++++++++++--------- atoms/sale/productAtom.ts | 10 +++ .../bottomSheetsContent/fromSeller/index.tsx | 21 +++--- components/sale/saleEndContainer/index.tsx | 16 +++-- components/sale/saleInfoContainer/index.tsx | 48 ++++++++++++-- 6 files changed, 116 insertions(+), 51 deletions(-) diff --git a/api/sale/api.ts b/api/sale/api.ts index 5393feb5..e331390d 100644 --- a/api/sale/api.ts +++ b/api/sale/api.ts @@ -19,6 +19,12 @@ export const deleteSaleProduct = async (id: number) => { //48. 상품 기존 등록정보 불러오기 export const getProductInfo = async (id: number) => { - const res = await apiClient.delete(`/v1/sales/edit/info/product?id=${id}`); + const res = await apiClient.get(`/v1/sales/edit/info/product?id=${id}`); + return res.data; +}; + +//33. 상품 수정 +export const putProductInfo = async (product: ProductItem, id: number) => { + const res = await apiClient.put(`/v1/sales/product?id=${id}`, product); return res.data; }; diff --git a/api/sale/query.ts b/api/sale/query.ts index 94176a71..9f987423 100644 --- a/api/sale/query.ts +++ b/api/sale/query.ts @@ -4,24 +4,23 @@ import { getProductInfo, getSaleProduct, postSaleProduct, + putProductInfo, } from './api'; import { ProductItem } from '@/types/sale/type'; -import { useRecoilValue } from 'recoil'; -import { isProductState } from '@/atoms/sale/productAtom'; //31 -export const useQueryGetSaleProduct = (id: number) => { - const { isLoading, error, data } = useQuery({ - queryKey: ['getSaleProduct', id], - queryFn: () => getSaleProduct(id), - select: ({ data }) => data, - }); - return { - isLoading, - error, - data, - }; -}; +// export const useQueryGetSaleProduct = (id: number) => { +// const { isLoading, error, data } = useQuery({ +// queryKey: ['getSaleProduct', id], +// queryFn: () => getSaleProduct(id), +// select: ({ data }) => data, +// }); +// return { +// isLoading, +// error, +// data, +// }; +// }; export const useMutaionPostSaleProduct = () => { const mutation = useMutation({ @@ -40,22 +39,20 @@ export const useMutationDeleteSaleProduct = () => { }; //48 -export const useQueryGetProductInfo = (id: number) => { - const { isLoading, error, data } = useQuery({ - queryKey: ['getProductInfo', id], - queryFn: () => getProductInfo(id), - select: ({ data }) => data, - }); - return { - isLoading, - error, - data, - }; -}; - -export const useConditionalQuery = (id: number) => { - const isProduct = useRecoilValue(isProductState); +// export const useQueryGetProductInfo = (id: number) => { +// const { isLoading, error, data } = useQuery({ +// queryKey: ['getProductInfo', id], +// queryFn: () => getProductInfo(id), +// select: ({ data }) => data, +// }); +// return { +// isLoading, +// error, +// data, +// }; +// }; +export const useConditionalQuery = (isProduct: boolean, id: number) => { const queryKey = isProduct ? 'getProductInfo' : 'getSaleProduct'; const queryFn = isProduct ? getProductInfo : getSaleProduct; @@ -65,3 +62,12 @@ export const useConditionalQuery = (id: number) => { select: ({ data }) => data, }); }; + +export const useMutationPutProductInfo = () => { + const mutation = useMutation({ + mutationKey: ['putProductInfo'], + mutationFn: ({ id, product }: { id: number; product: ProductItem }) => + putProductInfo(product, id), + }); + return mutation; +}; diff --git a/atoms/sale/productAtom.ts b/atoms/sale/productAtom.ts index 82ad2e13..5aced249 100644 --- a/atoms/sale/productAtom.ts +++ b/atoms/sale/productAtom.ts @@ -4,3 +4,13 @@ export const isProductState = atom({ key: 'isProductState', default: false, }); + +export const isNegoState = atom({ + key: 'isNegoState', + default: false, +}); + +export const sellerContentState = atom({ + key: 'sellerContentState', + default: '', +}); diff --git a/components/sale/bottomSheetsContent/fromSeller/index.tsx b/components/sale/bottomSheetsContent/fromSeller/index.tsx index a1ed3540..72f3a59c 100644 --- a/components/sale/bottomSheetsContent/fromSeller/index.tsx +++ b/components/sale/bottomSheetsContent/fromSeller/index.tsx @@ -8,6 +8,7 @@ import { priceState, totalPriceState, } from '@/atoms/sale/priceAtom'; +import { isNegoState, sellerContentState } from '@/atoms/sale/productAtom'; import { catchSingleDate, saleSingleDate, @@ -23,7 +24,9 @@ import { useForm } from 'react-hook-form'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; const FromSeller = () => { - const [agreePriceOffer, setAgreedPriceOffer] = useState(false); + // const [agreePriceOffer, setAgreedPriceOffer] = useState(false); + const [isNego, setIsNego] = useRecoilState(isNegoState); + const [sellerContent, setSellerContent] = useRecoilState(sellerContentState); const [wordCount, setWordCount] = useState(0); const router = useRouter(); const { register, setValue } = useForm({ @@ -31,7 +34,7 @@ const FromSeller = () => { mode: 'onChange', }); const [open, setOpen] = useState(false); - const [content, setContent] = useState(''); + // const [content, setContent] = useState(''); const mutation = useMutaionPostSaleProduct(); const setHeaderUnVisible = useSetRecoilState(isHeaderSate); const params = useSearchParams(); @@ -54,14 +57,14 @@ const FromSeller = () => { const slicedValue = currentValue.slice(0, 100); setValue('sellerContent', slicedValue); setWordCount(slicedValue.length); - setContent(slicedValue); + setSellerContent(slicedValue); } else { - setContent(currentValue); + setSellerContent(currentValue); } }; const handleCheckbox = () => { - setAgreedPriceOffer((prev) => !prev); + setIsNego((prev) => !prev); }; const handleModalOpen = () => { @@ -74,6 +77,8 @@ const FromSeller = () => { setSellPrice(0); setDiscountRate(0); setHeaderUnVisible(false); + setIsNego(false); + setSellerContent(''); router.push('/'); }; const handleButtonClick = () => { @@ -86,10 +91,10 @@ const FromSeller = () => { actualProfit: actualProfit, catchprice: catchprice, endDate: endDate!.toISOString(), - introduction: content, + introduction: sellerContent, isAutoCatch: isAutoCatch, isCatch: isCatch, - isNego: agreePriceOffer, + isNego: isNego, // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain catchPriceStartDate: catchPriceStartDate?.toISOString().split('T')[0]!, }; @@ -149,7 +154,7 @@ const FromSeller = () => { diff --git a/components/sale/saleEndContainer/index.tsx b/components/sale/saleEndContainer/index.tsx index 77622099..2262e7ad 100644 --- a/components/sale/saleEndContainer/index.tsx +++ b/components/sale/saleEndContainer/index.tsx @@ -12,25 +12,29 @@ import BottomSheets from '@/components/common/bottomSheets'; import CalendarComponent from '@/components/common/calendar'; import { getDateWithDay } from '@/utils/get-date-with-day'; import { saleSingleDate } from '@/atoms/search-detail/searchStates'; +import { isProductState } from '@/atoms/sale/productAtom'; const SaleEndContainer = () => { const time = useRecoilValue(timeState); const hour = useRecoilValue(hourState); const minute = useRecoilValue(minuteState); const checkInDate = useRecoilValue(checkInDateState); - const date = useMemo(() => new Date(checkInDate!), [checkInDate]); + const isProduct = useRecoilValue(isProductState); const [selected, setSelected] = useRecoilState(saleSingleDate); + console.log(isProduct); + const date = useMemo(() => { + return isProduct ? selected : new Date(checkInDate!); + }, [isProduct, selected, checkInDate]); useEffect(() => { setSelected(date); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [date]); + }, []); const selectedDateString = getDateWithDay(selected); - const year = date.getFullYear(); - const month = date.getMonth() + 1; - const day = date.getDate(); + const year = date!.getFullYear(); + const month = date!.getMonth() + 1; + const day = date!.getDate(); const title = selectedDateString + diff --git a/components/sale/saleInfoContainer/index.tsx b/components/sale/saleInfoContainer/index.tsx index 50cf4f0f..d92f3df2 100644 --- a/components/sale/saleInfoContainer/index.tsx +++ b/components/sale/saleInfoContainer/index.tsx @@ -4,24 +4,58 @@ import Image from 'next/image'; import React, { useEffect } from 'react'; import { useConditionalQuery } from '@/api/sale/query'; import { formatDateWithDay } from '@/utils/get-dot-date'; -import { useSetRecoilState } from 'recoil'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; import { checkInDateState } from '@/atoms/sale/timeAtom'; -import { productPriceState } from '@/atoms/sale/priceAtom'; -// import { isProductState } from '@/atoms/sale/productAtom'; +import { + percentState, + priceState, + productPriceState, +} from '@/atoms/sale/priceAtom'; +import { + isNegoState, + isProductState, + sellerContentState, +} from '@/atoms/sale/productAtom'; +import { + catchSingleDate, + saleSingleDate, +} from '@/atoms/search-detail/searchStates'; +import { catchState } from '@/atoms/sale/catchAtom'; type Props = { id: string | string[] | undefined; }; const SaleInfoContainer = ({ id }: Props) => { - // const [isProduct, setIsProduct] = useRecoilState(isProductState); + const isProduct = useRecoilValue(isProductState); - const { data } = useConditionalQuery(+id!); + const { data } = useConditionalQuery(isProduct, +id!); console.log(data); - // if(isProduct) { + const setPercent = useSetRecoilState(percentState); //할인율 + const setPrice = useSetRecoilState(priceState); //판매가 + const setEndDate = useSetRecoilState(saleSingleDate); //판매종료시점 + const setIsCatch = useSetRecoilState(catchState); //캐치특가 자동설정 여부 + const setCatchEndDate = useSetRecoilState(catchSingleDate); //캐치특가 종료시점 + const setIsNego = useSetRecoilState(isNegoState); + const setSellerContent = useSetRecoilState(sellerContentState); - // } + useEffect(() => { + if (isProduct && data) { + const endDate = new Date(data?.endDate); + console.log(endDate); + if (data.isCatch) { + const catchDate = new Date(data?.catchPriceStartDate); + setCatchEndDate(catchDate); + } + setPercent(data?.discountRate); + setPrice(data?.sellPrice); + setIsCatch(data?.isAutoCatch); + setEndDate(endDate); + setIsNego(data?.isNego); + setSellerContent(data?.introduction); + } + }, [data]); const checkInString = formatDateWithDay(data?.checkIn); const checkOutString = formatDateWithDay(data?.checkOut); From 9db47b0f7b59b54f4a8ede7b3072e785e0974960 Mon Sep 17 00:00:00 2001 From: jimin Date: Thu, 25 Jan 2024 14:06:38 +0900 Subject: [PATCH 11/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=ED=8C=90=EB=A7=A4?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EB=93=B1=EB=A1=9D=20API=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/sale/query.ts | 24 ++++++ components/common/header/index.tsx | 3 + .../bottomSheetsContent/fromSeller/index.tsx | 80 +++++++++++++------ .../sale/catch/catchContainer/index.tsx | 2 + components/sale/saleEndContainer/index.tsx | 43 +++++----- components/sale/saleInfoContainer/index.tsx | 1 + types/sale/type.ts | 2 +- 7 files changed, 111 insertions(+), 44 deletions(-) diff --git a/api/sale/query.ts b/api/sale/query.ts index 9f987423..584e5c00 100644 --- a/api/sale/query.ts +++ b/api/sale/query.ts @@ -71,3 +71,27 @@ export const useMutationPutProductInfo = () => { }); return mutation; }; + +type MutationVariables = { + id?: number; + product: ProductItem; + isProduct: boolean; +}; + +export const useMutationProduct = () => { + // eslint-disable-next-line + const mutation = useMutation({ + mutationKey: ['productMutation'], + mutationFn: async ({ id, product, isProduct }) => { + if (isProduct) { + // id가 제공되지 않으면 오류를 반환하거나 예외를 처리합니다. + if (!id) throw new Error('Product ID is required for updating.'); + return await putProductInfo(product, id); + } else { + return await postSaleProduct(product); + } + }, + }); + + return mutation; +}; diff --git a/components/common/header/index.tsx b/components/common/header/index.tsx index b37b72fb..84eb89c3 100644 --- a/components/common/header/index.tsx +++ b/components/common/header/index.tsx @@ -12,6 +12,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'; import { priceState } from '@/atoms/sale/priceAtom'; import { allCheckState } from '@/atoms/sale/checkAtom'; import { isHeaderSate } from '@/atoms/sale/headerAtom'; +import { isProductState } from '@/atoms/sale/productAtom'; const Header = ({ title, @@ -28,6 +29,7 @@ const Header = ({ const [modalOpen, setModalOpen] = useState(false); const setPrice = useSetRecoilState(priceState); const setAllCheck = useSetRecoilState(allCheckState); + const setIsProduct = useSetRecoilState(isProductState); const headerUnVisible = useRecoilValue(isHeaderSate); @@ -49,6 +51,7 @@ const Header = ({ handleModalOpen(); setPrice(0); setAllCheck(false); + setIsProduct(false); router.back(); }; diff --git a/components/sale/bottomSheetsContent/fromSeller/index.tsx b/components/sale/bottomSheetsContent/fromSeller/index.tsx index 72f3a59c..b04cb852 100644 --- a/components/sale/bottomSheetsContent/fromSeller/index.tsx +++ b/components/sale/bottomSheetsContent/fromSeller/index.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useMutaionPostSaleProduct } from '@/api/sale/query'; +import { useMutationProduct } from '@/api/sale/query'; import { catchPriceState, catchState } from '@/atoms/sale/catchAtom'; import { isHeaderSate } from '@/atoms/sale/headerAtom'; import { @@ -8,7 +8,11 @@ import { priceState, totalPriceState, } from '@/atoms/sale/priceAtom'; -import { isNegoState, sellerContentState } from '@/atoms/sale/productAtom'; +import { + isNegoState, + isProductState, + sellerContentState, +} from '@/atoms/sale/productAtom'; import { catchSingleDate, saleSingleDate, @@ -24,7 +28,7 @@ import { useForm } from 'react-hook-form'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; const FromSeller = () => { - // const [agreePriceOffer, setAgreedPriceOffer] = useState(false); + const [isProduct, setIsProduct] = useRecoilState(isProductState); const [isNego, setIsNego] = useRecoilState(isNegoState); const [sellerContent, setSellerContent] = useRecoilState(sellerContentState); const [wordCount, setWordCount] = useState(0); @@ -34,8 +38,9 @@ const FromSeller = () => { mode: 'onChange', }); const [open, setOpen] = useState(false); - // const [content, setContent] = useState(''); - const mutation = useMutaionPostSaleProduct(); + + const mutation = useMutationProduct(); + const setHeaderUnVisible = useSetRecoilState(isHeaderSate); const params = useSearchParams(); const id = params?.get('id'); @@ -79,29 +84,54 @@ const FromSeller = () => { setHeaderUnVisible(false); setIsNego(false); setSellerContent(''); + setIsProduct(false); router.push('/'); }; const handleButtonClick = () => { - //api 호출 + let productData: ProductItem; - const productData: ProductItem = { - orderHistoryId: +id!, - discountRate: discountRate, - sellPrice: sellPrice, - actualProfit: actualProfit, - catchprice: catchprice, - endDate: endDate!.toISOString(), - introduction: sellerContent, - isAutoCatch: isAutoCatch, - isCatch: isCatch, - isNego: isNego, - // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain - catchPriceStartDate: catchPriceStartDate?.toISOString().split('T')[0]!, - }; - mutation.mutate(productData, { - onSuccess: handleMutationSucess, - onError: handleMutationError, - }); + if (isProduct) { + // isProduct가 true일 때: orderHistoryId를 제외한 객체 생성 + productData = { + discountRate: discountRate, + sellPrice: sellPrice, + actualProfit: actualProfit, + catchprice: catchprice, + endDate: endDate!.toISOString(), + introduction: sellerContent, + isAutoCatch: isAutoCatch, + isCatch: isCatch, + isNego: isNego, + catchPriceStartDate: catchPriceStartDate!.toISOString().split('T')[0]!, + }; + } else { + // isProduct가 false일 때: orderHistoryId를 포함한 객체 생성 + productData = { + orderHistoryId: +id!, + discountRate: discountRate, + sellPrice: sellPrice, + actualProfit: actualProfit, + catchprice: catchprice, + endDate: endDate!.toISOString(), + introduction: sellerContent, + isAutoCatch: isAutoCatch, + isCatch: isCatch, + isNego: isNego, + catchPriceStartDate: catchPriceStartDate!.toISOString().split('T')[0]!, + }; + } + + mutation.mutate( + { + id: +id!, + product: productData, + isProduct: isProduct, + }, + { + onSuccess: handleMutationSucess, + onError: handleMutationError, + }, + ); }; type APIresponse = { @@ -113,7 +143,7 @@ const FromSeller = () => { }; const handleMutationSucess = (data: APIresponse) => { console.log(data); - if (data.code === 4010) { + if (data.code === 4010 || data.code === 4020) { router.push(`/room-info/${data.data.id}`); setHeaderUnVisible(false); } else if (data.code === 4012) { diff --git a/components/sale/catch/catchContainer/index.tsx b/components/sale/catch/catchContainer/index.tsx index 04cf505a..6ca4e523 100644 --- a/components/sale/catch/catchContainer/index.tsx +++ b/components/sale/catch/catchContainer/index.tsx @@ -36,6 +36,8 @@ const CatchContainer = () => { const selectedSaleEndDate = useRecoilValue(saleSingleDate); + console.log('캐치특가', selectedSaleEndDate); + const [selected, setSelected] = useRecoilState(catchSingleDate); // 캐치특가 선택 날짜 useEffect(() => { diff --git a/components/sale/saleEndContainer/index.tsx b/components/sale/saleEndContainer/index.tsx index 2262e7ad..5a5e2dd6 100644 --- a/components/sale/saleEndContainer/index.tsx +++ b/components/sale/saleEndContainer/index.tsx @@ -21,34 +21,41 @@ const SaleEndContainer = () => { const isProduct = useRecoilValue(isProductState); const [selected, setSelected] = useRecoilState(saleSingleDate); - console.log(isProduct); + const checkIn = new Date(checkInDate!); const date = useMemo(() => { - return isProduct ? selected : new Date(checkInDate!); + return isProduct ? selected : checkIn; + // eslint-disable-next-line react-hooks/exhaustive-deps }, [isProduct, selected, checkInDate]); + console.log(isProduct, date); + useEffect(() => { setSelected(date); - }, []); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [checkInDate]); const selectedDateString = getDateWithDay(selected); - const year = date!.getFullYear(); - const month = date!.getMonth() + 1; - const day = date!.getDate(); + const year = isProduct ? checkIn!.getFullYear() : date!.getFullYear(); + const month = isProduct ? checkIn!.getMonth() + 1 : date!.getMonth() + 1; + const day = isProduct ? checkIn!.getDate() : date!.getDate(); + console.log(checkIn, month, day); const title = - selectedDateString + - ' ' + - time.toString() + - ' ' + - (hour < 10 - ? '0' + - hour.toString() + - ':' + - (minute < 10 ? '0' + minute.toString() : minute.toString()) - : hour.toString() + - ':' + - (minute < 10 ? '0' + minute.toString() : minute.toString())); + selected === undefined + ? '판매일을 선택해주세요.' + : selectedDateString + + ' ' + + time.toString() + + ' ' + + (hour < 10 + ? '0' + + hour.toString() + + ':' + + (minute < 10 ? '0' + minute.toString() : minute.toString()) + : hour.toString() + + ':' + + (minute < 10 ? '0' + minute.toString() : minute.toString())); return (
diff --git a/components/sale/saleInfoContainer/index.tsx b/components/sale/saleInfoContainer/index.tsx index d92f3df2..253448d5 100644 --- a/components/sale/saleInfoContainer/index.tsx +++ b/components/sale/saleInfoContainer/index.tsx @@ -55,6 +55,7 @@ const SaleInfoContainer = ({ id }: Props) => { setIsNego(data?.isNego); setSellerContent(data?.introduction); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [data]); const checkInString = formatDateWithDay(data?.checkIn); diff --git a/types/sale/type.ts b/types/sale/type.ts index 2fdc54fe..a8925256 100644 --- a/types/sale/type.ts +++ b/types/sale/type.ts @@ -1,5 +1,5 @@ export type ProductItem = { - orderHistoryId: number; + orderHistoryId?: number; discountRate: number; sellPrice: number; actualProfit: number; From 55685ed635d87e64b8cedf6064ac9e19ac9e2d71 Mon Sep 17 00:00:00 2001 From: jimin Date: Thu, 25 Jan 2024 14:17:23 +0900 Subject: [PATCH 12/24] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=ED=8C=90?= =?UTF-8?q?=EB=A7=A4=EC=9E=90=20=ED=95=9C=EB=A7=88=EB=94=94=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/roomInfo/header/leftButton/index.tsx | 12 ++++++++++-- .../sale/bottomSheetsContent/fromSeller/index.tsx | 7 ++++++- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/components/roomInfo/header/leftButton/index.tsx b/components/roomInfo/header/leftButton/index.tsx index dd8be1be..8baccedf 100644 --- a/components/roomInfo/header/leftButton/index.tsx +++ b/components/roomInfo/header/leftButton/index.tsx @@ -1,13 +1,21 @@ 'use client'; -import { useRouter } from 'next/navigation'; +import { usePathname, useRouter } from 'next/navigation'; import React from 'react'; import LeftButtonIcon from './leftButtonIcon'; const LeftButton = () => { const router = useRouter(); + const pathname = usePathname(); const backPageHandler = () => { - router.back(); + // 현재 경로가 /sale인지 확인 + if (pathname === '/sale') { + // /sale 경로일 경우 홈(/)으로 리다이렉트 + router.push('/'); + } else { + // 그 외의 경우 이전 페이지로 돌아감 + router.back(); + } }; return ( diff --git a/components/sale/bottomSheetsContent/fromSeller/index.tsx b/components/sale/bottomSheetsContent/fromSeller/index.tsx index b04cb852..66d15d55 100644 --- a/components/sale/bottomSheetsContent/fromSeller/index.tsx +++ b/components/sale/bottomSheetsContent/fromSeller/index.tsx @@ -23,7 +23,7 @@ import { FromSeller, sellerSchema } from '@/constants/zodSchema'; import { ProductItem } from '@/types/sale/type'; import { zodResolver } from '@hookform/resolvers/zod'; import { useRouter, useSearchParams } from 'next/navigation'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; @@ -54,6 +54,11 @@ const FromSeller = () => { const isCatch = discountRate >= 50 ? true : false; const [modalContent, setModalContent] = useState(''); + useEffect(() => { + if (isProduct) setValue('sellerContent', sellerContent); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const handleContentChange = (e: React.ChangeEvent) => { const currentValue = e.target.value; setWordCount(currentValue.length); From 86c583d9c2fa52130aa5b420e29c4b9f62dc9f4a Mon Sep 17 00:00:00 2001 From: jimin Date: Thu, 25 Jan 2024 14:36:26 +0900 Subject: [PATCH 13/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=EB=9D=BC=EC=9A=B0?= =?UTF-8?q?=ED=8C=85=20=EC=95=84=ED=86=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- atoms/sale/pageAtom.ts | 6 ++++++ components/roomInfo/header/leftButton/index.tsx | 11 ++++++++--- .../sale/bottomSheetsContent/fromSeller/index.tsx | 6 +++++- 3 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 atoms/sale/pageAtom.ts diff --git a/atoms/sale/pageAtom.ts b/atoms/sale/pageAtom.ts new file mode 100644 index 00000000..48258105 --- /dev/null +++ b/atoms/sale/pageAtom.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const isFromSalePageState = atom({ + key: 'isFromSalePageState', + default: false, +}); diff --git a/components/roomInfo/header/leftButton/index.tsx b/components/roomInfo/header/leftButton/index.tsx index 8baccedf..95b2159f 100644 --- a/components/roomInfo/header/leftButton/index.tsx +++ b/components/roomInfo/header/leftButton/index.tsx @@ -1,16 +1,21 @@ 'use client'; -import { usePathname, useRouter } from 'next/navigation'; +import { useRouter } from 'next/navigation'; import React from 'react'; import LeftButtonIcon from './leftButtonIcon'; +import { useRecoilState } from 'recoil'; +import { isFromSalePageState } from '@/atoms/sale/pageAtom'; const LeftButton = () => { const router = useRouter(); - const pathname = usePathname(); + + const [isFromSalePage, setIsFromSalePage] = + useRecoilState(isFromSalePageState); const backPageHandler = () => { // 현재 경로가 /sale인지 확인 - if (pathname === '/sale') { + if (isFromSalePage) { // /sale 경로일 경우 홈(/)으로 리다이렉트 + setIsFromSalePage(false); router.push('/'); } else { // 그 외의 경우 이전 페이지로 돌아감 diff --git a/components/sale/bottomSheetsContent/fromSeller/index.tsx b/components/sale/bottomSheetsContent/fromSeller/index.tsx index 66d15d55..55cbf2a7 100644 --- a/components/sale/bottomSheetsContent/fromSeller/index.tsx +++ b/components/sale/bottomSheetsContent/fromSeller/index.tsx @@ -3,6 +3,7 @@ import { useMutationProduct } from '@/api/sale/query'; import { catchPriceState, catchState } from '@/atoms/sale/catchAtom'; import { isHeaderSate } from '@/atoms/sale/headerAtom'; +import { isFromSalePageState } from '@/atoms/sale/pageAtom'; import { percentState, priceState, @@ -54,6 +55,8 @@ const FromSeller = () => { const isCatch = discountRate >= 50 ? true : false; const [modalContent, setModalContent] = useState(''); + const setIsFromSalePageState = useSetRecoilState(isFromSalePageState); + useEffect(() => { if (isProduct) setValue('sellerContent', sellerContent); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -149,8 +152,9 @@ const FromSeller = () => { const handleMutationSucess = (data: APIresponse) => { console.log(data); if (data.code === 4010 || data.code === 4020) { - router.push(`/room-info/${data.data.id}`); + setIsFromSalePageState(true); setHeaderUnVisible(false); + router.push(`/room-info/${data.data.id}`); } else if (data.code === 4012) { setModalContent('이미 등록된 상품입니다.'); setOpen(true); From 45104efaa746cb13fd5273badfcde70c9c3d2a98 Mon Sep 17 00:00:00 2001 From: jimin Date: Thu, 25 Jan 2024 14:51:20 +0900 Subject: [PATCH 14/24] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/sale/bottomSheetsContent/fromSeller/index.tsx | 2 +- components/sale/saleInfoContainer/index.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/components/sale/bottomSheetsContent/fromSeller/index.tsx b/components/sale/bottomSheetsContent/fromSeller/index.tsx index 55cbf2a7..dff1bdc1 100644 --- a/components/sale/bottomSheetsContent/fromSeller/index.tsx +++ b/components/sale/bottomSheetsContent/fromSeller/index.tsx @@ -153,8 +153,8 @@ const FromSeller = () => { console.log(data); if (data.code === 4010 || data.code === 4020) { setIsFromSalePageState(true); - setHeaderUnVisible(false); router.push(`/room-info/${data.data.id}`); + setHeaderUnVisible(false); } else if (data.code === 4012) { setModalContent('이미 등록된 상품입니다.'); setOpen(true); diff --git a/components/sale/saleInfoContainer/index.tsx b/components/sale/saleInfoContainer/index.tsx index 253448d5..1ec0a0ca 100644 --- a/components/sale/saleInfoContainer/index.tsx +++ b/components/sale/saleInfoContainer/index.tsx @@ -29,7 +29,7 @@ type Props = { const SaleInfoContainer = ({ id }: Props) => { const isProduct = useRecoilValue(isProductState); - const { data } = useConditionalQuery(isProduct, +id!); + const { data, isLoading } = useConditionalQuery(isProduct, +id!); console.log(data); const setPercent = useSetRecoilState(percentState); //할인율 @@ -72,6 +72,7 @@ const SaleInfoContainer = ({ id }: Props) => { setProductPrice(data?.price); }, [data, setProductPrice]); + if (isLoading) return
Loding...
; return (
From 91a1c0fdd454b2eec9048a322b0997937defb453 Mon Sep 17 00:00:00 2001 From: junkue20 Date: Thu, 25 Jan 2024 15:06:23 +0900 Subject: [PATCH 15/24] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=EC=9D=B8?= =?UTF-8?q?=EC=9B=90=20=EC=88=98=20=EC=B9=B4=EC=9A=B4=ED=84=B0=20=EC=9D=B4?= =?UTF-8?q?=EC=8A=88=20=ED=95=B4=EA=B2=B0=20(=EC=95=84=EB=8F=99=200?= =?UTF-8?q?=EB=AA=85=20disabled=20=EA=B4=80=EB=A0=A8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../searchComponent/userCounter/index.tsx | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/components/searchroom/bodyComponent/searchComponent/userCounter/index.tsx b/components/searchroom/bodyComponent/searchComponent/userCounter/index.tsx index ab488b08..75e9e303 100644 --- a/components/searchroom/bodyComponent/searchComponent/userCounter/index.tsx +++ b/components/searchroom/bodyComponent/searchComponent/userCounter/index.tsx @@ -20,18 +20,13 @@ const UserCounterComponent = ({ countState, allCount }: UserCounterProps) => { ); useEffect(() => { - if (count === 1) { + if ((countState === 'adult' && count === 1) || count === 0) setMBtnState(false); - } else { - setMBtnState(true); - } + else setMBtnState(true); - if (count === 10 || allCount === 10) { - setPBtnState(false); - } else { - setPBtnState(true); - } - }, [count, allCount]); + if (count === 10 || allCount === 10) setPBtnState(false); + else setPBtnState(true); + }, [count, allCount, countState]); const onDecrease = () => { setCount((prev) => prev - 1); @@ -42,7 +37,18 @@ const UserCounterComponent = ({ countState, allCount }: UserCounterProps) => { return (
-

{count}

From a2808b73d2f623f679d15ae3c535e1092cc5dc94 Mon Sep 17 00:00:00 2001 From: junkue20 Date: Thu, 25 Jan 2024 15:09:33 +0900 Subject: [PATCH 16/24] =?UTF-8?q?=F0=9F=8E=A8=20style=20:=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95=20=EC=9A=94=EC=B2=AD?= =?UTF-8?q?=EA=B1=B4=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/catchItems/items/index.tsx | 5 +++-- components/common/calendar/index.tsx | 6 +++--- components/common/checkInDateComponent/index.tsx | 4 ++-- components/common/searchBoxButton/index.tsx | 2 +- components/common/searchBtmSheets/calendar/index.tsx | 2 +- components/common/searchBtmSheets/customer/index.tsx | 2 +- components/common/searchBtmSheets/region/index.tsx | 2 +- components/common/searchBtmSheets/room/index.tsx | 2 +- components/home/checkIn/index.tsx | 11 ++++++----- 9 files changed, 19 insertions(+), 17 deletions(-) diff --git a/components/catchItems/items/index.tsx b/components/catchItems/items/index.tsx index 02ec8fd0..82ee19ca 100644 --- a/components/catchItems/items/index.tsx +++ b/components/catchItems/items/index.tsx @@ -40,7 +40,7 @@ const ItemsComponent = () => { return (
-
+
{data && data.list.map((data: DeadLineItem) => { return ( @@ -50,7 +50,8 @@ const ItemsComponent = () => { image={data.image} accommodationName={data.accommodationName} roomName={data.roomName} - resDate={data.checkIn + ' - ' + data.checkOut} + checkIn={data.checkIn} + checkOut={data.checkOut} catchType={data.catchType} originalPrice={data.originalPrice} discountRate={data.discountRate} diff --git a/components/common/calendar/index.tsx b/components/common/calendar/index.tsx index 7752a26f..64ee8790 100644 --- a/components/common/calendar/index.tsx +++ b/components/common/calendar/index.tsx @@ -59,8 +59,8 @@ const CalendarComponent = ({ to: new Date(2099, 12, 31), }; - const leftFooterStyle = 'text-h3 font-semibold mr-3 break-keep'; - const rightFooterStyle = 'text-h3 font-semibold ml-3 break-keep'; + const leftFooterStyle = 'text-h3 font-medium mr-3 break-keep'; + const rightFooterStyle = 'text-h3 font-medium ml-3 break-keep'; let footer = ( <> @@ -131,7 +131,7 @@ const CalendarComponent = ({
) : (
- 입실 희망 날짜 + 입실 희망 날짜
{footer}
) diff --git a/components/common/checkInDateComponent/index.tsx b/components/common/checkInDateComponent/index.tsx index 8b0f56c3..8d2bb251 100644 --- a/components/common/checkInDateComponent/index.tsx +++ b/components/common/checkInDateComponent/index.tsx @@ -17,14 +17,14 @@ const CheckInDateComponent = ({ return (
-
체크인
+
체크인
{CheckInDate} {CHECKIN_TIME}
-
체크아웃
+
체크아웃
{CheckOutDate} {CHECKOUT_TIME}
diff --git a/components/common/searchBoxButton/index.tsx b/components/common/searchBoxButton/index.tsx index fc2af6fa..646bc05a 100644 --- a/components/common/searchBoxButton/index.tsx +++ b/components/common/searchBoxButton/index.tsx @@ -30,7 +30,7 @@ const SearchBoxButton = ({ {icon === 'calendar' && } {icon === 'house' && } {icon === 'person' && } -

{placeholder}

+

{placeholder}

diff --git a/components/common/searchBtmSheets/calendar/index.tsx b/components/common/searchBtmSheets/calendar/index.tsx index 23d74a29..15df7a54 100644 --- a/components/common/searchBtmSheets/calendar/index.tsx +++ b/components/common/searchBtmSheets/calendar/index.tsx @@ -82,7 +82,7 @@ const CalendarBottomSheet = ({ closeButton innerButtonTitle={'확인'} > -
+
{prop.icon === 'calendar' && ( <> -
+
{prop.icon === 'person' && (
diff --git a/components/common/searchBtmSheets/region/index.tsx b/components/common/searchBtmSheets/region/index.tsx index 70828e9f..24087bcb 100644 --- a/components/common/searchBtmSheets/region/index.tsx +++ b/components/common/searchBtmSheets/region/index.tsx @@ -120,7 +120,7 @@ const RegionBottomSheet = ({ closeButton innerButtonTitle={'확인'} > -
+
{prop.icon === 'pin' && ( <> -
+
{prop.icon === 'house' && ( <> {

체크인 마감임박!

-
+
{/* 상단 일주일 달력 */}
{/* 캐치특가 상품 목록 */} -
+
{data && data.list.map((data: DeadLineItem) => { return ( @@ -46,7 +46,8 @@ const CheckInComponent = () => { image={data.image} accommodationName={data.accommodationName} roomName={data.roomName} - resDate={data.checkIn + ' - ' + data.checkOut} + checkIn={data.checkIn} + checkOut={data.checkOut} catchType={data.catchType} originalPrice={data.originalPrice} sellPrice={data.sellPrice} @@ -64,7 +65,7 @@ const CheckInComponent = () => {
{/* 전체보기 버튼 컴포넌트 */} -
+
-
+
); From 1de6a0af246cb8f5e30137c0560c1b6dcf4dc338 Mon Sep 17 00:00:00 2001 From: junkue20 Date: Thu, 25 Jan 2024 15:11:50 +0900 Subject: [PATCH 17/24] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20?= =?UTF-8?q?=EC=83=81=ED=92=88=20=EA=B3=B5=EB=8F=99=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=82=A0=EC=A7=9C=20props=20=EC=84=B8?= =?UTF-8?q?=EB=B6=84=ED=99=94=20=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/catchComponent/index.tsx | 34 +++++++++++++++------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/components/common/catchComponent/index.tsx b/components/common/catchComponent/index.tsx index eef90fd6..b74cd2c1 100644 --- a/components/common/catchComponent/index.tsx +++ b/components/common/catchComponent/index.tsx @@ -5,6 +5,7 @@ import React from 'react'; import XSymbolIcon from '@/public/svgComponent/xSymbol'; import CalendarIcon from '@/public/svgComponent/calendar'; import HeartButton from '../heartButton'; +import { formatDateWithDay } from '@/utils/get-dot-date'; /** * 상품들을 조회할 수 있는 컴포넌트입니다. @@ -34,7 +35,8 @@ const CatchSpecialComponent = ({ image = '/sample/room3.png', accommodationName, roomName, - resDate, + checkIn, + checkOut, catchType, originalPrice, discountRate, @@ -52,16 +54,28 @@ const CatchSpecialComponent = ({ console.log('삭제버튼이 클릭됐습니다.'); }, }: catchItems) => { + const checkInString = formatDateWithDay(checkIn!); + const checkOutString = formatDateWithDay(checkOut!); + const deleteHandler = (e: React.MouseEvent) => { e.stopPropagation(); deleteBtnHandler(); }; + // 반응형 작업중입니다! 지우지 말아주세요~ + // const truncateString = (str: string) => { + // if (str.length > 10) { + // return str.substring(0, 10) + '...'; + // } else { + // return str; + // } + // }; + return (
{/* 숙소 이미지 및 캐치특가 */} -
+
{catchType ? (
캐치 특가 @@ -77,26 +91,26 @@ const CatchSpecialComponent = ({
- {resDate} + {checkInString} - {checkOutString}
-
-
+
+
{accommodationName}
-
- {roomName} +
+ {roomName!}
-
+

구매가 {originalPrice?.toLocaleString('us-EN')}원

-

{discountRate}%

-

+

{discountRate}%

+

{sellPrice?.toLocaleString('us-EN')}원

From a92e9c67fb2def529f588a335c832cc0eba83829 Mon Sep 17 00:00:00 2001 From: junkue20 Date: Thu, 25 Jan 2024 15:13:13 +0900 Subject: [PATCH 18/24] =?UTF-8?q?=F0=9F=90=9B=20fix=20:=20=EC=83=81?= =?UTF-8?q?=ED=92=88=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=9D=BC=EB=B6=80=20=EA=B0=9C=EC=84=A0=20?= =?UTF-8?q?=EB=B0=8F=20Nav=EB=B0=94=20atom=20=EC=B4=88=EA=B8=B0=ED=99=94?= =?UTF-8?q?=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../body/navbarSection/navbarButton/index.tsx | 9 ++++- .../body/navbarSection/page/accInfo/index.tsx | 37 ++++++++++++++++--- .../navbarSection/page/accRegion/index.tsx | 2 +- .../navbarSection/page/roomInfo/index.tsx | 6 +-- .../body/roomInfo/itemCheckIn/index.tsx | 12 +++--- .../roomInfo/body/roomInfo/price/index.tsx | 14 ++----- 6 files changed, 52 insertions(+), 28 deletions(-) diff --git a/components/roomInfo/body/navbarSection/navbarButton/index.tsx b/components/roomInfo/body/navbarSection/navbarButton/index.tsx index 743764cf..493eb957 100644 --- a/components/roomInfo/body/navbarSection/navbarButton/index.tsx +++ b/components/roomInfo/body/navbarSection/navbarButton/index.tsx @@ -1,11 +1,16 @@ 'use client'; -import React from 'react'; -import { useRecoilState } from 'recoil'; +import React, { useEffect } from 'react'; +import { useRecoilState, useResetRecoilState } from 'recoil'; import { activeButtonState } from '@/atoms/roomInfo/navbarButton'; import { ButtonType } from '@/types/room-info/types'; const NavbarButtonComponent = () => { const [activeButton, setActiveButton] = useRecoilState(activeButtonState); + const resetNavBtnState = useResetRecoilState(activeButtonState); + + useEffect(() => { + resetNavBtnState(); // eslint-disable-next-line + }, []); const relativeStyle = 'relative flex w-1/3 h-[34px]'; const absoluteStyle = diff --git a/components/roomInfo/body/navbarSection/page/accInfo/index.tsx b/components/roomInfo/body/navbarSection/page/accInfo/index.tsx index 94cafd01..acc0be39 100644 --- a/components/roomInfo/body/navbarSection/page/accInfo/index.tsx +++ b/components/roomInfo/body/navbarSection/page/accInfo/index.tsx @@ -1,13 +1,40 @@ +'use client'; +import { useRoomItem } from '@/api/room-info/query'; +import PinkCheckIcon from '@/public/svgComponent/roomInfo/navbarSection/pinkCheckIcon'; +import { UseParamsType } from '@/types/room-info/types'; +import { useParams } from 'next/navigation'; import React from 'react'; const NavAccInfoComponent = () => { - // 필요한 데이터 - // (편의시설 관련 정보) + const { id } = useParams() as UseParamsType; + const { data, isLoading } = useRoomItem(id); + return (
-
- 내용 -
+ {isLoading ? ( + <> +
+ + ) : ( + <> +

시설 및 서비스

+
+ {data?.data.accommodationService.map( + (data: string[], index: number) => { + return ( +

+ + {data} +

+ ); + }, + )} +
+ + )}
); }; diff --git a/components/roomInfo/body/navbarSection/page/accRegion/index.tsx b/components/roomInfo/body/navbarSection/page/accRegion/index.tsx index daf07ccc..ba5e68d4 100644 --- a/components/roomInfo/body/navbarSection/page/accRegion/index.tsx +++ b/components/roomInfo/body/navbarSection/page/accRegion/index.tsx @@ -11,7 +11,7 @@ const NavAccRegionComponent = () => { const { id } = useParams() as UseParamsType; const { data } = useRoomItem(id); - const address = data && data.data.address; + const address = data?.data.address; const { alertOpenHandler } = useToastAlert('주소를 복사했어요!'); diff --git a/components/roomInfo/body/navbarSection/page/roomInfo/index.tsx b/components/roomInfo/body/navbarSection/page/roomInfo/index.tsx index 4a5b652a..cebd1801 100644 --- a/components/roomInfo/body/navbarSection/page/roomInfo/index.tsx +++ b/components/roomInfo/body/navbarSection/page/roomInfo/index.tsx @@ -20,7 +20,7 @@ const NavRoomInfoComponent = () => { ) : ( <> - {data && data.data.roomUrl && ( + {data?.data.roomUrl && ( {

- 기준 {data && data.data.roomNormalCapacity}인 / 최대 - {data && data.data.roomMaxCapacity} + 기준 {data?.data.roomNormalCapacity}인 / 최대{' '} + {data?.data.roomMaxCapacity}인

퀸 침대 diff --git a/components/roomInfo/body/roomInfo/itemCheckIn/index.tsx b/components/roomInfo/body/roomInfo/itemCheckIn/index.tsx index f8a659cc..73990231 100644 --- a/components/roomInfo/body/roomInfo/itemCheckIn/index.tsx +++ b/components/roomInfo/body/roomInfo/itemCheckIn/index.tsx @@ -2,7 +2,7 @@ import { useRoomItem } from '@/api/room-info/query'; import CheckInDateComponent from '@/components/common/checkInDateComponent'; import { UseParamsType } from '@/types/room-info/types'; -import { getDotDate } from '@/utils/get-dot-date'; +import { formatDateWithDay } from '@/utils/get-dot-date'; import { useParams } from 'next/navigation'; import React from 'react'; @@ -10,18 +10,16 @@ const ItemCheckInComponent = () => { const { id } = useParams() as UseParamsType; const { data, isLoading } = useRoomItem(id); + const checkInString = formatDateWithDay(data?.data.checkIn); + const checkOutString = formatDateWithDay(data?.data.checkOut); return ( <> {isLoading ? (

) : ( )} diff --git a/components/roomInfo/body/roomInfo/price/index.tsx b/components/roomInfo/body/roomInfo/price/index.tsx index f5a75d72..f2843849 100644 --- a/components/roomInfo/body/roomInfo/price/index.tsx +++ b/components/roomInfo/body/roomInfo/price/index.tsx @@ -19,12 +19,9 @@ const PriceComponent = () => { ) : ( <> - 구매가 + 구매가

- {data && - data.data.originalPrice && - data.data.originalPrice.toLocaleString()} - 원 + {data?.data.originalPrice?.toLocaleString()}원

)} @@ -38,16 +35,13 @@ const PriceComponent = () => { ) : ( <> - 판매가 + 판매가

{data && data.data.discountRate}%

- {data && - data.data.sellPrice && - data.data.sellPrice.toLocaleString()} - 원 + {data?.data.sellPrice?.toLocaleString()}원

From e28a77cac372397973f1b5ee79dfc058054acf8b Mon Sep 17 00:00:00 2001 From: junkue20 Date: Thu, 25 Jan 2024 15:14:09 +0900 Subject: [PATCH 19/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=ED=95=91=ED=81=AC?= =?UTF-8?q?=EC=83=89=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4SVG=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(=EC=83=81=ED=92=88=20=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=84=A4=EB=AA=85=EB=9E=80=EC=9A=A9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../roomInfo/navbarSection/pinkCheckIcon.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 public/svgComponent/roomInfo/navbarSection/pinkCheckIcon.tsx diff --git a/public/svgComponent/roomInfo/navbarSection/pinkCheckIcon.tsx b/public/svgComponent/roomInfo/navbarSection/pinkCheckIcon.tsx new file mode 100644 index 00000000..4cf6e582 --- /dev/null +++ b/public/svgComponent/roomInfo/navbarSection/pinkCheckIcon.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +const PinkCheckIcon = () => ( + + + +); +export default PinkCheckIcon; \ No newline at end of file From f67549749d175852ad2f9ce2646ef3867f384c19 Mon Sep 17 00:00:00 2001 From: junkue20 Date: Thu, 25 Jan 2024 15:14:33 +0900 Subject: [PATCH 20/24] =?UTF-8?q?=F0=9F=93=A6=20chore=20:=20=EC=9D=B4?= =?UTF-8?q?=ED=9B=84=20=EC=9E=91=EC=97=85=EC=9A=A9=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/roomInfo/footer/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/roomInfo/footer/index.tsx b/components/roomInfo/footer/index.tsx index 6e2b6258..a2f59299 100644 --- a/components/roomInfo/footer/index.tsx +++ b/components/roomInfo/footer/index.tsx @@ -2,6 +2,9 @@ import React from 'react'; import { Button } from '@material-tailwind/react'; +// import { UseParamsType } from '@/types/room-info/types'; +// import { useParams } from 'next/navigation'; +// import { useRoomItem } from '@/api/room-info/query'; import { useRecoilState } from 'recoil'; import { viewerTestButton } from '@/atoms/roomInfo/headerTitle'; @@ -12,8 +15,9 @@ const FooterComponent = () => { const [viewerState] = useRecoilState(viewerTestButton); // 지민님 작업 끝나시면 이어서 할 예정. - // const { id } = useParams(); + // const { id } = useParams() as UseParamsType; // const { data } = useRoomItem(id); + // const userState = data?.data.userIdentity; const buttonClass = 'font-pretend h-full rounded-[4px] text-t1 font-semibold shadow-none'; From f0cc3ece7ea2bf79c2d33dc50ca16b45c75f8575 Mon Sep 17 00:00:00 2001 From: junkue20 Date: Thu, 25 Jan 2024 15:33:32 +0900 Subject: [PATCH 21/24] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor=20:=20?= =?UTF-8?q?=EC=B2=B4=ED=81=AC=EC=9D=B8=20&=20=EC=B2=B4=ED=81=AC=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EA=B3=B5=EB=8F=99=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20=EC=B2=98=EB=A6=AC=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/checkInDateComponent/index.tsx | 7 +++++-- components/roomInfo/body/roomInfo/itemCheckIn/index.tsx | 7 ++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/components/common/checkInDateComponent/index.tsx b/components/common/checkInDateComponent/index.tsx index 8d2bb251..8aea71b4 100644 --- a/components/common/checkInDateComponent/index.tsx +++ b/components/common/checkInDateComponent/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { CheckInComponentProps } from '@/types/common/checkInComponent/types'; import { CHECKIN_TIME, CHECKOUT_TIME } from '@/constants/CheckInOut'; +import { formatDateWithDay } from '@/utils/get-dot-date'; /** * 개별 상품의 체크인-체크아웃 날짜를 확인할 수 있는 컴포넌트입니다. * props로 checkInDate, CheckInTime, CheckOutDate, CheckOutTime 네가지를 입력받아야 합니다. @@ -14,19 +15,21 @@ const CheckInDateComponent = ({ CheckInDate = '00.00 (월)', CheckOutDate = '00.00 (월)', }: CheckInComponentProps) => { + const checkInString = formatDateWithDay(CheckInDate); + const checkOutString = formatDateWithDay(CheckOutDate); return (
체크인
- {CheckInDate} {CHECKIN_TIME} + {checkInString} {CHECKIN_TIME}
체크아웃
- {CheckOutDate} {CHECKOUT_TIME} + {checkOutString} {CHECKOUT_TIME}
diff --git a/components/roomInfo/body/roomInfo/itemCheckIn/index.tsx b/components/roomInfo/body/roomInfo/itemCheckIn/index.tsx index 73990231..42eda6a6 100644 --- a/components/roomInfo/body/roomInfo/itemCheckIn/index.tsx +++ b/components/roomInfo/body/roomInfo/itemCheckIn/index.tsx @@ -2,7 +2,6 @@ import { useRoomItem } from '@/api/room-info/query'; import CheckInDateComponent from '@/components/common/checkInDateComponent'; import { UseParamsType } from '@/types/room-info/types'; -import { formatDateWithDay } from '@/utils/get-dot-date'; import { useParams } from 'next/navigation'; import React from 'react'; @@ -10,16 +9,14 @@ const ItemCheckInComponent = () => { const { id } = useParams() as UseParamsType; const { data, isLoading } = useRoomItem(id); - const checkInString = formatDateWithDay(data?.data.checkIn); - const checkOutString = formatDateWithDay(data?.data.checkOut); return ( <> {isLoading ? (
) : ( )} From 1c2fd702eebf22babb3333cab77176960e5c8586 Mon Sep 17 00:00:00 2001 From: MinSeobKim Date: Thu, 25 Jan 2024 20:31:26 +0900 Subject: [PATCH 22/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20=EB=AC=B4=ED=95=9C?= =?UTF-8?q?=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B8=B0=EB=8A=A5=EC=99=84?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/chat/api.ts | 24 ++++++ app/talk/infinite/page.tsx | 70 ++++++++++++++++ .../chat/chatRoom/infiniteWrapper/index.tsx | 80 +++++++++++++++++++ .../chat/chatRoom/messageItem/index.tsx | 2 +- components/chat/chatRoom/viewer/index.tsx | 18 ++++- hooks/useChatConnection.ts | 5 +- package-lock.json | 42 ++++++++++ package.json | 3 + 8 files changed, 238 insertions(+), 6 deletions(-) create mode 100644 app/talk/infinite/page.tsx create mode 100644 components/chat/chatRoom/infiniteWrapper/index.tsx diff --git a/api/chat/api.ts b/api/chat/api.ts index 99a1f11c..1b418454 100644 --- a/api/chat/api.ts +++ b/api/chat/api.ts @@ -26,3 +26,27 @@ export const fetchPreviousChat = async (roomId: string, token: string) => { const result = await data.data; return result.data; }; + +export const infinitePreviousChat = async ({ + pageParam, + roomId, + token, +}: { + pageParam: number; + roomId: string; + token: string; +}) => { + console.log('pageParam은', pageParam); + const data = await axios.get( + `https://catchroom.store/v1/chat/room/find?page=${pageParam}&id=${roomId}`, + { + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${token}`, + }, + }, + ); + + const result = await data.data; + return result.data; +}; diff --git a/app/talk/infinite/page.tsx b/app/talk/infinite/page.tsx new file mode 100644 index 00000000..cbe434fb --- /dev/null +++ b/app/talk/infinite/page.tsx @@ -0,0 +1,70 @@ +'use client'; + +import React from 'react'; +import { infinitePreviousChat } from '@/api/chat/api'; +import { useCookies } from 'react-cookie'; +import { useInfiniteQuery } from '@tanstack/react-query'; +// import InfiniteScroll from 'react-infinite-scroller'; +import InfiniteScroll from 'react-infinite-scroll-component'; +import LoginButton from '../LoginButton'; + +const InfiniteScrollWrapper = () => { + const roomId = 'df16caeb-d73a-470a-af14-b7edf276ddc2'; + const [cookies] = useCookies(); + const token = cookies.accessToken; + + const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({ + queryKey: ['messages'], + queryFn: ({ pageParam }) => + infinitePreviousChat({ pageParam, roomId, token }), + initialPageParam: 0, + getNextPageParam: (lastPage, allPages, lastPageParam) => { + if (lastPage.length === 0) { + return undefined; + } + + return lastPageParam + 1; + }, + }); + + return ( +
+ + Loading ... +
+ } + > +
+ {' '} + {data ? ( + data.pages.map((page, pageIndex) => ( +
+ {/* eslint-disable-next-line */} + {page.map((item: any, index: number) => ( +
+
{item.message}
+
+ ))} +
+ )) + ) : ( + <>메세지없음 + )} +
+ + +
+ ); +}; + +export default InfiniteScrollWrapper; diff --git a/components/chat/chatRoom/infiniteWrapper/index.tsx b/components/chat/chatRoom/infiniteWrapper/index.tsx new file mode 100644 index 00000000..16b7f892 --- /dev/null +++ b/components/chat/chatRoom/infiniteWrapper/index.tsx @@ -0,0 +1,80 @@ +'use client'; + +import { infinitePreviousChat } from '@/api/chat/api'; +import React from 'react'; +import { useCookies } from 'react-cookie'; +import InfiniteScroll from 'react-infinite-scroll-component'; +import { useInfiniteQuery } from '@tanstack/react-query'; +import MessageItem from '../messageItem'; + +const InfiniteScrollWrapper = ({ + accept, + deny, +}: { + accept: (price: number) => void; + deny: (price: number) => void; +}) => { + const roomId = 'df16caeb-d73a-470a-af14-b7edf276ddc2'; + const [cookies] = useCookies(); + const token = cookies.accessToken; + + const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({ + queryKey: ['messages'], + queryFn: ({ pageParam }) => + infinitePreviousChat({ pageParam, roomId, token }), + initialPageParam: 0, + getNextPageParam: (lastPage, allPages, lastPageParam) => { + if (lastPage.length === 0) { + return undefined; + } + + return lastPageParam + 1; + }, + }); + + //데이터가 추가될 때마다 fetchNextPage가 호출되어야 함 + + return ( +
+
} + > +
+ {' '} + {data ? ( + data.pages.map((page, pageIndex) => ( +
+ {/* eslint-disable-next-line */} + {page.map((item: any, index: number) => ( + + ))} +
+ )) + ) : ( + <> + )} +
+ +
+ ); +}; + +export default InfiniteScrollWrapper; diff --git a/components/chat/chatRoom/messageItem/index.tsx b/components/chat/chatRoom/messageItem/index.tsx index 9f715a9a..b2286873 100644 --- a/components/chat/chatRoom/messageItem/index.tsx +++ b/components/chat/chatRoom/messageItem/index.tsx @@ -33,7 +33,7 @@ const MessageItem = ({ return (
void} deny={deny} negoPrice={negoPrice} time={time} diff --git a/components/chat/chatRoom/viewer/index.tsx b/components/chat/chatRoom/viewer/index.tsx index e87f2eb8..3a33abc7 100644 --- a/components/chat/chatRoom/viewer/index.tsx +++ b/components/chat/chatRoom/viewer/index.tsx @@ -1,9 +1,10 @@ 'use client'; import { chatContentAtom } from '@/atoms/chat/chatContentAtom'; -import React from 'react'; -import { useRecoilValue } from 'recoil'; +import React, { useEffect, useRef } from 'react'; +import { useRecoilState } from 'recoil'; import MessageItem from '@/components/chat/chatRoom/messageItem'; +import InfiniteScrollWrapper from '../infiniteWrapper'; const ChatMessageViewer = ({ accept, @@ -12,9 +13,19 @@ const ChatMessageViewer = ({ accept: (price: number) => void; deny: (price: number) => void; }) => { - const messages = useRecoilValue(chatContentAtom); + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [messages, setPreviousMessages] = useRecoilState(chatContentAtom); + const messageEndRef = useRef(null); + + useEffect(() => { + if (messageEndRef.current) { + messageEndRef.current.scrollIntoView({ behavior: 'smooth' }); + } + }, [messages]); + return (
+ {messages.map((item, index) => ( ))} +
); }; diff --git a/hooks/useChatConnection.ts b/hooks/useChatConnection.ts index a0fe3cbf..81191378 100644 --- a/hooks/useChatConnection.ts +++ b/hooks/useChatConnection.ts @@ -22,7 +22,6 @@ export const useChatConnection = (roomId: string) => { // 초기 데이터 로딩 useEffect(() => { if (!data) return; - console.log(data); setChatList(data); }, [data, setChatList]); @@ -45,7 +44,6 @@ export const useChatConnection = (roomId: string) => { }, () => { ws.current?.subscribe(`/sub/chat/room/${roomId}`, (message) => { - console.log('메세지가 도착했습니다.'); const recv = JSON.parse(message.body); setChatList((prev) => [...prev, recv]); }); @@ -140,5 +138,8 @@ export const useChatConnection = (roomId: string) => { negoPrice, acceptPrice, denyPrice, + roomId, + userId, + accessToken, }; }; diff --git a/package-lock.json b/package-lock.json index bb42c79a..9cd97d78 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,8 @@ "react-day-picker": "^8.10.0", "react-dom": "^18", "react-icons": "^4.12.0", + "react-infinite-scroll-component": "^6.1.0", + "react-infinite-scroller": "^1.2.6", "react-query": "^3.39.3", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", @@ -55,6 +57,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-infinite-scroller": "^1.2.5", "@types/sockjs-client": "^1.5.4", "@typescript-eslint/eslint-plugin": "^6.15.0", "autoprefixer": "^10.0.1", @@ -6673,6 +6676,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-infinite-scroller": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/@types/react-infinite-scroller/-/react-infinite-scroller-1.2.5.tgz", + "integrity": "sha512-fJU1jhMgoL6NJFrqTM0Ob7tnd2sQWGxe2ESwiU6FZWbJK/VO/Er5+AOhc+e2zbT0dk5pLygqctsulOLJ8xnSzw==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", @@ -13374,6 +13386,28 @@ "react": "*" } }, + "node_modules/react-infinite-scroll-component": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz", + "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==", + "dependencies": { + "throttle-debounce": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.0.0" + } + }, + "node_modules/react-infinite-scroller": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz", + "integrity": "sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==", + "dependencies": { + "prop-types": "^15.5.8" + }, + "peerDependencies": { + "react": "^0.14.9 || ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -14548,6 +14582,14 @@ "node": ">=0.8" } }, + "node_modules/throttle-debounce": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz", + "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==", + "engines": { + "node": ">=8" + } + }, "node_modules/titleize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz", diff --git a/package.json b/package.json index 4df3883f..b1a57a1f 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,8 @@ "react-day-picker": "^8.10.0", "react-dom": "^18", "react-icons": "^4.12.0", + "react-infinite-scroll-component": "^6.1.0", + "react-infinite-scroller": "^1.2.6", "react-query": "^3.39.3", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", @@ -58,6 +60,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-infinite-scroller": "^1.2.5", "@types/sockjs-client": "^1.5.4", "@typescript-eslint/eslint-plugin": "^6.15.0", "autoprefixer": "^10.0.1", From 5aad390a41973d388a601f8db726d6f2cdbe5825 Mon Sep 17 00:00:00 2001 From: MinSeobKim Date: Thu, 25 Jan 2024 20:37:35 +0900 Subject: [PATCH 23/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20roomId=20=EB=82=B4?= =?UTF-8?q?=EB=A0=A4=EC=A3=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/chat/chatRoom/control/index.tsx | 6 +++++- components/chat/chatRoom/infiniteWrapper/index.tsx | 5 +++-- components/chat/chatRoom/viewer/index.tsx | 4 +++- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/components/chat/chatRoom/control/index.tsx b/components/chat/chatRoom/control/index.tsx index f5020f04..2200f36e 100644 --- a/components/chat/chatRoom/control/index.tsx +++ b/components/chat/chatRoom/control/index.tsx @@ -33,7 +33,11 @@ const ChatRoomControl = ({ roomId }: { roomId: string }) => {
- +
{modalState && } diff --git a/components/chat/chatRoom/infiniteWrapper/index.tsx b/components/chat/chatRoom/infiniteWrapper/index.tsx index 16b7f892..b77975d3 100644 --- a/components/chat/chatRoom/infiniteWrapper/index.tsx +++ b/components/chat/chatRoom/infiniteWrapper/index.tsx @@ -10,11 +10,12 @@ import MessageItem from '../messageItem'; const InfiniteScrollWrapper = ({ accept, deny, + roomId, }: { accept: (price: number) => void; deny: (price: number) => void; + roomId: string; }) => { - const roomId = 'df16caeb-d73a-470a-af14-b7edf276ddc2'; const [cookies] = useCookies(); const token = cookies.accessToken; @@ -22,7 +23,7 @@ const InfiniteScrollWrapper = ({ queryKey: ['messages'], queryFn: ({ pageParam }) => infinitePreviousChat({ pageParam, roomId, token }), - initialPageParam: 0, + initialPageParam: 1, getNextPageParam: (lastPage, allPages, lastPageParam) => { if (lastPage.length === 0) { return undefined; diff --git a/components/chat/chatRoom/viewer/index.tsx b/components/chat/chatRoom/viewer/index.tsx index 3a33abc7..a6bbd686 100644 --- a/components/chat/chatRoom/viewer/index.tsx +++ b/components/chat/chatRoom/viewer/index.tsx @@ -9,9 +9,11 @@ import InfiniteScrollWrapper from '../infiniteWrapper'; const ChatMessageViewer = ({ accept, deny, + roomId, }: { accept: (price: number) => void; deny: (price: number) => void; + roomId: string; }) => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [messages, setPreviousMessages] = useRecoilState(chatContentAtom); @@ -25,7 +27,7 @@ const ChatMessageViewer = ({ return (
- + {messages.map((item, index) => ( Date: Thu, 25 Jan 2024 21:50:51 +0900 Subject: [PATCH 24/24] =?UTF-8?q?=E2=9C=A8=20feat=20:=20info=20=EB=88=84?= =?UTF-8?q?=EB=A5=B4=EB=A9=B4=20=EB=B0=B0=ED=8F=AC=20url=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/talk/infinite/page.tsx | 71 ++++++----------- components/chat/chatItem/index.tsx | 4 +- components/chat/chatList/wrapper/index.tsx | 2 +- .../chat/chatRoom/infiniteWrapper/index.tsx | 76 +++++++++---------- .../chat/chatRoom/productInfo/index.tsx | 75 +++++++++--------- components/chat/chatRoom/userOut/index.tsx | 2 +- public/svgComponent/xSymbol.tsx | 6 +- types/chat/chatRoom/types.ts | 3 + 8 files changed, 110 insertions(+), 129 deletions(-) diff --git a/app/talk/infinite/page.tsx b/app/talk/infinite/page.tsx index cbe434fb..b63596e2 100644 --- a/app/talk/infinite/page.tsx +++ b/app/talk/infinite/page.tsx @@ -1,68 +1,43 @@ 'use client'; import React from 'react'; -import { infinitePreviousChat } from '@/api/chat/api'; import { useCookies } from 'react-cookie'; -import { useInfiniteQuery } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; // import InfiniteScroll from 'react-infinite-scroller'; -import InfiniteScroll from 'react-infinite-scroll-component'; import LoginButton from '../LoginButton'; +import axios from 'axios'; + +const fetchPage = async (token: string) => { + const res = await axios.get( + 'https://catchroom.xyz/v1/chat/room/info?roomId=df16caeb-d73a-470a-af14-b7edf276ddc2', + { + headers: { + Authorization: `Bearer ${token}`, + }, + }, + ); + + const result = await res.data; + return result; +}; const InfiniteScrollWrapper = () => { - const roomId = 'df16caeb-d73a-470a-af14-b7edf276ddc2'; const [cookies] = useCookies(); const token = cookies.accessToken; - const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({ + const { data: asdfasdf, error } = useQuery({ queryKey: ['messages'], - queryFn: ({ pageParam }) => - infinitePreviousChat({ pageParam, roomId, token }), - initialPageParam: 0, - getNextPageParam: (lastPage, allPages, lastPageParam) => { - if (lastPage.length === 0) { - return undefined; - } - - return lastPageParam + 1; - }, + queryFn: () => fetchPage(token), }); + console.log('data불러오기', asdfasdf); + + console.log('에러', error); + return (
- - Loading ... -
- } - > -
- {' '} - {data ? ( - data.pages.map((page, pageIndex) => ( -
- {/* eslint-disable-next-line */} - {page.map((item: any, index: number) => ( -
-
{item.message}
-
- ))} -
- )) - ) : ( - <>메세지없음 - )} -
- +
안녕안녕
); }; diff --git a/components/chat/chatItem/index.tsx b/components/chat/chatItem/index.tsx index 55b3c74a..ab6c82c1 100644 --- a/components/chat/chatItem/index.tsx +++ b/components/chat/chatItem/index.tsx @@ -45,7 +45,7 @@ const ChatItem = ({ item }: { item: ChatRoomType }) => { return (
{/* 채팅방 사진 보여주는 데이터 */} @@ -72,7 +72,7 @@ const ChatItem = ({ item }: { item: ChatRoomType }) => {

- +
); diff --git a/components/chat/chatList/wrapper/index.tsx b/components/chat/chatList/wrapper/index.tsx index 121dca7f..f6cad541 100644 --- a/components/chat/chatList/wrapper/index.tsx +++ b/components/chat/chatList/wrapper/index.tsx @@ -4,7 +4,7 @@ import ModalControl from '../modalControl'; const ChatWrapper = ({ children }: { children: ReactNode }) => { return ( -
+
{children} diff --git a/components/chat/chatRoom/infiniteWrapper/index.tsx b/components/chat/chatRoom/infiniteWrapper/index.tsx index b77975d3..9d315b04 100644 --- a/components/chat/chatRoom/infiniteWrapper/index.tsx +++ b/components/chat/chatRoom/infiniteWrapper/index.tsx @@ -6,6 +6,7 @@ import { useCookies } from 'react-cookie'; import InfiniteScroll from 'react-infinite-scroll-component'; import { useInfiniteQuery } from '@tanstack/react-query'; import MessageItem from '../messageItem'; +import { MessageItemProps } from '@/types/chat/chatRoom/types'; const InfiniteScrollWrapper = ({ accept, @@ -33,48 +34,43 @@ const InfiniteScrollWrapper = ({ }, }); - //데이터가 추가될 때마다 fetchNextPage가 호출되어야 함 - return ( -
-
} +
} + > +
-
- {' '} - {data ? ( - data.pages.map((page, pageIndex) => ( -
- {/* eslint-disable-next-line */} - {page.map((item: any, index: number) => ( - - ))} -
- )) - ) : ( - <> - )} -
- -
+ {' '} + {data ? ( + data.pages.map((page, pageIndex) => ( +
+ {page.map((item: MessageItemProps, index: number) => ( + + ))} +
+ )) + ) : ( + <> + )} +
+ ); }; diff --git a/components/chat/chatRoom/productInfo/index.tsx b/components/chat/chatRoom/productInfo/index.tsx index c97fed80..8644775e 100644 --- a/components/chat/chatRoom/productInfo/index.tsx +++ b/components/chat/chatRoom/productInfo/index.tsx @@ -7,17 +7,22 @@ import LOGOImage from '@/public/Yanolja_CI.png'; import LoadingText from '@/components/common/loading/loadingText'; import { useRecoilState } from 'recoil'; import { dealModalAtom } from '@/atoms/chat/leaveButton'; +import { useRouter } from 'next/navigation'; const ProductInfo = () => { const [modalState, setModalOpen] = useRecoilState(dealModalAtom); const [chatInfo] = useSsrAtom(); + const router = useRouter(); + + const handleClickInfo = () => { + router.push(`/accommodation/${chatInfo.chatRoomNumber}`); + }; + const handleNegoPrice = () => { setModalOpen(true); }; - console.log(chatInfo); - const ViewOnSeller = chatInfo.loginUserIdentity === 'SELLER' ? true : false; const invalidSale = chatInfo.dealState === 'DONEDEAL' ? true : false; @@ -26,39 +31,41 @@ const ProductInfo = () => { {invalidSale && (
)} -
- {chatInfo.accommodationUrl ? ( - 숙소사진 - ) : ( - 숙소사진 - )} -
-
-
- {LoadingText({ - condition: chatInfo.accommodationName ? true : false, - viewText: chatInfo.accommodationName, - loadingText: '로딩중...', - })} +
+
+ {chatInfo.accommodationUrl ? ( + 숙소사진 + ) : ( + 숙소사진 + )}
-
- {LoadingText({ - condition: chatInfo.sellPrice ? true : false, - viewText: chatInfo.sellPrice, - loadingText: '로딩중...', - })} +
+
+ {LoadingText({ + condition: chatInfo.accommodationName ? true : false, + viewText: chatInfo.accommodationName, + loadingText: '로딩중...', + })} +
+
+ {LoadingText({ + condition: chatInfo.sellPrice ? true : false, + viewText: chatInfo.sellPrice, + loadingText: '로딩중...', + })} +
{/* 가격 제안 페이지에서는 제안버튼 미노출 */} diff --git a/components/chat/chatRoom/userOut/index.tsx b/components/chat/chatRoom/userOut/index.tsx index 7abfc24a..2cea6023 100644 --- a/components/chat/chatRoom/userOut/index.tsx +++ b/components/chat/chatRoom/userOut/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; const UserOut = ({ partnerNickName }: { partnerNickName: string }) => { return ( -
+

{partnerNickName}님이 나갔습니다.

diff --git a/public/svgComponent/xSymbol.tsx b/public/svgComponent/xSymbol.tsx index 43713c2e..1f98c83c 100644 --- a/public/svgComponent/xSymbol.tsx +++ b/public/svgComponent/xSymbol.tsx @@ -1,9 +1,9 @@ import * as React from "react"; const XSymbolIcon = ({w=18, y=17} : {w?:number, y?:number}) => ( diff --git a/types/chat/chatRoom/types.ts b/types/chat/chatRoom/types.ts index 58e4775d..86400965 100644 --- a/types/chat/chatRoom/types.ts +++ b/types/chat/chatRoom/types.ts @@ -17,6 +17,9 @@ export type MessagePropsNoPartial = { accept: (price: number) => void; deny: (price: number) => void; }; + +export type MessageItemProps = Omit; + export type MessageProps = Partial; export type ChatRoomType = {