Merge pull request #342 from prgrms-web-devcourse-final-project/feature/

#340

chore: 판매내역, 구매내역 발표시연 용 더미데이터 추가

src/constants/transaction.ts

@@ -1,3 +1,66 @@
 export const BUYING_TAB: string = "입찰중";
 export const COMPLETED_TAB: string = "거래완료";
 export const SELLING_TAB: string = "판매중";
+
+/** 시연용 더미 데이터 */
+const DUMMY_ING_URL: string = "/dummy/transaction";
+interface DummyPost {
+  imgUrl: string;
+  title: string;
+  price: number;
+  address: string;
+  uploadTime: string;
+  expiredTime: string;
+  maxPrice: number;
+}
+const address: string = "경기도 부천시 소사구 송내동";
+const uploadTimeArr: string[] = [
+  "2024-12-05 10:00:00",
+  "2024-12-08 15:00:00",
+  "2024-12-08 20:00:00",
+  "2024-12-04 23:00:00",
+  "2024-12-02 23:00:00",
+  "2024-11-01 23:00:00",
+  "2024-03-08 23:00:00",
+  "2023-12-08 23:00:00",
+];
+const expiredTimeArr: string[] = [
+  "2024-12-12 10:00:00",
+  "2024-12-11 15:00:00",
+  "2024-12-10 20:00:00",
+  "2024-12-10 23:00:00",
+  "2024-12-12 10:00:00",
+  "2024-12-11 15:00:00",
+  "2024-12-10 20:00:00",
+  "2024-12-10 23:00:00",
+];
+const titleArr: string[] = [
+  "JImMM CHOO 구두 240",
+  "스내치드 스몰 토트백 블랙",
+  "중고 반클리프 아펠 스위트 알함브라 펜던트 목걸이",
+  "L 사이즈 로즈 골드 컬러 쁘띠 CD 스타 참 반지",
+  "아이패드 mini 2",
+  "펠리칸 소베렌 M800",
+  "다리미 팔아요~",
+  "다이아 반지 처분합니다. ",
+];
+const priceArr: number[] = [
+  550000, 895000, 1850000, 25000, 150000, 199999, 10000, 299999,
+];
+const maxPriceArr: number[] = [
+  560000, 935000, 1855000, 30000, 150000, 230000, 13000, 499999,
+];
+
+export const TempData: DummyPost[] = titleArr.map((title, idx) => ({
+  imgUrl: DUMMY_ING_URL + `/${idx + 1}.png`,
+  title: title,
+  price: priceArr[idx],
+  address: address,
+  uploadTime: uploadTimeArr[idx],
+  expiredTime: expiredTimeArr[idx],
+  maxPrice: maxPriceArr[idx],
+}));
+
+export const TempBuyData: DummyPost[] = TempData.slice(0, 4);
+
+export const TempSellData: DummyPost[] = TempData.slice(4, 8);

src/pages/HomePage.tsx

@@ -75,7 +75,10 @@ export const HomePage = () => {
    * @returns void
    */
   const fetchPosts = async () => {
-    const response = await http.get<IHomePostResponse>(HOME_API_URL);
+    const response = await http.get<IHomePostResponse, { size: number }>(
+      HOME_API_URL,
+      { size: 100 }
+    );
     if (response.success && response.code === "COMMON200") {
       return response.result.content.map(createHomePostItem);
     }

src/pages/TransactionPage.tsx

@@ -4,8 +4,13 @@ import {
   TransactionBuyTemplate,
   TransactionSellTemplate,
 } from "components/templates";
-import { DEFAULT_IMG_PATH } from "constants/imgPath";
-import { BUYING_TAB, COMPLETED_TAB, SELLING_TAB } from "constants/transaction";
+import {
+  BUYING_TAB,
+  COMPLETED_TAB,
+  SELLING_TAB,
+  TempBuyData,
+  TempSellData,
+} from "constants/transaction";
 import { useModalForm } from "hooks";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
@@ -53,18 +58,37 @@ export const TransactionPage = ({ type }: TransactionPageProps) => {
   const TRANSACTION_API_URL = `/transaction/${type}`;
   const TRANSACTION_NAVIGATE_URL = "/product";
 
-  const tempPosts: IPost[] = Array.from({ length: 10 }, (_, index) => ({
-    productId: index + 1,
-    imgUrl: DEFAULT_IMG_PATH,
-    title: `물품 ${index + 1}`,
-    price: 3500 + index * 1000,
-    address: "신림동",
-    uploadTime: `2024-11-28 ${11 + index}:00:00`,
+  const tempSellPosts: IPost[] = TempSellData.map((data, idx) => ({
+    productId: idx + 1,
+    imgUrl: data.imgUrl,
+    title: data.title,
+    price: data.price,
+    address: data.address,
+    uploadTime: data.uploadTime,
+    onClick: () => {
+      todo();
+    },
+    expiredTime: data.expiredTime,
+    maxPrice: data.maxPrice,
+    onTextButtonClick: () => {
+      todo();
+    },
+    onIconButtonClick: () => {
+      console.log("Icon Button 클릭");
+    },
+  }));
+  const tempBuyPosts: IPost[] = TempBuyData.map((data, idx) => ({
+    productId: idx + 1,
+    imgUrl: data.imgUrl,
+    title: data.title,
+    price: data.price,
+    address: data.address,
+    uploadTime: data.uploadTime,
     onClick: () => {
       todo();
     },
-    expiredTime: `2024-12-29 ${11 + index}:00:00`,
-    maxPrice: 30000,
+    expiredTime: data.expiredTime,
+    maxPrice: data.maxPrice,
     onTextButtonClick: () => {
       todo();
     },
@@ -134,11 +158,11 @@ export const TransactionPage = ({ type }: TransactionPageProps) => {
   const { data, refetch } = useQuery({
     queryKey: ["transactionPosts", type],
     queryFn: fetchPosts,
-    initialData: tempPosts, // 에러 시 대체 데이터로 사용
+    initialData: tempSellPosts, // 에러 시 대체 데이터로 사용
     retry: 2, // 최대 2번만 재시도
     retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 3000), // 재시도 간격 (옵션)
   });
-
+  console.log(data);
   /** TODO : 탭 바뀔때마다 fecth 하도록 변경 필요 */
   const onHandleTab = async (tab: string) => {
     try {
@@ -172,10 +196,10 @@ export const TransactionPage = ({ type }: TransactionPageProps) => {
   return (
     <>
       {type === "buy" && (
-        <TransactionBuyTemplate onClick={onHandleTab} posts={data} />
+        <TransactionBuyTemplate onClick={onHandleTab} posts={tempBuyPosts} />
       )}
       {type === "sell" && (
-        <TransactionSellTemplate onClick={onHandleTab} posts={data} />
+        <TransactionSellTemplate onClick={onHandleTab} posts={tempSellPosts} />
       )}
     </>
   );