Feat/#55 msw적용

.env

@@ -1,2 +1,5 @@
+NEXT_PUBLIC_BAES_URL=http://localhost:8080
+
 NEXT_PUBLIC_KAKAO_MAP_REST_API=179a8c907891026029fb59adbc860843
-NEXT_PUBLIC_KAKAO_MAP_CLIENT=4948158107c883c7ba08e9ca9ea1fbb7
+NEXT_PUBLIC_KAKAO_MAP_CLIENT=4948158107c883c7ba08e9ca9ea1fbb7
+

src/app/(main)/page.tsx

@@ -5,6 +5,12 @@ import MainIntroduce from '@/src/components/mainPage/MainIntroduce';
 import Banner from '@/src/components/mainPage/Banner';
 import AdvertisementModal from '@/src/components/auctionPage/AdvertisementModal';
 import { getCookie } from 'cookies-next';
+import MainProducts from '@/src/components/mainPage/MainProducts';
+import {
+  useExpensiveProductBoard,
+  useLikeProductBoard,
+  useRecentProductBoard,
+} from '@/src/remote/query/main';
 import styles from './index.module.scss';
 
 export default function Home() {
@@ -15,9 +21,16 @@ export default function Home() {
     setOpen(!modalCookie);
   }, []);
 
+  const { data: expensiveProducts } = useExpensiveProductBoard();
+  const { data: recentProducts } = useRecentProductBoard();
+  const { data: likeProudcts } = useLikeProductBoard();
+
   return (
     <main className={styles.main}>
       <Banner />
+      <MainProducts title="인기 경매글 탑 4" data={likeProudcts} />
+      <MainProducts title="가장 비싼 경매글 탑 4" data={expensiveProducts} />
+      <MainProducts title="최근 경매글" data={recentProducts} />
       <MainIntroduce />
       {open && <AdvertisementModal setOpen={setOpen} />}
     </main>

src/app/not-found.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+import React from 'react';
+import classNamees from 'classnames/bind';
+import styles from '../styles/not-found.module.scss';
+
+const cx = classNamees.bind(styles);
+
+const NotFound = () => {
+  return (
+    <div className={cx('page')}>
+      <p>존재하지 않는 페이지입니다 !</p>
+      <Link href="/">홈으로 돌아가기</Link>
+    </div>
+  );
+};
+
+export default NotFound;

src/components/auctionDetailPage/ProductInfo/index.tsx

@@ -11,6 +11,7 @@ import classNamees from 'classnames/bind';
 import Navigator from '@/src/common/Navigator';
 import { useRecoilValue } from 'recoil';
 import { arriveLocationState } from '@/src/atom';
+import { AiFillLike, AiOutlineLike } from 'react-icons/ai';
 import Map from '../../../common/Map';
 import styles from './index.module.scss';
 
@@ -88,9 +89,9 @@ const ProductInfo = ({ productInfo, arriveLocation }: Props) => {
         )}
 
         <div className={cx('like')}>
-          {/* <div onClick={clickLike}>
-            {like ? <AiFillLike size={64} /> : <AiOutlineLike size={64} />}
-          </div> */}
+          <div onClick={clickLike}>
+            <AiFillLike size={64} />
+          </div>
           <p className={cx('likeNum')}>{board.likesCount}</p>
         </div>
         <button

src/components/mainPage/MainIntroduce/index.tsx

@@ -5,8 +5,7 @@ import Image from 'next/image';
 import introduceP1 from '../../../assets/main/introduce1.png';
 import introduceP2 from '../../../assets/main/introduce2.png';
 import introduceP3 from '../../../assets/main/introduce3.png';
-import blueIntroduce2 from '../../../assets/main/blurIntroduce2.png';
-import blueIntroduce3 from '../../../assets/main/blueIntroduce3.png';
+
 import styles from './index.module.scss';
 import UseLazyLoading from './useLazyLoading';
 

src/components/mainPage/MainProducts/index.module.scss

@@ -0,0 +1,61 @@
+@import '@/src/styles/media.scss';
+
+.wrapper {
+  width: 80%;
+  margin: 0 auto;
+  & > h4 {
+    font-size: 3.5rem;
+    font-weight: 600;
+    margin-top: 5rem;
+  }
+}
+
+.products {
+  display: flex;
+  overflow-x: scroll;
+  padding-bottom: 3rem;
+  & > div {
+    display: flex;
+    flex-direction: column;
+
+    min-width: 350px;
+    flex-grow: 1;
+
+    & > p {
+      font-size: 2.5rem;
+
+      & > strong {
+        font-size: 2.8rem;
+        font-weight: bold;
+      }
+    }
+  }
+  & > div > div {
+    position: relative;
+    flex-grow: 1;
+    margin: 1rem;
+    height: 25rem;
+    cursor: pointer;
+
+    @include mobile {
+      min-width: 50%;
+    }
+  }
+}
+
+.salesMark {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  font-size: 5rem;
+
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+  background-color: gray;
+
+  & > span {
+    transform: rotate(-5deg);
+  }
+}

