[Fix] 하드코딩된 주문정보 변경 (#111)

* feat: zustand name, amount 변경 가능하도록 메서드 추가

* feat: CurrentRecruitmentType 타입 변경

* feat: 하드코딩이 아닌 API 값으로 이름 변경

src/apis/member/memberType.ts

@@ -14,6 +14,7 @@ export interface CurrentRecruitmentType {
     endDate: string;
     open: boolean;
   };
+  feeName: string;
   fee: number;
   roundType: 'FIRST' | 'SECOND';
   roundTypeValue: string;

src/components/payments/PaymentItemBox.tsx

@@ -1,15 +1,41 @@
 import { Flex, Text } from '@/components/common/Wrapper';
 import Box from 'wowds-ui/Box';
 import { useProductBase } from '@/hooks/zustand/useProduct';
+import memberApi from '@/apis/member/memberApi';
+import { useQuery } from '@tanstack/react-query';
+import LoadingSpinner from '../common/LoadingSpinner';
+import { useEffect } from 'react';
 
 export const PaymentItemBox = () => {
-  const { name, strAmount } = useProductBase();
+  const { name, strAmount, setName, setAmount } = useProductBase();
+  const { data: member, isLoading } = useQuery({
+    queryKey: ['member'],
+    queryFn: memberApi.GET_DASHBOARD
+  });
+
+  useEffect(() => {
+    if (member) {
+      setName(member.currentRecruitmentRound.feeName);
+      setAmount(member.currentRecruitmentRound.fee);
+    }
+  }, [member, setAmount, setName]);
+
   return (
-    <Flex justify="flex-start" direction="column" align="flex-start" gap="sm">
-      <Text typo="h2" color="black">
-        결제 항목
-      </Text>
-      <Box text={name} subText={`금액 ${strAmount}원`} status="success" />
-    </Flex>
+    <>
+      {isLoading || !member ? (
+        <LoadingSpinner />
+      ) : (
+        <Flex
+          justify="flex-start"
+          direction="column"
+          align="flex-start"
+          gap="sm">
+          <Text typo="h2" color="black">
+            결제 항목
+          </Text>
+          <Box text={name} subText={`금액 ${strAmount}원`} status="success" />
+        </Flex>
+      )}
+    </>
   );
 };

src/hooks/zustand/useProduct.ts

@@ -2,20 +2,24 @@ import { create } from 'zustand';
 import { useShallow } from 'zustand/react/shallow';
 
 type ProductStore = {
-  name: string;
+  name: string | null;
   amount: number;
   totalAmount: number;
   discount: number;
   issuedCouponId: number | null;
+  setName: (name: string) => void;
+  setAmount: (amount: number) => void;
   setDiscount: (discount: number, couponId: number) => void;
 };
 
 export const useProductStore = create<ProductStore>((set) => ({
-  name: '2024년 1학기 정회원 회비',
+  name: null,
   amount: 20000,
   totalAmount: 20000,
   discount: 0,
   issuedCouponId: null,
+  setName: (name) => set({ name }),
+  setAmount: (amount) => set({ amount }),
   setDiscount: (newDiscount, couponId) =>
     set((state) => ({
       discount: newDiscount,
@@ -26,17 +30,21 @@ export const useProductStore = create<ProductStore>((set) => ({
 }));
 
 export const useProductBase = () => {
-  const { name, amount } = useProductStore(
+  const { name, amount, setName, setAmount } = useProductStore(
     useShallow((state) => ({
       name: state.name,
-      amount: state.amount
+      amount: state.amount,
+      setName: state.setName,
+      setAmount: state.setAmount
     }))
   );
 
   return {
     name,
     amount,
-    strAmount: amount.toLocaleString()
+    strAmount: amount.toLocaleString(),
+    setName,
+    setAmount
   };
 };