feat: 사이드바 디자인 수정

datastreams-knu · Dec 4, 2024 · 0cab81e · 0cab81e
1 parent 8d7394e
commit 0cab81e
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 127 deletions.
diff --git a/src/pages/MainPage/Sidebar/Sidebar.tsx b/src/pages/MainPage/Sidebar/Sidebar.tsx
@@ -45,6 +45,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
   const [userInfo, setUserInfo] = useState<{
     nickname: string;
     joinedAt: string;
+    num_of_question: number;
   } | null>(null);
   const [error, setError] = useState<string | null>(null);
   const toast = useToast();
@@ -333,23 +334,29 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
           width="100%"
           height="calc(100vh - 16px)"
         >
-          <Box
-            textAlign="center"
-            mb={4}
-            fontSize={{ base: "36px", md: "50px" }}
-            fontWeight={"bold"}
-            color="#C73732"
-          >
-            <Box>경북대 컴퓨터학부</Box>
-            <Box mt="-10px">학사 정보 챗봇</Box>
+          <Box width={"100%"} mt={-50} pt={50} bg="#fcb9aa" zIndex={30000}>
+            <Box
+              textAlign="center"
+              mb={4}
+              fontSize={{ base: "36px", md: "50px" }}
+              fontWeight={"bold"}
+              color="#C73732"
+              onClick={() => navigate("/")} // 메인 페이지로 이동
+              cursor={"pointer"} // 커서를 손가락 모양으로 변경
+            >
+              <Box>경북대 컴퓨터학부</Box>
+              <Box mt="-10px">학사 정보 챗봇</Box>
+            </Box>
+            <Box
+              as="hr"
+              width="90%"
+              borderTop="3px solid #FFD0C6"
+              ml={"auto"}
+              mr={"auto"}
+              mb={5}
+              borderRadius={"md"}
+            />
           </Box>
-          <Box
-            as="hr"
-            width="90%"
-            borderTop="3px solid #FFD0C6"
-            my={5}
-            borderRadius={"md"}
-          />
           <Box
             flex="1"
             overflowY="auto"
