feat: update directory (picktoss#276)

* 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

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' && (
               <>
                 {/* 폴더 이름 바꾸기 */}
-                <SetDirectoryNameDialog
-                  triggerComponent={
-                    <DropdownMenuItem
-                      className="w-[240px] cursor-pointer border-t border-border-divider px-[20px] py-[16px]"
-                      onSelect={(e) => e.preventDefault()}
-                    >
-                      <Text
-                        typography="subtitle2-medium"
-                        className="flex w-full items-center justify-between"
-                      >
-                        폴더 이름 바꾸기
-                        <Icon name="write-line" className="size-[20px]" />
-                      </Text>
-                    </DropdownMenuItem>
-                  }
-                  title="폴더 이름 바꾸기"
-                  onConfirm={() => {}}
-                  confirmText="저장"
-                  prev={{ name: selectedDirectory.name, emoji: selectedDirectory.emoji }}
+                <UpdateDirectoryDialog
+                  directoryId={selectedDirectoryId}
+                  prevName={selectedDirectory.name}
+                  prevEmoji={selectedDirectory.emoji}
                 />
 
                 {/* 폴더 삭제 */}

src/features/directory/components/set-directory-name-dialog/index.tsx → 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 (
-    <Dialog>
-      <DialogTrigger asChild>{triggerComponent}</DialogTrigger>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <DropdownMenuItem
+          className="w-[240px] cursor-pointer border-t border-border-divider px-[20px] py-[16px]"
+          onSelect={(e) => e.preventDefault()}
+        >
+          <Text typography="subtitle2-medium" className="flex w-full items-center justify-between">
+            폴더 이름 바꾸기
+            <Icon name="write-line" className="size-[20px]" />
+          </Text>
+        </DropdownMenuItem>
+      </DialogTrigger>
 
       <DialogContent
         className="flex min-h-[190px] w-[280px] flex-col items-center justify-between rounded-[16px] bg-background-base-01"
         displayCloseButton={false}
       >
-        <DialogTitle className="mb-[32px] w-full text-subtitle2-bold">{title}</DialogTitle>
+        <DialogTitle className="mb-[32px] w-full text-subtitle2-bold">폴더 이름 바꾸기</DialogTitle>
 
         <div className="flex h-[40px] w-full">
           <DropdownMenu>
-            <DropdownMenuTrigger>
+            <DropdownMenuTrigger className="outline-none">
               <div className="flex-center mr-[10px] size-[40px] rounded-[8px] bg-background-base-02 text-xl">
                 {emoji}
               </div>
@@ -70,7 +87,7 @@ const SetDirectoryNameDialog = ({
           </DropdownMenu>
 
           <input
-            className="grow border-b border-border-divider py-[10px]"
+            className="grow border-b border-border-divider py-[10px] outline-none"
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="폴더 이름"
@@ -82,18 +99,15 @@ const SetDirectoryNameDialog = ({
             <button className="p-[4px] text-button-text-tertiary">취소</button>
           </DialogClose>
           <button
-            onClick={onConfirm}
-            className={cn(
-              'ml-[21px] p-[4px] text-button-text-primary',
-              confirmText.includes('삭제') && 'text-button-text-critical'
-            )}
+            onClick={handleUpdateDirectory}
+            className={cn('ml-[21px] p-[4px] text-button-text-primary')}
           >
-            {confirmText}
+            저장
           </button>
         </div>
       </DialogContent>
     </Dialog>
   )
 }
 
-export default SetDirectoryNameDialog
+export default UpdateDirectoryDialog