Feature #34 LotusCodeInputForm (#38)

* chore(#34):  install zod, react-hook-form, framer-motion, @hookform/resolvers

* feat(#34):  LotusCodeInputFrom widget

* feat(#34):  LotusCodeInputSection widget

* feat(#34):  LotusCodeInput barrel file

* feat(#34):  LotusCodeInput dnd

framer-motion을 사용한 dnd 컴포넌트

apps/frontend/package.json

@@ -19,11 +19,15 @@
   "dependencies": {
     "@froxy/design": "workspace:^",
     "@froxy/react-markdown": "workspace:^",
+    "@hookform/resolvers": "^3.9.1",
     "@tanstack/react-query": "^5.59.19",
     "@tanstack/react-router": "^1.78.3",
+    "framer-motion": "^11.11.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
     "react-icons": "^5.3.0"
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

apps/frontend/src/widget/LotusCodeInput/LotusCodeInputForm.tsx

@@ -0,0 +1,84 @@
+import { Button, Input, Text } from '@froxy/design/components';
+import { cn } from '@froxy/design/utils';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Reorder } from 'framer-motion';
+import { useFieldArray, useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+export const lotusCodeInputValue = z.object({
+  items: z.array(
+    z.object({
+      input: z.string().min(1, '입력값은 필수 항목입니다.')
+    })
+  )
+});
+
+export type LotusCodeFormValues = z.infer<typeof lotusCodeInputValue>;
+
+interface LotusCodeInputFormProps {
+  className?: string;
+  onSubmit?: (args: { data: LotusCodeFormValues; reset: () => void }) => void;
+}
+
+export function LotusCodeInputForm(props: LotusCodeInputFormProps) {
+  const {
+    register,
+    reset,
+    control,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<LotusCodeFormValues>({
+    defaultValues: lotusCodeInputValue.parse({ items: [] }),
+    resolver: zodResolver(lotusCodeInputValue)
+  });
+
+  const { fields, append, remove, swap } = useFieldArray({
+    control,
+    name: 'items'
+  });
+
+  const onSubmit = (data: LotusCodeFormValues) => props.onSubmit?.({ data, reset });
+
+  const handleReorder = (newFields: typeof fields) => {
+    const firstDiffIndex = fields.findIndex((field, index) => field.id !== newFields[index].id);
+
+    if (firstDiffIndex === -1) return;
+
+    const newIndex = newFields.findIndex((field) => field.id === fields[firstDiffIndex].id);
+
+    swap(firstDiffIndex, newIndex);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={cn(props.className)}>
+      <Reorder.Group drag="y" values={fields} onReorder={handleReorder}>
+        {fields.map((field, index) => (
+          <Reorder.Item key={field.id} value={field} className="hover:cursor-move">
+            <div className="flex gap-2 items-center">
+              <Text size="lg" className="w-10">
+                {index + 1}번
+              </Text>
+              <Input {...register(`items.${index}.input`)} placeholder={`Input ${index + 1}`} />
+              <Button onClick={() => remove(index)}>삭제</Button>
+            </div>
+
+            <Text variant="destructive" className="min-h-5 my-2 pl-12">
+              {errors.items?.[index]?.input && errors.items[index].input?.message}
+            </Text>
+          </Reorder.Item>
+        ))}
+      </Reorder.Group>
+      <Button variant={'outline'} className="block w-full my-5" onClick={() => append({ input: '' })}>
+        새로운 항목 추가
+      </Button>
+      <div className="flex gap-2">
+        <Button className="w-full" variant={'secondary'} onClick={() => reset()}>
+          취소하기
+        </Button>
+        <Button className="w-full" type="submit">
+          완료하기
+        </Button>
+      </div>
+    </form>
+  );
+}

apps/frontend/src/widget/LotusCodeInput/LotusCodeInputSection.tsx

@@ -0,0 +1,22 @@
+import { Heading, Text } from '@froxy/design/components';
+import { cn } from '@froxy/design/utils';
+import { LotusCodeFormValues, LotusCodeInputForm } from './LotusCodeInputForm';
+
+type LotusCodeInputSectionProps = {
+  className?: string;
+};
+
+export function LotusCodeInputSection({ className }: LotusCodeInputSectionProps) {
+  const handelSubmit = ({ data, reset }: { data: LotusCodeFormValues; reset: () => void }) => {
+    console.log(data);
+    reset();
+  };
+
+  return (
+    <section className={cn('m-10', className)}>
+      <Heading>실행 입력 코드</Heading>
+      <Text variant="muted">다음의 코드가 실행 시 순서대로 입력됩니다. 드래그를 통해 순서를 변경할 수 있습니다.</Text>
+      <LotusCodeInputForm className={'my-10'} onSubmit={handelSubmit} />
+    </section>
+  );
+}

apps/frontend/src/widget/LotusCodeInput/index.tsx

@@ -0,0 +1,2 @@
+export * from './LotusCodeInputForm';
+export * from './LotusCodeInputSection';