From 7742554767e4baa7c155b3a8378ceb808a5f2674 Mon Sep 17 00:00:00 2001
From: Brokyeom <goindol40@gmail.com>
Date: Thu, 5 Dec 2024 21:43:58 +0900
Subject: [PATCH] feat: Publish Dropzone.

---
 apps/docs/src/stories/Dropzone.stories.tsx | 24 ++++++++++++++
 packages/ui/DropZone/DropZone.tsx          | 37 +++++++++++++++-------
 packages/ui/DropZone/index.ts              |  1 +
 packages/ui/DropZone/style.css.ts          | 19 +++++++++++
 packages/ui/index.ts                       |  1 +
 5 files changed, 71 insertions(+), 11 deletions(-)
 create mode 100644 apps/docs/src/stories/Dropzone.stories.tsx
 create mode 100644 packages/ui/DropZone/index.ts
 create mode 100644 packages/ui/DropZone/style.css.ts

diff --git a/apps/docs/src/stories/Dropzone.stories.tsx b/apps/docs/src/stories/Dropzone.stories.tsx
new file mode 100644
index 0000000..72ce572
--- /dev/null
+++ b/apps/docs/src/stories/Dropzone.stories.tsx
@@ -0,0 +1,24 @@
+import { Dropzone, DropzoneProps } from '@sopt-makers/ui';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<DropzoneProps> = {
+  title: 'Components/Dropzone',
+  component: Dropzone,
+  tags: ['autodocs'],
+  args: {
+    label: 'label',
+    description: 'description',
+    required: true,
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<DropzoneProps> = {
+  args: {
+    label: '이미지 등록',
+    description: `[PC] 이미지는 1824*328 px 크기로 올려주세요.`,
+    width: '500px',
+  },
+  render: (args) => <Dropzone {...args} />,
+};
diff --git a/packages/ui/DropZone/DropZone.tsx b/packages/ui/DropZone/DropZone.tsx
index 8c363bc..28222f7 100644
--- a/packages/ui/DropZone/DropZone.tsx
+++ b/packages/ui/DropZone/DropZone.tsx
@@ -1,28 +1,43 @@
+import { IconImagePlus } from '@sopt-makers/icons';
 import { FieldBox } from 'FieldBox';
 import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { dropzoneStyle } from './style.css';
 
-export interface DropZoneProps extends HTMLAttributes<HTMLInputElement> {
+export interface DropzoneProps extends HTMLAttributes<HTMLInputElement> {
   label?: string;
   description?: string;
   required?: boolean;
-  width?: number;
-  height?: number;
+  width?: string;
+  height?: string;
   icon?: ReactNode;
 }
 
-const DropZone = forwardRef<HTMLInputElement, DropZoneProps>((props, forwardedRef) => {
-  const { label, description, required = false, width, height, icon = 'andada' } = props;
+export const Dropzone = forwardRef<HTMLInputElement, DropzoneProps>((props, forwardedRef) => {
+  const {
+    label,
+    description,
+    required = false,
+    width = '300px',
+    height = '170px',
+    icon = <IconImagePlus color='white' style={{ width: '24px', height: '24px' }} />,
+  } = props;
+
+  const { getRootProps, getInputProps } = useDropzone();
 
   return (
-    <FieldBox topAddon={<FieldBox.Label description={description} label={label} required={required} />}>
-      <input ref={forwardedRef} type='file'>
+    <FieldBox
+      topAddon={
+        <FieldBox.TopAddon leftAddon={<FieldBox.Label description={description} label={label} required={required} />} />
+      }
+    >
+      <div className={dropzoneStyle} style={{ width, height }} {...getRootProps()}>
         {icon}
-      </input>
+        <input ref={forwardedRef} {...getInputProps()} />
+      </div>
     </FieldBox>
   );
 });
 
-DropZone.displayName = 'DropZone';
-
-export default DropZone;
+Dropzone.displayName = 'Dropzone';
diff --git a/packages/ui/DropZone/index.ts b/packages/ui/DropZone/index.ts
new file mode 100644
index 0000000..d832ddf
--- /dev/null
+++ b/packages/ui/DropZone/index.ts
@@ -0,0 +1 @@
+export * from './DropZone';
diff --git a/packages/ui/DropZone/style.css.ts b/packages/ui/DropZone/style.css.ts
new file mode 100644
index 0000000..2c99d2b
--- /dev/null
+++ b/packages/ui/DropZone/style.css.ts
@@ -0,0 +1,19 @@
+import { style } from '@vanilla-extract/css';
+import theme from '../theme.css';
+
+export const dropzoneStyle = style({
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: theme.colors.gray700,
+  borderRadius: '10px',
+
+  cursor: 'pointer',
+});
+
+export const dropzoneInputStyle = style({
+  position: 'absolute',
+  width: 'transparent',
+  height: 'transparent',
+});
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 8046228..bde4064 100644
--- a/packages/ui/index.ts
+++ b/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';