Merge branch 'dev' into feature/#228

catchroom · Jan 25, 2024 · e75c1a4 · e75c1a4
2 parents bc7c499 + cbb6275
commit e75c1a4
Show file tree

Hide file tree

Showing 54 changed files with 1,047 additions and 198 deletions.
diff --git a/api/chat/api.ts b/api/chat/api.ts
@@ -38,3 +38,27 @@ export const createChatRoom = async (
   console.log(buyerId, sellerId, productId);
   return result;
 };
+
+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/api/sale/api.ts b/api/sale/api.ts
@@ -1,12 +1,30 @@
 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.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
@@ -1,20 +1,26 @@
-import { useQuery, useMutation } from '@tanstack/react-query';
-import { getSaleProduct, postSaleProduct } from './api';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  deleteSaleProduct,
+  getProductInfo,
+  getSaleProduct,
+  postSaleProduct,
+  putProductInfo,
+} from './api';
 import { ProductItem } from '@/types/sale/type';
 
 //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({
@@ -23,3 +29,69 @@ export const useMutaionPostSaleProduct = () => {
   });
   return mutation;
 };
+
+export const useMutationDeleteSaleProduct = () => {
+  const mutation = useMutation({
+    mutationKey: ['deleteSaleProduct'],
+    mutationFn: (id: number) => deleteSaleProduct(id),
+  });
+  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 = (isProduct: boolean, id: number) => {
+  const queryKey = isProduct ? 'getProductInfo' : 'getSaleProduct';
+  const queryFn = isProduct ? getProductInfo : getSaleProduct;
+
+  return useQuery({
+    queryKey: [queryKey, id],
+    queryFn: () => queryFn(id),
+    select: ({ data }) => data,
+  });
+};
+
+export const useMutationPutProductInfo = () => {
+  const mutation = useMutation({
+    mutationKey: ['putProductInfo'],
+    mutationFn: ({ id, product }: { id: number; product: ProductItem }) =>
+      putProductInfo(product, id),
+  });
+  return mutation;
+};
+
+type MutationVariables = {
+  id?: number;
+  product: ProductItem;
+  isProduct: boolean;
+};
+
+export const useMutationProduct = () => {
+  // eslint-disable-next-line
+  const mutation = useMutation<any, Error, MutationVariables>({
+    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/app/talk/infinite/page.tsx b/app/talk/infinite/page.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { useCookies } from 'react-cookie';
+import { useQuery } from '@tanstack/react-query';
+// import InfiniteScroll from 'react-infinite-scroller';
+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 [cookies] = useCookies();
+  const token = cookies.accessToken;
+
+  const { data: asdfasdf, error } = useQuery({
+    queryKey: ['messages'],
+    queryFn: () => fetchPage(token),
+  });
+
+  console.log('data불러오기', asdfasdf);
+
+  console.log('에러', error);
+
+  return (
+    <div>
+      <LoginButton />
+      <div>안녕안녕</div>
+    </div>
+  );
+};
+
+export default InfiniteScrollWrapper;
diff --git a/atoms/sale/pageAtom.ts b/atoms/sale/pageAtom.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isFromSalePageState = atom<boolean>({
+  key: 'isFromSalePageState',
+  default: false,
+});
diff --git a/atoms/sale/productAtom.ts b/atoms/sale/productAtom.ts
@@ -0,0 +1,16 @@
+import { atom } from 'recoil';
+
+export const isProductState = atom<boolean>({
+  key: 'isProductState',
+  default: false,
+});
+
+export const isNegoState = atom<boolean>({
+  key: 'isNegoState',
+  default: false,
+});
+
+export const sellerContentState = atom<string>({
+  key: 'sellerContentState',
+  default: '',
+});
diff --git a/components/catchItems/items/index.tsx b/components/catchItems/items/index.tsx
@@ -40,7 +40,7 @@ const ItemsComponent = () => {
 
   return (
     <div className=" overflow-y-hidden">
-      <div className="w-full flex flex-col mt-56 gap-12 p-6 pt-2">
+      <div className="w-full flex flex-col mt-56 gap-[2rem] p-6 pt-2">
         {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/chat/chatItem/index.tsx b/components/chat/chatItem/index.tsx
@@ -45,7 +45,7 @@ const ChatItem = ({ item }: { item: ChatRoomType }) => {
 
   return (
     <div
-      className=" w-full flex gap-3 items-center p-4 border border-divider bg-white cursor-pointer"
+      className=" w-full flex gap-3 items-center px-3 py-4 border border-divider bg-white cursor-pointer"
       onClick={handleClick}
     >
       {/* 채팅방 사진 보여주는 데이터 */}
@@ -72,7 +72,7 @@ const ChatItem = ({ item }: { item: ChatRoomType }) => {
         </p>
       </div>
       <div className="ml-auto" onClick={handleModalOpen}>
-        <XSymbolIcon />
+        <XSymbolIcon w={20} y={20} />
       </div>
     </div>
   );

diff --git 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 (
-    <div className="w-full h-[calc(100%-60px)] bg-mint overflow-scroll">
+    <div className="w-full h-[calc(100%-60px)] overflow-scroll">
       <LoginButton />
       {children}
       <ModalControl />

diff --git a/components/chat/chatRoom/control/index.tsx b/components/chat/chatRoom/control/index.tsx
@@ -33,7 +33,11 @@ const ChatRoomControl = ({ roomId }: { roomId: string }) => {
       <ProductInfo />
       <div className="relative">
         <div className={`h-[calc(100vh-130px)] overflow-scroll relative`}>
-          <ChatMessageViewer accept={acceptPrice} deny={denyPrice} />
+          <ChatMessageViewer
+            accept={acceptPrice}
+            deny={denyPrice}
+            roomId={roomId}
+          />
           <ChatMessageSender publish={sendMessage} />
         </div>
         {modalState && <OfferModal publish={negoPrice} />}

diff --git a/components/chat/chatRoom/infiniteWrapper/index.tsx b/components/chat/chatRoom/infiniteWrapper/index.tsx
@@ -0,0 +1,77 @@
+'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';
+import { MessageItemProps } from '@/types/chat/chatRoom/types';
+
+const InfiniteScrollWrapper = ({
+  accept,
+  deny,
+  roomId,
+}: {
+  accept: (price: number) => void;
+  deny: (price: number) => void;
+  roomId: string;
+}) => {
+  const [cookies] = useCookies();
+  const token = cookies.accessToken;
+
+  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: ['messages'],
+    queryFn: ({ pageParam }) =>
+      infinitePreviousChat({ pageParam, roomId, token }),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage, allPages, lastPageParam) => {
+      if (lastPage.length === 0) {
+        return undefined;
+      }
+
+      return lastPageParam + 1;
+    },
+  });
+
+  return (
+    <InfiniteScroll
+      dataLength={data?.pages.length || 0}
+      next={fetchNextPage}
+      hasMore={hasNextPage}
+      inverse={true}
+      scrollableTarget="scrollableDiv"
+      loader={<div className="loader" key={0}></div>}
+    >
+      <div
+        id="scrollableDiv"
+        className="w-full max-h-[calc(100vh-200px)] overflow-auto flex flex-col-reverse"
+      >
+        {' '}
+        {data ? (
+          data.pages.map((page, pageIndex) => (
+            <div key={pageIndex}>
+              {page.map((item: MessageItemProps, index: number) => (
+                <MessageItem
+                  accept={accept}
+                  deny={deny}
+                  key={index}
+                  type={item.type}
+                  message={item.message as string}
+                  userId={item.userId as number}
+                  roomId={item.roomId as string}
+                  time={item.time as string}
+                  negoPrice={item.negoPrice as number}
+                />
+              ))}
+            </div>
+          ))
+        ) : (
+          <></>
+        )}
+      </div>
+    </InfiniteScroll>
+  );
+};
+
+export default InfiniteScrollWrapper;
diff --git a/components/chat/chatRoom/messageItem/index.tsx b/components/chat/chatRoom/messageItem/index.tsx
@@ -33,7 +33,7 @@ const MessageItem = ({
           return (
             <div className="w-9/12 flex  gap-x-3 items-end ml-auto mb-3">
               <OfferMessage
-                accept={accept}
+                accept={accept as (price: number) => void}
                 deny={deny}
                 negoPrice={negoPrice}
                 time={time}