[#394] feat(guide): 가이드북 페이지 추가

next.config.ts

@@ -4,20 +4,30 @@ const nextConfig: NextConfig = {
   reactCompiler: true,
   images: {
     remotePatterns: [
-      { protocol: "http", hostname: "k.kakaocdn.net" },
-      { protocol: "http", hostname: "img1.kakaocdn.net" },
-      { protocol: "https", hostname: "picsum.photos" },
-      { protocol: "https", hostname: "images.unsplash.com" },
-      { protocol: "https", hostname: "static.toss.im" },
-      { protocol: "https", hostname: "windfall-bucket.s3.ap-northeast-2.amazonaws.com" },
-      { protocol: "https", hostname: "wind-fall.store" },
+      // Kakao
       { protocol: "http", hostname: "img1.kakaocdn.net" },
+      { protocol: "http", hostname: "k.kakaocdn.net" },
+
+      // Naver
       { protocol: "http", hostname: "phinf.pstatic.net" },
-      { protocol: "http", hostname: "ssl.pstatic.net" },
-      { protocol: "http", hostname: "lh3.googleusercontent.com" },
       { protocol: "https", hostname: "phinf.pstatic.net" },
+      { protocol: "http", hostname: "ssl.pstatic.net" },
       { protocol: "https", hostname: "ssl.pstatic.net" },
+
+      // Google
+      { protocol: "http", hostname: "lh3.googleusercontent.com" },
       { protocol: "https", hostname: "lh3.googleusercontent.com" },
+
+      // Placeholder / Stock
+      { protocol: "https", hostname: "picsum.photos" },
+      { protocol: "https", hostname: "images.unsplash.com" },
+
+      // Toss
+      { protocol: "https", hostname: "static.toss.im" },
+
+      // Windfall
+      { protocol: "https", hostname: "wind-fall.store" },
+      { protocol: "https", hostname: "windfall-bucket.s3.ap-northeast-2.amazonaws.com" },
     ],
   },
   async rewrites() {

package.json

@@ -41,6 +41,7 @@
     "dayjs": "^1.11.19",
     "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.556.0",
+    "motion": "^12.25.0",
     "nanoid": "^5.1.6",
     "next": "16.0.8",
     "next-themes": "^0.4.6",

src/app/(public)/guide/page.tsx

@@ -1,5 +1,5 @@
-import GuideScreen from "@/screens/guide/ui/guide-screen";
+import { Guidebook } from "@/screens/guide/ui/guide";
 
-export default function page() {
-  return <GuideScreen />;
+export default function Page() {
+  return <Guidebook />;
 }

src/app/layout.tsx

@@ -12,6 +12,7 @@ import { ServerTimeStoreProvider } from "@/shared/lib/providers/server-time-stor
 import "@/shared/styles/globals.css";
 import { ToastRegistry } from "@/shared/ui/toast/toast-registry";
 import { BottomNav } from "@/widgets/bottom-nav";
+import { GuideFirstVisitGate } from "@/widgets/guide/guide-first-visit-gate";
 import { Header } from "@/widgets/header/header";
 
 const inter = Inter({
@@ -41,6 +42,7 @@ export default function RootLayout({
           <ServerTimeStoreProvider>
             <QueryProvider>
               <NotificationSseProvider />
+              <GuideFirstVisitGate />
               <div className="flex min-h-full flex-col">
                 <Header />
                 <main className="flex-1 select-none">{children}</main>

src/entities/auction/hooks/use-auction-socket.tsx

@@ -51,7 +51,7 @@ export default function useAuctionSocket(auctionId: string) {
       },
 
       onDisconnect: () => {
-        console.log("[STOMP] disconnected");
+        console.warn("[STOMP] disconnected");
       },
 
       onStompError: (frame) => {

src/screens/guide/hooks/use-section-pager.ts

@@ -0,0 +1,101 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+
+interface UseSectionPagerOptions {
+  pageCount: number;
+  currentIndex: number;
+  onChange: (nextIndex: number, direction: 1 | -1) => void;
+  lockMs?: number;
+  threshold?: number;
+}
+
+export function useSectionPager({
+  pageCount,
+  currentIndex,
+  onChange,
+  lockMs = 650,
+  threshold = 70,
+}: UseSectionPagerOptions) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const lockRef = useRef(false);
+  const accRef = useRef(0);
+
+  const commit = useCallback(
+    (next: number) => {
+      const clamped = Math.max(0, Math.min(pageCount - 1, next));
+      if (clamped === currentIndex) return;
+
+      const dir: 1 | -1 = clamped > currentIndex ? 1 : -1;
+      lockRef.current = true;
+      onChange(clamped, dir);
+
+      window.setTimeout(() => {
+        lockRef.current = false;
+        accRef.current = 0;
+      }, lockMs);
+    },
+    [currentIndex, lockMs, onChange, pageCount]
+  );
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const shouldIgnore = (target: EventTarget | null) => {
+      if (!(target instanceof HTMLElement)) return false;
+
+      const tag = target.tagName.toLowerCase();
+      if (tag === "input" || tag === "textarea" || tag === "select") return true;
+      if (target.isContentEditable) return true;
+      if (target.closest('[data-allow-scroll="true"]')) return true;
+
+      return false;
+    };
+
+    const onWheel = (e: WheelEvent) => {
+      if (lockRef.current) return;
+      if (shouldIgnore(e.target)) return;
+
+      e.preventDefault();
+      accRef.current += e.deltaY;
+
+      if (Math.abs(accRef.current) < threshold) return;
+
+      if (accRef.current > 0) {
+        commit(currentIndex + 1);
+      } else {
+        commit(currentIndex - 1);
+      }
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (lockRef.current) return;
+      if (shouldIgnore(document.activeElement)) return;
+
+      if (e.key === "ArrowRight" || e.key === "PageDown") {
+        e.preventDefault();
+        commit(currentIndex + 1);
+      }
+      if (e.key === "ArrowLeft" || e.key === "PageUp") {
+        e.preventDefault();
+        commit(currentIndex - 1);
+      }
+    };
+
+    el.addEventListener("wheel", onWheel, { passive: false });
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [commit, currentIndex, threshold]);
+
+  return {
+    containerRef,
+    goNext: () => commit(currentIndex + 1),
+    goPrev: () => commit(currentIndex - 1),
+    goTo: (i: number) => commit(i),
+  };
+}

src/screens/guide/model/guide-constants.ts

@@ -0,0 +1 @@
+export const GUIDE_STORAGE_KEY = "windfall_guide_seen";

src/screens/guide/model/guide-data.ts

@@ -0,0 +1,108 @@
+import {
+  Calendar,
+  Clock,
+  DollarSign,
+  Package,
+  Shield,
+  TrendingDown,
+  Zap,
+  type LucideIcon,
+} from "lucide-react";
+
+export interface Keyword {
+  icon: LucideIcon;
+  label: string;
+  description: string;
+}
+
+export const KEYWORDS: Keyword[] = [
+  { icon: Clock, label: "시간", description: "시간이 흐르면서" },
+  { icon: TrendingDown, label: "가격 하락", description: "가격이 점점 낮아지고" },
+  { icon: Zap, label: "선점", description: "먼저 구매하는 사람이 승리" },
+];
+
+export interface PricePoint {
+  time: string;
+  price: number;
+  label?: string;
+}
+
+export const priceData: PricePoint[] = [
+  { time: "00:00", price: 100000, label: "시작" },
+  { time: "00:05", price: 95000 },
+  { time: "00:10", price: 90000 },
+  { time: "00:15", price: 85000 },
+  { time: "00:20", price: 80000, label: "구매 완료" },
+];
+
+export interface ChatMessage {
+  id: number;
+  text: string;
+  type: "thinking" | "waiting" | "success";
+}
+
+export const messages: ChatMessage[] = [
+  { id: 1, text: "지금 사야 하나...?", type: "thinking" },
+  { id: 2, text: "조금만 더 기다려볼까?", type: "thinking" },
+  { id: 3, text: "다른 사람이 먼저 사면 어떡하지", type: "waiting" },
+  { id: 4, text: "지금이다! 구매 완료!", type: "success" },
+];
+
+export const priceSteps = [
+  { time: "00:05", price: 90000 },
+  { time: "00:10", price: 85000 },
+  { time: "00:15", price: 80000 },
+];
+
+export interface Step {
+  id: number;
+  icon: LucideIcon;
+  label: string;
+  placeholder: string;
+  description: string;
+}
+
+export const steps: Step[] = [
+  {
+    id: 1,
+    icon: Package,
+    label: "상품명",
+    placeholder: "예: 프리미엄 무선 이어폰",
+    description: "판매할 상품의 이름을 입력하세요",
+  },
+  {
+    id: 2,
+    icon: DollarSign,
+    label: "시작 가격",
+    placeholder: "예: 100,000",
+    description: "경매가 시작되는 가격을 설정하세요",
+  },
+  {
+    id: 3,
+    icon: TrendingDown,
+    label: "가격 하락 단위",
+    placeholder: "예: 5,000",
+    description: "5분마다 하락할 금액을 설정하세요",
+  },
+  {
+    id: 4,
+    icon: Shield,
+    label: "Stop Loss",
+    placeholder: "예: 50,000",
+    description: "최대 하락 가격을 설정하세요",
+  },
+  {
+    id: 5,
+    icon: Calendar,
+    label: "경매 시작 일정",
+    placeholder: "예: 2026-01-15 14:00",
+    description: "경매 시작 시간을 설정하세요",
+  },
+];
+
+export const guideImages = {
+  liveAuction:
+    "https://images.unsplash.com/photo-1762553159827-7a5d2167b55d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx3aXJlbGVzcyUyMGVhcmJ1ZHMlMjBwcmVtaXVtfGVufDF8fHx8MTc2Nzk2NDY2OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+  upcomingAuction:
+    "https://images.unsplash.com/photo-1745256375848-1d599594635d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbWFydCUyMHdhdGNoJTIwbW9kZXJufGVufDF8fHx8MTc2ODA2NjgzMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
+};

src/screens/guide/ui/guide-pages.tsx

@@ -0,0 +1,5 @@
+export { GuidebookPage1 } from "./pages/guidebook-page1";
+export { GuidebookPage2 } from "./pages/guidebook-page2";
+export { GuidebookPage3 } from "./pages/guidebook-page3";
+export { GuidebookPage4 } from "./pages/guidebook-page4";
+export { GuidebookPage5 } from "./pages/guidebook-page5";