Mina Choi
c85c577349
`backend` 옆에 `front` 가 있을 이유가 없었다. negosium 의 negodata/front 를 그대로 베꼈고 그게 왜 front 인지는 따져보지 않았다 — 근거 없이 들여온 이름이라 바로잡는다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019uYhHQdssRubirPirrdJJC
90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import {Check, ExternalLink, Loader2} from 'lucide-react';
|
|
import type {LinkData} from '@/api';
|
|
import {Badge} from '@/components/ui/badge';
|
|
import {Button} from '@/components/ui/button';
|
|
import {cn} from '@/lib/utils';
|
|
import {CHANNEL_LABEL} from './useCollectFlow';
|
|
|
|
/**
|
|
* 수집 잡이 찾아온 채널 URL 을 사장님이 확정하는 패널.
|
|
*
|
|
* ★ 이 화면이 파이프라인에서 사람이 반드시 개입해야 하는 지점이다.
|
|
* 확정 없이 긁으면 이름이 비슷한 남의 가게 페이지가 이 가게의 공식 홈페이지에 실린다.
|
|
* 그래서 기본값은 '확정 안 함'이고, 누른 것만 크롤링 대상이 된다.
|
|
*/
|
|
export function ChannelConfirmPanel({
|
|
links,
|
|
confirmedCount,
|
|
confirmingId,
|
|
onConfirm,
|
|
}: {
|
|
links: LinkData[];
|
|
confirmedCount: number;
|
|
confirmingId: string | null;
|
|
onConfirm: (linkId: string) => void;
|
|
}) {
|
|
return (
|
|
<div>
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<span className="text-xs font-semibold">찾은 채널 URL</span>
|
|
<Badge variant={confirmedCount > 0 ? 'success' : 'warning'} className="text-[10px]">
|
|
확정 {confirmedCount} / {links.length}
|
|
</Badge>
|
|
</div>
|
|
|
|
<ul className="max-h-56 space-y-1.5 overflow-y-auto pr-1">
|
|
{links.map((link) => {
|
|
const isConfirmed = Boolean(link.confirmed_at);
|
|
const isBusy = confirmingId === link.link_id;
|
|
|
|
return (
|
|
<li
|
|
key={link.link_id}
|
|
className={cn(
|
|
'rounded-lg border p-2.5 text-[11px]',
|
|
isConfirmed ? 'border-success/40 bg-success/5' : 'border-border bg-muted/40',
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="font-semibold">
|
|
{CHANNEL_LABEL[link.channel] ?? '기타 채널'}
|
|
</span>
|
|
{isConfirmed ? (
|
|
<Badge variant="success" className="shrink-0 text-[10px]">
|
|
확정됨
|
|
</Badge>
|
|
) : (
|
|
<Button
|
|
size="sm"
|
|
variant="primary"
|
|
onClick={() => onConfirm(link.link_id)}
|
|
disabled={isBusy}
|
|
>
|
|
{isBusy ? <Loader2 className="animate-spin" /> : <Check />}
|
|
<span>내 채널 맞아요</span>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<a
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-1 flex items-center gap-1 break-all text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
|
|
>
|
|
<ExternalLink className="size-3 shrink-0" />
|
|
<span className="min-w-0 break-all">{link.url}</span>
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
<p className="mt-2 text-[11px] leading-relaxed text-muted-foreground">
|
|
링크를 열어 <strong>내 가게가 맞는지 직접 확인</strong>한 뒤 확정해 주세요. 확정한 URL 만
|
|
크롤링합니다 — 확정하지 않은 URL 은 건드리지 않습니다.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|