Merge branch 'dev' into #610-bug-bump-heic2any-version-to-0.0.4

src/atoms/taxiLocations.ts

@@ -1,6 +1,8 @@
+import type { Location } from "types/location";
+
 import { atom } from "recoil";
 
-export type TaxiLocationsType = Array<any>;
+export type TaxiLocationsType = Array<Location>;
 
 const taxiLocationsAtom = atom<TaxiLocationsType>({
   key: "taxiLocationsAtom",

src/components/Button/ButtonShare.tsx

@@ -0,0 +1,46 @@
+import theme from "tools/theme";
+
+type ButtonShareProps = {
+  text: string;
+  icon: React.ReactNode;
+  background: string;
+  onClick?: () => void;
+};
+
+const ButtonShare = ({ text, icon, background, onClick }: ButtonShareProps) => (
+  <div
+    css={{
+      width: "45px",
+      cursor: "pointer",
+    }}
+    onClick={onClick}
+  >
+    <div
+      css={{
+        width: "45px",
+        height: "45px",
+        borderRadius: "6px",
+        backgroundColor: background,
+        boxShadow: theme.shadow_gray_button_inset,
+        color: theme.gray_text,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {icon}
+    </div>
+    <div
+      css={{
+        ...theme.font10,
+        color: theme.gray_text,
+        textAlign: "center",
+        paddingTop: "4px",
+      }}
+    >
+      {text}
+    </div>
+  </div>
+);
+
+export default ButtonShare;

src/components/Chat/Header/SideMenu.tsx

@@ -4,7 +4,11 @@ import { memo, useCallback, useState } from "react";
 import useIsTimeOver from "hooks/useIsTimeOver";
 
 import DottedLine from "components/DottedLine";
-import { ModalChatCancel, ModalRoomShare } from "components/ModalPopup";
+import {
+  ModalCallTaxi,
+  ModalChatCancel,
+  ModalRoomShare,
+} from "components/ModalPopup";
 import User from "components/User";
 
 import alertAtom from "atoms/alert";
@@ -70,6 +74,7 @@ const SideMenuButton = ({ type, onClick }: SideMenuButtonProps) => {
 const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
   const setAlert = useSetRecoilState(alertAtom);
   const [isOpenShare, setIsOpenShare] = useState<boolean>(false);
+  const [isOpenCallTaxi, setIsOpenCallTaxi] = useState<boolean>(false);
   const [isOpenCancel, setIsOpenCancel] = useState<boolean>(false);
   const isDepart = useIsTimeOver(dayServerToClient(roomInfo.time)); // 방 출발 여부
 
@@ -81,6 +86,7 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
         : setIsOpenCancel(true),
     [isDepart]
   );
+  const onClickCallTaxi = useCallback(() => setIsOpenCallTaxi(true), []);
 
   const styleBackground = {
     position: "absolute" as any,
@@ -184,9 +190,9 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
           <DottedLine />
           <SideMenuButton type="share" onClick={onClikcShare} />
           {/* <DottedLine />
-          <SideMenuButton type="report" />
+          <SideMenuButton type="report" /> */}
           <DottedLine />
-          <SideMenuButton type="taxi" /> */}
+          <SideMenuButton type="taxi" onClick={onClickCallTaxi} />
         </div>
         <DottedLine />
         <div css={styleNameSection} onClick={onClickCancel}>
@@ -219,6 +225,11 @@ const SideMenu = ({ roomInfo, isOpen, setIsOpen }: SideMenuProps) => {
         isOpen={isOpenCancel}
         onChangeIsOpen={setIsOpenCancel}
       />
+      <ModalCallTaxi
+        roomInfo={roomInfo}
+        isOpen={isOpenCallTaxi}
+        onChangeIsOpen={setIsOpenCallTaxi}
+      />
     </>
   );
 };

src/components/Link/LinkCallTaxi.tsx

@@ -0,0 +1,35 @@
+import type { Location } from "types/location";
+
+import taxiLocationsAtom from "atoms/taxiLocations";
+import { useRecoilValue } from "recoil";
+
+type LinkCallTaxiProps = {
+  children: React.ReactNode;
+  type: "kakaotaxi" | "tmoneyonda" | "ut";
+  from: Location;
+  to: Location;
+};
+
+const LinkCallTaxi = ({ children, type, from, to }: LinkCallTaxiProps) => {
+  const taxiLocations = useRecoilValue(taxiLocationsAtom);
+  const origin = taxiLocations.find((loc) => loc._id === from._id);
+  const dest = taxiLocations.find((loc) => loc._id === to._id);
+  const deeplink = (() => {
+    switch (type) {
+      case "kakaotaxi":
+        return `kakaot://taxi/set?dest_lng=${dest?.longitude}&dest_lat=${dest?.latitude}&origin_lng=${origin?.longitude}&origin_lat=${origin?.latitude}`;
+      case "tmoneyonda":
+        return "tmoneyonda://main";
+      case "ut":
+        return `uber://?action=setPickup&client_id=a&pickup[formatted_address]=${origin?.koName}&pickup[latitude]=${origin?.latitude}&pickup[longitude]=${origin?.longitude}&dropoff[formatted_address]=${dest?.koName}&dropoff[latitude]=${dest?.latitude}&dropoff[longitude]=${dest?.longitude}`;
+    }
+  })();
+
+  return (
+    <a href={deeplink} css={{ textDecoration: "none" }}>
+      {children}
+    </a>
+  );
+};
+
+export default LinkCallTaxi;

src/components/ModalPopup/Body/BodyCallTaxi.tsx

@@ -0,0 +1,98 @@
+import ButtonShare from "components/Button/ButtonShare";
+import DottedLine from "components/DottedLine";
+import LinkCallTaxi from "components/Link/LinkCallTaxi";
+
+import theme from "tools/theme";
+
+import LocationOnRoundedIcon from "@mui/icons-material/LocationOnRounded";
+import { ReactComponent as KakaoTaxiLogo } from "static/assets/KakaotTaxiLogo.svg";
+import TmoneyOndaLogo from "static/assets/TmoneyOndaLogo.png";
+import { ReactComponent as UTLogo } from "static/assets/UTLogo.svg";
+
+export type BodyCallTaxiProps = {
+  roomInfo: Room;
+  height?: number;
+};
+
+const BodyCallTaxi = ({ roomInfo, height }: BodyCallTaxiProps) => {
+  const styleWrapper = height
+    ? {
+        height,
+        display: "flex",
+        flexDirection: "column" as any,
+      }
+    : {};
+  const styleGuide = {
+    ...theme.font12,
+    color: theme.gray_text,
+    margin: "0 8px 12px",
+  };
+
+  const styleButtonSection = {
+    display: "flex",
+    justifyContent: "center",
+    gap: "10px",
+    margin: "12px 0px 0",
+  };
+
+  const styleIcon = {
+    width: "16px",
+    height: "16px",
+    fill: theme.gray_text,
+  };
+
+  const styleInfo = {
+    display: "flex",
+    gap: "8px",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: "12px",
+  };
+
+  return (
+    <div css={styleWrapper}>
+      <div css={styleGuide}>
+        출발지와 도착지가 이미 설정된 상태로 택시 호출 앱을 실행할 수 있습니다.
+        동승 인원과 출발지에서 모였다면, 버튼을 눌러 택시를 호출하세요.
+      </div>
+      <div css={styleInfo}>
+        <LocationOnRoundedIcon style={styleIcon} />
+        <div css={{ color: theme.gray_text, ...theme.font14_bold }}>
+          {roomInfo.from?.koName}&nbsp; → &nbsp;{roomInfo.to?.koName}
+        </div>
+      </div>
+      <DottedLine />
+      <div css={{ flexGrow: 1 }} />
+      <div css={styleButtonSection}>
+        <LinkCallTaxi type="kakaotaxi" from={roomInfo.from} to={roomInfo.to}>
+          <ButtonShare
+            text="카카오택시"
+            icon={<KakaoTaxiLogo css={{ width: "22px" }} />}
+            background="#292140"
+          />
+        </LinkCallTaxi>
+        <LinkCallTaxi type="ut" from={roomInfo.from} to={roomInfo.to}>
+          <ButtonShare
+            text="우티"
+            icon={<UTLogo css={{ width: "22px" }} />}
+            background="#000000"
+          />
+        </LinkCallTaxi>
+        <LinkCallTaxi type="tmoneyonda" from={roomInfo.from} to={roomInfo.to}>
+          <ButtonShare
+            text="티머니온다"
+            icon={
+              <img
+                src={TmoneyOndaLogo}
+                css={{ width: "45px", borderRadius: "6px" }}
+              />
+            }
+            background="#000000"
+          />
+        </LinkCallTaxi>
+      </div>
+    </div>
+  );
+};
+
+export default BodyCallTaxi;

src/components/ModalPopup/Body/BodyRoomShare.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import QRCode from "react-qr-code";
 
+import ButtonShare from "components/Button/ButtonShare";
 import DottedLine from "components/DottedLine";
 import LinkCopy from "components/Link/LinkCopy";
 import LinkKakaotalkShare from "components/Link/LinkKakaotalkShare";
@@ -15,53 +16,11 @@ import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { ogServer } from "loadenv";
 import { ReactComponent as KakaoTalkLogo } from "static/assets/KakaoTalkLogo.svg";
 
-type ButtonShareProps = {
-  text: string;
-  icon: React.ReactNode;
-  background: string;
-  onClick?: () => void;
-};
 export type BodyRoomShareProps = {
-  roomInfo: any; // fixme
+  roomInfo: Room;
   height?: number;
 };
 
-const ButtonShare = ({ text, icon, background, onClick }: ButtonShareProps) => (
-  <div
-    css={{
-      width: "45px",
-      cursor: "pointer",
-    }}
-    onClick={onClick}
-  >
-    <div
-      css={{
-        width: "45px",
-        height: "45px",
-        borderRadius: "6px",
-        backgroundColor: background,
-        boxShadow: theme.shadow_gray_button_inset,
-        color: theme.gray_text,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      {icon}
-    </div>
-    <div
-      css={{
-        ...theme.font10,
-        color: theme.gray_text,
-        textAlign: "center",
-        paddingTop: "4px",
-      }}
-    >
-      {text}
-    </div>
-  </div>
-);
-
 const BodyRoomShare = ({ roomInfo, height }: BodyRoomShareProps) => {
   const { i18n } = useTranslation();
   const { origin } = window.location;

src/components/ModalPopup/ModalCallTaxi.tsx

@@ -0,0 +1,48 @@
+import Modal from "components/Modal";
+
+import BodyCallTaxi from "./Body/BodyCallTaxi";
+import { BodyRoomShareProps } from "./Body/BodyRoomShare";
+
+import theme from "tools/theme";
+
+import LocalTaxiRoundedIcon from "@mui/icons-material/LocalTaxiRounded";
+
+type ModalCallTaxiProps = {
+  isOpen: boolean;
+  onChangeIsOpen?: (isOpen: boolean) => void;
+  roomInfo: BodyRoomShareProps["roomInfo"];
+};
+
+const ModalCallTaxi = ({
+  isOpen,
+  onChangeIsOpen,
+  roomInfo,
+}: ModalCallTaxiProps) => {
+  const styleTitle = {
+    ...theme.font18,
+    display: "flex",
+    alignItems: "center",
+    margin: "0 8px 12px",
+  };
+  const styleIcon = {
+    fontSize: "21px",
+    margin: "0 4px 0 0",
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onChangeIsOpen={onChangeIsOpen}
+      padding="16px 12px 12px"
+    >
+      <div css={styleTitle}>
+        <LocalTaxiRoundedIcon style={styleIcon} />
+        택시 호출하기
+      </div>
+      <BodyCallTaxi roomInfo={roomInfo} />
+    </Modal>
+  );
+};
+
+export default ModalCallTaxi;
+export { ModalCallTaxi };

src/components/ModalPopup/index.tsx

@@ -9,3 +9,4 @@ export { default as ModalReport } from "./ModalReport";
 export { default as ModalRoomSelection } from "./ModalRoomSelection";
 export { default as ModalRoomShare } from "./ModalRoomShare";
 export { default as ModalTerms } from "./ModalTerms";
+export { default as ModalCallTaxi } from "./ModalCallTaxi";