feat: 튜토리얼 페이지 제작

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { dehydrate, QueryClient } from "@tanstack/react-query";
 import type { Metadata } from "next";
 
 import Toast from "@/components/common/toast/index";
+import TutorialContainer from "@/components/common/tutorial/_components/tutorial-container";
 import MainContent from "@/components/main-content";
 import NavBar from "@/components/nav-bar";
 import AuthInitializer from "@/provider/AuthInitializer";
@@ -52,6 +53,7 @@ export default async function RootLayout({
           <AuthRefreshHandler />
           <NavBar />
           <Toast />
+          <TutorialContainer />
           <MainContent>{children}</MainContent>
         </Providers>
       </body>

src/app/search/[id]/_components/tutorial/constant/index.ts

@@ -0,0 +1,45 @@
+import { TutorialStep } from "../types";
+
+const TUTORIAL_STEPS: TutorialStep[] = [
+  {
+    title: "차트 보기",
+    content: [
+      {
+        subtitle: "기간 설정",
+        description: "일/주/월 버튼으로 원하는 기간의 차트를 확인하세요.",
+      },
+      {
+        subtitle: "이동평균선(MA)",
+        description: "MA 버튼으로 주가의 평균 추세선을 표시할 수 있어요.",
+      },
+    ],
+  },
+  {
+    title: "거래하기",
+    content: [
+      {
+        subtitle: "매수/매도",
+        description: "원하는 거래 유형을 선택하고 수량과 가격을 입력하세요.",
+      },
+      {
+        subtitle: "실시간 호가",
+        description: "현재 매수/매도 호가를 실시간으로 확인할 수 있어요.",
+      },
+    ],
+  },
+  {
+    title: "주문 관리",
+    content: [
+      {
+        subtitle: "체결 내역",
+        description: "체결내역 탭에서 완료된 거래를 확인하세요.",
+      },
+      {
+        subtitle: "미체결 주문",
+        description: "정정/취소 탭에서 아직 체결되지 않은 주문을 관리하세요.",
+      },
+    ],
+  },
+];
+
+export default TUTORIAL_STEPS;

src/app/search/[id]/_components/tutorial/tutorial-container.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import ChartTutorialModal from "./tutorial-modal";
+
+export default function ChartTutorialContainer() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const hasCompletedTutorial = localStorage.getItem(
+      "chart-tutorial-completed",
+    );
+    if (!hasCompletedTutorial) {
+      setIsOpen(true);
+      localStorage.setItem("chart-tutorial-completed", "true");
+    }
+  }, []);
+
+  return (
+    <ChartTutorialModal isOpen={isOpen} onClose={() => setIsOpen(false)} />
+  );
+}

