Merge pull request #138 from 2020-NAVER-CAMPUS-HACKDAY/develop

Author: jominjimail

client/components/CategoryHeader/ChildrenCard/index.tsx

@@ -1,18 +1,31 @@
 import React, { FC } from 'react';
 import useStyles from 'components/CategoryHeader/ChildrenCard/styles';
 import { Category } from 'interfaces/category';
+import Router from 'next/router';
+import clsx from 'clsx';
 
 interface ChildrenCardProps {
-  childreanData: Category[];
+  childrenData: Category[];
 }
 const ChildrenCard: FC<ChildrenCardProps> = (props) => {
-  const { childreanData } = props;
+  const { childrenData } = props;
   const classes = useStyles();
 
+  // TODO(jominjimail): duplicated function
+  const setCategory = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+    const categoryId: string = event.currentTarget.value;
+    Router.push(`/tempCategoryDetail/${categoryId}`);
+  };
+
   return (
     <section className={classes.card}>
-      {childreanData.map((child) => (
-        <button key={child.categoryId} className={classes.cardContent}>
+      {childrenData.map((child) => (
+        <button
+          key={child.categoryId}
+          className={clsx(classes.button, classes.cardContent)}
+          onClick={setCategory}
+          value={child.categoryId}
+        >
           {child.value.categoryName}
         </button>
       ))}

client/components/CategoryHeader/ChildrenCard/styles.ts

@@ -1,23 +1,27 @@
 import { makeStyles } from '@material-ui/core/styles';
+import { AppColor } from 'constant';
 
 const useStyles = makeStyles({
   card: {
     display: 'flex',
-    backgroundColor: '#fff',
+    backgroundColor: AppColor.GREY,
     minWidth: '100%',
-    height: '3rem',
+    height: '2.5rem',
     overflowX: 'auto',
     '&::-webkit-scrollbar': {
       display: 'none',
     },
   },
   cardContent: {
-    display: 'flex',
     padding: '0 11px',
     whiteSpace: 'nowrap',
   },
-  text: {
-    width: '100%',
+  button: {
+    background: 'none',
+    border: 'none',
+    font: 'inherit',
+    cursor: 'pointer',
+    outline: 'inherit',
   },
 });
 

client/components/CategoryHeader/WholeCategoryName/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import useStyles from 'components/CategoryHeader/WholeCategoryName/styles';
 import Router from 'next/router';
+import clsx from 'clsx';
 
 interface CategoryBoxProps {
   names: string;
@@ -13,16 +14,27 @@ const WholeCategoryName: FC<CategoryBoxProps> = (props) => {
   const idArray = ids.split('>');
   const lastIndex = nameArray.length - 1;
 
+  // TODO(jominjimail): duplicated function
   const setCategory = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
     const categoryId: string = event.currentTarget.value;
     Router.push(`/tempCategoryDetail/${categoryId}`);
   };
 
   const makeElement = (name, index): React.ReactElement => (
     (index === lastIndex)
-      ? <button className={classes.active} onClick={setCategory} value={idArray[index]}>
+      ? <button
+        key={index}
+        className={clsx(classes.button, classes.active)}
+        onClick={setCategory}
+        value={idArray[index]}
+      >
         {name}</button>
-      : <button className={classes.inactive} onClick={setCategory} value={idArray[index]}>
+      : <button
+        key={index}
+        className={clsx(classes.button, classes.inactive)}
+        onClick={setCategory}
+        value={idArray[index]}
+      >
         {name}</button>
   );
 

client/components/CategoryHeader/WholeCategoryName/styles.tsx

@@ -5,7 +5,7 @@ const useStyles = makeStyles({
   container: {
     background: AppColor.WHITE,
     display: 'flex',
-    height: '3rem',
+    height: '2.5rem',
     color: 'black',
   },
   inactive: {
@@ -14,6 +14,13 @@ const useStyles = makeStyles({
   active: {
     color: AppColor.BLACK,
   },
+  button: {
+    background: 'none',
+    border: 'none',
+    font: 'inherit',
+    cursor: 'pointer',
+    outline: 'inherit',
+  },
 });
 
 export default useStyles;

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/components/LikeList/LikeGridView/index.tsx

@@ -19,7 +19,7 @@ const LikeGridView: FC<LikeGridViewProps> = (props) => {
 
   const GridViewItem = categoryArray.map((category) => (
     <li className={classes.root} id={Category[category]} key={category} onClick={handleItemClick}>
-      <div className={clsx(classes.images)}>
+      <div id={Category[category]} className={clsx(classes.images)}>
         {itemArray[category]
           .map((item, index) => <ImageItem
             id={Category[category]}

client/components/LikeList/LikeGridView/styles.ts

@@ -3,9 +3,7 @@ import { AppColor } from 'constant';
 
 const useStyles = makeStyles({
   root: {
-    display: 'inline-flex',
-    justifyContent: 'flex-start',
-    flexDirection: 'column',
+    display: 'inline-block',
     backgroundColor: AppColor.WHITE,
   },
   data: {

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',
+};

client/pages/tempCategoryDetail/[CategoryID].tsx

@@ -4,7 +4,6 @@ import { GetServerSideProps } from 'next';
 import { CategoryProps } from 'redux/ducks/category';
 import { Category } from 'interfaces/category';
 import { CATEGORY_API, CATEGORY_CHILDREN_API } from 'constant';
-import Router from 'next/router';
 import ChildrenCard from 'components/CategoryHeader/ChildrenCard';
 import WholeCategoryName from 'components/CategoryHeader/WholeCategoryName';
 
@@ -16,20 +15,14 @@ interface DetailCategoryProps extends CategoryProps {
 const DetailCategory: FC<DetailCategoryProps> = (props) => {
   const { categoryData, categoryChildrenData } = props;
 
-  const setCategory = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-    const categoryId: string = event.currentTarget.value;
-    Router.push(`/tempCategoryDetail/${categoryId}`);
-  };
-
   return (
     <MainHeader>
-      <div>카테고리 상세 페이지</div>
       <WholeCategoryName
         names={categoryData.value.wholeCategoryName}
         ids={categoryData.value.wholeCategoryId}
       >
       </WholeCategoryName>
-      <ChildrenCard childreanData={categoryChildrenData}></ChildrenCard>
+      <ChildrenCard childrenData={categoryChildrenData}></ChildrenCard>
     </MainHeader>
   );
 };