diff --git a/src/components/priceArea/index.tsx b/src/components/priceArea/index.tsx index 2354f359..62e71752 100644 --- 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> | ((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) => { 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 ( - - 원가 대비 {discountPercentage.toFixed(0)}% 할인! ({numberFormat(savingsAmount)}원 절약) - - ); - } - } - }; + // const getSalesMessage = () => { + // if (originalPrice && purchasePrice && cancelFee) { + // const discountPercentage = ((originalPrice - price) / originalPrice) * 100; + // const savingsAmount = originalPrice - price; + + // if (price >= cancelFee && price < purchasePrice) { + // return ( + // + // 원가 대비 {discountPercentage.toFixed(0)}% 할인! ({numberFormat(savingsAmount)}원 절약) + // + // ); + // } + // } + // }; const handleCalculation = (amount: number, calc: string) => { let calculatedPrice; @@ -133,7 +128,7 @@ const PriceArea = ({ onChange={handlePriceChange} placeholder={placeholder} /> - {isAlert && getSalesMessage()} + {/* {isAlert && getSalesMessage()} */} {charge ? getCommandMessage() : getErrorMessage()} diff --git a/src/components/priceTable/index.tsx b/src/components/priceTable/index.tsx index de77b1a9..fb60cb72 100644 --- 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 = ( - {numberFormat(calculateFee(policyNumber, checkInDate, today, purchasePrice))} 원 - ); + const cancelFee = checkDayOfFee({ purchasePrice, policyNumber, checkInDate }); return ( <> @@ -97,16 +94,16 @@ const PriceTable = ({

-

{cancelFee}

+

+ + {numberFormat(calculateFee(policyNumber, checkInDate, purchasePrice))}원 + +

