Merge pull request #212 from prgrms-web-devcourse-final-project/feat/159-chat-request-and-cancel

[feat] createChat api 변경, 유저 차단 시도 시 모달 생성

Author: denshou

src/apis/chat.ts

@@ -16,16 +16,24 @@ export const cancelChatRequest = async (emotionRecordId: number) => {
   return data;
 };
 //채팅방 생성
-export const createChatroom = async (emotionRecordId: number) => {
-  const { data } = await axiosInstance.post(`/chat/create?recordId=${emotionRecordId}`, {});
+export const createChatroom = async (emotionRecordId: number, requestNickname: string) => {
+  const { data } = await axiosInstance.post(
+    `/chat/create?recordId=${emotionRecordId}&requestNickname=${requestNickname}`,
+    {},
+  );
   return data;
 };
 //채팅방 닫기
 export const closeChatroom = async (chatRoomId: number) => {
   const { data } = await axiosInstance.post(`/chat/close?chatRoomId=${chatRoomId}`, {});
   return data;
 };
-//채팅방 기록 불러오기
+//채팅방 기록 불러오기(개발서버)
+export const loadChatHistoryDev = async (chatRoomId: number) => {
+  const { data } = await axiosInstance.get(`/chat/history?chatRoomId=${chatRoomId}`);
+  return data;
+};
+//채팅방 기록 불러오기(배포)
 export const loadChatHistory = async (chatRoomId: number) => {
   const { data } = await axiosChatInstance.get(`/chat/history/${chatRoomId}`);
   return data;

src/components/ChatConnectLoadingSheet.tsx

@@ -72,10 +72,11 @@ export default function ChatConnectLoadingSheet() {
   //채팅방 생성 (요청 받는 사람 입장에서 생성?)
   //sse로 받은 recordId로 채팅방 생성
   //sse로 받은 상대 정보로 '보내는 사람' 바꾸기
+  //sse로 받은 requsetNickname(tag가 아니라 닉네임)
   const createChat = async () => {
     try {
       //1 = recordId
-      const data = await createChatroom(1);
+      const data = await createChatroom(1, '루루');
       console.log(data);
       const chatRoomId = data.data.chatRoomId;
 

src/hooks/useMoreOptions.ts

@@ -38,14 +38,30 @@ export const useMoreOptions = () => {
     }
 
     openModal({
-      title: `${userData?.nickname}을 차단할까요?`,
+      title: [
+        { text: `${userData?.nickname}`, className: 'text-primary-normal' },
+        { text: ' 님을 차단할까요?' },
+      ],
       message: '차단된 사용자는 더이상 피드에 나타나지 않습니다',
       onConfirm: async () => {
         if (param.userId) {
           try {
             const data = await addBlockList(param.userId);
-            closeModal();
             console.log(data);
+            //이미 차단 한 유저일 경우
+            if (data.code === 400) {
+              closeModal();
+              openModal({
+                title: `이미 차단한 유저입니다`,
+                onConfirm: () => {
+                  closeModal();
+                },
+              });
+            } else {
+              //차단 후 홈으로 이동
+              navigate('/home');
+              closeModal();
+            }
           } catch (error) {
             console.log(error);
           }

src/pages/chat/ChatRoom.tsx

@@ -5,31 +5,31 @@ import { Client, StompSubscription } from '@stomp/stompjs';
 import SockJS from 'sockjs-client';
 import { useEffect, useRef, useState } from 'react';
 import { MAX_CHAT_MESSAGE_LENGTH } from '@/constants';
-import { loadChatHistory } from '@/apis/chat';
+import { loadChatHistoryDev } from '@/apis/chat';
 import { useAuthStore } from '@/store/authStore';
-// import { getUserInfo } from '@/apis/user';
 import { useScrollStore } from '@/store/scrollStore';
 
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import 'dayjs/locale/ko';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
 interface ChatRoomProps {}
 
 //메시지 타입
 interface ChatMessage {
-  // fromUserId?: string;
-  message: string;
+  fromUserId?: string;
   chatRoomId: number;
+  message: string;
   createdAt?: string;
   isMyMessage?: boolean;
 }
-// interface ChatUser {
-//   nickName: string;
-//   email: string;
-//   loginId: string;
-//   createdAt: string;
-// }
 
 export default function ChatRoom({}: ChatRoomProps) {
   // const [chatRoomId, setChatRoomId] = useState<number | null>(7);
-  const chatRoomId = 7;
+  const chatRoomId = 1;
   // const [myUserData, setMyUserData] = useState<ChatUser | null>(null);
 
   const [stompClient, setStompClient] = useState<Client | null>(null);
@@ -50,16 +50,6 @@ export default function ChatRoom({}: ChatRoomProps) {
 
   const MAX_LINES = 8;
 
-  // //내 정보 가져오기
-  // useEffect(() => {
-  //   const getChatUser = async () => {
-  //     const data = await getUserInfo();
-  //     console.log(data);
-  //     setMyUserData(data.data);
-  //   };
-  //   getChatUser();
-  // }, []);
-
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setMessageInput(e.target.value);
   };
@@ -128,13 +118,14 @@ export default function ChatRoom({}: ChatRoomProps) {
         console.log('chatRoomId가 없습니다');
         return;
       }
-      const response = await loadChatHistory(chatRoomId);
+      //배포 시 변경
+      const response = await loadChatHistoryDev(chatRoomId);
       console.log('history', response);
       if (response.status === 204) {
         console.warn('No chat history found (204 No Content)');
         return;
       }
-      setMessages(response);
+      setMessages(response.data);
     } catch (error) {
       console.error('Error fetching chat history:', error);
     }
@@ -200,6 +191,16 @@ export default function ChatRoom({}: ChatRoomProps) {
     }
   };
 
+  // 10분 연장 요청
+  // const handleExtendSession = () => {
+  //   if (stompClient) {
+  //     stompClient.publish({
+  //       destination: '/app/extendSession',
+  //       body: JSON.stringify({}), // 빈 JSON 객체 전달
+  //     });
+  //   }
+  // };
+
   //채팅방 입장 시 connect
   //나갈 때 disconnect
   useEffect(() => {
@@ -251,13 +252,20 @@ export default function ChatRoom({}: ChatRoomProps) {
           })}
 
         {/* 마지막 메시지의 시간 표시 */}
-        <p className="text-gray-500 text-xs text-center mt-2">{messages.at(-1)?.createdAt}</p>
+        {!!messages.length && (
+          <p className="text-gray-500 text-xs text-center mt-2">
+            {dayjs(messages.at(-1)?.createdAt)
+              .tz('Asia/Seoul')
+              .locale('ko')
+              .format('YYYY년 M월 D일 dddd')}
+          </p>
+        )}
       </div>
 
-      <div>
+      {/* <div>
         <Button onClick={connect}>채팅 연결</Button>
         <Button onClick={disconnect}>채팅 연결 해제</Button>
-      </div>
+      </div> */}
 
       <div className="bottom-padding-nav px-3 pt-[5px] bg-white max-w-[600px] fixed bottom-0 w-full left-1/2 -translate-x-1/2 z-41">
         <div className="flex justify-between mb-2 caption-b">

vite.config.ts

@@ -89,7 +89,7 @@ export default defineConfig(({ mode }) => {
         '/chatapi': {
           target: env.VITE_CHAT_API_URL,
           changeOrigin: true, // 백엔드 서버 주소로 변경
-          rewrite: (path) => path.replace(/^\/chatapi/, '/api'),
+          rewrite: (path) => path.replace(/^\/chatapi/, '/'),
         },
       },
     },