get zengin-code from api

src/client/foundation/pages/Top/internal/ChargeDialog/ChargeDialog.jsx

@@ -1,13 +1,14 @@
 import { motion } from "framer-motion";
 import React, { forwardRef, useCallback, useState } from "react";
-import zenginCode from "zengin-code";
 
 import { Dialog } from "../../../../components/layouts/Dialog";
 import { Spacer } from "../../../../components/layouts/Spacer";
 import { Stack } from "../../../../components/layouts/Stack";
 import { Heading } from "../../../../components/typographies/Heading";
+import { useFetch } from "../../../../hooks/useFetch";
 import { useMutation } from "../../../../hooks/useMutation";
 import { Space } from "../../../../styles/variables";
+import { jsonFetcher } from "../../../../utils/HttpUtils";
 
 const CANCEL = "cancel";
 const CHARGE = "charge";
@@ -67,6 +68,12 @@ export const ChargeDialog = forwardRef(({ onComplete }, ref) => {
     [charge, bankCode, branchCode, accountNo, amount, onComplete, clearForm],
   );
 
+  const { data: zenginCode } = useFetch("/api/zengin-code", jsonFetcher);
+
+  if (zenginCode === null) {
+    return <div>Loading...</div>;
+  }
+
   const bankList = Object.entries(zenginCode).map(([code, { name }]) => ({
     code,
     name,

src/server/routes/api.js

@@ -1,10 +1,12 @@
 import moment from "moment-timezone";
 import { Between, LessThanOrEqual, MoreThanOrEqual } from "typeorm";
+import zenginCode from "zengin-code";
 
 import { BettingTicket, Race, User } from "../../model/index.js";
 import { createConnection } from "../typeorm/connection.js";
 import { initialize } from "../typeorm/initialize.js";
 
+
 /**
  * @type {import('fastify').FastifyPluginCallback}
  */
@@ -157,6 +159,10 @@ export const apiRoute = async (fastify) => {
     res.send(bettingTicket);
   });
 
+  fastify.get("/zengin-code", async (req, res) => {
+    res.send(zenginCode);
+  });
+
   fastify.post("/initialize", async (_req, res) => {
     await initialize();
     res.status(204).send();