[기능] 배포 모드 및 배포 정보 모달 UI 추가

src/app/chat/assets/ChatInterface.module.scss

@@ -769,6 +769,210 @@ $white: #ffffff;
     }
 }
 
+.headerActions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.deployButton {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: $primary-green;
+    color: $white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: #047857;
+        transform: translateY(-1px);
+    }
+}
+
+// Deployment Modal Styles
+.deploymentModalBackdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2000;
+}
+
+.deploymentModalContainer {
+    background: $white;
+    border-radius: 0.75rem;
+    width: 90%;
+    max-width: 700px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.deploymentModalHeader {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid $gray-200;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    h3 {
+        margin: 0;
+        font-size: 1.125rem;
+        font-weight: 600;
+    }
+}
+
+.closeButton {
+    background: none;
+    border: none;
+    padding: 0.5rem;
+    margin: -0.5rem;
+    cursor: pointer;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $gray-500;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background-color: $gray-100;
+        color: $gray-800;
+    }
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+.deploymentModalContent {
+    padding: 1.5rem;
+    overflow-y: auto;
+}
+
+.deploymentSection {
+    margin-bottom: 2rem;
+
+    h4 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1rem;
+        font-weight: 600;
+        margin: 0 0 0.75rem 0;
+    }
+
+    p {
+        font-size: 0.875rem;
+        color: $gray-600;
+        margin: 0 0 1rem 0;
+    }
+}
+
+.webPageUrl {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: $gray-100;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+
+    a {
+        flex: 1;
+        color: $primary-blue;
+        text-decoration: none;
+        word-break: break-all;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    button {
+        background: $primary-blue;
+        color: $white;
+        border: none;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.375rem;
+        cursor: pointer;
+    }
+}
+
+.codeSnippet {
+    background: $gray-800;
+    color: $gray-100;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-all;
+    font-size: 0.875rem;
+}
+
+.tabContainer {
+    display: flex;
+    border-bottom: 1px solid $gray-200;
+    padding: 0 1.5rem;
+    margin-top: 0.5rem;
+}
+
+.tabButton {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: $gray-500;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s ease-in-out;
+    margin-bottom: -1px;
+
+    &:hover {
+        color: $gray-800;
+    }
+
+    &.active {
+        color: $primary-blue;
+        border-bottom-color: $primary-blue;
+    }
+}
+
+.deploymentModalContent {
+    padding: 0;
+    overflow-y: auto;
+    max-height: calc(80vh - 120px);
+}
+
+.tabPanel {
+    padding: 1.5rem;
+
+    p {
+        font-size: 0.875rem;
+        color: $gray-600;
+        margin: 0 0 1rem 0;
+    }
+
+    h5 {
+      margin-top: 1.5rem;
+      margin-bottom: 0.5rem;
+    }
+}
+
 // Responsive Design
 @media (max-width: 768px) {
     .header {

src/app/chat/components/ChatArea.tsx

@@ -5,7 +5,7 @@ import { EmptyState } from './EmptyState';
 import { IOLog, Workflow } from './types';
 
 interface ChatAreaProps {
-    mode: "existing" | "new-workflow" | "new-default";
+    mode: "existing" | "new-workflow" | "new-default" | "deploy";
     loading: boolean;
     ioLogs: IOLog[];
     workflow: Workflow;

src/app/chat/components/ChatContent.tsx

@@ -24,7 +24,6 @@ const ChatContentInner: React.FC<ChatContentProps> = ({ onChatStarted }) => {
         const workflowName = searchParams.get('workflow_name');
 
         if (mode === 'existing' && interactionId && workflowId && workflowName) {
-            // 기존 채팅 정보를 설정하고 바로 채팅 화면으로 이동
             const existingWorkflow = {
                 id: workflowId,
                 name: workflowName,

src/app/chat/components/ChatHeader.tsx

@@ -1,8 +1,8 @@
-import { FiArrowLeft, FiMessageSquare } from 'react-icons/fi';
+import { FiArrowLeft, FiMessageSquare, FiUpload } from 'react-icons/fi';
 import styles from '@/app/chat/assets/ChatInterface.module.scss';
 import { ChatHeaderProps } from './types';
 
-const ChatHeader: React.FC<ChatHeaderProps> = ({ mode, workflow, ioLogs, onBack, hideBackButton }) => {
+const ChatHeader: React.FC<ChatHeaderProps> = ({ mode, workflow, ioLogs, onBack, hideBackButton, onDeploy }) => {
     let title = '';
     let subtitle = '';
     let chatCountText = '';
@@ -17,6 +17,10 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({ mode, workflow, ioLogs, onBack,
         title = '일반 채팅';
         subtitle = '자유롭게 대화를 시작하세요';
         chatCountText = '새 채팅';
+    } else if (mode === 'new-workflow') {
+        title = workflow.name;
+        subtitle = '새로운 대화를 시작하세요';
+        chatCountText = '새 채팅';
     } else {
         title = workflow.name;
         subtitle = '새로운 대화를 시작하세요';
@@ -39,9 +43,19 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({ mode, workflow, ioLogs, onBack,
                 </div>
             </div>
             <div className={styles.chatCount}>
+                { mode === 'deploy' ? (
+                    <span></span>
+                ) : (
+                    <button className={styles.deployButton} onClick={onDeploy}>
+                        <FiUpload />
+                        <span>배포</span>
+                    </button>
+                )}
                 <FiMessageSquare />
                 <span>{chatCountText}</span>
+
             </div>
+
         </div>
     );
 };

src/app/chat/components/ChatInterface.tsx

@@ -20,6 +20,7 @@ import CollectionModal from '@/app/chat/components/CollectionModal';
 import { IOLog, ChatInterfaceProps } from './types';
 import ChatHeader from './ChatHeader';
 import { ChatArea } from './ChatArea';
+import { DeploymentModal } from './DeploymentModal';
 
 
 const ChatInterface: React.FC<ChatInterfaceProps> = ({ mode, workflow, onBack, hideBackButton = false, existingChatData }) => {
@@ -32,6 +33,8 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ mode, workflow, onBack, h
     const [showAttachmentMenu, setShowAttachmentMenu] = useState(false);
     const [showCollectionModal, setShowCollectionModal] = useState(false);
     const [selectedCollection, setSelectedCollection] = useState<string | null>(null);
+    const [showDeploymentModal, setShowDeploymentModal] = useState(false);
+
 
     const messagesRef = useRef<HTMLDivElement>(null);
     const attachmentButtonRef = useRef<HTMLDivElement>(null);
@@ -284,6 +287,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ mode, workflow, onBack, h
                 ioLogs={ioLogs} 
                 onBack={onBack}
                 hideBackButton={hideBackButton}
+                onDeploy={() => setShowDeploymentModal(true)}
             ></ChatHeader>
 
             {/* Chat Area */}
@@ -401,6 +405,11 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ mode, workflow, onBack, h
                     </div>
                 </>
             </div>
+            <DeploymentModal
+                isOpen={showDeploymentModal}
+                onClose={() => setShowDeploymentModal(false)}
+                workflow={workflow}
+            />
 
             {/* Collection Modal */}
             <CollectionModal