feat: create config.ts to uniformly manage config

sparcs-kaist · Nov 3, 2023 · 5938f32 · 5938f32
1 parent fafdbd4
commit 5938f32
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 19 deletions.
diff --git a/src/components/Background/Background.animation.ts b/src/components/Background/Background.animation.ts
@@ -1,11 +1,11 @@
-const AnimationDuration = import.meta.env.VITE_ANIMATION_DURATION;
+import { ANIMATION_DURATION } from "@/config";
 
 export const backgroundFadeIn = {
   to: {
     opacity: 1,
   },
   config: {
-    duration: AnimationDuration,
+    duration: ANIMATION_DURATION,
   },
 };
 
@@ -14,6 +14,6 @@ export const backgroundFadeOut = {
     opacity: 0,
   },
   config: {
-    duration: AnimationDuration,
+    duration: ANIMATION_DURATION,
   },
 };
diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx
@@ -8,10 +8,9 @@ import { Info } from "@/components/Info";
 import { Background } from "@/components/Background";
 import { Qr } from "@/components/Qr";
 import { Logo } from "@/components/Logo";
+import { TRANSITION_INTERVAL } from "@/config";
 import style from "./Board.module.scss";
 
-const TransitionInterval = import.meta.env.VITE_TRANSITION_INTERVAL;
-
 export const Board = () => {
   const zaboList = useAppSelector((state: ZaboListState) => state.zaboList);
   const leftOverZaboLength = useAppSelector(
@@ -30,7 +29,7 @@ export const Board = () => {
     } else {
       dispatch(fetchZaboThunk());
     }
-  }, TransitionInterval);
+  }, TRANSITION_INTERVAL);
 
   return (
     <main className={style.board}>

diff --git a/src/components/Info/Info.animation.ts b/src/components/Info/Info.animation.ts
@@ -1,11 +1,11 @@
-const AnimationDuration = import.meta.env.VITE_ANIMATION_DURATION;
+import { ANIMATION_DURATION } from "@/config";
 
 export const infoFadeIn = {
   to: {
     opacity: 1,
   },
   config: {
-    duration: AnimationDuration,
+    duration: ANIMATION_DURATION,
   },
 };
 
@@ -14,6 +14,6 @@ export const infoFadeOut = {
     opacity: 0,
   },
   config: {
-    duration: AnimationDuration,
+    duration: ANIMATION_DURATION,
   },
 };
diff --git a/src/components/Qr/Qr.animation.ts b/src/components/Qr/Qr.animation.ts
@@ -1,11 +1,11 @@
-const AnimationDuration = import.meta.env.VITE_ANIMATION_DURATION;
+import { ANIMATION_DURATION } from "@/config";
 
 export const qrFadeIn = {
   to: {
     opacity: 1,
   },
   config: {
-    duration: AnimationDuration,
+    duration: ANIMATION_DURATION,
   },
 };
 
@@ -14,6 +14,6 @@ export const qrFadeOut = {
     opacity: 0,
   },
   config: {
-    duration: AnimationDuration,
+    duration: ANIMATION_DURATION,
   },
 };
diff --git a/src/components/Zabo/Zabo.animation.ts b/src/components/Zabo/Zabo.animation.ts
@@ -1,12 +1,12 @@
-const AnimationDuration = import.meta.env.VITE_ANIMATION_DURATION;
+import { ANIMATION_DURATION } from "@/config";
 
 export const zaboMoveToBefore = {
   to: {
     x: 3145,
     opacity: 0.5,
   },
   config: {
-    duration: AnimationDuration,
+    duration: ANIMATION_DURATION,
   },
 };
 
@@ -16,7 +16,7 @@ export const zaboMoveToCurrent = {
     opacity: 1,
   },
   config: {
-    duration: AnimationDuration,
+    duration: ANIMATION_DURATION,
   },
 };
 
@@ -26,6 +26,6 @@ export const zaboFadeOut = {
     x: 1731,
   },
   config: {
-    duration: AnimationDuration,
+    duration: ANIMATION_DURATION,
   },
 };
diff --git a/src/config.ts b/src/config.ts
@@ -0,0 +1,3 @@
+export const API_SERVER_URL = import.meta.env.VITE_API_SERVER_URL;
+export const ANIMATION_DURATION = import.meta.env.VITE_ANIMATION_DURATION;
+export const TRANSITION_INTERVAL = import.meta.env.VITE_TRANSITION_INTERVAL;
diff --git a/src/redux/zabos/fetchZaboThunk.ts b/src/redux/zabos/fetchZaboThunk.ts
@@ -2,9 +2,10 @@ import axios from "axios";
 import dayjs from "dayjs";
 import type { AppDispatch } from "@/redux/store";
 import { ZaboState, type ZaboJson } from "@/types";
+import { API_SERVER_URL } from "@/config";
 import { pushZabos } from "./zaboSlice";
 
-const ZABO_SHARE_URL = "".concat(import.meta.env.VITE_API_SERVER_URL, "s/");
+const ZABO_SHARE_URL = `${API_SERVER_URL}/s/`;
 
 export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
   // attach timestamp to image url to prevent browser cache

diff --git a/vite.config.ts b/vite.config.ts
@@ -4,13 +4,13 @@ import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
-  const TmpEnv = loadEnv(mode, process.cwd());
+  const tmpEnv = loadEnv(mode, process.cwd());
 
   return {
     plugins: [react(), tsconfigPaths()],
     server: {
       proxy: {
-        "/api": TmpEnv.VITE_API_SERVER_URL,
+        "/api": tmpEnv.VITE_API_SERVER_URL,
       },
     },
   };