From 6338a28ffbb951a4b1edd44c248c8b868cc21f6d Mon Sep 17 00:00:00 2001
From: hamo-o <yheel369@gmail.com>
Date: Fri, 30 Aug 2024 18:04:07 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20zustand=20name,=20amount=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=A9=94=EC=84=9C=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/zustand/useProduct.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/hooks/zustand/useProduct.ts b/src/hooks/zustand/useProduct.ts
index b97c1c8..31876a4 100644
--- a/src/hooks/zustand/useProduct.ts
+++ b/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
   };
 };
 

From af9f12c53708f8ebaf3d7d58952494d2327c43be Mon Sep 17 00:00:00 2001
From: hamo-o <yheel369@gmail.com>
Date: Fri, 30 Aug 2024 18:04:41 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20CurrentRecruitmentType=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/member/memberType.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/apis/member/memberType.ts b/src/apis/member/memberType.ts
index abd5ae0..647d2f0 100644
--- a/src/apis/member/memberType.ts
+++ b/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;

From faa1dfe9f496567cedd137b04666459352639b34 Mon Sep 17 00:00:00 2001
From: hamo-o <yheel369@gmail.com>
Date: Fri, 30 Aug 2024 18:05:08 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=ED=95=98=EB=93=9C=EC=BD=94?=
 =?UTF-8?q?=EB=94=A9=EC=9D=B4=20=EC=95=84=EB=8B=8C=20API=20=EA=B0=92?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/payments/PaymentItemBox.tsx | 40 ++++++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/payments/PaymentItemBox.tsx b/src/components/payments/PaymentItemBox.tsx
index 2ee8bd6..1a0b33e 100644
--- a/src/components/payments/PaymentItemBox.tsx
+++ b/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>
+      )}
+    </>
   );
 };