feat: 파티 단독 예약

Mallang-Trip · Jan 28, 2025 · 8018296 · 8018296
1 parent 77b406c
commit 8018296
Show file tree

Hide file tree

Showing 9 changed files with 167 additions and 5 deletions.
diff --git 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 (
     <div className="w-full block md:hidden fixed left-0 bottom-0 z-50">
       <div className="w-full h-8 bg-gradient-to-t from-white to-white/0"></div>
-      <div className="w-full px-5 pb-5 bg-white">
+      <div className="w-full px-5 py-5 bg-white">
         <button
-          className="w-full h-12 bg-primary text-white text-sm text-bold rounded-lg"
+          className={clsx(
+            "w-full h-12 text-sm text-bold rounded-lg",
+            disabled ? "bg-[#EEEEEE] text-[#999999]" : "bg-primary text-white"
+          )}
           onClick={onClick}
+          disabled={disabled}
         >
           {text}
         </button>

diff --git 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
@@ -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
@@ -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<HTMLDivElement | null>(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
@@ -50,6 +50,7 @@ interface Props {
   setSelectedCourseId: Dispatch<SetStateAction<number>>;
   member: number;
   region: string;
+  partyType: string;
 }
 
 function Edit({
@@ -61,6 +62,7 @@ function Edit({
   setSelectedCourseId,
   member,
   region,
+  partyType,
 }: Props) {
   const coursePriceRef = useRef<HTMLDivElement | null>(null);
   const companionsRef = useRef<HTMLDivElement | null>(null);
@@ -331,6 +333,7 @@ function Edit({
         startTime={startTime}
         endTime={endTime}
         promotionId={promotionId}
+        partyType={partyType}
       />
     </div>
   );

diff --git a/src/pages/NewPartyPage/PartyType/PartyTypeButton/index.tsx 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<SetStateAction<string>>;
+}
+
+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 (
+    <div
+      className={clsx(
+        "group w-full md:max-w-[360px] px-6 md:px-[30px] pb-[30px] md:pb-[240px] pt-[30px] md:pt-[100px] rounded-2xl relative md:hover:bg-skyblue md:hover:ring-[2px] ring-primary cursor-default",
+        partyType === type ? "bg-skyblue ring-[2px]" : "bg-[#F8F9FD] ring-0"
+      )}
+      onTouchStart={touchHandler}
+    >
+      <span
+        className={clsx(
+          "px-2 py-0.5 text-white font-medium text-[10px] leading-[14px] rounded-[4px] md:group-hover:bg-primary",
+          partyType === type ? "bg-primary" : "bg-[#333333]"
+        )}
+      >
+        {type}
+      </span>
+      <p className="font-semibold text-lg text-[#333333] mt-2.5 mb-4">
+        {title}
+      </p>
+      <ul className="list-disc px-4 font-normal text-xs text-darkgray marker:text-[8px]">
+        <li className="whitespace-pre-wrap">{desc[0] || ""}</li>
+        <li className="whitespace-pre-wrap mt-1.5">{desc[1] || ""}</li>
+      </ul>
+      <button
+        className={clsx(
+          "hidden md:block absolute left-[30px] bottom-[30px] h-[58px] rounded-2xl font-medium text-lg md:group-hover:bg-primary md:group-hover:text-white",
+          partyType === type
+            ? "bg-primary text-white"
+            : "bg-[#EEEEEE] text-[#999999]"
+        )}
+        style={{ width: "calc(100% - 60px)" }}
+        onClick={clickButton}
+      >
+        {name}
+      </button>
+    </div>
+  );
+}
+
+export default memo(PartyTypeButton);
diff --git a/src/pages/NewPartyPage/PartyType/index.tsx 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<SetStateAction<string>>;
+}
+
+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 (
+    <>
+      <Title title="어떤 여행인가요?" className="mx-4" />
+      <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
@@ -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
@@ -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