[FE] refactor: 카테고리 로직 수정 (#637)

* refactor: json에 image 추가 * refactor: api 수정에 따른 카테고리 로직 수정 * refactor: menuVariant 밖에서 받도록 수정 * refactor: 주소 받아오는 부분 소문자 변경 * chore: 사용하지 않는 상수 제거
woowacourse-teams · Sep 15, 2023 · 26825ff · 26825ff
1 parent 3d01ae3
commit 26825ff
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 59 deletions.
diff --git a/frontend/src/components/Common/CategoryList/CategoryList.tsx b/frontend/src/components/Common/CategoryList/CategoryList.tsx
@@ -4,38 +4,25 @@ import styled from 'styled-components';
 
 import CategoryItem from '../CategoryItem/CategoryItem';
 
-import { MENU_IMAGES, MENU_NAME, STORE_IMAGES, STORE_NAMES } from '@/constants';
+import { CATEGORY_TYPE } from '@/constants';
+import { useCategoryQuery } from '@/hooks/queries/product';
 
-const MENU_LENGTH = 5;
-const STORE_LENGTH = 4;
+interface CategoryListProps {
+  menuVariant: keyof typeof CATEGORY_TYPE;
+}
 
-const menuList = Array.from({ length: MENU_LENGTH }, (_, index) => ({
-  name: MENU_NAME[index],
-  image: MENU_IMAGES[index],
-}));
+const CategoryList = ({ menuVariant }: CategoryListProps) => {
+  const { data: categories } = useCategoryQuery(CATEGORY_TYPE[menuVariant]);
 
-const storeList = Array.from({ length: STORE_LENGTH }, (_, index) => ({
-  name: STORE_NAMES[index],
-  image: STORE_IMAGES[index],
-}));
-
-const CategoryList = () => {
   return (
     <CategoryListContainer>
-      <MenuListWrapper>
-        {menuList.map((menu, index) => (
-          <Link key={`menuItem-${index}`} as={RouterLink} to={`products/food?category=${index + 1}`}>
+      <CategoryListWrapper>
+        {categories.map((menu) => (
+          <Link key={menu.id} as={RouterLink} to={`products/${menuVariant.toLowerCase()}?category=${menu.id}`}>
             <CategoryItem name={menu.name} image={menu.image} />
           </Link>
         ))}
-      </MenuListWrapper>
-      <StoreListWrapper>
-        {storeList.map((menu, index) => (
-          <Link key={`menuItem-${index}`} as={RouterLink} to={`products/store?category=${index + 6}`}>
-            <CategoryItem key={`storeItem-${index}`} name={menu.name} image={menu.image} />
-          </Link>
-        ))}
-      </StoreListWrapper>
+      </CategoryListWrapper>
     </CategoryListContainer>
   );
 };
@@ -57,12 +44,7 @@ const CategoryListContainer = styled.div`
   }
 `;
 
-const MenuListWrapper = styled.div`
-  display: flex;
-  gap: 20px;
-`;
-
-const StoreListWrapper = styled.div`
+const CategoryListWrapper = styled.div`
   display: flex;
   gap: 20px;
 `;
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
@@ -67,22 +67,3 @@ export const ENVIRONMENT = window.location.href.includes('dev') ? 'dev' : 'prod'
 
 export const IMAGE_URL =
   ENVIRONMENT === 'dev' ? process.env.S3_DEV_CLOUDFRONT_PATH : process.env.S3_PROD_CLOUDFRONT_PATH;
-
-export const MENU_NAME = ['간편식사', '과자류', '아이스크림', '식품', '음료'] as const;
-
-export const STORE_NAMES = ['CU', 'GS25', '이마트24', '세븐일레븐'] as const;
-
-export const MENU_IMAGES = [
-  `${IMAGE_URL}food.jpeg`,
-  `${IMAGE_URL}snack.jpeg`,
-  `${IMAGE_URL}icecream.jpeg`,
-  `${IMAGE_URL}ramen.jpeg`,
-  `${IMAGE_URL}tea.jpeg`,
-];
-
-export const STORE_IMAGES = [
-  `${IMAGE_URL}cu.jpg`,
-  `${IMAGE_URL}gs.png`,
-  `${IMAGE_URL}emart24.png`,
-  `${IMAGE_URL}seven.png`,
-];
diff --git a/frontend/src/mocks/data/foodCategory.json b/frontend/src/mocks/data/foodCategory.json
@@ -1,7 +1,7 @@
 [
-  { "id": 1, "name": "간편식사" },
-  { "id": 2, "name": "과자류" },
-  { "id": 3, "name": "아이스크림" },
-  { "id": 4, "name": "식품" },
-  { "id": 5, "name": "음료" }
+  { "id": 1, "name": "간편식사", "image": "https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg" },
+  { "id": 2, "name": "과자류", "image": "https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg" },
+  { "id": 3, "name": "아이스크림", "image": "https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg" },
+  { "id": 4, "name": "식품", "image": "https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg" },
+  { "id": 5, "name": "음료", "image": "https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg" }
 ]
diff --git a/frontend/src/mocks/data/storeCategory.json b/frontend/src/mocks/data/storeCategory.json
@@ -1,6 +1,6 @@
 [
-  { "id": 6, "name": "CU" },
-  { "id": 7, "name": "GS25" },
-  { "id": 8, "name": "이마트24" },
-  { "id": 9, "name": "세븐일레븐" }
+  { "id": 6, "name": "CU", "image": "https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg" },
+  { "id": 7, "name": "GS25", "image": "https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg" },
+  { "id": 8, "name": "이마트24", "image": "https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg" },
+  { "id": 9, "name": "세븐일레븐", "image": "https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg" }
 ]
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
@@ -33,7 +33,8 @@ const HomePage = () => {
         </Heading>
         <Spacing size={16} />
         <Suspense fallback={null}>
-          <CategoryList />
+          <CategoryList menuVariant="FOOD" />
+          <CategoryList menuVariant="STORE" />
         </Suspense>
         <Spacing size={15} />
       </section>

diff --git a/frontend/src/types/common.ts b/frontend/src/types/common.ts
@@ -12,6 +12,7 @@ export const isCategoryVariant = (value: string): value is CategoryVariant => {
 export interface Category {
   id: number;
   name: string;
+  image: string;
 }
 
 export interface Tag {