fix: update document (picktoss#278)

* 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

* fix: document markdown debugging

* refactor: document type

* refactor: 타입명 수정

* fix: modify document

* fix: merge

* feat: move document

* fix: default(기본 폴더) => 전체 노트

* feat: delete document & move document refactoring

+ fix: directory globar directory

* fix: mutation

* feat: update directory

* fix: update document

src/app/(routes)/document/[id]/modify/@header/default.tsx

@@ -4,16 +4,23 @@ import { useDirectoryContext } from '@/features/directory/contexts/directory-con
 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 { useToast } from '@/shared/hooks/use-toast'
+import { queries } from '@/shared/lib/tanstack-query/query-keys'
 import { cn } from '@/shared/lib/utils'
+import { useQuery } from '@tanstack/react-query'
 import { useParams, useRouter } from 'next/navigation'
 
 const Header = () => {
   const { id } = useParams()
   const router = useRouter()
+
+  const { toast } = useToast()
+
+  const { data } = useQuery(queries.document.item(Number(id)))
   const { mutate: updateDocumentMutate } = useUpdateDocument(Number(id))
+
   const { documentTitle: title, editorMarkdownContent: content } = useEditDocumentContext()
-  const { selectedDirectory } = useDirectoryContext()
+  const { globalDirectoryId } = useDirectoryContext()
 
   const handleClickSave = (id: number, title: string, content: string) => {
     if (title.trim().length === 0 || content.trim().length === 0) {
@@ -24,15 +31,14 @@ const Header = () => {
     const blob = new Blob([content], { type: 'text/markdown' })
     const file = new File([blob], `${title}.md`, { type: 'text/markdown' })
 
-    updateDocumentMutate(
-      { documentId: id, requestBody: { name: title, file } },
-      {
-        onSuccess: () => {
-          toast({ description: '노트가 수정되었어요' })
-          router.push('/document/' + String(id))
-        },
-      }
-    )
+    const updatePayload = { documentId: id, requestBody: { name: title, file } }
+
+    updateDocumentMutate(updatePayload, {
+      onSuccess: () => {
+        router.push('/document/' + String(id))
+        toast({ description: '노트가 수정되었어요' })
+      },
+    })
   }
 
   return (
@@ -46,7 +52,7 @@ const Header = () => {
           <EditCancelDialog />
 
           <div className="rounded-full bg-background-base-02 px-[16px] py-[5px] text-text1-medium">
-            {selectedDirectory?.emoji ?? ''} {selectedDirectory?.name ?? '전체 노트'}
+            {data?.directory.id === globalDirectoryId ? '전체 노트' : data?.directory.name}
           </div>
 
           <button

src/requests/document/hooks.ts

@@ -3,9 +3,10 @@
 import { useMutation } from '@tanstack/react-query'
 import { useSession } from 'next-auth/react'
 import { createDocument } from './create-document'
-import { deleteDocument, moveDocument, updateDocument } from '.'
+import { deleteDocument, moveDocument } from '.'
 import { queries } from '@/shared/lib/tanstack-query/query-keys'
 import { getQueryClient } from '@/shared/lib/tanstack-query/client'
+import { updateDocument } from './update-document'
 
 /**
  * 문서 생성 Hook
@@ -23,13 +24,15 @@ export const useCreateDocument = () => {
  * 문서 수정 Hook
  */
 export const useUpdateDocument = (documentId: number) => {
+  const { data: session } = useSession()
   const queryClient = getQueryClient()
 
   return useMutation({
     mutationFn: (payload: { documentId: number; requestBody: Document.Request.UpdateContent }) =>
-      updateDocument(payload.documentId, payload.requestBody),
+      updateDocument(payload.documentId, payload.requestBody, session?.user.accessToken || ''),
     onSuccess: async () => {
       // 문서 정보 갱신
+      await queryClient.invalidateQueries(queries.document.list())
       await queryClient.invalidateQueries(queries.document.item(documentId))
     },
   })

src/requests/document/index.tsx

@@ -55,36 +55,6 @@ export const fetchDocumentDetail = async (documentId: number) => {
   }
 }
 
-export const updateDocument = async (
-  documentId: number,
-  requestBody: Document.Request.UpdateContent
-) => {
-  try {
-    const session = await auth()
-
-    const formData = new FormData()
-    formData.append('name', requestBody.name)
-    formData.append('file', requestBody.file)
-
-    const response = await http.patch(
-      API_ENDPOINTS.DOCUMENT.PATCH.UPDATE_CONTENT(documentId),
-      formData,
-      {
-        headers: {
-          Authorization: `Bearer ${session?.user.accessToken}`,
-          'Content-Type': 'multipart/form-data',
-        },
-      }
-    )
-
-    // eslint-disable-next-line no-console
-    console.log(response) // 디버깅용
-  } catch (error: unknown) {
-    console.error(error)
-    throw error
-  }
-}
-
 export const moveDocument = async (requestBody: Document.Request.MoveDocument) => {
   try {
     const session = await auth()

src/requests/document/update-document.ts

@@ -0,0 +1,36 @@
+'use client'
+
+import { API_ENDPOINTS } from '@/shared/configs/endpoint'
+import { http } from '@/shared/lib/axios/http'
+
+export const updateDocument = async (
+  documentId: number,
+  requestBody: Document.Request.UpdateContent,
+  accessToken: string
+) => {
+  const formData = new FormData()
+
+  const blob = new Blob([requestBody.file], { type: 'text/markdown' })
+  const file = new File([blob], `${requestBody.name}.md`, { type: 'text/markdown' })
+
+  formData.append('file', file)
+  formData.append('name', requestBody.name)
+
+  try {
+    const response = await http.patch(
+      API_ENDPOINTS.DOCUMENT.PATCH.UPDATE_CONTENT(documentId),
+      formData,
+      {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    )
+
+    // eslint-disable-next-line no-console
+    console.log(response) // 디버깅용
+  } catch (error: unknown) {
+    throw error
+  }
+}