Feat. 요청 페이지 개선, access_token 로직 수정, 실시간 요청 조회 개발 [중요]

next.config.js

@@ -3,7 +3,6 @@
 const domain = process.env.NEXT_PUBLIC_ROOT_DOMAIN;
 const protocol = process.env.NEXT_PUBLIC_PROTOCOL;
 const apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX;
-console.log(`${protocol}://api.${domain}/${apiPrefix}/:path*`);
 const nextConfig = {
   reactStrictMode: true,
   experimental: { instrumentationHook: true },
@@ -19,15 +18,14 @@ const nextConfig = {
           ? `${protocol}://api.${domain}/${apiPrefix}/:path*`
           : "http://localhost:8000/api/:path*",
       },
-      {
-        source: "/socket.io/:path*",
-        destination: domain
-          ? `${protocol}://socket.${domain}/socket.io/:path*/`
-          : "http://localhost:8001/socket.io/:path*",
-      },
     ];
   },
   webpack: (config, { webpack }) => {
+    config.externals.push({
+      "utf-8-validate": "commonjs utf-8-validate",
+      bufferutil: "commonjs bufferutil",
+      "supports-color": "commonjs supports-color",
+    });
     config.plugins.push(
       new webpack.IgnorePlugin({
         resourceRegExp: /import2/, // adjust the module name

package.json

@@ -36,6 +36,7 @@
     "@types/react": "18.2.16",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
+    "bufferutil": "^4.0.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "date-fns": "^2.30.0",
@@ -54,12 +55,15 @@
     "react-dom": "18.2.0",
     "react-grid-layout": "^1.3.4",
     "react-hook-form": "^7.47.0",
+    "socket.io-client": "^4.7.2",
     "swr": "^2.2.4",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.1.6",
     "ulid": "^2.3.0",
+    "utf-8-validate": "^5.0.10",
+    "ws": "^8.14.2",
     "zod": "^3.22.4",
     "zustand": "^4.4.6"
   },
@@ -73,6 +77,7 @@
     "@types/react-grid-layout": "^1.3.2",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
+    "encoding": "^0.1.13",
     "eslint": "^8.47.0",
     "eslint-config-next": "^13.4.19",
     "eslint-config-prettier": "^9.0.0",

src/app/(main)/emergency-center/[emergency_center_id]/page.tsx

@@ -1,5 +1,6 @@
 import { TabWrapper } from "@/components/layout/TabWrapper";
 import { EmergencyCenterDetailPrototype } from "@/components/prototypes/EmergencyCenter/Detail";
+import { API_SERVER } from "@/constant";
 import { GetEmergencyCenterDetailResponse } from "@/types/emergencyCenter.type";
 import { ChevronLeft } from "lucide-react";
 import Link from "next/link";
@@ -20,14 +21,11 @@ interface GetEmergencyCenterDetailResponseFailDto {
 
 export default async function Page({ params }: { params: Params }) {
   const { emergency_center_id } = params;
-  const domain = process.env.NEXT_PUBLIC_ROOT_DOMAIN;
-  const protocol = process.env.NEXT_PUBLIC_PROTOCOL;
-  const apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX;
-  const url = `${protocol}://api.${domain}/${apiPrefix}/`;
+
   const data:
     | GetEmergencyCenterDetailResponseSuccessDto
     | GetEmergencyCenterDetailResponseFailDto = await fetch(
-    `${url}/er/emergency-centers/${emergency_center_id}`,
+    `${API_SERVER}/er/emergency-centers/${emergency_center_id}`,
     {
       next: {
         revalidate: 10,

src/components/container/RequestContainer/index.tsx

@@ -2,6 +2,7 @@
 import { Tag } from "@/components/elements/Tag";
 import { ProgressTracker } from "@/components/module/common/ProgressTracker";
 import { useToast } from "@/components/ui/use-toast";
+import { useAuth } from "@/providers/AuthProvider";
 function coordinateOnCircle(
   radius: number,
   angleDegrees: number
@@ -30,14 +31,17 @@ function coordinateOnCircle(
  *
  */
 export const RequestContainer = () => {
+  const { accessToken } = useAuth();
   const numberOfDots = 12;
   const radius = 8.2; // Half of 16.4rem
-
   const adjustedRadius = radius; // Adjust for dot size
   const { toast } = useToast();
   const requestOnClick = () => {
     fetch("/api/requests/ems-to-er", {
       method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
     })
       .then((res) => res.json())
       .then((res: { is_success: boolean; message: string }) => {

src/components/container/RequestInfoContainer/index.tsx

@@ -1,22 +1,18 @@
 "use client";
 import { RequestInfoPageHeader } from "@/components/module/RequestInfo/Header";
 import { RequestTable } from "@/components/module/RequestInfo/Table";
-import { useRequest } from "@/hooks/api/useRequest";
-import { useEffect } from "react";
 
 export const RequestInfoContainer = () => {
-  const { request_list } = useRequest();
-  useEffect(() => {
-    console.log(request_list);
-  }, [request_list]);
+  // const { setRequestList, sort, ...rest } = useRequestSocket();
+  // console.log(rest.socket);
   return (
     <div className=" h-full w-full px-[0.4rem] py-[1.6rem]">
       <div className="flex h-full w-full flex-col overflow-hidden">
         <div className="mb-[1rem]  pr-[4rem]">
           <RequestInfoPageHeader />
         </div>
         <div className="h-full w-full overflow-hidden">
-          <RequestTable request_list={request_list} />
+          <RequestTable />
         </div>
       </div>
     </div>

src/components/elements/Toggle/index.tsx

@@ -16,6 +16,7 @@ interface ToggleProps {
   checked: boolean;
   onChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;
   bgColor?: BrandColor;
+  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 export const Toggle = ({