fix: cache issue with mock data

sparcs-kaist · Oct 25, 2023 · a724893 · a724893
1 parent 40c262b
commit a724893
Show file tree

Hide file tree

Showing 14 changed files with 167 additions and 44 deletions.
diff --git a/src/components/Background/Background.animation.ts b/src/components/Background/Background.animation.ts
@@ -0,0 +1,17 @@
+export const backgroundFadeIn = {
+  to: {
+    opacity: 1,
+  },
+  config: {
+    duration: 1500,
+  },
+};
+
+export const backgroundFadeOut = {
+  to: {
+    opacity: 0,
+  },
+  config: {
+    duration: 1500,
+  },
+};
diff --git a/src/components/Background/Background.module.scss b/src/components/Background/Background.module.scss
@@ -0,0 +1,31 @@
+@import "src/styles";
+
+.background {
+    z-index: -1;
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    main, div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    main {
+        z-index: 0;
+        background: linear-gradient(0deg, rgba(0, 2, 15, 0.40) 0%, rgba(0, 2, 15, 0.40) 100%), radial-gradient(169.2% 55.43% at 63.35% 53.43%, rgba(50, 57, 96, 0.25) 9.89%, rgba(52, 60, 103, 0.75) 100%);
+        backdrop-filter: blur(125px);
+    }
+
+    div {
+        z-index: -1;
+        background-position: center;
+        background-size: cover;
+      }
+}
diff --git a/src/components/Background/Background.tsx b/src/components/Background/Background.tsx
@@ -0,0 +1,30 @@
+import { type BackgroundProps, ZaboState } from "@/types";
+import { animated, useSpring } from "@react-spring/web";
+import { useEffect } from "react";
+import { backgroundFadeIn, backgroundFadeOut } from "./Background.animation";
+import style from "./Background.module.scss";
+
+export const Background = (backgroundProps: BackgroundProps) => {
+  const { imageUrl, state } = backgroundProps;
+
+  const [springs, api] = useSpring(() => ({
+    from: {
+      opacity: 0,
+    },
+  }));
+
+  useEffect(() => {
+    if (state === ZaboState.CURRENT_STATE) {
+      api.start(backgroundFadeIn);
+    } else if (state === ZaboState.SHOWN_STATE) {
+      api.start(backgroundFadeOut);
+    }
+  });
+
+  return (
+    <animated.div className={style.background} style={{ ...springs }}>
+      <main />
+      <div style={{ backgroundImage: `url(${imageUrl})` }} />
+    </animated.div>
+  );
+};
diff --git a/src/components/Background/index.ts b/src/components/Background/index.ts
@@ -0,0 +1 @@
+export * from "./Background";
diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx
@@ -1,45 +1,64 @@
 import React, { useEffect } from "react";
+import { useInterval } from "@/hooks";
 import { moveToNext, type ZaboListState } from "@/redux/zabos/zaboSlice";
 import { fetchZaboThunk } from "@/redux/zabos/fetchZaboThunk";
 import { useAppSelector, useAppDispatch, type ZaboJson } from "@/types";
 import { Zabo } from "@/components/Zabo";
 import { Info } from "@/components/Info";
