Merge pull request Yanabada#183 from Yanabada/feature/Yanabada#169

Fix: 양도 QA 1차 수정
Gaoridang · Jan 26, 2024 · a608d9e · a608d9e
2 parents 50bc89f + a8fff52
commit a608d9e
Show file tree

Hide file tree

Showing 21 changed files with 149 additions and 99 deletions.
diff --git a/src/components/priceArea/index.tsx b/src/components/priceArea/index.tsx
@@ -8,11 +8,9 @@ import calculateFee from "@utils/calcCancelFee";
 interface PriceAreaProps {
   title: string;
   placeholder: string;
-  originalPrice?: number;
   purchasePrice: number;
   resetPrice: number;
   policyNumber: string;
-  isAlert: boolean;
   charge: boolean;
   price: number;
   setPrice: React.Dispatch<React.SetStateAction<number>> | ((price: number) => void);
@@ -22,11 +20,9 @@ interface PriceAreaProps {
 const PriceArea = ({
   title,
   placeholder,
-  originalPrice,
   purchasePrice,
   resetPrice,
   policyNumber,
-  isAlert,
   charge,
   price,
   setPrice,
@@ -47,9 +43,8 @@ const PriceArea = ({
 
   const amountData = charge ? plusAmountData : minusAmountData;
 
-  // TODO : 오늘기준 수수료계산
-  const today = new Date();
-  const cancelFee = calculateFee(policyNumber, checkInDate, today, purchasePrice);
+  // 체크인 날짜를 기준으로 오늘의 수수료
+  const cancelFee = calculateFee(policyNumber, checkInDate, purchasePrice);
 
   const handlePriceChange = (event: ChangeEvent<HTMLInputElement>) => {
     const numericValue = parseInt(event.target.value.replace(/[^\d]/g, ""), 10);
@@ -76,20 +71,20 @@ const PriceArea = ({
     return;
   };
 
-  const getSalesMessage = () => {
-    if (originalPrice && purchasePrice && cancelFee) {
-      const discountPercentage = ((originalPrice - price) / originalPrice) * 100;
-      const savingsAmount = originalPrice - price;
-
-      if (price >= cancelFee && price < purchasePrice) {
-        return (
-          <S.SalesMessage>
-            원가 대비 {discountPercentage.toFixed(0)}% 할인! ({numberFormat(savingsAmount)}원 절약)
-          </S.SalesMessage>
-        );
-      }
-    }
-  };
+  // const getSalesMessage = () => {
+  //   if (originalPrice && purchasePrice && cancelFee) {
+  //     const discountPercentage = ((originalPrice - price) / originalPrice) * 100;
+  //     const savingsAmount = originalPrice - price;
+
+  //     if (price >= cancelFee && price < purchasePrice) {
+  //       return (
+  //         <S.SalesMessage>
+  //           원가 대비 {discountPercentage.toFixed(0)}% 할인! ({numberFormat(savingsAmount)}원 절약)
+  //         </S.SalesMessage>
+  //       );
+  //     }
+  //   }
+  // };
 
   const handleCalculation = (amount: number, calc: string) => {
     let calculatedPrice;
@@ -133,7 +128,7 @@ const PriceArea = ({
             onChange={handlePriceChange}
             placeholder={placeholder}
           />
-          {isAlert && getSalesMessage()}
+          {/* {isAlert && getSalesMessage()} */}
         </S.MessageWrap>
         {charge ? getCommandMessage() : getErrorMessage()}
         <S.ButtonWrap>

diff --git a/src/components/priceTable/index.tsx b/src/components/priceTable/index.tsx
@@ -8,8 +8,8 @@ import { numberFormat } from "@utils/numberFormat";
 import BottomSheet from "@components/bottomSheet";
 import Notice from "@components/notice";
 import CancellationPolicyTable from "@components/priceModal";
-import { checkDayOfFee } from "@utils/checkDayOfFee";
 import calculateFee from "@utils/calcCancelFee";
+import { checkDayOfFee } from "@utils/checkDayOfFee";
 
 interface PriceTableProps {
   originalPrice: number;
@@ -41,11 +41,8 @@ const PriceTable = ({
     isVisible: bottomSheetVisible,
     setIsVisible: setBottomSheetVisible
   };
-  const today = new Date();
 
-  const cancelFee: React.ReactNode = (
-    <span>{numberFormat(calculateFee(policyNumber, checkInDate, today, purchasePrice))} 원</span>
-  );
+  const cancelFee = checkDayOfFee({ purchasePrice, policyNumber, checkInDate });
 
   return (
     <>
@@ -97,16 +94,16 @@ const PriceTable = ({
                   <AiFillQuestionCircle />
                 </button>
               </p>
-              <p className="price">{cancelFee}</p>
+              <p className="price">
+                <span>
+                  {numberFormat(calculateFee(policyNumber, checkInDate, purchasePrice))}원
+                </span>
+              </p>
               <BottomSheet {...bottomSheetProps}>
                 <S.PolicyInner>
                   <Notice
                     type="default"
-                    title={checkDayOfFee({
-                      purchasePrice,
-                      policyNumber: policyNumber,
-                      checkInDate: checkInDate
-                    })}
+                    title={cancelFee}
                     content="아래는 날짜별로 변화하는 취소 수수료이며 정책은 숙소별로 상이합니다."
                     shape="line"
                   />

diff --git a/src/components/say/index.tsx b/src/components/say/index.tsx
@@ -10,7 +10,7 @@ interface SayProps {
 const Say = ({ seller, description, ...props }: SayProps) => {
   return (
     <S.SayContainer>
-      <S.UserImage src={seller.imageUrl} />
+      <S.UserImage src={seller.image} />
       <S.SayInnerContainer {...props}>
         <S.SellerText>{description}</S.SellerText>
       </S.SayInnerContainer>

diff --git a/src/pages/charge/index.tsx b/src/pages/charge/index.tsx
@@ -100,12 +100,10 @@ const Charge = () => {
         <PriceArea
           title={`${typeText} 금액을 입력해 주세요`}
           placeholder="￦ 금액을 입력해주세요"
-          originalPrice={paymentData.originalPrice}
           purchasePrice={paymentData.purchasePrice}
           policyNumber={paymentData.policyNumber}
           checkInDate={paymentData.checkInDate}
           resetPrice={0}
-          isAlert={false}
           charge
           price={amount}
           setPrice={setAmount}

diff --git a/src/pages/charge/success.tsx b/src/pages/charge/success.tsx
@@ -28,7 +28,11 @@ const ChargeSuccess = () => {
           <p className="des">계좌 연결을 시작해볼까요?</p>
         </S.SuccessBox>
         <S.ButtonWrap>
-          <BaseButton buttonType="default" width="100%" onClick={() => navigate("/charge")}>
+          <BaseButton
+            buttonType="default"
+            width="100%"
+            onClick={() => navigate("/charge?type=withdrawal")}
+          >
             <ContactIcon />
             계좌 연결하기
           </BaseButton>

diff --git a/src/pages/chat/components/chatRoomBanner/index.tsx b/src/pages/chat/components/chatRoomBanner/index.tsx
@@ -197,12 +197,10 @@ const ChatRoomBanner = ({
           <PriceArea
             title="판매 가격"
             placeholder="￦ 판매 가격을 입력해주세요"
-            originalPrice={originalPrice}
             purchasePrice={purchasePrice}
             policyNumber={policyNumber}
             resetPrice={purchasePrice}
             checkInDate={checkInDate}
-            isAlert
             charge={false}
             price={price}
             setPrice={setPrice}

diff --git a/src/pages/productDetail/types/detailType.ts b/src/pages/productDetail/types/detailType.ts
@@ -20,7 +20,7 @@ export interface DetailType {
 export interface SellerType {
   id: number;
   nickname: string;
-  imageUrl: string;
+  image: string;
 }
 
 export interface AccommodationInfoType {

diff --git a/src/pages/sell/components/DateOption.tsx b/src/pages/sell/components/DateOption.tsx
@@ -21,6 +21,8 @@ import { getDayOfWeek } from "@utils/getDayOfWeek";
 import { feePolicy1, feePolicy2, feePolicy3 } from "@constants/feePolicys";
 
 import calculateOriginDiscount from "../utils/calcEndFee";
+import useCalcFeeStore from "../stores/endDateStore";
+import { useEffect } from "react";
 
 interface DateOptionProps {
   bottomSheetVisible: boolean;
@@ -156,10 +158,17 @@ const DateOption = ({
 
   // 구매가 대비 판매가격의 수수료% 계산
   function calculateDiscount(purchasePrice: number, price: number) {
-    const discountPercentage = ((purchasePrice - price) / purchasePrice) * 100;
+    const discountPercentage = 100 - ((purchasePrice - price) / purchasePrice) * 100;
     return Math.floor(discountPercentage);
   }
 
+  const { setCalcFeeNumber }: any = useCalcFeeStore();
+  const calcFeeNumber = calculateOriginDiscount(purchasePrice, endDateInfo.feePercentage);
+
+  useEffect(() => {
+    setCalcFeeNumber(calcFeeNumber);
+  }, [calcFeeNumber, setCalcFeeNumber]);
+
   return (
     <CS.RegisterInner>
       <CS.RegisterSubTitle>
@@ -251,12 +260,7 @@ const DateOption = ({
                             {endDateInfo.feePercentage}%
                           </span>
                           &nbsp;
-                          <span className="price">
-                            {numberFormat(
-                              calculateOriginDiscount(purchasePrice, endDateInfo.feePercentage)
-                            )}
-                            원
-                          </span>
+                          <span className="price">{numberFormat(calcFeeNumber)}원</span>
                         </>
                       )}
                     </>

diff --git a/src/pages/sell/confirm.tsx b/src/pages/sell/confirm.tsx
@@ -9,21 +9,22 @@ import UpperNavBar from "@components/navBar/upperNavBar";
 import DateChangeButton from "@components/buttons/DateChangeButton";
 import { numberFormat } from "@utils/numberFormat";
 import { getDayOfWeek } from "@utils/getDayOfWeek";
-import calculateFee from "@utils/calcCancelFee";
+// import calculateFee from "@utils/calcCancelFee";
 import SellerSay from "@pages/productDetail/components/SellerSay";
 import YanoljaIcon from "@assets/icons/yanolja_Icon.svg?react";
 
 import initialConfirmData from "./constants/initialConfirmData";
 import InfoBox from "./components/InfoBox";
 import getSellResult from "./apis/getSellResult";
-import { getFivePercentage } from "./utils/getFivePercentage";
 import BaseButton from "@components/buttons/BaseButton";
+import useCalcFeeStore from "./stores/endDateStore";
 
 const SellConfirm = () => {
   const [confirmData, setConfirmData] = useState(initialConfirmData);
   const { id } = useParams();
   const navigate = useNavigate();
-  const today = new Date();
+
+  const { calcFeeNumber }: any = useCalcFeeStore();
 
   useEffect(() => {
     const fetchData = async () => {
@@ -40,6 +41,12 @@ const SellConfirm = () => {
     fetchData();
   }, []);
 
+  const plusPrice = (confirmData.sellingPrice * 5) / 100;
+
+  console.log("1", confirmData.roomInfo.cancelPolicy);
+  console.log("2", confirmData.checkInDate);
+  console.log("3", confirmData.purchasePrice);
+
   return (
     <>
       <UpperNavBar title="상품 등록 완료" type="back" />
@@ -69,20 +76,22 @@ const SellConfirm = () => {
             <div className="inner">
               <p className="name">판매가</p>
               <p className="value">
-                <span className="text-black">{getFivePercentage(confirmData.sellingPrice)}원</span>
+                <span className="text-black">{numberFormat(confirmData.sellingPrice)}원</span>
               </p>
             </div>
             <div className="inner">
               <p className="name">
                 결제 수수료 <span>(구매자 부담)</span>
               </p>
-              <p className="value">{numberFormat((confirmData.sellingPrice * 5) / 100)} 원</p>
+              <p className="value">{numberFormat(plusPrice)} 원</p>
             </div>
             <div className="stripe"></div>
             <div className="inner">
               <p className="name">최종 판매가</p>
               <p className="value">
-                <span className="text-blue">{numberFormat(confirmData.sellingPrice)} 원</span>
+                <span className="text-blue">
+                  {numberFormat(confirmData.sellingPrice + plusPrice)} 원
+                </span>
               </p>
             </div>
           </S.ConfirmBox>
@@ -133,17 +142,7 @@ const SellConfirm = () => {
               야놀자에서 취소 시 환불금
             </p>
             <p className="price">
-              <span>
-                {numberFormat(
-                  calculateFee(
-                    confirmData.roomInfo.cancelPolicy,
-                    confirmData.checkInDate,
-                    today,
-                    confirmData.purchasePrice
-                  )
-                )}
-              </span>
-              원
+              <span>{numberFormat(calcFeeNumber)}</span>원
             </p>
           </CS.RefundText>
         </CS.RegisterInner>
@@ -184,7 +183,6 @@ const SellConfirm = () => {
         </CS.RegisterInner>
          */}
         <CS.RegisterInner className="gray-bg">
-          <CS.RegisterTitle>판매자 한마디</CS.RegisterTitle>
           <SellerSay seller={confirmData.seller} description={confirmData.description} />
         </CS.RegisterInner>
         <CS.ConfirmWrap>

diff --git a/src/pages/sell/constants/initialConfirmData.ts b/src/pages/sell/constants/initialConfirmData.ts
@@ -3,7 +3,7 @@ const initialConfirmData = {
   seller: {
     id: 0,
     nickname: "",
-    imageUrl: ""
+    image: ""
   },
   description: "",
   canNegotiate: false,

diff --git a/src/pages/sell/correct.tsx b/src/pages/sell/correct.tsx
@@ -137,11 +137,9 @@ const SellCorrect = () => {
           <PriceArea
             title="판매가격"
             placeholder="￦ 판매 가격을 입력해주세요"
-            originalPrice={sellDetailData.price}
             purchasePrice={sellDetailData.purchasePrice}
             policyNumber={sellDetailData.roomInfo.cancelPolicy}
             resetPrice={sellDetailData.purchasePrice}
-            isAlert
             charge={false}
             price={price}
             setPrice={setPrice}

diff --git a/src/pages/sell/hooks/useSellApi.ts b/src/pages/sell/hooks/useSellApi.ts
@@ -33,6 +33,7 @@ export const useCallSellApi = () => {
 
       const responseData = response.data.data;
       navigate(`/sell/confirm/${responseData.productId}`);
+      window.scrollTo(0, 0);
 
       return responseData;
     } catch (error) {

diff --git a/src/pages/sell/index.tsx b/src/pages/sell/index.tsx
@@ -64,7 +64,7 @@ const Sell = () => {
 
   return (
     <>
-      <UpperNavBar title="양도하기" type="back" customBack={goToHome} />
+      <UpperNavBar title="양도하기" type="back" customBack={goToHome} isCustom={true} />
       <S.ProductListWrap>
         <S.NoticeTitle>
           판매할 숙소의 예약 내역을 선택하세요 <span>(필수)*</span>