diff --git a/src/apis/bookmark.ts b/src/apis/bookmark.ts
index 07172e4..bdccd9e 100644
--- a/src/apis/bookmark.ts
+++ b/src/apis/bookmark.ts
@@ -1,12 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import useAuthStore from '@/stores/authStore';
-import {
-  InfiniteData,
-  useInfiniteQuery,
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from '@tanstack/react-query';
+import { InfiniteData, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import { fetchData } from '.';
 import { default as apis, urlParams } from './api';
@@ -113,10 +107,17 @@ export const useSaveBookmark = () => {
 
   return useMutation<AxiosResponse, AxiosError, ISaveBookmarkDataType>({
     mutationFn: (data) => fetchData.post(url, data),
-    onSuccess: () =>
-      queryClient.invalidateQueries({
+    onSuccess: () => {
+      // 북마크 리스트 리패치
+      queryClient.removeQueries({
         queryKey: [apis.bookmark.bookmark_list],
-      }),
+      });
+
+      // 카테고리 리스트 리패치
+      queryClient.removeQueries({
+        queryKey: [apis.category.category_list],
+      });
+    },
   });
 };
 
@@ -164,22 +165,6 @@ export const fetchUploadImage = async (formData: FormData) => {
   return;
 };
 
-/**
- * 북마크 이미지 쌈네일
- */
-export const useGetThumbnailImage = (uuid?: string) => {
-  const url = apis.fileUpload.thumbnail(uuid ?? '');
-
-  return useQuery<AxiosResponse, AxiosError, any>({
-    queryKey: [url],
-    queryFn: () => fetchData.get(url),
-    select: (res) => res.data.result,
-    staleTime: 1000 * 60 * 60,
-    gcTime: 1000 * 60 * 60,
-    enabled: !!uuid,
-  });
-};
-
 interface BookmarkLikeDataType {
   bookMarkId: number;
   isFavorite: boolean;
diff --git a/src/components/BookmarkCard/index.tsx b/src/components/BookmarkCard/index.tsx
index 716056a..787032f 100644
--- a/src/components/BookmarkCard/index.tsx
+++ b/src/components/BookmarkCard/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useBookmarkLike, useGetThumbnailImage } from '@/apis/bookmark';
+import { useBookmarkLike } from '@/apis/bookmark';
 import { cn } from '@/lib/utils';
 import useToastStore from '@/stores/toastStore';
 import { MouseEvent, useState } from 'react';
@@ -38,7 +38,9 @@ const BookmarkCard = ({
   const { addToast } = useToastStore();
 
   // 썸네일 API 요청
-  useGetThumbnailImage(imageUUID);
+  // const path = apis.fileUpload.thumbnail(imageUUID ?? '');
+
+  const SEVER_URL = process.env.NEXT_PUBLIC_SERVER_URL;
 
   const { mutateAsync: mutateBookmarkLike } = useBookmarkLike();
   const [isLike, setIsLike] = useState(isFavorite);
@@ -80,7 +82,16 @@ const BookmarkCard = ({
           'group-hover:shadow-layer group-hover:-translate-y-8 transition-all duration-200',
         ])}
       >
-        {representImageUrl ? (
+        {imageUUID ? (
+          // 등록한 썸네일 이미지
+          <img
+            className='aspect-[296/180] object-cover'
+            src={`${SEVER_URL}/file/original/${imageUUID}`}
+            alt='썸네일'
+            width={650}
+          />
+        ) : representImageUrl ? (
+          // url 썸네일 이미지
           <img
             className='aspect-[296/180] object-cover'
             src={representImageUrl}
@@ -88,6 +99,7 @@ const BookmarkCard = ({
             width={650}
           />
         ) : (
+          // Default 이미지
           <img
             className='aspect-[296/180] object-cover'
             src={`/assets/image/empty_image_${getRandomNumber()}.png`}
diff --git a/src/components/common/Check/Check.stories.tsx b/src/components/common/Check/Check.stories.tsx
index f47df54..198542d 100644
--- a/src/components/common/Check/Check.stories.tsx
+++ b/src/components/common/Check/Check.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 import Check from '.';
 import { Button } from '../Button';
 
@@ -43,7 +43,9 @@ export const Controlled_Checkbox: Story = {
   render: (args) => {
     const [checked, setChecked] = useState(false);
 
-    const handleChangeChecked = (checked: boolean) => {
+    const handleChangeChecked = (e: ChangeEvent<HTMLInputElement>) => {
+      const checked = e.target.checked;
+
       setChecked(checked);
     };
 
diff --git a/src/components/common/Check/index.tsx b/src/components/common/Check/index.tsx
index 012c0e0..4ace719 100644
--- a/src/components/common/Check/index.tsx
+++ b/src/components/common/Check/index.tsx
@@ -5,11 +5,18 @@ import Icon from '../Icon';
 export interface ICheck {
   name?: string;
   checked?: boolean;
-  onChange?: (checked: boolean) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   defaultChecked?: boolean;
+  value?: string | number;
 }
 
-const Check = ({ name, checked: controlledChecked, onChange, defaultChecked = false }: ICheck) => {
+const Check = ({
+  name,
+  checked: controlledChecked,
+  onChange,
+  defaultChecked = false,
+  value,
+}: ICheck) => {
   const isControlled = !!controlledChecked;
   const [checked, setChecked] = useState(defaultChecked);
 
@@ -19,7 +26,7 @@ const Check = ({ name, checked: controlledChecked, onChange, defaultChecked = fa
     if (!isControlled) {
       setChecked(checked);
     }
-    onChange?.(checked);
+    onChange?.(e);
   };
 
   const isChecked = isControlled ? controlledChecked : checked;
@@ -35,7 +42,14 @@ const Check = ({ name, checked: controlledChecked, onChange, defaultChecked = fa
         >
           {isChecked && <Icon name='checkOn_f' className='text-icon-on w-16 h-16' />}
         </div>
-        <input name={name} type='checkbox' checked={isChecked} onChange={handleOnChange} hidden />
+        <input
+          name={name}
+          type='checkbox'
+          checked={isChecked}
+          onChange={handleOnChange}
+          hidden
+          value={value}
+        />
       </label>
     </div>
   );
diff --git a/src/components/common/Modal/ModalLayout.tsx b/src/components/common/Modal/ModalLayout.tsx
index 93e0433..ae89f6f 100644
--- a/src/components/common/Modal/ModalLayout.tsx
+++ b/src/components/common/Modal/ModalLayout.tsx
@@ -19,7 +19,7 @@ const ModalLayout = ({ children }: IModal) => {
   return (
     <div
       ref={modalRef}
-      className='fixed top-0 left-0 bottom-0 right-0 p-40 flex flex-col justify-center items-center'
+      className='fixed top-0 left-0 bottom-0 right-0 p-40 flex flex-col justify-center items-center bg-[#E2E5E9B2]'
       onClick={handleCloseModal}
     >
       <div className='max-h-[900px] p-24 rounded-2xl bg-surface shadow-modal overflow-scroll hide-scroll'>
diff --git a/src/components/common/Modal/ui/BookmarkModal.tsx b/src/components/common/Modal/ui/BookmarkModal.tsx
index 133b3b8..c8450f6 100644
--- a/src/components/common/Modal/ui/BookmarkModal.tsx
+++ b/src/components/common/Modal/ui/BookmarkModal.tsx
@@ -6,18 +6,23 @@ import {
   fetchUploadImage,
   useSaveBookmark,
 } from '@/apis/bookmark';
+import { useCategoryList, useSaveCategory } from '@/apis/category';
 import useDragUpload from '@/hooks/useDragUpload';
 import useEscKeyModalEvent from '@/hooks/useEscKeyModalEvent';
+import useOnClickOutside from '@/hooks/useOnClickOutside';
 import { cn } from '@/lib/utils';
 import useModalStore from '@/stores/modalStore';
 import useToastStore from '@/stores/toastStore';
 import { useFormik } from 'formik';
 import { debounce } from 'lodash';
-import { ChangeEvent, useCallback, useState } from 'react';
+import { ChangeEvent, useCallback, useMemo, useRef, useState } from 'react';
 import * as yup from 'yup';
 import { Button } from '../../Button';
+import Check from '../../Check';
 import Icon from '../../Icon';
+import { Option } from '../../Option';
 import { Select } from '../../Select';
+import { Tag } from '../../Tag';
 import { Textfield } from '../../Textfield';
 import ModalPortal from '../ModalPortal';
 
@@ -31,17 +36,18 @@ const BookmarkModal = () => {
   useEscKeyModalEvent('bookmarkModal');
 
   const { mutateAsync: mutateSaveBookmark } = useSaveBookmark();
+  const { data: categoryData } = useCategoryList();
+  const { mutateAsync: mutateSaveCategory } = useSaveCategory();
 
   const {
-    files,
+    file,
     isDragged,
     handleUploadFile,
     handleDragenter,
     handleDragover,
     handleDragleave,
     handleDrop,
-    handleDeleteFile,
-  } = useDragUpload({ maxNum: 1, extension: ['png', 'jpg', 'jpeg'] });
+  } = useDragUpload({ extension: ['png', 'jpg', 'jpeg'] });
 
   const formik = useFormik<ISaveBookmarkDataType>({
     initialValues: {
@@ -54,6 +60,7 @@ const BookmarkModal = () => {
       siteName: '',
     },
     validationSchema: yup.object({
+      memo: yup.string().max(200, '200자 이내로 작성해주세요.'),
       url: yup.string().required('URL을 입력해 주세요.'),
     }),
     onSubmit: (values) => {
@@ -61,7 +68,32 @@ const BookmarkModal = () => {
     },
   });
 
+  const categoryRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside([categoryRef], () => setIsFocus(false));
+
+  const [isFocus, setIsFocus] = useState<boolean>(false);
   const [category, setCategory] = useState<string>('');
+  const [selectCategory, setSelectCategory] = useState<Array<{ label: string; value: number }>>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  // 카테고리 선태
+  const handleSelectCategory = async () => {
+    const res = await mutateSaveCategory(category);
+
+    handleCheckCategory(category, res.data.result);
+    setCategory('');
+  };
+
+  // 카테고리 체크
+  const handleCheckCategory = (label: string, value: number) => {
+    setSelectCategory((prev) => [...prev, { label, value }]);
+  };
+
+  // 카테고리 삭제
+  const handleRemoveCategory = (id: number) => {
+    setSelectCategory((prev) => prev.filter((item) => item.value !== id));
+  };
 
   const handleChangeUrl = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
@@ -70,34 +102,58 @@ const BookmarkModal = () => {
     delayedHTML(value);
   };
 
+  const handleChangeCategory = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = Number(e.target.value);
+    const checked = e.target.checked;
+
+    if (checked) {
+      const findCategory = categoryData?.find((item) => item.categoryId === value);
+
+      if (findCategory) {
+        handleCheckCategory(findCategory.categoryName, findCategory.categoryId);
+      }
+    } else {
+      handleRemoveCategory(value);
+    }
+  };
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const delayedHTML = useCallback(
-    debounce((url) => getMetaTag(url), 1000),
+    debounce((url) => getMetaTag(url), 600),
     [],
   );
 
+  // 메타 데이터 가져오기
   const getMetaTag = async (url: string) => {
+    setIsLoading(true);
+
     const result = await fetchGetMetaData(url);
 
     if (result) {
       const meta = result.meta;
 
       formik.setFieldValue('title', meta.title);
-      formik.setFieldValue('memo', meta.description);
+      formik.setFieldValue('memo', meta.description.substring(0, 200));
       formik.setFieldValue('favicon', meta.favicon);
       formik.setFieldValue('representImageUrl', meta.image);
       formik.setFieldValue('siteName', meta.siteName);
     } else {
       formik.setFieldError('url', '등록할 수 없는 URL이에요.');
     }
+
+    const MIN_LAZY_TIME = 1000;
+
+    setTimeout(() => {
+      setIsLoading(false);
+    }, MIN_LAZY_TIME);
   };
 
   // 북마크 등록
   const saveBookmark = async (values: ISaveBookmarkDataType) => {
     const formData = new FormData();
 
-    if (files.length > 0) {
-      formData.append('file', files[0].originFile);
+    if (file) {
+      formData.append('file', file.originFile);
       const res = await fetchUploadImage(formData);
 
       if (res?.message === 'OK') {
@@ -107,6 +163,8 @@ const BookmarkModal = () => {
       }
     }
 
+    values.categoryIds = selectCategory.map((item) => item.value);
+
     mutateSaveBookmark(values).then(() => {
       addToast('북마크가 추가되었어요.', 'success');
 
@@ -114,6 +172,15 @@ const BookmarkModal = () => {
     });
   };
 
+  const categoryDataFormat = useMemo(() => {
+    return (
+      categoryData?.map((item) => ({
+        ...item,
+        checked: !!selectCategory.find((cat) => cat.value === item.categoryId) || !item.categoryId,
+      })) ?? []
+    );
+  }, [categoryData, selectCategory]);
+
   return (
     <ModalPortal>
       <div className='w-[432px] overflow-hidden'>
@@ -122,16 +189,59 @@ const BookmarkModal = () => {
         </div>
         <div className='py-24 flex flex-col gap-32'>
           <div className='flex flex-col gap-16'>
-            <Select
-              placeholder='카테고리를 선택하거나 입력해 주세요'
-              value={category}
-              onChange={(e) => setCategory(e.target.value)}
-            >
-              <Select.Label>카테고리</Select.Label>
-              <Select.InputWrapper>
-                <Select.Input />
-              </Select.InputWrapper>
-            </Select>
+            {/* 카테고리 영역 START */}
+            <div className='relative h-fit' ref={categoryRef}>
+              <Select
+                placeholder={'카테고리를 선택하거나 입력해 주세요'}
+                value={category}
+                onChange={(e) => setCategory(e.target.value.substring(0.12))}
+                onClick={() => setIsFocus(true)}
+              >
+                <Select.Label>카테고리</Select.Label>
+                <Select.InputWrapper>
+                  {!isFocus && selectCategory.length > 0 && (
+                    <div className='flex items-center gap-4'>
+                      {selectCategory.map((item) => {
+                        return (
+                          <Tag
+                            key={item.value}
+                            isButton
+                            onClick={() => handleRemoveCategory(item.value)}
+                          >
+                            <Tag.Label>{item.label}</Tag.Label>
+                            <Icon name='xClose_s' className='w-16 h-16 text-icon-sub' />
+                          </Tag>
+                        );
+                      })}
+                    </div>
+                  )}
+                  <Select.Input />
+                </Select.InputWrapper>
+              </Select>
+              {isFocus && (
+                <div className='absolute top-[calc(100%+8px)] w-full max-h-320 flex flex-col gap-4 p-8 bg-surface rounded-lg shadow-layer overflow-y-scroll'>
+                  {!categoryData?.find((item) => item.categoryName === category) && (
+                    <Option onClick={handleSelectCategory}>
+                      <Option.Label>
+                        <b className='body-md-bold'>추가</b>"{category}"
+                      </Option.Label>
+                      <Icon name='plus_square' className='w-20 h-20 text-text-minimal' />
+                    </Option>
+                  )}
+                  {categoryDataFormat?.map((item) => (
+                    <Option key={item.categoryId}>
+                      <Check
+                        value={item.categoryId ?? 0}
+                        onChange={handleChangeCategory}
+                        defaultChecked={item.checked}
+                      />
+                      <Option.Label>{item.categoryName}</Option.Label>
+                    </Option>
+                  ))}
+                </div>
+              )}
+            </div>
+            {/* 카테고리 영역  END*/}
 
             <Textfield
               name='url'
@@ -152,6 +262,7 @@ const BookmarkModal = () => {
               placeholder='ex) packit'
               value={formik.values.title}
               onChange={formik.handleChange}
+              isDisabled={isLoading}
             >
               <Textfield.Label>이름</Textfield.Label>
               <Textfield.InputWrapper>
@@ -161,9 +272,10 @@ const BookmarkModal = () => {
 
             <Textfield
               name='memo'
-              placeholder='ex) packit'
+              placeholder='ex) 북마크 아카이빙 사이트'
               value={formik.values.memo}
               onChange={formik.handleChange}
+              isDisabled={isLoading}
             >
               <Textfield.Label>메모</Textfield.Label>
               <Textfield.InputWrapper>
@@ -175,38 +287,47 @@ const BookmarkModal = () => {
           <div
             className={cn([
               'my-0 mx-auto w-[304px] h-[180px] border-dashed border-border rounded-xl overflow-hidden',
-              'hover:bg-action-secondary-hover',
               isDragged && 'bg-action-secondary-pressed',
-              files.length === 0 && 'border-2',
+              !file && 'border-2 hover:bg-action-secondary-hover',
             ])}
             onDragEnter={handleDragenter}
             onDragOver={handleDragover}
             onDragLeave={handleDragleave}
             onDrop={handleDrop}
           >
-            {files.length === 0 ? (
-              <label className='cursor-pointer py-48 px-[54px] flex flex-col items-center gap-12'>
-                <Icon name='filePlus' className='w-32 h-32 text-icon-minimal' />
-                <div className='flex flex-col gap-4 items-center'>
-                  <div className='text-text body-sm-bold'>북마크 썸네일</div>
-                  <p className='text-text-sub body-sm whitespace-nowrap'>
-                    최대 5MB의 이미지까지 업로드 가능해요
-                  </p>
-                  <input type='file' onChange={handleUploadFile} hidden accept='image/*' />
+            <label className='cursor-pointer'>
+              {!file ? (
+                <div className='py-48 px-[54px] flex flex-col items-center gap-12'>
+                  <Icon name='filePlus' className='w-32 h-32 text-icon-minimal' />
+                  <div className='flex flex-col gap-4 items-center'>
+                    <div className='text-text body-sm-bold'>북마크 썸네일</div>
+                    <p className='text-text-sub body-sm whitespace-nowrap'>
+                      최대 5MB의 이미지까지 업로드 가능해요
+                    </p>
+                  </div>
                 </div>
-              </label>
-            ) : (
-              <div
-                className='cursor-pointer w-full h-full flex justify-center items-center'
-                onClick={() => handleDeleteFile(files[0].key)}
-              >
-                <img
-                  className='aspect-[300/180] object-cover'
-                  src={String(files[0].src)}
-                  alt='썸네일'
-                />
-              </div>
-            )}
+              ) : (
+                <div className='relative w-full h-full flex justify-center items-center group'>
+                  <img
+                    className='aspect-[300/180] object-cover group-hover:opacity-60'
+                    src={String(file.src)}
+                    alt='썸네일'
+                  />
+
+                  <div
+                    className={cn([
+                      'flex justify-center items-center min-w-64 px-12 py-8 rounded-lg bg-surface border-[1px] border-solid border-border',
+                      'absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2',
+                      'hover:bg-action-secondary-hover active:bg-action-secondary-pressed',
+                      'hidden group-hover:block',
+                    ])}
+                  >
+                    <span className='label-md text-text-secondary'>재업로드</span>
+                  </div>
+                </div>
+              )}
+              <input type='file' onChange={handleUploadFile} hidden accept='image/*' />
+            </label>
           </div>
         </div>
         <div className='flex justify-end gap-8'>
diff --git a/src/components/common/Select/modules/SelectStateContext.tsx b/src/components/common/Select/modules/SelectStateContext.tsx
index e369ec6..8b404ec 100644
--- a/src/components/common/Select/modules/SelectStateContext.tsx
+++ b/src/components/common/Select/modules/SelectStateContext.tsx
@@ -1,10 +1,11 @@
-import { ChangeEvent, createContext, useContext } from 'react';
+import { ChangeEvent, createContext, MouseEvent, useContext } from 'react';
 
 interface DefaultValueState {
   value: string;
   placeholder?: string;
   tagList?: Array<{ id: number; label: string }>;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onClick?: (e: MouseEvent<HTMLElement>) => void;
   isDisabled?: boolean;
   isInvalid?: boolean;
 }
diff --git a/src/components/common/Select/ui/SelectInputWrapper.tsx b/src/components/common/Select/ui/SelectInputWrapper.tsx
index e1471fa..3d94c37 100644
--- a/src/components/common/Select/ui/SelectInputWrapper.tsx
+++ b/src/components/common/Select/ui/SelectInputWrapper.tsx
@@ -7,10 +7,10 @@ import { useSelectState } from '../modules/SelectStateContext';
 export interface ISelectInputWrapper extends PropsWithChildren {}
 
 const SelectInputWrapper = ({ children }: ISelectInputWrapper) => {
-  const { isDisabled, isInvalid } = useSelectState();
+  const { isDisabled, isInvalid, onClick } = useSelectState();
 
   return (
-    <div className={cn(selectInputWrapperVariants({ isDisabled, isInvalid }))}>
+    <div className={cn(selectInputWrapperVariants({ isDisabled, isInvalid }))} onClick={onClick}>
       <div className='flex-1 flex items-center justify-between gap-8 overflow-y-scroll scroll-hide styled-scroll'>
         {children}
       </div>
diff --git a/src/components/common/Select/ui/SelectMain.tsx b/src/components/common/Select/ui/SelectMain.tsx
index 17f8b6a..5cd9763 100644
--- a/src/components/common/Select/ui/SelectMain.tsx
+++ b/src/components/common/Select/ui/SelectMain.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, PropsWithChildren } from 'react';
+import { ChangeEvent, MouseEvent, PropsWithChildren } from 'react';
 import { SelectContext } from '../modules/SelectStateContext';
 
 export interface ISelectMain extends PropsWithChildren {
@@ -7,18 +7,22 @@ export interface ISelectMain extends PropsWithChildren {
   isDisabled?: boolean;
   isInvalid?: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onClick?: (e: MouseEvent<HTMLElement>) => void;
 }
 
 const SelectMain = ({
   value,
   placeholder,
   onChange,
+  onClick,
   isDisabled = false,
   isInvalid = false,
   children,
 }: ISelectMain) => {
   return (
-    <SelectContext.Provider value={{ value, placeholder, onChange, isDisabled, isInvalid }}>
+    <SelectContext.Provider
+      value={{ value, placeholder, onChange, onClick, isDisabled, isInvalid }}
+    >
       <div className='flex flex-col gap-6'>{children}</div>
     </SelectContext.Provider>
   );
diff --git a/src/components/common/Tag/ui/TagLabel.tsx b/src/components/common/Tag/ui/TagLabel.tsx
index 1020a56..b36ae01 100644
--- a/src/components/common/Tag/ui/TagLabel.tsx
+++ b/src/components/common/Tag/ui/TagLabel.tsx
@@ -11,7 +11,7 @@ const TagLabel = ({ children }: ITagLabel) => {
   return <span className={cn(tagLabelVariants({ size, disabled }))}>{children}</span>;
 };
 
-const tagLabelVariants = cva([], {
+const tagLabelVariants = cva(['whitespace-nowrap'], {
   variants: {
     size: {
       xs: 'label-xs',
diff --git a/src/hooks/useDragUpload.ts b/src/hooks/useDragUpload.ts
index d0cb766..ed5f3c4 100644
--- a/src/hooks/useDragUpload.ts
+++ b/src/hooks/useDragUpload.ts
@@ -1,7 +1,6 @@
 import { ChangeEvent, DragEvent, useState } from 'react';
 
 interface Props {
-  maxNum?: number;
   extension?: Array<string>;
 }
 
@@ -14,10 +13,10 @@ interface IFile {
   originFile: File;
 }
 
-const useDragUpload = ({ maxNum = 3, extension = [] }: Props) => {
+const useDragUpload = ({ extension = [] }: Props) => {
   const MAX_SIZE = 5 * 1024 * 1024;
 
-  const [files, setFiles] = useState<Array<IFile>>([]);
+  const [file, setFile] = useState<IFile>();
 
   const [isDragged, setIsDragged] = useState<boolean>(false);
 
@@ -29,11 +28,6 @@ const useDragUpload = ({ maxNum = 3, extension = [] }: Props) => {
 
     if (!dropFiles) return;
 
-    if (dropFiles.length + files.length > maxNum) {
-      alert(`파일은 최대 ${maxNum}까지 업로드 가능합니다.`);
-      return;
-    }
-
     filesUpload(dropFiles);
   };
   const handleUploadFile = (e: ChangeEvent<HTMLInputElement>) => {
@@ -43,11 +37,6 @@ const useDragUpload = ({ maxNum = 3, extension = [] }: Props) => {
 
     if (!inputFiles) return;
 
-    if (inputFiles.length + files.length > maxNum) {
-      alert(`파일은 최대 ${maxNum}까지 업로드 가능합니다.`);
-      return;
-    }
-
     filesUpload(inputFiles);
   };
   const handleDragover = (e: DragEvent<HTMLElement>) => {
@@ -93,17 +82,14 @@ const useDragUpload = ({ maxNum = 3, extension = [] }: Props) => {
           const reader = new FileReader();
 
           reader.onload = (event) => {
-            setFiles((prev) => [
-              ...prev,
-              {
-                src: event.target?.result,
-                key: key + `/${i}`,
-                name: fileName,
-                size,
-                type: fileExtension,
-                originFile: newFiles[i],
-              },
-            ]);
+            setFile({
+              src: event.target?.result,
+              key: key + `/${i}`,
+              name: fileName,
+              size,
+              type: fileExtension,
+              originFile: newFiles[i],
+            });
           };
           reader.readAsDataURL(newFiles[i]);
         } else {
@@ -113,12 +99,12 @@ const useDragUpload = ({ maxNum = 3, extension = [] }: Props) => {
     }
   };
 
-  const handleDeleteFile = (key: string) => {
-    setFiles(files.filter((file) => file.key !== key));
+  const handleDeleteFile = () => {
+    setFile(undefined);
   };
 
   return {
-    files,
+    file,
     isDragged,
     handleUploadFile,
     handleDrop,