feat: 사이드바 열기, 닫기 버튼 수정

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 = () => {
         <Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
       </SidebarWrapper>
 
-      {!isSidebarOpen && (
-        <OpenButtonContainer>
-          <IconButton
-            aria-label="Open sidebar"
-            icon={<HamburgerIcon />}
-            onClick={toggleSidebar}
-            size="lg"
-          />
-        </OpenButtonContainer>
-      )}
-
       <Wrapper>
         <Header>
           {!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;

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<SidebarProps> = ({ isOpen, toggleSidebar }) => {
   return (
-    <SidebarContainer isOpen={isOpen}>
-      <IconButton
-        aria-label="Close sidebar"
-        icon={<CloseIcon />} // 닫기 아이콘
-        onClick={toggleSidebar} // 사이드바 닫기
-        color="white"
-        variant="ghost"
-        size="lg"
-        style={{ position: "absolute", right: "16px", top: "16px" }} // 닫기 버튼을 오른쪽 위에 고정
-      />
-      <Flex
-        direction="column"
-        alignItems="center"
-        justifyContent="flex-start"
-        mt={8}
-        width="100%"
-      >
-        {" "}
-        {/* 가로로 가운데 정렬 */}
-        <Box textAlign="center" mb={4}>
-          <p style={{ fontSize: "24px", fontWeight: "bold" }}>
-            경북대 컴퓨터학부
-          </p>{" "}
-          {/* 폰트 크기와 굵기 조정 */}
-          <p style={{ fontSize: "24px", fontWeight: "bold" }}>
-            학사 정보 AI
-          </p>{" "}
-          {/* 폰트 크기와 굵기 조정 */}
-        </Box>
-        <img
-          src={knuLogo}
-          alt="KNU Logo"
-          style={{ width: "100px", height: "100px" }}
+    <>
+      <SidebarContainer isOpen={isOpen}>
+        <ToggleButton
+          aria-label={isOpen ? "Close sidebar" : "Open sidebar"}
+          icon={
+            isOpen ? (
+              <ArrowBackIcon boxSize={6} />
+            ) : (
+              <ArrowForwardIcon boxSize={6} />
+            )
+          }
+          onClick={toggleSidebar}
+          variant="ghost"
+          size="lg"
         />
-        <Divider /> {/* 구분선 추가 */}
-      </Flex>
-    </SidebarContainer>
+        {isOpen && (
+          <Flex
+            direction="column"
+            alignItems="center"
+            justifyContent="flex-start"
+            mt={8}
+            width="100%"
+          >
+            <Box textAlign="center" mb={4}>
+              <p style={{ fontSize: "24px", fontWeight: "bold" }}>
+                경북대 컴퓨터학부
+              </p>
+              <p style={{ fontSize: "24px", fontWeight: "bold" }}>
+                학사 정보 AI
+              </p>
+            </Box>
+            <img
+              src={knuLogo}
+              alt="KNU Logo"
+              style={{ width: "100px", height: "100px" }}
+            />
+            <Divider />
+          </Flex>
+        )}
+      </SidebarContainer>
+    </>
   );
 };
 
 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;