@obb871001/api-integration-sdk 1.0.0

package/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

package/dist/index.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports=="object"&&typeof module<"u"?t(require("@tanstack/react-query"),require("react")):typeof define=="function"&&define.amd?define(["@tanstack/react-query","react"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.ReactQuery,e.React))})(this,(function(e,t){"use strict";t.createContext(null)}));

package/dist/index.js

@@ -0,0 +1,3 @@
+import "@tanstack/react-query";
+import { createContext as t } from "react";
+t(null);

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@obb871001/api-integration-sdk",
+  "private": false,
+  "version": "1.0.0",
+  "description": "集成API",
+  "main": "dist/index.js",
+  "module": "src/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --mode lib",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "keywords": [
+    "api",
+    "integration",
+    "react",
+    "react-query",
+    "tanstack-query",
+    "axios",
+    "sdk",
+    "library"
+  ],
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/obb871001/api-integration-sdk.git"
+  },
+  "homepage": "https://github.com/obb871001/api-integration-sdk#readme",
+  "bugs": {
+    "url": "https://github.com/obb871001/api-integration-sdk/issues"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "@tanstack/react-query": ">=4.0.0"
+  },
+  "dependencies": {
+    "axios": "^1.12.2",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@tanstack/react-query": "^5.90.5",
+    "@tanstack/react-query-devtools": "^5.90.2",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "vite": "^7.1.7"
+  }
+}

package/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/src/App.jsx

@@ -0,0 +1,7 @@
+import "./App.css";
+
+function App() {
+  return <></>;
+}
+
+export default App;

package/src/api/client.js

