From c858dd2244479930aada729fb4ab4f2287a5e30e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Wed, 28 Aug 2024 11:15:54 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Refactor:=20ImageUploadModal=EC=97=90=20?=
 =?UTF-8?q?=EC=9E=88=EB=8A=94=20=EB=B2=84=ED=8A=BC=EC=9D=84=20ui=EC=97=90?=
 =?UTF-8?q?=20=EC=9E=88=EB=8A=94=20=EB=B2=84=ED=8A=BC=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20Button=20=EC=A0=9C=EA=B1=B0=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0=20ui=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=EC=83=81?=
 =?UTF-8?q?=EC=86=8D=EB=B0=9B=EB=8A=94=20Progress=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EC=9D=84=20=EB=A7=8C=EB=93=A4=EA=B3=A0=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EB=A0=88=EC=8A=A4=20=EA=B8=B0=EB=8A=A5=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ImageUploadModal/Button.tsx    | 33 ----------------
 .../ImageUploadModal/ProgressButton.tsx       | 39 +++++++++++++++++++
 .../src/components/ImageUploadModal/index.tsx |  6 ++-
 3 files changed, 43 insertions(+), 35 deletions(-)
 delete mode 100644 frontend/src/components/ImageUploadModal/Button.tsx
 create mode 100644 frontend/src/components/ImageUploadModal/ProgressButton.tsx

diff --git a/frontend/src/components/ImageUploadModal/Button.tsx b/frontend/src/components/ImageUploadModal/Button.tsx
deleted file mode 100644
index 2e1c303..0000000
--- a/frontend/src/components/ImageUploadModal/Button.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-interface ButtonProps {
-  isActive: boolean;
-  text: string;
-  onClick: () => void;
-  progress?: number;
-}
-
-export default function Button({ isActive, text, onClick, progress = 0 }: ButtonProps): JSX.Element {
-  const buttonText = progress === 100 ? '업로드 완료' : text;
-
-  return (
-    <button
-      className={cn(
-        'relative flex h-12 w-full items-center justify-center rounded-lg border-2 px-5 py-2.5 transition-all duration-300',
-        isActive
-          ? 'cursor-pointer border-primary bg-primary text-white'
-          : 'cursor-not-allowed border-gray-200 bg-gray-100 text-gray-500'
-      )}
-      disabled={!isActive}
-      onClick={isActive ? onClick : undefined}
-      style={{ '--progress-width': `${progress}%` } as React.CSSProperties}
-    >
-      <span className="relative z-10 font-sans text-base font-bold leading-6">{buttonText}</span>
-      <div
-        className="transition-width absolute left-0 top-0 z-0 h-full bg-white bg-opacity-20 duration-300"
-        style={{ width: `var(--progress-width, 0%)` }}
-      ></div>
-    </button>
-  );
-}
diff --git a/frontend/src/components/ImageUploadModal/ProgressButton.tsx b/frontend/src/components/ImageUploadModal/ProgressButton.tsx
new file mode 100644
index 0000000..637fb3a
--- /dev/null
+++ b/frontend/src/components/ImageUploadModal/ProgressButton.tsx
@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils';
+import { Button as BaseButton, ButtonProps as BaseButtonProps } from '@/components/ui/button';
+
+interface ProgressButtonProps extends BaseButtonProps {
+  isActive: boolean;
+  progress?: number;
+  text: string;
+}
+
+export default function ProgressButton({
+  isActive,
+  text,
+  progress = 0,
+  variant,
+  size,
+  className,
+  ...props
+}: ProgressButtonProps): JSX.Element {
+  const buttonText = progress === 100 ? '업로드 완료' : text;
+
+  return (
+    <BaseButton
+      className={cn('relative w-full overflow-hidden', className)}
+      variant={variant}
+      size={size}
+      disabled={!isActive}
+      {...props}
+    >
+      {progress > 0 && (
+        <div
+          className="absolute left-0 top-0 h-full bg-primary transition-all duration-300"
+          style={{ width: `${progress}%` }}
+        ></div>
+      )}
+
+      <span className={cn('relative z-10', progress > 0 && 'text-white')}>{buttonText}</span>
+    </BaseButton>
+  );
+}
diff --git a/frontend/src/components/ImageUploadModal/index.tsx b/frontend/src/components/ImageUploadModal/index.tsx
index dd20754..3f70140 100644
--- a/frontend/src/components/ImageUploadModal/index.tsx
+++ b/frontend/src/components/ImageUploadModal/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import CloseButton from './CloseButton';
-import Button from './Button';
+import ProgressButton from './ProgressButton';
 import FileList from './FileList';
 import { uploadFiles } from '@/api/upload';
 
