From 8bda55c653d27b5074f6dc63a0da7befe9cc18bd Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Wed, 26 Aug 2026 14:04:36 +0900
Subject: [PATCH] =?UTF-8?q?[as]=20feat:=20=ED=96=89=EC=A0=95=EC=A7=80?=
 =?UTF-8?q?=EC=9B=90=20=EC=8B=A0=EC=B2=AD=20=ED=8C=A8=EB=84=90=20=EC=A0=84?=
 =?UTF-8?q?=EC=B2=B4=EC=A0=91=EA=B8=B0/=ED=8E=BC=EC=B9=A8=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../design-cnstn/ui/design-form-page.tsx      |  91 ++++++-----
 .../pages/fnrs-cnsltn/ui/fnrs-form-page.tsx   | 148 +++++++++---------
 .../pages/instl-sncn/ui/instl-form-page.tsx   | 140 +++++++++--------
 .../ui/sewer-bsc-plan-form-page.tsx           | 142 +++++++++--------
 4 files changed, 275 insertions(+), 246 deletions(-)

diff --git a/apps/as/src/pages/design-cnstn/ui/design-form-page.tsx b/apps/as/src/pages/design-cnstn/ui/design-form-page.tsx
index a10b0ebe3..4e5a5ad76 100644
--- a/apps/as/src/pages/design-cnstn/ui/design-form-page.tsx
+++ b/apps/as/src/pages/design-cnstn/ui/design-form-page.tsx
@@ -9,6 +9,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useAlertStore, useUserStore } from "@/shared/lib";
+import { SectionCollapsibleGroup, SectionCollapsibleToggle } from "@/shared/ui";
 import {
   type DesignCnstnApplySaveRequestDto,
   designCnstnKeys,
@@ -167,54 +168,64 @@ function DesignFormPage({ mode, initialData, createDefaults }: DesignFormPagePro
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSave)} className="mt-6 space-y-4">
-        {initialData?.detDto?.designCnstnDocNo && (
-          <ProgressStatusSection
-            columns={PROGRESS_STATUS_COLUMNS}
-            sttsChgHstryList={initialData?.sttsChgHstryList ?? []}
-            elaprDocNo={initialData.detDto.designCnstnDocNo}
-          />
-        )}
-        <BasicInfoFormSection />
-        <ContactInfoFormSection fieldPrefix="designCnstnMng" />
-        <PrivacyConsentSection />
-        <BusinessScaleFormSection />
-        <AttachmentsFormSection
-          docSeComCd="CNFM"
-          fieldPrefix="designCnstnMng"
-          initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
-          initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
-        />
+        <SectionCollapsibleGroup>
+          <SectionCollapsibleToggle />
+          <div className="space-y-4">
+            {initialData?.detDto?.designCnstnDocNo && (
+              <ProgressStatusSection
+                columns={PROGRESS_STATUS_COLUMNS}
+                sttsChgHstryList={initialData?.sttsChgHstryList ?? []}
+                elaprDocNo={initialData.detDto.designCnstnDocNo}
+              />
+            )}
+            <BasicInfoFormSection />
+            <ContactInfoFormSection fieldPrefix="designCnstnMng" />
+            <PrivacyConsentSection />
+            <BusinessScaleFormSection />
+            <AttachmentsFormSection
+              docSeComCd="CNFM"
+              fieldPrefix="designCnstnMng"
+              initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
+              initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
+            />
 
-        <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
-          <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
-            <Button
-              color="white"
-              type="button"
-              onClick={() => router.push("/design-cnstn")}
-              disabled={isSubmitting}
-            >
-              목록
-            </Button>
-            <Button type="submit" disabled={isSubmitting}>
-              저장
-            </Button>
-            {isEditMode && (
-              <>
+            <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
+              <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
                 <Button
-                  color="green"
+                  color="white"
                   type="button"
-                  onClick={handleApplyClick}
+                  onClick={() => router.push("/design-cnstn")}
                   disabled={isSubmitting}
                 >
-                  신청완료
+                  목록
                 </Button>
-                <Button color="red" type="button" onClick={handleDelClick} disabled={isSubmitting}>
-                  삭제
+                <Button type="submit" disabled={isSubmitting}>
+                  저장
                 </Button>
-              </>
-            )}
+                {isEditMode && (
+                  <>
+                    <Button
+                      color="green"
+                      type="button"
+                      onClick={handleApplyClick}
+                      disabled={isSubmitting}
+                    >
+                      신청완료
+                    </Button>
+                    <Button
+                      color="red"
+                      type="button"
+                      onClick={handleDelClick}
+                      disabled={isSubmitting}
+                    >
+                      삭제
+                    </Button>
+                  </>
+                )}
+              </div>
+            </div>
           </div>
