fix: API 요청시 토큰을 전달하지 않는 문제 수정

src/pages/forwarding/Create.tsx

@@ -25,7 +25,7 @@ const formSchema = z.object({
 
 export default function ForwardingCreate() {
   const navigate = useNavigate();
-  const { selectedProject } = useAuthStore();
+  const { authFetch, selectedProject } = useAuthStore();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -38,7 +38,7 @@ export default function ForwardingCreate() {
   async function onSubmit(values: z.infer<typeof formSchema>) {
     const { name, serverPort, instanceIp } = values;
 
-    const response = await fetch(`/api/forwarding?projectId=${selectedProject?.id}`, {
+    const response = await authFetch(`/api/forwarding?projectId=${selectedProject?.id}`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

src/pages/forwarding/List.tsx

@@ -22,12 +22,12 @@ import {
 } from '@/components/ui/alert-dialog';
 
 export default function ForwardingList() {
-  const { selectedProject } = useAuthStore();
+  const { authFetch, selectedProject } = useAuthStore();
   const [forwardings, setForwardings] = useState<Forwarding[] | null>(null);
   const [selectedForwarding, setSelectedForwarding] = useState<Forwarding | null>(null);
 
   useEffect(() => {
-    fetch(`/api/forwardings?projectId=${selectedProject?.id}`)
+    authFetch(`/api/forwardings?projectId=${selectedProject?.id}`)
       .then((response) => {
         if (!response.ok) {
           toast.error('포트포워딩 정보를 조회할 수 없습니다.');
@@ -39,12 +39,12 @@ export default function ForwardingList() {
       .then(({ contents }) => {
         setForwardings(contents);
       });
-  }, [selectedProject]);
+  }, [authFetch, selectedProject]);
 
   const handleDelete = () => {
     if (selectedForwarding === null) throw Error('selectedForwarding is null');
 
-    fetch(`/api/forwarding?forwardingId=${selectedForwarding.id}`, {
+    authFetch(`/api/forwarding?forwardingId=${selectedForwarding.id}`, {
       method: 'DELETE',
     }).then((response) => {
       if (!response.ok) {

src/stores/authStore.ts

@@ -9,6 +9,7 @@ export interface AuthStore {
   projects: Project[];
   selectedProject: (Project & { role?: string }) | null;
   setSelectedProject: (project: Project) => Promise<void>;
+  authFetch: (input: RequestInfo, init?: RequestInit) => Promise<Response>;
   login: (username: string, password: string) => void;
   logout: () => void;
 }
@@ -38,6 +39,11 @@ export const useAuthStore = create<AuthStore>()(
 
         console.log(role);
       },
+      authFetch: async (input, init) =>
+        fetch(input, {
+          ...init,
+          headers: { ...init?.headers, 'X-Subject-Token': get().token! },
+        }),
       login: async (username, password) => {
         const response = await fetch('/api/auth/login', {
           method: 'POST',