435 lines
15 KiB
TypeScript
435 lines
15 KiB
TypeScript
import type { Metadata } from 'next';
|
|
import { notFound } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { createAdminClient } from '@/lib/supabase/admin';
|
|
import {
|
|
REQUEST_STATUS,
|
|
TIMELINE_STEPS,
|
|
timelineIndex,
|
|
isRequestStatus,
|
|
type RequestStatus,
|
|
} from '@/lib/request-status';
|
|
|
|
// 비회원 의뢰 추적 페이지 (서버 컴포넌트).
|
|
// 고객이 이메일의 추적 링크로 로그인 없이 의뢰 진행 상태를 확인한다.
|
|
// PublicShell(TopNav+푸터) 안에서 렌더되므로 여기서는 콘텐츠 섹션만 그린다.
|
|
// API(app/api/track/[token])와 동일한 조회를 페이지에서 직접 수행한다.
|
|
// PII(이메일·전화·메시지 본문)는 select에서 제외하며, 모든 DB 예외는 notFound()로 폴백한다.
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
export const metadata: Metadata = {
|
|
title: '의뢰 진행 상태',
|
|
robots: { index: false, follow: false },
|
|
};
|
|
|
|
const KOR_TIGHT = { letterSpacing: '-0.02em' } as const;
|
|
const KOR_BODY = { letterSpacing: '-0.01em' } as const;
|
|
|
|
interface Props {
|
|
params: Promise<{ token: string }>;
|
|
}
|
|
|
|
interface TrackRequest {
|
|
id: string;
|
|
name: string | null;
|
|
service: string | null;
|
|
status: string;
|
|
project_type: string | null;
|
|
budget: string | null;
|
|
timeline: string | null;
|
|
created_at: string;
|
|
updated_at: string | null;
|
|
}
|
|
|
|
interface TrackQuote {
|
|
public_token: string;
|
|
title: string | null;
|
|
status: string;
|
|
valid_until: string | null;
|
|
}
|
|
|
|
const QUOTE_BADGE: Record<string, { label: string; tone: 'accent' | 'muted' | 'danger' }> = {
|
|
sent: { label: '확인 대기', tone: 'accent' },
|
|
accepted: { label: '수락됨', tone: 'muted' },
|
|
rejected: { label: '거절됨', tone: 'danger' },
|
|
};
|
|
|
|
async function loadTrack(
|
|
token: string,
|
|
): Promise<{ request: TrackRequest; quote: TrackQuote | null } | null> {
|
|
if (!token || token.length > 64) return null;
|
|
try {
|
|
const admin = createAdminClient();
|
|
const { data: request, error } = await admin
|
|
.from('contact_requests')
|
|
.select('id, name, service, status, project_type, budget, timeline, created_at, updated_at')
|
|
.eq('public_token', token)
|
|
.maybeSingle();
|
|
if (error || !request) return null;
|
|
|
|
const { data: quote } = await admin
|
|
.from('quotes')
|
|
.select('public_token, title, status, valid_until')
|
|
.eq('contact_request_id', request.id)
|
|
.in('status', ['sent', 'accepted', 'rejected'])
|
|
.order('created_at', { ascending: false })
|
|
.limit(1)
|
|
.maybeSingle();
|
|
|
|
return { request: request as TrackRequest, quote: (quote as TrackQuote) ?? null };
|
|
} catch (err) {
|
|
// DB 장애·마이그레이션 미적용(42703 등) — 추적 페이지는 404로 폴백
|
|
console.error('[Track] loadTrack failed:', err);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function fmtDate(value: string | null): string | null {
|
|
if (!value) return null;
|
|
const d = new Date(value);
|
|
if (Number.isNaN(d.getTime())) return null;
|
|
return d.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
|
|
}
|
|
|
|
function CheckIcon() {
|
|
return (
|
|
<svg
|
|
width="14"
|
|
height="14"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="3"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden
|
|
>
|
|
<path d="M20 6 9 17l-5-5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function ArrowRight() {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden
|
|
>
|
|
<path d="M5 12h14" />
|
|
<path d="m13 5 7 7-7 7" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/** 진행 단계 타임라인 — 모바일 세로 / 데스크톱 가로 */
|
|
function Timeline({ current }: { current: number }) {
|
|
return (
|
|
<ol className="flex flex-col md:flex-row">
|
|
{TIMELINE_STEPS.map((step, i) => {
|
|
const isDone = i < current;
|
|
const isCurrent = i === current;
|
|
const isLast = i === TIMELINE_STEPS.length - 1;
|
|
const label = REQUEST_STATUS[step].label;
|
|
|
|
// 이 단계로 들어오는 연결선이 채워졌는지(이전 단계가 지났는지)
|
|
const lineFilled = i <= current;
|
|
|
|
return (
|
|
<li
|
|
key={step}
|
|
className="flex md:flex-col md:flex-1 md:items-center md:text-center"
|
|
>
|
|
{/* 모바일: 세로 마커+연결선 / 데스크톱: 가로 */}
|
|
<div className="flex flex-col items-center md:flex-row md:w-full md:items-center">
|
|
{/* 데스크톱 좌측 연결선 (가로) */}
|
|
{i > 0 && (
|
|
<span
|
|
className="hidden md:block h-0.5 flex-1"
|
|
style={{ background: lineFilled ? 'var(--jsm-accent)' : 'var(--jsm-line)' }}
|
|
aria-hidden
|
|
/>
|
|
)}
|
|
|
|
{/* 마커 원 */}
|
|
<span
|
|
className="relative z-10 flex items-center justify-center rounded-full shrink-0 transition-colors"
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
background: isDone
|
|
? 'var(--jsm-accent)'
|
|
: isCurrent
|
|
? 'var(--jsm-surface)'
|
|
: 'var(--jsm-surface)',
|
|
border: isCurrent
|
|
? '2px solid var(--jsm-accent)'
|
|
: isDone
|
|
? '2px solid var(--jsm-accent)'
|
|
: '2px solid var(--jsm-line)',
|
|
color: isDone ? '#ffffff' : 'transparent',
|
|
boxShadow: isCurrent ? '0 0 0 4px var(--jsm-accent-soft)' : 'none',
|
|
}}
|
|
aria-hidden
|
|
>
|
|
{isDone ? (
|
|
<CheckIcon />
|
|
) : (
|
|
<span
|
|
className="rounded-full"
|
|
style={{
|
|
width: 8,
|
|
height: 8,
|
|
background: isCurrent ? 'var(--jsm-accent)' : 'var(--jsm-line)',
|
|
}}
|
|
/>
|
|
)}
|
|
</span>
|
|
|
|
{/* 데스크톱 우측 연결선 (가로) */}
|
|
{!isLast && (
|
|
<span
|
|
className="hidden md:block h-0.5 flex-1"
|
|
style={{ background: i < current ? 'var(--jsm-accent)' : 'var(--jsm-line)' }}
|
|
aria-hidden
|
|
/>
|
|
)}
|
|
|
|
{/* 모바일 세로 연결선 */}
|
|
{!isLast && (
|
|
<span
|
|
className="md:hidden w-0.5 flex-1 my-1"
|
|
style={{
|
|
minHeight: 28,
|
|
background: i < current ? 'var(--jsm-accent)' : 'var(--jsm-line)',
|
|
}}
|
|
aria-hidden
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* 라벨 */}
|
|
<div className="pl-4 pb-6 md:pl-0 md:pb-0 md:mt-3">
|
|
<span
|
|
className="text-sm break-keep"
|
|
style={{
|
|
color: isDone || isCurrent ? 'var(--jsm-ink)' : 'var(--jsm-ink-faint)',
|
|
fontWeight: isCurrent ? 700 : 500,
|
|
...KOR_BODY,
|
|
}}
|
|
>
|
|
{label}
|
|
</span>
|
|
{isCurrent && (
|
|
<span
|
|
className="block text-xs mt-0.5"
|
|
style={{ color: 'var(--jsm-accent)', ...KOR_BODY }}
|
|
>
|
|
진행 중
|
|
</span>
|
|
)}
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
);
|
|
}
|
|
|
|
export default async function TrackPage({ params }: Props) {
|
|
const { token } = await params;
|
|
const data = await loadTrack(token);
|
|
if (!data) notFound();
|
|
|
|
const { request, quote } = data;
|
|
const status: RequestStatus = isRequestStatus(request.status) ? request.status : 'pending';
|
|
const current = timelineIndex(status);
|
|
const receivedAt = fmtDate(request.created_at);
|
|
|
|
const info: { label: string; value: string }[] = [];
|
|
if (request.project_type) info.push({ label: '프로젝트 유형', value: request.project_type });
|
|
if (request.budget) info.push({ label: '예산', value: request.budget });
|
|
if (request.timeline) info.push({ label: '희망 일정', value: request.timeline });
|
|
|
|
const quoteBadge = quote ? QUOTE_BADGE[quote.status] ?? null : null;
|
|
const quoteValidUntil = quote ? fmtDate(quote.valid_until) : null;
|
|
|
|
return (
|
|
<section style={{ background: 'var(--jsm-bg)' }}>
|
|
<div className="max-w-3xl mx-auto px-6 lg:px-8 py-14 lg:py-20">
|
|
{/* ─── 헤더 ─── */}
|
|
<header className="pb-8 border-b" style={{ borderColor: 'var(--jsm-line)' }}>
|
|
<span
|
|
className="inline-block text-xs font-semibold mb-4 px-2.5 py-1 rounded"
|
|
style={{ color: 'var(--jsm-accent)', background: 'var(--jsm-accent-soft)', ...KOR_BODY }}
|
|
>
|
|
의뢰 진행 상태
|
|
</span>
|
|
<h1
|
|
className="text-2xl sm:text-3xl font-bold break-keep"
|
|
style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
|
|
>
|
|
{request.service ?? '의뢰하신 프로젝트'}
|
|
</h1>
|
|
{receivedAt && (
|
|
<p className="mt-3 text-sm" style={{ color: 'var(--jsm-ink-faint)', ...KOR_BODY }}>
|
|
{receivedAt} 접수
|
|
</p>
|
|
)}
|
|
</header>
|
|
|
|
{/* ─── 진행 상태 ─── */}
|
|
<div className="py-10 border-b" style={{ borderColor: 'var(--jsm-line)' }}>
|
|
{status === 'cancelled' ? (
|
|
<div
|
|
className="rounded-2xl border px-6 py-8 text-center"
|
|
style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-line)' }}
|
|
>
|
|
<h2
|
|
className="text-lg font-bold break-keep"
|
|
style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
|
|
>
|
|
취소된 의뢰입니다
|
|
</h2>
|
|
<p
|
|
className="mt-2 text-sm leading-relaxed break-keep"
|
|
style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
|
|
>
|
|
이 의뢰는 취소 처리되었습니다. 다시 진행을 원하시면 회신해 주세요.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{status === 'on_hold' && (
|
|
<div
|
|
className="mb-8 rounded-xl border px-4 py-3.5"
|
|
style={{ background: 'var(--jsm-surface-alt)', borderColor: 'var(--jsm-line)' }}
|
|
>
|
|
<p
|
|
className="text-sm leading-relaxed break-keep"
|
|
style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
|
|
>
|
|
현재 보류 중입니다 — 조건 조정이 필요하면 회신 주세요.
|
|
</p>
|
|
</div>
|
|
)}
|
|
<Timeline current={current} />
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* ─── 의뢰 정보 ─── */}
|
|
{info.length > 0 && (
|
|
<div className="py-8 border-b" style={{ borderColor: 'var(--jsm-line)' }}>
|
|
<h2
|
|
className="text-sm font-semibold mb-4 uppercase tracking-wider"
|
|
style={{ color: 'var(--jsm-accent)' }}
|
|
>
|
|
의뢰 정보
|
|
</h2>
|
|
<dl className="grid sm:grid-cols-2 gap-x-8 gap-y-4">
|
|
{info.map((item) => (
|
|
<div key={item.label}>
|
|
<dt
|
|
className="text-xs mb-1"
|
|
style={{ color: 'var(--jsm-ink-faint)', ...KOR_BODY }}
|
|
>
|
|
{item.label}
|
|
</dt>
|
|
<dd
|
|
className="text-sm font-medium break-keep"
|
|
style={{ color: 'var(--jsm-ink)', ...KOR_BODY }}
|
|
>
|
|
{item.value}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
)}
|
|
|
|
{/* ─── 견적 카드 ─── */}
|
|
{quote && (
|
|
<div className="py-8 border-b" style={{ borderColor: 'var(--jsm-line)' }}>
|
|
<div
|
|
className="rounded-2xl border p-6 lg:p-7"
|
|
style={{ background: 'var(--jsm-surface)', borderColor: 'var(--jsm-accent)' }}
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p
|
|
className="text-xs font-semibold uppercase tracking-wider mb-2"
|
|
style={{ color: 'var(--jsm-accent)' }}
|
|
>
|
|
견적서가 도착했습니다
|
|
</p>
|
|
<h2
|
|
className="text-lg font-bold break-keep"
|
|
style={{ color: 'var(--jsm-ink)', ...KOR_TIGHT }}
|
|
>
|
|
{quote.title ?? '프로젝트 견적서'}
|
|
</h2>
|
|
</div>
|
|
{quoteBadge && (
|
|
<span
|
|
className="shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full"
|
|
style={
|
|
quoteBadge.tone === 'accent'
|
|
? { color: 'var(--jsm-accent)', background: 'var(--jsm-accent-soft)' }
|
|
: quoteBadge.tone === 'danger'
|
|
? { color: '#b91c1c', background: '#fee2e2' }
|
|
: { color: 'var(--jsm-ink-soft)', background: 'var(--jsm-surface-alt)' }
|
|
}
|
|
>
|
|
{quoteBadge.label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{quoteValidUntil && (
|
|
<p className="mt-3 text-sm" style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}>
|
|
유효기간 {quoteValidUntil}까지
|
|
</p>
|
|
)}
|
|
|
|
<Link
|
|
href={`/quote/${quote.public_token}`}
|
|
className="mt-5 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-lg font-semibold text-white transition-colors duration-150 hover:bg-[var(--jsm-accent-hover)]"
|
|
style={{ background: 'var(--jsm-accent)', ...KOR_BODY }}
|
|
>
|
|
견적서 보기
|
|
<ArrowRight />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ─── 하단 안내 ─── */}
|
|
<div className="pt-8">
|
|
<p
|
|
className="text-sm leading-relaxed break-keep"
|
|
style={{ color: 'var(--jsm-ink-soft)', ...KOR_BODY }}
|
|
>
|
|
문의사항은{' '}
|
|
<a
|
|
href="mailto:bgg8988@gmail.com"
|
|
className="font-medium underline"
|
|
style={{ color: 'var(--jsm-accent)' }}
|
|
>
|
|
bgg8988@gmail.com
|
|
</a>{' '}
|
|
또는 접수하신 메일에 회신해 주세요.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|