Add: room diff calculation

packages/web/src/components/Room/AnimatedRoom.tsx

@@ -0,0 +1,65 @@
+import { keyframes } from "@emotion/react";
+
+import Room from ".";
+
+type AnimatedRoomProps = {
+  data: any;
+  selected?: boolean;
+  onClick?: () => void;
+  marginTop?: string;
+  marginBottom?: string;
+  theme?: string;
+  type?: "addition" | "deletion";
+};
+
+const growHeight = keyframes`
+  from {
+    height: 0px;
+  }
+  to {
+    height: 125px;
+  }
+`;
+
+const shrinkHeight = keyframes`
+  from {
+    height: 125px;
+  }
+  to {
+    height: 0px;
+  }
+`;
+
+const AnimatedRoom = ({
+  data,
+  selected = false,
+  onClick = () => {},
+  marginTop = "0px",
+  marginBottom = "0px",
+  theme,
+  type,
+}: AnimatedRoomProps) => {
+  const props = {
+    data,
+    selected,
+    onClick,
+    marginTop,
+    marginBottom,
+    theme,
+    type,
+  };
+
+  return !data.animating ? (
+    <Room {...props} />
+  ) : (
+    <div
+      css={{
+        animation: `${
+          type === "addition" ? growHeight : shrinkHeight
+        } 0.5s forwards`,
+      }}
+    ></div>
+  );
+};
+
+export default AnimatedRoom;

packages/web/src/hooks/useRoomListAnimationState.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from "react";
+
+const useRoomListAnimationState = (rooms: Nullable<Array<any>>) => {
+  const [state, setState] = useState<
+    "default" | "additionAnimate" | "addition" | "deletionAnimate" | "deletion"
+  >("default");
+
+  const [localRooms, setLocalRooms] = useState(rooms);
+
+  const animateDeletion = () => {
+    const deletionRooms = localRooms?.map((localRoom) => {
+      if (!rooms?.find((room) => room._id === localRoom._id)) {
+        return { ...localRoom, animating: true, type: "deletion" };
+      }
+      return localRoom;
+    });
+    setLocalRooms(deletionRooms);
+    const timer = setTimeout(() => {
+      setState("deletion");
+    }, 500);
+
+    return () => clearTimeout(timer);
+  };
+
+  const deletion = () => {
+    setLocalRooms(localRooms?.filter((room) => room.type !== "deletion"));
+    setState("additionAnimate");
+  };
+
+  const animateAddition = () => {
+    let additionRooms = rooms?.map((room, index) => {
+      if (!localRooms?.find((localRoom) => localRoom._id === room._id)) {
+        return { ...room, animating: true, type: "addition" };
+      }
+      return room;
+    });
+    setLocalRooms(additionRooms);
+    const timer = setTimeout(() => {
+      setState("addition");
+    }, 500);
+    return () => clearTimeout(timer);
+  };
+
+  const addition = () => {
+    setLocalRooms(rooms);
+    setState("default");
+  };
+
+  useEffect(() => {
+    if (rooms && localRooms?.length && rooms.length !== localRooms.length) {
+      setState("deletionAnimate");
+    } else {
+      setLocalRooms(rooms);
+    }
+  }, [rooms]);
+
+  useEffect(() => {
+    switch (state) {
+      case "deletionAnimate":
+        animateDeletion();
+        break;
+      case "deletion":
+        deletion();
+        break;
+      case "additionAnimate":
+        animateAddition();
+        break;
+      case "addition":
+        addition();
+        break;
+      default:
+        break;
+    }
+  }, [state]);
+
+  return { localRooms, state };
+};
+
+export default useRoomListAnimationState;

