feat(web): manage dictionaries and teams from the console
The console could not create dictionary entries, and team pages showed a static member list with no record of who changed what. Dictionary management, a knowledge upload form, and a team activity feed are now available, alongside a download center that links the published desktop installer feed rather than repository-local paths that no deploy ships. Red-team e2e coverage was added for the account and team flows touched here.
This commit is contained in:
Yun Chan
parent
f6a29db95a
commit
cfc58458a8
21 changed files with 985 additions and 125 deletions
|
|
@ -167,7 +167,7 @@ export default async function BillingPage({ searchParams }: BillingPageProps): P
|
|||
<Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||||
<TactileBadge ledColor="amber" tone="accent">D3RO VOICE PRO</TactileBadge>
|
||||
</Box>
|
||||
<Typography component="h1" sx={{ fontSize: 28, fontWeight: 500, color: '#fff', letterSpacing: '-0.02em', mb: 1 }}>
|
||||
<Typography component="h1" sx={{ fontSize: 28, fontWeight: 500, color: 'var(--d3-text-inverse)', letterSpacing: '-0.02em', mb: 1 }}>
|
||||
구독 및 결제
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: 14, color: 'var(--d3-text-label)' }}>
|
||||
|
|
@ -195,7 +195,7 @@ export default async function BillingPage({ searchParams }: BillingPageProps): P
|
|||
CURRENT SUBSCRIPTION
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flexWrap: 'wrap' }}>
|
||||
<Typography data-testid="billing-current-tier" sx={{ fontSize: 28, fontWeight: 600, color: '#fff' }}>
|
||||
<Typography data-testid="billing-current-tier" sx={{ fontSize: 28, fontWeight: 600, color: 'var(--d3-text-inverse)' }}>
|
||||
{tierLabel(subscription.tier)}
|
||||
</Typography>
|
||||
<Chip
|
||||
|
|
@ -210,7 +210,7 @@ export default async function BillingPage({ searchParams }: BillingPageProps): P
|
|||
결제 계정: {state.email}
|
||||
</Typography>
|
||||
{cancellationDate ? (
|
||||
<Typography data-testid="billing-cancel-at" sx={{ mt: 1, color: '#ffb000', fontSize: 12 }}>
|
||||
<Typography data-testid="billing-cancel-at" sx={{ mt: 1, color: 'var(--d3-status-warning)', fontSize: 12 }}>
|
||||
{cancellationDate}에 구독이 종료됩니다.
|
||||
</Typography>
|
||||
) : periodEnd && isPaid ? (
|
||||
|
|
@ -282,7 +282,7 @@ function PlanCard({
|
|||
border: active
|
||||
? '2px solid var(--d3-accent-main)'
|
||||
: plan.highlight
|
||||
? '1px solid rgba(59,130,246,0.45)'
|
||||
? '1px solid var(--d3-accent-glow)'
|
||||
: undefined
|
||||
}}
|
||||
>
|
||||
|
|
@ -290,7 +290,7 @@ function PlanCard({
|
|||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: 11, color: active ? 'var(--d3-accent-main)' : 'var(--d3-text-label)', mb: 0.75 }}>
|
||||
{active ? 'CURRENT PLAN' : plan.highlight ? 'RECOMMENDED' : 'PLAN'}
|
||||
</Typography>
|
||||
<Typography component="h2" sx={{ fontSize: 24, fontWeight: 600, color: '#fff' }}>{plan.name}</Typography>
|
||||
<Typography component="h2" sx={{ fontSize: 24, fontWeight: 600, color: 'var(--d3-text-inverse)' }}>{plan.name}</Typography>
|
||||
<Typography sx={{ mt: 0.5, mb: 3, color: plan.tier === 'free' ? 'var(--d3-text-label)' : 'var(--d3-accent-main)', fontFamily: d3roFontMono, fontSize: 16 }}>
|
||||
{priceLabel}
|
||||
</Typography>
|
||||
|
|
@ -315,7 +315,7 @@ function PlanCard({
|
|||
) : canPurchase && catalogPrices.length > 0 ? (
|
||||
<BillingCheckoutOptions tier={plan.tier} prices={catalogPrices} />
|
||||
) : canPurchase ? (
|
||||
<Typography data-testid={`billing-price-unavailable-${plan.tier}`} sx={{ py: 1.5, textAlign: 'center', color: '#ffb000', fontSize: 12 }}>
|
||||
<Typography data-testid={`billing-price-unavailable-${plan.tier}`} sx={{ py: 1.5, textAlign: 'center', color: 'var(--d3-status-warning)', fontSize: 12 }}>
|
||||
검증된 가격을 불러온 뒤 결제할 수 있습니다.
|
||||
</Typography>
|
||||
) : (
|
||||
|
|
@ -332,7 +332,7 @@ function SubscriptionManagement({ subscription }: { subscription: BillingSubscri
|
|||
return <Typography sx={{ color: 'var(--d3-text-label)', fontSize: 12 }}>활성 유료 구독이 없습니다.</Typography>
|
||||
}
|
||||
if (subscription.cancel_at || subscription.auto_renewing === false) {
|
||||
return <Typography sx={{ color: '#ffb000', fontSize: 12 }}>자동 갱신이 해지되었습니다.</Typography>
|
||||
return <Typography sx={{ color: 'var(--d3-status-warning)', fontSize: 12 }}>자동 갱신이 해지되었습니다.</Typography>
|
||||
}
|
||||
if (subscription.provider === 'payple') return <PaypleManageButton />
|
||||
if (subscription.provider === 'stripe') return <PortalButton />
|
||||
|
|
@ -354,7 +354,9 @@ function BillingLoadError(): React.ReactElement {
|
|||
<Alert severity="error" data-testid="billing-load-error" sx={{ mb: 2 }}>
|
||||
구독 정보를 불러오지 못했습니다. 결제를 시작하지 않았습니다.
|
||||
</Alert>
|
||||
<Button component={Link} href="/billing" variant="outlined">다시 시도</Button>
|
||||
<Link href="/billing" style={{ textDecoration: 'none' }}>
|
||||
<Button variant="outlined">다시 시도</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -369,15 +369,15 @@ export default function CommandsPage(): React.ReactElement {
|
|||
<DoubleBezelCard innerPadding={3} sx={{ mb: 4 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, mb: 3, flexWrap: 'wrap' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
<Box sx={{ width: 44, height: 44, borderRadius: '12px', bgcolor: 'rgba(59,130,246,0.15)', border: '1px solid rgba(59,130,246,0.4)', display: 'grid', placeItems: 'center', color: 'var(--d3-accent-main)' }}><Zap size={22} /></Box>
|
||||
<Box sx={{ width: 44, height: 44, borderRadius: '12px', bgcolor: 'var(--d3-accent-glow)', border: '1px solid var(--d3-accent-glow)', display: 'grid', placeItems: 'center', color: 'var(--d3-accent-main)' }}><Zap size={22} /></Box>
|
||||
<Box>
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: 10, color: 'var(--d3-text-label)' }}>ACTIVE SYNCED INSTRUCTION</Typography>
|
||||
<Typography sx={{ fontSize: 18, fontWeight: 500, color: '#fff' }}>{activeInstruction?.name ?? '활성 명령 없음'}</Typography>
|
||||
<Typography sx={{ fontSize: 18, fontWeight: 500, color: 'var(--d3-text-inverse)' }}>{activeInstruction?.name ?? '활성 명령 없음'}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<TactileBadge ledColor="green" tone="success">SUPABASE SSOT · REV {state.settingsRevision}</TactileBadge>
|
||||
</Box>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: 'repeat(4, 1fr)' }, gap: 1.5, p: 2, bgcolor: 'var(--d3-bg-inset)', borderRadius: '12px', border: '1px solid #1a1a1c' }}>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', md: 'repeat(4, 1fr)' }, gap: 1.5, p: 2, bgcolor: 'var(--d3-bg-inset)', borderRadius: '12px', border: '1px solid var(--d3-bg-card)' }}>
|
||||
<PipelineStep icon={<Braces size={15} />} step="01" label="텍스트 입력" />
|
||||
<PipelineStep icon={<CheckCircle2 size={15} />} step="02" label="활성 명령 적용" />
|
||||
<PipelineStep icon={<Cpu size={15} />} step="03" label="llm-proxy" accent />
|
||||
|
|
@ -418,7 +418,7 @@ export default function CommandsPage(): React.ReactElement {
|
|||
<Box sx={{ pt: 0.5 }}><Led color={active ? 'green' : 'amber'} size={8} /></Box>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', mb: 0.5 }}>
|
||||
<Typography sx={{ fontSize: 16, fontWeight: 500, color: active ? 'var(--d3-accent-main)' : '#fff' }}>{instruction.name}</Typography>
|
||||
<Typography sx={{ fontSize: 16, fontWeight: 500, color: active ? 'var(--d3-accent-main)' : 'var(--d3-text-primary)' }}>{instruction.name}</Typography>
|
||||
<TactileBadge mono tone={instruction.builtinKey ? 'mono' : 'accent'}>{instruction.builtinKey ? 'BUILT-IN · READ ONLY' : 'CUSTOM'}</TactileBadge>
|
||||
{active && <TactileBadge mono tone="success">ACTIVE</TactileBadge>}
|
||||
</Box>
|
||||
|
|
@ -470,7 +470,7 @@ export default function CommandsPage(): React.ReactElement {
|
|||
</MetalCard>
|
||||
|
||||
<Dialog open={dialogOpen} onClose={() => { if (!saving) setDialogOpen(false) }} maxWidth="sm" fullWidth PaperProps={{ sx: { bgcolor: 'var(--d3-bg-card)', border: '1px solid var(--d3-border-default)', borderRadius: '16px', p: 1 } }}>
|
||||
<DialogTitle sx={{ color: '#fff', fontWeight: 500 }}>{editing ? '사용자 명령 편집' : '사용자 명령 추가'}</DialogTitle>
|
||||
<DialogTitle sx={{ color: 'var(--d3-text-inverse)', fontWeight: 500 }}>{editing ? '사용자 명령 편집' : '사용자 명령 추가'}</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
|
||||
<TextField label="명령 이름" value={draft.name} onChange={(event) => setDraft((current) => ({ ...current, name: event.target.value }))} inputProps={{ maxLength: 80 }} autoFocus fullWidth size="small" sx={{ mt: 1 }} />
|
||||
<TextField label="명령 설명" value={draft.description} onChange={(event) => setDraft((current) => ({ ...current, description: event.target.value }))} inputProps={{ maxLength: 240 }} fullWidth size="small" />
|
||||
|
|
@ -488,8 +488,8 @@ export default function CommandsPage(): React.ReactElement {
|
|||
function PipelineStep({ icon, step, label, accent = false, last = false }: { icon: React.ReactNode; step: string; label: string; accent?: boolean; last?: boolean }): React.ReactElement {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Box sx={{ width: 32, height: 32, borderRadius: '50%', bgcolor: accent ? 'rgba(59,130,246,0.2)' : 'var(--d3-bg-elevated)', display: 'grid', placeItems: 'center', color: accent ? 'var(--d3-accent-main)' : 'var(--d3-text-secondary)' }}>{icon}</Box>
|
||||
<Box sx={{ flex: 1 }}><Typography sx={{ fontFamily: d3roFontMono, fontSize: 9, color: 'var(--d3-text-label)' }}>STEP {step}</Typography><Typography sx={{ fontSize: 12, fontWeight: 600, color: accent ? 'var(--d3-accent-main)' : '#fff' }}>{label}</Typography></Box>
|
||||
<Box sx={{ width: 32, height: 32, borderRadius: '50%', bgcolor: accent ? 'var(--d3-accent-glow)' : 'var(--d3-bg-elevated)', display: 'grid', placeItems: 'center', color: accent ? 'var(--d3-accent-main)' : 'var(--d3-text-secondary)' }}>{icon}</Box>
|
||||
<Box sx={{ flex: 1 }}><Typography sx={{ fontFamily: d3roFontMono, fontSize: 9, color: 'var(--d3-text-label)' }}>STEP {step}</Typography><Typography sx={{ fontSize: 12, fontWeight: 600, color: accent ? 'var(--d3-accent-main)' : 'var(--d3-text-primary)' }}>{label}</Typography></Box>
|
||||
{!last && <ArrowRight size={14} color="var(--d3-text-label)" />}
|
||||
</Box>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import {
|
|||
Tooltip,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
import { Pencil, Plus, RefreshCw, Search, Trash2 } from 'lucide-react'
|
||||
import { Download, Pencil, Plus, RefreshCw, Search, Trash2, Upload } from 'lucide-react'
|
||||
import type { D3roSupabaseClient, DictionaryEntry } from '@d3ro/api-client'
|
||||
import { MetalCard, PhosphorText, PhysicalButton, TactileBadge } from '@d3ro/ui/components/ds'
|
||||
import { d3roFontMono, d3roPalette } from '@d3ro/ui/theme'
|
||||
|
|
@ -30,9 +30,11 @@ import {
|
|||
createDictionaryEntry,
|
||||
deleteDictionaryEntry,
|
||||
DictionaryClientError,
|
||||
importDictionaryFile,
|
||||
listDictionaryPage,
|
||||
normalizeDictionaryDraft,
|
||||
sanitizeDictionarySearch,
|
||||
serializeDictionary,
|
||||
updateDictionaryEntry,
|
||||
type DictionaryCategory,
|
||||
type DictionaryCursor,
|
||||
|
|
@ -43,6 +45,18 @@ import {
|
|||
const PAGE_SIZE = 20
|
||||
const SEARCH_DELAY_MS = 300
|
||||
|
||||
function downloadText(filename: string, text: string, mime: string): void {
|
||||
const blob = new Blob([text], { type: mime })
|
||||
const url = URL.createObjectURL(blob)
|
||||
const anchor = document.createElement('a')
|
||||
anchor.href = url
|
||||
anchor.download = filename
|
||||
document.body.appendChild(anchor)
|
||||
anchor.click()
|
||||
document.body.removeChild(anchor)
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
const CATEGORY_LABELS: Record<DictionaryCategory, string> = {
|
||||
user: '사용자',
|
||||
technical: '기술',
|
||||
|
|
@ -91,7 +105,10 @@ export default function DictionaryPage(): React.ReactElement {
|
|||
const [draft, setDraft] = useState<DictionaryDraft>({ word: '', pronunciation: null, category: 'user' })
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [mutatingIds, setMutatingIds] = useState<Set<string>>(() => new Set())
|
||||
const [ioBusy, setIoBusy] = useState(false)
|
||||
const [notice, setNotice] = useState<string | null>(null)
|
||||
const requestGeneration = useRef(0)
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = window.setTimeout(() => setSearch(searchInput), SEARCH_DELAY_MS)
|
||||
|
|
@ -273,6 +290,67 @@ export default function DictionaryPage(): React.ReactElement {
|
|||
? '조건에 맞는 사전 단어가 없습니다.'
|
||||
: '등록된 사전 단어가 없습니다.'
|
||||
|
||||
const collectAllEntries = async (): Promise<DictionaryEntry[]> => {
|
||||
if (!user) return []
|
||||
const client = getSupabaseBrowserClient() as unknown as D3roSupabaseClient
|
||||
const all: DictionaryEntry[] = []
|
||||
let cursor: DictionaryCursor | null = null
|
||||
for (let guard = 0; guard < 200; guard += 1) {
|
||||
const page = await listDictionaryPage(client, {
|
||||
userId: user.id,
|
||||
search: '',
|
||||
category: 'all',
|
||||
pageSize: 50,
|
||||
cursor
|
||||
})
|
||||
all.push(...page.entries)
|
||||
if (!page.nextCursor) break
|
||||
cursor = page.nextCursor
|
||||
}
|
||||
return all
|
||||
}
|
||||
|
||||
const handleExport = async (format: 'json' | 'csv'): Promise<void> => {
|
||||
if (!user || ioBusy) return
|
||||
setIoBusy(true)
|
||||
setError(null)
|
||||
setNotice(null)
|
||||
try {
|
||||
const all = await collectAllEntries()
|
||||
const visible = all.filter((entry) => matchesView(entry, category, search))
|
||||
const stamp = new Date().toISOString().slice(0, 10)
|
||||
downloadText(
|
||||
`d3ro-dictionary-${stamp}.${format}`,
|
||||
serializeDictionary(visible, format),
|
||||
format === 'csv' ? 'text/csv;charset=utf-8' : 'application/json'
|
||||
)
|
||||
setNotice(`사전 ${visible.length}개를 내보냈습니다.`)
|
||||
} catch (requestError) {
|
||||
setError(dictionaryMessage(requestError))
|
||||
} finally {
|
||||
setIoBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleImportFile = async (file: File): Promise<void> => {
|
||||
if (!user) return
|
||||
const format = file.name.toLowerCase().endsWith('.csv') ? 'csv' : 'json'
|
||||
setIoBusy(true)
|
||||
setError(null)
|
||||
setNotice(null)
|
||||
try {
|
||||
const raw = await file.text()
|
||||
const client = getSupabaseBrowserClient() as unknown as D3roSupabaseClient
|
||||
const result = await importDictionaryFile(client, user.id, raw, format)
|
||||
await loadFirstPage()
|
||||
setNotice(`가져오기 ${result.imported}건, 건너뜀 ${result.skipped}건`)
|
||||
} catch (requestError) {
|
||||
setError(dictionaryMessage(requestError))
|
||||
} finally {
|
||||
setIoBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ maxWidth: 1080, mx: 'auto', p: { xs: 2.5, md: 4 }, pt: 4, pb: 10 }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, mb: 3 }}>
|
||||
|
|
@ -282,11 +360,51 @@ export default function DictionaryPage(): React.ReactElement {
|
|||
{total} ENTRIES · ACCOUNT SYNC
|
||||
</PhosphorText>
|
||||
</Box>
|
||||
<PhysicalButton tone="accent" onClick={openAdd} size="small" trailingIcon={<Plus size={14} />}>
|
||||
단어 추가
|
||||
</PhysicalButton>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Tooltip title="JSON 내보내기">
|
||||
<span>
|
||||
<IconButton aria-label="사전 JSON 내보내기" size="small" disabled={ioBusy} onClick={() => void handleExport('json')} sx={{ color: 'var(--d3-text-label)' }}>
|
||||
<Download size={16} />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="CSV 내보내기">
|
||||
<span>
|
||||
<IconButton aria-label="사전 CSV 내보내기" size="small" disabled={ioBusy} onClick={() => void handleExport('csv')} sx={{ color: 'var(--d3-text-label)' }}>
|
||||
<Download size={16} />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip title="가져오기 (JSON/CSV)">
|
||||
<span>
|
||||
<IconButton aria-label="사전 가져오기" size="small" disabled={ioBusy} onClick={() => fileInputRef.current?.click()} sx={{ color: 'var(--d3-text-label)' }}>
|
||||
<Upload size={16} />
|
||||
</IconButton>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".json,.csv,application/json,text/csv"
|
||||
hidden
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0]
|
||||
event.target.value = ''
|
||||
if (file) void handleImportFile(file)
|
||||
}}
|
||||
/>
|
||||
<PhysicalButton tone="accent" onClick={openAdd} size="small" trailingIcon={<Plus size={14} />}>
|
||||
단어 추가
|
||||
</PhysicalButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{notice && (
|
||||
<Alert severity="success" sx={{ mb: 3 }} onClose={() => setNotice(null)}>
|
||||
{notice}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 1.5, mb: 3, flexWrap: 'wrap' }}>
|
||||
<TextField
|
||||
value={searchInput}
|
||||
|
|
@ -340,7 +458,7 @@ export default function DictionaryPage(): React.ReactElement {
|
|||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 2 }}>
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1, flexWrap: 'wrap' }}>
|
||||
<Typography sx={{ fontSize: 18, fontWeight: 500, color: '#fff', overflowWrap: 'anywhere' }}>{entry.word}</Typography>
|
||||
<Typography sx={{ fontSize: 18, fontWeight: 500, color: 'var(--d3-text-inverse)', overflowWrap: 'anywhere' }}>{entry.word}</Typography>
|
||||
{entry.pronunciation && <TactileBadge mono tone="accent">[{entry.pronunciation}]</TactileBadge>}
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
|
|
@ -350,7 +468,7 @@ export default function DictionaryPage(): React.ReactElement {
|
|||
</Box>
|
||||
<Box sx={{ display: 'flex', gap: 0.25 }}>
|
||||
<Tooltip title="편집"><span><IconButton aria-label={`${entry.word} 편집`} size="small" disabled={busy} onClick={() => openEdit(entry)} sx={{ color: 'var(--d3-text-label)' }}><Pencil size={15} /></IconButton></span></Tooltip>
|
||||
<Tooltip title="삭제"><span><IconButton aria-label={`${entry.word} 삭제`} size="small" disabled={busy} onClick={() => void remove(entry)} sx={{ color: 'var(--d3-text-label)', '&:hover': { color: '#ef4444' } }}><Trash2 size={15} /></IconButton></span></Tooltip>
|
||||
<Tooltip title="삭제"><span><IconButton aria-label={`${entry.word} 삭제`} size="small" disabled={busy} onClick={() => void remove(entry)} sx={{ color: 'var(--d3-text-label)', '&:hover': { color: 'var(--d3-status-danger)' } }}><Trash2 size={15} /></IconButton></span></Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
</MetalCard>
|
||||
|
|
@ -374,7 +492,7 @@ export default function DictionaryPage(): React.ReactElement {
|
|||
fullWidth
|
||||
PaperProps={{ sx: { bgcolor: 'var(--d3-bg-card)', border: '1px solid var(--d3-border-default)', borderRadius: '16px', p: 1 } }}
|
||||
>
|
||||
<DialogTitle sx={{ color: '#fff', fontWeight: 500 }}>{editing ? '단어 편집' : '새 단어 추가'}</DialogTitle>
|
||||
<DialogTitle sx={{ color: 'var(--d3-text-inverse)', fontWeight: 500 }}>{editing ? '단어 편집' : '새 단어 추가'}</DialogTitle>
|
||||
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 1 }}>
|
||||
<TextField
|
||||
label="단어"
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ export default function HistoryDetailPage(): React.ReactElement {
|
|||
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
||||
<Tooltip title={entry.is_favorite ? '즐겨찾기 해제' : '즐겨찾기'}>
|
||||
<span>
|
||||
<IconButton aria-label={entry.is_favorite ? '즐겨찾기 해제' : '즐겨찾기'} disabled={saving || editing} onClick={() => void toggleFavorite()} sx={{ color: entry.is_favorite ? '#ffb000' : 'var(--d3-text-label)' }}>
|
||||
<IconButton aria-label={entry.is_favorite ? '즐겨찾기 해제' : '즐겨찾기'} disabled={saving || editing} onClick={() => void toggleFavorite()} sx={{ color: entry.is_favorite ? 'var(--d3-status-warning)' : 'var(--d3-text-label)' }}>
|
||||
<Star size={19} fill={entry.is_favorite ? 'currentColor' : 'none'} />
|
||||
</IconButton>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -326,14 +326,14 @@ export default function HistoryPage(): React.ReactElement {
|
|||
<Box>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: entry.status === 'completed' ? 'var(--d3-tag-green)' : '#ef4444' }} />
|
||||
<Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: entry.status === 'completed' ? 'var(--d3-tag-green)' : 'var(--d3-status-danger)' }} />
|
||||
<Typography sx={{ fontFamily: d3roFontMono, fontSize: 12, color: 'var(--d3-text-secondary)' }}>
|
||||
{new Date(entry.created_at).toLocaleString('ko-KR', { dateStyle: 'short', timeStyle: 'short' })}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
|
||||
{entry.is_favorite && <Star size={13} fill="#ffb000" color="#ffb000" aria-label="즐겨찾기" />}
|
||||
<Typography sx={{ px: 1, py: 0.25, borderRadius: '6px', bgcolor: 'rgba(59,130,246,0.1)', color: 'var(--d3-accent-main)', fontFamily: d3roFontMono, fontSize: 11 }}>
|
||||
{entry.is_favorite && <Star size={13} fill="var(--d3-status-warning)" color="var(--d3-status-warning)" aria-label="즐겨찾기" />}
|
||||
<Typography sx={{ px: 1, py: 0.25, borderRadius: '6px', bgcolor: 'var(--d3-accent-glow)', color: 'var(--d3-accent-main)', fontFamily: d3roFontMono, fontSize: 11 }}>
|
||||
{entry.word_count} W
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
@ -341,7 +341,7 @@ export default function HistoryPage(): React.ReactElement {
|
|||
|
||||
<Link href={`/history/${entry.id}`} style={{ color: 'inherit', textDecoration: 'none' }}>
|
||||
{entry.title && (
|
||||
<Typography component="h2" sx={{ color: '#f4f4f5', fontWeight: 500, fontSize: 15, mb: 1 }}>
|
||||
<Typography component="h2" sx={{ color: 'var(--d3-text-primary)', fontWeight: 500, fontSize: 15, mb: 1 }}>
|
||||
{entry.title}
|
||||
</Typography>
|
||||
)}
|
||||
|
|
@ -359,14 +359,14 @@ export default function HistoryPage(): React.ReactElement {
|
|||
|
||||
<Box sx={{ display: 'flex', gap: 0.25 }}>
|
||||
<Tooltip title={entry.is_favorite ? '즐겨찾기 해제' : '즐겨찾기'}>
|
||||
<span><IconButton aria-label={entry.is_favorite ? '즐겨찾기 해제' : '즐겨찾기'} size="small" disabled={busy} onClick={() => void toggleFavorite(entry)} sx={{ color: entry.is_favorite ? '#ffb000' : 'var(--d3-text-label)' }}><Star size={15} fill={entry.is_favorite ? 'currentColor' : 'none'} /></IconButton></span>
|
||||
<span><IconButton aria-label={entry.is_favorite ? '즐겨찾기 해제' : '즐겨찾기'} size="small" disabled={busy} onClick={() => void toggleFavorite(entry)} sx={{ color: entry.is_favorite ? 'var(--d3-status-warning)' : 'var(--d3-text-label)' }}><Star size={15} fill={entry.is_favorite ? 'currentColor' : 'none'} /></IconButton></span>
|
||||
</Tooltip>
|
||||
<Tooltip title={copiedId === entry.id ? '복사됨!' : '클립보드 복사'}>
|
||||
<IconButton aria-label="클립보드 복사" size="small" onClick={() => void copyText(entry)} sx={{ color: copiedId === entry.id ? 'var(--d3-tag-green)' : 'var(--d3-text-label)' }}>
|
||||
{copiedId === entry.id ? <Check size={15} /> : <Copy size={15} />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="삭제"><span><IconButton aria-label="전사 기록 삭제" size="small" disabled={busy} onClick={() => void deleteEntry(entry)} sx={{ color: 'var(--d3-text-label)', '&:hover': { color: '#ef4444' } }}><Trash2 size={15} /></IconButton></span></Tooltip>
|
||||
<Tooltip title="삭제"><span><IconButton aria-label="전사 기록 삭제" size="small" disabled={busy} onClick={() => void deleteEntry(entry)} sx={{ color: 'var(--d3-text-label)', '&:hover': { color: 'var(--d3-status-danger)' } }}><Trash2 size={15} /></IconButton></span></Tooltip>
|
||||
<Tooltip title="상세 보기"><IconButton aria-label="전사 기록 상세 보기" component={Link} href={`/history/${entry.id}`} size="small" sx={{ color: 'var(--d3-text-label)' }}><ChevronRight size={15} /></IconButton></Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -41,8 +41,8 @@ export default async function KnowledgePage(): Promise<React.ReactElement> {
|
|||
KNOWLEDGE
|
||||
</PhosphorText>
|
||||
<Box sx={{ color: d3roPalette.text.muted, fontSize: 13, mb: 4 }}>
|
||||
지식 베이스에 문서를 추가하면 AI 채팅/회의록 생성에 활용됩니다. (임베딩 기반 시맨틱
|
||||
검색은 V2-M+1에서 추가 예정)
|
||||
지식 베이스에 문서를 추가하면 AI 채팅/회의록 생성에 활용됩니다. 텍스트 또는 .txt/.md
|
||||
파일을 추가하면 임베딩되어 시맨틱 검색에 사용됩니다.
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 4 }}>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { Box, Stack } from '@mui/material'
|
|||
import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
|
||||
import { d3roPalette, typoSx } from '@d3ro/ui/theme'
|
||||
import { InviteMemberForm } from '@/components/teams/invite-member-form'
|
||||
import { TeamActivityFeed, type TeamActivityItem } from '@/components/teams/activity-feed'
|
||||
import { getSupabaseServerClient } from '@/lib/supabase-server'
|
||||
|
||||
interface PageProps {
|
||||
|
|
@ -20,7 +21,7 @@ export default async function TeamDetailPage({ params }: PageProps): Promise<Rea
|
|||
data: { user }
|
||||
} = await supabase.auth.getUser()
|
||||
|
||||
const [{ data: team }, { data: members }, { data: meetings }] = await Promise.all([
|
||||
const [{ data: team }, { data: members }, { data: meetings }, { data: activities }] = await Promise.all([
|
||||
supabase.from('teams').select('id, name, owner_id, created_at').eq('id', id).maybeSingle(),
|
||||
supabase
|
||||
.from('team_members')
|
||||
|
|
@ -31,7 +32,13 @@ export default async function TeamDetailPage({ params }: PageProps): Promise<Rea
|
|||
.select('id, title, started_at, status')
|
||||
.eq('team_id', id)
|
||||
.order('started_at', { ascending: false })
|
||||
.limit(20)
|
||||
.limit(20),
|
||||
supabase
|
||||
.from('team_activities')
|
||||
.select('id, actor_id, kind, body, created_at')
|
||||
.eq('team_id', id)
|
||||
.order('created_at', { ascending: false })
|
||||
.limit(50)
|
||||
])
|
||||
|
||||
if (!team) {
|
||||
|
|
@ -41,6 +48,18 @@ export default async function TeamDetailPage({ params }: PageProps): Promise<Rea
|
|||
const teamData = team as { id: string; name: string; owner_id: string; created_at: string }
|
||||
const isOwner = teamData.owner_id === user?.id
|
||||
|
||||
const memberRows = (members ?? []) as unknown as Array<{
|
||||
user_id: string
|
||||
role: string
|
||||
joined_at: string
|
||||
profiles: { id: string; name: string | null; avatar_url: string | null } | null
|
||||
}>
|
||||
const isMember = memberRows.some((member) => member.user_id === user?.id)
|
||||
const memberNames: Record<string, string> = {}
|
||||
for (const member of memberRows) {
|
||||
memberNames[member.user_id] = member.profiles?.name ?? member.user_id.slice(0, 8)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ p: 4 }}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
|
|
@ -138,6 +157,19 @@ export default async function TeamDetailPage({ params }: PageProps): Promise<Rea
|
|||
</Stack>
|
||||
)}
|
||||
</MetalCard>
|
||||
|
||||
{/* 활동 피드 */}
|
||||
<MetalCard sx={{ p: 3 }}>
|
||||
<PhosphorText variant="heading" sx={{ mb: 2 }}>
|
||||
ACTIVITY
|
||||
</PhosphorText>
|
||||
<TeamActivityFeed
|
||||
teamId={teamData.id}
|
||||
initialActivities={(activities ?? []) as TeamActivityItem[]}
|
||||
memberNames={memberNames}
|
||||
canPost={isMember}
|
||||
/>
|
||||
</MetalCard>
|
||||
</Stack>
|
||||
</Box>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue