feat: update create funding form to use react-hook-form

academic-relations · Dec 29, 2024 · e1bca31 · e1bca31
1 parent cb89c21
commit e1bca31
Show file tree

Hide file tree

Showing 11 changed files with 732 additions and 476 deletions.
diff --git a/packages/web/src/app/manage-club/funding/create/page.tsx b/packages/web/src/app/manage-club/funding/create/page.tsx
@@ -1,53 +1,28 @@
 "use client";
 
-import React, { useState } from "react";
-
 import { useRouter } from "next/navigation";
 import { overlay } from "overlay-kit";
-import styled from "styled-components";
 
-import Button from "@sparcs-clubs/web/common/components/Button";
 import FlexWrapper from "@sparcs-clubs/web/common/components/FlexWrapper";
 import Modal from "@sparcs-clubs/web/common/components/Modal";
 import ConfirmModalContent from "@sparcs-clubs/web/common/components/Modal/ConfirmModalContent";
 import PageHead from "@sparcs-clubs/web/common/components/PageHead";
-import AddEvidenceFrame from "@sparcs-clubs/web/features/manage-club/funding/frames/AddEvidenceFrame";
-import BasicEvidenceFrame from "@sparcs-clubs/web/features/manage-club/funding/frames/BasicEvidenceFrame";
-import FundingInfoFrame from "@sparcs-clubs/web/features/manage-club/funding/frames/FundingInfoFrame";
-import { FundingInterface } from "@sparcs-clubs/web/features/manage-club/funding/types/funding";
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
+import FundingForm from "@sparcs-clubs/web/features/manage-club/funding/frames/FundingForm";
+import { FundingFormData } from "@sparcs-clubs/web/features/manage-club/funding/types/funding";
 
 const CreateFunding = () => {
-  const [funding, setFunding] = useState<FundingInterface>({
-    isFixture: false,
-    isTransportation: false,
-    isNonCorporateTransaction: false,
-    isFoodExpense: false,
-    isLaborContract: false,
-    isExternalEventParticipationFee: false,
-    isPublication: false,
-    isProfitMakingActivity: false,
-    isJointExpense: false,
-    isEtcExpense: false,
-    transportationPassengers: [],
-  });
-  const props = { funding, setFunding };
-
   const router = useRouter();
   const fundingCancelClick = () => {
     router.push("/manage-club/funding");
   };
 
-  const openConfirmModal = () => {
+  const openConfirmModal = (data: FundingFormData) => {
     overlay.open(({ isOpen, close }) => (
       <Modal isOpen={isOpen}>
         <ConfirmModalContent
           onConfirm={() => {
             // TODO: 신청 로직 넣기
+            console.log(data);
             close();
             router.push("/manage-club/funding");
           }}
@@ -69,17 +44,7 @@ const CreateFunding = () => {
         title="지원금 신청"
         enableLast
       />
-      <FundingInfoFrame {...props} />
-      <BasicEvidenceFrame {...props} />
-      <AddEvidenceFrame {...props} />
-      <ButtonWrapper>
-        <Button type="outlined" onClick={fundingCancelClick}>
-          취소
-        </Button>
-        <Button type="default" onClick={openConfirmModal}>
-          신청
-        </Button>
-      </ButtonWrapper>
+      <FundingForm onCancel={fundingCancelClick} onSubmit={openConfirmModal} />
     </FlexWrapper>
   );
 };

diff --git a/packages/web/src/common/components/Forms/DateInput.tsx b/packages/web/src/common/components/Forms/DateInput.tsx
@@ -12,6 +12,7 @@ interface DateInputProps {
   label?: string;
   disabled?: boolean;
   errorMessage?: string;
+  showIcon?: boolean;
 }
 
 const DateInputWrapper = styled.div<{ disabled: boolean }>`
@@ -52,10 +53,13 @@ const DateInputWrapper = styled.div<{ disabled: boolean }>`
   }
 `;
 
-const DateInput: React.FC<DateInputProps & DatePickerProps> = ({
+const DateInput: React.FC<
+  DateInputProps & Omit<DatePickerProps, "showIcon">
+> = ({
   label = "",
   disabled = false,
   errorMessage = "",
+  showIcon = false,
   ...props
 }) => {
   const datePickerRef = useRef<DatePicker | null>(null);
@@ -86,7 +90,7 @@ const DateInput: React.FC<DateInputProps & DatePickerProps> = ({
           }
           {...props}
         />
-        {props.showIcon && (
+        {showIcon && (
           <Icon type="event" size={20} color={disabled ? "#DDDDDD" : "BLACK"} />
         )}
       </DateInputWrapper>