매출 현황 페이지 닉네임 안뜨는 문제 해결 및 반응형 디자인 추가 (#48)

* feat : HOST, GUEST 역할 분리 * feat : HOST, GUEST 역할 분리 * feat : HOST, GUEST 기능 분리 * fix : 숙소 등록, 수정 안되는 문제 해결 * feat : 숙소 매출 현황 페이지에 숙소 상세 정보 표시 * design : 숙소 매출 현황 페이지에 숙소 상세 정보 디자인 변경1 * design : 숙소 매출 현황 페이지에 숙소 상세 정보 디자인 변경1 * feat : 숙소 예약 현황 불러오기1 * feat : 숙소 호스트 숙소 관리 페이지 초안 완성 * design : 신규회원 쿠폰 발급 UI 초안 완성 * feat : 첫 예약 쿠폰 발급 로직 초안 구현 * feat : 쿠폰 조회하는 로직 구현 * feat : 결제 시 쿠폰 사용 구현 초안 * merge : main merge * test : 결제, 포인트, 쿠폰 테스트 완료 * feat : 신규회원 10% 할인 최대 할인 금액 3만원으로 제한 * design : 호스트 매출 현황 페이지 grid 활용하여 화면 크기에 따라 반응형 디자인으로 변경 --------- Co-authored-by: kyumho kim <[email protected]>
BES-HOTSIX · Mar 25, 2024 · d096a41 · d096a41
1 parent 640a79a
commit d096a41
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/cashLog/Pay.js b/src/components/cashLog/Pay.js
@@ -55,12 +55,28 @@ export default function Pay({ fail, reserveId }) {
     const coupon = myCoupons.objData.find((c) => c.couponType === couponType)
     setSelectedCoupon(coupon)
 
-    const calculatedDiscountAmount = coupon
-      ? reservationData.paidPrice * coupon.discountRate
-      : 0
+    let calculatedDiscountAmount = 0
+
+    if (couponType === '신규회원') {
+      // '신규회원' 쿠폰 유형인 경우
+      const maxDiscount = 30000 // 최대 할인 금액 설정
+      calculatedDiscountAmount = Math.min(
+        reservationData.paidPrice * coupon.discountRate,
+        maxDiscount
+      )
+    } else {
+      // 다른 쿠폰 유형에 대한 처리
+    }
+
+    // 할인 금액이 총 가격을 초과하지 않도록 처리
+    calculatedDiscountAmount = Math.min(
+      calculatedDiscountAmount,
+      reservationData.paidPrice
+    )
+
     setDiscountAmount(calculatedDiscountAmount)
 
-    // 최신 payWithCash 값을 반영하기 위해 setPrice 내에서 현재 price를 기반으로 계산
+    // 최신 payWithCash 값을 반영하여 새로운 가격을 설정
     setPrice(
       (prevPrice) =>
         reservationData.paidPrice - calculatedDiscountAmount - payWithCash

diff --git a/src/components/coupon/CouponWidget.js b/src/components/coupon/CouponWidget.js
@@ -20,9 +20,13 @@ const CouponWidget = ({ coupons, onSelectCoupon, selectedCouponType }) => {
                 : coupon.couponType
             )
           }>
-          {`${coupon.couponType} - ${(coupon.discountRate * 100).toFixed(
-            0
-          )}% 할인`}
+          {coupon.couponType === '신규회원'
+            ? `${coupon.couponType} - ${(coupon.discountRate * 100).toFixed(
+                0
+              )}% 할인 (최대 3만원)`
+            : `${coupon.couponType} - ${(coupon.discountRate * 100).toFixed(
+                0
+              )}% 할인`}
         </div>
       ))}
     </div>

