Feat/234

src/components/feature/ProductItem/ColumnProductItem/index.module.scss

@@ -24,7 +24,7 @@
   }
 
   &.medium {
-    height: 185px;
+    height: 140px;
   }
 
   .txt_brand_name {

src/layouts/Home/Thema/ThemaList/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;
+  }
+}

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 <Spinner />;
+  return (
+    themaItems && (
+      <section className={styles.area_thema}>
+        <strong className={styles.txt_title}>{title}</strong>
+        <ul className={styles.wrapper_item}>
+          {themaItems.map((item) => (
+            <li key={item.productId}>
+              <ColumnProductItem product={item} size="medium" />
+            </li>
+          ))}
+        </ul>
+      </section>
+    )
+  );
+};
+
+export default ThemaList;

src/layouts/Home/Thema/index.tsx

@@ -1,5 +1,54 @@
+import ThemaList from './ThemaList';
+
+const TITLE = [
+  '전하고픈 마음 가득 담아',
+  '센스 넘치는 선물',
+  '이런 선물 어때요 ?',
+  '남녀노소 모두 좋아하는 선물',
+  '반짝반짝 빛나는 마음',
+
+  '부담 없이 마음을 전해요',
+  '말없이 응원하고 싶을 때🍀',
+  '이런 선물도 좋을 것 같아요.',
+  '귀여운 게 최고야',
+  '달콤한 진심을 전하는 선물',
+
+  '고마운 사람들에게 전해요🎁',
+  '변치 않는 마음을 전해요',
+  '지금 안 사면 손해입니다 🚨',
+  '전하고픈 마음 가득 담아',
+  '활용도 높은 집들이 선물',
+
+  '마음을 전하는 빛나는 선물',
+];
+
+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 <>이런 선물 어때요?</>;
+  return (
+    <>
+      <ThemaList categoryId={getRandomCategoryId()} title={getRandomTitle()} />
+      <ThemaList categoryId={getRandomCategoryId()} title={getRandomTitle()} />
+      <ThemaList categoryId={getRandomCategoryId()} title={getRandomTitle()} />
+      <ThemaList categoryId={getRandomCategoryId()} title={getRandomTitle()} />
+      <ThemaList categoryId={getRandomCategoryId()} title={getRandomTitle()} />
+      <ThemaList categoryId={getRandomCategoryId()} title={getRandomTitle()} />
+      <ThemaList categoryId={getRandomCategoryId()} title={getRandomTitle()} />
+    </>
+  );
 };
 
 export default Thema;

src/pages/Home/index.module.scss

@@ -0,0 +1,3 @@
+.area_home {
+  padding-bottom: 200px;
+}

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 = () => {
       <Receiver />
       <MainWrapper>
         <Thema />
-        <NowTrending />
+        {/* <NowTrending />
         <MainBrands />
-        <MainProducts />
+        <MainProducts /> */}
       </MainWrapper>
     </section>
   );

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[];
+};