feat: 토큰 테스트

Author: sikkzz

apps/tuk-web/src/app/gathering/[gatheringId]/invites/src/components/SendInviteList.tsx

@@ -1,30 +1,22 @@
-// import { useQuery } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 
-// import { gatheringAPIService } from '@/app/gathering/[gatheringId]/invites/src/service';
+import { gatheringAPIService } from '@/app/gathering/[gatheringId]/invites/src/service';
 import InviteCardFrame from '@/shared/components/InviteCardFrame';
 
 const SendInviteList = () => {
-  // const { data } = useQuery({
-  //   queryKey: ['gatherings'],
-  //   queryFn: () => gatheringAPIService.getGatheringProposals(1, 'SENT', { page: 1, pageSize: 10 }),
-  // });
+  const { data } = useQuery({
+    queryKey: ['gatherings'],
+    queryFn: () => gatheringAPIService.getGatheringProposals(1, 'SENT', { page: 1, pageSize: 10 }),
+  });
 
   return (
     <div className="mb-[6.25rem] mt-[1.875rem] flex flex-col justify-center gap-10">
-      <div className="flex flex-col items-center gap-2.5">
-        <InviteCardFrame />
-        <span className="pretendard-body-12-R text-gray-800">15분 전</span>
-      </div>
-
-      <div className="flex flex-col items-center gap-2.5">
-        <InviteCardFrame />
-        <span className="pretendard-body-12-R text-gray-800">15분 전</span>
-      </div>
-
-      <div className="flex flex-col items-center gap-2.5">
-        <InviteCardFrame />
-        <span className="pretendard-body-12-R text-gray-800">15분 전</span>
-      </div>
+      {data?.data.content.map(proposal => (
+        <div className="flex flex-col items-center gap-2.5" key={proposal.proposalId}>
+          <InviteCardFrame />
+          <span className="pretendard-body-12-R text-gray-800">{proposal.relativeTime}</span>
+        </div>
+      ))}
     </div>
   );
 };

apps/tuk-web/src/shared/lib/api/rest/index.ts

@@ -5,16 +5,40 @@ import type { RestAPIConfig } from './types';
 export { RestAPI } from './rest';
 export type { RestAPIConfig, RestAPIProtocol } from './types';
 
+// const defaultJsonInstance = (baseURL: string) =>
+//   new RestAPIInstance(baseURL, {
+//     withCredentials: false,
+//     authHeader: () => {
+//       if (typeof window === 'undefined') return null;
+//       // const token = sessionStorage.getItem('accessToken');
+//       // return token ? { Authorization: `Bearer ${token}` } : null;
+
+//       return {
+//         Authorization: `Bearer
+// eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIzMiIsIm1lbWJlcklkIjoiMzIiLCJ0b2tlblR5cGUiOiJBQ0NFU1MiLCJpYXQiOjE3NTUwMDM4NTQsImV4cCI6MTc1NzU5NTg1NH0.sXHpNsim8-nIUdCjnAcOIZGsg2gUo8rnpkBmN-z5dKU`,
+//       };
+//     },
+//   });
+
 const defaultJsonInstance = (baseURL: string) =>
   new RestAPIInstance(baseURL, {
-    // headers: { 'Content-Type': 'application/json' },
     withCredentials: false,
+    authHeader: () => {
+      if (typeof window === 'undefined') return null;
+      const token =
+        'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIzMiIsIm1lbWJlcklkIjoiMzIiLCJ0b2tlblR5cGUiOiJBQ0NFU1MiLCJpYXQiOjE3NTUwMDM4NTQsImV4cCI6MTc1NzU5NTg1NH0.sXHpNsim8-nIUdCjnAcOIZGsg2gUo8rnpkBmN-z5dKU';
+      return token ? { Authorization: `Bearer ${token.trim()}` } : null;
+    },
   });
 
 const formInstance = (baseURL: string) =>
   new RestAPIInstance(baseURL, {
-    headers: { 'Content-Type': 'multipart/form-data' },
-    withCredentials: true,
+    withCredentials: false,
+    authHeader: () => {
+      if (typeof window === 'undefined') return null;
+      const token = sessionStorage.getItem('accessToken');
+      return token ? { Authorization: `Bearer ${token}` } : null;
+    },
   });
 
 export function generateRestAPI(

apps/tuk-web/src/shared/lib/api/rest/rest.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-// utils/rest/rest.ts
+
 import { RestAPIConfig, RestRequestOptions, RestAPIProtocol } from './types';
 
 import { APIError, wrapZodError } from '@/shared/lib/api/types';
 
 type RestAPIInstanceInit = {
   headers?: Record<string, string>;
   withCredentials?: boolean;
+  authHeader?: () => Record<string, string> | null;
 };
 
 export class RestAPIInstance {
@@ -22,12 +23,18 @@ export class RestAPIInstance {
   getBaseURL() {
     return this.baseURL;
   }
+
   getDefaultHeaders() {
     return this.init.headers ?? {};
   }
+
   getWithCredentials() {
     return this.init.withCredentials ?? true;
   }
+
+  getAuthHeader() {
+    return this.init.authHeader?.() ?? null;
+  }
 }
 
 function applyPathParams(url: string, params?: Record<string, string | number>) {
@@ -100,12 +107,10 @@ export class RestAPI implements RestAPIProtocol {
     const hdr: Record<string, string> = {
       ...this.instance.getDefaultHeaders(),
       ...(headers ?? {}),
+      ...(this.instance.getAuthHeader() ?? {}),
     };
 
-    // GET/HEAD에는 Content-Type 제거
-    if (isGetLike && 'Content-Type' in hdr) {
-      delete hdr['Content-Type'];
-    }
+    if (isGetLike && 'Content-Type' in hdr) delete hdr['Content-Type'];
 
     const reqInit: RequestInit = {
       method: methodUpper,