549 lines
24 KiB
TypeScript
549 lines
24 KiB
TypeScript
import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { useSearchParams } from 'react-router';
|
|
import { Palette, Tags, ListPlus, Plus, Trash2, RotateCcw, Download, Upload, X } from 'lucide-react';
|
|
import { showToast } from '@/lib/notify';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import ImageDropzone from '@/components/ImageDropzone';
|
|
import { uploadItemImage } from '@/api/generated/item/item';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Typography } from '@/components/ui/typography';
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
|
|
import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem } from '@/components/ui/select';
|
|
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
|
|
import {
|
|
LABEL_CATALOG,
|
|
HIDEABLE_ITEM_FIELDS,
|
|
CUSTOM_FIELD_TYPE_LABEL,
|
|
type CompanySettings,
|
|
type CustomFieldDef,
|
|
type CustomFieldType,
|
|
} from './catalog';
|
|
import { useCompanySettings } from './useCompanySettings';
|
|
|
|
export const SETTINGS_TABS = ['branding', 'labels', 'fields'] as const;
|
|
export type SettingsTab = (typeof SETTINGS_TABS)[number];
|
|
export const SETTINGS_TAB_LABEL: Record<SettingsTab, string> = {
|
|
branding: '브랜딩(CI)',
|
|
labels: '용어(라벨)',
|
|
fields: '커스텀 필드',
|
|
};
|
|
|
|
export function SettingsView() {
|
|
const { settings, isLoading, save } = useCompanySettings();
|
|
|
|
// 탭은 ?tab=<탭> 으로 URL 에 남긴다 — 링크 공유·새로고침·메뉴 빠른이동에서 같은 탭으로 열리게.
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const tabParam = searchParams.get('tab');
|
|
const tab: SettingsTab = (SETTINGS_TABS as readonly string[]).includes(tabParam ?? '')
|
|
? (tabParam as SettingsTab)
|
|
: 'branding';
|
|
const setTab = (next: string) => {
|
|
const params = new URLSearchParams(searchParams);
|
|
params.set('tab', next);
|
|
setSearchParams(params, { replace: true });
|
|
};
|
|
|
|
// 저장 전 편집본(draft). 서버 반영은 저장 버튼에서만.
|
|
const [draft, setDraft] = useState<CompanySettings>({});
|
|
const [saving, setSaving] = useState(false);
|
|
useEffect(() => {
|
|
if (!isLoading) setDraft(structuredClone(settings));
|
|
// settings 객체는 쿼리 캐시 무효화 때만 바뀐다(참조 비교로 충분).
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [isLoading, JSON.stringify(settings)]);
|
|
|
|
const dirty = useMemo(() => JSON.stringify(draft) !== JSON.stringify(settings), [draft, settings]);
|
|
|
|
const handleSave = async () => {
|
|
// 빈 문자열 라벨/브랜딩은 "기본값 사용"이므로 저장 전 제거해 문서를 깨끗하게 유지한다.
|
|
const labels = Object.fromEntries(Object.entries(draft.labels ?? {}).filter(([, v]) => v.trim()));
|
|
const branding = Object.fromEntries(Object.entries(draft.branding ?? {}).filter(([, v]) => (v ?? '').trim()));
|
|
const itemFields = (draft.item_fields ?? []).filter((f) => f.key.trim() && f.label.trim());
|
|
const supplierFields = (draft.supplier_fields ?? []).filter((f) => f.key.trim() && f.label.trim());
|
|
const sessionFields = (draft.session_fields ?? []).filter((f) => f.key.trim() && f.label.trim());
|
|
const hiddenFields = [...new Set((draft.hidden_fields ?? []).filter((k) => k.trim()))];
|
|
const next: CompanySettings = {
|
|
...draft,
|
|
hidden_fields: hiddenFields,
|
|
labels,
|
|
branding,
|
|
item_fields: itemFields,
|
|
supplier_fields: supplierFields,
|
|
session_fields: sessionFields,
|
|
};
|
|
setSaving(true);
|
|
try {
|
|
await save(next);
|
|
showToast('회사 설정이 저장되었습니다.', 'success');
|
|
} catch (err) {
|
|
showToast(err instanceof Error ? err.message : '설정 저장 실패', 'error');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
|
|
// 현재 편집본을 JSON 파일로 내려받는다(회사 설정 전체 백업/이관용).
|
|
const handleExport = () => {
|
|
const blob = new Blob([JSON.stringify(draft, null, 2)], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'company-settings.json';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
// JSON 파일 → 편집본 병합. 빈 값(빈 문자열·빈 배열·null)은 "그대로 두기"로 보고 덮어쓰지 않는다.
|
|
const handleImport = async (file: File) => {
|
|
try {
|
|
const parsed = JSON.parse(await file.text()) as CompanySettings;
|
|
setDraft((d) => mergeSettings(d, parsed));
|
|
showToast('설정 JSON 을 불러왔습니다. 확인 후 저장하십시오.', 'success');
|
|
} catch (err) {
|
|
showToast(err instanceof Error ? `JSON 파싱 실패 - ${err.message}` : 'JSON 파싱 실패', 'error');
|
|
}
|
|
};
|
|
|
|
// 로고 파일 업로드 — 상품 이미지와 동일한 스토리지 엔드포인트(/v1/item/image, Azure Blob)를 재사용해 URL 을 받는다.
|
|
const handleUploadLogo = async (file: File): Promise<string> => {
|
|
const res = await uploadItemImage({ file: file as unknown as string });
|
|
if (res.result?.success === false) throw new Error(res.result.desc || '로고 업로드에 실패했습니다.');
|
|
if (!res.image_url) throw new Error('업로드 응답에 URL 이 없습니다.');
|
|
return res.image_url;
|
|
};
|
|
|
|
const setBranding = (key: keyof NonNullable<CompanySettings['branding']>, value: string) =>
|
|
setDraft((d) => ({ ...d, branding: { ...d.branding, [key]: value } }));
|
|
const setLabel = (key: string, value: string) =>
|
|
setDraft((d) => ({ ...d, labels: { ...d.labels, [key]: value } }));
|
|
|
|
return (
|
|
<div className="space-y-4 font-mono text-xs">
|
|
<Tabs value={tab} onValueChange={setTab}>
|
|
<div className="flex items-center justify-between gap-3 flex-wrap">
|
|
<TabsList>
|
|
<TabsTrigger value="branding" className="gap-1.5 px-3">
|
|
<Palette size={13} /> 브랜딩(CI)
|
|
</TabsTrigger>
|
|
<TabsTrigger value="labels" className="gap-1.5 px-3">
|
|
<Tags size={13} /> 용어(라벨)
|
|
</TabsTrigger>
|
|
<TabsTrigger value="fields" className="gap-1.5 px-3">
|
|
<ListPlus size={13} /> 커스텀 필드
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* 저장 바 — 변경이 있을 때만 활성화 */}
|
|
<div className="flex items-center gap-2">
|
|
{dirty && (
|
|
<Button variant="ghost" size="sm" onClick={() => setDraft(structuredClone(settings))}>
|
|
<RotateCcw size={13} /> 되돌리기
|
|
</Button>
|
|
)}
|
|
<input
|
|
ref={fileRef}
|
|
type="file"
|
|
accept="application/json,.json"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const f = e.target.files?.[0];
|
|
if (f) handleImport(f);
|
|
e.target.value = ''; // 같은 파일 재선택 허용
|
|
}}
|
|
/>
|
|
<Button variant="ghost" size="sm" onClick={() => fileRef.current?.click()}>
|
|
<Upload size={13} /> JSON 불러오기
|
|
</Button>
|
|
<Button variant="ghost" size="sm" onClick={handleExport}>
|
|
<Download size={13} /> JSON 내보내기
|
|
</Button>
|
|
<Button size="sm" onClick={handleSave} disabled={!dirty || saving}>
|
|
{saving ? '저장 중...' : '변경사항 저장'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ---- 브랜딩(CI) ---- */}
|
|
<TabsContent value="branding" className="space-y-4">
|
|
<SectionCard
|
|
title="서비스 브랜딩"
|
|
desc="사이드바·타이틀에 노출되는 서비스명과 로고입니다. 비워두면 기본 브랜드(NegoData)가 사용됩니다."
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Field label="서비스명" hint="예: iMarketKorea 구매협상 콘솔">
|
|
<Input
|
|
value={draft.branding?.service_name ?? ''}
|
|
onChange={(e) => setBranding('service_name', e.target.value)}
|
|
placeholder="NegoData (기본값)"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
{/* 로고 이미지 — 업로드(드롭/선택) 또는 URL 직접 입력. 비우면 색상 마크+서비스명 텍스트. */}
|
|
<div className="mt-4">
|
|
<Field label="로고 이미지" hint="비우면 색상 마크 + 서비스명 텍스트로 표시됩니다.">
|
|
<ImageDropzone
|
|
value={draft.branding?.logo_url ?? ''}
|
|
onChange={(url) => setBranding('logo_url', url)}
|
|
onClear={() => setBranding('logo_url', '')}
|
|
onUpload={handleUploadLogo}
|
|
label="로고 이미지 업로드"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
{/* 라이브 미리보기 */}
|
|
<div className="mt-4 border border-border rounded-md p-3 bg-muted/30">
|
|
<Typography variant="muted" className="text-[10px] block mb-2">미리보기 — 사이드바 브랜드</Typography>
|
|
<div className="inline-flex items-center gap-2 font-extrabold tracking-tight text-foreground text-sm bg-background border border-border rounded px-3 py-2">
|
|
{draft.branding?.logo_url ? (
|
|
<img src={draft.branding.logo_url} alt="로고 미리보기" className="h-4 max-w-24 object-contain" />
|
|
) : (
|
|
<span
|
|
aria-hidden
|
|
className="size-4 rounded-[5px]"
|
|
style={{ backgroundColor: draft.branding?.primary_color || 'var(--primary)' }}
|
|
/>
|
|
)}
|
|
{draft.branding?.service_name || 'NegoData'}
|
|
</div>
|
|
</div>
|
|
</SectionCard>
|
|
</TabsContent>
|
|
|
|
{/* ---- 용어(라벨) ---- */}
|
|
<TabsContent value="labels" className="space-y-4">
|
|
<SectionCard
|
|
title="용어 커스터마이징"
|
|
desc="우리 회사에서 쓰는 용어로 화면 표기를 바꿉니다. 비워두면 기본 용어가 사용됩니다."
|
|
>
|
|
<div className="border border-border rounded overflow-hidden">
|
|
<Table className="w-full text-left font-mono text-[11px]">
|
|
<TableHeader className="bg-muted text-muted-foreground">
|
|
<TableRow>
|
|
<TableHead className="p-2 w-40">기본 용어</TableHead>
|
|
<TableHead className="p-2 w-56">우리 회사 용어</TableHead>
|
|
<TableHead className="p-2">적용 위치</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody className="divide-y divide-border bg-background">
|
|
{LABEL_CATALOG.map((entry, i) => {
|
|
const value = draft.labels?.[entry.key] ?? '';
|
|
const isGroupHead = i === 0 || LABEL_CATALOG[i - 1].group !== entry.group;
|
|
return (
|
|
<Fragment key={entry.key}>
|
|
{/* 그룹(상품·협력사·견적) 구분 행 — 용어가 40개 가까워 한 덩어리면 찾기 어렵다 */}
|
|
{isGroupHead && (
|
|
<TableRow className="bg-muted/40 hover:bg-muted/40">
|
|
<TableCell colSpan={3} className="p-2 font-bold text-muted-foreground">
|
|
{entry.group}
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
<TableRow className="hover:bg-muted/30">
|
|
<TableCell className="p-2 font-bold text-foreground">{entry.base}</TableCell>
|
|
<TableCell className="p-2">
|
|
<Input
|
|
className="h-7 text-[11px]"
|
|
value={value}
|
|
onChange={(e) => setLabel(entry.key, e.target.value)}
|
|
placeholder={`${entry.base} (기본값)`}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="p-2 text-muted-foreground">
|
|
{entry.where}
|
|
{value.trim() && (
|
|
<Badge variant="secondary" className="ml-2 text-[9px] px-1 py-0">변경됨</Badge>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
</Fragment>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</SectionCard>
|
|
</TabsContent>
|
|
|
|
{/* ---- 커스텀 필드 ---- */}
|
|
<TabsContent value="fields" className="space-y-4">
|
|
<SectionCard
|
|
title="상품 필드 숨김"
|
|
desc="체크한 항목은 상품 목록·등록 폼·엑셀 양식에서 감춰집니다. DB 컬럼과 기존 값은 그대로 남습니다."
|
|
>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2">
|
|
{HIDEABLE_ITEM_FIELDS.map((f) => {
|
|
const checked = (draft.hidden_fields ?? []).includes(f.key);
|
|
return (
|
|
<label key={f.key} className="flex items-start gap-2 py-1 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
className="mt-0.5"
|
|
checked={checked}
|
|
onChange={(e) =>
|
|
setDraft((d) => {
|
|
const cur = new Set(d.hidden_fields ?? []);
|
|
if (e.target.checked) cur.add(f.key);
|
|
else cur.delete(f.key);
|
|
return { ...d, hidden_fields: [...cur] };
|
|
})
|
|
}
|
|
/>
|
|
<span className="min-w-0">
|
|
<Typography as="span" variant="small" className="block font-semibold">
|
|
{f.label}
|
|
</Typography>
|
|
<Typography as="span" variant="caption" className="block text-muted-foreground">
|
|
{f.where}
|
|
</Typography>
|
|
{f.calcNote && (
|
|
<Typography as="span" variant="caption" className="block text-amber-600">
|
|
⚠ {f.calcNote}
|
|
</Typography>
|
|
)}
|
|
</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
</SectionCard>
|
|
|
|
<CustomFieldsEditor
|
|
title="상품 커스텀 필드"
|
|
desc="상품 등록·수정 화면에 추가로 입력받을 항목입니다. (예: 발주배수, 하도급 여부)"
|
|
fields={draft.item_fields ?? []}
|
|
onChange={(fields) => setDraft((d) => ({ ...d, item_fields: fields }))}
|
|
/>
|
|
<CustomFieldsEditor
|
|
title="협력사 커스텀 필드"
|
|
desc="협력사 등록·수정 화면에 추가로 입력받을 항목입니다. (예: 분류카테고리, 유통레벨)"
|
|
fields={draft.supplier_fields ?? []}
|
|
onChange={(fields) => setDraft((d) => ({ ...d, supplier_fields: fields }))}
|
|
/>
|
|
<CustomFieldsEditor
|
|
title="협상완료 부가정보 필드"
|
|
desc="공급사가 협상 타결 후 입력할 항목입니다. (예: 표준납기, 최소주문수량, 발주배수, 배송유형)"
|
|
fields={draft.session_fields ?? []}
|
|
onChange={(fields) => setDraft((d) => ({ ...d, session_fields: fields }))}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 불러온 JSON 을 현재 설정에 병합. 값이 비어있는 키(빈 문자열·빈 배열·null·undefined)는
|
|
// "업데이트 안 함"으로 보고 기존 값을 유지한다 — 부분 JSON 만 던져도 안전하게 갱신되도록.
|
|
function mergeSettings(base: CompanySettings, incoming: CompanySettings): CompanySettings {
|
|
const mergeMap = (b: Record<string, string> = {}, i: Record<string, string> = {}) => {
|
|
const out = { ...b };
|
|
for (const [k, v] of Object.entries(i)) if (typeof v === 'string' && v.trim()) out[k] = v;
|
|
return out;
|
|
};
|
|
const pickFields = (b?: CustomFieldDef[], i?: CustomFieldDef[]) =>
|
|
Array.isArray(i) && i.length > 0 ? i : (b ?? []);
|
|
return {
|
|
...base,
|
|
labels: mergeMap(base.labels, incoming.labels),
|
|
branding: mergeMap(
|
|
base.branding as Record<string, string> | undefined,
|
|
incoming.branding as Record<string, string> | undefined,
|
|
) as CompanySettings['branding'],
|
|
hidden_fields: Array.isArray(incoming.hidden_fields) && incoming.hidden_fields.length > 0
|
|
? incoming.hidden_fields
|
|
: (base.hidden_fields ?? []),
|
|
item_fields: pickFields(base.item_fields, incoming.item_fields),
|
|
supplier_fields: pickFields(base.supplier_fields, incoming.supplier_fields),
|
|
session_fields: pickFields(base.session_fields, incoming.session_fields),
|
|
};
|
|
}
|
|
|
|
function SectionCard({ title, desc, children }: { title: string; desc: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="bg-card border border-border rounded-lg p-5">
|
|
<Typography variant="h3" className="mb-1">{title}</Typography>
|
|
<Typography variant="muted" className="text-[11px] block mb-4">{desc}</Typography>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="space-y-1">
|
|
<Typography as="label" variant="muted" className="text-[10px] font-semibold">{label}</Typography>
|
|
{children}
|
|
{hint && <Typography variant="muted" className="text-[10px] block">{hint}</Typography>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 커스텀필드 정의 편집 — 표시명을 입력하면 key 를 자동 제안하되 직접 수정도 가능.
|
|
function CustomFieldsEditor({
|
|
title,
|
|
desc,
|
|
fields,
|
|
onChange,
|
|
}: {
|
|
title: string;
|
|
desc: string;
|
|
fields: CustomFieldDef[];
|
|
onChange: (fields: CustomFieldDef[]) => void;
|
|
}) {
|
|
const update = (i: number, patch: Partial<CustomFieldDef>) =>
|
|
onChange(fields.map((f, idx) => (idx === i ? { ...f, ...patch } : f)));
|
|
|
|
return (
|
|
<SectionCard title={title} desc={desc}>
|
|
<div className="border border-border rounded overflow-hidden">
|
|
<Table className="w-full text-left font-mono text-[11px]">
|
|
<TableHeader className="bg-muted text-muted-foreground">
|
|
<TableRow>
|
|
<TableHead className="p-2 w-52">표시명</TableHead>
|
|
<TableHead className="p-2 w-52">키 (영문)</TableHead>
|
|
<TableHead className="p-2 w-36">유형</TableHead>
|
|
<TableHead className="p-2">보기 목록 (선택형, 쉼표로 구분)</TableHead>
|
|
<TableHead className="p-2 text-center w-12">삭제</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody className="divide-y divide-border bg-background">
|
|
{fields.length === 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="p-6 text-center text-muted-foreground">
|
|
추가된 커스텀 필드가 없습니다.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
{fields.map((f, i) => (
|
|
<TableRow key={i} className="hover:bg-muted/30">
|
|
<TableCell className="p-2">
|
|
<Input
|
|
className="h-7 text-[11px]"
|
|
value={f.label}
|
|
onChange={(e) => update(i, { label: e.target.value })}
|
|
placeholder="예: 발주배수"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="p-2">
|
|
<Input
|
|
className="h-7 text-[11px]"
|
|
value={f.key}
|
|
onChange={(e) => update(i, { key: sanitizeKey(e.target.value) })}
|
|
placeholder="예: order_multiple"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="p-2">
|
|
<Select<CustomFieldType>
|
|
value={f.type}
|
|
onValueChange={(v) => v && update(i, { type: v })}
|
|
>
|
|
<SelectTrigger className="h-7 text-[11px] w-full">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(Object.keys(CUSTOM_FIELD_TYPE_LABEL) as CustomFieldType[]).map((t) => (
|
|
<SelectItem key={t} value={t}>
|
|
{CUSTOM_FIELD_TYPE_LABEL[t]}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</TableCell>
|
|
<TableCell className="p-2">
|
|
<OptionsEditor
|
|
options={f.options ?? []}
|
|
disabled={f.type !== 'select'}
|
|
onChange={(opts) => update(i, { options: opts })}
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="p-2 text-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange(fields.filter((_, idx) => idx !== i))}
|
|
className="text-red-500 hover:text-red-700 p-1 rounded hover:bg-red-50 cursor-pointer"
|
|
title="필드 삭제"
|
|
>
|
|
<Trash2 size={13} />
|
|
</button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div className="flex justify-end pt-3">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => onChange([...fields, { key: '', label: '', type: 'text' }])}
|
|
>
|
|
<Plus size={13} /> 필드 추가
|
|
</Button>
|
|
</div>
|
|
</SectionCard>
|
|
);
|
|
}
|
|
|
|
// 선택형 필드의 보기 목록 — 칩(태그) 방식. 입력 후 Enter/쉼표로 하나씩 추가, X로 제거, 빈 칸에서 Backspace 로 마지막 제거.
|
|
function OptionsEditor({
|
|
options,
|
|
disabled,
|
|
onChange,
|
|
}: {
|
|
options: string[];
|
|
disabled?: boolean;
|
|
onChange: (opts: string[]) => void;
|
|
}) {
|
|
const [draft, setDraft] = useState('');
|
|
|
|
if (disabled) return <span className="text-[11px] text-muted-foreground">유형이 ‘선택’일 때 사용</span>;
|
|
|
|
const add = (raw: string) => {
|
|
const v = raw.trim();
|
|
setDraft('');
|
|
if (v && !options.includes(v)) onChange([...options, v]);
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-h-7 flex-wrap items-center gap-1 rounded-md border border-input bg-background px-1.5 py-1">
|
|
{options.map((o, idx) => (
|
|
<span key={idx} className="inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[11px] font-sans">
|
|
{o}
|
|
<button
|
|
type="button"
|
|
onClick={() => onChange(options.filter((_, i) => i !== idx))}
|
|
className="text-muted-foreground hover:text-red-500"
|
|
title="옵션 삭제"
|
|
>
|
|
<X size={11} />
|
|
</button>
|
|
</span>
|
|
))}
|
|
<input
|
|
className="h-5 min-w-[70px] flex-1 bg-transparent text-[11px] font-sans outline-none"
|
|
value={draft}
|
|
onChange={(e) => (e.target.value.includes(',') ? add(e.target.value.replace(/,/g, '')) : setDraft(e.target.value))}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
|
|
e.preventDefault();
|
|
add(draft);
|
|
} else if (e.key === 'Backspace' && !draft && options.length) {
|
|
onChange(options.slice(0, -1));
|
|
}
|
|
}}
|
|
onBlur={() => add(draft)}
|
|
placeholder={options.length ? '추가…' : '예: 협력사배송 (엔터로 추가)'}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// key 입력 정리 — 영문/숫자/언더스코어만 허용(소문자화).
|
|
function sanitizeKey(raw: string): string {
|
|
return raw.toLowerCase().replace(/[^a-z0-9_]/g, '');
|
|
}
|