From 88acb88c0f29b1b2b197c1408d6793b2c119b9e8 Mon Sep 17 00:00:00 2001 From: kiyeong Date: Sat, 2 Nov 2024 15:54:44 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?= =?UTF-8?q?=EC=97=B4=EA=B8=B0,=20=EB=8B=AB=EA=B8=B0=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/main/index.tsx | 22 +----- src/pages/main/sidebar/index.tsx | 117 +++++++++++++++++++------------ 2 files changed, 75 insertions(+), 64 deletions(-) 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 -

{" "} - {/* 폰트 크기와 굵기 조정 */} -
- KNU Logo + + + ) : ( + + ) + } + onClick={toggleSidebar} + variant="ghost" + size="lg" /> - {/* 구분선 추가 */} -
-
+ {isOpen && ( + + +

+ 경북대 컴퓨터학부 +

+

+ 학사 정보 AI +

+
+ KNU Logo + +
+ )} + + ); }; 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;