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 @@
+
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 = () => (
-
- home
-
+ <>
+
+
+ home
+
+
);
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 = () => (
+ <>
+
+ 새 노트
+
+);
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 (
<>
-
- Review with Ai
-
-
-
-
+
(
+ <>
+
+
+
+
+
+ 휴지통
+
+
+
+ 휴지통에 저장된 항목은 1달이 지나면 자동으로 완전히 삭제됩니다.
+
+
+
+
+);
+
+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: },
{ path: PATH.OAUTH_NAVER, element: },
{ path: PATH.HOME, element: },
+ { path: PATH.NOTE, element: },
+ { path: PATH.TRASH, element: },
{ path: PATH.SETTING, element: },
{ path: PATH.ACCOUNT, element: },
],
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 (
+
+
+
+ 복습할고양
+
+
+
+
+
+
+ );
+};
+
+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 = () => (
-
-
- 
-
-
+type NavButtonProps = {
+ onNote: () => void;
+};
+
+export const NavButton = ({ onNote }: NavButtonProps) => (
+
+ -
+
+
+
+
+
);
+
+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) => (
-
-
- 
-
- 홈
-
-
+
+
+ -
+
+
+ 홈
+
+
+
+
+ -
+
+
+ 전체 노트
+
+
+
+
+ -
+
+
+ 기본 폴더
+
+
+
+
+ -
+
+
+ 휴지통
+
+
+
);
-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) => (
-
-
- 
-
- 서비스 설정
-
-
-
- 
-
- 로그아웃
-
-
+
+
+ -
+
+
+ 서비스 설정
+
+
+
+
+ -
+
+
+ 로그아웃
+
+
+
);
@@ -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',