예상 택시 비용 보여주기

packages/web/src/components/Chat/Header/SideMenu.tsx

@@ -1,6 +1,7 @@
-import { memo, useCallback, useState } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 
 import useIsTimeOver from "@/hooks/useIsTimeOver";
+import { useAxios } from "@/hooks/useTaxiAPI";
 
 import DottedLine from "@/components/DottedLine";
 import {
@@ -26,6 +27,7 @@ import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
 import PeopleAltRoundedIcon from "@mui/icons-material/PeopleAltRounded";
 import ReportGmailerrorredRoundedIcon from "@mui/icons-material/ReportGmailerrorredRounded";
 import ShareRoundedIcon from "@mui/icons-material/ShareRounded";
+import WalletRoundedIcon from "@mui/icons-material/WalletRounded";
 
 type SideMenuButtonProps = {
   type: "share" | "report" | "taxi";
@@ -72,6 +74,8 @@ const SideMenuButton = ({ type, onClick }: SideMenuButtonProps) => {
 };
 
 const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
+  const axios = useAxios();
+
   const setAlert = useSetRecoilState(alertAtom);
   const [isOpenShare, setIsOpenShare] = useState<boolean>(false);
   const [isOpenCallTaxi, setIsOpenCallTaxi] = useState<boolean>(false);
@@ -90,6 +94,25 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
   const onClickCallTaxi = useCallback(() => setIsOpenCallTaxi(true), []);
   const onClickReport = useCallback(() => setIsOpenReport(true), []);
 
+  const [taxiFare, setTaxiFare] = useState<number>(0);
+  const getTaxiFare = async () => {
+    await axios({
+      url: "/fare/getTaxiFare",
+      method: "get",
+      params: {
+        from: roomInfo.from._id.toString(),
+        to: roomInfo.to._id.toString(),
+        time: roomInfo.time,
+      },
+      onSuccess: (data) => setTaxiFare(data.fare),
+      onError: (status) => {},
+    });
+  };
+
+  useEffect(() => {
+    getTaxiFare();
+  }, []);
+
   const styleBackground = {
     position: "absolute" as any,
     top: 0,
@@ -189,6 +212,15 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
             </div>
           </div>
           <DottedLine />
+          <div css={styleInfoSection}>
+            <div css={{ display: "flex", gap: "8px" }}>
+              <WalletRoundedIcon style={styleIcon} />
+              <div css={{ ...styleInfo }}>
+                예상 택시비 : {taxiFare.toLocaleString("ko-KR")}원
+              </div>
+            </div>
+          </div>
+          <DottedLine />
           <SideMenuButton type="share" onClick={onClikcShare} />
           <DottedLine />
           <SideMenuButton type="taxi" onClick={onClickCallTaxi} />

packages/web/src/components/ModalPopup/Body/BodyRoomSelection.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
@@ -146,6 +146,25 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => {
     onCall.current = false;
   }, [roomInfo?._id, history]);
 
+  const [taxiFare, setTaxiFare] = useState<number>(0);
+  const getTaxiFare = async () => {
+    await axios({
+      url: "/fare/getTaxiFare",
+      method: "get",
+      params: {
+        from: roomInfo.from._id.toString(),
+        to: roomInfo.to._id.toString(),
+        time: roomInfo.time,
+      },
+      onSuccess: (data) => setTaxiFare(data.fare),
+      onError: (status) => {},
+    });
+  };
+
+  useEffect(() => {
+    getTaxiFare();
+  }, []);
+
   const stylePlace = {
     width: "100%",
     display: "flex",
@@ -206,6 +225,22 @@ const BodyRoomSelection = ({ roomInfo }: BodyRoomSelectionProps) => {
             </InfoSection>
           </div>
         </div>
+        <InfoSection title="참여 시 예상 택시비" alignDirection="left">
+          <div css={{ display: "flex", justifyContent: "start" }}>
+            <p css={theme.font14}>{`${taxiFare.toLocaleString("ko-KR")}원 / ${
+              roomInfo?.part?.length +
+              (isAlreadyPart || isDepart || isRoomFull ? 0 : 1)
+            }명`}</p>
+            <p css={theme.font14_bold}>
+              &nbsp;
+              {`= 인당 ${Math.floor(
+                taxiFare /
+                  (roomInfo?.part?.length +
+                    (isAlreadyPart || isDepart || isRoomFull ? 0 : 1))
+              ).toLocaleString("ko-KR")}원`}
+            </p>
+          </div>
+        </InfoSection>
       </div>
       {isLogin || isRoomFull || isDepart ? (
         <Button

packages/web/src/components/ModalRoomOptions/TaxiFare.tsx

@@ -0,0 +1,46 @@
+import { memo } from "react";
+
+import WhiteContainer from "@/components/WhiteContainer";
+
+import theme from "@/tools/theme";
+
+import WalletRoundedIcon from "@mui/icons-material/WalletRounded";
+
+type FareProps = {
+  value: number;
+  roomLength: number;
+};
+
+const TaxiFare = (props: FareProps) => {
+  const style = {
+    display: "flex",
+    alignItems: "center",
+  };
+  const styleIcon = {
+    fontSize: "16px",
+    marginLeft: "15px",
+  };
+  const styleName: CSS = {
+    ...theme.font14,
+    margin: "0 8px 0 6px",
+    whiteSpace: "nowrap",
+  };
+  return (
+    <WhiteContainer css={{ padding: "9px" }}>
+      <div style={style}>
+        <WalletRoundedIcon style={styleIcon} />
+        <div css={{ ...styleName }}>
+          예상 최소 택시비 : {props.value.toLocaleString("ko-KR")}원 /{" "}
+          {props.roomLength}명 = {""}
+          <span css={theme.font14_bold}>
+            인당{" "}
+            {Math.floor(props.value / props.roomLength).toLocaleString("ko-KR")}
+            원
+          </span>{" "}
+        </div>
+      </div>
+    </WhiteContainer>
+  );
+};
+
+export default memo(TaxiFare);

packages/web/src/components/ModalRoomOptions/index.tsx

@@ -2,6 +2,14 @@ import OptionDate from "./Date";
 import OptionMaxPeople from "./MaxPeople";
 import OptionName from "./Name";
 import OptionPlace from "./Place";
+import TaxiFare from "./TaxiFare";
 import OptionTime from "./Time";
 
-export { OptionName, OptionPlace, OptionDate, OptionTime, OptionMaxPeople };
+export {
+  OptionName,
+  OptionPlace,
+  OptionDate,
+  OptionTime,
+  OptionMaxPeople,
+  TaxiFare,
+};

packages/web/src/pages/Addroom/index.tsx

@@ -19,6 +19,7 @@ import {
   OptionName,
   OptionPlace,
   OptionTime,
+  TaxiFare,
 } from "@/components/ModalRoomOptions";
 import Title from "@/components/Title";
 import WhiteContainerSuggestLogin from "@/components/WhiteContainer/WhiteContainerSuggestLogin";
@@ -68,6 +69,26 @@ const AddRoom = () => {
     useState<boolean>(false);
   //#endregion
 
+  const [taxiFare, setTaxiFare] = useState<number>(0);
+
+  const getTaxiFare = async () => {
+    await axios({
+      url: "/fare/getTaxiFare",
+      method: "get",
+      params: {
+        from: valuePlace[0].toString(),
+        to: valuePlace[1].toString(),
+        time: calculatedTime!.toISOString(),
+      },
+      onSuccess: (data) => setTaxiFare(data.fare),
+      onError: (status) => {},
+    });
+  };
+
+  useEffect(() => {
+    getTaxiFare();
+  }, [valuePlace, calculatedTime]);
+
   useEffect(() => {
     const expirationDate = new Date();
     expirationDate.setFullYear(expirationDate.getFullYear() + 10);
@@ -186,6 +207,7 @@ const AddRoom = () => {
               />
               <OptionTime value={valueTime} handler={setTime} page="add" />
               <OptionMaxPeople value={valueMaxPeople} handler={setMaxPeople} />
+              <TaxiFare value={taxiFare} roomLength={valueMaxPeople} />
               <Button
                 type="purple"
                 disabled={validatedMsg ? true : false}