diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
index bfbf390..a313810 100644
--- a/src/pages/main/index.tsx
+++ b/src/pages/main/index.tsx
@@ -2,8 +2,7 @@ import { useState, useEffect } from "react";
import { MessageInput } from "./message-input";
import { MessageList } from "./message-list";
import { Sidebar } from "./sidebar";
-import { IconButton, Button } from "@chakra-ui/react";
-import { HamburgerIcon } from "@chakra-ui/icons";
+import { Button } from "@chakra-ui/react";
import styled from "@emotion/styled";
import axios from "axios";
@@ -63,17 +62,6 @@ const MainPage = () => {
- {!isSidebarOpen && (
-
- }
- onClick={toggleSidebar}
- size="lg"
- />
-
- )}
-
{!isLoggedIn ? (
@@ -127,14 +115,6 @@ const Wrapper = styled.div`
transition: margin-left 0.3s ease-in-out;
`;
-// 사이드바 열기 버튼 컨테이너 스타일
-const OpenButtonContainer = styled.div`
- position: fixed;
- top: 10px;
- left: 10px;
- z-index: 1001;
-`;
-
// 헤더 스타일 (카카오 로그인 버튼을 위한 상단 영역)
const Header = styled.div`
position: fixed;
diff --git a/src/pages/main/sidebar/index.tsx b/src/pages/main/sidebar/index.tsx
index 2808629..2b038e5 100644
--- a/src/pages/main/sidebar/index.tsx
+++ b/src/pages/main/sidebar/index.tsx
@@ -1,5 +1,7 @@
+// sidebar.tsx
+
import { Box, IconButton, Flex } from "@chakra-ui/react";
-import { CloseIcon } from "@chakra-ui/icons";
+import { ArrowForwardIcon, ArrowBackIcon } from "@chakra-ui/icons"; // 화살표 아이콘 사용
import styled from "@emotion/styled";
import knuLogo from "@/assets/knuLogo.svg"; // 경북대 로고 이미지 가져오기
@@ -10,61 +12,90 @@ interface SidebarProps {
export const Sidebar: React.FC = ({ isOpen, toggleSidebar }) => {
return (
-
- } // 닫기 아이콘
- onClick={toggleSidebar} // 사이드바 닫기
- color="white"
- variant="ghost"
- size="lg"
- style={{ position: "absolute", right: "16px", top: "16px" }} // 닫기 버튼을 오른쪽 위에 고정
- />
-
- {" "}
- {/* 가로로 가운데 정렬 */}
-
-
- 경북대 컴퓨터학부
-
{" "}
- {/* 폰트 크기와 굵기 조정 */}
-
- 학사 정보 AI
-
{" "}
- {/* 폰트 크기와 굵기 조정 */}
-
-
+
+
+ ) : (
+
+ )
+ }
+ onClick={toggleSidebar}
+ variant="ghost"
+ size="lg"
/>
- {/* 구분선 추가 */}
-
-
+ {isOpen && (
+
+
+
+ 경북대 컴퓨터학부
+
+
+ 학사 정보 AI
+
+
+
+
+
+ )}
+
+ >
);
};
const SidebarContainer = styled(Box)<{ isOpen: boolean }>`
- width: 340px; // 전체 화면의 4분의 1 너비
+ width: 340px;
height: 100vh;
- background-color: #fcb9aa; // 배경 색상 헥스 코드
+ background-color: #fcb9aa;
color: white;
position: fixed;
top: 0;
- left: ${({ isOpen }) =>
- isOpen ? "0" : "-340px"}; // 열림/닫힘 상태에 따라 사이드바 위치 변경
- transition: left 0.5s ease-in-out; // 부드러운 애니메이션 효과
+ left: ${({ isOpen }) => (isOpen ? "0" : "-340px")};
+ transition: left 0.5s ease-in-out;
z-index: 10000;
- text-align: center; // 모든 텍스트 가운데 정렬
+ text-align: center;
padding-top: 16px;
`;
+// 열기/닫기 버튼, 사이드바 오른쪽 중앙에 위치
+const ToggleButton = styled(IconButton)`
+ position: absolute;
+ right: -20px;
+ top: 50%;
+ transform: translateY(-50%);
+ background-color: #fcb9aa;
+ color: white;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ transition: background-color 0.2s, transform 0.2s; // 호버 시 부드러운 효과 추가
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ & > svg {
+ margin-left: 20px; // 아이콘을 오른쪽으로 살짝 이동
+ }
+
+ &:hover {
+ background-color: #e0a89b; // 살짝 어두운 색으로 호버 효과
+ transform: translateY(-50%) scale(1.1); // 호버 시 버튼 확대
+ }
+`;
+
const Divider = styled.hr`
width: 90%;
border: 0;