feat(getcloser): add auth token to all APIs except for /v1/auth

Author: daclouds

getcloser/frontend/src/app/page1/page.tsx

@@ -9,33 +9,54 @@ import { useFormStore } from '../../store/formStore';
 import { useRouter } from 'next/navigation';
 
 export default function Page1() {
-  const { email, setEmail, setId } = useFormStore();
+  const { email, setEmail, setId, setAccessToken } = useFormStore();
   const router = useRouter();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     console.log('Form Submitted:', { email });
 
     try {
-      const response = await fetch('/api/v1/users/auth', {
+      const authResponse = await fetch('/api/v1/auth', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ email }),
       });
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
+      if (!authResponse.ok) {
+        throw new Error(`HTTP error! status: ${authResponse.status}`);
       }
 
-      const result = await response.json();
-      console.log('Auth API Response:', result);
-      if (result.id) {
-        setId(result.id); // Store the ID in the form store
+      const authResult = await authResponse.json();
+      const newAccessToken = authResult.accessToken;
+
+      if (!newAccessToken) {
+        throw new Error('Access token not received from auth API.');
+      }
+      setAccessToken(newAccessToken); // Store the new access token
+
+      const userMeResponse = await fetch('/api/v1/users/me', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${newAccessToken}`, // Use the new access token
+        },
+      });
+
+      if (!userMeResponse.ok) {
+        throw new Error(`HTTP error! status: ${userMeResponse.status}`);
+      }
+
+      const userMeResult = await userMeResponse.json();
+      console.log('User Me API Response:', userMeResult);
+
+      if (userMeResult.sub) {
+        setId(userMeResult.sub);
       }
       alert('정보가 제출되었습니다!');
-      router.push('/page2'); // Navigate to page2 after successful submission
+      router.push('/page2');
     } catch (error) {
       console.error('Error submitting form:', error);
       alert('정보 제출에 실패했습니다.');

getcloser/frontend/src/app/page2/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { authenticatedFetch } from '../../lib/api';
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -33,7 +34,7 @@ export default function Page2() {
     }
 
     try {
-      const response = await fetch(`/api/v1/users/${userId}`);
+      const response = await authenticatedFetch(`/api/v1/users/${userId}`);
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
@@ -115,7 +116,7 @@ export default function Page2() {
 
     // Step 3: Make the POST request
     try {
-      const response = await fetch('/api/v1/teams/create', {
+      const response = await authenticatedFetch('/api/v1/teams/create', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

getcloser/frontend/src/app/page3/page.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { useFormStore } from '../../store/formStore';
+import { authenticatedFetch } from '../../lib/api';
 import React, { useEffect } from 'react'; // Import useEffect
 
 export default function Page3() {
@@ -28,7 +29,7 @@ export default function Page3() {
       console.log('Assign Challenges Request Body:', requestBody);
 
       try {
-        const response = await fetch('/api/v1/challenge/assign-challenges', {
+        const response = await authenticatedFetch('/api/v1/challenge/assign-challenges', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',

getcloser/frontend/src/components/Header.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { authenticatedFetch } from '../lib/api';
 import React, { useState, useEffect } from 'react';
 import { useFormStore } from '../store/formStore';
 
@@ -11,7 +12,7 @@ export default function Header() {
     if (id) {
       const fetchUserName = async () => {
         try {
-          const response = await fetch(`/api/v1/users/${id}`);
+          const response = await authenticatedFetch(`/api/v1/users/${id}`);
           if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
           }

getcloser/frontend/src/store/formStore.ts

@@ -3,12 +3,14 @@ import { create } from 'zustand';
 interface FormState {
   email: string;
   id: string;
+  accessToken: string;
   question: string;
   answer: string;
   teamId: string;
   memberIds: string[];
   setEmail: (email: string) => void;
   setId: (id: string) => void;
+  setAccessToken: (accessToken: string) => void;
   setQuestion: (question: string) => void;
   setAnswer: (answer: string) => void;
   setTeamId: (teamId: string) => void;
@@ -18,12 +20,14 @@ interface FormState {
 export const useFormStore = create<FormState>((set) => ({
   email: '',
   id: '',
+  accessToken: '',
   question: '',
   answer: '',
   teamId: '',
   memberIds: [],
   setEmail: (email) => set({ email }),
   setId: (id) => set({ id }),
+  setAccessToken: (accessToken) => set({ accessToken }),
   setQuestion: (question) => set({ question }),
   setAnswer: (answer) => set({ answer }),
   setTeamId: (teamId) => set({ teamId }),