+import { Background } from "@/components/Background";
 import { Qr } from "@/components/Qr";
 import { Logo } from "@/components/Logo";
 import style from "./Board.module.scss";
 
 export const Board = () => {
   const zaboList = useAppSelector((state: ZaboListState) => state.zaboList);
+  const leftOverZaboLength = useAppSelector(
+    (state: ZaboListState) => state.leftoverLength,
+  );
 
   const dispatch = useAppDispatch();
 
   useEffect(() => {
     dispatch(fetchZaboThunk());
-    setTimeout(() => {
-      dispatch(moveToNext());
-    }, 3000);
   }, []);
 
+  useInterval(() => {
+    if (leftOverZaboLength > 0) {
+      dispatch(moveToNext());
+    } else {
+      dispatch(fetchZaboThunk());
+    }
+  }, 3000);
+
   return (
     <main className={style.board}>
       <Logo />
       {zaboList.map((zabo: ZaboJson) => (
-        <>
+        <div key={zabo.imageUrl}>
+          <Background
+            key={`${zabo.imageUrl}back`}
+            imageUrl={zabo.imageUrl}
+            state={zabo.state}
+          />
           <Info
-            key={zabo.title}
+            key={`${zabo.imageUrl}info`}
             title={zabo.title}
             description={zabo.description}
             date={zabo.date}
             state={zabo.state}
           />
-          <Qr key={zabo.title} qrUrl={zabo.qrUrl} state={zabo.state} />
+          <Qr
+            key={`${zabo.imageUrl}qr`}
+            qrUrl={zabo.qrUrl}
+            state={zabo.state}
+          />
           <Zabo
-            key={zabo.title}
+            key={`${zabo.imageUrl}zabo`}
             title={zabo.title}
             imageUrl={zabo.imageUrl}
             state={zabo.state}
           />
-        </>
+        </div>
       ))}
     </main>
   );

diff --git a/src/components/Info/Info.module.scss b/src/components/Info/Info.module.scss
@@ -5,7 +5,7 @@
     display: flex;
     flex-direction: column;
     gap: 28px;
-    color: black;
+    color: $white;
     position: absolute;
     left: 100px;
     top: 300px;

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useInterval";
diff --git a/src/hooks/useInterval.ts b/src/hooks/useInterval.ts
@@ -0,0 +1,18 @@
+import { useEffect, useRef } from "react";
+
+export const useInterval = (callback: () => void, delay?: number | null) => {
+  const savedCallback = useRef<() => void>(() => {});
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+
+  useEffect(() => {
+    if (delay !== null) {
+      const interval = setInterval(() => savedCallback.current(), delay || 0);
+      return () => clearInterval(interval);
+    }
+
+    return undefined;
+  }, [delay]);
+};
diff --git a/src/redux/zabos/fetchZaboThunk.ts b/src/redux/zabos/fetchZaboThunk.ts
@@ -5,69 +5,69 @@ import { pushZabos } from "./zaboSlice";
 export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
   await fetch("http://localhost:5175");
 
+  const currentDate = new Date();
+  const timestamp = currentDate.getTime();
+
   dispatch(
     pushZabos([
       {
-        title: "자보",
+        title: "33333333333",
         description: "설명",
         date: "date",
         qrUrl: "https://zabo.sparcs.org/s/86f104",
-        imageUrl:
-          "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471",
+        imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
+          timestamp + 10
+        }`,
         state: ZaboState.PENDING_STATE,
       },
       {
-        title: "다음자보자보",
+        title: "444444444444",
         description: "다음자보설명",
         date: "다음date",
         qrUrl: "https://zabo.sparcs.org/s/86f104",
-        imageUrl:
-          "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421694355488272",
+        imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
+          timestamp + 22
+        }`,
         state: ZaboState.PENDING_STATE,
       },
       {
-        title: "다음자보자보",
+        title: "555555555555",
         description: "다음자보설명",
         date: "다음date",
         qrUrl: "https://zabo.sparcs.org/s/17e13c",
-        imageUrl:
-          "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136491694517783550",
+        imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
+          timestamp + 33
+        }`,
         state: ZaboState.PENDING_STATE,
       },
       {
-        title: "다음자보자보",
-        description: "다음자보설명",
-        date: "다음date",
-        qrUrl: "https://zabo.sparcs.org/s/86f104",
-        imageUrl:
-          "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421694355488272",
-        state: ZaboState.PENDING_STATE,
-      },
-      {
-        title: "다음자보자보",
+        title: "666666",
         description: "다음자보설명",
         date: "다음date",
         qrUrl: "https://zabo.sparcs.org/s/17e13c",
-        imageUrl:
-          "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136491694517783550",
+        imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
+          timestamp + 44
+        }`,
         state: ZaboState.PENDING_STATE,
       },
       {
-        title: "다음자보자보",
+        title: "777777777",
         description: "다음자보설명",
         date: "다음date",
-        qrUrl: "https://zabo.sparcs.org/s/86f104",
-        imageUrl:
-          "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421694355488272",
+        qrUrl: "https://zabo.sparcs.org/s/17e13c",
+        imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
+          timestamp + 55
+        }`,
         state: ZaboState.PENDING_STATE,
       },
       {
-        title: "다음자보자보",
+        title: "888888",
         description: "다음자보설명",
         date: "다음date",
         qrUrl: "https://zabo.sparcs.org/s/17e13c",
-        imageUrl:
-          "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136491694517783550",
+        imageUrl: `https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=${
+          timestamp + 66
+        }`,
         state: ZaboState.PENDING_STATE,
       },
     ]),

diff --git a/src/redux/zabos/zaboSlice.ts b/src/redux/zabos/zaboSlice.ts
@@ -13,7 +13,7 @@ const initialState: ZaboListState = {
       description: "Z111111111",
       date: "SOON",
       imageUrl:
-        "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471",
+        "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=1sdf23tg",
       qrUrl: "https://zabo.sparcs.org/s/86f104",
       state: ZaboState.CURRENT_STATE,
     },
@@ -22,7 +22,7 @@ const initialState: ZaboListState = {
       description: "Z2222222",
       date: "SOON",
       imageUrl:
-        "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471",
+        "https://sparcs-kaist-zabo-prod.s3.ap-northeast-2.amazonaws.com/zabo/zabo-136421683085229471?a=1wef3gfwe",
       qrUrl: "https://zabo.sparcs.org/s/86f104",
       state: ZaboState.BEFORE_STATE,
     },
@@ -36,7 +36,7 @@ const zaboSlice = createSlice({
   reducers: {
     pushZabos: (state, action) => {
       // if there are plenty of leftover zabos, we do not dispatch
-      if (state.leftoverLength > 50) {
+      if (state.leftoverLength > 200) {
         return;
       }
 

diff --git a/src/types/BackgroundProps.ts b/src/types/BackgroundProps.ts
@@ -0,0 +1,6 @@
+import type { ZaboState } from "./ZaboState";
+
+export type BackgroundProps = {
+  imageUrl: string;
+  state: ZaboState;
+};
diff --git a/src/types/ZaboJson.ts b/src/types/ZaboJson.ts
@@ -6,6 +6,5 @@ export type ZaboJson = {
   date: string;
   qrUrl: string;
   imageUrl: string;
-  // css animation starts if trigger is set to true
   state: ZaboState;
 };
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -4,3 +4,4 @@ export * from "./ZaboProps";
 export * from "./hooks";
 export * from "./ZaboJson";
 export * from "./ZaboState";
+export * from "./BackgroundProps";
diff --git a/yarn.lock b/yarn.lock
@@ -498,9 +498,9 @@
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^18.2.15":
-  version "18.2.31"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.31.tgz#74ae2630e4aa9af599584157abd3b95d96fb9b40"
-  integrity sha512-c2UnPv548q+5DFh03y8lEDeMfDwBn9G3dRwfkrxQMo/dOtRHUUO57k6pHvBIfH/VF4Nh+98mZ5aaSe+2echD5g==
+  version "18.2.32"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.32.tgz#7ec787730c45ee9a3c0ed150b19e95c31fe4608a"
+  integrity sha512-F0FVIZQ1x5Gxy/VYJb7XcWvCcHR28Sjwt1dXLspdIatfPq1MVACfnBDwKe6ANLxQ64riIJooXClpUR6oxTiepg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"