Merge pull request #98 from KUIT-Space/feat#51-chat_detail

Fix: signup user flow & verification logic

src/App.tsx

@@ -83,7 +83,7 @@ function Layout({ routes_children }: { routes_children: RouteChildren[] }) {
       <LayoutContainer>
         <div id="content">
           <Outlet />
-          <LoginModal />
+          <LoginModal exceptionRouters={["/login", "/signup"]} />
         </div>
         {routes_children.find((child) => matchPath(child.path, pathname))?.hasBottomBar && (
           <BottomNavBar />

src/apis/Chat/Socket.ts

@@ -1,6 +1,8 @@
 import { Stomp } from "@stomp/stompjs";
 import SockJS from "sockjs-client";
 
+import { createRequestOptionsJSON_AUTH, fetchApi } from "@/apis/_createRequestOptions";
+
 export const SocketConnect = (
   stompClient: any,
   chatRoomId: string,
@@ -13,6 +15,7 @@ export const SocketConnect = (
   if (!token || !stompClient.current.onConnect) {
     //로그인 오류 처리
     //alert("로그인이 필요합니다.");
+    console.log("!token || !stompClient.current.onConnect, 로그인 오류");
     return;
   }
 
@@ -37,3 +40,14 @@ export const SocketDisconnect = (stompClient: any) => {
     stompClient.current.disconnect();
   }
 };
+
+/** */
+export const ChatroomLeave = async (chatRoomId: number) => {
+  const requestOptions = createRequestOptionsJSON_AUTH("POST");
+  const spaceId = Number(localStorage.getItem("spaceId"));
+  if (!requestOptions || !spaceId) return null;
+
+  const url = `${import.meta.env.VITE_API_BACK_URL}/space/${spaceId}/chat/${chatRoomId}/leave`;
+
+  return await fetchApi(url, requestOptions);
+};

src/apis/index.ts

@@ -1,12 +1,23 @@
 export * from "@/apis/LoginApi";
+export * from "@/apis/voiceroomApi";
+export * from "@/apis/GetUserProfileApi";
 
-export * from "@/apis/Chat/ChatroomSearchAllApi";
-export * from "@/apis/Chat/ChatroomCreateApi";
 export * from "@/apis/Chat/ChatType";
-export * from "@/apis/Chat/ChatroomUpdateNameApi";
+export * from "@/apis/Chat/ChatroomCreateApi";
+export * from "@/apis/Chat/ChatroomExitDelete";
+export * from "@/apis/Chat/ChatroomSearchAllApi";
 export * from "@/apis/Chat/ChatroomSearchAllUserApi";
+export * from "@/apis/Chat/ChatroomUpdateNameApi";
 
 export * from "@/apis/Chat/Socket";
 
+export * from "@/apis/Pay/PayPageAPI";
+
 export * from "@/apis/Space/SpaceCreateApi";
+export * from "@/apis/Space/SpaceJoinInfoApi";
+export * from "@/apis/Space/SpaceSearchAllUserApi";
 export * from "@/apis/Space/SpaceSearchUserProfile";
+export * from "@/apis/Space/SpaceSelectApi";
+export * from "@/apis/Space/SpaceUserJoinApi";
+
+export * from "@/apis/_createRequestOptions";

src/components/SignUpHeader.tsx

@@ -1,52 +1,52 @@
 import React from "react";
 import styled from "styled-components";
+
 import back from "@/assets/icon_back.svg";
-import { useNavigate } from "react-router-dom";
 
 const HeaderContainer = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	height: 3.25rem;
-	padding: 0.5rem 0;
-	position: relative;
-	max-width: 40rem;
-	margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 3.25rem;
+  padding: 0.5rem 0;
+  position: relative;
+  max-width: 40rem;
+  margin: 0 auto;
 `;
 
 const Back = styled.button`
-	position: absolute;
-	left: 0.63rem;
-	width: 2.25rem;
-	height: 2.25rem;
-	cursor: pointer;
+  position: absolute;
+  left: 0.63rem;
+  width: 2.25rem;
+  height: 2.25rem;
+  cursor: pointer;
 `;
 
 const Title = styled.div`
-	color: #fff;
-	font-family: Freesentation;
-	font-size: 1.25rem;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 120%;
-	letter-spacing: 0.05rem;
+  color: #fff;
+  font-family: Freesentation;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%;
+  letter-spacing: 0.05rem;
 `;
 
 interface HeaderProps {
-	title: string;
-	onBackClick: () => void;
+  title: string;
+  onBackClick: () => void;
 }
 
 const SignUpHeader: React.FC<HeaderProps> = ({ title, onBackClick }) => {
-	return (
-		<HeaderContainer>
-			<Back onClick={onBackClick}>
-				<img src={back} alt="Back" />
-			</Back>
-			<Title>{title}</Title>
-		</HeaderContainer>
-	);
+  return (
+    <HeaderContainer>
+      <Back onClick={onBackClick}>
+        <img src={back} alt="Back" />
+      </Back>
+      <Title>{title}</Title>
+    </HeaderContainer>
+  );
 };
 
 export default SignUpHeader;

src/pages/ChatPage/ChatPage.styled.ts

@@ -33,6 +33,7 @@ export const ChatContainer = styled.div`
   }
 
   .chat--container {
+    position: relative;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -77,6 +78,7 @@ export const ChatContainer = styled.div`
 
   .chat-btn-detail {
     max-width: 13.5rem;
+    max-height: 4.125rem;
     color: var(--Foundation-Gray-gray300, var(--GRAY-300, #d4d4d9));
 
     /* text/Regular 14pt */
@@ -85,6 +87,14 @@ export const ChatContainer = styled.div`
     font-weight: 400;
     line-height: 140%; /* 19.6px */
     letter-spacing: 0.035rem;
+
+    img {
+      width: auto;
+      height: 100%;
+      position: absolute;
+      right: 4rem;
+      top: 0;
+    }
   }
 
   .chat-btn-chatNum {

src/pages/ChatPage/ChatPage.tsx

@@ -18,10 +18,13 @@ const ChatPage = () => {
 
     // fetch로 data 받아오는 부분
     // 임시로 LOCALSTORAGE에 spaceId 3으로 저장
-    localStorage.setItem("spaceId", "3");
+    // localStorage.setItem("spaceId", "3");
     //
     const spaceId = localStorage.getItem("spaceId");
-    if (spaceId !== null) {
+    if (spaceId === null) {
+      console.log("spacdId === null");
+      navigate("/space");
+    } else if (spaceId !== null) {
       chatroomSearchAllApi(Number.parseInt(spaceId))
         .then((res) => {
           if (res === null) {

src/pages/ChatPage/ChattingPage/ChattingPage.tsx

@@ -8,6 +8,7 @@ import {
   ChatPay,
   ChatPost,
   Chatroom,
+  ChatroomLeave,
   ChatSendRequestFrame,
   ChatText,
   SocketConnect,
@@ -78,8 +79,11 @@ const ChattingPage = () => {
     });
 
     SocketConnect(stompClient, param.id || "", handleChatMessage);
-    return () => SocketDisconnect(stompClient);
-  }, [param.id, spaceId]);
+    return () => {
+      SocketDisconnect(stompClient);
+      ChatroomLeave(chatroomInfo.id).then((res) => console.log(res)); //사용자 채팅방 떠남 알려주기 (unsubscribe..?)
+    };
+  }, [param.id, spaceId, chatroomInfo.id]);
 
   //
   //

src/pages/LoginPage/LoginModal.tsx

@@ -3,14 +3,14 @@ import { useLocation, useNavigate } from "react-router-dom";
 
 import StopModal from "@/components/StopModal";
 
-export const LoginModal = () => {
+export const LoginModal = ({ exceptionRouters }: { exceptionRouters: string[] }) => {
   const navigate = useNavigate();
   const location = useLocation(); // 현재 경로를 가져옴
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   useEffect(() => {
-    if (location.pathname === "/login") {
+    if (exceptionRouters.includes(location.pathname)) {
       return;
     }
 

src/pages/LoginPage/LoginPage.tsx

@@ -41,7 +41,7 @@ const LoginPage = () => {
   const handleLogin = async () => {
     if (!isButtonActive) return;
     loginApi(email, password).then((res) =>
-      res.status === "OK" ? navigate("/") : alert("login error: " + res.message),
+      res.status === "OK" ? navigate("/space") : alert("login error: " + res.message),
     );
   };