[#210] Modify: 채팅 인사 메세지 정책 업데이트 (#212)

src/apis/chat.ts

@@ -1,5 +1,13 @@
-import { GetChatResponse } from "@/types/chat.dto";
+import { GetChatResponse, PostChatNicknameResponse } from "@/types/chat.dto";
 import http from "./core";
 
 export const getChat = (page: number) =>
   http.get<GetChatResponse>({ url: `/v1/chat?page=${page}` });
+
+export const postChatNickname = (email: string) =>
+  http.post<PostChatNicknameResponse>({
+    url: "/v1/chat/nickname",
+    data: {
+      email,
+    },
+  });

src/components/common/Chat/index.tsx

@@ -3,7 +3,6 @@ import { useAtomValue } from "jotai";
 import { cn } from "@/utils/tailwind";
 import MessagePeek from "./MessagePeek";
 import ZzalMessage from "./ZzalMessage";
-import GreetMessage from "./GreetMessage";
 import { $isChatOpen } from "@/store/chat";
 import useChat from "@/hooks/chat/useChat";
 import useGetChat from "@/hooks/api/chat/useGetChat";
@@ -25,28 +24,22 @@ const ChatRoom = () => {
 
   const { handleSendMessage } = useChat(chatRoomRef);
 
-  const handleClickSend = () => handleSendMessage("zzal");
-
   return (
     <Fragment>
       <div ref={chatRoomRef} className="flex h-full flex-1 flex-col overflow-y-auto pb-30pxr">
         <div ref={scrollTargetRef}></div>
         {messageHistory.map((message, index) => {
           return (
-            <Fragment key={`${index}-${message.nickname}`}>
-              {message.type === "IMAGE" && (
-                <ZzalMessage
-                  src={message.message}
-                  isMyMessage={message.email === email}
-                  nickname={message.nickname}
-                />
-              )}
-              {message.type === "HELLO" && <GreetMessage nickname={message.nickname} />}
-            </Fragment>
+            <ZzalMessage
+              key={`${index}-${message.nickname}`}
+              src={message.message}
+              isMyMessage={message.email === email}
+              nickname={message.nickname}
+            />
           );
         })}
       </div>
-      <MessagePeek onClickSend={handleClickSend} />
+      <MessagePeek onClickSend={handleSendMessage} />
     </Fragment>
   );
 };

src/constants/chat.ts

@@ -1,6 +1,5 @@
 export const SUBSCRIPTION_DESTINATION = "/sub/public";
 export const PUBLISH_DESTINATION = Object.freeze({
   zzal: "/pub/image",
-  greet: "/pub/hello",
 });
 export const CHANNEL_ID = "public";

src/hooks/api/chat/usePostChatNickname.ts

@@ -0,0 +1,12 @@
+import { useMutation } from "@tanstack/react-query";
+import { postChatNickname } from "@/apis/chat";
+
+const usePostChatNickname = () => {
+  const { mutate, ...rest } = useMutation({
+    mutationFn: (email: string) => postChatNickname(email),
+  });
+
+  return { createNickname: mutate, ...rest };
+};
+
+export default usePostChatNickname;

src/hooks/chat/useChat.ts

@@ -4,7 +4,8 @@ import { CompatClient, Stomp } from "@stomp/stompjs";
 import SockJS from "sockjs-client/dist/sockjs";
 import { useAtomValue } from "jotai";
 import { InfiniteData, useQueryClient } from "@tanstack/react-query";
-import { GetChatResponse, GreetMessageRequest, ZzalMessageRequest } from "@/types/chat.dto";
+import { GetChatResponse } from "@/types/chat.dto";
+import usePostChatNickname from "../api/chat/usePostChatNickname";
 import { $isChatOpen, $previewImage } from "@/store/chat";
 import { CHANNEL_ID, PUBLISH_DESTINATION, SUBSCRIPTION_DESTINATION } from "@/constants/chat";
 import { $userInformation } from "@/store/user";
@@ -15,15 +16,22 @@ const useChat = (targetRef: RefObject<HTMLDivElement>) => {
   const imageSrc = useAtomValue($previewImage);
   const isChatOpen = useAtomValue($isChatOpen);
   const { role, email } = useAtomValue($userInformation);
+  const { createNickname } = usePostChatNickname();
 
-  // TODO: [2024.03.06] 채팅 에러 핸들링 로직 구현
   const handleConnectToChat = () => {
     if (stompRef.current) return;
 
     stompRef.current = Stomp.over(() => {
       return new SockJS(import.meta.env.VITE_CHAT_URL);
     });
 
+    stompRef.current.debug = () => {};
+
+    stompRef.current.beforeConnect = async () => {
+      if (!email) return;
+      await createNickname(email);
+    };
+
     stompRef.current.onConnect = () => {
       stompRef.current?.subscribe(SUBSCRIPTION_DESTINATION, (frame) => {
         try {
@@ -40,40 +48,29 @@ const useChat = (targetRef: RefObject<HTMLDivElement>) => {
             });
             return { ...oldData, pages: updatedPages } as InfiniteData<GetChatResponse>;
           });
-          // handleScrollPosition();
         } catch (error) {
           console.error(error);
           toast.error("채팅 연결 중 예상치 못한 오류가 발생했습니다!");
         }
       });
-
-      if (role === "GUEST") {
-        return;
-      }
-      handleSendMessage("greet");
     };
     stompRef.current.activate();
   };
 
-  const handleSendMessage = (type: "zzal" | "greet") => {
+  const handleSendMessage = () => {
     if (role === "GUEST") {
       toast.info("메세지를 전송하려면 로그인을 진행해주세요!");
       return;
     }
 
     if (stompRef.current?.connected && email) {
-      const messageContent: GreetMessageRequest | ZzalMessageRequest = {
-        email,
-        channelId: CHANNEL_ID,
-      };
-
-      if (type === "zzal" && imageSrc) {
-        (messageContent as ZzalMessageRequest).image = imageSrc;
-      }
-
       stompRef.current.publish({
-        destination: PUBLISH_DESTINATION[type],
-        body: JSON.stringify(messageContent),
+        destination: PUBLISH_DESTINATION["zzal"],
+        body: JSON.stringify({
+          email,
+          channelId: CHANNEL_ID,
+          image: imageSrc,
+        }),
       });
 
       targetRef.current?.scrollTo(0, targetRef.current.scrollHeight);

src/types/chat.dto.ts

@@ -1,9 +1,5 @@
 import { ChatMessage } from "./chat";
 
-export interface GreetMessageRequest {
-  channelId: string;
-  email: string;
-}
 export interface ZzalMessageRequest {
   channelId: string;
   email: string;
@@ -21,3 +17,8 @@ export interface ZzalMessageResponse {
 }
 
 export type GetChatResponse = ChatMessage[];
+
+export interface PostChatNicknameResponse {
+  nickname: string;
+  email: string;
+}

src/types/chat.ts

@@ -3,5 +3,4 @@ export interface ChatMessage {
   email: string;
   message: string;
   createdAt: string;
-  type: "IMAGE" | "HELLO";
 }