Merge pull request #181 from JpnShop/globalDesign-#176

Global design #176
JpnShop · Oct 12, 2022 · aaaec93 · aaaec93
2 parents fe03107 + 80f300b
commit aaaec93
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 62 deletions.
diff --git a/public/assets/bag-black.svg b/public/assets/bag-black.svg
diff --git a/public/assets/bag-on.svg b/public/assets/bag-on.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -47,7 +47,7 @@ import UserEditInfo from './pages/My/UserEditInfo'
 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 NotFoundPage from './pages/NotFoundPage'
 import OrderCheck from './pages/OrderCheck'
 
 function App() {

diff --git a/src/components/Main/TabList.jsx b/src/components/Main/TabList.jsx
@@ -9,23 +9,28 @@ const TabList = ({ tablist, setCategory }) => {
       <Swiper
         // install Swiper modules
         className="tablist pl-5 mt-4 pb-20 overflow-y-visible"
-        spaceBetween={60}
+        spaceBetween={30}
         loop={true}
         slidesPerView={'auto'}
         slideToClickedSlide={true}
       >
-        {tablist.map((item, idx) => (
-          <SwiperSlide
-            className={
-              'tab leading-normal border border-primary rounded-2xl text-center text-xs text-primary whitespace-nowrap'
-            }
-            key={idx}
-          >
-            {({ isActive }) => (
-              <Tab item={item} isActive={isActive} setCategory={setCategory} />
-            )}
-          </SwiperSlide>
-        ))}
+        {tablist &&
+          tablist.map((item, idx) => (
+            <SwiperSlide
+              className={
+                'tab leading-normal border border-primary rounded-2xl text-center text-xs text-primary whitespace-nowrap'
+              }
+              key={idx}
+            >
+              {({ isActive }) => (
+                <Tab
+                  item={item}
+                  isActive={isActive}
+                  setCategory={setCategory}
+                />
+              )}
+            </SwiperSlide>
+          ))}
       </Swiper>
       <div className="w-full h-2.5 bg-white-200 absolute bottom-0"></div>
     </div>

diff --git a/src/components/Main/TodayBest/Card.jsx b/src/components/Main/TodayBest/Card.jsx
@@ -1,34 +1,48 @@
 import React from 'react'
-import heart from '/public/assets/heart-on.svg'
 import HeartIcon from '../../common/HeartIcon'
-import cart from '/public/assets/bag-on.svg'
+import cart from '/public/assets/bag-black.svg'
 import { useNavigate } from 'react-router-dom'
+import { cls } from '../../../utils'
 
 const Card = ({ product, active }) => {
-  const { detailThumbList, productName, sale, price, liked, productId } =
-    product
+  const {
+    detailThumbList,
+    thumbnail,
+    productName,
+    sale,
+    price,
+    liked,
+    productId,
+  } = product
   const navigate = useNavigate()
   return (
     <div
       className="w-[230px] h-80 mb-24"
       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' }}
+        className={cls(
+          'w-[230px] h-[230px] bg-cover bg-center rounded-full overflow-hidden',
+          active ? 'border-2 border-primary' : 'border-2 border-black-200',
+        )}
       >
-        <img src={detailThumbList[0]} alt={productName} />
+        <img
+          src={thumbnail || (detailThumbList && detailThumbList[0])}
+          alt={productName}
+        />
       </div>
       <div className="mt-8 relative">
-        <div className="text-sm text-[#4B4B4B] mt-7.5">[{productName}]</div>
-        <div className="text-xl text-[#2B2B2B] font-bold mt-1.5">
+        <div className="text-sm text-black-800 font-medium mt-7.5">
+          [{productName}]
+        </div>
+        <div className="text-xl text-black-100 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">
-            <HeartIcon size="30" off={liked} />
-            <img src={cart} alt="cart" width="30" hegiht="30" />
+          <div className="absolute flex right-1 bottom-0 gap-3">
+            <HeartIcon size="25" off={liked} fill={'#000'} />
+            <img src={cart} alt="cart" width="25" hegiht="25" />
           </div>
         ) : null}
       </div>

diff --git a/src/components/Main/TodayLank/Card.jsx b/src/components/Main/TodayLank/Card.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import heartOn from '/public/assets/heart-on.svg'
+import HeartIcon from '../../common/HeartIcon'
 import heartOff from '/public/assets/heart.svg'
 
 export const Card = ({ data }) => {
@@ -11,13 +11,9 @@ export const Card = ({ data }) => {
           <img src={profile} alt={userId} className="absolute" />
         </div>
       </div>
-      <div className="flex justify-between px-5 py-3.5 border-y-2 border-primary text-primary text-sm">
+      <div className="flex justify-between items-center px-5 py-3.5 border-y-2 border-primary text-black-600 text-sm">
         <div className="truncate">@ {userId}</div>
-        {liked ? (
-          <img src={heartOn} alt="heart on" width="24px" height="24px" />
-        ) : (
-          <img src={heartOff} alt="heart off" width="24px" height="24px" />
-        )}
+        <HeartIcon size="30" off={liked} fill={'#000'} />
       </div>
     </div>
   )

diff --git a/src/components/Main/TodayRecommended/index.jsx b/src/components/Main/TodayRecommended/index.jsx
@@ -30,14 +30,14 @@ const TodayRecommended = ({ category }) => {
       <h3 className="font-bold text-xl mb-5 pl-5">
         <strong className="text-primary">오늘</strong>의 추천브랜드
       </h3>
-      <div className="grid grid-cols-2 grid-rows-3 border-t-2 border-b-2 border-primary">
-        <div
-          className="col-span-2 border-b-2 border-primary h-[226px] bg-cover"
-          style={{
-            backgroundImage: `url(${list.img1})`,
-          }}
-        ></div>
-        <div className="row-span-2 border-b-2 border-primary border-r-2 text-color-800 text-xl">
+      <div
+        className="h-[226px] border-primary border-t-2 bg-cover"
+        style={{
+          backgroundImage: `url(${list.img1})`,
+        }}
+      ></div>
+      <div className="grid grid-cols-2 grid-rows-2 border-y-2 border-b-2 border-primary">
+        <div className="row-span-2 border-primary border-b-2 border-r-2 text-color-800 text-xl">
           <p className="text-[12px] p-4">{list.desc}</p>
         </div>
         <div
@@ -53,8 +53,8 @@ const TodayRecommended = ({ category }) => {
           }}
         ></div>
         <div className="col-span-2 pl-5 pr-5 pt-2 pb-2 flex justify-between items-center">
-          <span className="text-sm text-primary font-bold">{list.brand}</span>
-          <HeartIcon size="20px" off={list.liked} />
+          <span className="text-sm font-bold">{list.brand}</span>
+          <HeartIcon size="20px" off={list.liked} fill={'#000'} />
         </div>
       </div>
     </div>

diff --git a/src/components/SignIn/GoogleBtn.jsx b/src/components/SignIn/GoogleBtn.jsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from 'react'
 import GoogleLogin from 'react-google-login'
 import { gapi } from 'gapi-script'
+import '~/index.css'
 
 const clientId =
   '560053142694-jjm6hrkbsomh91oupj4arim0vri4tt1d.apps.googleusercontent.com'
@@ -23,14 +24,9 @@ const GoogleBtn = ({ onSocial }) => {
     console.log(response)
   }
   return (
-    <div>
-      {/* <Button classprop="justify-between border border-black-100 mt-6 gap-2">
-          <GooGleIcon className="ml-3" />
-          <span>Googleでログイン</span>
-          <GooGleIcon className="mr-3 opacity-0" />
-        </Button> */}
+    <div className="mt-3">
       <GoogleLogin
-        className="w-full mt-6 border border-black-100 text-center"
+        className="w-full mt-6 googleBtn"
         clientId={clientId}
         buttonText="Googleでログイン"
         onSuccess={onSuccess}

diff --git a/src/components/SignIn/index.jsx b/src/components/SignIn/index.jsx
@@ -43,7 +43,7 @@ const SignIn = () => {
 
   return (
     <>
-      <div className="pr-5 pl-5">
+      <div className="px-5 pb-10">
         <h2 className="text-[30px] font-bold">내 손안의 매거진</h2>
         <h3 className="text-black-800">오늘의 상점에서 만나보세요</h3>
         <Input
@@ -69,25 +69,20 @@ const SignIn = () => {
         </Button>
         <div className="flex justify-end mt-5 font-medium">
           <span
-            className="text-xs text-black-400 cursor-pointer  pr-[12px] pl-[12px] border-r "
+            className="text-xs text-black-400 cursor-pointer pr-3 pl-3 border-r "
             onClick={() => navigate('findIdPw', { state: '아이디 찾기' })}
           >
             아이디 찾기
           </span>
           <span
-            className="text-xs text-black-400 cursor-pointer pl-[12px]"
+            className="text-xs text-black-400 cursor-pointer pl-3"
             onClick={() => navigate('findIDPw', { state: '비밀번호 찾기' })}
           >
             비밀번호 찾기
           </span>
         </div>
-        {/* <Button classprop="justify-between border border-black-100 border-box mt-6 gap-2">
-          <GooGleIcon className="ml-3" />
-          <span>Googleでログイン</span>
-          <GooGleIcon className="mr-3 opacity-0" />
-        </Button> */}
         <GoogleBtn />
-        <Button classprop="justify-between text-white mt-6 gap-2 bg-black-400">
+        <Button classprop="justify-between text-white mt-5 gap-2 bg-black-400">
           <Link to="/order-check" className="w-full block h-full py-3">
             비회원 주문 조회
           </Link>

diff --git a/src/index.css b/src/index.css
@@ -122,3 +122,21 @@ select {
 .rating-component .bh-stars .right-half.active {
   fill: var(--primary);
 }
+
+.googleBtn {
+  border: 1px solid var(--black-100) !important;
+  border-radius: 4px !important;
+  box-shadow: none !important;
+  justify-content: center !important;
+  font-size: 14px !important;
+  position: relative;
+}
+.googleBtn span {
+  font-weight: 700 !important;
+  display: block !important;
+}
+.googleBtn svg {
+  position: absolute;
+  left: 16px;
+  top: 12px;
+}
diff --git a/src/pages/OrderCheck.jsx b/src/pages/OrderCheck.jsx
@@ -18,6 +18,7 @@ function OrderCheck() {
           </div>
           <input
             value={orderNum}
+            onChange={(e) => setOrderNum(e.target.value)}
             type="text"
             className="pl-3 h-12 box-border w-full py-3 rounded border border-neutral-300 shadow-white my-5"
           />