Merge pull request #245 from catchroom/feature/#228

✨ feat : 에러 수정 및 로그인 모달 추가
catchroom · Jan 26, 2024 · 8955573 · 8955573
2 parents 0e2a893 + caf3025
commit 8955573
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 42 deletions.
diff --git a/api/chat/api.ts b/api/chat/api.ts
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { apiClient } from '../user/apiClient';
 import { apiChatClient } from './apiChatClient';
 
@@ -30,12 +31,12 @@ export const createChatRoom = async (
   productId: number,
   token: string,
 ) => {
-  const data = await apiChatClient.post(
-    '/v1/chat/room/create',
+  const data = await axios.post(
+    'https://catchroom.xyz/v1/chat/room/create',
     {
-      buyerId,
-      sellerId,
-      productId,
+      buyerId: buyerId,
+      sellerId: sellerId,
+      productId: productId,
     },
     {
       headers: {
@@ -46,8 +47,6 @@ export const createChatRoom = async (
   );
 
   const result = await data.data.data.chatRoomNumber;
-  console.log(result);
-  console.log(buyerId, sellerId, productId);
   return result;
 };
 

diff --git a/components/roomInfo/footer/index.tsx b/components/roomInfo/footer/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Button } from '@material-tailwind/react';
 // import { useRoomItem } from '@/api/room-info/query';
 import { useRecoilState } from 'recoil';
@@ -10,11 +10,14 @@ import { useParams, useRouter } from 'next/navigation';
 import { createChatRoom } from '@/api/chat/api';
 import { useRoomItem } from '@/api/room-info/query';
 import { useCookies } from 'react-cookie';
+import Modal from '@/components/common/modal';
 
 // 판매자 유무에 따른 버튼노출 처리 필요
 // 현재 헤더의 화면전환 버튼을 이용한 전역상태로 바뀌는 중
 const FooterComponent = () => {
   const [viewerState] = useRecoilState(viewerTestButton);
+  const [open, setOpen] = useState(false);
+
   const [cookies] = useCookies();
   const accessToken = cookies.accessToken;
 
@@ -27,54 +30,90 @@ const FooterComponent = () => {
 
   //채팅방 생성
   const createChat = async () => {
-    const chatRoomId: number = await createChatRoom(
-      sellerId,
-      buyerId,
-      Number(id),
-      accessToken,
-    );
-    router.push(`/chat/${chatRoomId}`);
+    if (accessToken === undefined) {
+      setOpen(true);
+    } else {
+      const chatRoomId = await createChatRoom(
+        buyerId,
+        sellerId,
+        Number(id),
+        accessToken,
+      );
+      console.log(chatRoomId);
+      router.push(`/chat/${chatRoomId}`);
+    }
+  };
+
+  const handleModalOpen = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const onCancel = () => {
+    handleModalOpen();
+  };
+
+  const onConfirm = () => {
+    handleModalOpen();
+    router.push('/login');
   };
 
   const handlePurchaseClick = () => {
-    router.push(`/order/${id}`);
+    if (accessToken === undefined) {
+      setOpen(true);
+    } else {
+      router.push(`/order/${id}`);
+    }
   };
 
   const buttonClass =
     'font-pretend h-full rounded-[4px] text-t1 font-semibold shadow-none';
 
   return (
-    <div className="fixed flex justify-center bottom-0 gap-2 w-full max-w-[480px] h-[5.75rem] p-5 bg-white border-t border-divider-sub z-10">
-      {viewerState ? (
-        <Button
-          placeholder="Button"
-          type="button"
-          onClick={() => router.push('/chat')}
-          className={`${buttonClass} w-full bg-main text-white`}
-        >
-          대화중인 채팅방
-        </Button>
-      ) : (
-        <>
-          <Button
-            placeholder="Button"
-            type="button"
-            onClick={createChat}
-            className={`${buttonClass} w-1/2 bg-white border border-main text-main`}
-          >
-            채팅으로 문의하기
-          </Button>
+    <>
+      {open && (
+        <Modal
+          title="로그인 요청"
+          content="로그인이 필요한 서비스 입니다"
+          showConfirmButton={true}
+          showCancelButton={true}
+          confirmString="로그인 하기"
+          onCancel={onCancel}
+          onConfirm={onConfirm}
+        />
+      )}
+
+      <div className="fixed flex justify-center bottom-0 gap-2 w-full max-w-[480px] h-[5.75rem] p-5 bg-white border-t border-divider-sub z-10">
+        {viewerState ? (
           <Button
             placeholder="Button"
             type="button"
-            onClick={handlePurchaseClick}
-            className={`${buttonClass} w-1/2 bg-main text-white`}
+            onClick={() => router.push('/chat')}
+            className={`${buttonClass} w-full bg-main text-white`}
           >
-            구매하기
+            대화중인 채팅방
           </Button>
-        </>
-      )}
-    </div>
+        ) : (
+          <>
+            <Button
+              placeholder="Button"
+              type="button"
+              onClick={createChat}
+              className={`${buttonClass} w-1/2 bg-white border border-main text-main`}
+            >
+              채팅으로 문의하기
+            </Button>
+            <Button
+              placeholder="Button"
+              type="button"
+              onClick={handlePurchaseClick}
+              className={`${buttonClass} w-1/2 bg-main text-white`}
+            >
+              구매하기
+            </Button>
+          </>
+        )}
+      </div>
+    </>
   );
 };