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

v1.0.0
woowa-techcamp-2021 · Aug 27, 2021 · ab7b270 · ab7b270
2 parents d81086d + 3376d45
commit ab7b270
Show file tree

Hide file tree

Showing 33 changed files with 402 additions and 150 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
   <img alt="banner" src="https://user-images.githubusercontent.com/35324795/129211840-c90d2f8e-3c28-4d22-8edf-e6de6e4339f3.png">
 
 ![License](https://img.shields.io/badge/License-MIT-red)
-![Version](https://img.shields.io/badge/Version-0.1.0-green)
+![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/woowa-techcamp-2021/store-2?color=green&label=Version)
 
 </h6>
 

diff --git a/client/package.json b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "store-2-client",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "description": "배민문구사 클라이언트",
   "main": "src/index.tsx",
   "type": "module",

diff --git a/client/src/assets/images/no_image.png b/client/src/assets/images/no_image.png
diff --git a/client/src/components/auth/login-modal.tsx b/client/src/components/auth/login-modal.tsx
@@ -0,0 +1,32 @@
+import React, { FC, Dispatch, SetStateAction } from 'react';
+import { useHistory } from 'lib/router';
+
+import { SIGNIN_URL } from 'constants/urls';
+
+import { Modal } from 'components';
+
+interface LoginModalProps {
+  visible: boolean;
+  setVisible: Dispatch<SetStateAction<boolean>>;
+}
+
+const LoginModal: FC<LoginModalProps> = ({ visible, setVisible }) => {
+  const history = useHistory();
+
+  const moveSignin = () => {
+    history.push(SIGNIN_URL);
+  };
+
+  return (
+    <Modal
+      type="confirm"
+      header={<div>로그인이 필요합니다</div>}
+      body={<div>로그인 페이지로 이동하시겠습니까?</div>}
+      visible={visible}
+      setVisible={setVisible}
+      onConfirm={moveSignin}
+    />
+  );
+};
+
+export default LoginModal;
diff --git a/client/src/components/cart/index.tsx b/client/src/components/cart/index.tsx
@@ -3,14 +3,13 @@ import { useSelector } from 'react-redux';
 import styled from 'lib/woowahan-components';
 import { useHistory } from 'lib/router';
 
-import { PAYMENT_URL, SIGNIN_URL } from 'constants/urls';
+import { PAYMENT_URL } from 'constants/urls';
 import { cartGenerator } from 'utils/cart-generator';
 
 import { RootState } from 'store';
 
-import { TextButton } from 'components';
-import Modal from 'components/common/modal';
-import PriceCalculator from 'components/common/price-calculator';
+import { TextButton, PriceCalculator } from 'components';
+import LoginModal from 'components/auth/login-modal';
 import { TableSection, CartItem } from './table-section';
 
 const SectionTitle = styled.h4`
@@ -60,10 +59,6 @@ const Cart: FC = () => {
 
   const onClick = useCallback(() => history.goBack(), [history]);
 
-  const moveSignin = () => {
-    history.push(SIGNIN_URL);
-  };
-
   const { userId } = useSelector(({ auth }: RootState) => ({
     userId: auth.user.userId,
   }));
@@ -136,14 +131,7 @@ const Cart: FC = () => {
           <TextButton title="전체 상품 주문" type="submit" styleType="black" onClick={onClickOrder(true)} />
         </OrderButtonDiv>
       </ButtonDiv>
-      <Modal
-        type="confirm"
-        header={<div>로그인이 필요합니다</div>}
-        body={<div>로그인 페이지로 이동하시겠습니까?</div>}
-        visible={modalVisible}
-        setVisible={setModalVisible}
-        onConfirm={moveSignin}
-      />
+      <LoginModal visible={modalVisible} setVisible={setModalVisible} />
     </>
   );
 };

diff --git a/client/src/components/cart/table-section.tsx b/client/src/components/cart/table-section.tsx
@@ -51,6 +51,9 @@ const CheckBoxDiv = styled.div`
 `;
 
 const ItemTitle = styled.div`
+  display: flex;
+  align-items: center;
+  word-break: keep-all;
   font-size: 14px;
 
   ${({ theme }) => theme?.mobile} {
@@ -59,10 +62,10 @@ const ItemTitle = styled.div`
 `;
 
 const tableHeaders = [
-  { column: '상품/옵션 정보', span: 1 },
-  { column: '수량', span: 1 },
-  { column: '상품금액', span: 1 },
-  { column: '배송비', span: 1 },
+  { column: '상품/옵션 정보', span: 6 },
+  { column: '수량', span: 3 },
+  { column: '상품금액', span: 4 },
+  { column: '배송비', span: 3 },
 ];
 
 const TableSection: FC<TableSectionProps> = ({
@@ -146,7 +149,7 @@ const TableSection: FC<TableSectionProps> = ({
                 <Link className="item-link" to={`${ITEM_URL}/${id}`}>
                   <ItemTitle>
                     <img src={thumbnail} alt={title} />
-                    {title}
+                    <div>{title}</div>
                   </ItemTitle>
                 </Link>
               </div>

diff --git a/client/src/components/common/grid-form.tsx b/client/src/components/common/grid-form.tsx
@@ -13,9 +13,11 @@ const FormContainer = styled.div`
     height: 300px;
     outline: none;
   }
+
   input,
   textarea {
-    font-size: 14ox;
+    font-size: 14px;
+    font-family: ${({ theme }) => theme?.fontBasic};
     padding: 6px 12px;
     border: 1px solid ${({ theme }) => theme?.colorLineLight};
     width: 240px;

diff --git a/client/src/components/common/pagination.tsx b/client/src/components/common/pagination.tsx
@@ -2,6 +2,7 @@ import React, { FC, useCallback, useState, Dispatch, SetStateAction } from 'reac
 import styled from 'lib/woowahan-components';
 
 interface PaginationProps {
+  className?: string;
   pageCount: number;
   showCnt?: number;
   activePage: number;
@@ -32,7 +33,7 @@ const Button = styled.button`
   }
 `;
 
-const Pagination: FC<PaginationProps> = ({ pageCount, showCnt = 5, activePage, setActivePage }) => {
+const Pagination: FC<PaginationProps> = ({ className = '', pageCount, showCnt = 5, activePage, setActivePage }) => {
   const [startPage, setStartPage] = useState(1);
 
   const goNextPage = useCallback(() => {
@@ -70,7 +71,7 @@ const Pagination: FC<PaginationProps> = ({ pageCount, showCnt = 5, activePage, s
   };
 
   return (
-    <Wrapper>
+    <Wrapper className={className}>
       {startPage > 1 && (
         <Button type="button" onClick={goPrevPage}>
           이전

diff --git a/client/src/components/common/table.tsx b/client/src/components/common/table.tsx
@@ -20,28 +20,29 @@ const TableBody = styled.table`
     border-top: 1px solid ${({ theme }) => theme?.colorLineLight};
     border-bottom: 1px solid ${({ theme }) => theme?.colorLineLight};
     background: ${({ theme }) => theme?.colorFooter};
-
-    th {
-      padding: 16px 24px;
-      font-size: 14px;
-      font-weight: ${({ theme }) => theme?.weightBold};
-      vertical-align: middle;
-    }
   }
 
   tbody {
     tr {
       border-bottom: 1px solid ${({ theme }) => theme?.colorLineLight};
     }
   }
+`;
+
+const TableHead = styled.th`
+  padding: 16px 24px;
+  font-size: 14px;
+  font-weight: ${({ theme }) => theme?.weightBold};
+  vertical-align: middle;
+  width: ${props => `${Math.floor((props.span as number) * 100)}%`};
 
+  ${({ theme }) => theme?.tablet} {
+    font-size: 12px;
+    padding: 8px 6px;
+  }
   ${({ theme }) => theme?.mobile} {
-    thead {
-      th {
-        font-size: 12px;
-        padding: 8px 6px;
-      }
-    }
+    font-size: 10px;
+    padding: 8px 6px;
   }
 `;
 
@@ -50,10 +51,14 @@ const TableCell = styled.td`
   font-size: 14px;
   vertical-align: middle;
 
-  ${({ theme }) => theme?.mobile} {
+  ${({ theme }) => theme?.tablet} {
     padding: 12px 6px;
     font-size: 12px;
   }
+  ${({ theme }) => theme?.mobile} {
+    padding: 12px 6px;
+    font-size: 10px;
+  }
 `;
 
 const EmptyCell = styled.tr`
@@ -70,17 +75,18 @@ const EmptyCell = styled.tr`
 `;
 
 const Table: FC<TableProps> = ({ headers, children, loading }) => {
+  const totalSpan = headers.reduce((acc, cur) => acc + cur.span, 0);
+
   return (
     <TableBody>
-      <colgroup>
-        {headers.map(({ span }, i) => (
-          <col span={span} key={headers[i].column.toString()} />
-        ))}
-      </colgroup>
       <thead>
         <tr>
-          {headers.map(({ column }) => {
-            return <th key={column.toString()}>{column}</th>;
+          {headers.map(({ column, span }) => {
+            return (
+              <TableHead key={column.toString()} span={span / totalSpan}>
+                {column}
+              </TableHead>
+            );
           })}
         </tr>
       </thead>

diff --git a/client/src/components/item-detail/detail-wrapper.tsx b/client/src/components/item-detail/detail-wrapper.tsx
@@ -13,32 +13,45 @@ interface DetailWrapperProps {
 const Container = styled.div`
   width: 100%;
   margin-top: 80px;
+
+  &:last-child {
+    margin-bottom: 80px;
+  }
 `;
 
 const DetailHeader = styled.div`
   display: flex;
+  margin-left: 10%;
+
+  ${({ theme }) => theme?.mobile} {
+    margin-left: 0;
+  }
 `;
 
 const DetailContent = styled.div`
   border: 3px solid ${({ theme }) => theme?.colorLine};
   background-color: white;
+  padding: 5%;
+  min-height: 100px;
 `;
 
 const Marker = styled.div`
+  cursor: pointer;
   padding: 20px 30px;
-  font-size: 24px;
+  font-size: 20px;
   font-family: ${({ theme }) => theme?.fontHanna};
-  background-color: ${({ selected }) => (selected ? 'white' : 'none')};
-  width: fit-content;
-  border: ${({ selected }) => (selected ? '3px' : '1px')} solid ${({ theme }) => theme?.colorLine};
-  border-top: ${({ selected }) => (selected ? '3px' : '1px')} solid ${({ theme }) => theme?.colorLine};
-  border-bottom: none;
   color: ${({ theme }) => theme?.colorSoftBlack};
+  background-color: ${({ theme }) => theme?.colorWhite};
+  width: fit-content;
+  border: ${({ selected }) => (selected ? '3px' : '0')} solid ${({ theme }) => theme?.colorLine};
+  border-bottom: ${({ selected }) => (selected ? '0' : '3px')} solid ${({ theme }) => theme?.colorLine};
   transform: translateY(3px);
-  cursor: pointer;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 
   span {
     color: ${({ theme }) => theme?.colorPrimary};
+    margin-left: 3px;
   }
 
   ${({ theme }) => theme?.mobile} {

diff --git a/client/src/components/item-detail/detail.tsx b/client/src/components/item-detail/detail.tsx
@@ -1,8 +1,9 @@
-import React, { FC, useRef } from 'react';
+import React, { FC, useRef, Dispatch, SetStateAction } from 'react';
 import styled from 'lib/woowahan-components';
 
 import { IReview } from 'types/review';
 
+import { Pagination } from 'components';
 import DetailWrapper from './detail-wrapper';
 import ReviewList from './review-list';
 
@@ -12,24 +13,37 @@ interface DetailProps {
   reviews: IReview[];
   itemLoading: boolean;
   reviewLoading: boolean;
+  pageCount: number;
+  pageId: number;
+  setPageId: Dispatch<SetStateAction<number>>;
 }
 
 const Container = styled.section`
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
+
   .review-loader {
     width: 230px;
     height: 380px;
   }
+
+  .review-pagination {
+    margin-bottom: 0;
+  }
 `;
 
 const DetailImageWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
 
+  .detail-empty {
+    font-size: 18px;
+    font-family: ${({ theme }) => theme?.fontHannaAir};
+  }
+
   img {
     ${({ theme }) => theme?.tablet} {
       width: 100%;
@@ -40,7 +54,7 @@ const DetailImageWrapper = styled.div`
   }
 `;
 
-const Detail: FC<DetailProps> = ({ contents, itemLoading, reviewCount, reviews, reviewLoading }) => {
+const Detail: FC<DetailProps> = ({ contents, reviewCount, reviews, reviewLoading, pageCount, pageId, setPageId }) => {
   const detailRef = useRef<HTMLDivElement>(null);
   const detailExecuteScroll = () => {
     if (detailRef.current) detailRef.current.scrollIntoView();
@@ -60,9 +74,13 @@ const Detail: FC<DetailProps> = ({ contents, itemLoading, reviewCount, reviews,
         reviewExecuteScroll={reviewExecuteScroll}
       >
         <DetailImageWrapper>
-          {contents.map((v, i) => {
-            return <img src={v} key={v} alt={`${i}`} />;
-          })}
+          {!contents || contents.length === 0 ? (
+            <div className="detail-empty">상품 상세 정보를 준비 중입니다.</div>
+          ) : (
+            contents.map((content, i) => {
+              return <img src={content} key={content} alt={`${i}`} />;
+            })
+          )}
         </DetailImageWrapper>
       </DetailWrapper>
       <DetailWrapper
@@ -74,6 +92,7 @@ const Detail: FC<DetailProps> = ({ contents, itemLoading, reviewCount, reviews,
         reviewExecuteScroll={reviewExecuteScroll}
       >
         <ReviewList reviews={reviews} reviewLoading={reviewLoading} />
+        <Pagination className="review-pagination" pageCount={pageCount} activePage={pageId} setActivePage={setPageId} />
       </DetailWrapper>
     </Container>
   );