Add form provider (#24)

* react-hook-form을 wrapping한 FormProvider 컴포넌트 추가

* 기존 코드에서 FormProvider만 사용한 방법으로 변경

Author: hmu332233

components/FormProvider.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import {
+  FormProvider as ReactHookFormProvider,
+  useForm,
+} from 'react-hook-form';
+
+const DEFAULT_FORM_VALUES: FormValues = {
+  liveMode: true,
+  date: '',
+  size: '',
+  theme: 'basic',
+  rotate: '0',
+} as const;
+
+type Props = {
+  defaultValues?: FormValues;
+  children: React.ReactNode;
+};
+
+function FormProvider({
+  defaultValues = DEFAULT_FORM_VALUES,
+  children,
+}: Props) {
+  const formMethods = useForm<FormValues>({
+    defaultValues,
+  });
+
+  return (
+    <ReactHookFormProvider {...formMethods}>{children}</ReactHookFormProvider>
+  );
+}
+
+export default FormProvider;

components/MoonForm.tsx

@@ -1,39 +1,19 @@
 import React, { useEffect } from 'react';
 
 import { debounce } from 'utils';
-import { objectToQueryString } from 'utils/string';
-
-import { FormProvider, useForm } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import ControlledLiveToggle from 'components/ControlledLiveToggle';
 import FormItem from './FormItem';
 
 const DEFAULT_FORM_KEYS: FormKeys[] = ['theme', 'size', 'rotate'];
 
-const DEFAULT_FORM_VALUES: FormValues = {
-  liveMode: true,
-  date: '',
-  size: '',
-  theme: 'basic',
-  rotate: '0',
-} as const;
-
 type Props = {
-  defaultValues?: FormValues;
   keys?: FormKeys[];
   onChange: (v: FormValues) => void;
 };
 
-function MoonForm({
-  keys = DEFAULT_FORM_KEYS,
-  defaultValues = DEFAULT_FORM_VALUES,
-  onChange,
-}: Props) {
-  const formMethods = useForm<FormValues>({
-    defaultValues,
-  });
-
-  const { register, watch } = formMethods;
-
+function MoonForm({ keys = DEFAULT_FORM_KEYS, onChange }: Props) {
+  const { register, watch } = useFormContext();
   const liveMode = watch('liveMode');
 
   useEffect(() => {
@@ -109,12 +89,12 @@ function MoonForm({
   };
 
   return (
-    <FormProvider {...formMethods}>
+    <>
       {/* TODO: date도 item으로 관리할 수 있도록 변경 */}
       <ControlledLiveToggle name="liveMode" />
       {!liveMode && formItemMap.date}
       {keys.map((key) => formItemMap[key])}
-    </FormProvider>
+    </>
   );
 }
 

pages/index.tsx

@@ -10,6 +10,8 @@ import OgTags from 'components/OgTags';
 import MoonForm from 'components/MoonForm';
 import { objectToQueryString } from 'utils/string';
 
+import FormProvider from 'components/FormProvider';
+
 function Home() {
   const [queryString, setQueryString] = useState('');
 
@@ -32,22 +34,24 @@ function Home() {
   };
 
   return (
-    <Layout>
-      <OgTags />
-      <p>SVG showing the Moon Phase for today.</p>
-      <Hits />
-      <a>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src={svgUrl} alt="moon.svg" />
-      </a>
-      <MoonForm onChange={handleFormChange} />
-      <CopyModal.Button id="copy-modal" />
-      <CopyModal.Modal
-        id="copy-modal"
-        text={`https://moon-svg.minung.dev${svgUrl}`}
-      />
-      <Adfit />
-    </Layout>
+    <FormProvider>
+      <Layout>
+        <OgTags />
+        <p>SVG showing the Moon Phase for today.</p>
+        <Hits />
+        <a>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={svgUrl} alt="moon.svg" />
+        </a>
+        <MoonForm onChange={handleFormChange} />
+        <CopyModal.Button id="copy-modal" />
+        <CopyModal.Modal
+          id="copy-modal"
+          text={`https://moon-svg.minung.dev${svgUrl}`}
+        />
+        <Adfit />
+      </Layout>
+    </FormProvider>
   );
 }
 

pages/preview.tsx

@@ -7,6 +7,7 @@ import Layout from 'components/Layout';
 import OgTags from 'components/OgTags';
 import MoonForm from 'components/MoonForm';
 import LinkPreviewCard from 'components/LinkPreviewCard';
+import FormProvider from 'components/FormProvider';
 
 const PREVIEW_FORM_KEYS: FormKeys[] = ['theme', 'title', 'description'];
 
@@ -61,23 +62,21 @@ function Preview({ query }: Props) {
   }, [svgUrl]);
 
   return (
-    <Layout>
-      <OgTags
-        url={`https://moon-svg.minung.dev/preview${queryString}`}
-        image={`https://moon-svg.minung.dev/moon.png${queryString}`}
-      />
-      <p>Share Moon&apos;s Phases with your friends!</p>
-      <LinkPreviewCard
-        image={`https://moon-svg.minung.dev/moon.png${queryString}`}
-        title={data.title!}
-        description={data.description!}
-      />
-      <MoonForm
-        keys={PREVIEW_FORM_KEYS}
-        defaultValues={defaultValues}
-        onChange={handleFormChange}
-      />
-    </Layout>
+    <FormProvider defaultValues={defaultValues}>
+      <Layout>
+        <OgTags
+          url={`https://moon-svg.minung.dev/preview${queryString}`}
+          image={`https://moon-svg.minung.dev/moon.png${queryString}`}
+        />
+        <p>Share Moon&apos;s Phases with your friends!</p>
+        <LinkPreviewCard
+          image={`https://moon-svg.minung.dev/moon.png${queryString}`}
+          title={data.title!}
+          description={data.description!}
+        />
+        <MoonForm keys={PREVIEW_FORM_KEYS} onChange={handleFormChange} />
+      </Layout>
+    </FormProvider>
   );
 }