From bb843618957964deb211dc72628695b3e1c9d909 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Fri, 17 May 2024 14:03:19 +0900 Subject: [PATCH 1/9] =?UTF-8?q?[feat]:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=9D=98=20=EC=83=81=ED=92=88=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8B=80/=EC=98=81=EC=97=AD=EA=B5=AC?= =?UTF-8?q?=ED=98=84(#234)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/Home/Thema/index.module.scss | 20 ++++++++++++++ src/layouts/Home/Thema/index.tsx | 34 +++++++++++++++++++++++- 2 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 src/layouts/Home/Thema/index.module.scss diff --git a/src/layouts/Home/Thema/index.module.scss b/src/layouts/Home/Thema/index.module.scss new file mode 100644 index 00000000..85380801 --- /dev/null +++ b/src/layouts/Home/Thema/index.module.scss @@ -0,0 +1,20 @@ +@import 'styles/mixins.module'; + +.area_thema { + padding-top: 120px; + + .txt_title { + @include font(35px, 700); + + display: block; + padding-bottom: 40px; + text-align: center; + line-height: 51px; + } + + .wrapper_item { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 50px 20px; + } +} diff --git a/src/layouts/Home/Thema/index.tsx b/src/layouts/Home/Thema/index.tsx index 0a3ee71b..b3ce0271 100644 --- a/src/layouts/Home/Thema/index.tsx +++ b/src/layouts/Home/Thema/index.tsx @@ -1,5 +1,37 @@ +import styles from './index.module.scss'; + +const TITLE = [ + '전하고픈 마음 가득 담아', + '센스 넘치는 선물', + '이런 선물 어때요 ?', + '남녀노소 모두 좋아하는 선물', + '반짝반짝 빛나는 마음', + '부담 없이 마음을 전해요', + '말없이 응원하고 싶을 때🍀', + '이런 선물도 좋을 것 같아요.', + '귀여운 게 최고야', + '달콤한 진심을 전하는 선물', + '고마운 사람들에게 전해요🎁', + '변치 않는 마음을 전해요', + '지금 안 사면 손해입니다 🚨', + '전하고픈 마음 가득 담아', + '활용도 높은 집들이 선물', + '마음을 전하는 빛나는 선물', +]; + const Thema = () => { - return <>이런 선물 어때요?; + const titleIdx = Math.floor(Math.random() * TITLE.length); + return ( +
+ {TITLE[titleIdx]} + +
+ ); }; export default Thema; From 05391c83c78a81b3a832b46ecd0c317a66640d7f Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Fri, 17 May 2024 17:33:34 +0900 Subject: [PATCH 2/9] =?UTF-8?q?[refactor]:=20ColumnProductItem=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=97=AC=EB=B0=B1=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95(#234)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../feature/ProductItem/ColumnProductItem/index.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/feature/ProductItem/ColumnProductItem/index.module.scss b/src/components/feature/ProductItem/ColumnProductItem/index.module.scss index b8199afc..ba0b7638 100644 --- a/src/components/feature/ProductItem/ColumnProductItem/index.module.scss +++ b/src/components/feature/ProductItem/ColumnProductItem/index.module.scss @@ -24,7 +24,7 @@ } &.medium { - height: 185px; + height: 140px; } .txt_brand_name { From 51af44edf8f304a9409d4e27de29d4ad2ed1c54a Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Fri, 17 May 2024 17:43:38 +0900 Subject: [PATCH 3/9] =?UTF-8?q?[styles]:=20=EC=82=AC=EC=9A=A9=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=A3=BC=EC=84=9D(#234)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index c5d34e72..7498a0f8 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,9 +1,9 @@ import MainWrapper from 'components/ui/MainWrapper'; -import MainBrands from 'layouts/Home/MainBrands'; -import MainProducts from 'layouts/Home/MainProducts'; -import NowTrending from 'layouts/Home/NowTrending'; import Receiver from 'layouts/Home/Receiver'; import Thema from 'layouts/Home/Thema'; +// import MainBrands from 'layouts/Home/MainBrands'; +// import MainProducts from 'layouts/Home/MainProducts'; +// import NowTrending from 'layouts/Home/NowTrending'; import styles from './index.module.scss'; @@ -13,9 +13,9 @@ const Home = () => { - + {/* - + */} ); From c82d0fcd0fe1b5286a90eb2690c99807705a0e89 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Fri, 17 May 2024 17:44:12 +0900 Subject: [PATCH 4/9] =?UTF-8?q?[feat]:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=95=98=EB=8B=A8=20=EC=97=AC=EB=B0=B1=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80(#234)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/index.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/Home/index.module.scss b/src/pages/Home/index.module.scss index e69de29b..b0c955d3 100644 --- a/src/pages/Home/index.module.scss +++ b/src/pages/Home/index.module.scss @@ -0,0 +1,3 @@ +.area_home { + padding-bottom: 200px; +} From 960b20a412bc9d46ef0ac2478949ccef9300ee21 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Sat, 18 May 2024 01:25:08 +0900 Subject: [PATCH 5/9] =?UTF-8?q?[feat]:=20=EB=A9=94=EC=9D=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=9D=98=20=EC=83=81=ED=92=88=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84(#234)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Thema/{ => ThemaList}/index.module.scss | 0 src/layouts/Home/Thema/ThemaList/index.tsx | 35 +++++++++++++++++ src/layouts/Home/Thema/index.tsx | 39 +++++++++++++------ src/services/api/v1/thema.ts | 15 +++++++ 4 files changed, 78 insertions(+), 11 deletions(-) rename src/layouts/Home/Thema/{ => ThemaList}/index.module.scss (100%) create mode 100644 src/layouts/Home/Thema/ThemaList/index.tsx create mode 100644 src/services/api/v1/thema.ts diff --git a/src/layouts/Home/Thema/index.module.scss b/src/layouts/Home/Thema/ThemaList/index.module.scss similarity index 100% rename from src/layouts/Home/Thema/index.module.scss rename to src/layouts/Home/Thema/ThemaList/index.module.scss diff --git a/src/layouts/Home/Thema/ThemaList/index.tsx b/src/layouts/Home/Thema/ThemaList/index.tsx new file mode 100644 index 00000000..ee397186 --- /dev/null +++ b/src/layouts/Home/Thema/ThemaList/index.tsx @@ -0,0 +1,35 @@ +import { useQuery } from '@tanstack/react-query'; + +import ColumnProductItem from 'components/feature/ProductItem/ColumnProductItem'; +import Spinner from 'components/ui/Spinner'; + +import { getThemaItems } from 'services/api/v1/thema'; + +import styles from './index.module.scss'; + +type ThemaListProps = { categoryId: number; title: string }; + +const ThemaList = ({ categoryId, title }: ThemaListProps) => { + const { data: themaItems, isLoading } = useQuery({ + queryKey: ['themaItems', categoryId], + queryFn: () => getThemaItems(categoryId), + }); + + if (isLoading) return ; + return ( + themaItems && ( +
+ {title} +
    + {themaItems.map((item) => ( +
  • + +
    • + ))} +
+
+ ) + ); +}; + +export default ThemaList; diff --git a/src/layouts/Home/Thema/index.tsx b/src/layouts/Home/Thema/index.tsx index b3ce0271..8249747a 100644 --- a/src/layouts/Home/Thema/index.tsx +++ b/src/layouts/Home/Thema/index.tsx @@ -1,4 +1,4 @@ -import styles from './index.module.scss'; +import ThemaList from './ThemaList'; const TITLE = [ '전하고픈 마음 가득 담아', @@ -6,31 +6,48 @@ const TITLE = [ '이런 선물 어때요 ?', '남녀노소 모두 좋아하는 선물', '반짝반짝 빛나는 마음', + '부담 없이 마음을 전해요', '말없이 응원하고 싶을 때🍀', '이런 선물도 좋을 것 같아요.', '귀여운 게 최고야', '달콤한 진심을 전하는 선물', + '고마운 사람들에게 전해요🎁', '변치 않는 마음을 전해요', '지금 안 사면 손해입니다 🚨', '전하고픈 마음 가득 담아', '활용도 높은 집들이 선물', + '마음을 전하는 빛나는 선물', ]; -const Thema = () => { +const CATEGORY_ID = [ + 170, 171, 172, 176, 177, 178, 179, 181, 182, 184, 185, 188, 192, 194, 195, + 196, 202, 203, 204, 205, +]; + +const getRandomCategoryId = () => { + const categoryIdx = Math.floor(Math.random() * CATEGORY_ID.length); + return CATEGORY_ID[categoryIdx]; +}; + +const getRandomTitle = () => { const titleIdx = Math.floor(Math.random() * TITLE.length); + return TITLE[titleIdx]; +}; + +const Thema = () => { return ( -
- {TITLE[titleIdx]} -
    -
  • 상품
    • -
  • 상품
    • -
  • 상품
    • -
  • 상품
    • -
-
+ <> + + + + + + + + ); }; diff --git a/src/services/api/v1/thema.ts b/src/services/api/v1/thema.ts new file mode 100644 index 00000000..7fc6c314 --- /dev/null +++ b/src/services/api/v1/thema.ts @@ -0,0 +1,15 @@ +import axios from 'axios'; + +import { ProductItem } from 'types/productItem'; + +const productApi = axios.create({ + baseURL: import.meta.env.VITE_SERVER_URL, +}); + +export const getThemaItems = async (categoryId: number) => { + const themaItem = await productApi.get( + `/products?size=4&categoryId=${categoryId}`, + ); + + return themaItem.data.content as ProductItem[]; +}; From 857c48f1066eacf96ecbce10e19b13e253429999 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Sun, 19 May 2024 16:09:52 +0900 Subject: [PATCH 6/9] =?UTF-8?q?[style]:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A4=84=EB=B0=94=EA=BF=88=20=EC=82=AD=EC=A0=9C(#2?= =?UTF-8?q?34)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/Home/Thema/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/layouts/Home/Thema/index.tsx b/src/layouts/Home/Thema/index.tsx index 8249747a..45dc31d2 100644 --- a/src/layouts/Home/Thema/index.tsx +++ b/src/layouts/Home/Thema/index.tsx @@ -6,19 +6,16 @@ const TITLE = [ '이런 선물 어때요 ?', '남녀노소 모두 좋아하는 선물', '반짝반짝 빛나는 마음', - '부담 없이 마음을 전해요', '말없이 응원하고 싶을 때🍀', '이런 선물도 좋을 것 같아요.', '귀여운 게 최고야', '달콤한 진심을 전하는 선물', - '고마운 사람들에게 전해요🎁', '변치 않는 마음을 전해요', '지금 안 사면 손해입니다 🚨', '전하고픈 마음 가득 담아', '활용도 높은 집들이 선물', - '마음을 전하는 빛나는 선물', ]; From fe6156c24b9e678e078833f11da97cd706129094 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Sun, 19 May 2024 17:14:04 +0900 Subject: [PATCH 7/9] =?UTF-8?q?[refactor]:=20=EC=97=AC=EB=B0=B1=20?= =?UTF-8?q?=EA=B0=92=20=EC=88=98=EC=A0=95(#234)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../feature/ProductItem/ColumnProductItem/index.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/feature/ProductItem/ColumnProductItem/index.module.scss b/src/components/feature/ProductItem/ColumnProductItem/index.module.scss index ba0b7638..9ca07849 100644 --- a/src/components/feature/ProductItem/ColumnProductItem/index.module.scss +++ b/src/components/feature/ProductItem/ColumnProductItem/index.module.scss @@ -24,7 +24,7 @@ } &.medium { - height: 140px; + height: 180px; } .txt_brand_name { From 9f6377c698acee1d3f260f63027764dfb4dd43a1 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Thu, 23 May 2024 21:57:17 +0900 Subject: [PATCH 8/9] =?UTF-8?q?[refactor]:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20axios=20=EC=9D=B8=EC=8A=A4=ED=84=B4=EC=8A=A4=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0(#234)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/services/api/v1/thema.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/services/api/v1/thema.ts b/src/services/api/v1/thema.ts index 7fc6c314..92e37ade 100644 --- a/src/services/api/v1/thema.ts +++ b/src/services/api/v1/thema.ts @@ -1,13 +1,9 @@ -import axios from 'axios'; - import { ProductItem } from 'types/productItem'; -const productApi = axios.create({ - baseURL: import.meta.env.VITE_SERVER_URL, -}); +import { apiV1 } from '.'; export const getThemaItems = async (categoryId: number) => { - const themaItem = await productApi.get( + const themaItem = await apiV1.get( `/products?size=4&categoryId=${categoryId}`, ); From 0e189341790fd0efcecda1203bad06e7b7a28b15 Mon Sep 17 00:00:00 2001 From: devkyoung2 Date: Thu, 23 May 2024 22:36:34 +0900 Subject: [PATCH 9/9] =?UTF-8?q?[refactor]:=20=EC=97=AC=EB=B0=B1=20?= =?UTF-8?q?=EA=B0=92=20=EC=88=98=EC=A0=95(#234)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../feature/ProductItem/ColumnProductItem/index.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/feature/ProductItem/ColumnProductItem/index.module.scss b/src/components/feature/ProductItem/ColumnProductItem/index.module.scss index 9ca07849..b8199afc 100644 --- a/src/components/feature/ProductItem/ColumnProductItem/index.module.scss +++ b/src/components/feature/ProductItem/ColumnProductItem/index.module.scss @@ -24,7 +24,7 @@ } &.medium { - height: 180px; + height: 185px; } .txt_brand_name {