Merge pull request #34 from sw-security-web-app/fetchRecentChat

nyeonseok · web-flow · commit 17f0848cd592 · 2025-03-06T01:45:36.000+09:00
SCRUM-70 로그인 여부에 따라 route 설정 완료, 최근 대화기록 불러오기 완료
diff --git a/sw-security/app/Hooks/useAuthRedirect.ts b/sw-security/app/Hooks/useAuthRedirect.ts
@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+import { useStore } from "../store/store"; // Zustand store import
+import { useNavigate } from "@remix-run/react";
+
+export const useAuthRedirect = () => {
+  const isLogin = useStore((state) => state.isLogin()); // 로그인 상태 가져오기
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isLogin) {
+      navigate("/login", { replace: true });
+    }
+  }, [isLogin, navigate]);
+};
diff --git a/sw-security/app/components/modal.tsx b/sw-security/app/components/modal.tsx
@@ -4,9 +4,10 @@ type Props = {
   setIsOpen: (isOpen: boolean) => void;
   text: string;
   title: string;
+  btnColor: string;
 };
 
-export default function Modal({ setIsOpen, text, title }: Props) {
+export default function Modal({ setIsOpen, text, title, btnColor }: Props) {
   return (
     <div className={modalStyle.modalContainer}>
       <div className={modalStyle.modalHeader}>
@@ -28,6 +29,7 @@ export default function Modal({ setIsOpen, text, title }: Props) {
       <div className={modalStyle.modalBtnDiv}>
         <button
           className={modalStyle.modalBtn}
+          style={{ backgroundColor: btnColor }}
           onClick={() => setIsOpen(false)}
         >
           확인
diff --git a/sw-security/app/components/profile.tsx b/sw-security/app/components/profile.tsx
@@ -1,34 +1,30 @@
+import { useState, useEffect } from "react";
 import { Link } from "@remix-run/react";
 import nickNameHeader from "../css/nickNameHeader.module.css";
+import { GoPerson } from "react-icons/go";
 
 type Props = { nickNameColor: string; profileColor: string };
+
 export default function Profile({ nickNameColor, profileColor }: Props) {
-  const isBrowser = typeof window !== "undefined"; // 브라우저에서만 실행되도록 체크
-  const userName = isBrowser ? localStorage.getItem("userName") : null; // 브라우저에서만 localStorage 접근
-  return (
-    // <Link to="/main/profile" style={{ textDecoration: "none" }}>
-    //   <div className={nickNameHeader.container}>
-    //     <div
-    //       className={nickNameHeader.nickname}
-    //       style={{ color: nickNameColor }}
-    //     >
-    //       닉네임
-    //     </div>
-    //     <div
-    //       className={nickNameHeader.profile}
-    //       style={{ backgroundColor: profileColor }}
-    //     ></div>
-    //   </div>
-    // </Link>
+  const [userName, setUserName] = useState<string | null>(null);
+
+  useEffect(() => {
+    // 클라이언트에서만 localStorage 접근
+    const storedUserName = localStorage.getItem("userName");
+    setUserName(storedUserName);
+  }, []); // 컴포넌트가 마운트될 때만 실행
 
+  return (
     <div className={nickNameHeader.container}>
       <div className={nickNameHeader.nickname} style={{ color: nickNameColor }}>
         {userName}
       </div>
       <div
         className={nickNameHeader.profile}
         style={{ backgroundColor: profileColor }}
-      ></div>
+      >
+        <GoPerson style={{ width: "2.8rem", height: "2.8rem" }} />
+      </div>
     </div>
   );
 }
diff --git a/sw-security/app/css/modal.module.css b/sw-security/app/css/modal.module.css
@@ -67,7 +67,7 @@
 }
 .modalBtn {
   border: none;
-  background-color: #2a2c2f;
+  /* background-color: #2a2c2f; */
   width: 6.67rem;
   height: 2.8rem;
   border-radius: 0.7rem;
diff --git a/sw-security/app/routes/_auth.tsx b/sw-security/app/routes/_auth.tsx
@@ -15,7 +15,12 @@ export default function Join() {
     <>
       {isOpen && (
         <div className={modalStyle.overlay}>
-          <Modal setIsOpen={setIsOpen} text={modalText} title={modalTitle} />
+          <Modal
+            setIsOpen={setIsOpen}
+            text={modalText}
+            title={modalTitle}
+            btnColor="#2a2c2f"
+          />
         </div>
       )}
       <div className={authStyle.container}>
diff --git a/sw-security/app/routes/main._index.tsx b/sw-security/app/routes/main._index.tsx
@@ -7,14 +7,14 @@ import { useEffect } from "react";
 
 export default function Join() {
   const navigate = useNavigate();
-  const isLogin = useOutletContext;
+  const login = useOutletContext;
 
-  useEffect(() => {
-    if (!isLogin) {
-      navigate("/login");
-      return;
-    }
-  }, [isLogin, navigate]);
+  // useEffect(() => {
+  //   if (login) {
+  //     navigate("/login");
+  //     return;
+  //   }
+  // }, [login, navigate]);
   return (
     <div className={defaultStyle.inner}>
       <div className={mainStyle.textContainer}>
diff --git a/sw-security/app/routes/main.tsx b/sw-security/app/routes/main.tsx
@@ -7,20 +7,12 @@ import modalStyle from "../css/modal.module.css";
 import { useStore } from "../store/store";
 import { useEffect, useState } from "react";
 import CautionModal from "~/components/cautionModal";
+import { useAuthRedirect } from "~/Hooks/useAuthRedirect";
 export default function MainLayout() {
   const [isOpen, setIsOpen] = useState(false);
   const [modalText, setModalText] = useState("");
   const [modalTitle, setModalTitle] = useState("");
-  const { isLogin } = useStore();
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    console.log(isLogin);
-    if (!isLogin) {
-      navigate("/login");
-      return;
-    }
-  }, [isLogin, navigate]);
+  useAuthRedirect();
 
   return (
     <>
@@ -41,7 +33,6 @@ export default function MainLayout() {
               setIsOpen,
               setModalText,
               setModalTitle,
-              isLogin,
             }}
           />
         </div>
diff --git a/sw-security/app/routes/main_.chatMain._index.tsx b/sw-security/app/routes/main_.chatMain._index.tsx
@@ -1,13 +1,21 @@
-import { useSearchParams, Link, useNavigate } from "@remix-run/react";
+import {
+  useSearchParams,
+  Link,
+  useNavigate,
+  useOutletContext,
+} from "@remix-run/react";
 import chatMainStyle from "../css/chatMain.module.css";
 import api from "~/api/api";
 import { FaRegTrashAlt } from "react-icons/fa";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export default function ChatMain() {
   const [searchParams] = useSearchParams();
   const ai = searchParams.get("ai") || "AI"; // 기본값 설정
   const navigate = useNavigate();
+  const [chatDiv, setChatDiv] = useState<
+    { chatRoomId: number; latestAnswer: string; latestCreatedAt: string }[]
+  >([]);
 
   const createChatRoom = async () => {
     try {
@@ -22,18 +30,25 @@ export default function ChatMain() {
     } catch (error) {
       console.error("채팅방 생성 실패:", error);
       alert("새 대화 생성에 실패했습니다."); // 에러 처리
+    } finally {
     }
   };
-
-  const fetchChatList = async () => {
+  const fetchChatDiv = async () => {
     try {
-      const response = await api.get("api/chat-room/latest");
+      const response = await api.get(`/api/chat-room/latest?aiModelType=${ai}`);
+      if (response.status === 200) {
+        setChatDiv(response.data);
+      } else {
+        const error = await response.data;
+        alert(error.message);
+      }
     } catch (error: any) {
-      console.error(error.message);
+      alert(error.message);
     }
   };
+
   useEffect(() => {
-    fetchChatList;
+    fetchChatDiv();
   }, []);
 
   return (
@@ -50,66 +65,26 @@ export default function ChatMain() {
           </div>
         </div>
         <div className={chatMainStyle.chatSelectGrid}>
-          <div className={chatMainStyle.child}>
-            <div className={chatMainStyle.dateDiv}>
-              <span>2024.11.11</span>
-              <FaRegTrashAlt
-                style={{ color: "white" }}
-                className={chatMainStyle.trashIcon}
-              />
-            </div>
-            <div className={chatMainStyle.contentDiv}>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
-              minima quibusdam, nobis, illum omnis natus hic odit laudantium
-              laboriosam animi aut aspernatur fuga est. Totam delectus
-              perferendis est iusto exercitationem?
-            </div>
-          </div>
-          <div className={chatMainStyle.child}>
-            <div className={chatMainStyle.dateDiv}>
-              <span>2024.11.11</span>
-              <FaRegTrashAlt
-                style={{ color: "white" }}
-                className={chatMainStyle.trashIcon}
-              />
-            </div>
-            <div className={chatMainStyle.contentDiv}>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
-              minima quibusdam, nobis, illum omnis natus hic odit laudantium
-              laboriosam animi aut aspernatur fuga est. Totam delectus
-              perferendis est iusto exercitationem?
-            </div>
-          </div>
-          <div className={chatMainStyle.child}>
-            <div className={chatMainStyle.dateDiv}>
-              <span>2024.11.11</span>
-              <FaRegTrashAlt
-                style={{ color: "white" }}
-                className={chatMainStyle.trashIcon}
-              />
-            </div>
-            <div className={chatMainStyle.contentDiv}>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
-              minima quibusdam, nobis, illum omnis natus hic odit laudantium
-              laboriosam animi aut aspernatur fuga est. Totam delectus
-              perferendis est iusto exercitationem?
-            </div>
-          </div>
-          <div className={chatMainStyle.child}>
-            <div className={chatMainStyle.dateDiv}>
-              <span>2024.11.11</span>
-              <FaRegTrashAlt
-                style={{ color: "white" }}
-                className={chatMainStyle.trashIcon}
-              />
-            </div>
-            <div className={chatMainStyle.contentDiv}>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
-              minima quibusdam, nobis, illum omnis natus hic odit laudantium
-              laboriosam animi aut aspernatur fuga est. Totam delectus
-              perferendis est iusto exercitationem?
-            </div>
-          </div>
+          {chatDiv.map((chat) => (
+            <Link
+              style={{ textDecoration: "none" }}
+              to={`/main/chatMain/${ai}/${chat.chatRoomId}`}
+              className={chatMainStyle.child}
+            >
+              <div key={chat.chatRoomId}>
+                <div className={chatMainStyle.dateDiv}>
+                  <span>{chat.latestCreatedAt}</span>
+                  {/* <FaRegTrashAlt
+                  style={{ color: "white" }}
+                  className={chatMainStyle.trashIcon}
+                /> */}
+                </div>
+                <div className={chatMainStyle.contentDiv}>
+                  {chat.latestAnswer}
+                </div>
+              </div>
+            </Link>
+          ))}
         </div>
       </div>
     </div>
diff --git a/sw-security/app/routes/main_.chatMain.tsx b/sw-security/app/routes/main_.chatMain.tsx
@@ -10,11 +10,30 @@ import logoStyle from "../css/logo.module.css";
 import { useStore } from "../store/store";
 import { useEffect, useState } from "react";
 import Logo from "~/components/logo";
+import api from "~/api/api";
+import { create } from "zustand";
+import { useAuthRedirect } from "~/Hooks/useAuthRedirect";
 
 export default function ChatMainLayout() {
   const [searchParams] = useSearchParams();
   const { ai2 } = useParams();
   const [ai, setAi] = useState<string>("AI");
+  const [chatList, setChatList] = useState<number[]>([]);
+  useAuthRedirect();
+
+  const fetchChatList = async () => {
+    try {
+      const response = await api.get(`/api/chat-room/get?aiModelType=${ai}`);
+      if (response.status === 200) {
+        setChatList(response.data.map((chat: any) => chat.chatRoomId));
+      } else {
+        const error = await response.data;
+        alert(error.message);
+      }
+    } catch (error: any) {
+      alert(error.message);
+    }
+  };
 
   useEffect(() => {
     if (ai2) {
@@ -27,6 +46,12 @@ export default function ChatMainLayout() {
     }
   }, [ai2, searchParams]);
 
+  useEffect(() => {
+    if (ai != "AI") {
+      fetchChatList();
+    }
+  }, [ai]);
+
   const logout = useStore((state) => state.logout);
   const navigate = useNavigate();
   const handleLogOut = () => {
@@ -61,9 +86,16 @@ export default function ChatMainLayout() {
             </div>
           </div>
           <div className={chatMainStyle.chatHistoryConatainer}>
-            <span className={chatMainStyle.chatTitle}>대화 내용 1</span>
-            <span className={chatMainStyle.chatTitle}>대화 내용 2</span>
-            <span className={chatMainStyle.chatTitle}>대화 내용 3</span>
+            {chatList.map((id, index) => (
+              <Link
+                style={{ textDecoration: "none" }}
+                to={`/main/chatMain/${ai}/${id}`}
+                className={chatMainStyle.chatTitle}
+                key={id}
+              >
+                <span>대화 내용 {id}</span>
+              </Link>
+            ))}
           </div>
           <div className={chatMainStyle.bottomItemContainer}>
             <button
@@ -75,16 +107,7 @@ export default function ChatMainLayout() {
               <img src="/img/myProfile.svg" alt="myProfile" />
               <span className={chatMainStyle.itemText2}>내 프로필</span>
             </button>
-            <button
-              className={chatMainStyle.itemDiv2}
-              onClick={handleLogOut}
-              // style={{
-              //   border: "none",
-              //   backgroundColor: "transparent",
-              //   padding: "0",
-              //   cursor: "pointer",
-              // }}
-            >
+            <button className={chatMainStyle.itemDiv2} onClick={handleLogOut}>
               <img src="/img/logout.svg" alt="logout" />
               <span className={chatMainStyle.itemText2}>로그아웃</span>
             </button>
diff --git a/sw-security/app/routes/main_.profile.learningAI.tsx b/sw-security/app/routes/main_.profile.learningAI.tsx
diff --git a/sw-security/app/routes/main_.profile.tsx b/sw-security/app/routes/main_.profile.tsx

Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@`
`67`	`67`	`}`
`68`	`68`	`.modalBtn {`
`69`	`69`	`border: none;`
`70`		`- background-color: #2a2c2f;`
	`70`	`+ /* background-color: #2a2c2f; */`
`71`	`71`	`width: 6.67rem;`
`72`	`72`	`height: 2.8rem;`
`73`	`73`	`border-radius: 0.7rem;`