Merge pull request #587 from sparcs-kaist/dev

Main branch update from Dev branch

src/components/ModalRoomOptions/FlipButton.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+
+import hoverEventSet from "tools/hoverEventSet";
+import theme from "tools/theme";
+
+import SyncAltRoundedIcon from "@mui/icons-material/SyncAltRounded";
+
+type FlipButtonProps = {
+  onClick: () => void;
+  disabled: boolean;
+};
+
+const FlipButton = (props: FlipButtonProps) => {
+  const [isHover, setHover] = useState(false);
+  const [isClicked, setClicked] = useState(false);
+
+  return (
+    <div
+      css={{
+        position: "absolute",
+        width: "30px",
+        height: "30px",
+        top: "calc(50% - 15px)",
+        right: "calc(50% - 15px)",
+        borderRadius: "50%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        ...theme.cursor(props.disabled),
+        backgroundColor: props.disabled
+          ? theme.purple_disabled
+          : isHover
+          ? theme.purple_dark
+          : theme.purple,
+        color: theme.white,
+        boxShadow:
+          isClicked && !props.disabled ? theme.shadow_clicked : theme.shadow,
+      }}
+      onClick={props.disabled ? undefined : props.onClick}
+      {...hoverEventSet(setHover, setClicked)}
+    >
+      <SyncAltRoundedIcon
+        style={{
+          color: theme.white,
+          fontSize: "20px",
+        }}
+      />
+    </div>
+  );
+};
+
+export default FlipButton;

src/components/ModalRoomOptions/Place.jsx

@@ -1,12 +1,13 @@
 import PropTypes from "prop-types";
-import { memo, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 
 import { useValueRecoilState } from "hooks/useFetchRecoilState";
 
 import Button from "components/Button";
 import DottedLine from "components/DottedLine";
 import MiniCircle from "components/MiniCircle";
 import Modal from "components/Modal";
+import FlipButton from "components/ModalRoomOptions/FlipButton";
 import WhiteContainer from "components/WhiteContainer";
 
 import Picker from "./Picker";
@@ -20,6 +21,12 @@ const PopupInput = (props) => {
     place: props.value ?? props.placeOptions?.[0]?.name ?? "",
   });
 
+  useEffect(() => {
+    setValue({
+      place: props.value ?? props.placeOptions?.[0]?.name ?? "",
+    });
+  }, [props.value]);
+
   const optionGroup = {
     place: props.placeOptions.map((x) => {
       return x.name;
@@ -178,6 +185,10 @@ const Place = (props) => {
           type="from"
         />
         <DottedLine direction="column" />
+        <FlipButton
+          onClick={() => props.handler([props.value[1], props.value[0]])}
+          disabled={!props.value[0] && !props.value[1]}
+        />
         <PlaceElement
           value={getPlaceName(props.value[1])}
           onClick={() => setPopup2(true)}

src/components/Skeleton/index.tsx

@@ -105,7 +105,8 @@ const Skeleton = ({ children }: SkeletonProps) => {
   if (
     pathname.startsWith("/login") ||
     pathname.startsWith("/logout") ||
-    pathname.startsWith("/chatting")
+    pathname.startsWith("/chatting") ||
+    pathname.startsWith("/invite")
   ) {
     return (
       <Container>

src/pages/Home/RedirectToHome.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from "react-router-dom";
+
+const RedirectToHome = () => <Redirect to="/home" />;
+
+export default RedirectToHome;

src/pages/Home/index.tsx

@@ -1,28 +1,16 @@
-import { useEffect } from "react";
-import { useHistory, useLocation, useParams } from "react-router-dom";
+import { useHistory, useParams } from "react-router-dom";
 
 import Footer from "components/Footer";
 import { ModalPrivacyPolicy } from "components/ModalPopup";
 
 import InfoSection from "./InfoSection";
 import RoomSection from "./RoomSection";
 
-import { getDynamicLink } from "tools/trans";
-
 const Home = () => {
   const history = useHistory();
-  const { pathname } = useLocation();
   const { roomId: _roomId } = useParams<{ roomId: string }>();
   const roomId = _roomId === "privacyPolicy" ? null : _roomId;
 
-  useEffect(() => {
-    if (pathname === "/") history.replace("/home");
-    if (pathname.startsWith("/invite") && roomId) {
-      // dynamic link로 웹에서 앱으로 이동가능할 시 이동합니다.
-      window.location.href = getDynamicLink(`/home/${roomId}`);
-    }
-  }, [roomId, pathname]);
-
   const onChangeIsOpenPrivacyPolicy = () => history.replace("/home");
 
   return (

src/pages/Invite/index.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+import Loading from "components/Loading";
+
+import { getDynamicLink } from "tools/trans";
+
+const Invite = () => {
+  const { roomId } = useParams<{ roomId: string }>();
+
+  useEffect(() => {
+    // dynamic link로 웹에서 앱으로 이동가능할 시 이동합니다.
+    window.location.href = getDynamicLink(`/home/${roomId}`);
+  }, []);
+
+  return <Loading center />;
+};
+
+export default Invite;

src/routes.ts

@@ -13,7 +13,17 @@ const routes = [
     exact: true,
   },
   {
-    path: ["/", "/home", "/home/:roomId", "/invite/:roomId"],
+    path: "/",
+    component: lazy(() => import("pages/Home/RedirectToHome")),
+    exact: true,
+  },
+  {
+    path: "/invite/:roomId",
+    component: lazy(() => import("pages/Invite")),
+    exact: true,
+  },
+  {
+    path: ["/home", "/home/:roomId"],
     component: lazy(() => import("pages/Home")),
     exact: true,
   },