-        </div>
+        </SectionCollapsibleGroup>
       </form>
     </FormProvider>
   );
diff --git a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx
index 69d680d5e..66a6a307c 100644
--- a/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx
+++ b/apps/as/src/pages/fnrs-cnsltn/ui/fnrs-form-page.tsx
@@ -9,6 +9,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useAlertStore, useUserStore } from "@/shared/lib";
+import { SectionCollapsibleGroup, SectionCollapsibleToggle } from "@/shared/ui";
 import { useAcntgSeMngTree } from "@/entities/acntg";
 import { useEsntlAtchFileMngTree } from "@/entities/esntl";
 import {
@@ -259,79 +260,84 @@ function FnrsFormPage({ mode, initialData, createDefaults }: FnrsFormPageProps)
 
   return (
     <FormProvider {...form}>
-      <form onSubmit={form.handleSubmit(onSave)} className="mt-6 space-y-4">
-        {initialData?.detDto?.fnrsCnsltnDocNo && (
-          <ProgressStatusSection
-            columns={PROGRESS_STATUS_COLUMNS}
-            sttsChgHstryList={initialData?.sttsChgHstryList ?? []}
-            elaprDocNo={initialData.detDto.fnrsCnsltnDocNo}
-          />
-        )}
-        <BasicInfoFormSection />
-        <ContactInfoFormSection fieldPrefix="fnrsCnsltnMng" />
-        <PrivacyConsentSection />
-        <BusinessScaleFormSection />
-        <BusinessCostFormSection />
-        <FnrsSharFormSection
-          initialSharTree={isEditMode ? initialData?.fnrsSharList : undefined}
-          initialSharAtchFiles={isEditMode ? initialData?.sharAtchFileList : undefined}
-        />
-        <ChecklistFormSection docSeComCd="FNRS" fieldPrefix="fnrsCnsltnMng" />
-        <AttachmentsFormSection
-          docSeComCd="FNRS"
-          fieldPrefix="fnrsCnsltnMng"
-          initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
-          initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
-        />
-        <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />
-
-        <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
-          <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
-            <Button
-              color="white"
-              type="button"
-              onClick={() => router.push("/fnrs-cnsltn")}
-              disabled={isSubmitting}
-            >
-              목록
-            </Button>
-            {!isSplmntPrgrsStts ? (
-              <>
-                <Button type="submit" disabled={isSubmitting}>
-                  저장
-                </Button>
-                {isEditMode && (
-                  <>
-                    <Button
-                      color="green"
-                      type="button"
-                      onClick={handleApplyClick}
-                      disabled={isSubmitting}
-                    >
-                      신청완료
-                    </Button>
-                    <Button
-                      color="red"
-                      type="button"
-                      onClick={handleDelClick}
-                      disabled={isSubmitting}
-                    >
-                      삭제
-                    </Button>
-                  </>
-                )}
-              </>
-            ) : (
-              <Button
-                type="button"
-                onClick={form.handleSubmit(onSplmntCmptn)}
-                disabled={isSubmitting}
-              >
-                보완완료
-              </Button>
+      <form onSubmit={form.handleSubmit(onSave)} className="mt-4">
+        <SectionCollapsibleGroup>
+          <SectionCollapsibleToggle />
+          <div className="space-y-4">
+            {initialData?.detDto?.fnrsCnsltnDocNo && (
+              <ProgressStatusSection
+                columns={PROGRESS_STATUS_COLUMNS}
+                sttsChgHstryList={initialData?.sttsChgHstryList ?? []}
+                elaprDocNo={initialData.detDto.fnrsCnsltnDocNo}
+              />
             )}
+            <BasicInfoFormSection />
+            <ContactInfoFormSection fieldPrefix="fnrsCnsltnMng" />
+            <PrivacyConsentSection />
+            <BusinessScaleFormSection />
+            <BusinessCostFormSection />
+            <FnrsSharFormSection
+              initialSharTree={isEditMode ? initialData?.fnrsSharList : undefined}
+              initialSharAtchFiles={isEditMode ? initialData?.sharAtchFileList : undefined}
+            />
+            <ChecklistFormSection docSeComCd="FNRS" fieldPrefix="fnrsCnsltnMng" />
+            <AttachmentsFormSection
+              docSeComCd="FNRS"
+              fieldPrefix="fnrsCnsltnMng"
+              initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
+              initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
+            />
+            <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />
+
+            <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
+              <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
+                <Button
+                  color="white"
+                  type="button"
+                  onClick={() => router.push("/fnrs-cnsltn")}
+                  disabled={isSubmitting}
+                >
+                  목록
+                </Button>
+                {!isSplmntPrgrsStts ? (
+                  <>
+                    <Button type="submit" disabled={isSubmitting}>
+                      저장
+                    </Button>
+                    {isEditMode && (
+                      <>
+                        <Button
+                          color="green"
+                          type="button"
+                          onClick={handleApplyClick}
+                          disabled={isSubmitting}
+                        >
+                          신청완료
+                        </Button>
+                        <Button
+                          color="red"
+                          type="button"
+                          onClick={handleDelClick}
+                          disabled={isSubmitting}
+                        >
+                          삭제
+                        </Button>
+                      </>
+                    )}
+                  </>
+                ) : (
+                  <Button
+                    type="button"
+                    onClick={form.handleSubmit(onSplmntCmptn)}
+                    disabled={isSubmitting}
+                  >
+                    보완완료
+                  </Button>
+                )}
+              </div>
+            </div>
           </div>
-        </div>
+        </SectionCollapsibleGroup>
       </form>
     </FormProvider>
   );
diff --git a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
index dfdda4a8f..adf563c65 100644
--- a/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
+++ b/apps/as/src/pages/instl-sncn/ui/instl-form-page.tsx
@@ -9,6 +9,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useAlertStore, useUserStore } from "@/shared/lib";
+import { SectionCollapsibleGroup, SectionCollapsibleToggle } from "@/shared/ui";
 import { useEsntlAtchFileMngTree } from "@/entities/esntl";
 import {
   type InstlSncnApplySaveRequestDto,
@@ -222,75 +223,80 @@ function InstlFormPage({ mode, initialData, createDefaults }: InstlFormPageProps
 
   return (
     <FormProvider {...form}>
-      <form onSubmit={form.handleSubmit(onSave)} className="mt-6 space-y-4">
-        {initialData?.detDto.instlSncnDocNo && (
-          <ProgressStatusSection
-            columns={PROGRESS_STATUS_COLUMNS}
-            sttsChgHstryList={initialData?.sttsChgHstryList ?? []}
-            elaprDocNo={initialData.detDto.instlSncnDocNo}
-          />
-        )}
-        <BasicInfoFormSection />
-        <ContactInfoFormSection fieldPrefix="instlSncnMng" />
-        <PrivacyConsentSection />
-        <BusinessScaleFormSection />
-        <BusinessCostFormSection />
-        <ChecklistFormSection docSeComCd="INSTL" fieldPrefix="instlSncnMng" />
-        <AttachmentsFormSection
-          docSeComCd="INSTL"
-          fieldPrefix="instlSncnMng"
-          initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
-          initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
-        />
-        <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />
-
-        <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
-          <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
-            <Button
-              color="white"
-              type="button"
-              onClick={() => router.push("/instl-sncn")}
-              disabled={isSubmitting}
-            >
-              목록
-            </Button>
-            {!isSplmntPrgrsStts ? (
-              <>
-                <Button type="submit" disabled={isSubmitting}>
-                  저장
-                </Button>
-                {isEditMode && (
-                  <>
-                    <Button
-                      color="green"
-                      type="button"
-                      onClick={form.handleSubmit(onApply)}
-                      disabled={isSubmitting}
-                    >
-                      신청완료
-                    </Button>
-                    <Button
-                      color="red"
-                      type="button"
-                      onClick={handleDelClick}
-                      disabled={isSubmitting}
-                    >
-                      삭제
-                    </Button>
-                  </>
-                )}
-              </>
-            ) : (
-              <Button
-                type="button"
-                onClick={form.handleSubmit(onSplmntCmptn)}
-                disabled={isSubmitting}
-              >
-                보완완료
-              </Button>
+      <form onSubmit={form.handleSubmit(onSave)} className="mt-4">
+        <SectionCollapsibleGroup>
+          <SectionCollapsibleToggle />
+          <div className="space-y-4">
+            {initialData?.detDto.instlSncnDocNo && (
+              <ProgressStatusSection
+                columns={PROGRESS_STATUS_COLUMNS}
+                sttsChgHstryList={initialData?.sttsChgHstryList ?? []}
+                elaprDocNo={initialData.detDto.instlSncnDocNo}
+              />
             )}
+            <BasicInfoFormSection />
+            <ContactInfoFormSection fieldPrefix="instlSncnMng" />
+            <PrivacyConsentSection />
+            <BusinessScaleFormSection />
+            <BusinessCostFormSection />
+            <ChecklistFormSection docSeComCd="INSTL" fieldPrefix="instlSncnMng" />
+            <AttachmentsFormSection
+              docSeComCd="INSTL"
+              fieldPrefix="instlSncnMng"
+              initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
+              initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
+            />
+            <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />
+
+            <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
+              <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
+                <Button
+                  color="white"
+                  type="button"
+                  onClick={() => router.push("/instl-sncn")}
+                  disabled={isSubmitting}
+                >
+                  목록
+                </Button>
+                {!isSplmntPrgrsStts ? (
+                  <>
+                    <Button type="submit" disabled={isSubmitting}>
+                      저장
+                    </Button>
+                    {isEditMode && (
+                      <>
+                        <Button
+                          color="green"
+                          type="button"
+                          onClick={form.handleSubmit(onApply)}
+                          disabled={isSubmitting}
+                        >
+                          신청완료
+                        </Button>
+                        <Button
+                          color="red"
+                          type="button"
+                          onClick={handleDelClick}
+                          disabled={isSubmitting}
+                        >
+                          삭제
+                        </Button>
+                      </>
+                    )}
+                  </>
+                ) : (
+                  <Button
+                    type="button"
+                    onClick={form.handleSubmit(onSplmntCmptn)}
+                    disabled={isSubmitting}
+                  >
+                    보완완료
+                  </Button>
+                )}
+              </div>
+            </div>
           </div>
-        </div>
+        </SectionCollapsibleGroup>
       </form>
     </FormProvider>
   );
diff --git a/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-form-page.tsx b/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-form-page.tsx
index f0dbca589..fe29ccaa7 100644
--- a/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-form-page.tsx
+++ b/apps/as/src/pages/sewer-bsc-plan/ui/sewer-bsc-plan-form-page.tsx
@@ -9,6 +9,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { useAlertStore, useUserStore } from "@/shared/lib";
+import { SectionCollapsibleGroup, SectionCollapsibleToggle } from "@/shared/ui";
 import { useAcntgSeMngTree } from "@/entities/acntg";
 import { useEsntlAtchFileMngTree } from "@/entities/esntl";
 import {
@@ -240,76 +241,81 @@ function SewerBscPlanFormPage({
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSave)} className="mt-6 space-y-4">
-        {initialData?.detDto?.sewerBscPlanDocNo && (
-          <ProgressStatusSection
-            columns={PROGRESS_STATUS_COLUMNS}
-            sttsChgHstryList={initialData?.sttsChgHstryList ?? []}
-            elaprDocNo={initialData.detDto.sewerBscPlanDocNo}
-          />
-        )}
-        <BasicInfoFormSection />
-        <ContactInfoFormSection fieldPrefix="sewerBscPlanDtl" />
-        <PrivacyConsentSection />
-        <OutlineFormSection />
-        <BizCstMatrixFormSection />
-        <FnrsCstFormSection />
-        <TmplntFormSection />
-        <ChecklistFormSection docSeComCd="SEWER" fieldPrefix="sewerBscPlan" />
-        <AttachmentsFormSection
-          docSeComCd="SEWER"
-          fieldPrefix="sewerBscPlanDtl"
-          initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
-          initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
-        />
-        {isEditMode && <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />}
-
-        <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
-          <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
-            <Button
-              color="white"
-              type="button"
-              onClick={() => router.push("/sewer-bsc-plan")}
-              disabled={isSubmitting}
-            >
-              목록
-            </Button>
-            {!isSplmntPrgrsStts ? (
-              <>
-                <Button type="submit" disabled={isSubmitting}>
-                  저장
-                </Button>
-                {isEditMode && (
-                  <>
-                    <Button
-                      color="green"
-                      type="button"
-                      onClick={handleApplyClick}
-                      disabled={isSubmitting}
-                    >
-                      신청완료
-                    </Button>
-                    <Button
-                      color="red"
-                      type="button"
-                      onClick={handleDelClick}
-                      disabled={isSubmitting}
-                    >
-                      삭제
-                    </Button>
-                  </>
-                )}
-              </>
-            ) : (
-              <Button
-                type="button"
-                onClick={form.handleSubmit(onSplmntCmptn)}
-                disabled={isSubmitting}
-              >
-                보완완료
-              </Button>
+        <SectionCollapsibleGroup>
+          <SectionCollapsibleToggle />
+          <div className="space-y-4">
+            {initialData?.detDto?.sewerBscPlanDocNo && (
+              <ProgressStatusSection
+                columns={PROGRESS_STATUS_COLUMNS}
+                sttsChgHstryList={initialData?.sttsChgHstryList ?? []}
+                elaprDocNo={initialData.detDto.sewerBscPlanDocNo}
+              />
             )}
+            <BasicInfoFormSection />
+            <ContactInfoFormSection fieldPrefix="sewerBscPlanDtl" />
+            <PrivacyConsentSection />
+            <OutlineFormSection />
+            <BizCstMatrixFormSection />
+            <FnrsCstFormSection />
+            <TmplntFormSection />
+            <ChecklistFormSection docSeComCd="SEWER" fieldPrefix="sewerBscPlan" />
+            <AttachmentsFormSection
+              docSeComCd="SEWER"
+              fieldPrefix="sewerBscPlanDtl"
+              initialEsntlFiles={isEditMode ? initialData?.esntlFileList : undefined}
+              initialEtcFiles={isEditMode ? initialData?.etcFileList : undefined}
+            />
+            {isEditMode && <SplmntDmndFormSection readOnly={!isSplmntPrgrsStts} />}
+
+            <div className="sticky bottom-0 z-40 !-mb-2 border-t bg-white pb-8 pt-6 shadow-[0_-4px_12px_rgba(0,0,0,0.06)]">
+              <div className="mx-4 flex flex-wrap justify-center gap-3 sm:gap-4">
+                <Button
+                  color="white"
+                  type="button"
+                  onClick={() => router.push("/sewer-bsc-plan")}
+                  disabled={isSubmitting}
+                >
+                  목록
+                </Button>
+                {!isSplmntPrgrsStts ? (
+                  <>
+                    <Button type="submit" disabled={isSubmitting}>
+                      저장
+                    </Button>
+                    {isEditMode && (
+                      <>
+                        <Button
+                          color="green"
+                          type="button"
+                          onClick={handleApplyClick}
+                          disabled={isSubmitting}
+                        >
+                          신청완료
+                        </Button>
+                        <Button
+                          color="red"
+                          type="button"
+                          onClick={handleDelClick}
+                          disabled={isSubmitting}
+                        >
+                          삭제
+                        </Button>
+                      </>
+                    )}
+                  </>
+                ) : (
+                  <Button
+                    type="button"
+                    onClick={form.handleSubmit(onSplmntCmptn)}
+                    disabled={isSubmitting}
+                  >
+                    보완완료
+                  </Button>
+                )}
+              </div>
+            </div>
           </div>
-        </div>
+        </SectionCollapsibleGroup>
       </form>
     </FormProvider>
   );