Merge branch 'develop' of https://github.com/JpnShop/Front into login-#…

…77
JpnShop · Oct 12, 2022 · a787837 · a787837
2 parents b138282 + b4a9c65
commit a787837
Show file tree

Hide file tree

Showing 51 changed files with 1,410 additions and 2,004 deletions.
diff --git a/db2.json b/db2.json
diff --git a/db3.json b/db3.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,12 +13,14 @@
     "@reduxjs/toolkit": "^1.8.5",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
+    "gapi-script": "^1.2.0",
     "json-server": "^0.17.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-daum-postcode": "^3.1.1",
     "react-dom": "^18.2.0",
+    "react-google-login": "^5.2.2",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.4.0",
     "react-scroll": "^1.8.7",

diff --git a/src/App.jsx b/src/App.jsx
@@ -50,6 +50,7 @@ import Refund from './pages/My/Refund'
 import RefundListPage from './pages/My/Refund/RefundListPage'
 import RefundDetailPage from './pages/My/Refund/RefundDetailPage'
 import NotFoundPage from './pages/NotFoundPage'
+import OrderCheck from './pages/OrderCheck'
 
 function App() {
   const location = useLocation()
@@ -87,6 +88,7 @@ function App() {
               <Route path=":refundId" element={<RefundDetailPage />} />
             </Route>
           </Route>
+          <Route path="order-check" element={<OrderCheck />} />
           <Route path="/notice" element={<Notice />} />
           <Route path="/faq" element={<Faq />} />
           <Route path="/login" element={<LoginIndex />}>

diff --git a/src/animate.css b/src/animate.css
@@ -60,3 +60,28 @@
 .deleteSearch {
   animation: slideDown 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0s 1 reverse forwards;
 }
+
+/* loading bounce */
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+.firstBall {
+  animation: bounce 0.7s infinite;
+}
+
+.secondBall {
+  animation: bounce 0.7s 0.15s infinite;
+}
+
+.thirdBall {
+  animation: bounce 0.7s 0.3s infinite;
+}
diff --git a/src/components/Cart/index.jsx b/src/components/Cart/index.jsx
@@ -4,6 +4,8 @@ import CartItem from './CartItem'
 import Total from './Total'
 import CartBtn from './CartBtn'
 import { useGetCartItemsQuery } from '../../store/api/cartApiSlice'
+import ErrorCom from '../common/ErrorCom'
+import Loading from '../layout/Loading'
 
 const Cart = () => {
   const {
@@ -28,9 +30,9 @@ const Cart = () => {
   return (
     <>
       {isLoading ? (
-        <span>로딩중..</span>
+        <Loading />
       ) : isError ? (
-        <span>에러발생</span>
+        <ErrorCom Title="에러발생" />
       ) : (
         cartItems && (
           <div className="pb-[80px]">

diff --git a/src/components/Magazine/Main.jsx b/src/components/Magazine/Main.jsx
@@ -1,53 +1,45 @@
 import React from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
-// import { magazineDummy as list } from '../../dummy/magaineDetail'
+import ErrorCom from '../common/ErrorCom'
+import { magazineDummy as datas } from '../../dummy/magaineDetail'
 import Brand from './Brand'
 import Plus from './Plus'
-import { useGetMagazineQuery } from '../../store/api/magazineSlice'
+// import { useGetMagazineQuery } from '../../store/api/magazineSlice'
 import { cls } from '../../utils'
+import Loading from '../layout/Loading'
 
 const TopMain = () => {
-  // const { title, thumbnail, items } = list
   const params = useParams()
   const navigate = useNavigate()
-  const { data: list, isLoading, isError } = useGetMagazineQuery(params.id)
+  const data = datas.filter((item) => item.id == params.id)
+  const [list] = data
+  // const { data: list, isLoading, isError } = useGetMagazineQuery(params.id)
   const onClickHandler = (id) => {
     navigate(`/product/${id}`)
   }
   return (
     <>
-      {isLoading ? (
-        <span>로딩중...</span>
+      {/* {isLoading ? (
+        <Loading />
       ) : isError ? (
-        <span>에러발생</span>
+        <ErrorCom Title="에러발생" />
       ) : (
-        list && (
-          <>
-            <div className="h-[76px] bg-point text-white font-bold flex items-center justify-center">
-              {list.title}
-            </div>
-            <div className="relative">
-              {list.thumbnail.map((item, idx) => (
-                <React.Fragment key={idx}>
-                  <img src={item} className="w-full" />
-                  {idx === 0 && <Brand item={list} />}
-                </React.Fragment>
-              ))}
-              {list &&
-                list.items.map((item, idx) => (
-                  <Plus
-                    className={cls(
-                      'absolute',
-                      item.className && item.className,
-                    )}
-                    id={item.id}
-                    key={idx}
-                  />
-                ))}
-            </div>
-          </>
-        )
-      )}
+        list && ( */}
+      <>
+        <div className="h-[76px] bg-point text-white font-bold flex items-center justify-center">
+          {list.title}
+        </div>
+        <div className="relative">
+          {list.thumbnail.map((item, idx) => (
+            <React.Fragment key={idx}>
+              <img src={item} className="w-full" />
+              {idx === 0 && <Brand item={list} />}
+            </React.Fragment>
+          ))}
+        </div>
+      </>
+      {/* ) */}
+      {/* )} */}
     </>
   )
 }

diff --git a/src/components/Main/Latest/TodayMagazine.jsx b/src/components/Main/Latest/TodayMagazine.jsx
@@ -9,9 +9,9 @@ const TodayMagazine = () => {
     <div
       className="relative w-[9.563em]"
       //추후 id 값 넣기
-      onClick={() => navigate('/magazine/id')}
+      onClick={() => navigate('/magazine/${id}')}
     >
-      <img src="https://ifh.cc/g/DKN0O0.png" className="w-full" />
+      <img src="https://ifh.cc/g/KC4trp.png" className="w-full" />
       <button className="absolute top-4 right-4" onClick={() => setLike(!like)}>
         {like ? <LikeWhiteIcon /> : <LikeWhiteIcon />}
         {/* 나중에 아이콘넣기 */}

diff --git a/src/components/Main/TodayBest/Card.jsx b/src/components/Main/TodayBest/Card.jsx
@@ -1,33 +1,33 @@
 import React from 'react'
 import heart from '/public/assets/heart-on.svg'
-// import HeartIcon from '../../common/HeartIcon'
+import HeartIcon from '../../common/HeartIcon'
 import cart from '/public/assets/bag-on.svg'
 import { useNavigate } from 'react-router-dom'
 
 const Card = ({ product, active }) => {
-  const { url, title, sale, price, liked, id } = product
+  const { detailThumbList, productName, sale, price, liked, productId } =
+    product
   const navigate = useNavigate()
   return (
     <div
       className="w-[230px] h-80 mb-24"
-      onClick={() => navigate(`/product/${id}`)}
+      onClick={() => navigate(`/product/${productId}`)}
     >
       <div
         className="w-[230px] h-[230px] bg-cover bg-center rounded-full overflow-hidden"
         style={active ? { border: '2px solid #D86145' } : { border: 'none' }}
       >
-        <img src={url} alt={url} />
+        <img src={detailThumbList[0]} alt={productName} />
       </div>
       <div className="mt-8 relative">
-        <div className="text-sm text-[#4B4B4B] mt-7.5">[{title}]</div>
+        <div className="text-sm text-[#4B4B4B] mt-7.5">[{productName}]</div>
         <div className="text-xl text-[#2B2B2B] font-bold mt-1.5">
           <span className="text-primary mr-2.5">{sale}%</span>
           {price} ¥
         </div>
         {active ? (
           <div className="absolute flex right-1 bottom-0 gap-2">
-            <img src={heart} alt="heart" width="30" hegiht="30" />
-            {/* 물어보고 수정하기! <HeartIcon size="30" off={liked} /> */}
+            <HeartIcon size="30" off={liked} />
             <img src={cart} alt="cart" width="30" hegiht="30" />
           </div>
         ) : null}

diff --git a/src/components/Main/TodayBest/SwiperContainer.jsx b/src/components/Main/TodayBest/SwiperContainer.jsx
@@ -38,7 +38,7 @@ const SwiperContainer = ({ category }) => {
         className="w-full px-5 today"
       >
         {list.map((item) => (
-          <SwiperSlide key={item.id}>
+          <SwiperSlide key={item.productId}>
             {({ isActive }) => <Card product={item} active={isActive}></Card>}
           </SwiperSlide>
         ))}

diff --git a/src/components/My/MyPage/Guest.jsx b/src/components/My/MyPage/Guest.jsx
@@ -10,8 +10,8 @@ const Guest = () => {
       <span className="text-xs font-medium text-white bg-primary text-center px-1.5 py-[0.094rem] rounded rounded-br-none">
         5000p
       </span>
-      <ul className="text-center pt-2">
-        <li className="font-medium border border-primary rounded ">
+      <ul className="text-center pt-2 font-bold text-xs">
+        <li className="border border-primary rounded">
           <Link to="/signup" className="w-full block h-full py-3">
             회원가입
           </Link>
@@ -21,6 +21,11 @@ const Guest = () => {
             로그인
           </Link>
         </li>
+        <li className="border bg-black-400 rounded text-white mt-2.5">
+          <Link to="/order-check" className="w-full block h-full py-3">
+            비회원 주문 조회
+          </Link>
+        </li>
       </ul>
     </div>
   )

diff --git a/src/components/My/MyPage/Header.jsx b/src/components/My/MyPage/Header.jsx
@@ -11,10 +11,7 @@ const Header = () => {
       <div className="w-full h-16 max-w-[600px] px-5 flex items-center">
         <BackOn className="w-7" onClick={() => navigate(-1)} />
         <div className="w-full items-center"></div>
-        <div className="flex justify-center items-center gap-2">
-          <Link to="/">
-            <SetIcon className="w-6 " alt="" />
-          </Link>
+        <div className="flex justify-center">
           <CartIcon />
         </div>
       </div>

diff --git a/src/components/My/MyPage/MyNav.jsx b/src/components/My/MyPage/MyNav.jsx
@@ -2,29 +2,37 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 const MyNav = () => {
   return (
-    <div className="relative mt-14 px-5 pt-11 before:content-[attr(before)] before:w-full before:h-2.5 before:bg-white-200 before:absolute before:left-0 before:top-0">
-      <h2 className="text-sm font-medium text-black-200 mb-1.5">주문정보</h2>
+    <div className="relative font-medium mt-14 px-5 pt-11 before:content-[attr(before)] before:w-full before:h-2.5 before:bg-white-200 before:absolute before:left-0 before:top-0">
+      <h2 className="text-sm text-black-200 mb-1.5">주문정보</h2>
       <ul className="flex flex-wrap">
         <li className="text-sm w-1/2 py-1">
-          <Link to="order-list">주문/배송/픽업 조회</Link>
+          <Link to="order-list" className="font-medium">
+            주문/배송/픽업 조회
+          </Link>
           {/* Temporary link */}
         </li>
         <li className="text-sm w-1/2 py-1">
-          <Link to="refund-list">취소/교환/환불 내역</Link>
+          <Link to="refund-list" className="font-medium">
+            취소/교환/환불 내역
+          </Link>
         </li>
       </ul>
-      <h2 className="text-sm font-medium text-black-200 mt-9 mb-1.5">
-        고객센터
-      </h2>
+      <h2 className="text-sm text-black-200 mt-9 mb-1.5">고객센터</h2>
       <ul className="flex flex-wrap">
         <li className="text-sm w-1/2 py-1">
-          <Link to="/my/qna">1:1 문의</Link>
+          <Link to="/my/qna" className="font-medium">
+            1:1 문의
+          </Link>
         </li>
         <li className="text-sm w-1/2 py-1">
-          <Link to="/faq">FAQ</Link>
+          <Link to="/faq" className="font-medium">
+            FAQ
+          </Link>
         </li>
         <li className="text-sm w-1/2 py-1">
-          <Link to="/notice">공지사항</Link>
+          <Link to="/notice" className="font-medium">
+            공지사항
+          </Link>
         </li>
       </ul>
     </div>