Skip to content

Commit 0d9fce4

Browse files
sehyun0518sehyun0518
committed
feat(guide): guide page 추가
1 parent 7353a18 commit 0d9fce4

4 files changed

Lines changed: 192 additions & 8 deletions

File tree

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import GuideScreen from "@/screens/guide/ui/guide-screen";
2+
3+
export default function page() {
4+
return <GuideScreen />;
5+
}

‎src/screens/guide/ui/guide-screen.tsx‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import { AuctionItemCard } from "@/entities/auction";
2+
import { Button, Input } from "@/shared/ui";
3+
4+
export default function GuideScreen() {
5+
return (
6+
<div className="mx-auto max-w-7xl p-4">
7+
<section className="mb-24">
8+
<b className="text-bold text-brand mb-3 text-base">서비스 가이드</b>
9+
<h1 className="text-3xl font-bold">
10+
가격이 내려가는 특별한 경매, <br />
11+
네덜란드 경매를 시작하세요
12+
</h1>
13+
</section>
14+
15+
<section className="mb-24">
16+
<p className="mb-3">네덜란드 경매란?</p>
17+
<p className="text-muted-foreground mb-3">
18+
시작 가격에서 시간이 지날수록 가격이 점점 낮아지는 역경매 방식입니다.
19+
</p>
20+
<div className="mb-3 w-90 rounded-md bg-[#F9FAFB] p-4">
21+
<p className="text-muted my-4">
22+
판매자는 <b className="text-brand font-semibold">기준 금액</b>과<br />
23+
시간 경과에 따른 <b className="text-brand font-semibold">하락 금액</b>을 설정해요
24+
</p>
25+
<div className="bg-white pt-4">
26+
<div className="mt-8 flex items-center gap-3">
27+
<span className="bg-muted h-px flex-1" />
28+
<p className="text-muted-foreground">5분</p>
29+
<span className="border-muted-foreground w-24 border border-dotted" />
30+
</div>
31+
<div>
32+
<div className="mt-4 flex items-center gap-3">
33+
<span className="bg-brand h-8 w-12 rounded-r-sm" />
34+
<p className="text-brand">10,000원</p>
35+
</div>
36+
<div className="mt-4 flex items-center gap-3">
37+
<span className="h-8 w-24 rounded-r-sm bg-[#F4EFFF]" />
38+
<p className="text-muted">12,000원</p>
39+
</div>
40+
<div className="mt-4 flex items-center gap-3">
41+
<span className="h-8 w-36 rounded-r-sm bg-[#F4EFFF]" />
42+
<p className="text-muted">14,000원</p>
43+
</div>
44+
<div className="mt-4 flex items-center gap-3">
45+
<span className="h-8 w-48 rounded-r-sm bg-[#F4EFFF]" />
46+
<p className="text-muted">16,000원</p>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
52+
<div className="inline-block rounded-md bg-[#F9FAFB] p-4">
53+
<p className="text-muted my-4">
54+
시간이 지날수록 가격이 하락하고
55+
<br />
56+
구매자는 눈치싸움을 바탕으로
57+
<br />
58+
<b className="text-brand font-semibold">원하는 가격에서 빠르게 상품을 확보</b>해요
59+
</p>
60+
<div className="flex gap-3">
61+
<div className="bg-white pt-4">
62+
<div className="mt-8 flex items-center gap-3">
63+
<span className="bg-muted h-px flex-1" />
64+
<p className="text-muted-foreground">5분</p>
65+
<span className="border-muted-foreground w-24 border border-dotted" />
66+
</div>
67+
<div>
68+
<div className="mt-4 flex items-center gap-3">
69+
<span className="bg-brand h-8 w-12 rounded-r-sm" />
70+
<p className="text-brand">10,000원</p>
71+
</div>
72+
<div className="mt-4 flex items-center gap-3">
73+
<span className="h-8 w-24 rounded-r-sm bg-[#F4EFFF]" />
74+
<p className="text-muted">12,000원</p>
75+
</div>
76+
<div className="mt-4 flex items-center gap-3">
77+
<span className="h-8 w-36 rounded-r-sm bg-[#F4EFFF]" />
78+
<p className="text-muted">14,000원</p>
79+
<Button>구매하기</Button>
80+
</div>
81+
<div className="mt-4 flex items-center gap-3">
82+
<span className="h-8 w-48 rounded-r-sm bg-[#F4EFFF]" />
83+
<p className="text-muted">16,000원</p>
84+
</div>
85+
</div>
86+
</div>
87+
88+
<div className="bg-white px-4 pt-4">
89+
<div className="flex flex-col items-start">
90+
<div className="border-muted-foreground text-muted rounded-sm border px-2 py-3 text-xs">
91+
상품 잘 도착했나요?
92+
</div>
93+
<div className="text-muted-foreground text-xs">오전 10:00</div>
94+
</div>
95+
<div className="mt-8 flex flex-col items-end">
96+
<span className="bg-brand rounded-sm border px-2 py-3 text-xs text-white">
97+
네 잘 받았습니다. 상품 상태 좋네요!
98+
</span>
99+
<div className="text-muted-foreground text-xs">오전 10:00</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</section>
105+
106+
<section className="mb-24">
107+
<p className="mb-3 font-semibold">구매자 가이드</p>
108+
<div className="flex justify-center rounded-md bg-[#F9FAFB] pt-8">
109+
<div className="flex justify-between">
110+
<div className="flex flex-col">
111+
<span className="text-brand mb-2 text-lg font-semibold">판매 품목</span>
112+
<span className="text-muted-foreground">현재 판매중인 품목이에요</span>
113+
<AuctionItemCard
114+
variant="live"
115+
auctionId={1}
116+
imageUrl="https://picsum.photos/seed/auction--2114285778-1/800/800"
117+
title="아이폰 14 프로 256GB 딥퍼플"
118+
isLiked={false}
119+
startPrice={100000}
120+
startedAt="123"
121+
/>
122+
</div>
123+
<div className="flex flex-col">
124+
<span className="text-brand mb-2 text-lg font-semibold">예정 품목</span>
125+
<span className="text-muted-foreground">곧 판매가 시작해요!</span>
126+
<AuctionItemCard
127+
variant="upcoming"
128+
auctionId={1}
129+
imageUrl="https://picsum.photos/seed/auction--2114285778-1/800/800"
130+
title="아이폰 14 프로 256GB 딥퍼플"
131+
isLiked={false}
132+
startPrice={100000}
133+
startedAt="123"
134+
/>
135+
</div>
136+
</div>
137+
</div>
138+
<p className="mt-3 font-semibold">상품 탐색</p>
139+
<span className="text-muted-foreground">
140+
시간이 지날수록 가격이 하락하고, <br />
141+
구매자는 원하는 가격에 빠르게 상품을 확보해요
142+
</span>
143+
</section>
144+
145+
<section className="mb-24">
146+
<p className="mb-3 font-semibold">판매자 가이드</p>
147+
<div className="flex justify-center rounded-md bg-[#F9FAFB] pt-8">
148+
<div className="flex w-md flex-col gap-3 pb-8">
149+
<div>
150+
<span className="font-semibold text-zinc-900">판매 시작가</span>
151+
<Input className="bg-muted" placeholder="₩ 0" />
152+
</div>
153+
<div>
154+
<span className="font-semibold text-zinc-900">판매 최저가 (Stop Loss)</span>
155+
<Input className="bg-muted" placeholder="₩ 시작가의 90% 이하 가격을 설정해주세요" />
156+
</div>
157+
<div>
158+
<span className="font-semibold text-zinc-900">가격 하락 단위 설정</span>
159+
<Input className="bg-muted" placeholder="₩ 0" />
160+
</div>
161+
<div>
162+
<span className="font-semibold text-zinc-900">경매 시작 일정</span>
163+
<Input className="bg-muted" placeholder="날짜 및 시간을 선택하세요" type="date" />
164+
</div>
165+
</div>
166+
</div>
167+
<p className="mt-3 font-semibold">상품 등록</p>
168+
<span className="text-muted-foreground">
169+
판매자는 원하는 가격과 시간에 제품을 등록하고, <br />
170+
경제 진행을 바탕으로 제품을 판매할 수 있어요.
171+
</span>
172+
</section>
173+
</div>
174+
);
175+
}