@@ -0,0 +1,59 @@
+import axios from "axios";
+
+/**
+ * 建立 axios instance（可選擇性注入 getToken / 其他攔截器）
+ * @param {Object} options
+ * @param {string} options.baseURL
+ * @param {() => (string|undefined|Promise<string|undefined>)} [options.getToken]
+ * @param {number} [options.timeoutMs=15000]
+ * @param {import('axios').AxiosInstance} [options.axiosInstance] - 若有外部共用 instance，可直接注入
+ * @param {string} [options.currency] - 預設貨幣代碼（可用於自訂攔截器）
+ * @param {string} [options.lng] - 預設語言代碼（可用於自訂攔截器）
+ * @param {(error:any, ctx:{instance:any}) => any} [options.onError] - 統一錯誤處理（可回傳 Promise.reject(error)）
+ * @returns {import('axios').AxiosInstance}
+ */
+export function createAxiosClient({
+  baseURL,
+  getToken,
+  timeoutMs = 15000,
+  axiosInstance,
+  currency,
+  lng,
+  onError,
+} = {}) {
+  const instance =
+    axiosInstance ??
+    axios.create({
+      baseURL: baseURL,
+      timeout: timeoutMs,
+      headers: { "Content-Type": "application/json" },
+    });
+
+  instance.interceptors.request.use(async (config) => {
+    if (getToken) {
+      const token = await getToken();
+      if (token) {
+        config.headers = config.headers || {};
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+    }
+    return config;
+  });
+
+  instance.interceptors.request.use((config) => {
+    config.headers.Currency = currency;
+    config.headers[`currency-code`] = currency;
+    config.headers[`lang`] = lng;
+  });
+
+  // Response: 統一錯誤處理（交由外部決定）
+  instance.interceptors.response.use(
+    (res) => res,
+    (err) => {
+      if (onError) return onError(err, { instance });
+      return Promise.reject(err);
+    }
+  );
+
+  return instance;
+}

package/src/function/usePeriodicDataUpdater.js

@@ -0,0 +1,19 @@
+import { useQueries } from "@tanstack/react-query";
+import React from "react";
+import useUserApi from "../services/useUserApi";
+
+const usePeriodicDataUpdater = () => {
+  const { userInfoApi } = useUserApi();
+  const { data, isFetching } = useQueries({
+    queries: [
+      {
+        queryKey: ["getMemberInfo"],
+        queryFn: userInfoApi,
+        refetchInterval: 50000,
+      },
+    ],
+  });
+  return { data, isFetching };
+};
+
+export default usePeriodicDataUpdater;

package/src/hooks/useAxios.js

@@ -0,0 +1,10 @@
+import React, { createContext, useContext } from "react";
+
+const ApiCtx = createContext(null);
+
+export const useAxios = () => {
+  const ctx = useContext(ApiCtx);
+
+  if (!ctx) throw new Error("useAxios must be used inside <ApiProvider>");
+  return ctx.client;
+};

package/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/index.js

@@ -0,0 +1 @@
+export * from "./function/usePeriodicDataUpdater";

package/src/main.jsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/provider.jsx

@@ -0,0 +1,15 @@
+import { useMemo } from "react";
+import { createAxiosClient } from "./api/client";
+
+/**
+ * ApiProvider props：
+ * - baseURL: string
+ * - getToken?: () => string | undefined | Promise<string | undefined>
+ * - timeoutMs?: number
+ * - axiosInstance?: AxiosInstance   // 注入你自己的 axios（可共用攔截器）
+ * - onError?: (error, ctx) => any   // 全域錯誤處理
+ */
+export function ApiProvider({ children, ...opts }) {
+  const client = useMemo(() => createAxiosClient(opts), [opts]);
+  return <ApiCtx.Provider value={{ client }}>{children}</ApiCtx.Provider>;
+}

package/src/services/index.js

@@ -0,0 +1,2 @@
+export * from "./useCommonApi";
+export * from "./useUserApi";

package/src/services/useCommonApi.jsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from "react";
+import { useAxios } from "../hooks/useAxios";
+
+const useCommonApi = () => {
+  const axios = useAxios();
+
+  /**
+   * @description 取得輪播圖資訊
+   * @return {Promise<Object>} 輪播圖資訊
+   */
+  const carouselApi = useCallback(async () => {
+    const { data } = await axios.get("/carousels");
+    return data;
+  }, [axios]);
+
+  /**
+   * @description 取得跑馬燈資訊
+   * @return {Promise<Object>} 跑馬燈資訊
+   */
+  const marqueeApi = useCallback(async () => {
+    const { data } = await axios.get("/marquees");
+    return data;
+  }, [axios]);
+
+  return { carouselApi, marqueeApi };
+};
+
+export default useCommonApi;

package/src/services/useUserApi.jsx

@@ -0,0 +1,78 @@
+import React, { useCallback } from "react";
+import { useAxios } from "../hooks/useAxios";
+
+/**
+ * @description 使用者相關 API
+ * @returns {Object} API 方法集合
+ * @property {Function} machineLoginApi 機台登入 API
+ * @property {Function} userInfoApi 取得使用者資訊 API
+ */
+const useUserApi = () => {
+  const axios = useAxios();
+
+  /**
+   * @description 機台登入
+   * @param {Object} params
+   * @param {string} params.mac_address 機台 MAC 地址
+   * @param {string} params.app_version 應用程式版本
+   * @param {string} params.anydesk_id 遠端協助軟體 ID
+   */
+  const machineLoginApi = useCallback(
+    async (params) => {
+      const { mac_address = "", app_version = "", anydesk_id = "" } = params;
+      const { data } = await axios.post("/cash-register/login", {
+        mac_address,
+        app_version,
+        anydesk_id,
+      });
+      return data;
+    },
+    [axios]
+  );
+
+  /**
+   * @description 取得使用者資訊
+   * @return {Promise<Object>} 使用者資訊
+   */
+  const userInfoApi = useCallback(async () => {
+    const { data } = await axios.get("/getMemberInfo");
+    return data;
+  }, [axios]);
+
+  /**
+   * @description 取得使用者遊戲列表
+   * @return {Promise<Object>} 使用者遊戲列表
+   */
+  const userGameListApi = useCallback(async () => {
+    const { data } = await axios.get("/getGameList");
+    return data;
+  }, [axios]);
+
+  /**
+   * @description 取得即時匯率資訊
+   * @return {Promise<Object>} 即時匯率資訊
+   */
+  const userCurrencyExchangeApi = useCallback(async () => {
+    const { data } = await axios.get("/getNowCurrencyExchange");
+    return data;
+  }, [axios]);
+
+  /**
+   * @description 取得使用者最愛遊戲列表
+   * @return {Promise<Object>} 使用者最愛遊戲列表
+   */
+  const userFavoriteGameApi = useCallback(async () => {
+    const { data } = await axios.get("/getFavoriteGame");
+    return data;
+  }, [axios]);
+
+  return {
+    machineLoginApi,
+    userInfoApi,
+    userGameListApi,
+    userFavoriteGameApi,
+    userCurrencyExchangeApi,
+  };
+};
+
+export default useUserApi;