diff --git a/src/components/say/index.tsx b/src/components/say/index.tsx index 662e3cb0..07f2469e 100644 --- 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 ( - + {description} diff --git a/src/pages/charge/index.tsx b/src/pages/charge/index.tsx index f47e6063..49e92c75 100644 --- a/src/pages/charge/index.tsx +++ b/src/pages/charge/index.tsx @@ -100,12 +100,10 @@ const Charge = () => { {

계좌 연결을 시작해볼까요?

- navigate("/charge")}> + navigate("/charge?type=withdrawal")} + > 계좌 연결하기 diff --git a/src/pages/chat/components/chatRoomBanner/index.tsx b/src/pages/chat/components/chatRoomBanner/index.tsx index 47935f24..e5985c6b 100644 --- a/src/pages/chat/components/chatRoomBanner/index.tsx +++ b/src/pages/chat/components/chatRoomBanner/index.tsx @@ -197,12 +197,10 @@ const ChatRoomBanner = ({ { + setCalcFeeNumber(calcFeeNumber); + }, [calcFeeNumber, setCalcFeeNumber]); + return ( @@ -251,12 +260,7 @@ const DateOption = ({ {endDateInfo.feePercentage}%   - - {numberFormat( - calculateOriginDiscount(purchasePrice, endDateInfo.feePercentage) - )} - 원 - + {numberFormat(calcFeeNumber)}원 )} diff --git a/src/pages/sell/confirm.tsx b/src/pages/sell/confirm.tsx index 64b2186f..8f5bfb0f 100644 --- 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 ( <> @@ -69,20 +76,22 @@ const SellConfirm = () => {

판매가

- {getFivePercentage(confirmData.sellingPrice)}원 + {numberFormat(confirmData.sellingPrice)}원

결제 수수료 (구매자 부담)

-

{numberFormat((confirmData.sellingPrice * 5) / 100)} 원

+

{numberFormat(plusPrice)} 원

최종 판매가

- {numberFormat(confirmData.sellingPrice)} 원 + + {numberFormat(confirmData.sellingPrice + plusPrice)} 원 +

@@ -133,17 +142,7 @@ const SellConfirm = () => { 야놀자에서 취소 시 환불금

- - {numberFormat( - calculateFee( - confirmData.roomInfo.cancelPolicy, - confirmData.checkInDate, - today, - confirmData.purchasePrice - ) - )} - - 원 + {numberFormat(calcFeeNumber)}원

@@ -184,7 +183,6 @@ const SellConfirm = () => { */} - 판매자 한마디 diff --git a/src/pages/sell/constants/initialConfirmData.ts b/src/pages/sell/constants/initialConfirmData.ts index 7bd6576f..cae3a848 100644 --- 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 index 06ef602a..14cf9e4f 100644 --- a/src/pages/sell/correct.tsx +++ b/src/pages/sell/correct.tsx @@ -137,11 +137,9 @@ const SellCorrect = () => { { 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 index 09950b43..6dcf6c79 100644 --- a/src/pages/sell/index.tsx +++ b/src/pages/sell/index.tsx @@ -64,7 +64,7 @@ const Sell = () => { return ( <> - + 판매할 숙소의 예약 내역을 선택하세요 (필수)* diff --git a/src/pages/sell/register.tsx b/src/pages/sell/register.tsx index a1c20a08..c5f70b87 100644 --- a/src/pages/sell/register.tsx +++ b/src/pages/sell/register.tsx @@ -2,8 +2,8 @@ import * as S from "./styles/register"; import * as CS from "./styles/detail"; import { useEffect, useState } from "react"; -import { useParams, useSearchParams } from "react-router-dom"; -import { differenceInDays } from "date-fns"; +import { useNavigate, useParams, useSearchParams } from "react-router-dom"; +import { startOfDay } from "date-fns"; import UpperNavBar from "@components/navBar/upperNavBar"; import PriceArea from "@components/priceArea"; @@ -11,7 +11,6 @@ import PriceTable from "@components/priceTable"; import Notice from "@components/notice"; import Checkbox from "@components/input/Checkbox"; import BaseButton from "@components/buttons/BaseButton"; -import { feePolicy2 } from "@constants/feePolicys"; import NegoOption from "./components/NegoOption"; import AutoCancelOption from "./components/AutoCancelOption"; @@ -20,6 +19,7 @@ import getSellDetail from "./apis/getSellDetail"; import { formatDate } from "./utils/formatDate"; import initialDetailData from "./constants/initialDetailData"; import { useCallSellApi } from "./hooks/useSellApi"; +import { getFeePolicy } from "./utils/getPercentage"; interface EndDateInfo { endDate: string; @@ -33,6 +33,14 @@ const SellRegister = () => { const [check2, setCheck2] = useState(false); const [check3, setCheck3] = useState(false); + useEffect(() => { + if (check1 && check2 && check3) { + setAllCheck(true); + } else { + setAllCheck(false); + } + }, [check1, check2, check3]); + const [price, setPrice] = useState(0); const [isNego, setIsNego] = useState(false); const [isAutoCancel, setIsAutoCancel] = useState(false); @@ -41,6 +49,7 @@ const SellRegister = () => { const [searchParams] = useSearchParams(); const { id } = useParams(); + const navigate = useNavigate(); const [, setStartDate] = useState(null); const [endDate, setEndDate] = useState(); @@ -50,10 +59,14 @@ const SellRegister = () => { feePercentage: 0 }); + console.log("너의 정보", endDateInfo); + const [sellDetailData, setSellDetailData] = useState(initialDetailData); - const isFormValid = check1 && check2 && check3 && price > 0 && endDate; + const isFormValid = check1 && check2 && check3 && price > 0 && endDate && sellerComment !== ""; const callSellApi = useCallSellApi(); + const feePolicy = getFeePolicy(sellDetailData.cancelPolicy); + // 시작일과 종료일 쿼리스트링으로 등록 useEffect(() => { const startParam = searchParams.get("checkInDate"); @@ -63,14 +76,19 @@ const SellRegister = () => { setEndDate(String(endParam)); if (endParam) { - const currentDate = new Date(endParam); - const daysBefore = differenceInDays(new Date(sellDetailData.checkInDate), currentDate); + const currentDate = startOfDay(new Date(endParam)); + const checkInDate = startOfDay(new Date(sellDetailData.checkInDate)); + + const daysBeforeCheckIn = Math.floor( + (checkInDate.getTime() - currentDate.getTime()) / (1000 * 60 * 60 * 24) + ); + const feePercentage = - feePolicy2.find((policy) => policy.daysBefore === daysBefore)?.percentage || 0; + feePolicy.find((policy) => policy.daysBefore === daysBeforeCheckIn)?.percentage || 0; setEndDateInfo({ endDate: String(endParam), - daysBefore: daysBefore, + daysBefore: daysBeforeCheckIn, feePercentage: feePercentage }); } @@ -105,9 +123,14 @@ const SellRegister = () => { await callSellApi(requestData); }; + const goToList = () => { + console.log("왜 돌아가지가 않는거지?"); + navigate("/sell"); + }; + return ( <> - + 판매 정보를 입력하세요 @@ -132,11 +155,9 @@ const SellRegister = () => { { )} - 판매자 한마디 + + 판매자 한마디 * + setSellerComment(e.target.value)} diff --git a/src/pages/sell/stores/endDateStore.ts b/src/pages/sell/stores/endDateStore.ts new file mode 100644 index 00000000..f12d8046 --- /dev/null +++ b/src/pages/sell/stores/endDateStore.ts @@ -0,0 +1,8 @@ +import create from "zustand"; + +const useCalcFeeStore = create((set) => ({ + calcFeeNumber: 0, // 초기 상태 + setCalcFeeNumber: (value) => set({ calcFeeNumber: value }) // 상태 업데이트 함수 +})); + +export default useCalcFeeStore; diff --git a/src/pages/sell/styles/register.ts b/src/pages/sell/styles/register.ts index 481addbf..702e46aa 100644 --- a/src/pages/sell/styles/register.ts +++ b/src/pages/sell/styles/register.ts @@ -20,6 +20,9 @@ export const RegisterTitle = styled.p` ${({ theme }) => theme.text.subtitle3}; margin-bottom: 14px; + .red-text { + color: ${(props) => props.theme.colors.pink[200]}; + } `; export const RegisterGrayTitle = styled.p` diff --git a/src/pages/sell/utils/calcEndFee.ts b/src/pages/sell/utils/calcEndFee.ts index 8e8f7c87..4f1ea028 100644 --- a/src/pages/sell/utils/calcEndFee.ts +++ b/src/pages/sell/utils/calcEndFee.ts @@ -1,4 +1,5 @@ export default function calcEndFee(price: number, feePercentage: number) { + console.log("몇퍼", feePercentage); const discountedPrice = price - (price * feePercentage) / 100; return discountedPrice; } diff --git a/src/pages/sell/utils/getPercentage.ts b/src/pages/sell/utils/getPercentage.ts index 3362fb14..f446d76f 100644 --- a/src/pages/sell/utils/getPercentage.ts +++ b/src/pages/sell/utils/getPercentage.ts @@ -26,7 +26,7 @@ export const getPercentage = ( return matchedPolicy ? matchedPolicy.percentage : "취소 불가"; }; -const getFeePolicy = (policyNumber: string): FeePolicy[] | null => { +export const getFeePolicy = (policyNumber: string): FeePolicy[] | null => { switch (policyNumber) { case "YNBD_1": return feePolicy1; diff --git a/src/routes/router.tsx b/src/routes/router.tsx index c3507613..36921ae2 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -76,7 +76,6 @@ const router = createBrowserRouter([ element: ( <> - ), children: [ @@ -85,24 +84,41 @@ const router = createBrowserRouter([ element: ( <> + ) }, { path: "register/:id", - element: + element: ( + <> + + + ) }, { path: "correct/:id", - element: + element: ( + <> + + + ) }, { path: "detail/:id", - element: + element: ( + <> + + + ) }, { path: "confirm/:id", - element: + element: ( + <> + + + ) } ] }, diff --git a/src/utils/calcCancelFee.ts b/src/utils/calcCancelFee.ts index d05964df..0925ffbc 100644 --- a/src/utils/calcCancelFee.ts +++ b/src/utils/calcCancelFee.ts @@ -1,15 +1,17 @@ import { feePolicy1, feePolicy2 } from "@constants/feePolicys"; -import { differenceInDays } from "date-fns"; +import { startOfDay } from "date-fns"; -export default function calculateFee( - policy: string, - checkInDate: string, - today: Date, - purchasePrice: number -) { +export default function calculateFee(policy: string, checkInDate: string, purchasePrice: number) { const selectedPolicy = policy === "YNBD_1" ? feePolicy1 : feePolicy2; - const daysBeforeCheckIn = differenceInDays(new Date(checkInDate), today) + 1; + const today = startOfDay(new Date()); + const checkInDateObj = new Date(checkInDate); + const formattedCheckIn = startOfDay(checkInDateObj); + + const daysBeforeCheckIn = Math.floor( + (formattedCheckIn.getTime() - today.getTime()) / (1000 * 60 * 60 * 24) + ); + const applicablePolicy = selectedPolicy.find((p) => p.daysBefore === daysBeforeCheckIn) || { percentage: 0 }; @@ -17,5 +19,7 @@ export default function calculateFee( const feePercentage = applicablePolicy.percentage; const calculatedFee = (feePercentage / 100) * purchasePrice; + console.log("뭐가나와", calculatedFee); + return calculatedFee; } diff --git a/src/utils/checkDayOfFee.ts b/src/utils/checkDayOfFee.ts index bcc0d5f6..8829f92b 100644 --- a/src/utils/checkDayOfFee.ts +++ b/src/utils/checkDayOfFee.ts @@ -1,4 +1,4 @@ -import { format, isBefore } from "date-fns"; +import { format, isBefore, startOfDay } from "date-fns"; import { feePolicy1, feePolicy2 } from "@constants/feePolicys"; @@ -16,9 +16,10 @@ interface CheckDayProps { } export function checkDayOfFee({ purchasePrice, policyNumber, checkInDate }: CheckDayProps): string { - const today = new Date(); + const today = startOfDay(new Date()); const formattedToday = format(today, "yyyy.MM.dd"); - const formattedCheckIn = new Date(checkInDate); + const checkInDateObj = new Date(checkInDate); + const formattedCheckIn = startOfDay(checkInDateObj); if (isBefore(today, formattedCheckIn)) { const daysBeforeCheckIn = Math.floor( @@ -28,7 +29,8 @@ export function checkDayOfFee({ purchasePrice, policyNumber, checkInDate }: Chec const feePhrase: FeePhraseProps[] = policyNumber === "YNBD_1" ? feePolicy1 : feePolicy2; for (const phrase of feePhrase) { - if (daysBeforeCheckIn + 1 === phrase.daysBefore) { + if (daysBeforeCheckIn === phrase.daysBefore) { + console.log(phrase.percentage); return `${formattedToday} 기준 취소 수수료는 ${numberFormat((purchasePrice * phrase.percentage) / 100)}원 입니다`; }