diff --git a/src/components/coupon/NewCustomerCoupon.js b/src/components/coupon/NewCustomerCoupon.js
@@ -23,9 +23,15 @@ export default function NewCustomerCoupon() {
           height={500}
           alt='new-customer-coupon'
         />
+        <div className='absolute w-full px-4'>
+          <p className='bg-white/80 backdrop-blur-md rounded-lg shadow-md p-4 text-gray-700 font-semibold'>
+            최대 3만원까지 할인 가능하며, 발급받은 날로부터 30일 내 사용해야
+            합니다.
+          </p>
+        </div>
         <button
           onClick={handleIssueFirstReservationCoupon}
-          className='absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-400 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded'>
+          className='mt-32 bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded'>
           발급받기
         </button>
       </div>

diff --git a/src/components/hotel/HotelSales.js b/src/components/hotel/HotelSales.js
@@ -30,6 +30,8 @@ export default function HotelSales({ id }) {
   // 오늘 날짜를 'YYYY-MM-DD' 형식의 문자열로 구합니다.
   const todayStr = new Date().toISOString().split('T')[0]
 
+  console.log(reservations)
+
   useEffect(() => {
     getReservationsByYearAndMonth(currentDate)
   }, [page]) // 페이지 또는 날짜가 변경될 때마다 실행됩니다.
@@ -66,7 +68,7 @@ export default function HotelSales({ id }) {
 
   return (
     <div className='mt-32 min-h-[60vh] text-center'>
-      <div className='grid grid-cols-5'>
+      <div className='grid grid-cols-1 sm:grid-cols-3 md:grid-cols-5 space-y-8'>
         <Card className='h-[40rem] col-span-1 py-4 bg-gray-100'>
           <CardHeader className='pb-0 pt-2 px-4 flex-col items-start'>
             <p className='text-tiny uppercase font-bold'>{hotel?.address}</p>

diff --git a/src/components/mypage/LeftBar.js b/src/components/mypage/LeftBar.js
@@ -1,71 +1,70 @@
-"use client";
+'use client'
 
-import { Avatar, Spacer } from "@nextui-org/react";
-import { FaArrowRight, FaUserCircle } from "react-icons/fa";
-import React from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useUser } from "@/hooks/useUser";
-import { useRouter } from "next/navigation";
-import { toast } from "react-toastify";
+import { Avatar, Spacer } from '@nextui-org/react'
+import { FaArrowRight, FaUserCircle } from 'react-icons/fa'
+import React from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useUser } from '@/hooks/useUser'
+import { useRouter } from 'next/navigation'
+import { toast } from 'react-toastify'
 
 export default function LeftBar(props) {
-  const { user } = useUser();
-  const router = useRouter();
+  const { user } = useUser()
+  const router = useRouter()
 
   if (user && user.objData.role === null) {
-    toast.info("호스트 혹은 게스트 선택 후 이용해주세요🏡🧳");
-    router.push("/auth/signup/role");
+    toast.info('호스트 혹은 게스트 선택 후 이용해주세요🏡🧳')
+    router.push('/auth/signup/role')
   } // 역할 설정 안했을 시, 역할 설정 페이지로 이동
 
-  const pathName = usePathname();
+  const pathName = usePathname()
 
   const items = [
-    { text: "예약 내역", link: "/mypage/reservations" },
-    { text: "내 정보", link: "/mypage/info" },
-    { text: "결제 내역", link: "/mypage/cashLog" },
-    { text: "내가 등록한 숙소", link: "/mypage/hotels" },
-    { text: "내가 찜한 숙소", link: "/mypage/like" },
-    { text: "나의 리뷰", link: "/mypage/reviews" },
-    { text: "1:1 문의 내역", link: "/mypage/chats" },
-    { text: "정산 내역", link: "/mypage/settle" },
-  ];
+    { text: '예약 내역', link: '/mypage/reservations' },
+    { text: '내 정보', link: '/mypage/info' },
+    { text: '결제 내역', link: '/mypage/cashLog' },
+    { text: '내가 등록한 숙소', link: '/mypage/hotels' },
+    { text: '내가 찜한 숙소', link: '/mypage/like' },
+    { text: '나의 리뷰', link: '/mypage/reviews' },
+    { text: '1:1 문의 내역', link: '/mypage/chats' },
+    { text: '정산 내역', link: '/mypage/settle' },
+  ]
 
   return (
-    <div className="flex flex-col items-center w-1/4 bg-[#CECECE]">
+    <div className='flex flex-col items-center w-1/4 bg-[#CECECE]'>
       <Spacer y={5} />
-      <div className={"text-2xl"}>마이페이지</div>
+      <div className={'text-2xl'}>마이페이지</div>
       <Spacer y={5} />
       {props.user?.objData.imageUrl ? (
-        <Avatar src={props.user.objData.imageUrl} className={"w-44 h-44"} />
+        <Avatar src={props.user.objData.imageUrl} className={'w-44 h-44'} />
       ) : (
         <FaUserCircle size={100} />
       )}
       <Spacer y={5} />
-      <div className={"text-2xl"}>{props.user?.objData.nickname}</div>
+      <div className={'text-2xl'}>{props.user?.objData.nickname}</div>
       <Spacer y={10} />
-      <ul className={"flex flex-col w-full"}>
+      <ul className={'flex flex-col w-full'}>
         {items
           .filter((item) =>
-            user?.objData.role === "HOST"
-              ? item.text === "내 정보" ||
-                item.text === "내가 등록한 숙소" ||
-                item.text === "1:1 문의 내역" ||
-                item.text === "정산 내역"
-              : item.text !== "내가 등록한 숙소" && item.text !== "정산 내역"
+            user?.objData.role === 'HOST'
+              ? item.text === '내 정보' ||
+                item.text === '내가 등록한 숙소' ||
+                item.text === '1:1 문의 내역' ||
+                item.text === '정산 내역'
+              : item.text !== '내가 등록한 숙소' && item.text !== '정산 내역'
           )
           .map((item, index) => (
             <Link href={item.link} key={`l-${index}`}>
               <li
                 className={`w-full h-15 p-5 flex items-center  ${
                   pathName === item.link
-                    ? "bg-white"
-                    : "hover:cursor-pointer bg-[#898989]"
-                }`}
-              >
+                    ? 'bg-white'
+                    : 'hover:cursor-pointer bg-[#898989]'
+                }`}>
                 {item.text}
-                {item.text === "캐시 사용 내역" && (
-                  <div className={"ml-auto"}>
+                {item.text === '캐시 사용 내역' && (
+                  <div className={'ml-auto'}>
                     <FaArrowRight />
                   </div>
                 )}
@@ -74,5 +73,5 @@ export default function LeftBar(props) {
           ))}
       </ul>
     </div>
-  );
+  )
 }