From 2178bb482c563d94bc75e08f447439e3cd905b79 Mon Sep 17 00:00:00 2001
From: ShinjungOh <tlswjd9260@gmail.com>
Date: Sat, 20 Jul 2024 21:48:08 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=9C=B4=EC=A7=80=ED=86=B5=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80,=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon/drop_folder.svg               |   9 ++
 src/pages/home/Home.tsx                       |  10 +-
 src/pages/index.ts                            |   2 +
 src/pages/note/NewNote.tsx                    |   8 ++
 src/pages/note/index.ts                       |   5 +
 src/pages/setting/Setting.tsx                 |  27 +---
 src/pages/trash/Trash.tsx                     |  40 ++++++
 src/pages/trash/index.ts                      |   5 +
 src/routes.tsx                                |   4 +-
 src/shared/components/Nav/Nav.tsx             |  58 +++++++++
 src/shared/components/Nav/index.ts            |   5 +
 src/shared/components/NavButton/NavButton.tsx |  56 ++++++---
 .../components/NavContent/NavContent.tsx      | 118 ++++++++++++++----
 src/shared/components/NavFooter/NavFooter.tsx |  80 ++++++------
 src/shared/components/index.ts                |   1 +
 src/shared/constants/config.ts                |   2 +-
 src/shared/constants/path.ts                  |   2 +
 src/shared/styles/styleToken.ts               |   1 +
 18 files changed, 325 insertions(+), 108 deletions(-)
 create mode 100644 src/assets/icon/drop_folder.svg
 create mode 100644 src/pages/note/NewNote.tsx
 create mode 100644 src/pages/note/index.ts
 create mode 100644 src/pages/trash/Trash.tsx
 create mode 100644 src/pages/trash/index.ts
 create mode 100644 src/shared/components/Nav/Nav.tsx
 create mode 100644 src/shared/components/Nav/index.ts

diff --git a/src/assets/icon/drop_folder.svg b/src/assets/icon/drop_folder.svg
new file mode 100644
index 0000000..d81d42e
--- /dev/null
+++ b/src/assets/icon/drop_folder.svg
@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="30" height="30" fill="url(#pattern0_70_174)"/>
+<defs>
+<pattern id="pattern0_70_174" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_70_174" transform="scale(0.00847458)"/>
+</pattern>
+<image id="image0_70_174" width="118" height="118" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index ebc4dc0..ffbeeca 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -1,7 +1,11 @@
 import { Body } from '@/shared';
+import { Nav } from '@/shared/components/Nav';
 
 export const Home = () => (
-  <Body>
-    <h1>home</h1>
-  </Body>
+  <>
+    <Nav />
+    <Body>
+      <h1>home</h1>
+    </Body>
+  </>
 );
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 3b4cea9..1a0dbbf 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -6,3 +6,5 @@ export * from './Main';
 export * from './auth/index';
 export * from './home/index';
 export * from './setting/index';
+export * from './trash/index';
+export * from './note/index';
diff --git a/src/pages/note/NewNote.tsx b/src/pages/note/NewNote.tsx
new file mode 100644
index 0000000..82167b7
--- /dev/null
+++ b/src/pages/note/NewNote.tsx
@@ -0,0 +1,8 @@
+import { Nav } from '@/shared';
+
+export const NewNote = () => (
+  <>
+    <Nav />
+    <div>새 노트</div>
+  </>
+);
diff --git a/src/pages/note/index.ts b/src/pages/note/index.ts
new file mode 100644
index 0000000..2d1f3fd
--- /dev/null
+++ b/src/pages/note/index.ts
@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './NewNote';
diff --git a/src/pages/setting/Setting.tsx b/src/pages/setting/Setting.tsx
index f10622d..c6d9a1c 100644
--- a/src/pages/setting/Setting.tsx
+++ b/src/pages/setting/Setting.tsx
@@ -2,19 +2,8 @@ import { useEffect, useState } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
-import {
-  BaseButton,
-  Body,
-  handleAxiosError,
-  http,
-  NavButton,
-  NavContent,
-  NavFooter,
-  Navigation,
-  PATH,
-  styleToken,
-  Typography,
-} from '@/shared';
+import { BaseButton, Body, handleAxiosError, http, PATH, styleToken, Typography } from '@/shared';
+import { Nav } from '@/shared/components/Nav';
 
 type User = {
   id: number;
@@ -36,11 +25,6 @@ export const Setting = () => {
     hasSubscribed: false,
   });
 
