Merge pull request #136 from 2020-NAVER-CAMPUS-HACKDAY/jominjimail/fe…

…ature/hot-fix

client/components/CategoryHeader/index.tsx

@@ -1,32 +1,42 @@
 import React, { FC } from 'react';
 import { Category } from 'interfaces/category';
 import Router from 'next/router';
+import useStyles from 'components/CategoryHeader/styles';
+import { PublicImageCategoryPath, ImageArray, ImageExtension } from 'constant';
 
 interface CategoryHeaderProps {
   categoryData: Category[];
 }
 
 const CategoryHeader: FC<CategoryHeaderProps> = (props) => {
   const { categoryData } = props;
+  const classes = useStyles();
 
   const setCategory = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
     const categoryId: string = event.currentTarget.value;
     Router.push(`/tempCategoryDetail/${categoryId}`);
   };
 
-  const categoryElements = categoryData.map((category) => {
+  const categoryElements = categoryData.map((category, index) => {
     const { categoryId } = category;
     return (
-      <button
-        key={categoryId}
-        onClick={setCategory}
-        value={categoryId}>{category.value.categoryName}
-      </button>
+      <div className={classes.content} key={categoryId}>
+        <button
+          className={classes.button}
+          onClick={setCategory}
+          value={categoryId}
+        >
+          <img src={`${PublicImageCategoryPath}${ImageArray[index]}${ImageExtension.PNG}`}
+            className={classes.image}
+          ></img>
+          <div>{category.value.categoryName}</div>
+        </button>
+      </div>
     );
   });
 
   return (
-    <div>
+    <div className={classes.container}>
       {categoryElements}
     </div>
   );

client/components/CategoryHeader/styles.ts

@@ -0,0 +1,33 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-start',
+    maxWidth: '375',
+    padding: '0 0.5rem',
+  },
+  content: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '5rem',
+    justifyContent: 'center',
+    margin: '0 0.3rem',
+    width: '5rem',
+  },
+  button: {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    font: '8rem',
+    outline: 'inherit',
+    whiteSpace: 'nowrap',
+  },
+  image: {
+    height: '2.5rem',
+    width: '2.5rem',
+  },
+});
+
+export default useStyles;

client/constant.ts

@@ -108,3 +108,24 @@ export const LikePropsInitialValue = {
   lifeLike: [],
   dutyFreeLike: [],
 };
+
+export const PublicImageCategoryPath = '/images/category/';
+
+// TODO(jominjimail): replace this array with enum type
+export const ImageArray = [
+  'icon_all_108x108',
+  'icon_distilled_108x108',
+  'icon_etc_108x108',
+  'icon_fruit_liquor_108x108',
+  'icon_gift_set_108x108',
+  'icon_liqueur_108x108',
+  'icon_raspberry_108x108',
+  'icon_soju_108x108',
+  'icon_takju_108x108',
+  'icon_wine_108x108',
+  'icon_yakju_108x108',
+];
+
+export const ImageExtension = {
+  PNG: '.png',
+};