feat: 튜토리얼 관련 UI 개선 및 상태 관리 로직 수정, 서비스 생성 폼 상태 제어 추가

Author: Yoon-Hae-Min

src/app/App.tsx

@@ -4,15 +4,16 @@ import { ContainerDetailsPage } from '@/pages/containers/container-details';
 import { DashboardPage } from '@/pages/dashboard';
 import { ServiceDetailsPage, ServicesPage } from '@/pages/services';
 import { TutorialPage } from '@/pages/tutorial';
-import { TutorialWidget } from '@/widgets/tutorial';
 
+import { TutorialWidget } from '@/widgets/tutorial';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { Providers } from './providers';
 
 export const App = () => {
   return (
     <div className="w-full h-full flex flex-col">
       <Providers>
+        <TutorialWidget />
         <BrowserRouter basename="/CM2-Frontend/">
           <Routes>
             <Route path="/" element={<DashboardPage />} />
@@ -25,7 +26,6 @@ export const App = () => {
             <Route path="/tutorial" element={<TutorialPage />} />
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
-          <TutorialWidget />
         </BrowserRouter>
       </Providers>
     </div>

src/pages/cluster/cluster-page.tsx

@@ -253,7 +253,7 @@ export const ClusterPage = () => {
               {clusterNodes.nodes.map((node) => (
                 <div key={node.id} className="p-6 hover:bg-gray-50 transition-colors">
                   <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-4">
+                    <div className="flex items-center gap-4" data-tour="node-details" tabIndex={0}>
                       {getRoleIcon(node.managerStatus)}
                       <div>
                         <div className="flex items-center gap-3">

src/pages/services/services-page.tsx

@@ -2,25 +2,26 @@ import { Button } from '@/components/ui/button';
 import { servicesApi, useServices } from '@/shared/api';
 import { CreateServiceRequest, Service } from '@/shared/api/services';
 import { useToastContext } from '@/shared/contexts';
+import { useTutorialStore } from '@/shared/stores/tutorial-store';
 import { Card } from '@/shared/ui/card/card';
 import { Layout } from '@/widgets/layout';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
-    AlertTriangle,
-    Container,
-    Database,
-    Globe,
-    Minus,
-    Monitor,
-    Network,
-    Play,
-    Plus,
-    RefreshCw,
-    Server,
-    Settings,
-    Square,
-    Trash2,
-    Zap
+  AlertTriangle,
+  Container,
+  Database,
+  Globe,
+  Minus,
+  Monitor,
+  Network,
+  Play,
+  Plus,
+  RefreshCw,
+  Server,
+  Settings,
+  Square,
+  Trash2,
+  Zap
 } from 'lucide-react';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -29,7 +30,8 @@ export const ServicesPage = () => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { showSuccess, showError, showWarning } = useToastContext();
-  const [showCreateForm, setShowCreateForm] = useState(false);
+  const serviceCreateFormOpen = useTutorialStore((s) => s.serviceCreateFormOpen);
+  const setServiceCreateFormOpen = useTutorialStore((s) => s.setServiceCreateFormOpen);
   const [newServiceName, setNewServiceName] = useState('');
   const [newServiceImage, setNewServiceImage] = useState('nginx:latest');
 
@@ -46,7 +48,7 @@ export const ServicesPage = () => {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['services'] });
       showSuccess('서비스가 성공적으로 생성되었습니다.');
-      setShowCreateForm(false);
+      setServiceCreateFormOpen(false);
       setNewServiceName('');
       setNewServiceImage('nginx:latest');
     },
@@ -211,7 +213,7 @@ export const ServicesPage = () => {
               새로고침
             </Button>
             <Button 
-              onClick={() => setShowCreateForm(!showCreateForm)}
+              onClick={() => setServiceCreateFormOpen(!serviceCreateFormOpen)}
               className="flex items-center gap-2"
               data-tour="create-service-button"
             >
@@ -222,7 +224,7 @@ export const ServicesPage = () => {
         </div>
 
         {/* 서비스 생성 폼 */}
-        {showCreateForm && (
+        {serviceCreateFormOpen && (
           <Card className="p-6" data-tour="service-create-form">
             <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
               <Plus className="w-5 h-5" />
@@ -289,26 +291,20 @@ export const ServicesPage = () => {
               </div>
             </div>
 
-            <div className="flex items-center gap-3 mt-6">
-              <Button 
-                onClick={handleCreateService}
-                disabled={createServiceMutation.isPending}
-                className="flex items-center gap-2"
-                data-tour="submit-service-button"
-              >
-                {createServiceMutation.isPending ? (
-                  <RefreshCw className="w-4 h-4 animate-spin" />
-                ) : (
-                  <Plus className="w-4 h-4" />
-                )}
-                생성
-              </Button>
-              <Button 
-                onClick={() => setShowCreateForm(false)}
+            <div className="flex justify-end gap-2 mt-6">
+              <Button
                 variant="outline"
+                onClick={() => setServiceCreateFormOpen(false)}
               >
                 취소
               </Button>
+              <Button
+                onClick={handleCreateService}
+                data-tour="submit-service-button"
+                disabled={createServiceMutation.isPending}
+              >
+                {createServiceMutation.isPending ? '생성 중...' : '생성'}
+              </Button>
             </div>
           </Card>
         )}
@@ -419,6 +415,12 @@ export const ServicesPage = () => {
                         >
                           {service.replicas || 1}
                         </span>
+                        <span
+                          className="sr-only"
+                          data-tour="confirm-scale-up"
+                        >
+                          스케일업 완료 튜토리얼 타겟
+                        </span>
                         <Button
                           size="sm"
                           variant="ghost"
@@ -487,7 +489,7 @@ export const ServicesPage = () => {
                 첫 번째 서비스를 생성하여 애플리케이션을 배포해보세요.
               </p>
               <Button 
-                onClick={() => setShowCreateForm(true)}
+                onClick={() => setServiceCreateFormOpen(true)}
                 className="flex items-center gap-2"
               >
                 <Plus className="w-4 h-4" />

src/pages/tutorial/tutorial-page.tsx

@@ -4,20 +4,48 @@ import { Layout } from '@/widgets/layout';
 import { BookOpen, LifeBuoy, Network, Server } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 
+// 시나리오 하드코딩 (카드용, 실제 단계는 store에서 관리)
+const scenarios = [
+  {
+    id: 'service-lifecycle',
+    title: '서비스 생명주기 관리',
+    description: '서비스 생성부터 삭제까지 전체 생명주기를 관리하는 방법을 학습합니다.',
+    steps: 7,
+    tourTarget: 'go-services',
+  },
+  {
+    id: 'cluster-monitoring',
+    title: '클러스터 모니터링',
+    description: '클러스터 전체 상태와 개별 노드의 상태를 모니터링하는 방법을 학습합니다.',
+    steps: 6,
+    tourTarget: 'go-cluster',
+  },
+  {
+    id: 'failure-handling',
+    title: '장애 대응',
+    description: '시스템 장애 상황을 시뮬레이션하고 대응하는 방법을 학습합니다.',
+    steps: 5,
+    tourTarget: 'go-cluster',
+  },
+  {
+    id: 'scale-up',
+    title: '서비스 스케일업',
+    description: '서비스의 레플리카 수를 조정하여 확장하는 방법을 학습합니다.',
+    steps: 4,
+    tourTarget: 'go-services',
+  },
+];
+
 export const TutorialPage = () => {
-  const { scenarios, openTutorial, isOpen } = useTutorialStore();
   const scenarioRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const openTutorial = useTutorialStore((s) => s.openTutorial);
 
   useEffect(() => {
     if (scenarioRefs.current[0]) {
       scenarioRefs.current[0].focus();
     }
   }, []);
 
-  const handleStartTutorial = (scenarioId: string) => {
-    openTutorial(scenarioId);
-  };
-
   // 시나리오별 대표 아이콘 매핑
   const scenarioIcons: Record<string, React.ReactNode> = {
     'service-lifecycle': <Server className="w-8 h-8 text-blue-500" />,
@@ -54,7 +82,8 @@ export const TutorialPage = () => {
               }}
               tabIndex={0}
               className="cursor-pointer transition-transform hover:scale-[1.025] focus:outline-none focus:ring-2 focus:ring-blue-500 group"
-              onClick={() => handleStartTutorial(scenario.id)}
+              onClick={() => openTutorial(scenario.id)}
+              data-tour={scenario.tourTarget}
             >
               <CardContent className="flex flex-col gap-2 min-h-[160px] justify-between">
                 <div className="flex items-center gap-3 mb-2">
@@ -66,22 +95,15 @@ export const TutorialPage = () => {
                 </div>
                 <p className="text-gray-700 dark:text-gray-300 mb-2 flex-1">{scenario.description}</p>
                 <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 mt-2">
-                  <span>{scenario.steps.length}단계</span>
+                  <span>{scenario.steps}단계</span>
                   <span>•</span>
-                  <span>약 {Math.ceil(scenario.steps.length * 1.5)}분</span>
+                  <span>약 {Math.ceil(scenario.steps * 1.5)}분</span>
                 </div>
               </CardContent>
             </Card>
           ))}
         </div>
       </section>
-
-      {/* 오버레이(투어) 진행 시 전체 오버레이만 표시 */}
-      {isOpen && (
-        <div className="fixed inset-0 z-50">
-          {/* TutorialOverlay는 글로벌하게 렌더링되므로 별도 표시 불필요 */}
-        </div>
-      )}
     </Layout>
   );
 };