From 7e02138a08d067a19f0554c96db8ad5f0db980d7 Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Tue, 26 Dec 2023 15:06:13 +0900 Subject: [PATCH 01/23] =?UTF-8?q?Feat:=20Discount=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=EA=B3=BC=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/discount/Discount.tsx | 0 src/pages/discount/discount.scss | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/pages/discount/Discount.tsx create mode 100644 src/pages/discount/discount.scss diff --git a/src/pages/discount/Discount.tsx b/src/pages/discount/Discount.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/discount/discount.scss b/src/pages/discount/discount.scss new file mode 100644 index 00000000..e69de29b From b17388b7a1df33037151399a8e743ebb22b92e72 Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Tue, 26 Dec 2023 15:43:44 +0900 Subject: [PATCH 02/23] =?UTF-8?q?Feat:=20Discount=20Item=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../discount/discountItem/DiscountItem.tsx | 0 .../discount/discountItem/discountItem.scss | 18 ++++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 src/pages/discount/discountItem/DiscountItem.tsx create mode 100644 src/pages/discount/discountItem/discountItem.scss diff --git a/src/pages/discount/discountItem/DiscountItem.tsx b/src/pages/discount/discountItem/DiscountItem.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/discount/discountItem/discountItem.scss b/src/pages/discount/discountItem/discountItem.scss new file mode 100644 index 00000000..b63c7cb2 --- /dev/null +++ b/src/pages/discount/discountItem/discountItem.scss @@ -0,0 +1,18 @@ +@import "../../../styles/common.scss"; + +.discount-item { + width: calc(50% - rem(4)); + padding: rem(16) 0; + text-align: center; + border: 2px solid coral(100); + border-radius: rem(8); + cursor: pointer; + transition: all 0.1s; + &.full { + width: 100%; + } + &__selected { + border: 2px solid coral(500); + background-color: coral(100); + } +} From f3144ebbe49718d675a04b822d1577349aa520a8 Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Tue, 26 Dec 2023 17:11:35 +0900 Subject: [PATCH 03/23] =?UTF-8?q?Feat:=20DiscountItem=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20props=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/discount/Discount.tsx | 32 ++++++++++++++++ .../discount/discountItem/DiscountItem.tsx | 37 +++++++++++++++++++ 2 files changed, 69 insertions(+) diff --git a/src/pages/discount/Discount.tsx b/src/pages/discount/Discount.tsx index e69de29b..f6823e69 100644 --- a/src/pages/discount/Discount.tsx +++ b/src/pages/discount/Discount.tsx @@ -0,0 +1,32 @@ +import { SetStateAction, memo } from "react"; + +import PaymentMethodItem from "@/pages/order/paymentMethodItem/PaymentMethodItem"; +import { initialPaymentMethod } from "@/constant/initialPaymentMethod"; + +import "./paymentMethod.scss"; + +const Discount = memo( + ({ selectedCoupon, setSelectedCoupon }: DiscountProps) => { + return ( +
+

할인

+ {initialPaymentMethod.map((option, index) => ( + + ))} +
+ ); + } +); + +export default Discount; + +interface DiscountProps { + selectedCoupon: string; //차후에 수정하기 + setSelectedCoupon: React.Dispatch>; +} diff --git a/src/pages/discount/discountItem/DiscountItem.tsx b/src/pages/discount/discountItem/DiscountItem.tsx index e69de29b..285133cc 100644 --- a/src/pages/discount/discountItem/DiscountItem.tsx +++ b/src/pages/discount/discountItem/DiscountItem.tsx @@ -0,0 +1,37 @@ +import { memo } from "react"; +import "./paymentMethodItem.scss"; + +const PaymentMethodItem = memo( + ({ + className, + methodName, + selectedMethod, + setSelectedMethod, + }: PaymentMethodItemProps) => { + const handleSelected = () => { + setSelectedMethod(methodName); + }; + + return ( + + ); + } +); + +export default PaymentMethodItem; + +interface PaymentMethodItemProps { + className: string; + methodName: string; + selectedMethod: string; + setSelectedMethod: (methodName: string) => void; +} From 530492012231866116f92c22d9162d52ff6d248b Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Tue, 26 Dec 2023 18:59:29 +0900 Subject: [PATCH 04/23] =?UTF-8?q?Feat:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EC=9E=91=EC=97=85=20=EC=A7=84=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constant/discount.ts | 7 +++++++ src/pages/discount/Discount.tsx | 6 ++++-- src/pages/discount/discount.scss | 11 +++++++++++ src/pages/discount/discountItem/DiscountItem.tsx | 10 +++++----- 4 files changed, 27 insertions(+), 7 deletions(-) create mode 100644 src/constant/discount.ts diff --git a/src/constant/discount.ts b/src/constant/discount.ts new file mode 100644 index 00000000..58a7197c --- /dev/null +++ b/src/constant/discount.ts @@ -0,0 +1,7 @@ +export const discount = [ + "카드 결제", + "카카오페이", + "네이버페이", + "휴대폰 결제", + "토스페이", +]; diff --git a/src/pages/discount/Discount.tsx b/src/pages/discount/Discount.tsx index f6823e69..4b59d9bf 100644 --- a/src/pages/discount/Discount.tsx +++ b/src/pages/discount/Discount.tsx @@ -1,17 +1,19 @@ import { SetStateAction, memo } from "react"; -import PaymentMethodItem from "@/pages/order/paymentMethodItem/PaymentMethodItem"; +import DiscountItem from "@/pages/order/paymentMethodItem/PaymentMethodItem"; import { initialPaymentMethod } from "@/constant/initialPaymentMethod"; import "./paymentMethod.scss"; +var myList = ["1번", "2번", "3번"]; //예시; 스타일링 확인 후 삭제 예정 + const Discount = memo( ({ selectedCoupon, setSelectedCoupon }: DiscountProps) => { return (

할인

{initialPaymentMethod.map((option, index) => ( - { + }: DiscountItemProps) => { const handleSelected = () => { setSelectedMethod(methodName); }; @@ -27,9 +27,9 @@ const PaymentMethodItem = memo( } ); -export default PaymentMethodItem; +export default DiscountItem; -interface PaymentMethodItemProps { +interface DiscountItemProps { className: string; methodName: string; selectedMethod: string; From 77954b437a5e77d2755fda7f8237ee7e76898659 Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Wed, 27 Dec 2023 13:19:33 +0900 Subject: [PATCH 05/23] =?UTF-8?q?Chore:=20Discount=20constant=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=20=EA=B5=AC=EC=A1=B0=20=EC=9E=AC=EC=84=A4=EA=B3=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constant/discount.ts | 7 +- src/pages/discount/Discount.tsx | 75 ++++++++++++++----- .../discount/discountItem/DiscountItem.tsx | 41 ++++++---- 3 files changed, 83 insertions(+), 40 deletions(-) diff --git a/src/constant/discount.ts b/src/constant/discount.ts index 58a7197c..560ea2f5 100644 --- a/src/constant/discount.ts +++ b/src/constant/discount.ts @@ -1,7 +1,4 @@ export const discount = [ - "카드 결제", - "카카오페이", - "네이버페이", - "휴대폰 결제", - "토스페이", + { label: "10% 할인쿠폰 (5,000원 할인)", value: "10_percent" }, + { label: "20,000원 할인쿠폰", value: "20k_coupon" }, ]; diff --git a/src/pages/discount/Discount.tsx b/src/pages/discount/Discount.tsx index 4b59d9bf..ef36287a 100644 --- a/src/pages/discount/Discount.tsx +++ b/src/pages/discount/Discount.tsx @@ -1,34 +1,69 @@ -import { SetStateAction, memo } from "react"; +import { SetStateAction, memo, useState } from "react"; -import DiscountItem from "@/pages/order/paymentMethodItem/PaymentMethodItem"; -import { initialPaymentMethod } from "@/constant/initialPaymentMethod"; +//import DiscountItem from "@/pages/discount/discountItem/DiscountItem"; +import { discount } from "@/constant/discount"; -import "./paymentMethod.scss"; +import "./discount.scss"; -var myList = ["1번", "2번", "3번"]; //예시; 스타일링 확인 후 삭제 예정 +type OptionType = { + label: string; + value: string; +}; -const Discount = memo( - ({ selectedCoupon, setSelectedCoupon }: DiscountProps) => { - return ( -
-

할인

- {initialPaymentMethod.map((option, index) => ( +type CustomDropdownProps = { + options: OptionType[]; +}; + +const Discount = memo(() => { + const [isOpen, setIsOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState(null); + + const toggleDropdown = () => setIsOpen(!isOpen); + + const selectOption = (option: OptionType) => { + setSelectedOption(option); + setIsOpen(false); + }; + + return ( +
+

할인

+
+
+ {selectedOption ? selectedOption.label : "Select an option"} + +
+ {isOpen && ( +
    + {discount.map((option, index) => ( +
  • selectOption(option)} + > + {option.label} +
    • + ))} +
+ )} +
+ + {/* {discount.map((option, index) => ( - ))} -
- ); - } -); + ))} */} +
+ ); +}); export default Discount; interface DiscountProps { - selectedCoupon: string; //차후에 수정하기 - setSelectedCoupon: React.Dispatch>; + selectedDiscount: string; //차후에 수정하기 + setSelectedDiscount: React.Dispatch>; } diff --git a/src/pages/discount/discountItem/DiscountItem.tsx b/src/pages/discount/discountItem/DiscountItem.tsx index bea27cfa..62044bbb 100644 --- a/src/pages/discount/discountItem/DiscountItem.tsx +++ b/src/pages/discount/discountItem/DiscountItem.tsx @@ -1,28 +1,39 @@ -import { memo } from "react"; +/*import { memo } from "react"; import "./DiscountItem.scss"; const DiscountItem = memo( ({ className, methodName, - selectedMethod, - setSelectedMethod, + selectedDiscount, + setSelectedDiscount, }: DiscountItemProps) => { const handleSelected = () => { - setSelectedMethod(methodName); + setSelectedDiscount(methodName); + }; + + const [isOpen, setIsOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState(null); + + const toggleDropdown = () => setIsOpen(!isOpen); + + const selectOption = (option: OptionType) => { + setSelectedOption(option); + setIsOpen(false); }; return ( - + + // ); } ); @@ -34,4 +45,4 @@ interface DiscountItemProps { methodName: string; selectedMethod: string; setSelectedMethod: (methodName: string) => void; -} +}*/ From c615f02453b57b2a528590f727ff8a026b9ecaa1 Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Wed, 27 Dec 2023 14:23:47 +0900 Subject: [PATCH 06/23] =?UTF-8?q?Feat:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/discount/discount.scss | 2 +- src/pages/order/Order.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/discount/discount.scss b/src/pages/discount/discount.scss index b30a204d..a71dcbce 100644 --- a/src/pages/discount/discount.scss +++ b/src/pages/discount/discount.scss @@ -1,4 +1,4 @@ -@import "../../../styles/common.scss"; +@import "../../styles/common.scss"; .discount { margin-top: rem(16); diff --git a/src/pages/order/Order.tsx b/src/pages/order/Order.tsx index 86966463..03b5a843 100644 --- a/src/pages/order/Order.tsx +++ b/src/pages/order/Order.tsx @@ -19,6 +19,7 @@ import { SubDescription, OrderItem, } from "."; +import Discount from "@/pages/discount/Discount"; import "./order.scss"; @@ -123,6 +124,7 @@ const Order = memo(() => { setUserPhoneNumber={setUserPhoneNumber} setIsBookerValidationPass={setIsBookerValidationPass} /> + Date: Wed, 27 Dec 2023 14:45:18 +0900 Subject: [PATCH 07/23] =?UTF-8?q?Style:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/discount/Discount.tsx | 5 --- src/pages/discount/discount.scss | 65 ++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+), 5 deletions(-) diff --git a/src/pages/discount/Discount.tsx b/src/pages/discount/Discount.tsx index ef36287a..d6362a5f 100644 --- a/src/pages/discount/Discount.tsx +++ b/src/pages/discount/Discount.tsx @@ -62,8 +62,3 @@ const Discount = memo(() => { }); export default Discount; - -interface DiscountProps { - selectedDiscount: string; //차후에 수정하기 - setSelectedDiscount: React.Dispatch>; -} diff --git a/src/pages/discount/discount.scss b/src/pages/discount/discount.scss index a71dcbce..ba527ab2 100644 --- a/src/pages/discount/discount.scss +++ b/src/pages/discount/discount.scss @@ -9,3 +9,68 @@ border-top: 1px solid gray(400); border-bottom: 1px solid gray(400); } + +.dropdown-container { + position: relative; + border: 1px solid #f00; + border-radius: 8px; + margin-bottom: 10px; + background-color: #fff; + + .dropdown-header { + padding: 10px; + border-bottom: 1px solid #f00; + cursor: pointer; + position: relative; + + &:after { + content: ""; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + border: solid black; + border-width: 0 2px 2px 0; + display: inline-block; + padding: 3px; + } + } + + .arrow { + transition: transform 0.3s ease; + + &.open { + transform: rotate(-135deg); + } + + &:not(.open) { + transform: rotate(45deg); + } + } + + .dropdown-list { + position: absolute; + width: 100%; + border: 1px solid #f00; + border-top: none; + box-sizing: border-box; + max-height: 200px; // Adjust as needed + overflow-y: auto; + z-index: 10; + background-color: #fff; + + .dropdown-item { + padding: 10px; + border-bottom: 1px solid #f00; + cursor: pointer; + + &:hover { + background-color: #fee; + } + + &:last-child { + border-bottom: none; + } + } + } +} From 1539c10cf8b90407a113fd2842c360ebefbf884f Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Wed, 27 Dec 2023 18:37:41 +0900 Subject: [PATCH 08/23] =?UTF-8?q?Style:=20=EB=93=9C=EB=A1=AD=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/discount/Discount.tsx | 29 +++++++++++++---- src/pages/discount/discount.scss | 54 +++++++++++++++----------------- 2 files changed, 48 insertions(+), 35 deletions(-) diff --git a/src/pages/discount/Discount.tsx b/src/pages/discount/Discount.tsx index d6362a5f..1e4e63c7 100644 --- a/src/pages/discount/Discount.tsx +++ b/src/pages/discount/Discount.tsx @@ -2,7 +2,7 @@ import { SetStateAction, memo, useState } from "react"; //import DiscountItem from "@/pages/discount/discountItem/DiscountItem"; import { discount } from "@/constant/discount"; - +import { FaSortDown } from "react-icons/fa6"; import "./discount.scss"; type OptionType = { @@ -25,19 +25,36 @@ const Discount = memo(() => { setIsOpen(false); }; + const defaultOption: OptionType = { label: "선택없음", value: "" }; + return (

할인

-
- {selectedOption ? selectedOption.label : "Select an option"} - +
+ + {selectedOption ? selectedOption.label : "선택안함"} + + + +
+ {isOpen && (
    - {discount.map((option, index) => ( +
  • selectOption(defaultOption)} + > + {defaultOption.label} +
    • + {discount.map(option => (
  • selectOption(option)} > diff --git a/src/pages/discount/discount.scss b/src/pages/discount/discount.scss index ba527ab2..62b2dae1 100644 --- a/src/pages/discount/discount.scss +++ b/src/pages/discount/discount.scss @@ -1,38 +1,33 @@ @import "../../styles/common.scss"; .discount { - margin-top: rem(16); display: flex; - gap: rem(8); flex-wrap: wrap; padding: rem(16) 0 rem(24); border-top: 1px solid gray(400); - border-bottom: 1px solid gray(400); } .dropdown-container { position: relative; - border: 1px solid #f00; - border-radius: 8px; + border: 2px solid coral(500); + width: 100%; + height: rem(60); + border-radius: rem(8); margin-bottom: 10px; - background-color: #fff; + background-color: coral(100); - .dropdown-header { - padding: 10px; - border-bottom: 1px solid #f00; - cursor: pointer; - position: relative; + .selected-option { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 0 1rem; + height: 100%; + width: 100%; - &:after { - content: ""; - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - border: solid black; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 3px; + > * { + margin: 0; // Removes margin from direct children + padding: 0; // Removes padding from direct children } } @@ -40,30 +35,31 @@ transition: transform 0.3s ease; &.open { - transform: rotate(-135deg); - } - - &:not(.open) { - transform: rotate(45deg); + transform: rotate(180deg); } } .dropdown-list { position: absolute; width: 100%; - border: 1px solid #f00; + border: 1px solid #fe395b; border-top: none; box-sizing: border-box; - max-height: 200px; // Adjust as needed + max-height: 200px; overflow-y: auto; z-index: 10; background-color: #fff; .dropdown-item { + height: rem(60); padding: 10px; - border-bottom: 1px solid #f00; + border-bottom: 1px solid #fee; cursor: pointer; + display: flex; + flex-direction: row; + align-items: center; + &:hover { background-color: #fee; } From 3e49b88a83f1a105fca58e2c080827d42b4663f4 Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Wed, 27 Dec 2023 19:08:50 +0900 Subject: [PATCH 09/23] =?UTF-8?q?Feat:=20=ED=95=A0=EC=9D=B8=20=EC=BF=A0?= =?UTF-8?q?=ED=8F=B0=20dummy=20data=20=ED=8C=8C=EC=9D=BC=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/discountData.json | 4 ++++ src/pages/order/Order.tsx | 2 +- src/pages/{ => order}/discount/Discount.tsx | 0 src/pages/{ => order}/discount/discount.scss | 2 +- src/pages/{ => order}/discount/discountItem/DiscountItem.tsx | 0 src/pages/{ => order}/discount/discountItem/discountItem.scss | 0 6 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 public/data/discountData.json rename src/pages/{ => order}/discount/Discount.tsx (100%) rename src/pages/{ => order}/discount/discount.scss (97%) rename src/pages/{ => order}/discount/discountItem/DiscountItem.tsx (100%) rename src/pages/{ => order}/discount/discountItem/discountItem.scss (100%) diff --git a/public/data/discountData.json b/public/data/discountData.json new file mode 100644 index 00000000..6fc8c514 --- /dev/null +++ b/public/data/discountData.json @@ -0,0 +1,4 @@ +[ + { "label": "10% 할인쿠폰 (5,000원 할인)", "value": "10_percent" }, + { "label": "20,000원 할인쿠폰", "value": "20k_coupon" } +] diff --git a/src/pages/order/Order.tsx b/src/pages/order/Order.tsx index 03b5a843..8afbccde 100644 --- a/src/pages/order/Order.tsx +++ b/src/pages/order/Order.tsx @@ -19,7 +19,7 @@ import { SubDescription, OrderItem, } from "."; -import Discount from "@/pages/discount/Discount"; +import Discount from "@/pages/order/discount/Discount"; import "./order.scss"; diff --git a/src/pages/discount/Discount.tsx b/src/pages/order/discount/Discount.tsx similarity index 100% rename from src/pages/discount/Discount.tsx rename to src/pages/order/discount/Discount.tsx diff --git a/src/pages/discount/discount.scss b/src/pages/order/discount/discount.scss similarity index 97% rename from src/pages/discount/discount.scss rename to src/pages/order/discount/discount.scss index 62b2dae1..5da89d05 100644 --- a/src/pages/discount/discount.scss +++ b/src/pages/order/discount/discount.scss @@ -1,4 +1,4 @@ -@import "../../styles/common.scss"; +@import "../../../styles/common.scss"; .discount { display: flex; diff --git a/src/pages/discount/discountItem/DiscountItem.tsx b/src/pages/order/discount/discountItem/DiscountItem.tsx similarity index 100% rename from src/pages/discount/discountItem/DiscountItem.tsx rename to src/pages/order/discount/discountItem/DiscountItem.tsx diff --git a/src/pages/discount/discountItem/discountItem.scss b/src/pages/order/discount/discountItem/discountItem.scss similarity index 100% rename from src/pages/discount/discountItem/discountItem.scss rename to src/pages/order/discount/discountItem/discountItem.scss From 671f0fd65f9eba84eff95ca0cf8720df74c3c72f Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Thu, 28 Dec 2023 14:56:07 +0900 Subject: [PATCH 10/23] =?UTF-8?q?Chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=B6=80=EB=B6=84=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/discountData.json | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 public/data/discountData.json diff --git a/public/data/discountData.json b/public/data/discountData.json deleted file mode 100644 index 6fc8c514..00000000 --- a/public/data/discountData.json +++ /dev/null @@ -1,4 +0,0 @@ -[ - { "label": "10% 할인쿠폰 (5,000원 할인)", "value": "10_percent" }, - { "label": "20,000원 할인쿠폰", "value": "20k_coupon" } -] From 0d2d98ee60472bd89d5a1a7fd7c6f81539b01581 Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Thu, 28 Dec 2023 18:49:08 +0900 Subject: [PATCH 11/23] =?UTF-8?q?Feat:=20=EB=B3=80=EC=88=98=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=BF=A0?= =?UTF-8?q?=ED=8F=B0=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=98=A4=EA=B8=B0=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/order/discount/Discount.tsx | 45 ++++++++++----------------- 1 file changed, 16 insertions(+), 29 deletions(-) diff --git a/src/pages/order/discount/Discount.tsx b/src/pages/order/discount/Discount.tsx index 1e4e63c7..a56a2f02 100644 --- a/src/pages/order/discount/Discount.tsx +++ b/src/pages/order/discount/Discount.tsx @@ -4,28 +4,25 @@ import { SetStateAction, memo, useState } from "react"; import { discount } from "@/constant/discount"; import { FaSortDown } from "react-icons/fa6"; import "./discount.scss"; - -type OptionType = { - label: string; - value: string; -}; - -type CustomDropdownProps = { - options: OptionType[]; -}; +import { useRecoilValue, useSetRecoilState } from "recoil"; +import { orderState, OrderItemTypes } from "@/states/orderState"; const Discount = memo(() => { const [isOpen, setIsOpen] = useState(false); - const [selectedOption, setSelectedOption] = useState(null); + const [selectedCoupon, setSelectedCoupon] = useState( + null + ); const toggleDropdown = () => setIsOpen(!isOpen); - const selectOption = (option: OptionType) => { + const selectCoupon = (option: OrderItemTypes) => { setSelectedOption(option); setIsOpen(false); }; - const defaultOption: OptionType = { label: "선택없음", value: "" }; + const defaultOption: OrderItemTypes = { couponName: "선택없음", price: 0 }; + + const order = useRecoilValue(orderState); return (
    @@ -33,7 +30,7 @@ const Discount = memo(() => {
    - {selectedOption ? selectedOption.label : "선택안함"} + {selectedCoupon ? selectedCoupon.couponName : "선택안함"} {
  • selectOption(defaultOption)} + onClick={() => selectCoupon(defaultOption)} > - {defaultOption.label} + {defaultOption.couponName}
    • - {discount.map(option => ( + {order.coupons.map(coupon => (
  • selectOption(option)} + onClick={() => selectCoupon(coupon)} > - {option.label} + {coupon.couponName}
    • ))}
)}
- - {/* {discount.map((option, index) => ( - - ))} */}
); }); From 359963bd1e316b2e6352dd29f6dd41a7aa1dab4b Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Fri, 29 Dec 2023 11:34:03 +0900 Subject: [PATCH 12/23] =?UTF-8?q?Feat:=20=EC=BF=A0=ED=8F=B0=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/order/discount/Discount.tsx | 65 +++++++++++++++++++++------ 1 file changed, 51 insertions(+), 14 deletions(-) diff --git a/src/pages/order/discount/Discount.tsx b/src/pages/order/discount/Discount.tsx index a56a2f02..027ddf9b 100644 --- a/src/pages/order/discount/Discount.tsx +++ b/src/pages/order/discount/Discount.tsx @@ -1,7 +1,7 @@ import { SetStateAction, memo, useState } from "react"; //import DiscountItem from "@/pages/discount/discountItem/DiscountItem"; -import { discount } from "@/constant/discount"; +//import { discount } from "@/constant/discount"; import { FaSortDown } from "react-icons/fa6"; import "./discount.scss"; import { useRecoilValue, useSetRecoilState } from "recoil"; @@ -9,18 +9,52 @@ import { orderState, OrderItemTypes } from "@/states/orderState"; const Discount = memo(() => { const [isOpen, setIsOpen] = useState(false); - const [selectedCoupon, setSelectedCoupon] = useState( - null - ); + // const [selectedCoupon, setSelectedCoupon] = useState( + // null + // ); + + type CouponType = { + id: number; + name: string; + price: number; + }; + + const [selectedMock, setSelectedMock] = useState(null); + + const mockData = [ + { + accommodationName: "해뜨는집 펜션", + checkInTime: "15:00", + checkOutTime: "12:00", + defaultCapacity: 4, + maxCapacity: 6, + price: 100000, + discountPrice: 80000, + id: 286, + roomName: "봄", + startDate: "2023-12-29", + endDate: "2023-12-29", + coupons: [ + { id: 56, name: "10% 할인", price: 90000 }, + { id: 57, name: "2000원 할인", price: 80000 }, + ], + }, + ]; + const [data, setData] = useState(mockData); const toggleDropdown = () => setIsOpen(!isOpen); - const selectCoupon = (option: OrderItemTypes) => { - setSelectedOption(option); + // const selectCoupon = (coupon: OrderItemTypes) => { + // setSelectedCoupon(coupon); + // setIsOpen(false); + // }; + + const selectMock = (coupon: CouponType) => { + setSelectedMock(coupon); setIsOpen(false); }; - const defaultOption: OrderItemTypes = { couponName: "선택없음", price: 0 }; + const defaultOption: CouponType = { name: "선택없음", id: 0, price: 0 }; const order = useRecoilValue(orderState); @@ -30,7 +64,8 @@ const Discount = memo(() => {
- {selectedCoupon ? selectedCoupon.couponName : "선택안함"} + {/* {selectedCoupon ? selectedCoupon.name : "선택안함"} */} + {selectedMock ? selectedMock.name : "선택안함"} {
  • selectCoupon(defaultOption)} + // onClick={() => selectCoupon(defaultOption)} + onClick={() => selectMock(defaultOption)} > - {defaultOption.couponName} + {defaultOption.name}
    • - {order.coupons.map(coupon => ( + {mockData[0]?.coupons.map(coupon => (
  • selectCoupon(coupon)} + // onClick={() => selectCoupon(coupon)} + onClick={() => selectMock(coupon)} > - {coupon.couponName} + {coupon.name}
    • ))} From 9356116183e76522dbc63f48920f75f2ed705092 Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Fri, 29 Dec 2023 16:17:50 +0900 Subject: [PATCH 13/23] =?UTF-8?q?Style:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EC=98=B5=EC=85=98=EA=B3=BC=20=EA=B0=80=EA=B2=A9=20?= =?UTF-8?q?=EB=8F=99=EA=B8=B0=ED=99=94=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/postOrderApi.ts | 16 ++--- src/constant/discount.ts | 4 -- src/pages/order/Order.tsx | 20 +++--- src/pages/order/discount/Discount.tsx | 60 +++++------------- src/pages/order/discount/discount.scss | 73 +--------------------- src/pages/order/orderItem/OrderItem.tsx | 7 ++- src/pages/order/orderPrice/OrderPrice.tsx | 27 ++++++-- src/pages/order/orderPrice/orderPrice.scss | 29 +++++++++ src/states/discountState.ts | 6 ++ 9 files changed, 94 insertions(+), 148 deletions(-) delete mode 100644 src/constant/discount.ts create mode 100644 src/states/discountState.ts diff --git a/src/api/postOrderApi.ts b/src/api/postOrderApi.ts index 8bbab79f..2ba70b47 100644 --- a/src/api/postOrderApi.ts +++ b/src/api/postOrderApi.ts @@ -13,21 +13,15 @@ export const postOrderApi = async ( } }; -interface OrderItemType { +interface PostOrderApiRequestBodyType { + visitorName: string; + visitorPhone: string; roomId: number; startDate: string; + //orderItems?: OrderItemType[]; endDate: string; - headCount: number; - orderPrice: number; -} - -interface PostOrderApiRequestBodyType { - ageConsent: boolean; - reservationPersonName: string; - reservationPhoneNumber: string; + couponId: number; totalPrice: number; - orderItems?: OrderItemType[]; - cartItemIds?: number[]; } export interface PostOrderApiErrorResponse { diff --git a/src/constant/discount.ts b/src/constant/discount.ts deleted file mode 100644 index 560ea2f5..00000000 --- a/src/constant/discount.ts +++ /dev/null @@ -1,4 +0,0 @@ -export const discount = [ - { label: "10% 할인쿠폰 (5,000원 할인)", value: "10_percent" }, - { label: "20,000원 할인쿠폰", value: "20k_coupon" }, -]; diff --git a/src/pages/order/Order.tsx b/src/pages/order/Order.tsx index dae54e4b..73ef75dd 100644 --- a/src/pages/order/Order.tsx +++ b/src/pages/order/Order.tsx @@ -1,5 +1,5 @@ import { memo, useEffect, useState } from "react"; -import { useRecoilValue, useSetRecoilState } from "recoil"; +import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil"; import { OrderItemTypes, orderState } from "@/states/orderState"; import { PostOrderApiErrorResponse, postOrderApi } from "@/api/postOrderApi"; import { useNavigate } from "react-router-dom"; @@ -8,6 +8,7 @@ import _debounce from "lodash/debounce"; import TermsAgreement from "@/components/termsAgreement/TermsAgreement"; import numberFormat from "@/utils/numberFormat"; +import { discountState } from "@/states/discountState"; import { orderErrorMsgState } from "@/states/orderErrorMsgState"; import { Button } from "@/components/common"; @@ -36,10 +37,11 @@ const Order = memo(() => { const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const cartParam = urlParams.get("cart"); - const totalOrderPrice = orderData.reduce( - (total, item) => total + item.price, - 0 - ); + const [discountAmt, setDiscountAmt] = useRecoilState(discountState); + const totalOrderPrice = + discountAmt !== 0 + ? discountAmt + : orderData.reduce((total, item) => total + item.price, 0); useEffect(() => { localStorage.setItem("orderState", JSON.stringify(orderData)); @@ -68,8 +70,8 @@ const Order = memo(() => { cartItemIds: cartItemIds, }; try { - const res = await postOrderApi("/api/orders/carts", requestBody); - navigate(`/order/result?result=true&orderid=${res.data.orderId}`); + // const res = await postOrderApi("/api/orders/carts", requestBody); + // navigate(`/order/result?result=true&orderid=${res.data.orderId}`); } catch (error) { navigate("/order/result?=false"); const postOrderApiError = error as PostOrderApiErrorResponse; @@ -92,8 +94,8 @@ const Order = memo(() => { })), }; try { - const res = await postOrderApi("/api/orders", requestBody); - navigate(`/order/result?result=true&orderid=${res.data.orderId}`); + // const res = await postOrderApi("/api/orders", requestBody); + // navigate(`/order/result?result=true&orderid=${res.data.orderId}`); } catch (error) { navigate("/order/result?=false"); const postOrderApiError = error as PostOrderApiErrorResponse; diff --git a/src/pages/order/discount/Discount.tsx b/src/pages/order/discount/Discount.tsx index 027ddf9b..5f83b357 100644 --- a/src/pages/order/discount/Discount.tsx +++ b/src/pages/order/discount/Discount.tsx @@ -1,17 +1,12 @@ -import { SetStateAction, memo, useState } from "react"; - -//import DiscountItem from "@/pages/discount/discountItem/DiscountItem"; -//import { discount } from "@/constant/discount"; +import { memo, useState } from "react"; import { FaSortDown } from "react-icons/fa6"; import "./discount.scss"; -import { useRecoilValue, useSetRecoilState } from "recoil"; -import { orderState, OrderItemTypes } from "@/states/orderState"; +import { useRecoilValue, useRecoilState } from "recoil"; +import { orderState } from "@/states/orderState"; +import { discountState } from "@/states/discountState"; const Discount = memo(() => { const [isOpen, setIsOpen] = useState(false); - // const [selectedCoupon, setSelectedCoupon] = useState( - // null - // ); type CouponType = { id: number; @@ -19,42 +14,17 @@ const Discount = memo(() => { price: number; }; - const [selectedMock, setSelectedMock] = useState(null); - - const mockData = [ - { - accommodationName: "해뜨는집 펜션", - checkInTime: "15:00", - checkOutTime: "12:00", - defaultCapacity: 4, - maxCapacity: 6, - price: 100000, - discountPrice: 80000, - id: 286, - roomName: "봄", - startDate: "2023-12-29", - endDate: "2023-12-29", - coupons: [ - { id: 56, name: "10% 할인", price: 90000 }, - { id: 57, name: "2000원 할인", price: 80000 }, - ], - }, - ]; - const [data, setData] = useState(mockData); - + const [selectedCoupon, setSelectedCoupon] = useState(null); + const [discountAmt, setDiscountAmt] = useRecoilState(discountState); const toggleDropdown = () => setIsOpen(!isOpen); - // const selectCoupon = (coupon: OrderItemTypes) => { - // setSelectedCoupon(coupon); - // setIsOpen(false); - // }; - - const selectMock = (coupon: CouponType) => { - setSelectedMock(coupon); + const selectCoupon = (coupon: CouponType) => { + setSelectedCoupon(coupon); + setDiscountAmt(coupon.price); setIsOpen(false); }; - const defaultOption: CouponType = { name: "선택없음", id: 0, price: 0 }; + const defaultOption: CouponType = { name: "선택안함", id: 0, price: 0 }; const order = useRecoilValue(orderState); @@ -65,7 +35,7 @@ const Discount = memo(() => {
    {/* {selectedCoupon ? selectedCoupon.name : "선택안함"} */} - {selectedMock ? selectedMock.name : "선택안함"} + {selectedCoupon ? selectedCoupon.name : "선택안함"} {
  • selectCoupon(defaultOption)} - onClick={() => selectMock(defaultOption)} + onClick={() => selectCoupon(defaultOption)} > {defaultOption.name}
    • - {mockData[0]?.coupons.map(coupon => ( + {order[0]?.coupons.map(coupon => (
  • selectCoupon(coupon)} - onClick={() => selectMock(coupon)} + onClick={() => selectCoupon(coupon)} > {coupon.name}
    • diff --git a/src/pages/order/discount/discount.scss b/src/pages/order/discount/discount.scss index b9309b98..b22e0ab8 100644 --- a/src/pages/order/discount/discount.scss +++ b/src/pages/order/discount/discount.scss @@ -1,81 +1,10 @@ @import "../../../styles/common.scss"; -.discount { - display: flex; - flex-wrap: wrap; - padding: rem(16) 0 rem(24); - border-top: 1px solid gray(400); -} - -.dropdown-container { - position: relative; - border: 2px solid coral(500); - width: 100%; - height: rem(60); - border-radius: rem(8); - margin-bottom: 10px; - background-color: coral(100); - - .selected-option { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; - padding: 0 1rem; - height: 100%; - width: 100%; - - > * { - margin: 0; // Removes margin from direct children - padding: 0; // Removes padding from direct children - } - } - - .arrow { - transition: transform 0.3s ease; - - &.open { - transform: rotate(180deg); - } - } - - .dropdown-list { - position: absolute; - width: 100%; - border: 1px solid #fe395b; - border-top: none; - box-sizing: border-box; - max-height: 200px; - overflow-y: auto; - z-index: 10; - background-color: #fff; - - .dropdown-item { - height: rem(60); - padding: 10px; - border-bottom: 1px solid #fee; - cursor: pointer; - - display: flex; - flex-direction: row; - align-items: center; - - &:hover { - background-color: #fee; - } - - &:last-child { - border-bottom: none; - } - } - } -} -@import "../../../styles/common.scss"; - .discount { margin-top: rem(25); position: relative; padding-bottom: rem(90); + .dropdown-container { position: absolute; width: 100%; diff --git a/src/pages/order/orderItem/OrderItem.tsx b/src/pages/order/orderItem/OrderItem.tsx index bcdc09ff..6d68942f 100644 --- a/src/pages/order/orderItem/OrderItem.tsx +++ b/src/pages/order/orderItem/OrderItem.tsx @@ -4,7 +4,8 @@ import RoomName from "@/components/roomName/RoomName"; import CheckIn from "@/components/checkIn/CheckIn"; import CheckOut from "@/components/checkOut/CheckOut"; import OrderPrice from "@/pages/order/orderPrice/OrderPrice"; - +import { useRecoilState } from "recoil"; +import { discountState } from "@/states/discountState"; import "./orderItem.scss"; import { calculateNightStay } from "@/utils/calculateNightStay"; import { memo } from "react"; @@ -22,6 +23,8 @@ const OrderItem = memo(({ orderData }: OrderItemProps) => { price, } = orderData; + const [discountAmt, setDiscountAmt] = useRecoilState(discountState); + return (
    @@ -38,7 +41,7 @@ const OrderItem = memo(({ orderData }: OrderItemProps) => {
    diff --git a/src/pages/order/orderPrice/OrderPrice.tsx b/src/pages/order/orderPrice/OrderPrice.tsx index ce18871a..1c346bd6 100644 --- a/src/pages/order/orderPrice/OrderPrice.tsx +++ b/src/pages/order/orderPrice/OrderPrice.tsx @@ -1,17 +1,36 @@ import numberFormat from "@/utils/numberFormat"; import "./orderPrice.scss"; +import { useRecoilState } from "recoil"; +import { discountState } from "@/states/discountState"; const OrderPrice = ({ nightCount, roomPrice }: OrderPriceProps) => { - const formattedPrice = numberFormat(roomPrice); + const [discountAmt, setDiscountAmt] = useRecoilState(discountState); + console.log(roomPrice, discountAmt); + const finalPrice = discountAmt > 0 ? discountAmt : roomPrice; + + // Format the prices for display + const formattedOriginalPrice = numberFormat(roomPrice + discountAmt); + const formattedFinalPrice = numberFormat(finalPrice); return (
    ({nightCount}박) - - {formattedPrice}원 - + {discountAmt !== 0 && ( +
    +
    쿠폰가
    +
    + )} + +
    + {discountAmt !== 0 && ( + {formattedOriginalPrice} + )} + + {formattedFinalPrice}원 + +
    ); }; diff --git a/src/pages/order/orderPrice/orderPrice.scss b/src/pages/order/orderPrice/orderPrice.scss index 98ca1e38..b5320e23 100644 --- a/src/pages/order/orderPrice/orderPrice.scss +++ b/src/pages/order/orderPrice/orderPrice.scss @@ -2,6 +2,7 @@ .order-price { display: flex; + flex-direction: row; align-items: center; gap: rem(8); &__night-count { @@ -10,4 +11,32 @@ &__price { color: coral(500); } + .original-price-container { + display: flex; + flex-direction: column; + align-items: flex-end; + } + + .original-price { + color: #757575; + text-decoration: line-through; + font-size: 0.875rem; + } +} + +.coupon-box { + display: flex; + flex-direction: column; + align-items: flex-end; + padding: rem(4); + border: rem(1) solid coral(500); + border-radius: rem(8); + background-color: white; + margin-top: 1rem; + + .coupon-label { + font-size: rem(14); + color: coral(500); + font-weight: bold; + } } diff --git a/src/states/discountState.ts b/src/states/discountState.ts new file mode 100644 index 00000000..3b2b1d6c --- /dev/null +++ b/src/states/discountState.ts @@ -0,0 +1,6 @@ +import { atom } from "recoil"; + +export const discountState = atom({ + key: "discount", + default: 0, +}); From 79742242aa5be946efd212f5f9bc7eefde5cdcd3 Mon Sep 17 00:00:00 2001 From: Diana Seo Date: Fri, 29 Dec 2023 16:54:36 +0900 Subject: [PATCH 14/23] =?UTF-8?q?Fix:=20=EC=9E=90=EC=9E=98=ED=95=9C=20?= =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/order/Order.tsx | 7 ++++++- src/pages/order/discount/Discount.tsx | 19 +++++++++++-------- .../order/discountBadge/DiscountBadge.tsx | 9 +++++++-- src/pages/order/orderPrice/OrderPrice.tsx | 11 ++++------- 4 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/pages/order/Order.tsx b/src/pages/order/Order.tsx index 73ef75dd..81434ab2 100644 --- a/src/pages/order/Order.tsx +++ b/src/pages/order/Order.tsx @@ -21,7 +21,7 @@ import { OrderItem, } from "."; import Discount from "@/pages/order/discount/Discount"; - +import DiscountBadge from "./discountBadge/DiscountBadge"; import "./order.scss"; const Order = memo(() => { @@ -111,6 +111,8 @@ const Order = memo(() => { setIsAllValidationPass(true); }, [isAllCheck, isBookerValidationPass]); + const totalPrice = orderData.reduce((sum, item) => sum + item.price, 0); + return (
    @@ -132,6 +134,9 @@ const Order = memo(() => { setSelectedMethod={setSelectedMethod} /> + {discountAmt > 0 && ( + + )}