fix: 프로바이더 선택 수정

Author: SaidBySolo

src/components/ui/DashboardHeader.tsx

@@ -34,7 +34,8 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
 
   const handleCreateSubmit = async (name: string, description: string, provider?: any): Promise<void> => {
     try {
-      const newProject = await projectService.createProject(name, description, provider);
+      // provider는 모달 내부에서 처리하므로 여기서는 name, description만 전달
+      const newProject = await projectService.createProject(name, description);
       // 성공 후 처리 로직
       console.log("프로젝트 생성 성공:", newProject);
       console.log("선택된 프로바이더:", provider);
@@ -93,8 +94,8 @@ const DashboardHeader: React.FC<DashboardHeaderProps> = ({
               onClick={handleLogout}
               disabled={isLoggingOut}
               className={`inline-flex items-center px-4 py-2 font-medium rounded-lg transition ${isLoggingOut
-                  ? "bg-gray-100 text-gray-500 cursor-not-allowed"
-                  : "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
+                ? "bg-gray-100 text-gray-500 cursor-not-allowed"
+                : "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
                 }`}
             >
               {isLoggingOut ? "로그아웃 중…" : "로그아웃"}

src/components/ui/ProjectCreateModal.tsx

@@ -1,8 +1,9 @@
 // src/components/modal/CreateProjectModal.tsx
 import React, { useState } from "react";
 import { createProject } from "../../services/projectService";
-import { useNavigate } from "react-router-dom"; // ✅ 추가
-import { PROVIDER_INFO, CloudProviderType } from "../../providers";
+import { useNavigate } from "react-router-dom";
+import { PROVIDER_INFO, CloudProviderType, providerManager } from "../../providers";
+import { useProjectStore } from "../../stores/projectStore";
 
 interface Props {
   isOpen: boolean;
@@ -23,6 +24,7 @@ const CreateProjectModal: React.FC<Props> = ({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
+  const setCurrentCSP = useProjectStore((state) => state.setCurrentCSP);
 
   if (!isOpen) return null;
 
@@ -42,7 +44,24 @@ const CreateProjectModal: React.FC<Props> = ({
       setLoading(true);
       setError(null);
       try {
+        // 1. 프로젝트 생성 (name, description만 전달)
         const project = await createProject(name, description);
+
+        // 2. 선택한 프로바이더를 프론트엔드 상태에 설정
+        // CloudProviderType enum을 문자열로 변환
+        let cspString: "AWS" | "GCP" | "Azure" = "AWS";
+        if (selectedProvider === CloudProviderType.AWS) {
+          cspString = "AWS";
+        } else if (selectedProvider === CloudProviderType.GCP) {
+          cspString = "GCP";
+        } else if (selectedProvider === CloudProviderType.AZURE) {
+          cspString = "Azure";
+        }
+
+        setCurrentCSP(cspString);
+        providerManager.setCurrentProvider(selectedProvider);
+
+        // 3. 프로젝트 에디터 페이지로 이동
         navigate(`/project/${project.id}`);
         onClose();
       } catch (err) {

src/hooks/useProjectManagement.ts

@@ -1,17 +1,19 @@
 import { useCallback } from 'react';
 import { apiFetch } from '../utils/apiClients';
-import { useResetAllStores } from '../stores';
+import { useResetAllStores, useConnectionStore, useProjectStore } from '../stores';
 
 export const useProjectManagement = (projectId: string | undefined, droppedBlocks: any[]) => {
   const resetAllStores = useResetAllStores();
+  const connections = useConnectionStore((state) => state.connections);
+  const currentCSP = useProjectStore((state) => state.currentCSP);
 
   // 새 프로젝트
   const handleNewProject = useCallback(() => {
     resetAllStores();
     console.log('🆕 New project created');
   }, [resetAllStores]);
 
-  // 프로젝트 저장
+  // 프로젝트 저장 (서버)
   const handleSaveProject = useCallback(async () => {
     if (!projectId) {
       alert('URL에서 projectId를 찾을 수 없습니다.');
@@ -26,15 +28,19 @@ export const useProjectManagement = (projectId: string | undefined, droppedBlock
     try {
       await apiFetch(`/api/block/${projectId}`, {
         method: 'POST',
-        body: JSON.stringify({ blocks: droppedBlocks }),
+        body: JSON.stringify({
+          blocks: droppedBlocks,
+          connections: connections,
+          provider: currentCSP || 'AWS',
+        }),
       });
 
       alert('✅ 프로젝트가 성공적으로 저장되었습니다.');
     } catch (err) {
       console.error('❌ 저장 실패:', err);
       alert('❌ 저장 중 오류가 발생했습니다.');
     }
-  }, [projectId, droppedBlocks]);
+  }, [projectId, droppedBlocks, connections, currentCSP]);
 
   return {
     handleNewProject,

src/services/projectService.ts

@@ -1,11 +1,10 @@
 // src/services/projectService.ts
 import { useProjectStore } from "../stores/projectStore";
-import { CloudProviderType } from "../providers";
 
 const API_BASE_URL =
   import.meta.env.VITE_API_BASE_URL || "http://localhost:8080";
 
-export async function createProject(name: string, description: string, provider: CloudProviderType = CloudProviderType.AWS) {
+export async function createProject(name: string, description: string) {
   const accessToken = localStorage.getItem("accessToken"); // ✅ 토큰 가져오기
 
   const response = await fetch(`${API_BASE_URL}/api/projects`, {
@@ -14,7 +13,7 @@ export async function createProject(name: string, description: string, provider:
       "Content-Type": "application/json",
       ...(accessToken && { Authorization: `Bearer ${accessToken}` }), // ✅ 토큰 헤더 추가
     },
-    body: JSON.stringify({ name, description, provider }),
+    body: JSON.stringify({ name, description }),
     credentials: "include", // refreshToken 쿠키도 함께 보냄
   });