From ae4cb415e4de8224ed47a1d6c73b09a8eb9256e0 Mon Sep 17 00:00:00 2001 From: seunghwan Date: Sun, 3 Mar 2024 12:51:22 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20404=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/not-found.tsx | 17 +++++++++++++++++ src/styles/not-found.module.scss | 19 +++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 src/app/not-found.tsx create mode 100644 src/styles/not-found.module.scss diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..eb8fc4b --- /dev/null +++ b/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 ( +
+

존재하지 않는 페이지입니다 !

+ 홈으로 돌아가기 +
+ ); +}; + +export default NotFound; diff --git a/src/styles/not-found.module.scss b/src/styles/not-found.module.scss new file mode 100644 index 0000000..34c88f3 --- /dev/null +++ b/src/styles/not-found.module.scss @@ -0,0 +1,19 @@ +.page { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + min-height: calc(100vh - 80px - 15rem); + font-size: 5rem; + font-weight: bold; + + & > a { + font-size: 3rem; + background-color: var(--main-color); + padding: 3rem; + border-radius: 1rem; + color: white; + margin-top: 3rem; + } +} From c6c01c295626499e4bbbf10d330d1d3204a73f8a Mon Sep 17 00:00:00 2001 From: seunghwan Date: Sun, 3 Mar 2024 14:31:56 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20msw=20=EB=8D=94=EB=AF=B8=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 5 ++++- src/mocks/expensiveProductHandler/index.ts | 8 ++++++++ src/mocks/expensiveProductHandler/mock.ts | 5 +++++ src/mocks/handler.ts | 9 ++++++++- src/mocks/likeProductHandler/index.ts | 8 ++++++++ src/mocks/likeProductHandler/mock.ts | 5 +++++ src/mocks/recentProductHandler/index.ts | 8 ++++++++ src/mocks/recentProductHandler/mock.ts | 5 +++++ 8 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 src/mocks/expensiveProductHandler/index.ts create mode 100644 src/mocks/expensiveProductHandler/mock.ts create mode 100644 src/mocks/likeProductHandler/index.ts create mode 100644 src/mocks/likeProductHandler/mock.ts create mode 100644 src/mocks/recentProductHandler/index.ts create mode 100644 src/mocks/recentProductHandler/mock.ts diff --git a/.env b/.env index db5513b..75e4306 100644 --- a/.env +++ b/.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 \ No newline at end of file +NEXT_PUBLIC_KAKAO_MAP_CLIENT=4948158107c883c7ba08e9ca9ea1fbb7 + diff --git a/src/mocks/expensiveProductHandler/index.ts b/src/mocks/expensiveProductHandler/index.ts new file mode 100644 index 0000000..7e76d50 --- /dev/null +++ b/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); + }), +]; diff --git a/src/mocks/expensiveProductHandler/mock.ts b/src/mocks/expensiveProductHandler/mock.ts new file mode 100644 index 0000000..fea7917 --- /dev/null +++ b/src/mocks/expensiveProductHandler/mock.ts @@ -0,0 +1,5 @@ +export const MOCK_EXPENSIVE_DATA = { + data: { + EXPENSIVE: 'EXPENSIVE', + }, +}; diff --git a/src/mocks/handler.ts b/src/mocks/handler.ts index f45e1b6..be86629 100644 --- a/src/mocks/handler.ts +++ b/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, +]; diff --git a/src/mocks/likeProductHandler/index.ts b/src/mocks/likeProductHandler/index.ts new file mode 100644 index 0000000..486e3c2 --- /dev/null +++ b/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/expensive`, () => { + return HttpResponse.json(MOCK_LIKE_DATA); + }), +]; diff --git a/src/mocks/likeProductHandler/mock.ts b/src/mocks/likeProductHandler/mock.ts new file mode 100644 index 0000000..fa4042b --- /dev/null +++ b/src/mocks/likeProductHandler/mock.ts @@ -0,0 +1,5 @@ +export const MOCK_LIKE_DATA = { + data: { + LIKE: 'LIKE', + }, +}; diff --git a/src/mocks/recentProductHandler/index.ts b/src/mocks/recentProductHandler/index.ts new file mode 100644 index 0000000..b1d41a5 --- /dev/null +++ b/src/mocks/recentProductHandler/index.ts @@ -0,0 +1,8 @@ +import { HttpResponse, http } from 'msw'; +import { MOCK_RECENT_DATA } from './mock'; + +export const recentProductHandlers = [ + http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/expensive`, () => { + return HttpResponse.json(MOCK_RECENT_DATA); + }), +]; diff --git a/src/mocks/recentProductHandler/mock.ts b/src/mocks/recentProductHandler/mock.ts new file mode 100644 index 0000000..843d6fb --- /dev/null +++ b/src/mocks/recentProductHandler/mock.ts @@ -0,0 +1,5 @@ +export const MOCK_RECENT_DATA = { + data: { + RECENT: 'RECENT', + }, +}; From cf5cfb58e26ce5f223a818b4b323324d08b161ba Mon Sep 17 00:00:00 2001 From: seunghwan Date: Mon, 4 Mar 2024 08:54:14 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20msw=EB=A1=9C=20=EB=8D=94=EB=AF=B8?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(main)/page.tsx | 13 +++ .../mainPage/MainIntroduce/index.tsx | 3 +- .../mainPage/MainProducts/index.module.scss | 61 +++++++++++++ .../mainPage/MainProducts/index.tsx | 54 ++++++++++++ src/mocks/expensiveProductHandler/mock.ts | 85 ++++++++++++++++++- src/mocks/likeProductHandler/index.ts | 2 +- src/mocks/likeProductHandler/mock.ts | 85 ++++++++++++++++++- src/mocks/recentProductHandler/index.ts | 2 +- src/mocks/recentProductHandler/mock.ts | 85 ++++++++++++++++++- src/remote/query/main/index.ts | 39 +++++++++ 10 files changed, 416 insertions(+), 13 deletions(-) create mode 100644 src/components/mainPage/MainProducts/index.module.scss create mode 100644 src/components/mainPage/MainProducts/index.tsx create mode 100644 src/remote/query/main/index.ts diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 31762b4..8b55eb0 100644 --- a/src/app/(main)/page.tsx +++ b/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 (
+ + + {open && }
diff --git a/src/components/mainPage/MainIntroduce/index.tsx b/src/components/mainPage/MainIntroduce/index.tsx index 3962cac..f4105f4 100644 --- a/src/components/mainPage/MainIntroduce/index.tsx +++ b/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'; diff --git a/src/components/mainPage/MainProducts/index.module.scss b/src/components/mainPage/MainProducts/index.module.scss new file mode 100644 index 0000000..2056c32 --- /dev/null +++ b/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: 5rem; + font-weight: 600; + margin-top: 5rem; + } +} + +.products { + display: flex; + overflow-x: scroll; + padding-bottom: 3rem; + & > div { + display: flex; + flex-direction: column; + + min-width: 250px; + 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); + } +} diff --git a/src/components/mainPage/MainProducts/index.tsx b/src/components/mainPage/MainProducts/index.tsx new file mode 100644 index 0000000..d16a0b9 --- /dev/null +++ b/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 ( +
+

{title}

+
+ {data?.data?.map((item: any) => { + return ( +
+
gotoDetailProduct(item.id, item.salesStatus)}> + product + {item.salesStatus ? ( +
+ SOLD OUT +
+ ) : null} +
+

+ 현재 낙찰가 : {item.stuffPrice}원 +

+
+ ); + })} +
+
+ ); +}; + +export default MainProducts; diff --git a/src/mocks/expensiveProductHandler/mock.ts b/src/mocks/expensiveProductHandler/mock.ts index fea7917..71d5876 100644 --- a/src/mocks/expensiveProductHandler/mock.ts +++ b/src/mocks/expensiveProductHandler/mock.ts @@ -1,5 +1,84 @@ export const MOCK_EXPENSIVE_DATA = { - data: { - EXPENSIVE: 'EXPENSIVE', - }, + data: [ + { + createAt: '2024-02-08T22:44:58.349Z', + id: 37, + stuffName: '1233', + stuffContent: '12', + stuffPrice: 12, + stuffCategory: '패션의류/잡화', + salesStatus: false, + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/01-removebg-preview%201.png', + creator: { + id: 8, + province: { + name: '서울특별시', + }, + city: { + name: '서초구', + }, + }, + }, + { + createAt: '2023-12-19T14:49:05.088Z', + id: 36, + stuffName: '당근이', + stuffContent: '신선한 당근 급쳐합니다', + stuffPrice: 5000, + salesStatus: true, + stuffCategory: '식품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + { + createAt: '2023-12-19T14:44:02.203Z', + id: 35, + stuffName: '당근이', + stuffContent: '신선한 당근 급쳐합니다', + stuffPrice: 5000, + salesStatus: false, + stuffCategory: '식품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + { + createAt: '2023-12-19T14:43:11.492Z', + id: 34, + stuffName: '당근이', + stuffContent: '신선한 당근 급쳐합니다', + stuffPrice: 5000, + salesStatus: true, + stuffCategory: '식품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + ], }; diff --git a/src/mocks/likeProductHandler/index.ts b/src/mocks/likeProductHandler/index.ts index 486e3c2..ec7a32f 100644 --- a/src/mocks/likeProductHandler/index.ts +++ b/src/mocks/likeProductHandler/index.ts @@ -2,7 +2,7 @@ import { HttpResponse, http } from 'msw'; import { MOCK_LIKE_DATA } from './mock'; export const likeProductHandlers = [ - http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/expensive`, () => { + http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/like`, () => { return HttpResponse.json(MOCK_LIKE_DATA); }), ]; diff --git a/src/mocks/likeProductHandler/mock.ts b/src/mocks/likeProductHandler/mock.ts index fa4042b..4925b24 100644 --- a/src/mocks/likeProductHandler/mock.ts +++ b/src/mocks/likeProductHandler/mock.ts @@ -1,5 +1,84 @@ export const MOCK_LIKE_DATA = { - data: { - LIKE: 'LIKE', - }, + data: [ + { + createAt: '2024-02-08T22:44:58.349Z', + id: 37, + stuffName: '1233', + stuffContent: '12', + stuffPrice: 12, + stuffCategory: '패션의류/잡화', + salesStatus: false, + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/01-removebg-preview%201.png', + creator: { + id: 8, + province: { + name: '서울특별시', + }, + city: { + name: '서초구', + }, + }, + }, + { + createAt: '2023-12-19T14:49:05.088Z', + id: 36, + stuffName: '당근이', + stuffContent: '신선한 당근 급쳐합니다', + stuffPrice: 5000, + salesStatus: true, + stuffCategory: '식품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + { + createAt: '2023-12-19T14:44:02.203Z', + id: 35, + stuffName: '당근이', + stuffContent: '신선한 당근 급쳐합니다', + stuffPrice: 5000, + salesStatus: false, + stuffCategory: '식품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + { + createAt: '2023-12-19T14:43:11.492Z', + id: 34, + stuffName: '당근이', + stuffContent: '신선한 당근 급쳐합니다', + stuffPrice: 5000, + salesStatus: true, + stuffCategory: '식품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + ], }; diff --git a/src/mocks/recentProductHandler/index.ts b/src/mocks/recentProductHandler/index.ts index b1d41a5..03df53e 100644 --- a/src/mocks/recentProductHandler/index.ts +++ b/src/mocks/recentProductHandler/index.ts @@ -2,7 +2,7 @@ import { HttpResponse, http } from 'msw'; import { MOCK_RECENT_DATA } from './mock'; export const recentProductHandlers = [ - http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/expensive`, () => { + http.get(`${process.env.NEXT_PUBLIC_BASE_URL}/board/recent`, () => { return HttpResponse.json(MOCK_RECENT_DATA); }), ]; diff --git a/src/mocks/recentProductHandler/mock.ts b/src/mocks/recentProductHandler/mock.ts index 843d6fb..75a326d 100644 --- a/src/mocks/recentProductHandler/mock.ts +++ b/src/mocks/recentProductHandler/mock.ts @@ -1,5 +1,84 @@ export const MOCK_RECENT_DATA = { - data: { - RECENT: 'RECENT', - }, + data: [ + { + createAt: '2024-02-08T22:44:58.349Z', + id: 37, + stuffName: '1233', + stuffContent: '12', + stuffPrice: 12, + stuffCategory: '패션의류/잡화', + salesStatus: false, + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/01-removebg-preview%201.png', + creator: { + id: 8, + province: { + name: '서울특별시', + }, + city: { + name: '서초구', + }, + }, + }, + { + createAt: '2023-12-19T14:49:05.088Z', + id: 36, + stuffName: '당근이', + stuffContent: '신선한 당근 급쳐합니다', + stuffPrice: 5000, + salesStatus: true, + stuffCategory: '식품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + { + createAt: '2023-12-19T14:44:02.203Z', + id: 35, + stuffName: '당근이', + stuffContent: '신선한 당근 급쳐합니다', + stuffPrice: 5000, + salesStatus: false, + stuffCategory: '식품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + { + createAt: '2023-12-19T14:43:11.492Z', + id: 34, + stuffName: '당근이', + stuffContent: '신선한 당근 급쳐합니다', + stuffPrice: 5000, + salesStatus: true, + stuffCategory: '식품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + ], }; diff --git a/src/remote/query/main/index.ts b/src/remote/query/main/index.ts new file mode 100644 index 0000000..1e48b88 --- /dev/null +++ b/src/remote/query/main/index.ts @@ -0,0 +1,39 @@ +import { useQuery } from '@tanstack/react-query'; +import axios from 'axios'; + +export const useLikeProductBoard = () => { + return useQuery({ + queryKey: ['like'], + queryFn: async () => { + const response = await axios.get( + `${process.env.NEXT_PUBLIC_BASE_URL}/board/like`, + ); + return response.data; + }, + }); +}; + +export const useRecentProductBoard = () => { + return useQuery({ + queryKey: ['recent'], + queryFn: async () => { + const response = await axios.get( + `${process.env.NEXT_PUBLIC_BASE_URL}/board/recent`, + ); + return response.data; + }, + }); +}; + +export const useExpensiveProductBoard = () => { + return useQuery({ + queryKey: ['expensive'], + queryFn: async () => { + const response = await axios.get( + `${process.env.NEXT_PUBLIC_BASE_URL}/board/expensive`, + ); + + return response.data; + }, + }); +}; From 87bf06e5cd50baa4cfed125021d33687e7a8b58a Mon Sep 17 00:00:00 2001 From: seunghwan Date: Mon, 4 Mar 2024 10:39:57 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EB=8D=94=EB=AF=B8=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mainPage/MainProducts/index.module.scss | 4 +- src/mocks/expensiveProductHandler/mock.ts | 66 ++++----- src/mocks/likeProductHandler/mock.ts | 68 ++++----- src/mocks/recentProductHandler/mock.ts | 140 ++++++++++++++---- 4 files changed, 179 insertions(+), 99 deletions(-) diff --git a/src/components/mainPage/MainProducts/index.module.scss b/src/components/mainPage/MainProducts/index.module.scss index 2056c32..8fe2d5d 100644 --- a/src/components/mainPage/MainProducts/index.module.scss +++ b/src/components/mainPage/MainProducts/index.module.scss @@ -4,7 +4,7 @@ width: 80%; margin: 0 auto; & > h4 { - font-size: 5rem; + font-size: 3.5rem; font-weight: 600; margin-top: 5rem; } @@ -18,7 +18,7 @@ display: flex; flex-direction: column; - min-width: 250px; + min-width: 350px; flex-grow: 1; & > p { diff --git a/src/mocks/expensiveProductHandler/mock.ts b/src/mocks/expensiveProductHandler/mock.ts index 71d5876..e83b568 100644 --- a/src/mocks/expensiveProductHandler/mock.ts +++ b/src/mocks/expensiveProductHandler/mock.ts @@ -1,35 +1,35 @@ export const MOCK_EXPENSIVE_DATA = { data: [ { - createAt: '2024-02-08T22:44:58.349Z', - id: 37, - stuffName: '1233', - stuffContent: '12', - stuffPrice: 12, - stuffCategory: '패션의류/잡화', + 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/01-removebg-preview%201.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/52eccd8e3bbd4c164b09e5aead79ae59.jpg', creator: { - id: 8, + id: 1, province: { - name: '서울특별시', + name: '경기도', }, city: { - name: '서초구', + name: '성남시', }, }, }, { - createAt: '2023-12-19T14:49:05.088Z', - id: 36, - stuffName: '당근이', - stuffContent: '신선한 당근 급쳐합니다', - stuffPrice: 5000, - salesStatus: true, - stuffCategory: '식품', + 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/carrot.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/fe562d435d2e9064f08d7d71f79eb345.jpg', creator: { id: 1, province: { @@ -41,15 +41,15 @@ export const MOCK_EXPENSIVE_DATA = { }, }, { - createAt: '2023-12-19T14:44:02.203Z', - id: 35, - stuffName: '당근이', - stuffContent: '신선한 당근 급쳐합니다', - stuffPrice: 5000, + createAt: '2024-03-04T01:17:12.770Z', + id: 47, + stuffName: '외제차', + stuffContent: '\b외제차입니다.', salesStatus: false, - stuffCategory: '식품', + stuffPrice: 500000000, + stuffCategory: '스포츠/레저', imageUrl: - 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/dc5bc4aae486f577f19f632bb8432a55.jpg', creator: { id: 1, province: { @@ -61,15 +61,15 @@ export const MOCK_EXPENSIVE_DATA = { }, }, { - createAt: '2023-12-19T14:43:11.492Z', - id: 34, - stuffName: '당근이', - stuffContent: '신선한 당근 급쳐합니다', - stuffPrice: 5000, - salesStatus: true, - stuffCategory: '식품', + 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/carrot.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/edc2a570e4008d290476186f1d7bffeb.jpg', creator: { id: 1, province: { diff --git a/src/mocks/likeProductHandler/mock.ts b/src/mocks/likeProductHandler/mock.ts index 4925b24..5fa989a 100644 --- a/src/mocks/likeProductHandler/mock.ts +++ b/src/mocks/likeProductHandler/mock.ts @@ -1,35 +1,35 @@ export const MOCK_LIKE_DATA = { data: [ { - createAt: '2024-02-08T22:44:58.349Z', - id: 37, - stuffName: '1233', - stuffContent: '12', - stuffPrice: 12, - stuffCategory: '패션의류/잡화', + createAt: '2024-03-04T00:24:41.294Z', + id: 41, + stuffName: '에어팟 거치대', + stuffContent: '이제 에어팟을 잃어버리지 않아요.', + stuffPrice: 22000, + stuffCategory: '뷰티', salesStatus: false, imageUrl: - 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/01-removebg-preview%201.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/577589af72c3b68488bd8ba312f58564.jpg', creator: { - id: 8, + id: 1, province: { - name: '서울특별시', + name: '경기도', }, city: { - name: '서초구', + name: '성남시', }, }, }, { - createAt: '2023-12-19T14:49:05.088Z', - id: 36, - stuffName: '당근이', - stuffContent: '신선한 당근 급쳐합니다', - stuffPrice: 5000, - salesStatus: true, - stuffCategory: '식품', + createAt: '2024-03-04T00:23:52.176Z', + id: 40, + stuffName: '삐약이 전등', + stuffContent: '공부가 더 잘되는거같아요.', + stuffPrice: 35000, + salesStatus: false, + stuffCategory: '생활용품', imageUrl: - 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/20f4abe5d34464bc1f85a9f963209379.jpg', creator: { id: 1, province: { @@ -41,15 +41,15 @@ export const MOCK_LIKE_DATA = { }, }, { - createAt: '2023-12-19T14:44:02.203Z', - id: 35, - stuffName: '당근이', - stuffContent: '신선한 당근 급쳐합니다', - stuffPrice: 5000, - salesStatus: false, - stuffCategory: '식품', + createAt: '2024-03-04T00:23:10.864Z', + id: 39, + stuffName: '잠만보 침대', + stuffContent: '엄청 크고 귀여워요.', + stuffPrice: 55000, + stuffCategory: '생활용품', + salesStatus: true, imageUrl: - 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/2e48af39ffe042af3e4f0e649b190eb0.jpg', creator: { id: 1, province: { @@ -61,15 +61,15 @@ export const MOCK_LIKE_DATA = { }, }, { - createAt: '2023-12-19T14:43:11.492Z', - id: 34, - stuffName: '당근이', - stuffContent: '신선한 당근 급쳐합니다', - stuffPrice: 5000, - salesStatus: true, - stuffCategory: '식품', + createAt: '2024-03-04T00:22:09.271Z', + id: 38, + stuffName: '고라파덕 인형', + stuffContent: '고라파덕 인형입니다.\r\n꺠끗해요 !', + stuffPrice: 10000, + stuffCategory: '뷰티', + salesStatus: false, imageUrl: - 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/0aa0a0bfd9cc39891ee1f27e13781aeb.jpg', creator: { id: 1, province: { diff --git a/src/mocks/recentProductHandler/mock.ts b/src/mocks/recentProductHandler/mock.ts index 75a326d..6e12e59 100644 --- a/src/mocks/recentProductHandler/mock.ts +++ b/src/mocks/recentProductHandler/mock.ts @@ -1,35 +1,75 @@ export const MOCK_RECENT_DATA = { data: [ { - createAt: '2024-02-08T22:44:58.349Z', - id: 37, - stuffName: '1233', - stuffContent: '12', - stuffPrice: 12, - stuffCategory: '패션의류/잡화', + createAt: '2024-03-04T00:54:22.326Z', + id: 45, + stuffName: '게이밍 의자', + stuffContent: '상태 좋아요', + stuffPrice: 300000, + stuffCategory: '생활용품', salesStatus: false, imageUrl: - 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/01-removebg-preview%201.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/37f23a70828163eb0d97006915277713.jpg', creator: { - id: 8, + id: 1, province: { - name: '서울특별시', + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + { + createAt: '2024-03-04T00:54:07.474Z', + id: 44, + stuffName: '줄넘기', + stuffContent: '상태 좋아요', + stuffPrice: 3000, + stuffCategory: '생활용품', + salesStatus: false, + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/c4b65ce31dc92719b9dfa41f0ce06d5c.jpg', + creator: { + id: 1, + province: { + name: '경기도', }, city: { - name: '서초구', + name: '성남시', + }, + }, + }, + { + createAt: '2024-03-04T00:53:48.420Z', + id: 43, + stuffName: '애플 세트', + stuffContent: '\b아이폰, 맥북, 에어팟 다 팔아요 상태 조아요', + stuffPrice: 50000000, + stuffCategory: '생활용품', + salesStatus: false, + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/d973da4cf2f88770e58c30b018cecfab.jpg', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', }, }, }, { - createAt: '2023-12-19T14:49:05.088Z', - id: 36, - stuffName: '당근이', - stuffContent: '신선한 당근 급쳐합니다', + createAt: '2024-03-04T00:52:31.547Z', + id: 42, + stuffName: '슬리퍼 거치대', + stuffContent: '슬리퍼 정리를 깔끔하게 할 수 있어요 \r\n상태 좋아요.', stuffPrice: 5000, + stuffCategory: '뷰티', salesStatus: true, - stuffCategory: '식품', imageUrl: - 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/ddddabc30be9b84a51cd7b8085921ba2.jpg', creator: { id: 1, province: { @@ -41,15 +81,15 @@ export const MOCK_RECENT_DATA = { }, }, { - createAt: '2023-12-19T14:44:02.203Z', - id: 35, - stuffName: '당근이', - stuffContent: '신선한 당근 급쳐합니다', - stuffPrice: 5000, + createAt: '2024-03-04T00:24:41.294Z', + id: 41, + stuffName: '에어팟 거치대', + stuffContent: '이제 에어팟을 잃어버리지 않아요.', + stuffPrice: 22000, + stuffCategory: '뷰티', salesStatus: false, - stuffCategory: '식품', imageUrl: - 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/577589af72c3b68488bd8ba312f58564.jpg', creator: { id: 1, province: { @@ -61,15 +101,55 @@ export const MOCK_RECENT_DATA = { }, }, { - createAt: '2023-12-19T14:43:11.492Z', - id: 34, - stuffName: '당근이', - stuffContent: '신선한 당근 급쳐합니다', - stuffPrice: 5000, + createAt: '2024-03-04T00:23:52.176Z', + id: 40, + stuffName: '삐약이 전등', + stuffContent: '공부가 더 잘되는거같아요.', + stuffPrice: 35000, + salesStatus: false, + stuffCategory: '생활용품', + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/20f4abe5d34464bc1f85a9f963209379.jpg', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + { + createAt: '2024-03-04T00:23:10.864Z', + id: 39, + stuffName: '잠만보 침대', + stuffContent: '엄청 크고 귀여워요.', + stuffPrice: 55000, + stuffCategory: '생활용품', salesStatus: true, - stuffCategory: '식품', imageUrl: - 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/carrot.png', + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/2e48af39ffe042af3e4f0e649b190eb0.jpg', + creator: { + id: 1, + province: { + name: '경기도', + }, + city: { + name: '성남시', + }, + }, + }, + { + createAt: '2024-03-04T00:22:09.271Z', + id: 38, + stuffName: '고라파덕 인형', + stuffContent: '고라파덕 인형입니다.\r\n꺠끗해요 !', + stuffPrice: 10000, + stuffCategory: '뷰티', + salesStatus: false, + imageUrl: + 'https://imguploads3.s3.ap-northeast-2.amazonaws.com/0aa0a0bfd9cc39891ee1f27e13781aeb.jpg', creator: { id: 1, province: { From 399881b7404ca2390e7cec6bf01e320854bc671f Mon Sep 17 00:00:00 2001 From: seunghwan Date: Fri, 8 Mar 2024 10:40:53 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20msw=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auctionDetailPage/ProductInfo/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/auctionDetailPage/ProductInfo/index.tsx b/src/components/auctionDetailPage/ProductInfo/index.tsx index 3a10671..634c883 100644 --- a/src/components/auctionDetailPage/ProductInfo/index.tsx +++ b/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) => { )}
- {/*
- {like ? : } -
*/} +
+ +

{board.likesCount}