[as] feat: 행정지원 신청 패널 전체접기/펼침 기능

This commit is contained in:
2026-08-26 14:04:36 +09:00
parent cff7b7da30
commit 8bda55c653
4 changed files with 275 additions and 246 deletions
@@ -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>
);
@@ -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>
);
@@ -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>
);
@@ -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>
);