‎src/shared/config/routes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,6 @@ export const ROUTES = {
88
search: "/search",
99
payment: "/payments",
1010
myPage: "/users/me",
11+
guide: "/guide",
1112
userReview: (sellerId: number | string) => `/users/${sellerId}/reviews`,
1213
} as const;

‎src/widgets/hero-section/ui/hero-section.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import Image from "next/image";
2+
import Link from "next/link";
23

34
import { ArrowRight, TrendingDown } from "lucide-react";
45

56
import HeroAuction from "@/shared/assets/images/hero-auction.svg";
7+
import { ROUTES } from "@/shared/config/routes";
68

79
export function HeroSection() {
810
return (
@@ -24,14 +26,15 @@ export function HeroSection() {
2426
</p>
2527
</div>
2628
</div>
27-
28-
<button
29-
type="button"
30-
className="text-brand inline-flex w-fit items-center gap-1 rounded-sm bg-white px-3 py-2 hover:bg-zinc-50"
31-
>
32-
<span className="text-xs">가이드 보기</span>
33-
<ArrowRight className="size-4" />
34-
</button>
29+
<Link href={ROUTES.guide}>
30+
<button
31+
type="button"
32+
className="text-brand inline-flex w-fit items-center gap-1 rounded-sm bg-white px-3 py-2 hover:bg-zinc-50"
33+
>
34+
<span className="text-xs">가이드 보기</span>
35+
<ArrowRight className="size-4" />
36+
</button>
37+
</Link>
3538
</div>
3639

3740
<div className="relative hidden h-67 w-67 shrink-0 md:block">

0 commit comments

Comments
 (0)