feat: 휴지통 페이지, 네비게이션 UI 구현

review-with-ai · Jul 20, 2024 · 2178bb4 · 2178bb4
1 parent a775a24
commit 2178bb4
Show file tree

Hide file tree

Showing 18 changed files with 325 additions and 108 deletions.
diff --git a/src/assets/icon/drop_folder.svg b/src/assets/icon/drop_folder.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './Trash';
diff --git 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
@@ -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
@@ -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
@@ -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;
+`;