sparcs-kaist · jinho-choi123 · Oct 28, 2023 · Oct 6, 2023 · Oct 6, 2023 · Oct 6, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,115 +1,119 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true,
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "airbnb",
+    "airbnb-typescript",
+    "prettier"
+  ],
+  "overrides": [
+    {
+      "env": {
         "node": true
+      },
+      "files": [".eslintrc.{js, cjs}"],
+      "parserOptions": {
+        "sourceType": "script"
+      }
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
     },
-    "extends": [
-        "plugin:@typescript-eslint/recommended",
-        "airbnb",
-        "airbnb-typescript",
-        "prettier"
+    "project": ["./tsconfig.json"]
+  },
+  "plugins": ["import", "@typescript-eslint", "react"],
+  "ignorePatterns": ["node_modules/", "dist/"],
+  "rules": {
+    "no-console": "off",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        // Since airbnb javascript rules does not allow to import typescript files without extensions, we need to disable it
+        "ts": "never",
+        "tsx": "never"
+      }
     ],
-    "overrides": [
-        {
-            "env": {
-                "node": true
-            },
-            "files": [".eslintrc.{js, cjs}"],
-            "parserOptions": {
-                "sourceType": "script"
-            }
-        }
+    "import/named": "error",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true
+      }
     ],
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "project": ["./tsconfig.json"]
-    },
-    "plugins": ["import", "@typescript-eslint", "react"],
-    "ignorePatterns": ["node_modules/", "dist/"],
-    "rules": {
-        "import/extensions": [
-          "error",
-          "ignorePackages",
-          {
-            // Since airbnb javascript rules does not allow to import typescript files without extensions, we need to disable it
-            "ts": "never",
-            "tsx": "never"
-          }
-        ],
-        "import/named": "error",
-        "import/no-extraneous-dependencies": [
-          "error",
-          {
-            "devDependencies": true
-          }
-        ],
-        "import/prefer-default-export": "off",
-        "no-param-reassign": [
-          "error",
-          {
-            "props": true,
-            // function parameters cannot be reassigned for readability, except for the ones in the array
-            "ignorePropertyModificationsFor": []
-          }
-        ],
-        "no-restricted-imports": [
-          "error",
-          {
-            "patterns": [
-              {
-                "group": ["../*"],
-                "message": "Usage of relative parent imports is not allowed. Use path alias instead."
-              }
-            ]
-          }
-        ],
-        "radix": ["error", "as-needed"],
-        "react/function-component-definition": [
-          "error",
-          {
-            "namedComponents": "arrow-function",
-            "unnamedComponents": "arrow-function"
-          }
-        ],
-        "react/jsx-uses-react": "off",
-        "react/jsx-no-useless-fragment": [
-          "error",
-          {
-            // this allows <>{value}</> syntax, where value is a string or a number
-            "allowExpressions": true
-          }
-        ],
-        "react/jsx-props-no-spreading": "off",
-        "react/no-unknown-property": [
-          "error",
-          {
-            "ignore": ["css"]
-          }
-        ],
-        "react/react-in-jsx-scope": "off",
-        "react/require-default-props": [
-          "error",
-          {
-            // default values of the optional props must be provided as function arguments
-            "functions": "defaultArguments"
-          }
-        ],
-        "@typescript-eslint/consistent-type-imports": [
-          "error",
+    "import/prefer-default-export": "off",
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        // function parameters cannot be reassigned for readability, except for the ones in the array
+        "ignorePropertyModificationsFor": ["state"]
+      }
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
           {
-            "prefer": "type-imports"
+            "group": ["../*"],
+            "message": "Usage of relative parent imports is not allowed. Use path alias instead."
           }
         ]
-      },
-    "settings": {
-        "import/parsers": {
-            "@typescript-eslint/parser": [".ts", ".tsx"]
-        }
+      }
+    ],
+    "radix": ["error", "as-needed"],
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
+    "react/jsx-uses-react": "off",
+    "react/jsx-no-useless-fragment": [
+      "error",
+      {
+        // this allows <>{value}</> syntax, where value is a string or a number
+        "allowExpressions": true
+      }
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": [
+      "error",
+      {
+        // default values of the optional props must be provided as function arguments
+        "functions": "defaultArguments"
+      }
+    ],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports"
+      }
+    ],
+    "arrow-body-style": ["warn"]
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "project": ["./tsconfig.json"]
+      }
+    },
+    "react": {
+      "version": "detect"
     }
-}
+  }
+}
diff --git a/.prettier → .prettierrc b/.prettier → .prettierrc
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "prettier": "prettier --write --config ./.prettier -u",
+    "prettier": "prettier --write --config .prettierrc -u",
     "prepare": "husky install"
   },
   "lint-staged": {
@@ -19,19 +19,30 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
+    "@react-spring/web": "^9.7.3",
+    "@reduxjs/toolkit": "^1.9.7",
+    "axios": "^1.5.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-qr-code": "^2.0.12",
+    "react-redux": "^8.1.3",
+    "react-transition-group": "^4.4.5",
+    "redux-thunk": "^2.4.2",
+    "usehooks-ts": "^2.9.1",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/react-transition-group": "^4.4.7",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "eslint": "^8.45.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
@@ -40,6 +51,7 @@
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "prettier": "3.0.3",
+    "sass": "^1.69.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.5"
   }

diff --git a/src/App.css → src/App.module.css b/src/App.css → src/App.module.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,11 @@
-import "./App.css";
+import { Board } from "@/components";
+import { Provider } from "react-redux";
+import { store } from "@/redux/store";
 
 const App = () => (
-  <div>
-    <h1>Vite + React</h1>
-  </div>
+  <Provider store={store}>
+    <Board />
+  </Provider>
 );
 
 export default App;
diff --git a/src/components/Background/Background.animation.ts b/src/components/Background/Background.animation.ts
@@ -0,0 +1,19 @@
+import { AnimationDuration } from "@/config";
+
+export const backgroundFadeIn = {
+  to: {
+    opacity: 1,
+  },
+  config: {
+    duration: AnimationDuration,
+  },
+};
+
+export const backgroundFadeOut = {
+  to: {
+    opacity: 0,
+  },
+  config: {
+    duration: AnimationDuration,
+  },
+};
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,33 @@
+import { type BackgroundProps, ZaboState } from "@/types";
+import { animated, useSpring, easings } 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,
+    },
+    config: {
+      easings: easings.easeInOutSine,
+    },
+  }));
+
+  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.module.scss b/src/components/Board/Board.module.scss
@@ -0,0 +1,6 @@
+@import "src/styles";
+
+.board {
+  width: 3840px;
+  height: 2160px;
+}