@@ -103,11 +103,13 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp
         )}
       </div>
       <div className="flex justify-center">
-        <Button
+        <ProgressButton
           isActive={files.length > 0 && !isUploading}
           text={isUploading ? `업로드 중... (${uploadProgress}%)` : buttonText}
           onClick={handleUpload}
           progress={uploadProgress}
+          type="submit"
+          variant="outlinePrimary"
         />
       </div>
     </div>

From 1aadcd74204f391380cc8ebf3c1aab8c214e1d64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Wed, 28 Aug 2024 12:42:31 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20WorkSpaceCreateModal=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20-=20S11P21S0?=
 =?UTF-8?q?02-74?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WorkSpaceCreateForm.tsx                   | 78 +++++++++++++++++++
 .../WorkSpaceCreateModal/index.stories.tsx    | 18 +++++
 .../components/WorkSpaceCreateModal/index.tsx | 25 ++++++
 3 files changed, 121 insertions(+)
 create mode 100644 frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx
 create mode 100644 frontend/src/components/WorkSpaceCreateModal/index.stories.tsx
 create mode 100644 frontend/src/components/WorkSpaceCreateModal/index.tsx

diff --git a/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx b/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx
new file mode 100644
index 0000000..86a65fb
--- /dev/null
+++ b/frontend/src/components/WorkSpaceCreateModal/WorkSpaceCreateForm.tsx
@@ -0,0 +1,78 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';
+import { Input } from '../ui/input';
+import { Button } from '../ui/button';
+
+const formSchema = z.object({
+  workspaceName: z.string().max(50).min(1, {
+    message: '이름을 입력해주세요.',
+  }),
+  workspaceDescription: z.string().max(200).optional(),
+});
+
+export type WorkSpaceCreateFormValues = z.infer<typeof formSchema>;
+
+const defaultValues: Partial<WorkSpaceCreateFormValues> = {
+  workspaceName: '',
+  workspaceDescription: '',
+};
+
+export default function WorkSpaceCreateForm({ onSubmit }: { onSubmit: (data: WorkSpaceCreateFormValues) => void }) {
+  const form = useForm<WorkSpaceCreateFormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues,
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-5"
+      >
+        <FormField
+          name="workspaceName"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="body-strong">워크스페이스 이름</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="이름을 입력해주세요."
+                  maxLength={50}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="workspaceDescription"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="body-strong">워크스페이스 설명</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="워크스페이스 설명을 입력해주세요."
+                  maxLength={200}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          type="submit"
+          variant="outlinePrimary"
+          disabled={!form.formState.isValid}
+        >
+          워크스페이스 만들기
+        </Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/frontend/src/components/WorkSpaceCreateModal/index.stories.tsx b/frontend/src/components/WorkSpaceCreateModal/index.stories.tsx
new file mode 100644
index 0000000..691c782
--- /dev/null
+++ b/frontend/src/components/WorkSpaceCreateModal/index.stories.tsx
@@ -0,0 +1,18 @@
+import '@/index.css';
+import WorkSpaceCreateModal from '.';
+
+export default {
+  title: 'Modal/WorkSpaceCreateModal',
+  component: WorkSpaceCreateModal,
+};
+
+export const Default = () => (
+  <WorkSpaceCreateModal
+    onClose={() => {
+      console.log('close');
+    }}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  />
+);
diff --git a/frontend/src/components/WorkSpaceCreateModal/index.tsx b/frontend/src/components/WorkSpaceCreateModal/index.tsx
new file mode 100644
index 0000000..d9259b9
--- /dev/null
+++ b/frontend/src/components/WorkSpaceCreateModal/index.tsx
@@ -0,0 +1,25 @@
+import WorkSpaceCreateForm, { WorkSpaceCreateFormValues } from './WorkSpaceCreateForm';
+import XIcon from '@/assets/icons/x.svg?react';
+
+export default function WorkSpaceCreateModal({
+  onClose,
+  onSubmit,
+}: {
+  onClose: () => void;
+  onSubmit: (data: WorkSpaceCreateFormValues) => void;
+}) {
+  return (
+    <div className="flex w-[610px] flex-col gap-10 rounded-3xl border px-10 py-5 shadow-lg">
+      <header className="flex gap-5">
+        <h1 className="small-title w-full">새 워크스페이스</h1>
+        <button
+          className="flex h-8 w-8 items-center justify-center"
+          onClick={onClose}
+        >
+          <XIcon className="stroke-gray-900" />
+        </button>
+      </header>
+      <WorkSpaceCreateForm onSubmit={onSubmit} />
+    </div>
+  );
+}