feat(ui): Dropzone 컴포넌트 구현

apps/docs/.storybook/preview.ts

@@ -1,23 +1,23 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
 
-import "../src/index.css";
-import "@sopt-makers/ui/dist/index.css";
+import '../src/index.css';
+import '@sopt-makers/ui/dist/index.css';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
-    layout: "centered",
+    layout: 'centered',
     backgrounds: {
-      default: "dark", // 기본 배경을 'dark'로 설정
+      default: 'dark', // 기본 배경을 'dark'로 설정
       values: [
-        { name: "dark", value: "#0F1012" }, // 'dark' 배경의 색상을 검정색으로 지정
-        { name: "white", value: "#ffffff" },
+        { name: 'dark', value: '#0F1012' }, // 'dark' 배경의 색상을 검정색으로 지정
+        { name: 'white', value: '#ffffff' },
       ],
     },
   },

apps/docs/src/stories/Dropzone.stories.tsx

@@ -0,0 +1,36 @@
+import { Button, Dropzone, DropzoneProps, FieldBox } from '@sopt-makers/ui';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<DropzoneProps> = {
+  title: 'Components/Dropzone',
+  component: Dropzone,
+  tags: ['autodocs'],
+  args: {
+    width: '300px',
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<DropzoneProps> = {
+  render: (args) => <Dropzone {...args} />,
+};
+
+export const WithFieldbox: StoryObj<DropzoneProps> = {
+  render: (args) => (
+    <FieldBox
+      topAddon={
+        <FieldBox.TopAddon
+          leftAddon={<FieldBox.Label label='이미지 등록' description='description' required />}
+          rightAddon={
+            <Button variant='outlined' size='sm' disabled>
+              Button
+            </Button>
+          }
+        />
+      }
+    >
+      <Dropzone {...args} />
+    </FieldBox>
+  ),
+};

packages/ui/DropZone/DropZone.tsx

@@ -0,0 +1,75 @@
+import { forwardRef, useState } from 'react';
+import { IconImagePlus } from '@sopt-makers/icons';
+import type { DragEvent, DragEventHandler, HTMLAttributes, ReactNode } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { dropzoneVariants } from './style.css';
+
+export interface DropzoneProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onDrop'> {
+  width?: string;
+  height?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  accept?: string;
+  onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;
+}
+
+export const Dropzone = forwardRef<HTMLInputElement, DropzoneProps>((props, forwardedRef) => {
+  const {
+    width = '100%',
+    height = '170px',
+    icon = <IconImagePlus color='white' style={{ width: '24px', height: '24px' }} />,
+    disabled = false,
+    accept,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+  } = props;
+
+  const [isDragOver, setIsDragOver] = useState(false);
+  const { getRootProps, getInputProps } = useDropzone();
+
+  const handleDragOver: DragEventHandler<HTMLInputElement> = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!disabled) {
+      setIsDragOver(true);
+      e.dataTransfer.dropEffect = 'copy';
+    } else {
+      e.dataTransfer.dropEffect = 'none';
+    }
+
+    onDragOver?.(e);
+  };
+
+  const handleDragLeave: DragEventHandler<HTMLInputElement> = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    onDragLeave?.(e);
+  };
+
+  const handleDrop: DragEventHandler<HTMLInputElement> = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    onDrop?.(e, Array.from(e.dataTransfer.files));
+  };
+
+  return (
+    <div
+      aria-disabled={disabled}
+      className={isDragOver ? dropzoneVariants.dragOver : dropzoneVariants.default}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      style={{ width, height }}
+      {...getRootProps()}
+    >
+      {icon}
+      <input accept={accept} disabled={disabled} ref={forwardedRef} {...getInputProps()} />
+    </div>
+  );
+});
+
+Dropzone.displayName = 'Dropzone';

packages/ui/DropZone/index.ts

@@ -0,0 +1 @@
+export * from './DropZone';

packages/ui/DropZone/style.css.ts

@@ -0,0 +1,26 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import theme from '../theme.css';
+
+export const dropzoneBase = style({
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: theme.colors.gray700,
+  borderRadius: '10px',
+  cursor: 'pointer',
+  transition: 'background-color 0.3s ease',
+  border: '2px dashed transparent',
+});
+
+export const dropzoneVariants = styleVariants({
+  default: [dropzoneBase],
+  dragOver: [
+    dropzoneBase,
+    {
+      backgroundColor: theme.colors.gray600,
+      borderColor: theme.colors.white,
+      opacity: 0.8,
+    },
+  ],
+});

packages/ui/index.ts

@@ -14,5 +14,6 @@ export { default as Tab } from './Tab';
 export * from './Skeleton';
 export * from './FieldBox';
 export * from './Tag';
+export * from './Dropzone';
 // test component
 export { default as Test } from './Test';

packages/ui/package.json

@@ -28,7 +28,8 @@
     "@sopt-makers/fonts": "workspace:^",
     "@sopt-makers/icons": "workspace:^",
     "@vanilla-extract/css": "^1.14.0",
-    "@vanilla-extract/sprinkles": "^1.6.1"
+    "@vanilla-extract/sprinkles": "^1.6.1",
+    "react-dropzone": "^14.3.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.5.0",