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

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>
   );
 };

server/src/interfaces/product.ts

@@ -10,10 +10,10 @@ export interface IProduct {
 
 export interface IProductDTO {
   category: Object;
-  productNo: Number;
+  productNo: number;
   name: String;
   salePrice: Number;
-  productImages: Object;
+  productImages: any;
   productInfoProvidedNoticeView: any;
   like?: Boolean;
 }

server/src/services/product.ts

@@ -54,7 +54,8 @@ export default class ProductService {
             product.productInfoProvidedNoticeView.basic,
         }));
 
-      products = await this.addLikeField(products);
+      await this.addLikeField(products);
+      this.changeImageUrl(products);
 
       return { products };
     } catch (e) {
@@ -82,12 +83,18 @@ export default class ProductService {
         .skip(skip);
       const products = productRecords
         .map((record) => record.toObject())
-        .map((product) => ({
-          productId: product._id,
-          productName: product.name,
-          productImages: product.productImages[0],
-          salePrice: Number(product.salePrice),
-        }));
+        .map((product) => {
+          const index = product.productNo % 61;
+          product.productImages[0].url = `https://naver.github.io/egjs-infinitegrid/assets/image/${index}.jpg`;
+
+          return {
+            productId: product._id,
+            productName: product.name,
+            productImages: product.productImages[0],
+            salePrice: Number(product.salePrice),
+          };
+        });
+
       return { products };
     } catch (e) {
       this.logger.error(e);
@@ -104,7 +111,9 @@ export default class ProductService {
         throw new NotFoundError('Product is not exist');
       }
       let products: IProductDTO[] = [productRecord.toObject()];
-      products = await this.addLikeField(products);
+      await this.addLikeField(products);
+      this.changeImageUrl(products);
+
       const product = products[0];
 
       return {
@@ -125,7 +134,7 @@ export default class ProductService {
     }
   }
 
-  public async addLikeField(products: IProductDTO[]): Promise<IProductDTO[]> {
+  public async addLikeField(products: IProductDTO[]): Promise<void> {
     try {
       const userLikeRecord = await this.userModel
         .findOne({
@@ -146,18 +155,22 @@ export default class ProductService {
       );
       const likeSet = new Set<number>(likeList);
 
-      products = products.map((product) => {
+      for (const product of products) {
         product.like = likeSet.has(product.productNo as number) ? true : false;
-        return product as IProductDTO;
-      });
-
-      return products;
+      }
     } catch (e) {
       this.logger.error(e);
       throw e;
     }
   }
 
+  public changeImageUrl(products: IProductDTO[]): void {
+    for (const product of products) {
+      const index = product.productNo % 61;
+      product.productImages[0].url = `https://naver.github.io/egjs-infinitegrid/assets/image/${index}.jpg`;
+    }
+  }
+
   public async create(productDTO: IProductDTO): Promise<{ product: IProduct }> {
     try {
       this.logger.silly('Creating user db record');