Merge branch 'dev' into #592.2-nginxdockerfile-with-invite

package.json

@@ -20,7 +20,7 @@
     "dayjs": "^1.11.7",
     "dotenv": "^16.0.0",
     "firebase": "^9.15.0",
-    "heic2any": "^0.0.3",
+    "heic2any": "^0.0.4",
     "i18next": "^22.0.2",
     "i18next-browser-languagedetector": "^7.0.1",
     "moment": "^2.29.3",
@@ -88,4 +88,4 @@
   "resolutions": {
     "@types/react": "^17.0.2"
   }
-}
+}

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;