Merge pull request #205 from woowa-techcamp-2021/dev

v1.1.0
woowa-techcamp-2021 · Aug 30, 2021 · 0de6d52 · 0de6d52
2 parents ab7b270 + c665f37
commit 0de6d52
Show file tree

Hide file tree

Showing 95 changed files with 1,295 additions and 839 deletions.
diff --git a/client/package.json b/client/package.json
@@ -27,13 +27,14 @@
     "axios": "^0.21.1",
     "nanoid": "^3.1.25",
     "react": "^17.0.2",
+    "react-daum-postcode": "^2.0.6",
     "react-dom": "^17.0.2",
+    "react-helmet-async": "^1.1.2",
     "react-redux": "^7.2.4",
     "redux": "^4.1.1",
     "redux-logger": "^3.0.6",
     "redux-saga": "^1.1.3",
     "redux-saga-test-plan": "^4.0.3",
-    "sanitize-html": "^2.4.0",
     "styled-reset": "^4.3.4",
     "stylis": "^4.0.10"
   },

diff --git a/client/src/components/auth/form.tsx b/client/src/components/auth/form.tsx
@@ -59,6 +59,10 @@ const Form = styled.form`
   .auth-input {
     margin-bottom: 20px;
   }
+
+  .auth-check {
+    margin-bottom: 12px;
+  }
 `;
 
 const Image = styled.img`
@@ -158,7 +162,11 @@ const AuthForm: FC<AuthFormProps> = ({
             onChange={onChange}
             maxLength={20}
           />
-          {isSignup && <CheckBox id="signup-agree" text="배민문방구 전체 동의" onChange={onCheckChange} />}
+          {isSignup && (
+            <div className="auth-check">
+              <CheckBox id="signup-agree" text="배민문방구 전체 동의" onChange={onCheckChange} />
+            </div>
+          )}
 
           <Error>{error}</Error>
           {!isSignup && (
@@ -191,7 +199,7 @@ const AuthForm: FC<AuthFormProps> = ({
               ) : (
                 <>
                   <Image src={github} alt="github-icon" />
-                  깃-헙으로 로그인
+                  깃-헙으로 로그인
                 </>
               )}
             </BoxButton>

diff --git a/client/src/components/cart/index.tsx b/client/src/components/cart/index.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useCallback, Fragment, FC } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useState, useCallback, Fragment, FC, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'lib/woowahan-components';
 import { useHistory } from 'lib/router';
 
@@ -9,6 +9,7 @@ import { cartGenerator } from 'utils/cart-generator';
 import { RootState } from 'store';
 
 import { TextButton, PriceCalculator } from 'components';
+import { setCart } from 'store/cart';
 import LoginModal from 'components/auth/login-modal';
 import { TableSection, CartItem } from './table-section';
 
@@ -37,50 +38,67 @@ const ButtonDiv = styled.div`
   flex-wrap: wrap;
   justify-content: space-between;
   padding-bottom: 50px;
+
   @media all and (max-width: 800px) {
-    gap: 14px;
     justify-content: center;
+
+    > button:first-child {
+      margin: 14px;
+      margin-top: 0;
+    }
   }
 `;
 
 const OrderButtonDiv = styled.div`
   display: flex;
