♻️ Refactor: 장바구니 삭제 모달 리팩토링 & 파비콘 수정

romantech · Nov 9, 2021 · f57bc42 · f57bc42
1 parent 44625f6
commit f57bc42
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -1,51 +1 @@
-## FrontEnd Coding Test Template
-안녕하세요,  
-Tradir.io에 지원해 주셔서 감사합니다.🙏
-
-Tradir.io 주니어 프론트엔드 개발자 코딩 테스트 기본 템플릿입니다.  
-해당 repository를 클론 하셔서 아래 명시된 항목들만 완성해 주시면 됩니다.  
-과제에만 집중하실 수 있게 기본적인 세팅은 미리 되어있습니다.
-
-### 📣 &nbsp; Instructions
-
-테이블을 만들 때 사용할 맥주 리스트🍻 API 입니다 ➡️ &nbsp; https://api.punkapi.com/v2/beers
-
-#### ✨ &nbsp; Styling
-
-* Styled-Components 를 사용해 주세요
-* Ant Design (https://ant.design/components/overview/) 의 기본 컴포넌트들을 사용하셔도 좋습니다 (선택)
-
-#### ⚓ &nbsp; 필수기능
-
-* 유저가 처음 페이지를 열었을 때 ``/home`` 에 도착하도록 만들어 주세요
-  - 개인적으로 추가하고 싶은 디자인은 자유롭게 추가하셔도 됩니다 😊
-  - 홈페이지에서 ``/beerlist`` 로 링크 이동할 수 있어야 합니다
-
-* material table library(https://material-table.com/#/docs/get-started) 를 사용해서 맥주 리스트 페이지(/beerlist)를 만들어 주세요
-  - material UI의 컴포넌트를 사용하는것이 아닙니다. 위에 있는 링크의 라이브러리를 사용해주세요.
-
-* 테이블의 column header 는 드래그로 순서 변경이 가능해야 합니다. 바뀐 column header 순서는 redux 에 저장되어 ``/home`` 와 ``/beerlist`` 사이 이동시에 유지되어야 합니다
-  - 위 라이브러리에서 드래그 기능을 지원합니다.
-
-* 맥주 리스트의 알콜 도수 ``(abv)`` 필터 기능을 만들어 주세요 [ 예) "5-6", "6-7" ]
-  - 필터는 다중 선택이 가능해야 합니다
-  - 필터 기능은 material table library 에 포함되어 있는 기능을 ``사용하지 말고`` 따로 제작해야 합니다
-
-#### 💡 &nbsp; 선택사항
-
-* 맥주 이름을 클릭했을 때 해당 맥주의 상세 정보를 볼 수 있는 modal 을 제작해 주세요
-
-* 장바구니를 만들어 주세요 
-  - 맥주를 장바구니에 추가하거나 삭제가 가능해야 합니다
-  - 장바구니는 ``/home`` 또는 ``/beerlist`` 에서 접근 가능해야 합니다
-
-* 필수 과제 외에 추가적으로 넣고 싶은 기능이 있는 경우 자유롭게 추가해 주세요 
-
-### 📝 &nbsp; 평가 기준
-* 기능 완성도(50%)
-* 코드 구성(35%)
-* UI 완성도(15%)
-
-#### 🎈🤖&nbsp; 과제 진행 중 추가적인 문의 사항이 있으실 경우, 언제든지 편하게 연락 주시기 바랍니다. &nbsp; 💌🎉
-<br /><br />
-### ** 과제 제출 시 개인 github에 repository를 생성하시고 메일로 링크 보내주시면 됩니다 **
+# BEER INFO 미니 프로젝트
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "tradir",
+  "name": "beerinfo",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

diff --git a/public/favicon.jpg b/public/favicon.jpg
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.jpg" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>TRADIR</title>
+    <title>BEER INFO</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/APIs/index.js b/src/APIs/index.js
@@ -4,7 +4,7 @@ const baseUrl = `https://api.punkapi.com/v2`;
 
 export default {
   getBeers: () => {
-    return axios.get(`${baseUrl}/beers`);
+    return axios.get(`${baseUrl}/beers?page=1&per_page=80`);
   },
   getSingleBeer: id => {
     return axios.get(`${baseUrl}/beers/${id}`);

diff --git a/src/Components/CartEntry.js b/src/Components/CartEntry.js
@@ -4,13 +4,18 @@ import styled from 'styled-components/macro';
 import { useDispatch } from 'react-redux';
 import { removeCartAction } from '../Modules/cartList';
 import ModalContents from './ModalContents';
-import { showInfoModal, showAutoCloseModal } from '../Utils';
+import { showInfoModal, showConfirmModal } from '../Utils';
 
 const CartEntry = ({ data }) => {
   const dispatch = useDispatch();
   const removeHandler = () => {
-    dispatch(removeCartAction(data.id - 1));
-    showAutoCloseModal({ content: '장바구니에서 삭제되었습니다.' });
+    const options = {
+      title: '주의',
+      content: `장바구니에서 삭제하시겠습니까?`,
+      onOk: () => dispatch(removeCartAction(data.id - 1)),
+      onCancel: () => {},
+    };
+    showConfirmModal(options);
   };
 
   const detailViewHandler = () => {

diff --git a/src/Pages/BeerListPage.js b/src/Pages/BeerListPage.js
@@ -40,10 +40,11 @@ const BeerListPage = () => {
   };
 
   const actionClickHandler = (_, { tableData }) => {
-    const isAdded = cartList?.some(id => id === tableData.id);
+    const { id } = tableData;
+    const isAdded = cartList?.some(cartId => cartId === id);
     if (!isAdded) {
-      dispatch(addCartAction(tableData.id));
-      showAutoCloseModal({ content: '장바구니에 추가했습니다.' });
+      dispatch(addCartAction(id));
+      showAutoCloseModal({ content: `장바구니에 추가되었습니다.` });
     }
   };
 

diff --git a/src/Pages/CartListPage.js b/src/Pages/CartListPage.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import styled, { css } from 'styled-components/macro';
 import { useSelector, useDispatch } from 'react-redux';
-import { Modal } from 'antd';
 import { clearCartAction } from '../Modules/cartList';
 import CartEntry from '../Components/CartEntry';
-import { ContainerStyle, ScrollStyle } from '../Styles/commonStyles';
-
-const { confirm } = Modal;
+import { ContainerStyle } from '../Styles/commonStyles';
+import { showConfirmModal } from '../Utils';
 
 const CartListPage = () => {
   const dispatch = useDispatch();
@@ -15,14 +13,13 @@ const CartListPage = () => {
 
   const clearCartHandler = () => {
     if (cartList.length > 0) {
-      confirm({
+      const options = {
         title: '주의',
         content: `장바구니에 있는 모든 제품(${cartList.length})을 삭제하시겠습니까?`,
-        onOk() {
-          dispatch(clearCartAction());
-        },
-        onCancel() {},
-      });
+        onOk: () => dispatch(clearCartAction()),
+        onCancel: () => {},
+      };
+      showConfirmModal(options);
     }
   };
 

diff --git a/src/Utils/index.js b/src/Utils/index.js
@@ -53,3 +53,15 @@ export const showAutoCloseModal = options => {
     modal.destroy();
   }, secondsToGo * 1000);
 };
+
+export const showConfirmModal = ({ onOk, onCancel, ...options }) => {
+  Modal.confirm({
+    ...options,
+    onOk() {
+      onOk();
+    },
+    onCancel() {
+      onCancel();
+    },
+  });
+};