Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sageherb merged 1 commit into from
Jan 12, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/features/notification/ui/notification-sse-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 1 addition & 3 deletions src/screens/guide/model/guide-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
122 changes: 62 additions & 60 deletions src/screens/guide/ui/guide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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",
}}
Expand All @@ -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)",
Expand All @@ -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>
);
}
23 changes: 13 additions & 10 deletions src/screens/guide/ui/pages/guidebook-page1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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 }}
Expand Down
Loading