-  const handleClickSetting = () => {
-    console.log('setting');
-    navigate(PATH.ACCOUNT);
-  };
-
   const handleClickLogout = () => {
     console.log('logout');
     navigate(PATH.MAIN);
@@ -62,12 +46,7 @@ export const Setting = () => {
 
   return (
     <>
-      <Navigation>
-        <Typography variant="h2">Review with Ai</Typography>
-        <NavButton />
-        <NavContent />
-        <NavFooter onLogout={handleClickLogout} onSetting={handleClickSetting} />
-      </Navigation>
+      <Nav />
       <Body>
         <Container>
           <Box
diff --git a/src/pages/trash/Trash.tsx b/src/pages/trash/Trash.tsx
new file mode 100644
index 0000000..c3c6943
--- /dev/null
+++ b/src/pages/trash/Trash.tsx
@@ -0,0 +1,40 @@
+import { Box } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+import { Body, styleToken, Typography } from '@/shared';
+import { Nav } from '@/shared/components/Nav';
+
+export const Trash = () => (
+  <>
+    <Nav />
+    <Body>
+      <Container>
+        <Box
+          style={{
+            padding: '29px 0 28px',
+          }}
+        >
+          <Typography variant="h1" fontWeight={400}>
+            휴지통
+          </Typography>
+        </Box>
+        <Box
+          style={{
+            margin: 0,
+            padding: '33px 0',
+            borderBottom: `1px solid ${styleToken.color.gray200}`,
+          }}
+        >
+          <Typography variant="subtitle1">휴지통에 저장된 항목은 1달이 지나면 자동으로 완전히 삭제됩니다.</Typography>
+        </Box>
+      </Container>
+    </Body>
+  </>
+);
+
+const Container = styled.div`
+  padding-right: 44px;
+  padding-left: 56px;
+  height: 100%;
+  width: 100%;
+  max-width: 1182px;
+`;
diff --git a/src/pages/trash/index.ts b/src/pages/trash/index.ts
new file mode 100644
index 0000000..735c075
--- /dev/null
+++ b/src/pages/trash/index.ts
@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './Trash';
diff --git a/src/routes.tsx b/src/routes.tsx
index 86a7840..7538015 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,4 +1,4 @@
-import { AuthKakao, AuthNaver, Home, Login, Main, Signup, Setting } from '@/pages';
+import { AuthKakao, AuthNaver, Home, Login, Main, Signup, Setting, Trash, NewNote } from '@/pages';
 import { PATH, RouterLayout } from '@/shared';
 
 export const routes = [
@@ -11,6 +11,8 @@ export const routes = [
       { path: PATH.OAUTH_KAKAO, element: <AuthKakao /> },
       { path: PATH.OAUTH_NAVER, element: <AuthNaver /> },
       { path: PATH.HOME, element: <Home /> },
+      { path: PATH.NOTE, element: <NewNote /> },
+      { path: PATH.TRASH, element: <Trash /> },
       { path: PATH.SETTING, element: <Setting /> },
       { path: PATH.ACCOUNT, element: <Setting /> },
     ],
diff --git a/src/shared/components/Nav/Nav.tsx b/src/shared/components/Nav/Nav.tsx
new file mode 100644
index 0000000..711c535
--- /dev/null
+++ b/src/shared/components/Nav/Nav.tsx
@@ -0,0 +1,58 @@
+import { Box } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+import { NavButton, NavContent, NavFooter, Navigation, PATH, Typography } from '@/shared';
+
+export const Nav = () => {
+  const navigate = useNavigate();
+
+  const handleClickHome = () => {
+    console.log('home');
+    navigate(PATH.HOME);
+  };
+
+  const handleClickNewNote = () => {
+    console.log('new note');
+    navigate(PATH.NOTE);
+  };
+
+  const handleClickTrash = () => {
+    console.log('trash');
+    navigate(PATH.TRASH);
+  };
+
+  const handleClickSetting = () => {
+    console.log('setting');
+    navigate(PATH.ACCOUNT);
+  };
+
+  const handleClickLogout = () => {
+    console.log('logout');
+    navigate(PATH.MAIN);
+  };
+
+  return (
+    <Navigation>
+      <Container>
+        <Box
+          onClick={handleClickHome}
+          style={{
+            cursor: 'pointer',
+          }}
+        >
+          <Typography variant="h2">복습할고양</Typography>
+        </Box>
+        <NavButton onNote={handleClickNewNote} />
+        <NavContent onHome={handleClickHome} onTrash={handleClickTrash} />
+        <NavFooter onLogout={handleClickLogout} onSetting={handleClickSetting} />
+      </Container>
+    </Navigation>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex: 1, 1;
+`;
diff --git a/src/shared/components/Nav/index.ts b/src/shared/components/Nav/index.ts
new file mode 100644
index 0000000..b7734a7
--- /dev/null
+++ b/src/shared/components/Nav/index.ts
@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './Nav';
diff --git a/src/shared/components/NavButton/NavButton.tsx b/src/shared/components/NavButton/NavButton.tsx
index cc2b126..7294c67 100644
--- a/src/shared/components/NavButton/NavButton.tsx
+++ b/src/shared/components/NavButton/NavButton.tsx
@@ -1,21 +1,43 @@
 import { Flex } from '@chakra-ui/react';
+import styled from '@emotion/styled';
 import { styleToken } from '@/shared';
 
-export const NavButton = () => (
-  <Flex width="100%" flexDirection="row" justifyContent="center" alignItems="center">
-    <Flex
-      width="56px"
-      height="56px"
-      flexDirection="row"
-      justifyContent="center"
-      alignItems="center"
-      style={{
-        border: `1px solid ${styleToken.color.gray300}`,
-        borderRadius: '50%',
-        cursor: 'pointer',
-      }}
-    >
-      <img src="/src/assets/note/add_memo.png" alt="새로운 노트 작성" width={30} height={30} />
-    </Flex>
-  </Flex>
+type NavButtonProps = {
+  onNote: () => void;
+};
+
+export const NavButton = ({ onNote }: NavButtonProps) => (
+  <Container>
+    <Item>
+      <Flex
+        width="56px"
+        height="56px"
+        flexDirection="row"
+        justifyContent="center"
+        alignItems="center"
+        onClick={onNote}
+        style={{
+          border: `1px solid ${styleToken.color.gray300}`,
+          borderRadius: '50%',
+          cursor: 'pointer',
+        }}
+      >
+        <img src="/src/assets/note/add_memo.png" alt="새로운 노트 작성" width={25} height={25} />
+      </Flex>
+    </Item>
+  </Container>
 );
+
+const Container = styled.div`
+  width: 100%;
+  flex-basis: auto;
+  padding: 0;
+  margin: 19px 0 0 auto;
+`;
+
+const Item = styled(Flex)`
+  width: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/shared/components/NavContent/NavContent.tsx b/src/shared/components/NavContent/NavContent.tsx
index 6a9cb46..18349d5 100644
--- a/src/shared/components/NavContent/NavContent.tsx
+++ b/src/shared/components/NavContent/NavContent.tsx
@@ -1,33 +1,105 @@
 import { Flex } from '@chakra-ui/react';
 import styled from '@emotion/styled';
-import { Typography } from '@/shared';
+import { styleToken, Typography } from '@/shared';
 
-export const NavContent = () => (
+type NavContentProps = {
+  onHome: () => void;
+  onTrash: () => void;
+};
+
+export const NavContent = ({ onHome, onTrash }: NavContentProps) => (
   <Container>
-    <Flex width="100%" height="auto" flexDirection="column" justifyContent="center" alignItems="flex-start" gap="12px">
-      <Flex
-        flexDirection="row"
-        justifyContent="flex-start"
-        alignItems="center"
-        style={{
-          cursor: 'pointer',
-        }}
-      >
-        <img src="/src/assets/icon/home.svg" alt="홈" width={20} height={20} />
-        <Typography
-          variant="subtitle1"
-          style={{
-            padding: '0 10px',
-          }}
-        >
-          홈
-        </Typography>
-      </Flex>
+    <Flex
+      width="100%"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="flex-start"
+      style={{
+        margin: '31px 0 0',
+      }}
+    >
+      <ItemContainer onClick={onHome}>
+        <Item>
+          <img src="/src/assets/icon/home.svg" alt="홈" width={15} height={15} />
+          <Typography
+            variant="subtitle1"
+            style={{
+              padding: '0 10px',
+            }}
+          >
+            홈
+          </Typography>
+        </Item>
+      </ItemContainer>
+      <ItemContainer>
+        <Item>
+          <img src="/src/assets/icon/drop_folder.svg" alt="전체 노트" width={15} height={15} />
+          <Typography
+            variant="subtitle1"
+            fontWeight={600}
+            style={{
+              padding: '0 10px',
+            }}
+          >
+            전체 노트
+          </Typography>
+        </Item>
+      </ItemContainer>
+      <ItemContainer>
+        <Item>
+          <img src="/src/assets/icon/folder.svg" alt="기본 폴더" width={15} height={15} />
+          <Typography
+            variant="subtitle1"
+            style={{
+              padding: '0 10px',
+            }}
+          >
+            기본 폴더
+          </Typography>
+        </Item>
+      </ItemContainer>
+      <ItemContainer onClick={onTrash}>
+        <Item>
+          <img src="/src/assets/icon/trash.svg" alt="휴지통" width={15} height={15} />
+          <Typography
+            variant="subtitle1"
+            style={{
+              padding: '0 10px',
+            }}
+          >
+            휴지통
+          </Typography>
+        </Item>
+      </ItemContainer>
     </Flex>
   </Container>
 );
 
-const Container = styled.div`
-  padding: 17px 0 15px 22px;
+const Container = styled(Flex)`
+  height: 100%;
+  flex-direction: column;
+`;
+
+const ItemContainer = styled(Flex)`
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
   height: auto;
+  padding: 0 12px 0 22px;
+  min-height: 33px;
+  cursor: pointer;
+
+  :hover {
+    background-color: ${styleToken.color.hover};
+  }
+`;
+
+const Item = styled(Flex)`
+  width: 100%;
+  cursor: pointer;
+  padding: 2px 2px 2px 0;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
 `;
diff --git a/src/shared/components/NavFooter/NavFooter.tsx b/src/shared/components/NavFooter/NavFooter.tsx
index f9ab162..451234f 100644
--- a/src/shared/components/NavFooter/NavFooter.tsx
+++ b/src/shared/components/NavFooter/NavFooter.tsx
@@ -9,45 +9,33 @@ type NavFooterProps = {
 
 export const NavFooter = ({ onSetting, onLogout }: NavFooterProps) => (
   <Container>
-    <Flex width="100%" height="auto" flexDirection="column" justifyContent="center" alignItems="flex-start" gap="14px">
-      <Flex
-        flexDirection="row"
-        justifyContent="flex-start"
-        alignItems="center"
-        onClick={onSetting}
-        style={{
-          cursor: 'pointer',
-        }}
-      >
-        <img src="/src/assets/icon/setting.svg" alt="서비스 설정" width={20} height={20} />
-        <Typography
-          variant="subtitle1"
-          style={{
-            marginLeft: '7px',
-          }}
-        >
-          서비스 설정
-        </Typography>
-      </Flex>
-      <Flex
-        flexDirection="row"
-        justifyContent="flex-start"
-        alignItems="center"
-        onClick={onLogout}
-        style={{
-          cursor: 'pointer',
-        }}
-      >
-        <img src="/src/assets/icon/signout.png" alt="로그아웃" width={20} height={20} />
-        <Typography
-          variant="subtitle1"
-          style={{
-            marginLeft: '7px',
-          }}
-        >
-          로그아웃
-        </Typography>
-      </Flex>
+    <Flex width="100%" height="auto" flexDirection="column" justifyContent="center" alignItems="flex-start">
+      <ItemContainer onClick={onSetting}>
+        <Item>
+          <img src="/src/assets/icon/setting.svg" alt="서비스 설정" width={20} height={20} />
+          <Typography
+            variant="subtitle1"
+            style={{
+              marginLeft: '7px',
+            }}
+          >
+            서비스 설정
+          </Typography>
+        </Item>
+      </ItemContainer>
+      <ItemContainer onClick={onLogout}>
+        <Item>
+          <img src="/src/assets/icon/signout.png" alt="로그아웃" width={20} height={20} />
+          <Typography
+            variant="subtitle1"
+            style={{
+              marginLeft: '7px',
+            }}
+          >
+            로그아웃
+          </Typography>
+        </Item>
+      </ItemContainer>
     </Flex>
   </Container>
 );
@@ -55,3 +43,17 @@ export const NavFooter = ({ onSetting, onLogout }: NavFooterProps) => (
 const Container = styled.div`
   padding: 17px 0 15px 22px;
 `;
+
+const ItemContainer = styled(Flex)`
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: auto;
+  min-height: 33px;
+  cursor: pointer;
+`;
+
+const Item = styled(Flex)`
+  padding: 2px 2px 2px 0;
+`;
diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
index 13f4629..779ca42 100644
--- a/src/shared/components/index.ts
+++ b/src/shared/components/index.ts
@@ -6,6 +6,7 @@ export * from './Button/index';
 export * from './Error/index';
 export * from './Input/index';
 export * from './Layout/index';
+export * from './Nav/index';
 export * from './NavButton/index';
 export * from './NavContent/index';
 export * from './NavFooter/index';
diff --git a/src/shared/constants/config.ts b/src/shared/constants/config.ts
index 0e3e3a7..77760c2 100644
--- a/src/shared/constants/config.ts
+++ b/src/shared/constants/config.ts
@@ -2,5 +2,5 @@ export const RUNTIME_ENV = process.env.NODE_ENV === 'development' ? 'development
 
 export const BASE_URL = {
   development: 'http://dev.api.ai-review.site',
-  production: 'http://dev.api.ai-review.site',
+  production: 'http://api.ai-review.site',
 };
diff --git a/src/shared/constants/path.ts b/src/shared/constants/path.ts
index bc93723..d95ec58 100644
--- a/src/shared/constants/path.ts
+++ b/src/shared/constants/path.ts
@@ -5,6 +5,8 @@ export const PATH = {
   OAUTH_KAKAO: '/oauth/kakao',
   OAUTH_NAVER: '/oauth/naver',
   HOME: '/home',
+  NOTE: '/note',
+  TRASH: '/trash',
   SETTING: '/setting',
   ACCOUNT: '/setting/account',
 };
diff --git a/src/shared/styles/styleToken.ts b/src/shared/styles/styleToken.ts
index f01afcd..9a44fe2 100644
--- a/src/shared/styles/styleToken.ts
+++ b/src/shared/styles/styleToken.ts
@@ -9,6 +9,7 @@ const colors = {
   gray600: '#131313',
   shadow: '#0000003F',
   background: '#F1F4F8',
+  hover: '#F7F7F7',
   error: '#FF003E',
   naver: '#03C75A',
   kakao: '#FEE500',