refactor: document type (picktoss#271)

* 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
rabyeoljji · Nov 24, 2024 · 9cf423c · 9cf423c
1 parent d5427e1
commit 9cf423c
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 40 deletions.
diff --git a/src/app/(routes)/document/[id]/(main)/@header/default.tsx b/src/app/(routes)/document/[id]/(main)/@header/default.tsx
@@ -132,7 +132,7 @@ const Header = () => {
                     title="노트를 삭제할까요?"
                     content={
                       <Text typography="text1-medium">
-                        {data?.name} 노트와{' '}
+                        {data?.documentName} 노트와{' '}
                         <span className="text-text-wrong">{data?.totalQuizCount}개의 문제</span>가{' '}
                         <br />
                         모두 삭제됩니다.

diff --git a/src/app/(routes)/document/[id]/modify/@header/default.tsx b/src/app/(routes)/document/[id]/modify/@header/default.tsx
@@ -15,14 +15,20 @@ const Header = () => {
   const { documentTitle: title, editorMarkdownContent: content } = useEditDocumentContext()
   const { selectedDirectory } = useDirectoryContext()
 
-  const handleClickSave = () => {
-    if (title.trim().length === 0 || content.trim().length === 0) return
+  const handleClickSave = (id: number, title: string, content: string) => {
+    // eslint-disable-next-line no-console
+    console.log(title, content)
+
+    if (title.trim().length === 0 || content.trim().length === 0) {
+      alert('제목과 내용을 입력해주세요')
+      return
+    }
 
     const blob = new Blob([content], { type: 'text/markdown' })
     const file = new File([blob], `${title}.md`, { type: 'text/markdown' })
 
     updateDocumentMutate(
-      { documentId: Number(id), request: { name: title, file } },
+      { documentId: id, requestBody: { name: title, file } },
       {
         onSuccess: () => {
           toast({ description: '노트가 수정되었어요' })
@@ -46,7 +52,10 @@ const Header = () => {
             {selectedDirectory?.emoji} {selectedDirectory?.name}
           </div>
 
-          <button onClick={handleClickSave} className="text-button2 text-button-text-primary">
+          <button
+            onClick={() => handleClickSave(Number(id), title, content)}
+            className="text-button2 text-button-text-primary"
+          >
             저장
           </button>
         </div>

diff --git a/src/app/(routes)/document/[id]/modify/layout.tsx b/src/app/(routes)/document/[id]/modify/layout.tsx
@@ -1,6 +1,7 @@
 import { FunctionComponent, PropsWithChildren } from 'react'
 import type { Metadata } from 'next'
 import { EditDocumentProvider } from '@/features/modify/context/edit-document-context'
+import { DirectoryProvider } from '@/features/directory/contexts/directory-context'
 
 export const metadata: Metadata = {}
 
@@ -10,10 +11,12 @@ interface LayoutProps extends PropsWithChildren {
 
 const Layout: FunctionComponent<LayoutProps> = ({ header, children }) => {
   return (
-    <EditDocumentProvider>
-      {header}
-      {children}
-    </EditDocumentProvider>
+    <DirectoryProvider>
+      <EditDocumentProvider>
+        {header}
+        {children}
+      </EditDocumentProvider>
+    </DirectoryProvider>
   )
 }
 

diff --git a/src/features/document/components/document-type-icon.tsx b/src/features/document/components/document-type-icon.tsx
@@ -2,7 +2,7 @@ import Icon from '@/shared/components/custom/icon'
 import { cn } from '@/shared/lib/utils'
 
 interface Props {
-  type: Document.Item['documentType']
+  type: Document.ItemInList['documentType']
   containerClassName: HTMLElement['className']
   iconClassName: HTMLElement['className']
 }

diff --git a/src/features/document/components/swipeable-document-card/index.tsx b/src/features/document/components/swipeable-document-card/index.tsx
@@ -20,7 +20,7 @@ import stripMarkdown from 'strip-markdown'
 
 interface DocumentProps {
   id: number
-  createType: Document.Item['documentType']
+  createType: Document.ItemInList['documentType']
   title: string
   content: string
   quizCount: number

diff --git a/src/features/modify/components/visual-editor.tsx b/src/features/modify/components/visual-editor.tsx
@@ -39,7 +39,7 @@ export default function VisualEditor({ prevContent }: VisualEditorProps) {
           css`
             &.ProseMirror {
               padding: 16px 20px;
-              margin-bottom: 100px;
+              padding-bottom: 100px;
               width: 100%;
               /* min-width: 100vw; */
               max-width: 430px;

diff --git a/src/features/pages/documents-in-directory.tsx b/src/features/pages/documents-in-directory.tsx
@@ -62,7 +62,7 @@ const DocumentsInDirectory = () => {
               quizCount={document.totalQuizCount}
               characterCount={document.characterCount}
               directory={document.directory.name}
-              className={cn(idx === 9 && 'mb-[30px]')}
+              className={cn(idx === data.documents.length - 1 && 'mb-[30px]')}
               reviewCount={document.reviewNeededQuizCount}
             />
           ))}

diff --git a/src/features/pages/modify-document.tsx b/src/features/pages/modify-document.tsx
@@ -22,7 +22,7 @@ const ModifyDocument = () => {
 
   return (
     <>
-      <TitleInput prevTitle={data?.name} />
+      <TitleInput prevTitle={data?.documentName} />
 
       <div className="sticky top-[54px] z-10 flex items-center justify-between bg-background-base-02 px-[16px] py-[11px]">
         <div className="flex items-center">

diff --git a/src/features/search/components/search-item/index.tsx b/src/features/search/components/search-item/index.tsx
@@ -5,7 +5,7 @@ import { cn } from '@/shared/lib/utils'
 import DocumentTypeIcon from '@/features/document/components/document-type-icon'
 
 interface Props {
-  createType: Document.Item['documentType']
+  createType: Document.ItemInList['documentType']
   documentTitle: string
   matchingSentence: string
   resultType: 'document' | 'quiz'

diff --git a/src/requests/document/hooks.ts b/src/requests/document/hooks.ts
@@ -18,7 +18,7 @@ export const useUpdateDocument = () => {
   const { data: session } = useSession()
 
   return useMutation({
-    mutationFn: (params: { documentId: number; request: Document.Request.UpdateContent }) =>
-      updateDocument(params.documentId, params.request, session?.user.accessToken || ''),
+    mutationFn: (params: { documentId: number; requestBody: Document.Request.UpdateContent }) =>
+      updateDocument(params.documentId, params.requestBody, session?.user.accessToken || ''),
   })
 }
diff --git a/src/requests/document/index.tsx b/src/requests/document/index.tsx
@@ -40,11 +40,14 @@ export const fetchDocumentDetail = async (documentId: number) => {
   try {
     const session = await auth()
 
-    const { data } = await http.get<Document.Item>(API_ENDPOINTS.DOCUMENT.GET.BY_ID(documentId), {
-      headers: {
-        Authorization: `Bearer ${session?.user.accessToken}`,
-      },
-    })
+    const { data } = await http.get<Document.DetailItem>(
+      API_ENDPOINTS.DOCUMENT.GET.BY_ID(documentId),
+      {
+        headers: {
+          Authorization: `Bearer ${session?.user.accessToken}`,
+        },
+      }
+    )
     return data
   } catch (error: unknown) {
     console.error(error)
@@ -54,18 +57,27 @@ export const fetchDocumentDetail = async (documentId: number) => {
 
 export const updateDocument = async (
   documentId: number,
-  request: Document.Request.UpdateContent,
+  requestBody: Document.Request.UpdateContent,
   accessToken: string
 ) => {
-  const params = { request }
-
   try {
-    await http.patch(API_ENDPOINTS.DOCUMENT.PATCH.UPDATE_CONTENT(documentId), null, {
-      params,
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    })
+    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 ${accessToken}`,
+          'Content-Type': 'multipart/form-data',
+        },
+      }
+    )
+
+    // eslint-disable-next-line no-console
+    console.log(response) // 디버깅용
   } catch (error: unknown) {
     console.error(error)
     throw error

diff --git a/src/types/document.d.ts b/src/types/document.d.ts
@@ -27,19 +27,27 @@ type Quiz = {
   quizType: QuizType
 }
 
-type DocumentItem = {
+type DocumentBase = {
   id: number
   documentType: CreateType
-  name: string
-  documentName?: string
   status: DocumentStatus
-  previewContent?: string
-  content: string
-  characterCount: number
   totalQuizCount: number
-  updatedAt: string
+  characterCount: number
   directory: Directory
+  updatedAt: string
+}
+
+type DocumentDetailItem = DocumentBase & {
+  documentName: string
+  content: string
   quizzes: Quiz[]
+}
+
+type DocumentListItem = DocumentBase & {
+  name: string
+  documentType: CreateType
+  previewContent: string
+  createdAt: string
   reviewNeededQuizCount: number
 }
 
@@ -159,8 +167,9 @@ interface SearchDocumentsResponse {
 }
 
 declare namespace Document {
-  type Item = DocumentItem
-  type List = DocumentItem[]
+  type DetailItem = DocumentDetailItem
+  type ItemInList = DocumentListItem
+  type List = DocumentListItem[]
   type Status = DocumentStatus
   type Sort = SortOption