feat: change all config values to vite env

sparcs-kaist · Nov 3, 2023 · a827b15 · a827b15
1 parent e1d3cd7
commit a827b15
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 24 deletions.
diff --git a/.env.example b/.env.example
@@ -1 +1,4 @@
-API_SERVER_URL=
+VITE_API_SERVER_URL=
+VITE_ANIMATION_DURATION=
+VITE_TRANSITION_INTERVAL=
+VITE_ZABO_SHARE_URL=
diff --git a/src/components/Background/Background.animation.ts b/src/components/Background/Background.animation.ts
@@ -1,4 +1,4 @@
-import { AnimationDuration } from "@/config";
+const AnimationDuration = import.meta.env.VITE_ANIMATION_DURATION;
 
 export const backgroundFadeIn = {
   to: {

diff --git a/src/components/Board/Board.tsx b/src/components/Board/Board.tsx
@@ -8,9 +8,10 @@ import { Info } from "@/components/Info";
 import { Background } from "@/components/Background";
 import { Qr } from "@/components/Qr";
 import { Logo } from "@/components/Logo";
-import { TransitionInterval } 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(

diff --git a/src/components/Info/Info.animation.ts b/src/components/Info/Info.animation.ts
@@ -1,4 +1,4 @@
-import { AnimationDuration } from "@/config";
+const AnimationDuration = import.meta.env.VITE_ANIMATION_DURATION;
 
 export const infoFadeIn = {
   to: {

diff --git a/src/components/Qr/Qr.animation.ts b/src/components/Qr/Qr.animation.ts
@@ -1,4 +1,4 @@
-import { AnimationDuration } from "@/config";
+const AnimationDuration = import.meta.env.VITE_ANIMATION_DURATION;
 
 export const qrFadeIn = {
   to: {

diff --git a/src/components/Zabo/Zabo.animation.ts b/src/components/Zabo/Zabo.animation.ts
@@ -1,9 +1,9 @@
-import { AnimationDuration } from "@/config";
+const AnimationDuration = import.meta.env.VITE_ANIMATION_DURATION;
 
 export const zaboMoveToBefore = {
   to: {
     x: 3145,
-    opacity: 1,
+    opacity: 0.5,
   },
   config: {
     duration: AnimationDuration,

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 { ZABO_SHARE_BASE_URL } from "@/config";
 import { pushZabos } from "./zaboSlice";
 
+const ZABO_SHARE_URL = import.meta.env.VITE_ZABO_SHARE_URL;
+
 export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
   // attach timestamp to image url to prevent browser cache
   // this leads to animation crash
@@ -19,7 +20,7 @@ export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
   // important thing is that, we have to set lastSeen params to get zabos after lastSeen
   // so we can not do 5 requests in parallel. it should be sequential
   let zabosData: ZaboJson[] = [];
-  for (let i = 0; i < 1; i += 1) {
+  for (let i = 0; i < 5; i += 1) {
     const lastFetched =
       zabosData.length > 0 ? zabosData[zabosData.length - 1].id : null;
 
@@ -50,11 +51,7 @@ export const fetchZaboThunk = () => async (dispatch: AppDispatch) => {
         zabo.schedules.length > 0
           ? dayjs(zabo.schedules[0].startAt).format("MM.DD")
           : null;
-      const qrUrl = "".concat(
-        ZABO_SHARE_BASE_URL,
-        "/s/",
-        id.substring(id.length - 6),
-      );
+      const qrUrl = "".concat(ZABO_SHARE_URL, id.substring(id.length - 6));
       const imageUrl =
         zabo.photos.length > 0 ? zabo.photos[0].url + postFix(index) : null;
       const state = ZaboState.PENDING_STATE;

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