SKRF-471 refactor : 사이드바 스타일 변경 (#230)

* feat : 사이드 바 스타일 수정

* feat : 사이드 바 여닫는 기능

* chore : < > 버튼 위치 미세 조정

src/components/LoginButton/LoginButton.style.ts

@@ -12,17 +12,27 @@ const LoginButtonStyled = styled.button`
   border-radius: 0.3rem;
   background: rgba(239, 239, 244, 0.2);
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  transition: all 0.2s ease-in-out;
+  color: ${Theme.color.black};
 
   &:hover {
-    transform: scale(1.1);
-    transition: transform 0.2s ease-in-out;
+    background-color: ${Theme.color.tPurple};
+    color: ${Theme.color.white};
   }
 `;
 
+const LogoTextStyled = styled.div`
+  font-size: ${Theme.fontSize.largeContent};
+  text-align: center;
+  color: ${Theme.color.tSemiPurple};
+  font-family: 'LogoFont';
+  cursor: pointer;
+  margin-top: 1rem;
+`;
+
 const TextStyled = styled.span`
   word-break: keep-all;
   font-size: ${Theme.fontSize.tagText};
-  color: white;
 `;
 
-export { LoginButtonStyled, TextStyled };
+export { LoginButtonStyled, TextStyled, LogoTextStyled };

src/components/SideBarMyProfile/SideBarMyProfile.style.ts

@@ -7,7 +7,6 @@ const MyProfileStyled = styled.div`
   width: 4.6rem;
   height: 4.6rem;
   border-radius: 1.6rem;
-  background: rgba(239, 239, 244, 0.2);
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
   overflow: hidden;
 `;

src/components/SideBarMyProfile/SideBarMyProfile.tsx

@@ -1,3 +1,5 @@
+import Theme from '@/styles/Theme';
+
 import { BiSolidUserCircle } from 'react-icons/bi';
 
 import { MyProfileStyled, ProfileImageStyled } from './SideBarMyProfile.style';
@@ -12,7 +14,7 @@ const SideBarMyProfile = ({ profileImageUrl, ...props }: SideBarAvatarProps) =>
       {profileImageUrl ? (
         <ProfileImageStyled src={profileImageUrl} alt="my profile image" />
       ) : (
-        <BiSolidUserCircle size="4.6rem" style={{ fill: 'rgba(239, 239, 244, 0.50)' }} />
+        <BiSolidUserCircle size="4.6rem" style={{ fill: Theme.color.tSemiPurple }} />
       )}
     </MyProfileStyled>
   );

src/pages/Layout/Layout.style.ts

@@ -5,9 +5,11 @@ export const Container = styled.div`
   min-height: 100vh;
 `;
 
-export const Content = styled.div`
-  width: calc(100% - 5.7rem);
+export const Content = styled.div<{ isSideNavOpen: boolean }>`
+  width: calc(100%);
   padding: 0 2rem;
   min-width: 35rem;
-  margin-left: 5.7rem;
+  margin: 0 auto;
+  margin-left: ${({ isSideNavOpen }) => (isSideNavOpen ? '5.7rem' : '0')};
+  transition: all 0.2s ease-in-out;
 `;

src/pages/Layout/Layout.tsx

@@ -1,13 +1,20 @@
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import { Container, Content } from './Layout.style';
 import SideNav from './SideNav';
 
 const Layout = () => {
+  const [isSideNavOpen, setIsSideNavOpen] = useState(true);
+
+  const toggleSideNav = () => {
+    setIsSideNavOpen((prev) => !prev);
+  };
+
   return (
     <Container>
-      <SideNav />
-      <Content>
+      <SideNav isSideNavOpen={isSideNavOpen} onClick={toggleSideNav} />
+      <Content isSideNavOpen={isSideNavOpen}>
         <Outlet />
       </Content>
     </Container>

src/pages/Layout/SideNav.style.ts

@@ -3,18 +3,20 @@ import { hoverBox, sideBarScrollAreaStyled } from '@/styles/common';
 import { css } from '@emotion/css';
 import styled from '@emotion/styled';
 
-const SidebarContainer = styled.div`
+const SidebarContainer = styled.div<{ isOpen: boolean }>`
   position: fixed;
+  z-index: 100;
   width: 5.7rem;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   padding-bottom: 2rem;
-  box-sizing: border-box;
-  background: ${Theme.color.logo_2};
+  background: ${Theme.color.sidebarColor};
   color: ${Theme.color.gray};
+  transform: ${({ isOpen }) => (isOpen ? 'translateX(0)' : 'translateX(-100%)')};
+  transition: all 0.2s ease-in-out;
 `;
 
 const ClubWrapper = styled(sideBarScrollAreaStyled)`
@@ -36,6 +38,11 @@ const ClubLogoWrapper = styled(hoverBox)`
   justify-content: center;
   width: 100%;
   position: relative;
