feat: react-CI commit and upload the related dependencies.

[yi-luan]

Description

1. The GitHub Action CI of React has beeb implemented.
2. Upload the related dependencies.

[Dlutermade]

因為 前端 的奇怪特性 沒有編譯

所以我們會先 做 lint check
然後 type check
再 unit test

最後才 build

[WeiYun0912]

可以考慮在專案中使用 alias import 的方式

以你的 page/game/map.tsx 來舉例

原本你的 import 長這樣

import Card from "../../components/items/card";
import { LineUpCardsState }  from "../../states/lineUpCardStates";
import { useRecoilState } from "recoil";
import lineUpCardBack from "../../assets/images/backOfLineUpCard.jpg";
import functionalCardBack from "../../assets/images/backOfFunctionCard.jpg";

使用 alias 後會變成以下

import Card from "@/components/items/card";
import { LineUpCardsState }  from "@/states/lineUpCardStates";
import { useRecoilState } from "recoil";
import lineUpCardBack from "@/assets/images/backOfLineUpCard.jpg";
import functionalCardBack from "@/assets/images/backOfFunctionCard.jpg";

而這個 @ 映射到的路徑是你的 src，所以不管你以後的檔案有多 deep，就不用一直使用 ../ 回到上一層去抓你要的檔案，直接用 @ 來回到根(src) 就好了。

---

具體的設定你可以這樣嘗試看看

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    ....
  },
  ....
}

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from "path";

export default defineConfig({
  plugins: [react()],
    resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

[WeiYun0912]

15 行 cardBackUrl 的條件式可以拉出來判斷

const [ lineUpCards ] = useRecoilState(LineUpCardsState); 
const {CardInformation,cardKind} = lineUpCards;
const isLineUp = cardKind === "LineUp";
const cardBackUrl = isLineUp ? lineUpCardBack : functionalCardBack;

CardInformation.map((card) => (
   <Card ... cardBackUrl={cardBackUrl} />
))

[WeiYun0912]

props 要是太多要傳遞的話 可以考慮用 spread syntax
例如：

<Card key={card.cardName} {...card} cardFrontUrl={card.cardUrl} cardBackUrl={cardBackUrl} />

• 優點：Component 程式碼看起來不會那麼長
• 缺點：要是想看你傳遞了哪些 props 到 Child Component 就還要 console 看一下，但你的 Child Component 有 type guard 應該還好。

[WeiYun0912]

可以先用解構的方式取出你的 X,Y 比較易讀

const { currentCoordinateX, currentCoordinateY } = cardCoordinate;
const cardPositionStyle = {
   top:`calc(50% + ${currentCoordinateX}px)`,
   left:`calc(50% + ${currentCoordinateY}px)`,
   ...
}