feat: 전체 노트 조회 페이지 (#14)

* feat: 전체 노트 조회 페이지 네비게이션 구현 * feat: 홈, 전체노트, 휴지통 페이지 별 노트 UI 구현 * feat: 전체노트, 휴지통 페이지 노트 체크박스 UI 구현
review-with-ai · Aug 14, 2024 · 38d3e61 · 38d3e61
1 parent 58c182c
commit 38d3e61
Show file tree

Hide file tree

Showing 21 changed files with 581 additions and 148 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/package.json b/package.json
@@ -18,6 +18,8 @@
     "generate-barrels": "barrelsby --config barrels-config.json"
   },
   "dependencies": {
+    "@chakra-ui/icon": "^3.2.0",
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
@@ -31,6 +33,7 @@
     "react-calendar": "^5.0.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.5",
+    "react-icons": "^5.3.0",
     "react-router-dom": "^6.23.1",
     "yup": "^1.4.0",
     "zustand": "^4.5.2"

diff --git a/src/assets/icon/rect.svg b/src/assets/icon/rect.svg
diff --git a/src/pages/allNote/AllNote.tsx b/src/pages/allNote/AllNote.tsx
@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { Button, Checkbox, Flex, Image, Stack } from '@chakra-ui/react';
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+import { BaseButton, Body, Nav, NoteList, PATH, styleToken, Typography } from '@/shared';
+
+export const AllNote = () => {
+  const navigate = useNavigate();
+  const [checkedItems, setCheckedItems] = useState([false, false]);
+
+  const allChecked = checkedItems.every(Boolean);
+  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
+  // https://v2.chakra-ui.com/docs/components/checkbox#indeterminate
+
+  const handleNewNote = () => {
+    navigate(PATH.NOTE);
+  };
+
+  return (
+    <>
+      <Nav />
+      <Body>
+        <Container>
+          <Flex
+            flexDirection="row"
+            justify="space-between"
+            align="center"
+            width="100%"
+            style={{
+              padding: '29px 35px 28px 47px',
+            }}
+          >
+            <Typography variant="h1" fontWeight={400}>
+              전체 노트
+            </Typography>
+            <BaseButton type="button" theme="gray" onClick={handleNewNote}>
+              <Typography variant="subtitle2">노트 만들기</Typography>
+            </BaseButton>
+          </Flex>
+          <Flex alignItems="center" margin="0 0 1px 8px">
+            <Checkbox
+              padding="16px 14px 16px 17px"
+              isChecked={allChecked}
+              isIndeterminate={isIndeterminate}
+              onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
+            />
+            <Stack direction="row" spacing={4}>
+              <Button
+                colorScheme="blackAlpha"
+                variant="outline"
+                height="32px"
+                padding="0 11px"
+                borderColor={styleToken.color.gray200}
+              >
+                <Image src="/src/assets/icon/share.svg" alt="노트 이동" width="16px" marginRight="6px" />
+                <Typography variant="subtitle1">노트 이동</Typography>
+              </Button>
+              <Button
+                colorScheme="blackAlpha"
+                variant="outline"
+                height="32px"
+                padding="0 11px"
+                borderColor={styleToken.color.gray200}
+              >
+                <Image src="/src/assets/icon/trash.svg" alt="휴지통으로 이동" width="16px" marginRight="6px" />
+                <Typography variant="subtitle1">휴지통으로 이동</Typography>
+              </Button>
+            </Stack>
+          </Flex>
+          <NoteList noteType="all" />
+        </Container>
+      </Body>
+    </>
+  );
+};
+
+const Container = styled.div`
+  height: 100%;
+  width: 100%;
+`;
diff --git a/src/pages/allNote/index.ts b/src/pages/allNote/index.ts
@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './AllNote';
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import styled from '@emotion/styled';
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import '@/shared/components/Calendar/CustomCalendar.css';
@@ -17,8 +18,9 @@ export const Home = () => {
     <>
       <Nav />
       <Body>
-        <h1>home</h1>
-        <NoteList />
+        <Container>
+          <NoteList noteType="home" />
+        </Container>
       </Body>
       <HomeAside>
         <Calendar
@@ -33,3 +35,10 @@ export const Home = () => {
     </>
   );
 };
+
+const Container = styled.div`
+  height: 100%;
+  width: 100%;
+  max-width: 1182px;
+  padding: 0 35px 0 47px;
+`;
diff --git a/src/pages/index.ts b/src/pages/index.ts
@@ -3,6 +3,7 @@
  */
 
 export * from './Main';
+export * from './allNote/index';
 export * from './auth/index';
 export * from './home/index';
 export * from './note/index';