src/components/mainPage/MainProducts/index.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useExpensiveProductBoard } from '@/src/remote/query/main';
+import React from 'react';
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import styles from './index.module.scss';
+
+type Props = {
+  title: string;
+  data: any;
+};
+
+const cx = classNames.bind(styles);
+
+const MainProducts = ({ data, title }: Props) => {
+  const router = useRouter();
+
+  const gotoDetailProduct = (id: string, salesStatus: boolean) => {
+    if (salesStatus) {
+      alert('이미 판매가 완료된 상품입니다.');
+    } else {
+      router.push(`/auction/${id}`);
+    }
+  };
+
+  return (
+    <div className={cx('wrapper')}>
+      <h4>{title}</h4>
+      <div className={cx('products')}>
+        {data?.data?.map((item: any) => {
+          return (
+            <div key={item.id}>
+              <div onClick={() => gotoDetailProduct(item.id, item.salesStatus)}>
+                <Image fill src={item.imageUrl} alt="product" />
+                {item.salesStatus ? (
+                  <div className={cx('salesMark')}>
+                    <span>SOLD OUT</span>
+                  </div>
+                ) : null}
+              </div>
+              <p>
+                현재 낙찰가 : <strong>{item.stuffPrice}</strong>원
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default MainProducts;

src/mocks/expensiveProductHandler/index.ts

@@ -0,0 +1,8 @@
+import { HttpResponse, http } from 'msw';
+import { MOCK_EXPENSIVE_DATA } from './mock';
+
+export const expensiveProductHandlers = [
+  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/expensive`, () => {
+    return HttpResponse.json(MOCK_EXPENSIVE_DATA);
+  }),
+];

src/mocks/expensiveProductHandler/mock.ts

@@ -0,0 +1,84 @@
+export const MOCK_EXPENSIVE_DATA = {
+  data: [
+    {
+      createAt: '2024-03-04T01:19:14.394Z',
+      id: 49,
+      stuffName: '무인도',
+      stuffContent: '섬 팔아요',
+      stuffPrice: 900000000,
+      salesStatus: false,
+      stuffCategory: '생활용품',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/52eccd8e3bbd4c164b09e5aead79ae59.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T01:17:53.320Z',
+      id: 48,
+      stuffName: '속초 집',
+      stuffContent: '\b집 팔아요',
+      stuffPrice: 2000000000,
+      salesStatus: false,
+      stuffCategory: '홈인테리어',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/fe562d435d2e9064f08d7d71f79eb345.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T01:17:12.770Z',
+      id: 47,
+      stuffName: '외제차',
+      stuffContent: '\b외제차입니다.',
+      salesStatus: false,
+      stuffPrice: 500000000,
+      stuffCategory: '스포츠/레저',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/dc5bc4aae486f577f19f632bb8432a55.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+    {
+      createAt: '2024-03-04T01:16:31.861Z',
+      id: 46,
+      stuffName: '프라다 가방',
+      stuffContent: '프라다 가방입니다.\r\n명품입니다.',
+      salesStatus: false,
+      stuffPrice: 3000000,
+      stuffCategory: '뷰티',
+      imageUrl:
+        'https://imguploads3.s3.ap-northeast-2.amazonaws.com/edc2a570e4008d290476186f1d7bffeb.jpg',
+      creator: {
+        id: 1,
+        province: {
+          name: '경기도',
+        },
+        city: {
+          name: '성남시',
+        },
+      },
+    },
+  ],
+};

src/mocks/handler.ts

@@ -1,3 +1,10 @@
 import { HttpHandler } from 'msw';
+import { expensiveProductHandlers } from './expensiveProductHandler';
+import { likeProductHandlers } from './likeProductHandler';
+import { recentProductHandlers } from './recentProductHandler';
 
-export const handlers: HttpHandler[] = [];
+export const handlers: HttpHandler[] = [
+  ...expensiveProductHandlers,
+  ...likeProductHandlers,
+  ...recentProductHandlers,
+];

src/mocks/likeProductHandler/index.ts

@@ -0,0 +1,8 @@
+import { HttpResponse, http } from 'msw';
+import { MOCK_LIKE_DATA } from './mock';
+
+export const likeProductHandlers = [
+  http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/like`, () => {
+    return HttpResponse.json(MOCK_LIKE_DATA);
+  }),
+];