+
+  div {
+    border-radius: 50%;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  }
 `;
 
 const CreateClubButtonStyled = styled.div`
@@ -44,7 +51,7 @@ const CreateClubButtonStyled = styled.div`
   justify-content: center;
   align-items: center;
   gap: 0.2rem;
-  margin-top: 2rem;
+
   min-width: 4rem;
   min-height: 4rem;
   width: 4rem;
@@ -54,12 +61,13 @@ const CreateClubButtonStyled = styled.div`
   box-shadow: 0px 1px 4px 0px ${Theme.color.shadow};
   font-size: ${Theme.fontSize.tagText};
   cursor: pointer;
-
+  transition: transform 0.3s ease-in-out;
   position: relative;
 
+  transition: all 0.2s ease-in-out;
+
   &:hover {
-    transform: scale(1.1);
-    transition: transform 0.3s ease-in-out;
+    background-color: ${Theme.color.tSemiPurple};
   }
 `;
 
@@ -73,4 +81,31 @@ const iconStyle = css`
   filter: drop-shadow(2px 3px 1px ${Theme.color.shadow});
 `;
 
-export { SidebarContainer, ClubWrapper, CreateClubButtonStyled, iconStyle, ClubLogoWrapper };
+const SidebarToggleButtonStyled = styled.button`
+  display: flex;
+  width: 0.7rem;
+  height: 1.5rem;
+  transform: translateY(-1.5rem);
+  justify-content: center;
+  color: ${Theme.color.white};
+  background-color: ${Theme.color.tSemiPurple};
+  border: none;
+  align-items: center;
+  position: absolute;
+  padding-right: 0.2rem;
+  right: -0.7rem;
+  top: 50%;
+  z-index: 100;
+  font-size: ${Theme.fontSize.tagText};
+  border-radius: 0 0.5rem 0.5rem 0;
+  cursor: pointer;
+`;
+
+export {
+  SidebarContainer,
+  ClubWrapper,
+  CreateClubButtonStyled,
+  iconStyle,
+  ClubLogoWrapper,
+  SidebarToggleButtonStyled,
+};

src/pages/Layout/SideNav.tsx

@@ -1,4 +1,5 @@
 import LoginButton from '@/components/LoginButton/LoginButton';
+import { LogoTextStyled } from '@/components/LoginButton/LoginButton.style';
 import SideBarMyProfile from '@/components/SideBarMyProfile/SideBarMyProfile';
 import Avatar from '@/components/common/Avatar/Avatar';
 import { PATH } from '@/constants/path';
@@ -7,26 +8,31 @@ import useMyProfile from '@/hooks/query/user/useMyProfile';
 import { getStorage } from '@/utils/localStorage';
 
 import { FaPlusCircle } from 'react-icons/fa';
-import { IoMdHome } from 'react-icons/io';
 import { Link, useNavigate } from 'react-router-dom';
 
 import {
   ClubLogoWrapper,
   ClubWrapper,
   CreateClubButtonStyled,
   SidebarContainer,
-  iconStyle,
+  SidebarToggleButtonStyled,
 } from './SideNav.style';
 
-const SideNav = () => {
+interface SideNavProps extends React.HTMLAttributes<HTMLButtonElement> {
+  isSideNavOpen: boolean;
+}
+
+const SideNav = ({ isSideNavOpen, ...props }: SideNavProps) => {
   const { clubs } = useClubs();
   const { data } = useMyProfile();
   const isLoginUser = Boolean(getStorage('token'));
 
   const navigate = useNavigate();
 
   return (
-    <SidebarContainer>
+    <SidebarContainer isOpen={isSideNavOpen}>
+      <SidebarToggleButtonStyled {...props}>{isSideNavOpen ? '<' : '>'} </SidebarToggleButtonStyled>
+      <LogoTextStyled onClick={() => navigate(PATH.MAIN)}>Space Club</LogoTextStyled>
       {isLoginUser && (
         <CreateClubButtonStyled onClick={() => navigate(PATH.CREATE)}>
           클럽 생성
@@ -48,7 +54,6 @@ const SideNav = () => {
           </ClubLogoWrapper>
         ))}
       </ClubWrapper>
-      <IoMdHome className={iconStyle} onClick={() => navigate(PATH.MAIN)} />
       {isLoginUser ? (
         <Link to={PATH.PROFILE_APPLIED}>
           <SideBarMyProfile profileImageUrl={data?.profileImageUrl} />

src/styles/Theme.ts

@@ -40,6 +40,7 @@ const color = {
   shadow: 'rgba(0, 0, 0, 0.25)',
   sideScrollBarThumb: 'rgba(239, 239, 244, 0.2)',
   sideScrollBarTrack: 'rgba(239, 239, 244, 0.1)',
+  sidebarColor: '#EFEFF4',
 } as const;
 
 const componentStyle = {