feat: document (picktoss#268)

* feat: document card check * feat: query client for storybook * fix: merge and fix error * feat: directory id에 따른 documents 가져오기 + queries 적용 * fix: 불필요한 코드 삭제 * fix: build error * fix: import * fix: storybook * fix: expend buttons bug
rabyeoljji · Nov 22, 2024 · f81a0da · f81a0da
1 parent 6fd02ee
commit f81a0da
Show file tree

Hide file tree

Showing 37 changed files with 328 additions and 241 deletions.
diff --git a/src/app/(routes)/document/(create)/@header/default.tsx b/src/app/(routes)/document/(create)/@header/default.tsx
@@ -1,4 +1,4 @@
-import DirectorySelectDrawer from '@/features/document/components/directory-select-drawer'
+import DirectorySelectDrawer from '@/features/directory/components/directory-select-drawer'
 import GoBackButton from '@/shared/components/custom/go-back-button'
 import Text from '@/shared/components/ui/text'
 

diff --git a/src/app/(routes)/document/(create)/file/layout.tsx b/src/app/(routes)/document/(create)/file/layout.tsx
@@ -1,12 +1,13 @@
 import { FunctionComponent, PropsWithChildren } from 'react'
 import type { Metadata } from 'next'
+import { DirectoryProvider } from '@/features/directory/contexts/directory-context'
 
 export const metadata: Metadata = {}
 
 interface LayoutProps extends PropsWithChildren {}
 
 const Layout: FunctionComponent<LayoutProps> = ({ children }) => {
-  return <main>{children}</main>
+  return <DirectoryProvider>{children}</DirectoryProvider>
 }
 
 export default Layout
diff --git a/src/app/(routes)/document/(create)/file/page.tsx b/src/app/(routes)/document/(create)/file/page.tsx
@@ -1,7 +1,7 @@
 import Icon from '@/shared/components/custom/icon'
 import Text from '@/shared/components/ui/text'
-import { EditDocumentProvider } from '@/features/editor/context/edit-document-context'
-import TitleInput from '@/features/editor/components/title-input'
+import { EditDocumentProvider } from '@/features/modify/context/edit-document-context'
+import TitleInput from '@/features/modify/components/title-input'
 import FixedBottom from '@/shared/components/custom/fixed-bottom'
 import NewQuizDrawer from '@/features/quiz/components/new-quiz-drawer'
 import { Button } from '@/shared/components/ui/button'

diff --git a/src/app/(routes)/document/(create)/notion/page.tsx b/src/app/(routes)/document/(create)/notion/page.tsx
@@ -1,4 +1,4 @@
-import { EditDocumentProvider } from '@/features/editor/context/edit-document-context'
+import { EditDocumentProvider } from '@/features/modify/context/edit-document-context'
 import NewQuizDrawer from '@/features/quiz/components/new-quiz-drawer'
 import FixedBottom from '@/shared/components/custom/fixed-bottom'
 import Icon from '@/shared/components/custom/icon'

diff --git a/src/app/(routes)/document/(create)/ui/header.tsx b/src/app/(routes)/document/(create)/ui/header.tsx
@@ -1,4 +1,4 @@
-import DirectorySelectDrawer from '@/features/document/components/directory-select-drawer'
+import DirectorySelectDrawer from '@/features/directory/components/directory-select-drawer'
 import GoBackButton from '@/shared/components/custom/go-back-button'
 import Text from '@/shared/components/ui/text'
 

diff --git a/src/app/(routes)/document/(main)/@header/default.tsx b/src/app/(routes)/document/(main)/@header/default.tsx
@@ -5,18 +5,20 @@ import Text from '@/shared/components/ui/text'
 import { useEffect, useState } from 'react'
 import { cn } from '@/shared/lib/utils'
 import Link from 'next/link'
-import { useDirectoryContext } from '@/features/document/contexts/directory-context'
 import { Drawer, DrawerContent, DrawerTitle, DrawerTrigger } from '@/shared/components/ui/drawer'
 import SortIconBtn from '@/features/document/components/sort-icon-button'
-import DirectoryMenuDots from '@/features/document/components/directory-menu-dots'
+import DirectoryMenuDots from '@/features/directory/components/directory-menu-dots'
 import GoBackButton from '@/shared/components/custom/go-back-button'
 import { useDirectories } from '@/requests/directory/hooks'
 import CreateDirectoryDialog from '@/features/directory/components/create-directory-dialog'
+import { useDocumentContext } from '@/features/document/contexts/document-context'
+import { useDirectoryContext } from '@/features/directory/contexts/directory-context'
 
 // Header 컴포넌트
 const Header = () => {
   const { data } = useDirectories()
-  const { isSelectMode, setIsSelectMode } = useDirectoryContext()
+  const { selectedDirectory } = useDirectoryContext()
+  const { isSelectMode, setIsSelectMode } = useDocumentContext()
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
 
   return (
@@ -33,7 +35,7 @@ const Header = () => {
               <GoBackButton icon="cancel" onClick={() => setIsSelectMode(false)} />
 
               <Text as="span" typography="subtitle2-medium" className="ml-[35px]">
-                전공 공부
+                {selectedDirectory?.name}
               </Text>
               <Text as="span" typography="button4" className="text-button-text-primary">
                 전체 선택
@@ -75,7 +77,8 @@ interface Props {
 }
 
 const DirectorySelectDrawer = ({ isDrawerOpen, setIsDrawerOpen, directories }: Props) => {
-  const { selectedDirectoryId, setButtonHidden, setSelectedDirectoryId } = useDirectoryContext()
+  const { selectedDirectory, selectedDirectoryId, selectDirectoryId } = useDirectoryContext()
+  const { setButtonHidden } = useDocumentContext()
 
   useEffect(() => {
     if (isDrawerOpen) {
@@ -85,17 +88,19 @@ const DirectorySelectDrawer = ({ isDrawerOpen, setIsDrawerOpen, directories }: P
     }
   }, [isDrawerOpen, setButtonHidden])
 
-  const currentDirectory = directories.find((directory) => directory.id === selectedDirectoryId)
-  const totalNotes = directories.reduce((acc, directory) => acc + directory.documentCount, 0)
+  const handleDirectorySelect = (id: number | null) => {
+    selectDirectoryId(id)
+    setIsDrawerOpen(false)
+  }
 
   return (
     <>
       <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen} direction="top">
         <DrawerTrigger asChild>
           <button className="flex size-fit items-center">
             <h2 className="mr-[8px] text-title2">
-              {currentDirectory
-                ? `${currentDirectory.emoji} ${currentDirectory.name}`
+              {selectedDirectory
+                ? `${selectedDirectory.emoji ?? '📁'} ${selectedDirectory.name}`
                 : '전체 노트'}
             </h2>
             <Icon name="chevron-down" className="size-[20px]"></Icon>
@@ -109,13 +114,13 @@ const DirectorySelectDrawer = ({ isDrawerOpen, setIsDrawerOpen, directories }: P
         >
           <div className="flex h-fit flex-col bg-background-base-01">
             <div className="border-b border-border-divider">
-              <button className="w-full" onClick={() => setSelectedDirectoryId(null)}>
+              <button className="w-full" onClick={() => handleDirectorySelect(null)}>
                 <DrawerTitle className="mt-[24px] flex items-center justify-between px-[18px]">
                   <Text as="span" typography="subtitle2-medium">
                     전체 노트
                   </Text>
                   <Text as="span" typography="text1-medium" className="text-text-caption">
-                    노트 {totalNotes}개
+                    노트 {selectedDirectory?.documentCount}개
                   </Text>
                 </DrawerTitle>
               </button>
@@ -126,7 +131,7 @@ const DirectorySelectDrawer = ({ isDrawerOpen, setIsDrawerOpen, directories }: P
                   <button
                     key={directory.id}
                     className="flex items-center justify-between py-[10px]"
-                    onClick={() => setSelectedDirectoryId(directory.id)}
+                    onClick={() => handleDirectorySelect(directory.id)}
                   >
                     <Text
                       as="span"
@@ -135,7 +140,7 @@ const DirectorySelectDrawer = ({ isDrawerOpen, setIsDrawerOpen, directories }: P
                         directory.id === selectedDirectoryId && 'text-text-accent font-bold'
                       )}
                     >
-                      {`${directory.emoji || '📄'} ${directory.name}`}
+                      {`${directory.emoji ?? '📁'} ${directory.name}`}
                     </Text>
                     <Text as="span" typography="text1-medium" className="text-text-caption">
                       노트 {directory.documentCount}개

diff --git a/src/app/(routes)/document/(main)/layout.tsx b/src/app/(routes)/document/(main)/layout.tsx
@@ -1,7 +1,8 @@
 import { FunctionComponent, PropsWithChildren } from 'react'
-import type { Metadata } from 'next'
+import { Metadata } from 'next'
 import BottomNavLayout from '@/shared/components/custom/bottom-nav-layout'
-import { DirectoryProvider } from '@/features/document/contexts/directory-context'
+import { DocumentProvider } from '@/features/document/contexts/document-context'
+import { DirectoryProvider } from '@/features/directory/contexts/directory-context'
 
 export const metadata: Metadata = {}
 
@@ -13,10 +14,12 @@ const Layout: FunctionComponent<LayoutProps> = ({ header, children }) => {
   return (
     <BottomNavLayout where="퀴즈 노트">
       <DirectoryProvider>
-        <div className="flex h-[calc(100dvh-88px)] w-full flex-col overflow-hidden bg-background-base-02 text-text-primary">
-          {header}
-          {children}
-        </div>
+        <DocumentProvider>
+          <div className="flex h-[calc(100dvh-88px)] w-full flex-col overflow-hidden bg-background-base-02 text-text-primary">
+            {header}
+            {children}
+          </div>
+        </DocumentProvider>
       </DirectoryProvider>
     </BottomNavLayout>
   )

diff --git a/src/app/(routes)/document/[id]/(main)/@header/default.tsx b/src/app/(routes)/document/[id]/(main)/@header/default.tsx
@@ -15,15 +15,16 @@ import Link from 'next/link'
 import { useParams, useRouter } from 'next/navigation'
 import usePreviousPath from '@/shared/hooks/use-previous-path'
 import GoBackButton from '@/shared/components/custom/go-back-button'
-import { useGetDocumentDetail } from '@/requests/document/hooks'
 import { getRelativeTime } from '@/shared/utils/date'
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@/shared/lib/tanstack-query/query-keys'
 
 // Header 컴포넌트
 const Header = () => {
   const router = useRouter()
   const { id } = useParams()
   const { getPreviousPath } = usePreviousPath({ getCustomPath: true })
-  const { data } = useGetDocumentDetail(Number(id[0]))
+  const { data } = useQuery(queries.document.item(Number(id[0])))
 
   const handleClickCancel = () => {
     const previousPath = getPreviousPath()

diff --git a/src/app/(routes)/document/[id]/modify/@header/default.tsx b/src/app/(routes)/document/[id]/modify/@header/default.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import EditCancelDialog from '@/features/document/components/edit-cancel-dialog'
-import { useEditDocumentContext } from '@/features/editor/context/edit-document-context'
+import { useDirectoryContext } from '@/features/directory/contexts/directory-context'
+import EditCancelDialog from '@/features/modify/components/edit-cancel-dialog'
+import { useEditDocumentContext } from '@/features/modify/context/edit-document-context'
 import { useUpdateDocument } from '@/requests/document/hooks'
 import { toast } from '@/shared/hooks/use-toast'
 import { cn } from '@/shared/lib/utils'
@@ -12,6 +13,7 @@ const Header = () => {
   const router = useRouter()
   const { mutate: updateDocumentMutate } = useUpdateDocument()
   const { documentTitle: title, editorMarkdownContent: content } = useEditDocumentContext()
+  const { selectedDirectory } = useDirectoryContext()
 
   const handleClickSave = () => {
     if (title.trim().length === 0 || content.trim().length === 0) return
@@ -41,7 +43,7 @@ const Header = () => {
           <EditCancelDialog />
 
           <div className="rounded-full bg-background-base-02 px-[16px] py-[5px] text-text1-medium">
-            📊 전공 공부
+            {selectedDirectory?.emoji} {selectedDirectory?.name}
           </div>
 
           <button onClick={handleClickSave} className="text-button2 text-button-text-primary">

diff --git a/src/app/(routes)/document/[id]/modify/layout.tsx b/src/app/(routes)/document/[id]/modify/layout.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent, PropsWithChildren } from 'react'
 import type { Metadata } from 'next'
-import { EditDocumentProvider } from '@/features/editor/context/edit-document-context'
+import { EditDocumentProvider } from '@/features/modify/context/edit-document-context'
 
 export const metadata: Metadata = {}
 

diff --git a/src/app/(routes)/main/page.tsx b/src/app/(routes)/main/page.tsx
@@ -2,7 +2,7 @@ import Text from '@/shared/components/ui/text'
 import BOMB from '@/../../public/images/bomb.png'
 import RANDOM_QUIZ from '@/../../public/images/random-quiz.png'
 import Image from 'next/image'
-import { DirectoryProvider } from '@/features/document/contexts/directory-context'
+import { DocumentProvider } from '@/features/document/contexts/document-context'
 import AddDocumentMenu from '@/features/document/components/add-document-menu'
 import Link from 'next/link'
 import Icon from '@/shared/components/custom/icon'
@@ -87,9 +87,9 @@ const Home = () => {
         </div>
       </div>
 
-      <DirectoryProvider>
+      <DocumentProvider>
         <AddDocumentMenu />
-      </DirectoryProvider>
+      </DocumentProvider>
     </main>
   )
 }

diff --git a/...nts/directory-menu-dots/index.stories.tsx → ...nts/directory-menu-dots/index.stories.tsx b/...nts/directory-menu-dots/index.stories.tsx → ...nts/directory-menu-dots/index.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
 import DirectoryMenuDots from '.'
-import { DirectoryProvider } from '../../contexts/directory-context'
+import { DocumentProvider } from '@/features/document/contexts/document-context'
 
 const meta = {
   title: 'document/DirectoryMenuDots',
@@ -11,13 +11,13 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <DirectoryProvider>
+      <DocumentProvider>
         <div className="relative mx-auto max-w-mobile p-4">
           <div className="absolute bottom-0 right-0">
             <Story />
           </div>
         </div>
-      </DirectoryProvider>
+      </DocumentProvider>
     ),
   ],
 } satisfies Meta<typeof DirectoryMenuDots>

diff --git a/.../components/directory-menu-dots/index.tsx → .../components/directory-menu-dots/index.tsx b/.../components/directory-menu-dots/index.tsx → .../components/directory-menu-dots/index.tsx
@@ -8,12 +8,12 @@ import {
   DropdownMenuTrigger,
 } from '@/shared/components/ui/dropdown-menu'
 import Text from '@/shared/components/ui/text'
-import { useDirectoryContext } from '../../contexts/directory-context'
 import DirectoryDialog from '@/features/quiz/components/directory-dialog'
-import SetDirectoryNameDialog from '../../../directory/components/set-directory-name-dialog'
+import SetDirectoryNameDialog from '../set-directory-name-dialog'
+import { useDocumentContext } from '../../../document/contexts/document-context'
 
 const DirectoryMenuDots = () => {
-  const { setIsSelectMode } = useDirectoryContext()
+  const { setIsSelectMode } = useDocumentContext()
 
   return (
     <DropdownMenu>

diff --git a/...ponents/directory-select-drawer/index.tsx → ...ponents/directory-select-drawer/index.tsx b/...ponents/directory-select-drawer/index.tsx → ...ponents/directory-select-drawer/index.tsx
diff --git a/src/features/directory/contexts/directory-context.tsx b/src/features/directory/contexts/directory-context.tsx
@@ -8,7 +8,7 @@ interface DirectoryContextValues {
   selectedDirectory: Directory.Item | null
 
   selectedDirectoryId: number | null
-  selectDirectoryId: (id: number) => void
+  selectDirectoryId: (id: number | null) => void
 }
 
 const DirectoryContext = createContext<DirectoryContextValues | null>(null)

diff --git a/src/features/document/components/add-document-menu.tsx b/src/features/document/components/add-document-menu.tsx
@@ -4,10 +4,10 @@ import Text from '@/shared/components/ui/text'
 import DimmedBackground from './dimmed-background'
 import AnimatedButtons from './animate-buttons'
 import { cn } from '@/shared/lib/utils'
-import { useDirectoryContext } from '../contexts/directory-context'
+import { useDocumentContext } from '../contexts/document-context'
 
 const AddDocumentMenu = () => {
-  const { isExpandedBtns } = useDirectoryContext()
+  const { isExpandedBtns } = useDocumentContext()
 
   return (
     <div

diff --git a/src/features/document/components/add-first-document/index.tsx b/src/features/document/components/add-first-document/index.tsx
@@ -2,15 +2,15 @@
 
 import Icon from '@/shared/components/custom/icon'
 import Text from '@/shared/components/ui/text'
-import usePreviousPath from '@/shared/hooks/use-previous-path'
 import Link from 'next/link'
 
 const AddFirstDocument = ({ userName }: { userName: string }) => {
-  usePreviousPath()
-
   return (
     <Link
-      href={'document'}
+      href={{
+        pathname: 'document',
+        query: { ref: 'add-first-document' },
+      }}
       className="border-special mt-[12px] flex h-fit w-full items-center justify-between rounded-[20px] py-[22px] pl-[25px] pr-[22px]"
     >
       <div className="flex items-center">

diff --git a/src/features/document/components/animate-buttons/index.stories.tsx b/src/features/document/components/animate-buttons/index.stories.tsx
@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react'
 import { useEffect } from 'react'
-import { DirectoryProvider, useDirectoryContext } from '../../contexts/directory-context'
 import AnimatedButtons from '.'
+import { DocumentProvider, useDocumentContext } from '../../contexts/document-context'
 
 const AnimatedButtonsWithProvider = ({ isExpandedBtns }: { isExpandedBtns: boolean }) => {
-  const { setIsExpandedBtns } = useDirectoryContext()
+  const { setIsExpandedBtns } = useDocumentContext()
 
   useEffect(() => {
     setIsExpandedBtns(isExpandedBtns)
@@ -30,13 +30,13 @@ const meta = {
   },
   decorators: [
     (Story, context) => (
-      <DirectoryProvider initialValues={{ isExpandedBtns: context.args.isExpandedBtns }}>
+      <DocumentProvider initialValues={{ isExpandedBtns: context.args.isExpandedBtns }}>
         <div className="relative mx-auto h-[500px] max-w-mobile p-4">
           <div className="absolute bottom-0 right-0">
             <Story {...context.args} />
           </div>
         </div>
-      </DirectoryProvider>
+      </DocumentProvider>
     ),
   ],
 } satisfies Meta<typeof AnimatedButtonsWithProvider>

diff --git a/src/features/document/components/animate-buttons/index.tsx b/src/features/document/components/animate-buttons/index.tsx
@@ -5,18 +5,18 @@ import { Button, ButtonProps } from '@/shared/components/ui/button'
 import Icon, { IconProps } from '@/shared/components/custom/icon'
 import { useEffect, useState } from 'react'
 import { cn } from '@/shared/lib/utils'
-import { useDirectoryContext } from '../../contexts/directory-context'
 import Text from '@/shared/components/ui/text'
 import { useRouter } from 'next/navigation'
 import { addDocumentButtons } from '../../config'
+import { useDocumentContext } from '../../contexts/document-context'
 
 type Custom = number | 'plus' | 'cancel'
 
 // AnimatedButtons 컴포넌트
 const AnimatedButtons = () => {
   const router = useRouter()
   const [isFirstRender, setIsFirstRender] = useState(true)
-  const { buttonHidden, isExpandedBtns, setIsExpandedBtns } = useDirectoryContext()
+  const { buttonHidden, isExpandedBtns, setIsExpandedBtns } = useDocumentContext()
 
   useEffect(() => {
     setIsFirstRender(false)

diff --git a/src/features/document/components/directory-select-drawer/index.stories.tsx b/src/features/document/components/directory-select-drawer/index.stories.tsx