From 504aaccb11afc080a02294773113461fc702cc2a Mon Sep 17 00:00:00 2001 From: rabyeoljji Date: Tue, 26 Nov 2024 07:44:54 +0000 Subject: [PATCH] feat: update directory (#276) 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 * fix: merge * feat: move document * fix: default(기본 폴더) => 전체 노트 * feat: delete document & move document refactoring + fix: directory globar directory * fix: mutation * feat: update directory --- .../components/directory-menu-dots/index.tsx | 25 ++---- .../index.stories.tsx | 71 ----------------- .../index.tsx | 78 +++++++++++-------- 3 files changed, 51 insertions(+), 123 deletions(-) delete mode 100644 src/features/directory/components/set-directory-name-dialog/index.stories.tsx rename src/features/directory/components/{set-directory-name-dialog => update-directory-dialog}/index.tsx (52%) diff --git a/src/features/directory/components/directory-menu-dots/index.tsx b/src/features/directory/components/directory-menu-dots/index.tsx index 7b9ecf23..0ec7addd 100644 --- a/src/features/directory/components/directory-menu-dots/index.tsx +++ b/src/features/directory/components/directory-menu-dots/index.tsx @@ -8,11 +8,11 @@ import { DropdownMenuTrigger, } from '@/shared/components/ui/dropdown-menu' import Text from '@/shared/components/ui/text' -import SetDirectoryNameDialog from '../set-directory-name-dialog' import { useDocumentContext } from '../../../document/contexts/document-context' import ConfirmDialogWidget from '@/widget/confirm-dialog' import { useDirectoryContext } from '../../contexts/directory-context' import { useDeleteDirectory } from '@/requests/directory/hooks' +import UpdateDirectoryDialog from '../update-directory-dialog' const DirectoryMenuDots = () => { const { selectedDirectory, selectedDirectoryId } = useDirectoryContext() @@ -49,25 +49,10 @@ const DirectoryMenuDots = () => { (selectedDirectory.tag !== 'DEFAULT' && ( <> {/* 폴더 이름 바꾸기 */} - e.preventDefault()} - > - - 폴더 이름 바꾸기 - - - - } - title="폴더 이름 바꾸기" - onConfirm={() => {}} - confirmText="저장" - prev={{ name: selectedDirectory.name, emoji: selectedDirectory.emoji }} + {/* 폴더 삭제 */} diff --git a/src/features/directory/components/set-directory-name-dialog/index.stories.tsx b/src/features/directory/components/set-directory-name-dialog/index.stories.tsx deleted file mode 100644 index 1c72909c..00000000 --- a/src/features/directory/components/set-directory-name-dialog/index.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' -import SetDirectoryNameDialog from '.' -import Text from '@/shared/components/ui/text' -import Icon from '@/shared/components/custom/icon' - -const meta = { - title: 'document/SetDirectoryNameDialog', - component: SetDirectoryNameDialog, - parameters: { - layout: 'centered', - }, - tags: ['autodocs'], - argTypes: { - title: { control: 'text', description: '다이얼로그 제목' }, - confirmText: { control: 'text', description: '다이얼로그의 확인 버튼에 들어갈 텍스트' }, - prev: { - control: 'object', - defaultValue: { name: '기존 폴더명', emoji: '📁' }, - description: '폴더 이름 변경일 경우 기존 정보', - }, - }, - decorators: [ - (Story) => ( -
- -
- ), - ], -} satisfies Meta - -export default meta -type Story = StoryObj - -// 폴더 생성 -export const Create: Story = { - render: (args) => ( - - - 폴더 추가 - - } - title={'폴더 만들기'} - onConfirm={() => {}} - confirmText={'만들기'} - /> - ), -} - -// 폴더 이름 수정 -export const Modify: Story = { - render: (args) => ( - - - 폴더 이름 바꾸기 - - - - } - title={'폴더 이름 바꾸기'} - onConfirm={() => {}} - confirmText={'저장'} - prev={{ name: '전공 공부', emoji: '📊' }} - /> - ), -} diff --git a/src/features/directory/components/set-directory-name-dialog/index.tsx b/src/features/directory/components/update-directory-dialog/index.tsx similarity index 52% rename from src/features/directory/components/set-directory-name-dialog/index.tsx rename to src/features/directory/components/update-directory-dialog/index.tsx index b0910025..76cc86e4 100644 --- a/src/features/directory/components/set-directory-name-dialog/index.tsx +++ b/src/features/directory/components/update-directory-dialog/index.tsx @@ -1,3 +1,5 @@ +import { useUpdateDirectoryInfo } from '@/requests/directory/hooks' +import Icon from '@/shared/components/custom/icon' import { Dialog, DialogClose, @@ -8,50 +10,65 @@ import { import { DropdownMenu, DropdownMenuContent, + DropdownMenuItem, DropdownMenuTrigger, } from '@/shared/components/ui/dropdown-menu' +import Text from '@/shared/components/ui/text' import { cn } from '@/shared/lib/utils' import EmojiPicker from 'emoji-picker-react' -import { useEffect, useState } from 'react' +import { useState } from 'react' interface Props { - triggerComponent: React.ReactNode - title: string - onConfirm: () => void - confirmText: string - prev?: { name: string; emoji: string } + directoryId: number | null + prevName: string + prevEmoji: string } -const SetDirectoryNameDialog = ({ - triggerComponent, - title, - onConfirm, - confirmText, - prev, -}: Props) => { - const [name, setName] = useState('') - const [emoji, setEmoji] = useState('📁') +const UpdateDirectoryDialog = ({ directoryId, prevName, prevEmoji }: Props) => { + const [open, setOpen] = useState(false) - useEffect(() => { - if (prev) { - setName(prev.name) - setEmoji(prev.emoji) + const [name, setName] = useState(prevName ?? '') + const [emoji, setEmoji] = useState(prevEmoji ?? '📁') + + const { mutate: updateDirectoryMutate } = useUpdateDirectoryInfo() + + const handleUpdateDirectory = () => { + if (name.trim() === '' || !directoryId) { + return } - }, [prev]) + + updateDirectoryMutate({ + directoryId, + name, + emoji, + }) + + setOpen(false) + } return ( - - {triggerComponent} + + + e.preventDefault()} + > + + 폴더 이름 바꾸기 + + + + - {title} + 폴더 이름 바꾸기
- +
{emoji}
@@ -70,7 +87,7 @@ const SetDirectoryNameDialog = ({
setName(e.target.value)} placeholder="폴더 이름" @@ -82,13 +99,10 @@ const SetDirectoryNameDialog = ({
@@ -96,4 +110,4 @@ const SetDirectoryNameDialog = ({ ) } -export default SetDirectoryNameDialog +export default UpdateDirectoryDialog