Feat: WorkSpaceCreateModal 컴포넌트 구현 - S11P21S002-74

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>
+  );
+}

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);
+    }}
+  />
+);

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>
+  );
+}