-  gap: 10px;
-`;
 
+  button:first-child {
+    margin-right: 10px;
+  }
+`;
 const Cart: FC = () => {
+  const { userId, cart } = useSelector(({ auth, cart }: RootState) => ({
+    userId: auth.user.userId,
+    cart: cart.cart,
+  }));
+  const getCartItemIndexes = () => {
+    const cartItems = cartGenerator(cart);
+    const indexes: number[] = [];
+    cartItems.forEach((item, index) => indexes.push(index));
+    return indexes;
+  };
   const [prices, setPrices] = useState([0]);
   const [totalCount, setTotalCount] = useState(0);
-  const [cartItems, setCartItems] = useState(cartGenerator());
-  const [checkAll, setCheckAll] = useState(false);
-  const [checkedItems, setCheckedItems] = useState(new Set<number>());
+  const [cartItems, setCartItems] = useState(cartGenerator(cart));
+  const [checkAll, setCheckAll] = useState(true);
+  const [checkedItems, setCheckedItems] = useState(new Set<number>(getCartItemIndexes()));
   const [modalVisible, setModalVisible] = useState(false);
+  const dispatch = useDispatch();
   const history = useHistory();
 
-  const onClick = useCallback(() => history.goBack(), [history]);
+  useEffect(() => {
+    setCartItems(cartGenerator(cart));
+  }, [cart]);
 
-  const { userId } = useSelector(({ auth }: RootState) => ({
-    userId: auth.user.userId,
-  }));
+  const onClick = useCallback(() => history.goBack(), [history]);
 
-  const deleteSelectCartItem = () => {
+  const deleteSelectCartItem = useCallback(() => {
     const data = localStorage.getItem('select') as string;
     const select = data.split(',');
-    let cartItems = cartGenerator();
+    let cartItems = cartGenerator(cart);
     cartItems = cartItems.filter((item, index) => select.indexOf(index.toString()) < 0);
     let cartItemsString = '';
     cartItems.forEach(item => {
       cartItemsString += `${item.id},${item.thumbnail},${item.title},${item.count},${item.price},`;
     });
     cartItemsString = cartItemsString.slice(0, cartItemsString.length - 1);
-    localStorage.setItem('cart', cartItemsString);
+    dispatch({ type: setCart, payload: cartItemsString });
     localStorage.removeItem('select');
-    setCartItems(cartGenerator());
     setPrices([0]);
     setTotalCount(0);
     setCheckAll(false);
     setCheckedItems(new Set<number>());
-  };
+  }, [cart, dispatch]);
 
   const orderCartItem = (isAll: boolean) => {
     let selectCartItems: CartItem[] = [];
@@ -104,21 +122,45 @@ const Cart: FC = () => {
 
   const onClickOrder = (isAll: boolean) => () => {
     if (userId) {
+      localStorage.removeItem('select');
       orderCartItem(isAll);
     } else {
       setModalVisible(true);
     }
   };
 
+  const updatePrice = useCallback(
+    (set: Set<number>) => {
+      const cartItems = cartGenerator(cart);
+      const prices = [] as number[];
+      let totalCount = 0;
+      Array.from(set).forEach(index => {
+        const item = cartItems[Number(index)];
+        prices.push(item.price * item.count);
+        totalCount += item.count;
+      });
+      if (prices.length === 0) {
+        prices.push(0);
+      }
+      setPrices(prices);
+      setTotalCount(totalCount);
+    },
+    [setPrices, setTotalCount, cart],
+  );
+
+  useEffect(() => {
+    updatePrice(checkedItems);
+    localStorage.setItem('select', Array.from(checkedItems).join(','));
+  }, [updatePrice, checkedItems]);
+
   return (
     <>
       <SectionTitle> </SectionTitle>
       <TableSection
         cartItems={cartItems}
         checkedItems={checkedItems}
         checkAll={checkAll}
-        setPrices={setPrices}
-        setTotalCount={setTotalCount}
+        updatePrice={updatePrice}
         setCheckAll={setCheckAll}
         setCheckedItems={setCheckedItems}
       />

diff --git a/client/src/components/cart/table-section.tsx b/client/src/components/cart/table-section.tsx
@@ -13,8 +13,7 @@ interface TableSectionProps {
   cartItems: CartItem[];
   checkedItems: Set<number>;
   checkAll: boolean;
-  setPrices: React.Dispatch<React.SetStateAction<number[]>>;
-  setTotalCount: React.Dispatch<React.SetStateAction<number>>;
+  updatePrice: (set: Set<number>) => void;
   setCheckAll: React.Dispatch<React.SetStateAction<boolean>>;
   setCheckedItems: React.Dispatch<React.SetStateAction<Set<number>>>;
 }
@@ -72,26 +71,10 @@ const TableSection: FC<TableSectionProps> = ({
   cartItems,
   checkedItems,
   checkAll,
-  setPrices,
-  setTotalCount,
+  updatePrice,
   setCheckAll,
   setCheckedItems,
 }) => {
-  const updatePrice = (set: Set<number>) => {
-    const prices = [] as number[];
-    let totalCount = 0;
-    Array.from(set).forEach(index => {
-      const item = cartItems[Number(index)];
-      prices.push(item.price * item.count);
-      totalCount += item.count;
-    });
-    if (prices.length === 0) {
-      prices.push(0);
-    }
-    setPrices(prices);
-    setTotalCount(totalCount);
-  };
-
   const checkedItemHandler = (id: number) => () => {
     const checkedSet = new Set<number>(checkedItems);
     if (checkedSet.has(id)) {

diff --git a/client/src/components/common/address-modal.tsx b/client/src/components/common/address-modal.tsx
@@ -0,0 +1,48 @@
+import styled from 'lib/woowahan-components';
+import React, { FC } from 'react';
+import DaumPostcode from 'react-daum-postcode';
+
+interface IAddressData {
+  roadAddress: string;
+}
+
+interface AddressModalProps {
+  handleComplete: (data: IAddressData) => void;
+  setModal: React.Dispatch<React.SetStateAction<boolean>>;
+}
+const Modal = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+`;
+
+const ModalInner = styled.div`
+  width: 80%;
+  max-width: 600px;
+  #__daum__layer_1 {
+    border-radius: 10px;
+  }
+`;
+
+const AddressModal: FC<AddressModalProps> = ({ handleComplete, setModal }) => {
+  const modalClickHandler = (e: Event) => {
+    if (e.target === e.currentTarget) setModal(false);
+  };
+  return (
+    <Modal onClick={modalClickHandler}>
+      <ModalInner>
+        <DaumPostcode onComplete={handleComplete} animation />
+      </ModalInner>
+    </Modal>
+  );
+};
+
+export default AddressModal;
diff --git a/client/src/components/common/grid-form.tsx b/client/src/components/common/grid-form.tsx
@@ -27,6 +27,7 @@ const FormContainer = styled.div`
     input,
     textarea {
       width: 100%;
+      font-size: 12px;
     }
     textarea {
       height: 120px;
@@ -72,6 +73,7 @@ const RowHead = styled.div`
 const RowContent = styled.div`
   flex: 1;
   padding: 8px 16px;
+  font-size: 12px;
 `;
 
 const GridForm: FC<GridFormProps> = ({ titles, children }) => {

diff --git a/client/src/components/common/layout/footer.tsx b/client/src/components/common/layout/footer.tsx
@@ -97,7 +97,7 @@ const Info = styled.div`
   }
 `;
 
-const Footer: FC<FooterProps> = ({ isMobile }) => {
+const Footer: FC<FooterProps> = React.memo(({ isMobile }) => {
   return (
     <Wrapper>
       <Left>
@@ -150,6 +150,8 @@ const Footer: FC<FooterProps> = ({ isMobile }) => {
       </Right>
     </Wrapper>
   );
-};
+});
+
+Footer.displayName = 'footer';
 
 export default Footer;
diff --git a/client/src/components/common/layout/header.tsx b/client/src/components/common/layout/header.tsx
@@ -45,7 +45,7 @@ const LogoWrapper = styled.div`
   padding: 25px 0;
 `;
 
-const Header: FC<HeaderProps> = ({ displayMain, isMobile }) => {
+const Header: FC<HeaderProps> = React.memo(({ displayMain, isMobile }) => {
   const renderLogo = () => {
     if (isMobile) {
       if (displayMain) return <Tent />;
@@ -71,6 +71,8 @@ const Header: FC<HeaderProps> = ({ displayMain, isMobile }) => {
   };
 
   return <Wrapper>{renderLogo()}</Wrapper>;
-};
+});
+
+Header.displayName = 'header';
 
 export default Header;