[Feature/#373] 최초 로그인 온보딩 투어 구현

package.json

@@ -31,6 +31,7 @@
     "react-dom": "^19.2.0",
     "react-error-boundary": "^6.1.2",
     "react-hook-form": "^7.71.1",
+    "react-joyride": "^3.2.0",
     "react-markdown": "^10.1.0",
     "react-remove-scroll": "^2.7.2",
     "react-router-dom": "^7.12.0",

src/components/common/OnboardingTooltip.tsx

@@ -0,0 +1,68 @@
+import type { TooltipRenderProps } from "react-joyride";
+
+import Button from "@/components/common/button/Button";
+
+export default function OnboardingTooltip({
+  continuous,
+  index,
+  size,
+  step,
+  isLastStep,
+  backProps,
+  primaryProps,
+  skipProps,
+  tooltipProps,
+}: TooltipRenderProps) {
+  return (
+    <div
+      {...tooltipProps}
+      className="bg-surface-100 rounded-3xl shadow-tooltip w-84 overflow-hidden"
+    >
+      <div
+        key={index}
+        className="animate-tooltip-enter flex flex-col gap-4 p-6"
+      >
+        <div className="flex items-start justify-between gap-4">
+          {step.title && (
+            <h3 className="font-heading4 text-text-title whitespace-pre-line">
+              {step.title}
+            </h3>
+          )}
+          <span className="font-caption text-text-muted shrink-0 pt-1">
+            {index + 1} / {size}
+          </span>
+        </div>
+
+        <p className="font-body2 text-text-body leading-relaxed break-keep whitespace-pre-line">
+          {step.content}
+        </p>
+
+        <div className="flex items-center justify-between pt-3 ">
+          {!isLastStep ? (
+            <button
+              {...skipProps}
+              className="font-body2 text-text-muted hover:text-text-body transition-colors duration-150"
+            >
+              건너뛰기
+            </button>
+          ) : (
+            <span />
+          )}
+
+          <div className="flex items-center gap-2">
+            {index > 0 && (
+              <Button {...backProps} size="small" variant="outline">
+                이전
+              </Button>
+            )}
+            {continuous && (
+              <Button {...primaryProps} size="small" variant="primary">
+                {isLastStep ? "완료" : "다음"}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/common/OnboardingTour.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "react";
+import { Joyride } from "react-joyride";
+import { useLocation, useNavigate } from "react-router-dom";
+
+import { useOnboardingTour } from "@/hooks/common/useOnboardingTour";
+
+import OnboardingTooltip from "@/components/common/OnboardingTooltip";
+
+interface IOnboardingTourProps {
+  autoStart?: boolean;
+}
+
+export default function OnboardingTour({
+  autoStart = false,
+}: IOnboardingTourProps) {
+  const { run, startTour, handleEvent, steps, myRole } = useOnboardingTour();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const tourStarted = useRef(false);
+
+  useEffect(() => {
+    if (!autoStart || tourStarted.current) return;
+    if ((myRole === "ADMIN" || myRole === null) && pathname !== "/workspace") {
+      navigate("/workspace", { replace: true });
+      return;
+    }
+    if (myRole === "MEMBER" && pathname !== "/dashboard") {
+      navigate("/dashboard", { replace: true });
+      return;
+    }
+    tourStarted.current = true;
+    startTour();
+  }, [autoStart, myRole, pathname, navigate, startTour]);
+
+  return (
+    <Joyride
+      steps={steps}
+      run={run}
+      onEvent={handleEvent}
+      continuous
+      scrollToFirstStep
+      tooltipComponent={OnboardingTooltip}
+      styles={{
+        spotlight: {
+          style: { transition: "d 280ms cubic-bezier(0.4, 0, 0.2, 1)" },
+        },
+        overlay: { transition: "opacity 200ms ease-out" },
+      }}
+      options={{
+        overlayColor: "rgba(0, 0, 0, 0.5)",
+        zIndex: 1000,
+      }}
+    />
+  );
+}