add_chat

src/app/_common/components/sidebarConfig.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+    FiGrid,
+    FiFolder,
+    FiCpu,
+    FiSettings,
+    FiEye,
+} from 'react-icons/fi';
+import { SidebarItem } from '@/app/main/components/types';
+
+// 워크플로우 관리 센터의 공통 사이드바 아이템들을 반환하는 함수
+export const getSidebarItems = (): SidebarItem[] => [
+    {
+        id: 'canvas',
+        title: '워크플로우 캔버스',
+        description: '새로운 워크플로우 만들기',
+        icon: React.createElement(FiGrid),
+    },
+    {
+        id: 'workflows',
+        title: '완성된 워크플로우',
+        description: '저장된 워크플로우 관리',
+        icon: React.createElement(FiFolder),
+    },
+    {
+        id: 'exec-monitor',
+        title: '실행 및 모니터링',
+        description: '워크플로우 실행과 성능 모니터링',
+        icon: React.createElement(FiCpu),
+    },
+    {
+        id: 'settings',
+        title: '고급 환경 설정',
+        description: 'LLM 및 Tool 환경변수 직접 관리',
+        icon: React.createElement(FiSettings),
+    },
+    {
+        id: 'config-viewer',
+        title: '설정값 확인',
+        description: '백엔드 환경변수 및 설정 확인',
+        icon: React.createElement(FiEye),
+    },
+];
+
+// 공통 아이템 클릭 핸들러 (localStorage 사용)
+export const createItemClickHandler = (router: any) => {
+    return (itemId: string) => {
+        // 클릭한 섹션을 localStorage에 저장하고 /main으로 이동
+        localStorage.setItem('activeSection', itemId);
+        router.push('/main');
+    };
+};

src/app/canvas/components/Header.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, KeyboardEvent, ChangeEvent } from '
 import Link from 'next/link';
 import styles from '@/app/canvas/assets/Header.module.scss';
 import { LuPanelRightOpen, LuSave, LuCheck, LuX, LuPencil, LuFileText } from "react-icons/lu";
-import { getWorkflowName, saveWorkflowName } from '@/app/(common)/components/workflowStorage';
+import { getWorkflowName, saveWorkflowName } from '@/app/_common/components/workflowStorage';
 
 // Type definitions
 interface HeaderProps {

src/app/canvas/components/SideMenuPanel/AddNodePanel.tsx

@@ -5,7 +5,7 @@ import NodeList from '@/app/canvas/components/Helper/NodeList';
 import DraggableNodeItem from '@/app/canvas/components/Helper/DraggableNodeItem';
 import { LuSearch, LuArrowLeft, LuBrainCircuit, LuShare2, LuWrench, LuX, LuRefreshCw } from 'react-icons/lu';
 import { SiLangchain } from "react-icons/si";
-import { useNodes } from '@/app/(common)/components/nodeHook';
+import { useNodes } from '@/app/_common/components/nodeHook';
 import type {
     Port,
     Parameter,

src/app/canvas/components/SideMenuPanel/TemplatePanel.tsx

@@ -5,7 +5,7 @@ import styles from '@/app/canvas/assets/WorkflowPanel.module.scss';
 import sideMenuStyles from '@/app/canvas/assets/SideMenu.module.scss';
 import { LuArrowLeft, LuLayoutTemplate, LuPlay, LuCopy } from "react-icons/lu";
 import TemplatePreview from '@/app/canvas/components/SideMenuPanel/TemplatePreview';
-import { getWorkflowState } from '@/app/(common)/components/workflowStorage';
+import { getWorkflowState } from '@/app/_common/components/workflowStorage';
 import { devLog } from '@/app/utils/logger';
 
 import Basic_Chatbot from '@/app/canvas/constants/workflow/Basic_Chatbot.json';

src/app/canvas/components/SideMenuPanel/WorkflowPanel.tsx

@@ -5,7 +5,7 @@ import styles from '@/app/canvas/assets/WorkflowPanel.module.scss';
 import sideMenuStyles from '@/app/canvas/assets/SideMenu.module.scss'; 
 import { LuArrowLeft, LuFolderOpen, LuDownload, LuRefreshCw, LuCalendar, LuTrash2 } from "react-icons/lu";
 import { listWorkflows, loadWorkflow, deleteWorkflow } from '@/app/api/workflowAPI';
-import { getWorkflowState } from '@/app/(common)/components/workflowStorage';
+import { getWorkflowState } from '@/app/_common/components/workflowStorage';
 import { devLog } from '@/app/utils/logger';
 import type {
     Position,

src/app/canvas/page.tsx

@@ -18,7 +18,7 @@ import {
     ensureValidWorkflowState,
     saveWorkflowName,
     startNewWorkflow,
-} from '@/app/(common)/components/workflowStorage';
+} from '@/app/_common/components/workflowStorage';
 import { devLog } from '@/app/utils/logger';
 import { generateWorkflowHash } from '@/app/utils/generateSha1Hash';
 

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

@@ -0,0 +1,166 @@
+// Chat Content Styles
+$primary-blue: #2563eb;
+$primary-purple: #7c3aed;
+$primary-green: #059669;
+$gray-50: #f9fafb;
+$gray-100: #f3f4f6;
+$gray-200: #e5e7eb;
+$gray-300: #d1d5db;
+$gray-400: #9ca3af;
+$gray-500: #6b7280;
+$gray-600: #4b5563;
+$gray-700: #374151;
+$gray-800: #1f2937;
+$gray-900: #111827;
+$white: #ffffff;
+
+.chatContainer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: $white;
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+.welcomeSection {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem;
+  transition: all 0.5s ease;
+  overflow: hidden;
+}
+
+.workflowSection {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 2rem;
+  transition: all 0.5s ease;
+  overflow: hidden;
+
+  .container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+
+.welcomeContent {
+  text-align: center;
+  max-width: 600px;
+
+  h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: $gray-900;
+    margin: 0 0 1rem 0;
+    background: linear-gradient(135deg, $primary-blue 0%, $primary-purple 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  p {
+    font-size: 1.125rem;
+    color: $gray-600;
+    margin: 0 0 3rem 0;
+    line-height: 1.6;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  gap: 1.5rem;
+  margin-top: 2rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.workflowButton,
+.chatButton {
+  background: $white;
+  border: 2px solid $gray-200;
+  border-radius: 1rem;
+  padding: 2rem 1.5rem;
+  text-align: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  width: 220px;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  flex-shrink: 0;
+
+  svg {
+    font-size: 2rem;
+    color: $primary-blue;
+    transition: all 0.3s ease;
+  }
+
+  h3 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: $gray-900;
+    margin: 0;
+  }
+
+  p {
+    font-size: 0.875rem;
+    color: $gray-500;
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  &:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    border-color: $primary-blue;
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);
+
+    svg {
+      color: $primary-purple;
+      transform: scale(1.1);
+    }
+  }
+
+  &:active {
+    transform: translateY(-1px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+  .welcomeContent {
+    padding: 1.5rem;
+
+    h1 {
+      font-size: 2rem;
+    }
+
+    p {
+      font-size: 1rem;
+    }
+  }
+
+  .buttonContainer {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .workflowButton,
+  .chatButton {
+    width: 100%;
+    max-width: 280px;
+    height: 160px;
+    padding: 1.5rem;
+  }
+}