packages/web/src/hooks/useTaxiAPI/useSWR.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect } from "react";
+import useSWR from "swr";
+
+import useAxios from "./useAxios";
+
+type Method = "get" | "post";
+
+const wrapUseSWR =
+  (method: Method) =>
+  (
+    url: string,
+    requestData?: any,
+    dep?: [any],
+    config?: any
+  ): [any, any, boolean] => {
+    const axios = useAxios();
+    const fetcher = useCallback(
+      (url: string) => {
+        return axios({
+          url,
+          method,
+          data: requestData,
+        }).then((res) => res.data);
+      },
+      [JSON.stringify(requestData)]
+    );
+
+    const { data, error, isLoading, mutate } = useSWR(url, fetcher, config);
+
+    useEffect(() => {
+      if (dep) {
+        mutate();
+      }
+    }, [dep]);
+
+    return [error, data, isLoading];
+  };
+
+export default {
+  get: wrapUseSWR("get"),
+  post: wrapUseSWR("post"),
+};

packages/web/src/pages/Home/NewRoom.tsx

@@ -0,0 +1,47 @@
+import { keyframes } from "@emotion/react";
+import { useEffect, useState } from "react";
+
+import Room from "@/components/Room";
+
+const DiffRoom = (props: any) => {
+  const [animating, setAnimating] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnimating(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const growHeight = keyframes`
+  from {
+    height: 0px;
+  }
+  to {
+    height: 125px;
+  }
+  `;
+
+  const shrinkHeight = keyframes`
+  from {
+    height: 125px;
+  }
+  to {
+    height: 0px;
+  }
+  `;
+
+  const animation = props.type === "addition" ? growHeight : shrinkHeight;
+
+  return animating ? (
+    <div
+      css={{
+        animation: `${animation} 0.5s forwards`,
+      }}
+    ></div>
+  ) : props.type === "addition" ? (
+    <Room data={props.room} marginBottom={props.marginBottom} />
+  ) : null;
+};
+
+export default DiffRoom;

packages/web/src/pages/Home/RoomList.tsx

@@ -1,10 +1,11 @@
 import { Link } from "react-router-dom";
 
 import usePageFromSearchParams from "@/hooks/usePageFromSearchParams";
+import useRoomListAnimationState from "@/hooks/useRoomListAnimationState";
 
 import Empty from "@/components/Empty";
 import Pagination, { PAGE_MAX_ITEMS } from "@/components/Pagination";
-import Room from "@/components/Room";
+import AnimatedRoom from "@/components/Room/AnimatedRoom";
 
 type RoomListProps = {
   rooms: Nullable<Array<any>>;
@@ -13,12 +14,13 @@ type RoomListProps = {
 const RoomList = (props: RoomListProps) => {
   const totalPages = Math.ceil((props.rooms ?? []).length / PAGE_MAX_ITEMS);
   const currentPage = usePageFromSearchParams(totalPages);
+  const { localRooms } = useRoomListAnimationState(props.rooms);
 
   return (
     <>
-      {props.rooms?.length ? (
+      {localRooms?.length ? (
         <>
-          {props.rooms
+          {localRooms
             ?.slice(
               PAGE_MAX_ITEMS * (currentPage - 1),
               PAGE_MAX_ITEMS * currentPage
@@ -30,10 +32,14 @@ const RoomList = (props: RoomListProps) => {
                 replace
                 style={{ textDecoration: "none" }}
               >
-                <Room data={room} marginBottom="15px" />
+                <AnimatedRoom
+                  data={room}
+                  marginBottom="15px"
+                  type={room.type}
+                />
               </Link>
             ))}
-          {props.rooms.length > PAGE_MAX_ITEMS && (
+          {localRooms.length > PAGE_MAX_ITEMS && (
             <Pagination
               totalPages={totalPages}
               currentPage={currentPage}

packages/web/src/pages/Home/RoomSection.tsx

@@ -47,9 +47,9 @@ const RoomSection = ({ roomId }: RoomSectionProps) => {
 
   const [roomInfo, setRoomInfo] = useState<Nullable<any>>(null);
 
-  // 5분 간격으로 allRoms(요일 별 출발하는 방)을 갱신합니다.
+  // 10초 간격으로 allRoms(요일 별 출발하는 방)을 갱신합니다.
   useEffect(() => {
-    const interval = setInterval(fetchAllRooms, 1000 * 60 * 5);
+    const interval = setInterval(fetchAllRooms, 1000 * 10);
     return () => clearInterval(interval);
   }, []);