feat: 가게 프로필에서 채팅하기 버튼 클릭 시 채팅방이 이미 존재하면 새로운 채팅방을 생성하지 않고 바로 채팅방으로 넘어…

…가는 기능 추가 #109

feat: 가게 프로필에서 채팅하기 버튼 클릭 시 채팅방이 이미 존재하면 새로운 채팅방을 생성하지 않고 바로 채팅방으로 넘어가는 기능 추가

src/apis/controller/chatPage.ts

@@ -11,6 +11,8 @@ export const getUserInfo = async () => {
 };
 
 export const postChatRoom = async (storeId: number) => {
+  console.log("postChatRoom");
+
   const response = await sendApi.post(`/mypage/room`, {
     storeId: storeId,
   });

src/container/myPage/chatPage/ChatPage.tsx

@@ -20,10 +20,6 @@ export type roomInfoType = {
 };
 
 function ChatPage() {
-  const [roomIdState, setRoomIdState] = useState<number>();
-  const getRoomIdState = (id: number) => {
-    setRoomIdState(id);
-  };
   const [chatRoomList, setChatRoomList] = useState<roomInfoType[]>();
   const [userInfoState, setUserInfoState] = useState<userInfoType>();
   const [partnerNameState, setPartnerNameState] = useState<string>();
@@ -55,15 +51,10 @@ function ChatPage() {
       <Wrapper>
         <ChatList
           chatRoomList={chatRoomList}
-          getRoomIdState={getRoomIdState}
           getPartnerNameState={getPartnerNameState}
           userInfo={userInfoState}
         />
-        <ChatRoom
-          roomIdState={roomIdState}
-          userInfo={userInfoState}
-          partnerName={partnerNameState}
-        />
+        <ChatRoom userInfo={userInfoState} partnerName={partnerNameState} />
       </Wrapper>
     </Layout>
   );

src/container/myPage/chatPage/components/ChatList.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import SerchImage from "../../../../../public/SVG/myPage/chatPage/searchImage.svg";
 import ChatListItem from "./ChatListItem";
 import { userInfoType } from "../ChatPage";
+import { useRoomIdState } from "../../../../recoil/chat/roomIdStateAtom";
 
 type roomInfoType = {
   roomId: number;
@@ -14,15 +15,15 @@ type roomInfoType = {
 
 function ChatList({
   chatRoomList,
-  getRoomIdState,
   getPartnerNameState,
   userInfo,
 }: {
   chatRoomList?: roomInfoType[];
-  getRoomIdState: (id: number) => void;
   getPartnerNameState: (partnerName: string) => void;
   userInfo?: userInfoType;
 }) {
+  const [roomIdState, setRoomIdState] = useRoomIdState();
+
   return (
     <Wrapper>
       <Header>
@@ -50,7 +51,7 @@ function ChatList({
               }
               thumbnailMessage={item.thumbnailMessage}
               onClickItem={() => {
-                getRoomIdState(item.roomId);
+                setRoomIdState(item.roomId);
                 getPartnerNameState(
                   userInfo?.userRole === "MANAGER"
                     ? item.customerName

src/container/myPage/chatPage/components/ChatRoom.tsx

@@ -6,16 +6,17 @@ import * as StompJs from "@stomp/stompjs";
 import { useTokenService } from "../../../../hooks/useTokenService";
 import { getChatHistory } from "../../../../apis/controller/chatPage";
 import { userInfoType } from "../ChatPage";
+import { useRoomIdState } from "../../../../recoil/chat/roomIdStateAtom";
 
 function ChatRoom({
-  roomIdState,
   userInfo,
   partnerName,
 }: {
-  roomIdState?: number;
   userInfo?: userInfoType;
   partnerName?: string;
 }) {
+  const [roomIdState, setRoomIdState] = useRoomIdState();
+
   const { getAccessToken } = useTokenService();
   const client = new StompJs.Client({
     brokerURL: "wss://api.dessert-gallery.site/ws/chat/websocket",

src/container/storePage/components/StoreProfile.tsx

@@ -6,6 +6,7 @@ import { useFollowAction } from "../../../hooks/useFollowAction";
 import { useGetStoreInfo } from "../../../hooks/useStore";
 import { getChatRoom, postChatRoom } from "../../../apis/controller/chatPage";
 import { roomInfoType } from "../../myPage/chatPage/ChatPage";
+import { useRoomIdState } from "../../../recoil/chat/roomIdStateAtom";
 
 const StoreProfile = () => {
   const router = useRouter();
@@ -18,20 +19,26 @@ const StoreProfile = () => {
 
   const { postFollowMutate, putUnFollowMutate } = useFollowAction(storeId);
 
-  const [isChatRoomExist, setIsChatRoomExist] = useState<boolean>(false);
+  const [isChatRoomExist, setIsChatRoomExist] = useState<{
+    exist: boolean;
+    roomId: number;
+  }>({ exist: false, roomId: 0 });
+
+  const [roomIdState, setRoomIdState] = useRoomIdState();
 
   const checkChatRoom = async () => {
     const chatRoom = await getChatRoom();
     console.log(chatRoom);
-    chatRoom.map((item: roomInfoType, index: number) => {
+    chatRoom.map((item: roomInfoType) => {
       if (data && data.name === item.storeName) {
-        console.log("방이 존재합니다.", index);
-        setIsChatRoomExist(true);
+        console.log("방이 존재합니다.", item.roomId);
+        setIsChatRoomExist({ exist: true, roomId: item.roomId });
       }
     });
   };
 
   useEffect(() => {
+    setRoomIdState(0);
     checkChatRoom();
   }, [data]);
 
@@ -94,9 +101,14 @@ const StoreProfile = () => {
                   height="30px"
                   fontSize="12px"
                   onClickHandler={() => {
-                    console.log(storeId);
-                    postChatRoom(storeId);
-                    router.push("/myPage/chat");
+                    if (isChatRoomExist.exist) {
+                      setRoomIdState(isChatRoomExist.roomId);
+                      router.push("/myPage/chat");
+                    } else {
+                      console.log(storeId);
+                      postChatRoom(storeId);
+                      router.push("/myPage/chat");
+                    }
                   }}
                 />
               </BtnList>

src/recoil/chat/roomIdStateAtom.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { atom, useRecoilState } from "recoil";
+import { recoilPersist } from "recoil-persist";
+
+// next.js에서 sessionStorage를 사용하기 위한 코드
+const sessionStorage =
+  typeof window !== "undefined" ? window.sessionStorage : undefined;
+
+// persistAtom 선언
+const { persistAtom } = recoilPersist({
+  key: "roomIdSessionStorage", //원하는 key 값 입력
+  storage: sessionStorage,
+});
+
+const defaultValue: number = 0;
+
+// 리코일 atom 선언, effects_UNSTABLE 속성을 이용해 웹스토리지 사용 정의
+export const roomIdStateAtom = atom<number>({
+  key: "roomIdDataState",
+  default: defaultValue,
+  effects_UNSTABLE: [persistAtom],
+});
+
+// next.js에서 recoil-persist 사용 시 발생하는 hydration 에러를 해결하기 위한 코드
+export function useRoomIdState() {
+  const [isInitial, setIsInitial] = useState(true);
+  const [value, setValue] = useRecoilState(roomIdStateAtom);
+
+  useEffect(() => {
+    setIsInitial(false);
+  }, []);
+
+  return [isInitial ? defaultValue : value, setValue] as const;
+}