From bf0da80cdf0d4473a01fb3732cd172744c879c42 Mon Sep 17 00:00:00 2001 From: Joonhyung Choi Date: Thu, 22 Feb 2024 15:35:10 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=80=EA=B2=8C=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=ED=95=84=EC=97=90=EC=84=9C=20=EC=B1=84=ED=8C=85=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?= =?UTF-8?q?=20=EC=B1=84=ED=8C=85=EB=B0=A9=EC=9D=B4=20=EC=9D=B4=EB=AF=B8=20?= =?UTF-8?q?=EC=A1=B4=EC=9E=AC=ED=95=98=EB=A9=B4=20=EC=83=88=EB=A1=9C?= =?UTF-8?q?=EC=9A=B4=20=EC=B1=84=ED=8C=85=EB=B0=A9=EC=9D=84=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=ED=95=98=EC=A7=80=20=EC=95=8A=EA=B3=A0=20=EB=B0=94?= =?UTF-8?q?=EB=A1=9C=20=EC=B1=84=ED=8C=85=EB=B0=A9=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=84=98=EC=96=B4=EA=B0=80=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20#109?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat: 가게 프로필에서 채팅하기 버튼 클릭 시 채팅방이 이미 존재하면 새로운 채팅방을 생성하지 않고 바로 채팅방으로 넘어가는 기능 추가 --- src/apis/controller/chatPage.ts | 2 ++ src/container/myPage/chatPage/ChatPage.tsx | 11 +----- .../myPage/chatPage/components/ChatList.tsx | 7 ++-- .../myPage/chatPage/components/ChatRoom.tsx | 5 +-- .../storePage/components/StoreProfile.tsx | 26 ++++++++++---- src/recoil/chat/roomIdStateAtom.ts | 34 +++++++++++++++++++ 6 files changed, 63 insertions(+), 22 deletions(-) create mode 100644 src/recoil/chat/roomIdStateAtom.ts diff --git a/src/apis/controller/chatPage.ts b/src/apis/controller/chatPage.ts index ee5006c7..98fca4da 100644 --- a/src/apis/controller/chatPage.ts +++ b/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, }); diff --git a/src/container/myPage/chatPage/ChatPage.tsx b/src/container/myPage/chatPage/ChatPage.tsx index 01637af2..4cf0c295 100644 --- a/src/container/myPage/chatPage/ChatPage.tsx +++ b/src/container/myPage/chatPage/ChatPage.tsx @@ -20,10 +20,6 @@ export type roomInfoType = { }; function ChatPage() { - const [roomIdState, setRoomIdState] = useState(); - const getRoomIdState = (id: number) => { - setRoomIdState(id); - }; const [chatRoomList, setChatRoomList] = useState(); const [userInfoState, setUserInfoState] = useState(); const [partnerNameState, setPartnerNameState] = useState(); @@ -55,15 +51,10 @@ function ChatPage() { - + ); diff --git a/src/container/myPage/chatPage/components/ChatList.tsx b/src/container/myPage/chatPage/components/ChatList.tsx index 6135782a..47afc1f1 100644 --- a/src/container/myPage/chatPage/components/ChatList.tsx +++ b/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 (
@@ -50,7 +51,7 @@ function ChatList({ } thumbnailMessage={item.thumbnailMessage} onClickItem={() => { - getRoomIdState(item.roomId); + setRoomIdState(item.roomId); getPartnerNameState( userInfo?.userRole === "MANAGER" ? item.customerName diff --git a/src/container/myPage/chatPage/components/ChatRoom.tsx b/src/container/myPage/chatPage/components/ChatRoom.tsx index 2e42445a..f93dff9f 100644 --- a/src/container/myPage/chatPage/components/ChatRoom.tsx +++ b/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", diff --git a/src/container/storePage/components/StoreProfile.tsx b/src/container/storePage/components/StoreProfile.tsx index 7d029c34..c93a552e 100644 --- a/src/container/storePage/components/StoreProfile.tsx +++ b/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(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"); + } }} /> diff --git a/src/recoil/chat/roomIdStateAtom.ts b/src/recoil/chat/roomIdStateAtom.ts new file mode 100644 index 00000000..8947d375 --- /dev/null +++ b/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({ + 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; +}