+import Dashboard from './components/Dashboard'

+import ProjectsPage from './components/ProjectsPage'

+import SystemPage from './components/SystemPage'

+// 화면 4개: Dashboard(전체 기관 현황 - 좌측 기관 목록 없이 전폭으로 쓴다),

+// 기관관리(시안 레이아웃의 기관 상세), 채널관리(명부 시드 + 담당자 배정 + 채널 생성),

+type Page = 'dashboard' | 'orgs' | 'channels' | 'contacts' | 'projects' | 'system'

+  dashboard: 'Dashboard',

+  projects: '사업관리',

+  system: '시스템관리',

+  const [page, setPage] = useState<Page>('dashboard')

+          if (

+            key === 'dashboard' ||

+            key === 'orgs' ||

+            key === 'channels' ||

+            key === 'contacts' ||

+            key === 'projects' ||

+            key === 'system'

+          ) {

+          {page !== 'contacts' && page !== 'dashboard' && page !== 'system' && page !== 'projects' && (

+            {page === 'dashboard' ? (

+              <Dashboard

+                onOpenOrg={(orgId) => {

+                  setSelectedId(orgId)

+                  setPage('orgs')

+                }}

+                // 요청자 요구: 대시보드 하단에서 전체를 볼 때는 사업관리로 넘어간다

+                onOpenOrgList={() => setPage('projects')}

+              />

+            ) : page === 'projects' ? (

+              <ProjectsPage

+                onOpenOrg={(orgId) => {

+                  setSelectedId(orgId)

+                  setPage('orgs')

+                }}

+              />

+            ) : page === 'system' ? (

+              <SystemPage onChanged={() => void reload()} />

+            ) : page === 'contacts' ? (

+/** 대시보드 KPI 타일 7개. 모두 서버가 같은 원본에서 접어 만든 값이다. */

+export interface DashboardSummary {

+  applied: number

+  docSubmitted: number

+  reviewTotal: number

+  reviewDone: number

+  processTotal: number

+  processDone: number

+  /** RE 데이터 모델이 아직 없어 항상 0이다. */

+  unresolvedRe: number

+  reportWriting: number

+  completed: number

+}

+

+/** 대시보드 칸반 카드 1장 = "최근 진행 기관" 표 1줄. 둘이 같은 행을 쓴다. */

+export interface DashboardOrgRow {

+  id: number

+  orgNo: string

+  orgName: string

+  stage: number | null

+  /** false면 칸반의 "단계 미지정" 컬럼으로 간다. 드래그로 단계를 옮길 수 없다. */

+  hasChannel: boolean

+  lawyerName: string | null

+  mjName: string | null

+  lawyerAssignedDate: string | null

+  reviewTotal: number

+  reviewDone: number

+  processTotal: number

+  processDone: number

+  /** 현재 단계로 넘어온 시각(epoch ms). 카드의 D+n 계산용. */

+  stageChangedAt: number | null

+  /** 단계·권리확인/처리·메모·배정 중 가장 최근 변동 시각(epoch ms). */

+  lastChangedAt: number | null

+  reCount: number

+}

+

+export interface DashboardData {

+  summary: DashboardSummary

+  orgs: DashboardOrgRow[]

+}

+

+export function getDashboard(): Promise<DashboardData> {

+  return request<DashboardData>('/api/dashboard')

+}

+

+/** 사업관리 목록 1행. org는 대시보드와 같은 집계 행을 그대로 쓴다. */

+export interface ProjectRow {

+  org: DashboardOrgRow

+  lastContactedOn: string | null

+  contactCount: number

+  reportCount: number

+}

+

+/** 신청 확인 연락 이력 1건. */

+export interface ContactLog {

+  id: number

+  orgId: number

+  contactedOn: string

+  method: string

+  summary: string

+  author: string

+  createdAt: number

+}

+

+export interface ContactLogInput {

+  contactedOn: string

+  method: string

+  summary: string

+}

+

+/** 기관별 최종 보고서. */

+export interface OrgReport {

+  id: number

+  orgId: number

+  fileName: string

+  contentType: string | null

+  byteSize: number

+  uploadedBy: string

+  uploadedAt: number

+}

+

+export function getProjects(): Promise<ProjectRow[]> {

+  return request<ProjectRow[]>('/api/projects')

+}

+

+export function getContactLogs(orgId: number): Promise<ContactLog[]> {

+  return request<ContactLog[]>(`/api/orgs/${orgId}/contact-logs`)

+}

+

+/** 등록하면 갱신된 이력 전체가 돌아온다(작성자는 서버가 기록). */

+export function addContactLog(orgId: number, body: ContactLogInput): Promise<ContactLog[]> {

+  return request<ContactLog[]>(`/api/orgs/${orgId}/contact-logs`, {

+    method: 'POST',

+    headers: { 'Content-Type': 'application/json' },

+    body: JSON.stringify(body),

+  })

+}

+

+export function updateContactLog(

+  orgId: number,

+  logId: number,

+  body: ContactLogInput,

+): Promise<ContactLog[]> {

+  return request<ContactLog[]>(`/api/orgs/${orgId}/contact-logs/${logId}`, {

+    method: 'PUT',

+    headers: { 'Content-Type': 'application/json' },

+    body: JSON.stringify(body),

+  })

+}

+

+export async function deleteContactLog(orgId: number, logId: number): Promise<void> {

+  const response = await fetch(`/api/orgs/${orgId}/contact-logs/${logId}`, {

+    method: 'DELETE',

+    credentials: 'same-origin',

+    headers: { 'X-XSRF-TOKEN': csrfToken() },

+  })

+  if (!response.ok) {

+    throw new ApiError(response.status, `요청 실패 (${response.status})`)

+  }

+}

+

+export function getReports(orgId: number): Promise<OrgReport[]> {

+  return request<OrgReport[]>(`/api/orgs/${orgId}/reports`)

+}

+

+export function uploadReport(orgId: number, file: File): Promise<OrgReport[]> {

+  const form = new FormData()

+  form.append('file', file)

+  return request<OrgReport[]>(`/api/orgs/${orgId}/reports`, { method: 'POST', body: form })

+}

+

+/** 다운로드는 <a href>가 그대로 열게 둔다. */

+export function reportDownloadUrl(orgId: number, reportId: number): string {

+  return `/api/orgs/${orgId}/reports/${reportId}`

+}

+

+export async function deleteReport(orgId: number, reportId: number): Promise<void> {

+  const response = await fetch(`/api/orgs/${orgId}/reports/${reportId}`, {

+    method: 'DELETE',

+    credentials: 'same-origin',

+    headers: { 'X-XSRF-TOKEN': csrfToken() },

+  })

+  if (!response.ok) {

+    throw new ApiError(response.status, `요청 실패 (${response.status})`)

+  }

+}

+

+/** 시스템관리 > 채널 초기화 미리보기 1행. 웹앱 DB가 아는 채널만 담긴다. */

+export interface ResetTarget {

+  orgId: number

+  orgNo: string

+  orgName: string

+  stage: number | null

+  channels: { kind: string; channelId: string }[]

+}

+

+export interface ResetReport {

+  archivedChannels: number

+  clearedOrgs: number

+  failures: string[]

+}

+

+/** 실행 확인 문구. 서버도 같은 값을 검사한다. */

+export const RESET_CONFIRM_PHRASE = '채널 초기화'

+

+export function getResetPreview(): Promise<ResetTarget[]> {

+  return request<ResetTarget[]>('/api/system/reset/preview')

+}

+

+export function resetChannels(confirm: string): Promise<ResetReport> {

+  return request<ResetReport>('/api/system/reset/channels', {

+    method: 'POST',

+    headers: { 'Content-Type': 'application/json' },

+    body: JSON.stringify({ confirm }),

+  })

+}

+

+/** 작성자는 보내지 않는다 - 서버가 로그인 사용자로 기록한다. */

+export function createMemo(orgId: number, memo: { body: string }): Promise<WorkMemo> {

+/** 본문만 고친다. 작성자·작성시각은 서버가 그대로 유지한다. */

+export function updateMemo(orgId: number, memoId: number, memo: { body: string }): Promise<WorkMemo> {

+  return request<WorkMemo>(`/api/orgs/${orgId}/memos/${memoId}`, {

+    method: 'PUT',

+    headers: { 'Content-Type': 'application/json' },

+    body: JSON.stringify(memo),

+  })

+}

+

+/** 검색 조건. keyword는 통합검색, site/board/title은 열별 조건으로 서로 AND로 겹친다. */

+export interface ItemSearch {

+  keyword?: string

+  site?: string

+  board?: string

+  title?: string

+}

+

+  params: ItemSearch & { page?: number; size?: number } = {},

+  }

+  for (const field of ['site', 'board', 'title'] as const) {

+    if (params[field]) {

+      query.set(field, params[field] as string)

+    }

+/** 권리확인 일괄 등록. 비운 항목은 기존 값을 유지한다. */

+export function bulkUpdateReview(

+  orgId: number,

+  body: { ids: number[]; reviewResult?: string; judgedKoglType?: string; opinion?: string },

+): Promise<{ updated: number }> {

+  return request<{ updated: number }>(`/api/orgs/${orgId}/review/bulk`, {

+    method: 'PUT',

+    headers: { 'Content-Type': 'application/json' },

+    body: JSON.stringify(body),

+  })

+}

+

+export function bulkDeleteReview(orgId: number, ids: number[]): Promise<{ deleted: number }> {

+  return request<{ deleted: number }>(`/api/orgs/${orgId}/review/bulk-delete`, {

+    method: 'POST',

+    headers: { 'Content-Type': 'application/json' },

+    body: JSON.stringify(ids),

+  })

+}

+

+/** 권리처리 일괄 등록. 비운 항목은 기존 값을 유지한다. */

+export function bulkUpdateProcess(

+  orgId: number,

+  body: { ids: number[]; processStatus?: string; judgedKoglType?: string; finalOpinion?: string },

+): Promise<{ updated: number }> {

+  return request<{ updated: number }>(`/api/orgs/${orgId}/process/bulk`, {

+    method: 'PUT',

+    headers: { 'Content-Type': 'application/json' },

+    body: JSON.stringify(body),

+  })

+}

+

+export function bulkDeleteProcess(orgId: number, ids: number[]): Promise<{ deleted: number }> {

+  return request<{ deleted: number }>(`/api/orgs/${orgId}/process/bulk-delete`, {

+    method: 'POST',

+    headers: { 'Content-Type': 'application/json' },

+    body: JSON.stringify(ids),

+  })

+}

+

+  params: ItemSearch & { status?: ProcessStatusFilter; page?: number; size?: number } = {},

+  for (const field of ['site', 'board', 'title'] as const) {

+    if (params[field]) {

+      query.set(field, params[field] as string)

+    }

+  }

+import HelpButton from '../help/HelpButton'

+          <span className="flex items-center">

+            <HelpButton topic="contacts.manage" />

+          </span>

+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'

+import { beforeEach, describe, expect, it, vi } from 'vitest'

+import Dashboard from './Dashboard'

+import type { DashboardData, DashboardOrgRow } from '../api/client'

+

+const mocks = vi.hoisted(() => ({

+  getDashboard: vi.fn(),

+  updateStage: vi.fn(),

+}))

+

+vi.mock('../api/client', async (importOriginal) => ({

+  ...(await importOriginal<typeof import('../api/client')>()),

+  getDashboard: mocks.getDashboard,

+  updateStage: mocks.updateStage,

+}))

+

+const DAY = 24 * 60 * 60 * 1000

+

+function row(overrides: Partial<DashboardOrgRow> = {}): DashboardOrgRow {

+  return {

+    id: 1,

+    orgNo: '001',

+    orgName: '한국출판문화산업진흥원',

+    stage: 5,

+    hasChannel: true,

+    lawyerName: '전세준',

+    mjName: '이연경',

+    lawyerAssignedDate: '2026-06-19',

+    reviewTotal: 392,

+    reviewDone: 78,

+    processTotal: 0,

+    processDone: 0,

+    stageChangedAt: Date.now() - 3 * DAY,

+    lastChangedAt: Date.now() - 3 * DAY,

+    reCount: 0,

+    ...overrides,

+  }

+}

+

+function data(rows: DashboardOrgRow[], summary: Partial<DashboardData['summary']> = {}): DashboardData {

+  return {

+    summary: {

+      applied: rows.length,

+      docSubmitted: 0,

+      reviewTotal: 0,

+      reviewDone: 0,

+      processTotal: 0,

+      processDone: 0,

+      unresolvedRe: 0,

+      reportWriting: 0,

+      completed: 0,

+      ...summary,

+    },

+    orgs: rows,

+  }

+}

+

+function renderDashboard(onOpenOrg = vi.fn(), onOpenOrgList = vi.fn()) {

+  render(<Dashboard onOpenOrg={onOpenOrg} onOpenOrgList={onOpenOrgList} />)

+  return { onOpenOrg, onOpenOrgList }

+}

+

+/** 기관명은 칸반 카드와 표에 동시에 나오므로, 표를 볼 때는 항상 표 안에서만 찾는다. */

+function table() {

+  return within(screen.getByTestId('recent-table'))

+}

+

+describe('Dashboard', () => {

+  beforeEach(() => {

+    vi.clearAllMocks()

+    mocks.getDashboard.mockResolvedValue(data([row()]))

+    mocks.updateStage.mockResolvedValue({})

+  })

+

+  it('KPI 타일에 서버가 준 집계를 그대로 보여준다', async () => {

+    mocks.getDashboard.mockResolvedValue(

+      data([row()], {

+        applied: 50,

+        docSubmitted: 9,

+        reviewTotal: 2012,

+        reviewDone: 503,

+        processTotal: 197,

+        processDone: 0,

+        completed: 1,

+      }),

+    )

+    renderDashboard()

+

+    expect(await screen.findByText('503 / 2,012')).toBeTruthy()

+    expect(screen.getByText('0 / 197')).toBeTruthy()

+    // 권리확인 진척률

+    expect(screen.getByText('25%')).toBeTruthy()

+  })

+

+  it('채널이 없는 기관은 단계 미지정 컬럼에 담긴다', async () => {

+    mocks.getDashboard.mockResolvedValue(

+      data([row({ id: 1, orgName: '채널없는기관', hasChannel: false, stage: null })]),

+    )

+    renderDashboard()

+

+    const column = await screen.findByTestId('column-unassigned')

+    expect(column.textContent).toContain('채널없는기관')

+    expect(column.textContent).toContain('단계 미지정')

+  })

+

+  it('단계 미지정 카드를 끌면 이동하지 않고 채널 생성 경고창이 뜬다', async () => {

+    mocks.getDashboard.mockResolvedValue(

+      data([row({ orgName: '채널없는기관', hasChannel: false, stage: null })]),

+    )

+    renderDashboard()

+

+    const column = await screen.findByTestId('column-unassigned')

+    const card = within(column).getByText('채널없는기관')

+    fireEvent.dragStart(card.parentElement!, {

+      dataTransfer: { setData: vi.fn(), getData: vi.fn() },

+    })

+

+    expect(await screen.findByText('채널을 먼저 생성해 주세요')).toBeTruthy()

+    expect(mocks.updateStage).not.toHaveBeenCalled()

+  })

+

+  it('채널이 있는 카드를 다른 컬럼에 떨어뜨리면 단계가 바뀐다', async () => {

+    renderDashboard()

+    await screen.findByTestId('recent-table')

+

+    const target = screen.getByTestId('column-6')

+    fireEvent.drop(target, {

+      dataTransfer: { getData: () => '1', setData: vi.fn() },

+    })

+

+    await waitFor(() => expect(mocks.updateStage).toHaveBeenCalledWith(1, 6))

+  })

+

+  it('같은 컬럼에 떨어뜨리면 아무 것도 하지 않는다', async () => {

+    renderDashboard()

+    await screen.findByTestId('recent-table')

+

+    fireEvent.drop(screen.getByTestId('column-5'), {

+      dataTransfer: { getData: () => '1', setData: vi.fn() },

+    })

+

+    await waitFor(() => expect(mocks.getDashboard).toHaveBeenCalledTimes(1))

+    expect(mocks.updateStage).not.toHaveBeenCalled()

+  })

+

+  it('단계 미지정 컬럼에는 떨어뜨려도 단계가 바뀌지 않는다', async () => {

+    renderDashboard()

+    await screen.findByTestId('recent-table')

+

+    fireEvent.drop(screen.getByTestId('column-unassigned'), {

+      dataTransfer: { getData: () => '1', setData: vi.fn() },

+    })

+

+    await waitFor(() => expect(mocks.updateStage).not.toHaveBeenCalled())

+  })

+

+  it('카드에 현재 단계 진입 후 경과일을 D+n으로 보여준다', async () => {

+    mocks.getDashboard.mockResolvedValue(

+      data([row({ stageChangedAt: Date.now() - 30 * DAY })]),

+    )

+    renderDashboard()

+

+    expect(await screen.findByText('D+30')).toBeTruthy()

+  })

+

+  it('최근 진행 기관 표는 최근 변경순으로 정렬한다', async () => {

+    mocks.getDashboard.mockResolvedValue(

+      data([

+        row({ id: 1, orgNo: '001', orgName: '오래된기관', lastChangedAt: Date.now() - 10 * DAY }),

+        row({ id: 2, orgNo: '002', orgName: '최근기관', lastChangedAt: Date.now() }),

+      ]),

+    )

+    renderDashboard()

+

+    await screen.findByTestId('recent-table')

+    const names = table().getAllByRole('row').slice(1).map((tr) => tr.children[1].textContent)

+    expect(names).toEqual(['최근기관', '오래된기관'])

+  })

+

+  it('표는 8개까지만 보여주고 더보기로 늘린다', async () => {

+    const rows = Array.from({ length: 10 }, (_, i) =>

+      row({ id: i + 1, orgNo: String(i + 1).padStart(3, '0'), orgName: `기관${i + 1}` }),

+    )

+    mocks.getDashboard.mockResolvedValue(data(rows))

+    renderDashboard()

+

+    await screen.findByTestId('recent-table')

+    expect(table().getAllByRole('row')).toHaveLength(9) // 헤더 1 + 8

+

+    fireEvent.click(screen.getByText('더보기 (2개 남음)'))

+    expect(table().getAllByRole('row')).toHaveLength(11)

+  })

+

+  it('기관명 검색으로 표를 거른다', async () => {

+    mocks.getDashboard.mockResolvedValue(

+      data([

+        row({ id: 1, orgNo: '001', orgName: '한국출판문화산업진흥원' }),

+        row({ id: 2, orgNo: '002', orgName: '세종학당재단' }),

+      ]),

+    )

+    renderDashboard()

+

+    await screen.findByTestId('recent-table')

+    fireEvent.change(screen.getByLabelText('기관명/기관코드 검색'), { target: { value: '세종' } })

+

+    expect(table().queryByText('한국출판문화산업진흥원')).toBeNull()

+    expect(table().getByText('세종학당재단')).toBeTruthy()

+  })

+

+  it('표에서 기관을 클릭하면 기관관리로 넘긴다', async () => {

+    const onOpenOrg = vi.fn()

+    renderDashboard(onOpenOrg)

+

+    await screen.findByTestId('recent-table')

+    fireEvent.click(table().getByText('한국출판문화산업진흥원'))

+    expect(onOpenOrg).toHaveBeenCalledWith(1)

+  })

+

+  it('하단 전체 보기는 사업관리로 넘긴다', async () => {

+    const onOpenOrgList = vi.fn()

+    renderDashboard(vi.fn(), onOpenOrgList)

+

+    fireEvent.click(await screen.findByText('사업관리에서 전체 보기 →'))

+    expect(onOpenOrgList).toHaveBeenCalled()

+  })

+})

+import { useCallback, useEffect, useMemo, useState } from 'react'

+import {

+  getDashboard,

+  updateStage,

+  type DashboardData,

+  type DashboardOrgRow,

+} from '../api/client'

+import { STAGE_GROUPS, STAGE_LABELS, stageGroupKey, stageLabel } from '../stages'

+import HelpButton from '../help/HelpButton'

+

+/**

+ * 시안(3단계 대쉬보드 화면 설계안)의 대시보드 화면. 세 블록으로 구성된다.

+ *   1) KPI 타일 7개

+ *   2) 단계별 현황 칸반 - 카드를 끌어 단계를 옮긴다

+ *   3) 최근 진행 기관 표 - 최근 변동순 상위 N개

+ *

+ * 칸반 맨 앞의 "단계 미지정" 컬럼은 <b>채널을 아직 만들지 않은 기관만</b> 담는다(요청자 확정).

+ * 기관관리 상세 화면에는 이 개념이 없다 - 거기서는 채널 생성 전이면 1~12 스트립이 전부

+ * 회색으로 보일 뿐이다(OrgOverview). 미지정 카드는 끌어도 단계가 바뀌지 않고, 채널을

+ * 먼저 만들라는 경고창이 뜬다. 단계만 올려 두면 게시글·자료·권리검토가 전부 채널에 붙어

+ * 있어서 빈 껍데기가 되기 때문이다.

+ */

+

+interface Props {

+  /** 카드/표에서 기관을 클릭했을 때. 기관관리 화면으로 이동해 해당 기관을 연다. */

+  onOpenOrg: (orgId: number) => void

+  /** [전체 기관 보기]. 기관관리 화면으로만 이동한다. */

+  onOpenOrgList: () => void

+}

+

+const CIRCLED = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫']

+

+/** 칸반 컬럼 상단 색 띠. 구간별로 같은 색을 쓴다. */

+const GROUP_COLOR: Record<string, string> = {

+  intake: 'bg-slate-400',

+  assign: 'bg-indigo-400',

+  check: 'bg-emerald-400',

+  process: 'bg-amber-400',

+  closing: 'bg-violet-400',

+}

+

+/** 표/칸반이 한 번에 보여주는 기관 수. [더보기]를 누를 때마다 이만큼 늘어난다. */

+const PAGE_SIZE = 8

+/** 칸반 컬럼 하나가 한 번에 보여주는 카드 수. */

+const COLUMN_SIZE = 2

+

+const DAY_MS = 24 * 60 * 60 * 1000

+

+function formatDate(ms: number | null): string {

+  if (!ms) {

+    return '-'

+  }

+  const d = new Date(ms)

+  const pad = (n: number) => String(n).padStart(2, '0')

+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`

+}

+

+/** 현재 단계로 넘어온 뒤 며칠 지났는지. 이력이 없으면 null이라 배지를 아예 안 그린다. */

+function daysSince(ms: number | null): number | null {

+  if (!ms) {

+    return null

+  }

+  return Math.max(0, Math.floor((Date.now() - ms) / DAY_MS))

+}

+

+function percent(done: number, total: number): number {

+  return total === 0 ? 0 : Math.round((done / total) * 100)

+}

+

+/**

+ * 카드가 들어갈 칸반 컬럼. null이면 "단계 미지정"이다.

+ *

+ * 채널이 있는데 단계가 비어 있는 기관은 V11 백필과 채널 생성 로직 덕에 원칙적으로 없지만,

+ * 혹시 생기더라도 보드에서 사라지지 않도록 1단계로 본다.

+ */

+function columnOf(row: DashboardOrgRow): number | null {

+  if (!row.hasChannel) {

+    return null

+  }

+  return row.stage ?? 1

+}

+

+function KpiTile({

+  label,

+  value,

+  sub,

+  accent,

+}: {

+  label: string

+  value: string

+  sub?: string

+  accent?: boolean

+}) {

+  return (

+    <div

+      className={`flex min-w-0 flex-1 flex-col items-center gap-1 rounded-lg border bg-white px-3 py-4 ${

+        accent ? 'border-gray-300 shadow-sm' : 'border-gray-200'

+      }`}

+    >

+      <span className="text-xs text-gray-500">{label}</span>

+      <span className="text-2xl font-semibold tabular-nums">{value}</span>

+      {sub && <span className="text-xs text-gray-400 tabular-nums">{sub}</span>}

+    </div>

+  )

+}

+

+function ProgressLine({ label, done, total }: { label: string; done: number; total: number }) {

+  const value = percent(done, total)

+  return (

+    <div className="space-y-1">

+      <div className="flex items-baseline justify-between text-xs">

+        <span className="text-gray-500">

+          {label} <span className="font-medium text-gray-800 tabular-nums">{done.toLocaleString()} / {total.toLocaleString()}</span>

+        </span>

+        <span className="font-medium text-gray-600 tabular-nums">{value}%</span>

+      </div>

+      <div className="h-1 w-full rounded-full bg-gray-100">

+        <div className="h-1 rounded-full bg-blue-500" style={{ width: `${value}%` }} />

+      </div>

+    </div>

+  )

+}

+

+/** 단계 구간에 따라 카드 본문이 달라진다(시안의 컬럼별 카드 모양). */

+function CardBody({ row }: { row: DashboardOrgRow }) {

+  const stage = columnOf(row)

+  const group = stageGroupKey(stage)

+  const lawyer = row.lawyerName ?? '변호사 미배정'

+

+  if (stage === null) {

+    return <p className="text-xs text-gray-500">채널 미생성 · 담당자 배정 후 채널을 만드세요</p>

+  }

+  if (stage === 1) {

+    return <p className="text-xs text-gray-500">신청일 {formatDate(row.stageChangedAt)}</p>

+  }

+  if (stage === 2 || stage === 3) {

+    return (

+      <div className="space-y-0.5 text-xs text-gray-500">

+        <p>목록 {row.reviewTotal.toLocaleString()}건</p>

+        <p>접수일 {formatDate(row.stageChangedAt)}</p>

+      </div>

+    )

+  }

+  if (group === 'assign') {

+    return (

+      <div className="space-y-0.5 text-xs text-gray-500">

+        <p>{lawyer}</p>

+        <p>배정일 {row.lawyerAssignedDate ?? formatDate(row.stageChangedAt)}</p>

+      </div>

+    )

+  }

+  if (group === 'check') {

+    return (

+      <div className="space-y-1.5">

+        <p className="text-xs text-gray-500">{lawyer}</p>

+        <ProgressLine label="확인" done={row.reviewDone} total={row.reviewTotal} />

+      </div>