fix: update funding AddEvidenceFrame

academic-relations · Jan 24, 2025 · 47e4352 · 47e4352
1 parent f14e31e
commit 47e4352
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 114 deletions.
diff --git a/packages/web/src/features/manage-club/funding/detail/components/FundingInfoList.tsx b/packages/web/src/features/manage-club/funding/detail/components/FundingInfoList.tsx
@@ -38,7 +38,9 @@ const FundingInfoList: React.FC<FundingInfoListProps> = ({ data }) => (
       지원금 정보
     </Typography>
     <ListItem>항목명: {data.name}</ListItem>
-    <ListItem>지출 목적: {data.purposeActivity?.name}</ListItem>
+    <ListItem>
+      지출 목적: {data.purposeActivity?.name ?? "활동보고서로 증빙 불가"}
+    </ListItem>
     <ListItem>지출 일자: {formatDate(data.expenditureDate)}</ListItem>
     <ListItem>지출 금액: {data.expenditureAmount.toLocaleString()}원</ListItem>
   </FlexWrapper>

diff --git a/packages/web/src/features/manage-club/funding/frames/AddEvidenceFrame.tsx b/packages/web/src/features/manage-club/funding/frames/AddEvidenceFrame.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import { useFormContext } from "react-hook-form";
 
@@ -36,6 +36,11 @@ const AddEvidenceFrame: React.FC = () => {
   const isJointExpense = watch("isJointExpense");
   const isEtcExpense = watch("isEtcExpense");
 
+  const isNoActivityPurpose = useMemo(
+    () => isActivityReportUnverifiable(purposeId),
+    [purposeId],
+  );
+
   return (
     <FoldableSectionTitle title="추가 증빙">
       <FlexWrapper direction="column" gap={40}>
@@ -51,130 +56,167 @@ const AddEvidenceFrame: React.FC = () => {
               추가 증빙 분류
             </Typography>
             <FlexWrapper direction="column" gap={12}>
-              <CheckboxOption
-                optionText="(활동보고서로 증빙이 불가능한) 동아리 용품"
-                checked={isActivityReportUnverifiable(Number(purposeId))}
-                onClick={() => {}}
-              />
-              <FormController
-                name="isFixture"
-                control={control}
-                renderItem={({ value, onChange }) => (
+              {isNoActivityPurpose ? (
+                <>
                   <CheckboxOption
-                    optionText="비품"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                    optionText="(활동보고서로 증빙이 불가능한) 동아리 용품"
+                    checked={isNoActivityPurpose}
+                    onClick={() => {}}
+                  />{" "}
+                  <FormController
+                    name="isFixture"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="비품"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
-              <FormController
-                name="isTransportation"
-                control={control}
-                renderItem={({ value, onChange }) => (
-                  <CheckboxOption
-                    optionText="교통비"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                  <FormController
+                    name="isNonCorporateTransaction"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="비법인 거래"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
-              <FormController
-                name="isNonCorporateTransaction"
-                control={control}
-                renderItem={({ value, onChange }) => (
-                  <CheckboxOption
-                    optionText="비법인 거래"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                  <FormController
+                    name="isEtcExpense"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="기타"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
-              <FormController
-                name="isFoodExpense"
-                control={control}
-                renderItem={({ value, onChange }) => (
-                  <CheckboxOption
-                    optionText="식비"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                </>
+              ) : (
+                <>
+                  <FormController
+                    name="isFixture"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="비품"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
-              <FormController
-                name="isLaborContract"
-                control={control}
-                renderItem={({ value, onChange }) => (
-                  <CheckboxOption
-                    optionText="근로 계약"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                  <FormController
+                    name="isTransportation"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="교통비"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
-              <FormController
-                name="isExternalEventParticipationFee"
-                control={control}
-                renderItem={({ value, onChange }) => (
-                  <CheckboxOption
-                    optionText="외부 행사 참가비"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                  <FormController
+                    name="isNonCorporateTransaction"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="비법인 거래"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
-              <FormController
-                name="isPublication"
-                control={control}
-                renderItem={({ value, onChange }) => (
-                  <CheckboxOption
-                    optionText="발간물"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                  <FormController
+                    name="isFoodExpense"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="식비"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
-              <FormController
-                name="isProfitMakingActivity"
-                control={control}
-                renderItem={({ value, onChange }) => (
-                  <CheckboxOption
-                    optionText="수익 사업"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                  <FormController
+                    name="isLaborContract"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="근로 계약"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
-              <FormController
-                name="isJointExpense"
-                control={control}
-                renderItem={({ value, onChange }) => (
-                  <CheckboxOption
-                    optionText="공동 경비"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                  <FormController
+                    name="isExternalEventParticipationFee"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="외부 행사 참가비"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
-              <FormController
-                name="isEtcExpense"
-                control={control}
-                renderItem={({ value, onChange }) => (
-                  <CheckboxOption
-                    optionText="기타"
-                    checked={value}
-                    onClick={() => onChange(!value)}
+                  <FormController
+                    name="isPublication"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="발간물"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
+                  />
+                  <FormController
+                    name="isProfitMakingActivity"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="수익 사업"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
                   />
-                )}
-              />
+                  <FormController
+                    name="isJointExpense"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="공동 경비"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
+                  />
+                  <FormController
+                    name="isEtcExpense"
+                    control={control}
+                    renderItem={({ value, onChange }) => (
+                      <CheckboxOption
+                        optionText="기타"
+                        checked={value}
+                        onClick={() => onChange(!value)}
+                      />
+                    )}
+                  />
+                </>
+              )}
             </FlexWrapper>
           </FlexWrapper>
         </Card>
         {/* 활보로 증빙 불가능한 동아리 용품 */}
-        {isActivityReportUnverifiable(Number(purposeId)) && (
-          <FixtureEvidenceBlock
-            isFixture={false}
-            required={isActivityReportUnverifiable(Number(purposeId))}
-          />
+        {isNoActivityPurpose && (
+          <FixtureEvidenceBlock isFixture={false} required />
         )}
         {isFixture && <FixtureEvidenceBlock isFixture required={isFixture} />}
         {isTransportation && (

diff --git a/packages/web/src/features/manage-club/funding/frames/FundingForm.tsx b/packages/web/src/features/manage-club/funding/frames/FundingForm.tsx
@@ -30,8 +30,8 @@ const FundingForm: React.FC<FundingFormProps> = ({
     defaultValues: {
       ...initialData,
       purposeActivity: {
-        id: initialData?.purposeActivity?.id,
-        name: initialData?.purposeActivity?.name,
+        id: initialData?.purposeActivity?.id ?? Infinity,
+        name: initialData?.purposeActivity?.name ?? "활동보고서로 증빙 불가",
       },
     },
   });

diff --git a/packages/web/src/features/manage-club/funding/types/funding.ts b/packages/web/src/features/manage-club/funding/types/funding.ts
@@ -98,4 +98,4 @@ export interface AddEvidence {
 export type FundingFormData = FundingInfo & BasicEvidence & AddEvidence;
 
 export const isActivityReportUnverifiable = (purposeId?: number) =>
-  purposeId === Infinity || purposeId == null;
+  purposeId === Infinity;