From 9cf423c99243a066b5af19abb44159a972a95af5 Mon Sep 17 00:00:00 2001 From: rabyeoljji Date: Sun, 24 Nov 2024 06:26:48 +0000 Subject: [PATCH] refactor: document type (#271) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../document/[id]/(main)/@header/default.tsx | 2 +- .../document/[id]/modify/@header/default.tsx | 17 ++++++-- .../(routes)/document/[id]/modify/layout.tsx | 11 +++-- .../components/document-type-icon.tsx | 2 +- .../swipeable-document-card/index.tsx | 2 +- .../modify/components/visual-editor.tsx | 2 +- src/features/pages/documents-in-directory.tsx | 2 +- src/features/pages/modify-document.tsx | 2 +- .../search/components/search-item/index.tsx | 2 +- src/requests/document/hooks.ts | 4 +- src/requests/document/index.tsx | 40 ++++++++++++------- src/types/document.d.ts | 27 ++++++++----- 12 files changed, 73 insertions(+), 40 deletions(-) diff --git a/src/app/(routes)/document/[id]/(main)/@header/default.tsx b/src/app/(routes)/document/[id]/(main)/@header/default.tsx index 323ee536..2158c6a7 100644 --- 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={ - {data?.name} 노트와{' '} + {data?.documentName} 노트와{' '} {data?.totalQuizCount}개의 문제가{' '}
모두 삭제됩니다. diff --git a/src/app/(routes)/document/[id]/modify/@header/default.tsx b/src/app/(routes)/document/[id]/modify/@header/default.tsx index 212e0ab4..f7df524b 100644 --- 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} - diff --git a/src/app/(routes)/document/[id]/modify/layout.tsx b/src/app/(routes)/document/[id]/modify/layout.tsx index 1c77c5a5..08b68b0d 100644 --- 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 = ({ header, children }) => { return ( - - {header} - {children} - + + + {header} + {children} + + ) } diff --git a/src/features/document/components/document-type-icon.tsx b/src/features/document/components/document-type-icon.tsx index 622df959..bb865344 100644 --- 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 index 09f95cc9..3742ee0d 100644 --- 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 index e89754dc..9c96df70 100644 --- 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 index aa424c6a..65e942e7 100644 --- 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 index 51cfc1e4..56c00f5d 100644 --- a/src/features/pages/modify-document.tsx +++ b/src/features/pages/modify-document.tsx @@ -22,7 +22,7 @@ const ModifyDocument = () => { return ( <> - +
diff --git a/src/features/search/components/search-item/index.tsx b/src/features/search/components/search-item/index.tsx index 94512dcb..bf7e6594 100644 --- 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 index 36f6505b..74cd5036 100644 --- 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 index 81f4f3f4..2a662acc 100644 --- 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(API_ENDPOINTS.DOCUMENT.GET.BY_ID(documentId), { - headers: { - Authorization: `Bearer ${session?.user.accessToken}`, - }, - }) + const { data } = await http.get( + 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 index 254ba7be..20fba261 100644 --- 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