fix: 일관된 api호출

Author: SaidBySolo

src/hooks/useProjectLoader.ts

@@ -28,7 +28,7 @@ export const useProjectLoader = () => {
     if (initialProviderFromNav) {
       console.log('🆕 [ProjectLoader] Setting initial provider from navigation:', initialProviderFromNav);
       setCurrentCSP(initialProviderFromNav);
-      
+
       let providerType: CloudProviderType;
       switch (initialProviderFromNav) {
         case 'GCP':
@@ -50,38 +50,33 @@ export const useProjectLoader = () => {
 
     const loadBlocksFromAPI = async () => {
       try {
-        const res = await apiFetch(`/api/block/${projectId}`);
+        // apiFetch는 항상 unwrapped data를 반환
+        const data = await apiFetch(`/api/block/${projectId}`);
 
-        // 응답 스키마 호환 처리: res.blocks 또는 res.data.blocks
-        const blocks =
-          (res?.data?.blocks as DroppedBlock[]) ??
-          (res?.blocks as DroppedBlock[]) ??
-          [];
+        // 블록 데이터 추출
+        const blocks = (data?.blocks as DroppedBlock[]) ?? [];
 
         if (Array.isArray(blocks)) {
           setDroppedBlocks(blocks);
           console.log('✅ 프로젝트 블록 불러오기 성공:', blocks.length);
         } else {
-          console.warn('⚠️ 불러온 블록 데이터 형식이 올바르지 않습니다.', res);
+          console.warn('⚠️ 불러온 블록 데이터 형식이 올바르지 않습니다.', data);
         }
 
-        // 연결도 내려줄 경우를 대비해 옵션 처리
-        const apiConnections =
-          (res?.data?.connections as any[]) ??
-          (res?.connections as any[]) ??
-          null;
+        // 연결 데이터 추출
+        const apiConnections = (data?.connections as any[]) ?? null;
         if (Array.isArray(apiConnections)) {
           setConnections(apiConnections);
           console.log('✅ 프로젝트 연결 불러오기 성공:', apiConnections.length);
         }
 
         // 프로젝트의 클라우드 프로바이더 설정 불러오기
-        const projectProvider = res?.data?.provider ?? res?.provider;
-        
+        const projectProvider = data?.provider;
+
         // 초기 프로바이더가 navigation state로 전달되었으면 그것을 우선 사용
         // (프로젝트 생성 직후에는 서버에 provider가 없을 수 있음)
         const finalProvider = initialProviderFromNav || projectProvider || 'AWS';
-        
+
         console.log('🔄 [ProjectLoader] Provider priority:', {
           fromNav: initialProviderFromNav,
           fromServer: projectProvider,

src/pages/DashboardPage.tsx

@@ -30,8 +30,9 @@ const DashboardPage: React.FC = () => {
   const loadProjects = async () => {
     setIsLoading(true);
     try {
-      const res = await apiFetch("/api/projects?size=8");
-      const projectsFromApi = res?.data?.projects ?? [];
+      // apiFetch는 항상 unwrapped data를 반환 (data.data 또는 data)
+      const data = await apiFetch("/api/projects?size=8");
+      const projectsFromApi = data?.projects ?? [];
 
       const parsed: Project[] = projectsFromApi.map((proj: any) => ({
         id: String(proj.id),
@@ -62,13 +63,12 @@ const DashboardPage: React.FC = () => {
   const handleCreateProject = async (name: string, description: string) => {
     setIsCreating(true);
     try {
-      const response = await apiFetch("/api/projects", {
+      // apiFetch는 항상 unwrapped data를 반환
+      const project = await apiFetch("/api/projects", {
         method: "POST",
         body: JSON.stringify({ name, description }),
       });
 
-      const project = response.data;
-
       if (project?.id) {
         await loadProjects();
         setIsModalOpen(false);

src/pages/DeployStatusPage.tsx

@@ -26,8 +26,9 @@ const DeployStatusPage: React.FC = () => {
 
   const loadProjects = async () => {
     try {
-      const res = await apiFetch("/api/projects?size=100");
-      setProjects(res.data?.projects || []);
+      // apiFetch는 항상 unwrapped data를 반환
+      const data = await apiFetch("/api/projects?size=100");
+      setProjects(data?.projects || []);
     } catch (err) {
       toast.error("프로젝트 목록을 불러오는 데 실패했습니다.", {
         id: "fetch-projects",

src/pages/ProjectEditorPage.tsx

@@ -121,33 +121,28 @@ function ProjectEditorPage() {
 
     const loadBlocksFromAPI = async () => {
       try {
-        const res = await apiFetch(`/api/block/${projectId}`);
+        // apiFetch는 항상 unwrapped data를 반환
+        const data = await apiFetch(`/api/block/${projectId}`);
 
-        // 응답 스키마 호환 처리: res.blocks 또는 res.data.blocks
-        const blocks =
-          (res?.data?.blocks as DroppedBlock[]) ??
-          (res?.blocks as DroppedBlock[]) ??
-          [];
+        // 블록 데이터 추출
+        const blocks = (data?.blocks as DroppedBlock[]) ?? [];
 
         if (Array.isArray(blocks)) {
           setDroppedBlocks(blocks);
           console.log("✅ 프로젝트 블록 불러오기 성공:", blocks.length);
         } else {
-          console.warn("⚠️ 불러온 블록 데이터 형식이 올바르지 않습니다.", res);
+          console.warn("⚠️ 불러온 블록 데이터 형식이 올바르지 않습니다.", data);
         }
 
-        // 연결도 내려줄 경우를 대비해 옵션 처리
-        const apiConnections =
-          (res?.data?.connections as any[]) ??
-          (res?.connections as any[]) ??
-          null;
+        // 연결 데이터 추출
+        const apiConnections = (data?.connections as any[]) ?? null;
         if (Array.isArray(apiConnections)) {
           setConnections(apiConnections);
           console.log("✅ 프로젝트 연결 불러오기 성공:", apiConnections.length);
         }
 
         // 프로젝트의 클라우드 프로바이더 설정 불러오기
-        const projectProvider = res?.data?.provider ?? res?.provider ?? "AWS";
+        const projectProvider = data?.provider ?? "AWS";
         console.log("🔄 [ProjectEditor] Loading project with provider:", projectProvider);
 
         // 프로바이더 설정 (UI 상태와 프로바이더 매니저 모두 업데이트)