From 64c46d1e066163868790598456f4abd79846c11e Mon Sep 17 00:00:00 2001
From: SongInJae <pan0663@naver.com>
Date: Wed, 25 Oct 2023 18:34:50 +0900
Subject: [PATCH] =?UTF-8?q?design:=20layout=20ui=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Layout.tsx              | 12 ---------
 src/pages/Layout/Layout.style.ts  | 11 ++++++++
 src/pages/Layout/Layout.tsx       | 17 ++++++++++++
 src/pages/Layout/SideNav.style.ts | 43 +++++++++++++++++++++++++++++++
 src/pages/Layout/SideNav.tsx      | 39 ++++++++++++++++++++++++++++
 src/routes/index.tsx              |  2 +-
 src/styles/Theme.ts               |  1 +
 7 files changed, 112 insertions(+), 13 deletions(-)
 delete mode 100644 src/pages/Layout.tsx
 create mode 100644 src/pages/Layout/Layout.style.ts
 create mode 100644 src/pages/Layout/Layout.tsx
 create mode 100644 src/pages/Layout/SideNav.style.ts
 create mode 100644 src/pages/Layout/SideNav.tsx

diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx
deleted file mode 100644
index 193bee20..00000000
--- a/src/pages/Layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-
-const Layout = () => {
-  return (
-    <div>
-      <Outlet />
-    </div>
-  );
-};
-
-export default Layout;
diff --git a/src/pages/Layout/Layout.style.ts b/src/pages/Layout/Layout.style.ts
new file mode 100644
index 00000000..782f86c1
--- /dev/null
+++ b/src/pages/Layout/Layout.style.ts
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+`;
+
+export const Content = styled.div`
+  flex-grow: 1;
+`;
diff --git a/src/pages/Layout/Layout.tsx b/src/pages/Layout/Layout.tsx
new file mode 100644
index 00000000..fe4e7611
--- /dev/null
+++ b/src/pages/Layout/Layout.tsx
@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+
+import { Container, Content } from './Layout.style';
+import SideNav from './SideNav';
+
+const Layout = () => {
+  return (
+    <Container>
+      <SideNav />
+      <Content>
+        <Outlet />
+      </Content>
+    </Container>
+  );
+};
+
+export default Layout;
diff --git a/src/pages/Layout/SideNav.style.ts b/src/pages/Layout/SideNav.style.ts
new file mode 100644
index 00000000..2d4e8147
--- /dev/null
+++ b/src/pages/Layout/SideNav.style.ts
@@ -0,0 +1,43 @@
+import Avatar from '@/components/common/Avatar/Avatar';
+import Theme from '@/styles/Theme';
+import { css } from '@emotion/css';
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  width: 7rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 0;
+  box-sizing: border-box;
+  background: ${Theme.color.logo_2};
+  color: ${Theme.color.gray};
+`;
+
+export const AvatarGroup = styled.div`
+  overflow: scroll;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  align-items: center;
+`;
+export const iconStyle = css`
+  display: block;
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+`;
+export const ProfileWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: pointer;
+`;
+export const ProfileAvatar = styled(Avatar)``;
+export const ProfileName = styled.div`
+  text-align: center;
+`;
diff --git a/src/pages/Layout/SideNav.tsx b/src/pages/Layout/SideNav.tsx
new file mode 100644
index 00000000..ed67ec47
--- /dev/null
+++ b/src/pages/Layout/SideNav.tsx
@@ -0,0 +1,39 @@
+import Avatar from '@/components/common/Avatar/Avatar';
+
+import { FaBell, FaHome, FaPlusCircle } from 'react-icons/fa';
+
+import {
+  AvatarGroup,
+  Container,
+  ProfileAvatar,
+  ProfileName,
+  ProfileWrapper,
+  iconStyle,
+} from './SideNav.style';
+
+interface SideNav {
+  name?: string;
+}
+
+const SideNav = ({ name = '무명' }: SideNav) => {
+  return (
+    <Container>
+      <AvatarGroup>
+        {Array(8)
+          .fill(null)
+          .map((_, index) => (
+            <Avatar key={index} avatarShape="normal" />
+          ))}
+      </AvatarGroup>
+      <FaPlusCircle className={iconStyle} />
+      <FaHome className={iconStyle} />
+      <FaBell className={iconStyle} />
+      <ProfileWrapper>
+        <ProfileAvatar avatarShape="rectangle" />
+        <ProfileName>{name}</ProfileName>
+      </ProfileWrapper>
+    </Container>
+  );
+};
+
+export default SideNav;
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 63a25abc..e0fd654f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,5 @@
 import App from '@/App';
-import Layout from '@/pages/Layout';
+import Layout from '@/pages/Layout/Layout';
 import LoginPage from '@/pages/LoginPage/LoginPage';
 import MainPage from '@/pages/MainPage';
 import NotFoundPage from '@/pages/NotFoundPage';
diff --git a/src/styles/Theme.ts b/src/styles/Theme.ts
index 6da5d7b8..ced38011 100644
--- a/src/styles/Theme.ts
+++ b/src/styles/Theme.ts
@@ -10,6 +10,7 @@ const color = {
   gray: '#d9d9d9',
   indigo: '#003949',
   logoTextColor: '#fafafa',
+  logo_2: 'linear-gradient(175deg, #031f2b -19.45%, #486282 55.68%, #9458b5 117.93%)',
 } as const;
 
 const componentStyle = {