@@ -562,8 +569,9 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, toggleSidebar }) => {
               >
                 {userInfo ? (
                   <Box>
-                    <Text>닉네임: {userInfo.nickname}</Text>
-                    <Text>가입일: {userInfo.joinedAt.split("T")[0]}</Text>
+                    <Text>닉네임 : {userInfo.nickname}</Text>
+                    <Text>가입일 : {userInfo.joinedAt.split("T")[0]}</Text>
+                    <Text>지금까지 한 질문: {userInfo.num_of_question}개</Text>
                   </Box>
                 ) : error ? (
                   <Text color="red.500">{error}</Text>

diff --git a/src/pages/MainPage/UserChat.tsx b/src/pages/MainPage/UserChat.tsx
@@ -1,10 +1,18 @@
 import { useEffect, useState, useRef } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { MessageInput } from "./MessageInput/MessageInput";
 import { MessageList } from "./messageList/MessageList";
 import { Sidebar } from "./Sidebar/Sidebar";
 import { IntroModal } from "./IntroModal";
-import { Box, Flex, Spinner, Text, Button, Image } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  Spinner,
+  Text,
+  Button,
+  Image,
+  useToast,
+} from "@chakra-ui/react";
 import tutorial1 from "@/assets/tutorial1.svg";
 import tutorial2 from "@/assets/tutorial2.svg";
 import tutorial3 from "@/assets/tutorial3.svg";
@@ -38,6 +46,8 @@ const UserChat = () => {
   const pageRef = useRef<HTMLDivElement>(null);
   const prevHeightRef = useRef<number>(0); // 이전 높이를 저장할 ref
   const baseURL = import.meta.env.VITE_BASE_URL;
+  const toast = useToast();
+  const navigate = useNavigate();
 
   interface ResponseData {
     answer: string;
@@ -108,10 +118,32 @@ const UserChat = () => {
         setMessages((prev) => [...prev, formattedResponse]);
       } catch (error) {
         console.error("에러 발생:", error);
+        // Toast로 에러 메시지 표시
+        toast({
+          title: (
+            <span style={{ fontSize: "1.5rem", fontWeight: "bold" }}>
+              에러 발생
+            </span>
+          ),
+          description: (
+            <span style={{ fontSize: "1.2rem" }}>
+              5초 뒤 메인페이지로 이동합니다.
+            </span>
+          ),
+          status: "error",
+          position: "top",
+          duration: 4500,
+          isClosable: true,
+        });
         setMessages((prev) => [
           ...prev,
           "서버에 문제가 있습니다. 잠시 후 다시 시도해주세요!",
         ]);
+
+        // 5초 후 메인 페이지로 이동
+        setTimeout(() => {
+          navigate("/");
+        }, 5000);
       } finally {
         setLoading(false);
       }

diff --git a/src/pages/MainPage/UserPage.tsx b/src/pages/MainPage/UserPage.tsx
@@ -1,61 +1,17 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Sidebar } from "./Sidebar/Sidebar";
-import {
-  Box,
-  Button,
-  Flex,
-  VStack,
-  Text,
-  Divider,
-  Spinner,
-} from "@chakra-ui/react";
+import { Box, Button, Flex, Text, Divider } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
 
-interface History {
-  id: string;
-  name: string;
-  date: string;
-}
-
 const UserPage = () => {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
-  const [histories, setHistories] = useState<History[]>([]); // 타입 지정
-  const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
   const baseURL = import.meta.env.VITE_BASE_URL;
 
   const toggleSidebar = () => {
     setSidebarOpen((prev) => !prev);
   };
 
-  useEffect(() => {
-    const fetchHistories = async () => {
-      setIsLoading(true);
-      try {
-        const token = localStorage.getItem("accessToken");
-        const response = await fetch(`${baseURL}/api/history/show-all`, {
-          method: "GET",
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        });
-        if (response.ok) {
-          const data: History[] = await response.json();
-          setHistories(data);
-        } else {
-          console.error("Failed to fetch histories");
-        }
-      } catch (error) {
-        console.error("Error fetching histories:", error);
-      } finally {
-        setIsLoading(false); // 로딩 종료
-      }
-    };
-
-    fetchHistories();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const createNewHistory = async () => {
     try {
       const token = localStorage.getItem("accessToken");
@@ -132,67 +88,10 @@ const UserPage = () => {
         >
           새로운 채팅 시작하기 🚀
         </Button>
-        {histories.length > 0 && (
-          <>
-            <Text
-              fontSize="xl"
-              fontWeight="bold"
-              color="#555"
-              mb="10px"
-              alignSelf="flex-start"
-            >
-              이전 채팅 이어하기
-            </Text>
-            <Divider borderColor="#ddd" mb="10px" />
-          </>
-        )}
-        <VStack
-          spacing="10px"
-          w="100%"
-          maxH="300px"
-          minH={histories.length > 0 ? "100px" : "40px"}
-          overflow={"auto"}
-          css={{
-            /* 스크롤바 스타일 */
-            "&::-webkit-scrollbar": {
-              width: "8px", // 스크롤바 너비
-            },
-            "&::-webkit-scrollbar-thumb": {
-              backgroundColor: "#C8D2C9", // 스크롤바 색상
-              borderRadius: "4px", // 스크롤바 모서리
-            },
-            "&::-webkit-scrollbar-track": {
-              backgroundColor: "transpaent", // 스크롤바 트랙 색상
-            },
-          }}
-        >
-          {isLoading ? (
-            <Spinner
-              size="lg"
-              color="#DEE5DF" // 버튼과 동일한 색상
-              speed="0.8s"
-            />
-          ) : histories.length > 0 ? (
-            histories.map((history) => (
-              <Button
-                key={history.id}
-                onClick={() => navigate(`/chat/${history.id}`)}
-                bg="#DEE5DF"
-                fontSize={{ base: "lg", md: "xl" }}
-                color="#333"
-                _hover={{ bg: "#C8D2C9", transform: "scale(1.01)" }}
-                w="95%"
-                minH="40px"
-              >
-                {history.name || "Untitled History"}
-              </Button>
-            ))
-          ) : (
-            <Text color="#777" fontSize={{ base: "xl", md: "2xl" }}>
-              이전 히스토리가 없습니다.
-            </Text>
-          )}
-        </VStack>
+        <Text fontSize={{ base: "lg", md: "2xl" }} mt={-5} fontWeight={"md"}>
+          사이드바를 열어 예전 질문 기록을 확인할 수 있어요!
+        </Text>
+        <Divider />
       </Flex>
     </Box>
   );