feat(guide): 가이드북 반응형 UI 개선 및 경매 플로우 데이터/이벤트 보완

- 가이드북 페이지 및 네비게이션을 모바일/태블릿 대응으로 개선하고 레이아웃, 간격, 폰트 크기를 조정
- step indicator, price bar, chat bubble의 비주얼 스타일을 다듬어 가독성과 일관성 개선
- SSE 이벤트 타입을 추가

Author: sageherb

src/features/notification/ui/notification-sse-provider.tsx

@@ -19,6 +19,8 @@ const SSE_EVENT_TYPES = [
   "auctionFailedSubscriber",
   "auctionSuccessSeller",
   "auctionSuccessSubscriber",
+  "reviewRegistered",
+  "chatMessage",
 ] as const;
 const MAX_RECONNECT_DELAY_MS = 30_000;
 const RECONNECT_BASE_DELAY_MS = 1_000;

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

@@ -30,9 +30,7 @@ export interface PricePoint {
 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: "구매 완료" },
+  { time: "00:10", price: 90000, label: "구매 완료" },
 ];
 
 export interface ChatMessage {

src/screens/guide/ui/guide.tsx

@@ -7,6 +7,8 @@ import { useRouter } from "next/navigation";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 
+import { Container } from "@/shared/ui";
+
 import {
   GuidebookPage1,
   GuidebookPage2,
@@ -58,84 +60,84 @@ export function Guidebook() {
   }, []);
 
   return (
-    <div ref={containerRef} className="bg-background fixed inset-0 overflow-hidden outline-none">
-      <div className="flex h-full items-center justify-center px-6">
-        <div className="relative w-full max-w-5xl">
-          <motion.button
-            type="button"
-            className="absolute top-0 right-0 z-50 rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm transition hover:bg-gray-50"
-            whileHover={{ scale: 1.04 }}
-            whileTap={{ scale: 0.98 }}
-            onClick={() => {
-              if (typeof window !== "undefined") {
-                window.localStorage.setItem(GUIDE_STORAGE_KEY, "true");
-              }
-              router.replace("/");
-            }}
-          >
-            Skip
-          </motion.button>
-          <motion.div
-            className="mb-8 text-center"
-            key={`title-${currentPage}`}
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.3 }}
-          >
-            <p className="mb-2 text-sm text-gray-500">
-              Chapter {currentPage + 1} / {totalPages}
-            </p>
-            <h2 className="text-2xl font-semibold">{pages[currentPage].title}</h2>
-          </motion.div>
-
-          <div className="bg-card relative overflow-hidden rounded-3xl shadow-2xl">
-            <div className="h-[min(70dvh,820px)] min-h-[600px]">
-              <AnimatePresence mode="wait" custom={direction}>
-                <motion.div
-                  key={currentPage}
-                  custom={direction}
-                  variants={pageVariants}
-                  initial="enter"
-                  animate="center"
-                  exit="exit"
-                  transition={{
-                    x: { type: "spring", stiffness: 300, damping: 30 },
-                    opacity: { duration: 0.3 },
-                    scale: { duration: 0.3 },
-                  }}
-                  className="h-full p-12"
-                >
-                  {pages[currentPage].node}
-                </motion.div>
-              </AnimatePresence>
-            </div>
+    <div ref={containerRef} className="bg-background w-full overflow-hidden outline-none">
+      <Container className="flex max-h-[calc(100dvh-var(--header-h,0px))] min-h-[calc(100dvh-var(--header-h,0px))] w-full flex-col items-center justify-center py-2">
+        <div className="flex h-full w-full flex-col gap-4">
+          <header className="relative flex items-center justify-center">
+            <motion.button
+              type="button"
+              className="absolute top-0 right-1 rounded-full border border-zinc-200 bg-white px-3 py-1.5 text-xs font-semibold text-zinc-700 shadow-sm transition hover:bg-zinc-50"
+              whileHover={{ scale: 1.04 }}
+              whileTap={{ scale: 0.98 }}
+              onClick={() => {
+                if (typeof window !== "undefined") {
+                  window.localStorage.setItem(GUIDE_STORAGE_KEY, "true");
+                }
+                router.replace("/");
+              }}
+            >
+              Skip
+            </motion.button>
+            <motion.div
+              className="flex flex-col gap-1 text-center"
+              key={`title-${currentPage}`}
+              initial={{ opacity: 0, y: -10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              <p className="text-xs text-zinc-500">
+                Chapter {currentPage + 1} / {totalPages}
+              </p>
+              <h2 className="text-xl font-semibold">{pages[currentPage].title}</h2>
+            </motion.div>
+          </header>
+
+          <div className="bg-card h-[65dvh] overflow-hidden rounded-3xl px-4 shadow-2xl">
+            <AnimatePresence mode="wait" custom={direction}>
+              <motion.div
+                key={currentPage}
+                custom={direction}
+                variants={pageVariants}
+                initial="enter"
+                animate="center"
+                exit="exit"
+                transition={{
+                  x: { type: "spring", stiffness: 300, damping: 30 },
+                  opacity: { duration: 0.3 },
+                  scale: { duration: 0.3 },
+                }}
+                className="h-full w-full"
+              >
+                {pages[currentPage].node}
+              </motion.div>
+            </AnimatePresence>
           </div>
 
-          <div className="mt-8 flex items-center justify-between">
+          <div className="flex items-center justify-between">
             <motion.button
               onClick={goPrev}
               disabled={currentPage === 0}
-              className="flex items-center gap-2 rounded-full px-6 py-3 transition-all disabled:cursor-not-allowed disabled:opacity-30"
+              className="flex items-center gap-2 rounded-full px-4 py-2 text-sm transition-all disabled:cursor-not-allowed disabled:opacity-30"
               style={{
                 backgroundColor: currentPage === 0 ? "#F3F4F6" : "oklch(0.4758 0.2241 288.5 / 0.1)",
                 color: currentPage === 0 ? "#9CA3AF" : "oklch(0.4758 0.2241 288.5)",
               }}
               whileHover={currentPage !== 0 ? { scale: 1.05, x: -5 } : {}}
               whileTap={currentPage !== 0 ? { scale: 0.95 } : {}}
             >
-              <ChevronLeft className="h-5 w-5" />
+              <ChevronLeft className="size-4" />
               <span className="font-medium">이전</span>
             </motion.button>
 
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1.5">
               {pages.map((page, index) => (
                 <motion.button
                   key={page.title}
                   onClick={() => goTo(index)}
                   className="rounded-full transition-all"
                   style={{
-                    width: index === currentPage ? "32px" : "8px",
-                    height: "8px",
+                    width: index === currentPage ? "28px" : "6px",
+                    height: "6px",
                     backgroundColor:
                       index === currentPage ? "oklch(0.4758 0.2241 288.5)" : "#D1D5DB",
                   }}
@@ -149,7 +151,7 @@ export function Guidebook() {
             <motion.button
               onClick={goNext}
               disabled={currentPage === totalPages - 1}
-              className="flex items-center gap-2 rounded-full px-6 py-3 transition-all disabled:cursor-not-allowed disabled:opacity-30"
+              className="flex items-center gap-2 rounded-full px-4 py-2 text-sm transition-all disabled:cursor-not-allowed disabled:opacity-30"
               style={{
                 backgroundColor:
                   currentPage === totalPages - 1 ? "#F3F4F6" : "oklch(0.4758 0.2241 288.5)",
@@ -159,11 +161,11 @@ export function Guidebook() {
               whileTap={currentPage !== totalPages - 1 ? { scale: 0.95 } : {}}
             >
               <span className="font-medium">다음</span>
-              <ChevronRight className="h-5 w-5" />
+              <ChevronRight className="size-4" />
             </motion.button>
           </div>
         </div>
-      </div>
+      </Container>
     </div>
   );
 }

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

@@ -11,16 +11,16 @@ export function GuidebookPage1() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.1, duration: 0.6 }}
-        className="mb-8"
+        className="mb-6 max-[1024px]:mb-4"
       >
         <motion.h1
-          className="mb-4 text-5xl font-bold"
+          className="mb-3 text-4xl font-bold max-[1024px]:text-3xl"
           style={{ color: "oklch(0.4758 0.2241 288.5)" }}
         >
           네덜란드 경매
         </motion.h1>
         <motion.p
-          className="text-xl text-gray-600"
+          className="text-base text-gray-600 max-[1024px]:text-sm"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={{ delay: 0.3, duration: 0.6 }}
@@ -30,14 +30,14 @@ export function GuidebookPage1() {
       </motion.div>
 
       <motion.div
-        className="mb-12 h-1 w-24 rounded-full"
+        className="mb-8 h-1 w-20 rounded-full max-[1024px]:mb-6 max-[1024px]:w-16"
         style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.3)" }}
         initial={{ width: 0 }}
         animate={{ width: 96 }}
         transition={{ delay: 0.5, duration: 0.6 }}
       />
 
-      <div className="grid w-full max-w-3xl grid-cols-3 gap-8">
+      <div className="grid w-full max-w-3xl grid-cols-1 gap-4 max-[1024px]:gap-3 sm:grid-cols-3">
         {KEYWORDS.map((keyword, index) => (
           <motion.div
             key={keyword.label}
@@ -47,15 +47,18 @@ export function GuidebookPage1() {
             className="flex flex-col items-center"
           >
             <motion.div
-              className="mb-4 flex h-20 w-20 items-center justify-center rounded-full"
+              className="mb-3 flex h-16 w-16 items-center justify-center rounded-full max-[1024px]:h-14 max-[1024px]:w-14"
               style={{ backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.1)" }}
               whileHover={{ scale: 1.1, backgroundColor: "oklch(0.4758 0.2241 288.5 / 0.2)" }}
             >
-              <keyword.icon className="h-10 w-10" style={{ color: "oklch(0.4758 0.2241 288.5)" }} />
+              <keyword.icon
+                className="h-8 w-8 max-[1024px]:h-7 max-[1024px]:w-7"
+                style={{ color: "oklch(0.4758 0.2241 288.5)" }}
+              />
             </motion.div>
 
             <motion.h3
-              className="mb-2 text-xl font-semibold"
+              className="mb-1 text-lg font-semibold max-[1024px]:text-base"
               style={{ color: "oklch(0.4758 0.2241 288.5)" }}
             >
               {keyword.label}
@@ -68,13 +71,13 @@ export function GuidebookPage1() {
               transition={{ delay: 0.8 + index * 0.15, duration: 0.6 }}
             />
 
-            <p className="text-sm text-gray-600">{keyword.description}</p>
+            <p className="text-xs text-gray-600 max-[1024px]:text-[11px]">{keyword.description}</p>
           </motion.div>
         ))}
       </div>
 
       <motion.p
-        className="mt-12 max-w-2xl text-sm text-gray-500"
+        className="mt-8 max-w-2xl text-xs text-gray-500 max-[1024px]:mt-6 max-[1024px]:text-[11px]"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 1.5, duration: 0.6 }}