Merge pull request #186 from JpnShop/design-edit-#176

Design edit #176
JpnShop · Oct 12, 2022 · 9adc348 · 9adc348
2 parents b28785d + 0c579d0
commit 9adc348
Show file tree

Hide file tree

Showing 36 changed files with 488 additions and 283 deletions.
diff --git a/src/App.css b/src/App.css
@@ -8,3 +8,23 @@
   max-width: 600px;
   margin: 0 auto;
 }
+
+input:focus::-webkit-input-placeholder,
+textarea:focus::-webkit-input-placeholder {
+  color: transparent;
+}
+
+input:focus:-moz-placeholder,
+textarea:focus:-moz-placeholder {
+  color: transparent;
+}
+
+input:focus::-moz-placeholder,
+textarea:focus::-moz-placeholder {
+  color: transparent;
+}
+
+input:focus:-ms-input-placeholder,
+textarea:focus:-ms-input-placeholder {
+  color: transparent;
+}
diff --git a/src/components/Cart/CartBtn.jsx b/src/components/Cart/CartBtn.jsx
@@ -21,11 +21,14 @@ const CartBtn = ({ items }) => {
         </span>
         <div className="w-[1px] h-[18px] bg-white"></div>
         <span className="px-1">
-          {items?.reduce(
-            (acc, cur) =>
-              parseInt((cur.price * (100 - cur.sale)) / 100) * cur.count + acc,
-            0,
-          )}
+          {items
+            ?.reduce(
+              (acc, cur) =>
+                parseInt((cur.price * (100 - cur.sale)) / 100) * cur.count +
+                acc,
+              0,
+            )
+            .toLocaleString()}
           ¥ 결제하기
         </span>
       </div>

diff --git a/src/components/Cart/CartItem.jsx b/src/components/Cart/CartItem.jsx
@@ -16,10 +16,19 @@ const CartItem = ({ item, onCheckedHandler }) => {
     onCheckedHandler()
   }
 
-  const { id, thumbnail, brand, product, price, sale, stock, count } = item
+  const {
+    productId,
+    thumbnail,
+    brand,
+    productName,
+    price,
+    sale,
+    stock,
+    count,
+  } = item
   return (
     <>
-      <div className="flex text-[14px] mb-[12px]" key={id}>
+      <div className="flex text-[14px] mb-[12px]">
         <div
           className="relative flex-shrink w-[167px] h-[167px] bg-cover  overflow-hidden "
           style={{
@@ -34,16 +43,19 @@ const CartItem = ({ item, onCheckedHandler }) => {
         <div className="ml-[19px] grow-1 py-1">
           <div className="font-bold leading-[20px] ">{brand}</div>
           <div className="w-[169px] h-[36px] text-xs text-black-800 leading-[18px]">
-            {product}
+            {productName}
           </div>
           <div className="flex justify-between mt-1">
-            <CountBtn id={id} count={count} />
+            <CountBtn id={productId} count={count} />
             <div className="text-center">
               <div className=" text-xs text-black-600 line-through">
-                {price * count} ¥
+                {(price * count).toLocaleString()} ¥
               </div>
               <div className="text-[14px]">
-                {parseInt((price * (100 - sale)) / 100) * count} ¥
+                {(
+                  parseInt((price * (100 - sale)) / 100) * count
+                ).toLocaleString()}{' '}
+                ¥
               </div>
             </div>
           </div>

diff --git a/src/components/Cart/Total.jsx b/src/components/Cart/Total.jsx
@@ -15,23 +15,28 @@ const Total = ({ items }) => {
         <div className="flex justify-between mt-[15px]">
           <span className="text-black-400">할인금액</span>
           <span>
-            {items?.reduce(
-              (acc, cur) =>
-                parseInt((cur.price * cur.sale) / 100) * cur.count + acc,
-              0,
-            )}
+            {items
+              ?.reduce(
+                (acc, cur) =>
+                  parseInt((cur.price * cur.sale) / 100) * cur.count + acc,
+                0,
+              )
+              .toLocaleString()}
             ¥
           </span>
         </div>
       </div>
       <div className="mt-[20px] text-[20px] font-bold flex justify-between px-5">
         <span className="text-primary">결제금액</span>
         <span>
-          {items?.reduce(
-            (acc, cur) =>
-              parseInt((cur.price * (100 - cur.sale)) / 100) * cur.count + acc,
-            0,
-          )}
+          {items
+            ?.reduce(
+              (acc, cur) =>
+                parseInt((cur.price * (100 - cur.sale)) / 100) * cur.count +
+                acc,
+              0,
+            )
+            .toLocaleString()}
           ¥
         </span>
       </div>

diff --git a/src/components/Cart/index.jsx b/src/components/Cart/index.jsx
@@ -3,23 +3,26 @@ import Header from '../layout/Header'
 import CartItem from './CartItem'
 import Total from './Total'
 import CartBtn from './CartBtn'
-import { useGetCartItemsQuery } from '../../store/api/cartApiSlice'
+// import { useGetCartItemsQuery } from '../../store/api/cartApiSlice'
 import ErrorCom from '../common/ErrorCom'
 import Loading from '../layout/Loading'
+import { cartItems } from '../../dummy/cart'
 
 const Cart = () => {
-  const {
-    data: cartItems,
-    isLoading,
-    isError,
-    isSuccess,
-  } = useGetCartItemsQuery()
+  // const {
+  //   data: cartItems,
+  //   isLoading,
+  //   isError,
+  //   isSuccess,
+  // } = useGetCartItemsQuery()
 
-  const [checkedItems, setCheckedItems] = useState()
+  // const [checkedItems, setCheckedItems] = useState()
 
-  useEffect(() => {
-    setCheckedItems(cartItems)
-  }, [isSuccess])
+  // useEffect(() => {
+  //   setCheckedItems(cartItems)
+  // }, [isSuccess])
+
+  const [checkedItems, setCheckedItems] = useState(cartItems)
 
   const onCheckedHandler = (item) => {
     checkedItems.includes(item)
@@ -29,7 +32,7 @@ const Cart = () => {
 
   return (
     <>
-      {isLoading ? (
+      {/* {isLoading ? (
         <Loading />
       ) : isError ? (
         <ErrorCom />
@@ -44,10 +47,13 @@ const Cart = () => {
                 </div>
                 <div className="text-point text-xs">선택 삭제</div>
               </div>
-              {/* {!cartItems && <div>
-                <h2 className="text-[20px] font-bold ml-2 pl-6"></h2>
-                장바구니에 상품이 없습니다.
-                </div>} */}
+              {!cartItems && (
+                <div>
+                  <h2 className="text-[20px] font-bold ml-2 pl-6">
+                    장바구니에 상품이 없습니다.
+                  </h2>
+                </div>
+              )}
               {cartItems.map((item) => (
                 <CartItem
                   item={item}
@@ -59,7 +65,33 @@ const Cart = () => {
             <Total items={checkedItems} />
           </div>
         )
-      )}
+      )} */}
+      <div className="pb-[80px]">
+        <Header>장바구니</Header>
+        <div className="pt-[54px] ">
+          <div className="flex justify-between px-5 my-[14px]">
+            <div className="text-black-400 text-xs">
+              전체 {cartItems.length}개
+            </div>
+            <div className="text-point text-xs">선택 삭제</div>
+          </div>
+          {!cartItems && (
+            <div>
+              <h2 className="text-[20px] font-bold ml-2 pl-6">
+                장바구니에 상품이 없습니다.
+              </h2>
+            </div>
+          )}
+          {cartItems.map((item) => (
+            <CartItem
+              item={item}
+              key={item.productId}
+              onCheckedHandler={() => onCheckedHandler(item)}
+            />
+          ))}
+        </div>
+        <Total items={checkedItems} />
+      </div>
       <CartBtn items={checkedItems} />
     </>
   )

diff --git a/src/components/Magazine/index.jsx b/src/components/Magazine/index.jsx
@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Header from '../layout/Header'
 import Main from './Main'
+import GoTop from '../common/GoTop'
 
 const Magazine = () => {
   return (
@@ -9,6 +10,7 @@ const Magazine = () => {
       <div className="pt-[54px] pb-[66px]">
         <Main />
       </div>
+      <GoTop />
     </>
   )
 }

diff --git a/src/components/Main/TodayBest/Card.jsx b/src/components/Main/TodayBest/Card.jsx
@@ -26,10 +26,7 @@ const Card = ({ product, active }) => {
           active ? 'border-2 border-primary' : 'border-2 border-black-200',
         )}
       >
-        <img
-          src={thumbnail || (detailThumbList && detailThumbList[0])}
-          alt={productName}
-        />
+        <img src={thumbnail} alt={productName} />
       </div>
       <div className="mt-8 relative">
         <div className="text-sm text-black-800 font-medium mt-7.5">

diff --git a/src/components/Main/TodayRecommended/index.jsx b/src/components/Main/TodayRecommended/index.jsx
@@ -30,33 +30,37 @@ const TodayRecommended = ({ category }) => {
       <h3 className="font-bold text-xl mb-5 pl-5">
         <strong className="text-primary">오늘</strong>의 추천브랜드
       </h3>
-      <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>
+      {list.map(({ img1, desc, img2, img3, liked, brand }) => (
+        <div className="mt-[38px]">
+          <div
+            className="h-[226px] border-primary border-t-2 bg-cover"
+            style={{
+              backgroundImage: `url(${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">{desc}</p>
+            </div>
+            <div
+              className="border-b-2 border-primary bg-cover"
+              style={{
+                backgroundImage: `url(${img2})`,
+              }}
+            ></div>
+            <div
+              className="border-b-2 border-primary bg-cover"
+              style={{
+                backgroundImage: `url(${img3})`,
+              }}
+            ></div>
+            <div className="col-span-2 pl-5 pr-5 pt-2 pb-2 flex justify-between items-center">
+              <span className="text-sm font-bold">{brand}</span>
+              <HeartIcon size="20px" off={liked} fill={'#000'} />
+            </div>
+          </div>
         </div>
-        <div
-          className="border-b-2 border-primary bg-cover"
-          style={{
-            backgroundImage: `url(${list.img2})`,
-          }}
-        ></div>
-        <div
-          className="border-b-2 border-primary bg-cover"
-          style={{
-            backgroundImage: `url(${list.img3})`,
-          }}
-        ></div>
-        <div className="col-span-2 pl-5 pr-5 pt-2 pb-2 flex justify-between items-center">
-          <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/Order/Card.jsx b/src/components/Order/Card.jsx
@@ -21,10 +21,13 @@ const Card = ({ item }) => {
           </div>
           <div className="text-center">
             <div className=" text-xs text-black-600 line-through">
-              {price * count} ¥
+              {(price * count).toLocaleString()} ¥
             </div>
             <div className="text-[14px]">
-              {parseInt((price * (100 - sale)) / 100) * count} ¥
+              {(
+                parseInt((price * (100 - sale)) / 100) * count
+              ).toLocaleString()}{' '}
+              ¥
             </div>
           </div>
         </div>

diff --git a/src/components/Order/OrderBtn.jsx b/src/components/Order/OrderBtn.jsx
@@ -6,17 +6,20 @@ const OrderBtn = ({ items, paynowHandler }) => {
     <div className="hover:cursor-pointer fixed bottom-0 left-0 right-0 z-50 ">
       <div
         className={cls(
-          'h-[78px] gap-4 w-full flex  justify-center items-center text-white-200 bg-primary pb-4 text-[20px]',
+          'h-[80px] gap-4 w-full flex justify-center items-center text-white-200 bg-point pb-6 text-lg',
         )}
         onClick={paynowHandler}
       >
         <span className="px-1">
-          총 {items?.reduce((acc, cur) => cur.count + acc, 0)}개
+          총 {items?.reduce((acc, cur) => cur.count + acc, 0).toLocaleString()}
+          개
         </span>
         <div className="w-[1px] h-[18px] bg-white"></div>
         <span className="px-1">
-          {items?.reduce((acc, cur) => cur.price * cur.count + acc, 0)} ¥
-          결제하기
+          {items
+            ?.reduce((acc, cur) => cur.price * cur.count + acc, 0)
+            .toLocaleString()}{' '}
+          ¥ 결제하기
         </span>
       </div>
     </div>

diff --git a/src/components/Order/TotalPrice.jsx b/src/components/Order/TotalPrice.jsx
@@ -22,7 +22,10 @@ const TotalPrice = ({ items }) => {
         <div className="mt-[20px] text-[20px] font-bold flex justify-between">
           <span className="text-primary">결제금액</span>
           <span>
-            {items?.reduce((acc, cur) => cur.price * cur.count + acc, 0)}¥
+            {items
+              ?.reduce((acc, cur) => cur.price * cur.count + acc, 0)
+              .toLocaleString()}
+            ¥
           </span>
         </div>
       </div>

diff --git a/src/components/Order/index.jsx b/src/components/Order/index.jsx
@@ -15,7 +15,7 @@ const index = () => {
   const paynowHandler = () => {
     //api호출
     //성공시
-    navigate('/order/completed')
+    navigate('/order/completed', { state: state })
   }
 
   return (

diff --git a/src/components/Product/Completed/CompletedBtn.jsx b/src/components/Product/Completed/CompletedBtn.jsx
@@ -4,7 +4,7 @@ const CompletedBtn = () => {
   const navigate = useNavigate()
   return (
     <div className="hover:cursor-pointer fixed bottom-0 left-0 right-0 z-50 ">
-      <div className="h-[78px] gap-4 w-full flex  justify-center items-center text-white-200 bg-point pb-4 text-[20px]">
+      <div className="h-[80px] gap-4 w-full flex justify-center items-center text-white-200 bg-point pb-6 text-lg">
         <div onClick={() => navigate('/')}>홈으로</div>
         <div className="w-[1px] h-[18px] bg-white"></div>
         <div onClick={() => navigate('/my/order-list')}>주문 배송 조회</div>