src/app/search/[id]/_components/tutorial/tutorial-modal.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { useCallback, useState } from "react";
+
+import BaseModal from "@/components/common/modal";
+import TutorialContent from "@/components/common/tutorial/_components/tutorial-contents";
+
+import TUTORIAL_STEPS from "./constant";
+
+interface TutorialModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function TutorialModal({ isOpen, onClose }: TutorialModalProps) {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const handleNext = useCallback(() => {
+    setCurrentStep((prev) => Math.min(prev + 1, TUTORIAL_STEPS.length - 1));
+  }, []);
+
+  const handlePrev = useCallback(() => {
+    setCurrentStep((prev) => Math.max(prev - 1, 0));
+  }, []);
+
+  const handleComplete = useCallback(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("stock-tutorial-completed", "true");
+    }
+    onClose();
+  }, [onClose]);
+
+  return (
+    <BaseModal isOpen={isOpen} onClose={onClose}>
+      <div className="shadow-xl rounded-lg bg-white px-26 py-20">
+        <div className="mb-15 flex items-center justify-between">
+          <h2 className="text-24-600 text-gray-900">주식 거래 시작하기</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-full p-1 hover:bg-gray-100"
+          >
+            <X className="size-25 text-gray-500" />
+          </button>
+        </div>
+
+        <TutorialContent step={TUTORIAL_STEPS[currentStep]} />
+
+        <div className="flex items-center justify-between">
+          <div className="text-16-600 text-gray-500">
+            {currentStep + 1} / {TUTORIAL_STEPS.length}
+          </div>
+          <div className="flex gap-10">
+            {currentStep > 0 && (
+              <button
+                type="button"
+                onClick={handlePrev}
+                className="flex items-center gap-4 rounded-md border border-gray-300 px-8 py-4 text-16-600 text-gray-700 hover:bg-gray-50"
+              >
+                <ChevronLeft className="size-16" />
+                이전
+              </button>
+            )}
+            {currentStep < TUTORIAL_STEPS.length - 1 ? (
+              <button
+                type="button"
+                onClick={handleNext}
+                className="flex items-center gap-4 rounded-md bg-green-500 px-8 py-4 text-16-600 text-white hover:bg-green-600"
+              >
+                다음
+                <ChevronRight className="size-16" />
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={handleComplete}
+                className="rounded-md bg-green-500 px-8 py-4 text-16-600 text-white hover:bg-green-600"
+              >
+                시작하기
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </BaseModal>
+  );
+}

src/app/search/[id]/_components/tutorial/types/index.ts

@@ -0,0 +1,9 @@
+export interface TutorialContentItem {
+  subtitle: string;
+  description: string;
+}
+
+export interface TutorialStep {
+  title: string;
+  content: TutorialContentItem[];
+}

src/app/search/[id]/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import CandlestickChartContainer from "./_components/candle-chart-container";
 import StockHeader from "./_components/stock-header";
 import TransactionForm from "./_components/transaction-form";
+import TutorialContainer from "./_components/tutorial/tutorial-container";
 import { ChartResponse, StockInfo, VolumeResponse } from "./types";
 
 async function getInitialData(id: string) {
@@ -59,6 +60,7 @@ export default async function StockPage({
     const stockName = decodeURIComponent(params.id);
     return (
       <div className="p-30">
+        <TutorialContainer />
         <StockHeader
           stockName={params.id}
           initialStockInfo={initialData.stockData}

src/components/common/tutorial/_components/tutorial-container.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import TutorialModal from "./tutorial-modal";
+
+export default function TutorialContainer() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const hasCompletedTutorial = localStorage.getItem("nav-tutorial-completed");
+    if (!hasCompletedTutorial) {
+      setIsOpen(true);
+      // 튜토리얼을 본 것으로 표시
+      localStorage.setItem("nav-tutorial-completed", "true");
+    }
+  }, []);
+
+  return <TutorialModal isOpen={isOpen} onClose={() => setIsOpen(false)} />;
+}

src/components/common/tutorial/_components/tutorial-contents.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable */
+
+import { TutorialStep } from "../types";
+
+interface TutorialContentProps {
+  step: TutorialStep;
+}
+
+export default function TutorialContent({ step }: TutorialContentProps) {
+  return (
+    <div className="mb-20">
+      <h3 className="text-20-500 mb-10 font-semibold text-gray-800">
+        {step.title}
+      </h3>
+
+      <div className="space-y-20">
+        {step.content.map((item, idx) => (
+          <div key={`${step.title}-content-${idx}`}>
+            <h4 className="text-16-600 text-gray-700 mb-10">{item.subtitle}</h4>
+            <p className="text-14-500 text-gray-600">{item.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/common/tutorial/_components/tutorial-modal.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+
+import BaseModal from "@/components/common/modal";
+
+import TUTORIAL_STEPS from "../constant";
+import TutorialContent from "./tutorial-contents";
+
+interface TutorialModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function TutorialModal({ isOpen, onClose }: TutorialModalProps) {
+  const [currentStep, setCurrentStep] = useState(0);
+  const router = useRouter();
+
+  // 스텝에 따른 경로 반환
+  const getPathForStep = (step: number) => {
+    switch (step) {
+      case 0:
+        return "/";
+      case 1:
+        return "/search";
+      case 2:
+        return "/my-account";
+      case 3:
+        return "/portfolio";
+      default:
+        return "/";
+    }
+  };
+
+  const handleNext = useCallback(() => {
+    setCurrentStep((prev) => Math.min(prev + 1, TUTORIAL_STEPS.length - 1));
+    // 페이지 이동
+    router.push(getPathForStep(currentStep + 1));
+  }, [currentStep, router]);
+
+  const handlePrev = useCallback(() => {
+    setCurrentStep((prev) => Math.max(prev - 1, 0));
+    // 페이지 이동
+    router.push(getPathForStep(currentStep - 1));
+  }, [currentStep, router]);
+
+  const handleComplete = useCallback(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("nav-tutorial-completed", "true");
+    }
+    onClose();
+  }, [onClose]);
+
+  return (
+    <BaseModal isOpen={isOpen} onClose={onClose}>
+      <div className="shadow-xl rounded-lg bg-white px-26 py-20">
+        <div className="mb-15 flex items-center justify-between">
+          <h2 className="text-24-600 text-gray-900">GrowFoilo 둘러보기</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-full p-3 hover:bg-gray-100"
+          >
+            <X className="size-25 text-gray-500" />
+          </button>
+        </div>
+
+        <TutorialContent step={TUTORIAL_STEPS[currentStep]} />
+
+        <div className="flex items-center justify-between">
+          <div className="text-16-600 text-gray-500">
+            {currentStep + 1} / {TUTORIAL_STEPS.length}
+          </div>
+          <div className="flex gap-10">
+            {currentStep > 0 && (
+              <button
+                type="button"
+                onClick={handlePrev}
+                className="flex items-center gap-4 rounded-md border border-gray-300 px-8 py-4 text-16-600 text-gray-700 hover:bg-gray-50"
+              >
+                <ChevronLeft className="size-16" />
+                이전
+              </button>
+            )}
+            {currentStep < TUTORIAL_STEPS.length - 1 ? (
+              <button
+                type="button"
+                onClick={handleNext}
+                className="flex items-center gap-4 rounded-md bg-green-500 px-8 py-4 text-16-600 text-white hover:bg-green-600"
+              >
+                다음
+                <ChevronRight className="size-16" />
+              </button>
+            ) : (
+              <button
+                type="button"
+                onClick={handleComplete}
+                className="rounded-md bg-green-500 px-8 py-4 text-16-600 text-white hover:bg-green-600"
+              >
+                시작하기
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </BaseModal>
+  );
+}