Feat/261

src/layouts/MyPage/Funding/FundingItem/index.tsx

@@ -6,29 +6,31 @@ import FundingCancelModal from 'components/ui/Modal/FundingCancelModal';
 import { useModal } from 'hooks/useModal';
 import { formatNumberWithUnit } from 'utils/format';
 
+import { MyInProgressFunding } from 'types/funding';
+
 import styles from './index.module.scss';
 
-// TODO : 펀딩 API 확인후 분리 예정
-type FundingItemProps = {
-  fundingId: number;
-  imgUrl: string;
-  price: number;
-  productName: string;
-  productId: number;
-  brandName: string;
-  brandId: number;
-  brandThumbnail: string;
-};
+type FundingItemProps = Pick<
+  MyInProgressFunding,
+  | 'fundingId'
+  | 'productPhoto'
+  | 'goalAmount'
+  | 'productName'
+  | 'productId'
+  | 'brandName'
+  | 'brandPhoto'
+  | 'brandId'
+>;
 
 const FundingItem = ({
   fundingId,
-  imgUrl,
-  price,
+  productPhoto,
+  goalAmount,
   productName,
   productId,
   brandName,
+  brandPhoto,
   brandId,
-  brandThumbnail,
 }: FundingItemProps) => {
   const { open, isOpen, close, scrollPos } = useModal();
 
@@ -41,10 +43,9 @@ const FundingItem = ({
         scrollPos={scrollPos}
       />
       <Link to={`/product/${productId}`}>
-        {/* TODO : Thumbnail 리팩토링시 교체 */}
         <img
           className={styles.img_product}
-          src={imgUrl}
+          src={productPhoto}
           alt={`${productName}상품이미지`}
         />
       </Link>
@@ -57,7 +58,7 @@ const FundingItem = ({
             <div className={styles.wrapper_brand}>
               <span className={styles.txt_brand}>
                 <img
-                  src={brandThumbnail}
+                  src={brandPhoto}
                   alt={`${brandName}로고이미지`}
                   className={styles.img_brand}
                 />
@@ -67,7 +68,7 @@ const FundingItem = ({
             </div>
           </Link>
           <p className={styles.txt_price}>
-            목표금액<span>{formatNumberWithUnit(price)}</span>
+            목표금액<span>{formatNumberWithUnit(goalAmount)}</span>
           </p>
         </div>
         <div className={styles.wrapper_button}>

src/layouts/MyPage/Funding/FundingProgress/index.tsx

@@ -1,49 +1,56 @@
+import ProgressBar from 'components/ui/ProgressBar';
+
 import { formatNumberToPercent, formatNumberWithUnit } from 'utils/format';
 
+import { MyInProgressFunding } from 'types/funding';
+
 import styles from './index.module.scss';
 
-const data = {
-  current: 123456,
-  target: 990000,
-};
+type FundingProgressProps = Pick<
+  MyInProgressFunding,
+  'remainAmount' | 'goalAmount' | 'accumulateAmount'
+>;
 
-const FundingProgress = () => {
+const FundingProgress = ({
+  remainAmount,
+  goalAmount,
+  accumulateAmount,
+}: FundingProgressProps) => {
   return (
     <section className={styles.area_progress}>
       <p className={styles.txt_title}>
         펀딩{' '}
         <span className={styles.txt_point}>
-          {formatNumberToPercent(data.current, data.target)}
+          {formatNumberToPercent(accumulateAmount, goalAmount)}
         </span>{' '}
         완료
       </p>
       <p className={styles.txt_sub_title}>
         목표 달성까지{' '}
         <span className={styles.txt_point}>
-          {formatNumberWithUnit(data.target - data.current)}
+          {formatNumberWithUnit(remainAmount)}
         </span>{' '}
         남았어요
       </p>
-      {/* TODO : 프로그레스바 삽입 예정 */}
-      <div style={{ backgroundColor: `blue`, margin: '20px 0' }}>
-        프로그레스바
+      <div>
+        <ProgressBar denominator={goalAmount} numerator={accumulateAmount} />
       </div>
       <p className={styles.txt_dec}>
         목표 금액
         <span className={styles.txt_price}>
-          {formatNumberWithUnit(data.target)}
+          {formatNumberWithUnit(goalAmount)}
         </span>
       </p>
       <p className={styles.txt_dec}>
         모인 금액
         <span className={styles.txt_price}>
-          {formatNumberWithUnit(data.current)}
+          {formatNumberWithUnit(accumulateAmount)}
         </span>
       </p>
       <p className={styles.txt_dec}>
         잔여 금액
         <span className={styles.txt_price}>
-          {formatNumberWithUnit(data.target - data.current)}
+          {formatNumberWithUnit(remainAmount)}
         </span>
       </p>
     </section>

src/layouts/MyPage/FundingBox/FundingTab/index.tsx

@@ -6,7 +6,7 @@ import EmptyItem from 'components/feature/EmptyItem';
 import Spinner from 'components/ui/Spinner';
 
 import { useInfinityScroll } from 'hooks/useInfinityScroll';
-import { getMyFundingItems } from 'services/api/v1/funding';
+import { getMyFundingBoxItems } from 'services/api/v1/funding';
 
 import { MyFundingItemType } from 'types/funding';
 
@@ -24,8 +24,8 @@ const FundingTab = ({ status }: FundingTabProps) => {
   const [page, setPage] = useState<number>(0);
 
   const { data, isLoading, refetch } = useQuery({
-    queryKey: ['fundingItem', status],
-    queryFn: () => getMyFundingItems(status),
+    queryKey: ['fundingBoxItems', status],
+    queryFn: () => getMyFundingBoxItems(status),
   });
 
   const observingTarget = useInfinityScroll(() => {

src/pages/MyPage/Funding/index.tsx

@@ -1,47 +1,52 @@
+import { useQuery } from '@tanstack/react-query';
+
 import EmptyItem from 'components/feature/EmptyItem';
+import Spinner from 'components/ui/Spinner';
 import FundingItem from 'layouts/MyPage/Funding/FundingItem';
+import FundingProgress from 'layouts/MyPage/Funding/FundingProgress';
 
 import { useUserStore } from 'store/useUserStore';
 
+import { getMyFundingItem } from 'services/api/v1/funding';
+
 import styles from './index.module.scss';
 
-// 목데이터
-const data = {
-  hasFunding: true,
-  userName: '보경',
-  fundingId: 1,
-  imgUrl:
-    'https://img1.kakaocdn.net/thumb/[email protected]/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240412000831_223be6cfd2eb40e3bbaf238fca8a56e9',
-  fundingItemName: '참이 포함된 트레이드마크 체인 팔찌',
-  fundingItemProductId: 9632965,
-  fundingItemBrandName: '구찌',
-  fundingItemBrandThumbnail:
-    'https://img1.kakaocdn.net/thumb/[email protected]/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fgift_brand%2F20240402164826_a474afeeff5e42d9bfd4d64025303e32.png',
-  fundingPrice: 600000,
-  brandId: 11481,
+const isEmptyObject = (obj: object): boolean => {
+  return Object.keys(obj).length === 0;
 };
 
 const Funding = () => {
   const { name } = useUserStore();
+  const { data, isFetched, isLoading } = useQuery({
+    queryKey: ['myFundingItem'],
+    queryFn: () => getMyFundingItem(),
+  });
 
   return (
     <>
       <div className={styles.title}>{`${name}님의 \n펀딩아이템`}</div>
-      {data.hasFunding ? (
-        <FundingItem
-          fundingId={data.fundingId}
-          imgUrl={data.imgUrl}
-          price={data.fundingPrice}
-          productName={data.fundingItemName}
-          productId={data.fundingItemProductId}
-          brandName={data.fundingItemBrandName}
-          brandThumbnail={data.fundingItemBrandThumbnail}
-          brandId={data.brandId}
-        />
+      {isFetched && data && !isEmptyObject(data) ? (
+        <>
+          <FundingItem
+            fundingId={data.fundingId}
+            productPhoto={data.productPhoto}
+            goalAmount={data.goalAmount}
+            productName={data.productName}
+            productId={data.productId}
+            brandName={data.brandName}
+            brandPhoto={data.brandPhoto}
+            brandId={data.brandId}
+          />
+          <FundingProgress
+            remainAmount={data.remainAmount}
+            goalAmount={data.goalAmount}
+            accumulateAmount={data.accumulateAmount}
+          />
+        </>
       ) : (
         <EmptyItem type="funding" />
       )}
-      <div>펀딩 아이템 추천 영역</div>
+      {isLoading && <Spinner />}
     </>
   );
 };

src/pages/MyPage/FundingBox/index.tsx

@@ -4,7 +4,7 @@ import Spinner from 'components/ui/Spinner';
 import Tabs from 'components/ui/Tabs';
 import FundingTab from 'layouts/MyPage/FundingBox/FundingTab';
 
-import { getMyFundingItems } from 'services/api/v1/funding';
+import { getMyFundingBoxItems } from 'services/api/v1/funding';
 
 import { Tab } from 'types/tab';
 
@@ -13,7 +13,7 @@ import styles from './index.module.scss';
 const FundingBox = () => {
   const { data, isLoading } = useQuery({
     queryKey: ['fundingItem'],
-    queryFn: () => getMyFundingItems(),
+    queryFn: () => getMyFundingBoxItems(),
   });
 
   const tabs: Tab[] = [

src/services/api/v1/funding.ts

@@ -1,9 +1,9 @@
 import { PaginationResponse } from 'types/PaginationResponse';
-import { MyFundingItemType } from 'types/funding';
+import { MyFundingItemType, MyInProgressFunding } from 'types/funding';
 
 import { apiV1 } from '.';
 
-export const getMyFundingItems = async (status?: string) => {
+export const getMyFundingBoxItems = async (status?: string) => {
   const baseUrl = `/funding/gift`;
 
   if (status) {
@@ -16,3 +16,9 @@ export const getMyFundingItems = async (status?: string) => {
 
   return myFundingItems.data as PaginationResponse<MyFundingItemType>;
 };
+
+export const getMyFundingItem = async () => {
+  const myFundingItem = await apiV1.get('/funding/myItem');
+
+  return myFundingItem.data as MyInProgressFunding;
+};

src/types/funding.ts

@@ -17,3 +17,21 @@ export type MyFundingItemType = {
   quantity: number;
   receivedDate: string;
 };
+
+type EmptyObject = Record<string, never>;
+
+export type MyInProgressFunding =
+  | {
+      fundingId: number;
+      progressRate: number;
+      remainAmount: number;
+      goalAmount: number;
+      accumulateAmount: number;
+      productId: number;
+      brandId: number;
+      brandPhoto: string;
+      productPhoto: string;
+      brandName: string;
+      productName: string;
+    }
+  | EmptyObject;