From 801829645a8087ae7f251971d833c407b70766e6 Mon Sep 17 00:00:00 2001 From: DaeHee99 Date: Wed, 29 Jan 2025 02:15:59 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=8C=8C=ED=8B=B0=20=EB=8B=A8=EB=8F=85?= =?UTF-8?q?=20=EC=98=88=EC=95=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomButton/index.tsx | 12 +++- src/pages/LandingPage/NewMyParty/index.tsx | 2 +- .../Filter/NewPartyMobile/index.tsx | 2 +- .../NewPartyPage/Atom/CreateModal/index.tsx | 3 + src/pages/NewPartyPage/Edit/index.tsx | 3 + .../PartyType/PartyTypeButton/index.tsx | 72 +++++++++++++++++++ src/pages/NewPartyPage/PartyType/index.tsx | 68 ++++++++++++++++++ src/pages/NewPartyPage/Reservation/index.tsx | 3 + src/pages/NewPartyPage/index.tsx | 7 ++ 9 files changed, 167 insertions(+), 5 deletions(-) create mode 100644 src/pages/NewPartyPage/PartyType/PartyTypeButton/index.tsx create mode 100644 src/pages/NewPartyPage/PartyType/index.tsx diff --git a/src/components/BottomButton/index.tsx b/src/components/BottomButton/index.tsx index 48d8168d..ec029995 100644 --- a/src/components/BottomButton/index.tsx +++ b/src/components/BottomButton/index.tsx @@ -1,18 +1,24 @@ import { memo } from "react"; +import clsx from "clsx"; interface Props { text: string; onClick: () => void; + disabled?: boolean; } -function BottomButton({ text, onClick }: Props) { +function BottomButton({ text, onClick, disabled = false }: Props) { return (
-
+
diff --git a/src/pages/LandingPage/NewMyParty/index.tsx b/src/pages/LandingPage/NewMyParty/index.tsx index 884b5c8c..47ad2f49 100644 --- a/src/pages/LandingPage/NewMyParty/index.tsx +++ b/src/pages/LandingPage/NewMyParty/index.tsx @@ -15,7 +15,7 @@ function NewMyParty({ setShowLoginModal }: Props) { const clickHandler = useCallback(() => { if (user.auth) navigation( - `/party/new/1?region=${null}&member=${null}&date=${null}&driverId=${null}` + `/party/new/0?region=${null}&member=${null}&date=${null}&driverId=${null}` ); else setShowLoginModal(true); }, [user]); diff --git a/src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.tsx b/src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.tsx index ad16c59c..b7e9fca6 100644 --- a/src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.tsx +++ b/src/pages/LandingPage/PartyFilter/Filter/NewPartyMobile/index.tsx @@ -17,7 +17,7 @@ function NewPartyMobile({ setShowLoginModal }: Props) { const clickHandler = useCallback(() => { if (user.auth) navigation( - `/party/new/1?region=${null}&member=${null}&date=${null}&driverId=${null}` + `/party/new/0?region=${null}&member=${null}&date=${null}&driverId=${null}` ); else setShowLoginModal(true); }, [user]); diff --git a/src/pages/NewPartyPage/Atom/CreateModal/index.tsx b/src/pages/NewPartyPage/Atom/CreateModal/index.tsx index e1609017..0cbcce5b 100644 --- a/src/pages/NewPartyPage/Atom/CreateModal/index.tsx +++ b/src/pages/NewPartyPage/Atom/CreateModal/index.tsx @@ -31,6 +31,7 @@ interface Props { startTime?: string; endTime?: string; promotionId: number; + partyType: string; } function CreateModal({ @@ -48,6 +49,7 @@ function CreateModal({ startTime, endTime, promotionId, + partyType, }: Props) { const navigation = useNavigate(); const modalRef = useRef(null); @@ -87,6 +89,7 @@ function CreateModal({ ], region: planData.region || region, totalPrice: planData.days[0].price, + capacity: partyType === "Friend" ? memberCount : planData.capacity, }, monopoly: false, userPromotionCodeId: promotionId, diff --git a/src/pages/NewPartyPage/Edit/index.tsx b/src/pages/NewPartyPage/Edit/index.tsx index 01b31aab..59da52b0 100644 --- a/src/pages/NewPartyPage/Edit/index.tsx +++ b/src/pages/NewPartyPage/Edit/index.tsx @@ -50,6 +50,7 @@ interface Props { setSelectedCourseId: Dispatch>; member: number; region: string; + partyType: string; } function Edit({ @@ -61,6 +62,7 @@ function Edit({ setSelectedCourseId, member, region, + partyType, }: Props) { const coursePriceRef = useRef(null); const companionsRef = useRef(null); @@ -331,6 +333,7 @@ function Edit({ startTime={startTime} endTime={endTime} promotionId={promotionId} + partyType={partyType} />
); diff --git a/src/pages/NewPartyPage/PartyType/PartyTypeButton/index.tsx b/src/pages/NewPartyPage/PartyType/PartyTypeButton/index.tsx new file mode 100644 index 00000000..264f30fd --- /dev/null +++ b/src/pages/NewPartyPage/PartyType/PartyTypeButton/index.tsx @@ -0,0 +1,72 @@ +import { Dispatch, memo, SetStateAction, useCallback } from "react"; +import { useNavigate } from "react-router-dom"; +import clsx from "clsx"; + +interface Props { + type: string; + title: string; + desc: string[]; + name: string; + partyType: string; + setPartyType: Dispatch>; +} + +function PartyTypeButton({ + type, + title, + desc, + name, + partyType, + setPartyType, +}: Props) { + const navigation = useNavigate(); + + const clickButton = useCallback(() => { + setPartyType(type); + navigation("/party/new/1?region=null&member=null&date=null&driverId=null"); + }, [type]); + + const touchHandler = useCallback(() => { + setPartyType(type); + }, [type]); + + return ( +
+ + {type} + +

+ {title} +

+
    +
  • {desc[0] || ""}
    • +
  • {desc[1] || ""}
    • +
+ +
+ ); +} + +export default memo(PartyTypeButton); diff --git a/src/pages/NewPartyPage/PartyType/index.tsx b/src/pages/NewPartyPage/PartyType/index.tsx new file mode 100644 index 00000000..4d11542d --- /dev/null +++ b/src/pages/NewPartyPage/PartyType/index.tsx @@ -0,0 +1,68 @@ +import { Dispatch, memo, SetStateAction, useEffect, useMemo } from "react"; +import { useNavigate } from "react-router-dom"; +import { BottomButton, Title } from "@/components"; +import PartyTypeButton from "./PartyTypeButton"; + +interface Props { + partyType: string; + setPartyType: Dispatch>; +} + +function PartyType({ partyType, setPartyType }: Props) { + const navigation = useNavigate(); + + const partyTypeList = useMemo( + () => [ + { + type: "New", + title: "새로운 여행자들과 떠나는 여행 🚀", + desc: [ + "예약자님의 계획으로 말랑트립의 동행자들과\n새로운 만남으로 여행을 떠납니다.", + "택시 정원 한도로 동행자들과 여행이 가능하며\n팀원들 간 계획 수정도 가능합니다.", + ], + name: "새로운 사람과 여행가기", + }, + { + type: "Friend", + title: "나의 지인들과 소중한 여행 🚕", + desc: [ + "예약자와 지인들의 원하는 일정으로 드라이버와\n함께 단독으로 이용합니다.", + "택시 정원 한도로 동행자들과 여행이 가능합니다.", + ], + name: "나의 지인과 여행가기", + }, + ], + [] + ); + + useEffect(() => { + setPartyType(""); + }, []); + + return ( + <> + + <div className="mt-[30px] md:mt-[60px] flex flex-col md:flex-row gap-[14px] md:gap-[22px] mx-6"> + {partyTypeList.map((item) => ( + <PartyTypeButton + key={item.type} + partyType={partyType} + setPartyType={setPartyType} + {...item} + /> + ))} + </div> + <BottomButton + text="여행가기" + disabled={partyType === ""} + onClick={() => + navigation( + "/party/new/1?region=null&member=null&date=null&driverId=null" + ) + } + /> + </> + ); +} + +export default memo(PartyType); diff --git a/src/pages/NewPartyPage/Reservation/index.tsx b/src/pages/NewPartyPage/Reservation/index.tsx index 4b1396e5..83a46532 100644 --- a/src/pages/NewPartyPage/Reservation/index.tsx +++ b/src/pages/NewPartyPage/Reservation/index.tsx @@ -42,6 +42,7 @@ interface Props { setSelectedCourseId: Dispatch<SetStateAction<number>>; member: number; region: string; + partyType: string; } function Reservation({ @@ -52,6 +53,7 @@ function Reservation({ setSelectedCourseId, member, region, + partyType, }: Props) { const companionsRef = useRef<HTMLDivElement | null>(null); const creditRef = useRef<HTMLDivElement | null>(null); @@ -228,6 +230,7 @@ function Reservation({ driverId={driverInfo.driverId} region={region} promotionId={promotionId} + partyType={partyType} /> </div> ); diff --git a/src/pages/NewPartyPage/index.tsx b/src/pages/NewPartyPage/index.tsx index 801f0d23..d2f62502 100644 --- a/src/pages/NewPartyPage/index.tsx +++ b/src/pages/NewPartyPage/index.tsx @@ -14,12 +14,14 @@ import Driver from "./Driver"; import Course from "./Course"; import Edit from "./Edit"; import Reservation from "./Reservation"; +import PartyType from "./PartyType"; function NewPartyPage() { const navigation = useNavigate(); const { step } = useParams(); const user = useSelector((state: RootState) => state.user); const [searchParams] = useSearchParams(); + const [partyType, setPartyType] = useState(""); const [region, setRegion] = useState(""); const [member, setMember] = useState(1); const [date, setDate] = useState(""); @@ -247,6 +249,9 @@ function NewPartyPage() { if (loading) return <Loading full={true} />; return ( <PageContainer> + {step === "0" && ( + <PartyType partyType={partyType} setPartyType={setPartyType} /> + )} {step === "1" && ( <Region setRegion={setRegion} @@ -297,6 +302,7 @@ function NewPartyPage() { setSelectedCourseId={setSelectedCourseId} member={member} region={region} + partyType={partyType} /> )} {step === "6" && ( @@ -308,6 +314,7 @@ function NewPartyPage() { setSelectedCourseId={setSelectedCourseId} member={member} region={region} + partyType={partyType} /> )} <ConfirmModal