[#46] git - 충돌해결

siliconValleyTeamA · Jan 13, 2021 · 0a2938b · 0a2938b
2 parents d6cf199 + 7fde5ee
commit 0a2938b
Show file tree

Hide file tree

Showing 34 changed files with 619 additions and 149 deletions.
diff --git a/src/App.js b/src/App.js
@@ -4,14 +4,15 @@ import { Switch, Route, BrowserRouter } from 'react-router-dom';
 import styled from 'styled-components';
 
 /* Internal dependencies */
-import DetailPage from 'pages/DetailPage';
 import CategoryPage from 'pages/CategoryPage';
+import DetailPage from 'pages/DetailPage';
 import PopularPage from 'pages/PopularPage';
 import MyPage from 'pages/MyPage';
 import MyHistoryPage from 'pages/MyHistoryPage';
 import MyJjimPage from 'pages/MyJjimPage';
+import MyCartPage from 'pages/MyCartPage';
 import GlobalStyle from 'styles/global-styles';
-import SetProfilePage from 'pages/SetProfilePage/SetProfilePage';
+import MyProfilePage from 'pages/MyProfilePage';
 
 const MainLayout = styled.div`
   width: 60%;
@@ -25,13 +26,14 @@ function App() {
       <MainLayout>
         <Switch>
           <Route path="/" exact component={CategoryPage} />
-          <Route path="/category/:category" exact component={CategoryPage} />
-          <Route path="/popular" exact component={PopularPage} />
+          <Route path="/category/:categoryid" component={CategoryPage} />
+          <Route path="/popular" component={PopularPage} />
           <Route path="/detail" component={DetailPage} />
-          <Route path="/mypage" component={MyPage} />
+          <Route path="/mypage" exact component={MyPage} />
           <Route path="/mypage/history" component={MyHistoryPage} />
           <Route path="/mypage/jjim" component={MyJjimPage} />
-          <Route path="/mypage/setprofile" component={SetProfilePage} />
+          <Route path="/mypage/cart" component={MyCartPage} />
+          <Route path="/mypage/profile" component={MyProfilePage} />
         </Switch>
         <GlobalStyle />
       </MainLayout>

diff --git a/src/api/cartAPI.js b/src/api/cartAPI.js
@@ -0,0 +1,41 @@
+const mockCartList = {
+  data: [
+    {
+      id: 1,
+      title: '[비블리X위글위글] 선빼고 다드려요! 2만원대 무선 미니 고데기',
+      amount: 2131232,
+      img: 'https://img-cf.kurly.com/shop/data/goods/1595411079657l0.jpg',
+      cart_date: new Date(2020, 10, 1),
+    },
+    {
+      id: 2,
+      title: '[비블리X위글위글] 선빼고 다드려요! 2만원대 무선 미니 고데기',
+      amount: 2131232,
+      img: 'https://img-cf.kurly.com/shop/data/goods/1595411079657l0.jpg',
+      cart_date: new Date(2020, 10, 1),
+    },
+    {
+      id: 3,
+      title: '[비블리X위글위글] 선빼고 다드려요! 2만원대 무선 미니 고데기',
+      amount: 2131232,
+      img: 'https://img-cf.kurly.com/shop/data/goods/1595411079657l0.jpg',
+      cart_date: new Date(2020, 10, 1),
+    },
+    {
+      id: 4,
+      title: '[비블리X위글위글] 선빼고 다드려요! 2만원대 무선 미니 고데기',
+      amount: 2131232,
+      img: 'https://img-cf.kurly.com/shop/data/goods/1595411079657l0.jpg',
+      cart_date: new Date(2020, 10, 1),
+    },
+    {
+      id: 5,
+      title: '[비블리X위글위글] 선빼고 다드려요! 2만원대 무선 미니 고데기',
+      amount: 2131232,
+      img: 'https://img-cf.kurly.com/shop/data/goods/1595411079657l0.jpg',
+      cart_date: new Date(2020, 10, 1),
+    },
+  ],
+};
+
+export default mockCartList;
diff --git a/src/components/CategoryPage/CountryModal/CountryModal.js b/src/components/CategoryPage/CountryModal/CountryModal.js
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import classNames from 'classnames/bind';
+import styles from './CountryModal.module.scss';
+
+const cx = classNames.bind(styles);
+
+function CountryModal({ isOpen, close }) {
+  const [, setSelectCountry] = useState('korean');
+
+  const storedCountry = e => {
+    setSelectCountry(e.target.value);
+    window.sessionStorage.setItem('country', e.target.value);
+  };
+
+  return (
+    <React.Fragment>
+      {isOpen ? (
+        <React.Fragment>
+          <div className={cx('Modal-overlay')} onClick={close} />
+          <div className={cx('Modal')}>
+            <p className={cx('title')}>국가선택</p>
+            <div className={cx('content')}>
+              <div>
+                <select
+                  onChange={e => storedCountry(e)}
+                  className={cx('country-list')}
+                >
+                  <option value="korean">한국어</option>
+                  <option value="english">영어</option>
+                  <option value="chinese">중국어</option>
+                  <option value="japanese">일본어</option>
+                </select>
+              </div>
+              <p>선택하지 않으면 자동으로 한국어가 선택됩니다.</p>
+            </div>
+            <div className={cx('button-wrap')}>
+              <button onClick={close}>선택하기</button>
+            </div>
+          </div>
+        </React.Fragment>
+      ) : null}
+    </React.Fragment>
+  );
+}
+
+export default CountryModal;
diff --git a/src/components/CategoryPage/CountryModal/CountryModal.module.scss b/src/components/CategoryPage/CountryModal/CountryModal.module.scss
@@ -0,0 +1,74 @@
+@import 'styles/_palette.scss';
+
+.Modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 2;
+  background-color: rgba(0, 0, 0, 0.16);
+}
+.Modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 320px;
+  border-radius: 10px;
+  background-color: white;
+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+  z-index: 3;
+  & > * {
+    &:first-child {
+      margin-top: 16px;
+    }
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+  p.title {
+    font-size: 16pt;
+    font-weight: bold;
+    color: #333;
+  }
+  .content {
+    border-top: 1px solid #bebebe;
+    margin-top: 16px;
+    p {
+      margin: 5px 0px;
+      padding: 8px;
+      font-size: 10.5pt;
+      opacity: 0.8;
+      color: #333;
+    }
+    .country-list {
+      text-align-last: center;
+      width: 100%;
+      margin: 10px 0px;
+      padding: 8px;
+      font-size: 12pt;
+      color: #333;
+    }
+  }
+
+  .button-wrap {
+    margin: 0;
+    margin-top: 8px;
+    button {
+      width: 100%;
+      padding: 12px 0;
+      border-radius: 0 0 10px 10px;
+      background-color: #00c4c4;
+      font-size: 13pt;
+      color: white;
+      border: 0;
+      cursor: pointer;
+      &:hover {
+        background-color: #00b0b0;
+      }
+      &:active {
+        background-color: #00b0b0;
+      }
+    }
+  }
+}
diff --git a/src/components/CategoryPage/CountryModal/index.js b/src/components/CategoryPage/CountryModal/index.js
@@ -0,0 +1 @@
+export { default } from './CountryModal';
diff --git a/src/components/CategoryPage/GoodsList/GoodsList.jsx b/src/components/CategoryPage/GoodsList/GoodsList.jsx
@@ -48,9 +48,6 @@ function GoodsList({ popular }) {
       case 'closing':
         categoryData.sort(sortByClosing);
         break;
-      case 'jjim':
-        categoryData.sort(sortByJjim);
-        break;
       default:
         categoryData.sort(sortByPercent);
     }

diff --git a/src/components/MyDetailPage/CartPage/CartFooter/CartFooter.jsx b/src/components/MyDetailPage/CartPage/CartFooter/CartFooter.jsx
@@ -0,0 +1,19 @@
+/* External dependencies */
+import React from 'react';
+import classNames from 'classnames/bind';
+
+/* Internal dependencies */
+import styles from './CartFooter.module.scss';
+
+const cx = classNames.bind(styles);
+
+function CartFooter() {
+  return (
+    <div className={cx('cart-footer')}>
+      <div className={cx('cart-footer-total-price')}>101023원</div>
+      <button className={cx('cart-footer-confirm-button')}>결제하기</button>
+    </div>
+  );
+}
+
+export default CartFooter;
diff --git a/src/components/MyDetailPage/CartPage/CartFooter/CartFooter.module.scss b/src/components/MyDetailPage/CartPage/CartFooter/CartFooter.module.scss
@@ -0,0 +1,25 @@
+@import 'styles/_palette.scss';
+
+.cart-footer {
+  padding: 42px 20px 100px;
+  max-width: 500px;
+  margin: auto;
+
+  .cart-footer-total-price {
+    font-size: 20px;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 12px;
+  }
+
+  .cart-footer-confirm-button {
+    padding: 10px;
+    background-color: $wadiz;
+    border-radius: 10px;
+    font-size: 20px;
+    width: 500px;
+    font-weight: 700;
+    text-align: center;
+    color: $white;
+  }
+}
diff --git a/src/components/MyDetailPage/CartPage/CartFooter/index.js b/src/components/MyDetailPage/CartPage/CartFooter/index.js
@@ -0,0 +1 @@
+export { default } from './CartFooter';
diff --git a/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.jsx b/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.jsx
@@ -0,0 +1,42 @@
+/* External dependencies */
+import React from 'react';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames/bind';
+import { MdRemoveShoppingCart } from 'react-icons/md';
+
+/* Internal dependencies */
+import styles from './CartGoods.module.scss';
+
+const cx = classNames.bind(styles);
+
+function CartGoods({ data }) {
+  return (
+    <div className={cx('cart-item')}>
+      <Link to="/detail">
+        <div className={cx('cart-item-name')}>{data.title}</div>
+      </Link>
+      <div className={cx('cart-item-info')}>
+        <Link to="/detail">
+          <div
+            className={cx('cart-item-info-left')}
+            style={{
+              backgroundImage: `url(${data.img})`,
+            }}
+          ></div>
+        </Link>
+        <div className={cx('cart-item-info-right')}>
+          <input className={cx('cart-item-input')} />
+          <div className={cx('price')}>{data.amount}</div>
+          <div className={cx('delete')}>
+            <div className={cx('delete-icon')}>
+              <MdRemoveShoppingCart className={cx('MdRemoveShoppingCart')} />
+            </div>
+            <span className={cx('delete-description')}>삭제</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CartGoods;
diff --git a/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.module.scss b/src/components/MyDetailPage/CartPage/CartGoods/CartGoods.module.scss
@@ -0,0 +1,66 @@
+@import 'styles/_palette.scss';
+
+.cart-item {
+  width: 100%;
+  padding-bottom: 29px;
+
+  .cart-item-name {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 17px;
+    margin-bottom: 8px;
+  }
+
+  .cart-item-info {
+    display: flex;
+
+    .cart-item-info-left {
+      width: 100px;
+      height: 128px;
+      border-radius: 10px;
+      background-position: 50%;
+      background-size: cover;
+      background-repeat: no-repeat;
+    }
+
+    .cart-item-info-right {
+      display: flex;
+      flex: 1 1;
+      flex-direction: column;
+      margin-left: 1rem;
+      justify-content: space-between;
+      align-items: flex-end;
+
+      .cart-item-input {
+        justify-content: space-between;
+        width: 140px;
+        height: 45px;
+        border-radius: 999px;
+        background: $light-gray;
+        border: 0;
+        font-size: 1.5rem;
+        padding-left: 1rem;
+        margin-top: 1rem;
+      }
+      .price {
+        font-size: 20px;
+        font-weight: 700;
+      }
+
+      .delete {
+        display: flex;
+        span {
+          color: #f54243;
+          font-weight: 600;
+          font-size: 15px;
+          margin-top: 2px;
+        }
+
+        .MdRemoveShoppingCart {
+          color: #f54243;
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/MyDetailPage/CartPage/CartGoods/index.js b/src/components/MyDetailPage/CartPage/CartGoods/index.js
@@ -0,0 +1 @@
+export { default } from './CartGoods';