Commit @91cdf521ba7b69568e72a14ee20af052fba49817

ITN Dev 07-23

feat: 채널관리 담당자 입력을 행 단위 표로, 기관관리는 카드형으로 복귀

@91cdf521ba7b69568e72a14ee20af052fba49817

08e8209

91cdf52

frontend/src/components/OrgDetail.test.tsx

--- frontend/src/components/OrgDetail.test.tsx

+++ frontend/src/components/OrgDetail.test.tsx


-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import OrgDetail from './OrgDetail'
 import type { Org } from '../api/client'

   }
 }
 
-/** 세 담당자 그룹은 부서명/연락처/이메일 같은 라벨을 공유하므로, 그룹 제목으로 찾은
- * 컨테이너 안에서만 찾도록 스코프를 좁힌다 - 그렇지 않으면 getByLabelText가
- * "여러 개 일치"로 실패한다. */
-function group(title: string) {
-  const heading = screen.getByText(title)
-  return within(heading.closest('div') as HTMLElement)
-}
-
 beforeEach(() => {
   mocks.updateContact.mockReset()
   mocks.provisionChannels.mockReset()

     const onChanged = vi.fn()
 
     render(<OrgDetail org={org()} onChanged={onChanged} />)
-
-    const applicant = group('신청기관 담당자')
-    fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
-    fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
-    fireEvent.change(applicant.getByLabelText('직급/직함'), { target: { value: '과장' } })
-    fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
-    fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 부서명'), { target: { value: '데이터정보화팀' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 담당자명'), { target: { value: '송민지' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 직급/직함'), { target: { value: '과장' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 연락처'), { target: { value: '02-3475-5434' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 이메일'), { target: { value: 'ming@arirang.com' } })
     fireEvent.click(screen.getByRole('button', { name: '정보 저장' }))
 
     await waitFor(() => {

     const onChanged = vi.fn()
 
     render(<OrgDetail org={org()} onChanged={onChanged} />)
-
-    const applicant = group('신청기관 담당자')
-    fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
-    fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
-    fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
-    fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
-
-    const mj = group('문정원 담당자')
-    fireEvent.change(mj.getByLabelText('부서명'), { target: { value: '문화체육관광부 저작권정책과' } })
-    fireEvent.change(mj.getByLabelText('담당자명'), { target: { value: '김문정' } })
-    fireEvent.change(mj.getByLabelText('연락처'), { target: { value: '02-1234-5678' } })
-    fireEvent.change(mj.getByLabelText('이메일'), { target: { value: 'mj@mcst.go.kr' } })
-
-    const lawyer = group('담당 변호사')
-    fireEvent.change(lawyer.getByLabelText('성명'), { target: { value: '이변호' } })
-    fireEvent.change(lawyer.getByLabelText('연락처'), { target: { value: '02-9876-5432' } })
-    fireEvent.change(lawyer.getByLabelText('이메일'), { target: { value: 'lawyer@lawfirm.kr' } })
-    fireEvent.change(lawyer.getByLabelText('배정일'), { target: { value: '2026-07-21' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 부서명'), { target: { value: '데이터정보화팀' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 담당자명'), { target: { value: '송민지' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 연락처'), { target: { value: '02-3475-5434' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 이메일'), { target: { value: 'ming@arirang.com' } })
+    fireEvent.change(screen.getByLabelText('문정원 담당자 부서명'), { target: { value: '문화체육관광부 저작권정책과' } })
+    fireEvent.change(screen.getByLabelText('문정원 담당자 담당자명'), { target: { value: '김문정' } })
+    fireEvent.change(screen.getByLabelText('문정원 담당자 연락처'), { target: { value: '02-1234-5678' } })
+    fireEvent.change(screen.getByLabelText('문정원 담당자 이메일'), { target: { value: 'mj@mcst.go.kr' } })
+    fireEvent.change(screen.getByLabelText('담당 변호사 성명'), { target: { value: '이변호' } })
+    fireEvent.change(screen.getByLabelText('담당 변호사 연락처'), { target: { value: '02-9876-5432' } })
+    fireEvent.change(screen.getByLabelText('담당 변호사 이메일'), { target: { value: 'lawyer@lawfirm.kr' } })
+    fireEvent.change(screen.getByLabelText('담당 변호사 배정일'), { target: { value: '2026-07-21' } })
 
     fireEvent.click(screen.getByRole('button', { name: '정보 저장' }))
 

 
   it('직급/직함이 비어있어도 나머지 필수 항목만 채우면 정보 저장 버튼이 활성화된다', () => {
     render(<OrgDetail org={org()} onChanged={() => {}} />)
-
-    const applicant = group('신청기관 담당자')
-    fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
-    fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
-    fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
-    fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 부서명'), { target: { value: '데이터정보화팀' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 담당자명'), { target: { value: '송민지' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 연락처'), { target: { value: '02-3475-5434' } })
+    fireEvent.change(screen.getByLabelText('신청기관 담당자 이메일'), { target: { value: 'ming@arirang.com' } })
 
     expect(screen.getByRole('button', { name: '정보 저장' })).toBeEnabled()
   })
 
   it('문정원 담당자와 담당 변호사 항목을 채워도 신청기관 필수 항목이 비어있으면 저장 버튼은 비활성이다', () => {
     render(<OrgDetail org={org()} onChanged={() => {}} />)
-
-    const mj = group('문정원 담당자')
-    fireEvent.change(mj.getByLabelText('담당자명'), { target: { value: '김문정' } })
-
-    const lawyer = group('담당 변호사')
-    fireEvent.change(lawyer.getByLabelText('성명'), { target: { value: '이변호' } })
+    fireEvent.change(screen.getByLabelText('문정원 담당자 담당자명'), { target: { value: '김문정' } })
+    fireEvent.change(screen.getByLabelText('담당 변호사 성명'), { target: { value: '이변호' } })
 
     expect(screen.getByRole('button', { name: '정보 저장' })).toBeDisabled()
   })

08e8209

91cdf52

frontend/src/components/OrgDetail.tsx

--- frontend/src/components/OrgDetail.tsx

+++ frontend/src/components/OrgDetail.tsx


 import ConfirmDialog from './ConfirmDialog'
 import StatusBadge from './StatusBadge'
 
-const APPLICANT_FIELDS: { key: keyof Contact; label: string }[] = [
-  { key: 'deptName', label: '부서명' },
-  { key: 'managerName', label: '담당자명' },
-  { key: 'managerTitle', label: '직급/직함' },
-  { key: 'managerPhone', label: '연락처' },
-  { key: 'managerEmail', label: '이메일' },
-]
+// 엑셀처럼 한 사람이 한 행이다. 셀이 null이면 그 역할에 해당 항목이 없다는 뜻(- 표시).
+// aria-label은 "행 제목 + 항목"으로 유일하게 만들어 라벨 중복 없이 접근 가능하게 한다.
+const CONTACT_COLUMNS = ['부서명', '담당자명', '직급/직함', '연락처', '이메일', '배정일']
 
-const MJ_FIELDS: { key: keyof Contact; label: string; type?: string }[] = [
-  { key: 'mjDeptName', label: '부서명' },
-  { key: 'mjManagerName', label: '담당자명' },
-  { key: 'mjManagerPhone', label: '연락처' },
-  { key: 'mjManagerEmail', label: '이메일' },
-]
+interface ContactCell {
+  key: keyof Contact
+  label: string
+  type?: string
+}
 
-const LAWYER_FIELDS: { key: keyof Contact; label: string; type?: string }[] = [
-  { key: 'lawyerName', label: '성명' },
-  { key: 'lawyerPhone', label: '연락처' },
-  { key: 'lawyerEmail', label: '이메일' },
-  { key: 'lawyerAssignedDate', label: '배정일', type: 'date' },
+const CONTACT_ROWS: { title: string; cells: (ContactCell | null)[] }[] = [
+  {
+    title: '신청기관 담당자',
+    cells: [
+      { key: 'deptName', label: '신청기관 담당자 부서명' },
+      { key: 'managerName', label: '신청기관 담당자 담당자명' },
+      { key: 'managerTitle', label: '신청기관 담당자 직급/직함' },
+      { key: 'managerPhone', label: '신청기관 담당자 연락처' },
+      { key: 'managerEmail', label: '신청기관 담당자 이메일' },
+      null,
+    ],
+  },
+  {
+    title: '문정원 담당자',
+    cells: [
+      { key: 'mjDeptName', label: '문정원 담당자 부서명' },
+      { key: 'mjManagerName', label: '문정원 담당자 담당자명' },
+      null,
+      { key: 'mjManagerPhone', label: '문정원 담당자 연락처' },
+      { key: 'mjManagerEmail', label: '문정원 담당자 이메일' },
+      null,
+    ],
+  },
+  {
+    title: '담당 변호사',
+    cells: [
+      null,
+      { key: 'lawyerName', label: '담당 변호사 성명' },
+      null,
+      { key: 'lawyerPhone', label: '담당 변호사 연락처' },
+      { key: 'lawyerEmail', label: '담당 변호사 이메일' },
+      { key: 'lawyerAssignedDate', label: '담당 변호사 배정일', type: 'date' },
+    ],
+  },
 ]
 
 function emptyContact(org: Org): Contact {

   'managerEmail',
 ]
 
-function ContactFieldGroup({
-  title,
-  fields,
+function ContactEditTable({
   contact,
   onChange,
 }: {
-  title: string
-  fields: { key: keyof Contact; label: string; type?: string }[]
   contact: Contact
   onChange: (key: keyof Contact, value: string) => void
 }) {
   return (
-    <div className="rounded-lg border border-gray-200 p-4">
-      <h3 className="text-sm font-medium text-gray-700">{title}</h3>
-      <div className="mt-3 space-y-3">
-        {fields.map((field) => (
-          <div key={field.key} className="flex items-center gap-3">
-            <label htmlFor={field.key} className="w-20 shrink-0 text-sm text-gray-500">
-              {field.label}
-            </label>
-            <input
-              id={field.key}
-              type={field.type ?? 'text'}
-              className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm"
-              value={contact[field.key]}
-              onChange={(e) => onChange(field.key, e.target.value)}
-            />
-          </div>
-        ))}
-      </div>
+    <div className="overflow-x-auto rounded-lg border border-gray-200 bg-white">
+      <table className="w-full min-w-[860px] text-sm">
+        <thead>
+          <tr className="border-b border-gray-200 bg-gray-50 text-left text-xs text-gray-500">
+            <th className="whitespace-nowrap px-3 py-2 font-medium">구분</th>
+            {CONTACT_COLUMNS.map((col) => (
+              <th key={col} className="whitespace-nowrap px-3 py-2 font-medium">
+                {col}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {CONTACT_ROWS.map((row) => (
+            <tr key={row.title} className="border-b border-gray-100 last:border-b-0">
+              <th
+                scope="row"
+                className="whitespace-nowrap px-3 py-2 text-left text-sm font-medium text-gray-700"
+              >
+                {row.title}
+              </th>
+              {row.cells.map((cell, i) => (
+                <td key={cell?.key ?? `empty-${i}`} className="px-2 py-1.5">
+                  {cell ? (
+                    <input
+                      aria-label={cell.label}
+                      type={cell.type ?? 'text'}
+                      className="w-full min-w-[7rem] rounded-md border border-gray-300 px-2.5 py-1.5 text-sm"
+                      value={contact[cell.key]}
+                      onChange={(e) => onChange(cell.key, e.target.value)}
+                    />
+                  ) : (
+                    <span className="block text-center text-gray-300">-</span>
+                  )}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
     </div>
   )
 }

         <StatusBadge status={org.status} />
       </div>
 
-      <section className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
-        <ContactFieldGroup
-          title="신청기관 담당자"
-          fields={APPLICANT_FIELDS}
-          contact={contact}
-          onChange={setField}
-        />
-        <ContactFieldGroup
-          title="문정원 담당자"
-          fields={MJ_FIELDS}
-          contact={contact}
-          onChange={setField}
-        />
-        <ContactFieldGroup
-          title="담당 변호사"
-          fields={LAWYER_FIELDS}
-          contact={contact}
-          onChange={setField}
-        />
+      <section className="mt-6">
+        <ContactEditTable contact={contact} onChange={setField} />
+        <p className="mt-2 text-xs text-gray-400">
+          신청기관 담당자의 부서명·담당자명·연락처·이메일은 채널 생성을 위해 필수입니다.
+        </p>
       </section>
 
       <div className="mt-5 flex gap-2">

08e8209

91cdf52

frontend/src/components/OrgOverview.test.tsx

--- frontend/src/components/OrgOverview.test.tsx

+++ frontend/src/components/OrgOverview.test.tsx


     await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
   })
 
-  it('문정원 담당자와 담당 변호사 정보가 비어 있으면 표에 -로 표시된다', async () => {
+  it('문정원 담당자와 담당 변호사 정보가 비어 있으면 카드에 -로 표시된다', async () => {
     render(<OrgOverview org={org()} />)
 
-    const rows = screen.getAllByRole('row')
-    const mjRow = rows.find((row) => row.textContent?.includes('문정원 담당자'))
-    const lawyerRow = rows.find((row) => row.textContent?.includes('담당 변호사'))
+    const mjCard = screen.getByText('문정원 담당자').closest('section') as HTMLElement
+    const lawyerCard = screen.getByText('담당 변호사').closest('section') as HTMLElement
 
-    expect(mjRow).toBeTruthy()
-    expect(lawyerRow).toBeTruthy()
-    expect(within(mjRow as HTMLElement).getAllByText('-')).toHaveLength(5)
-    expect(within(lawyerRow as HTMLElement).getAllByText('-')).toHaveLength(5)
+    expect(within(mjCard).getAllByText('-')).toHaveLength(4)
+    expect(within(lawyerCard).getAllByText('-')).toHaveLength(4)
     await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
   })
 
-  it('담당자 3종이 값을 가지고 있으면 표의 각 행에 값이 표시된다', async () => {
+  it('담당자 3종이 값을 가지고 있으면 각 카드에 값이 표시된다', async () => {
     render(
       <OrgOverview
         org={org({

       />,
     )
 
-    const rows = screen.getAllByRole('row')
-    const applicantRow = rows.find((row) => row.textContent?.includes('신청기관 담당자'))
-    const mjRow = rows.find((row) => row.textContent?.includes('문정원 담당자'))
-    const lawyerRow = rows.find((row) => row.textContent?.includes('담당 변호사'))
+    const applicantCard = screen.getByText('신청기관 담당자').closest('section') as HTMLElement
+    const mjCard = screen.getByText('문정원 담당자').closest('section') as HTMLElement
+    const lawyerCard = screen.getByText('담당 변호사').closest('section') as HTMLElement
 
-    expect(within(applicantRow as HTMLElement).getByText('데이터정보화팀')).toBeTruthy()
-    expect(within(applicantRow as HTMLElement).getByText('송민지 과장')).toBeTruthy()
+    expect(within(applicantCard).getByText('데이터정보화팀')).toBeTruthy()
+    expect(within(applicantCard).getByText('송민지 과장')).toBeTruthy()
 
-    expect(within(mjRow as HTMLElement).getByText('문화체육관광부 저작권정책과')).toBeTruthy()
-    expect(within(mjRow as HTMLElement).getByText('김문정')).toBeTruthy()
-    expect(within(mjRow as HTMLElement).getByText('02-1234-5678')).toBeTruthy()
-    expect(within(mjRow as HTMLElement).getByText('mj@mcst.go.kr')).toBeTruthy()
+    expect(within(mjCard).getByText('문화체육관광부 저작권정책과')).toBeTruthy()
+    expect(within(mjCard).getByText('김문정')).toBeTruthy()
+    expect(within(mjCard).getByText('02-1234-5678')).toBeTruthy()
+    expect(within(mjCard).getByText('mj@mcst.go.kr')).toBeTruthy()
 
-    expect(within(lawyerRow as HTMLElement).getByText('이변호')).toBeTruthy()
-    expect(within(lawyerRow as HTMLElement).getByText('02-9876-5432')).toBeTruthy()
-    expect(within(lawyerRow as HTMLElement).getByText('lawyer@lawfirm.kr')).toBeTruthy()
-    expect(within(lawyerRow as HTMLElement).getByText('2026-07-21')).toBeTruthy()
+    expect(within(lawyerCard).getByText('이변호')).toBeTruthy()
+    expect(within(lawyerCard).getByText('02-9876-5432')).toBeTruthy()
+    expect(within(lawyerCard).getByText('lawyer@lawfirm.kr')).toBeTruthy()
+    expect(within(lawyerCard).getByText('2026-07-21')).toBeTruthy()
 
     await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
   })

08e8209

91cdf52

frontend/src/components/OrgOverview.tsx

--- frontend/src/components/OrgOverview.tsx

+++ frontend/src/components/OrgOverview.tsx


   return MATTERMOST_BASE + name
 }
 
-function Cell({ value }: { value: string | null }) {
-  return <span className={value ? 'text-gray-900' : 'text-gray-300'}>{value ?? '-'}</span>
+function Field({ label, value }: { label: string; value: string | null }) {
+  return (
+    <div className="flex gap-3 text-sm">
+      <span className="w-14 shrink-0 text-gray-400">{label}</span>
+      <span className={value ? 'font-medium text-gray-900' : 'text-gray-300'}>
+        {value ?? '-'}
+      </span>
+    </div>
+  )
 }
 
-interface ContactRow {
-  role: string
-  dept: string | null
-  manager: string | null
-  phone: string | null
-  email: string | null
-  assignedDate: string | null
-}
-
-function contactRows(org: Org): ContactRow[] {
-  return [
-    {
-      role: '신청기관 담당자',
-      dept: org.deptName,
-      manager: org.managerName
-        ? org.managerTitle
-          ? `${org.managerName} ${org.managerTitle}`
-          : org.managerName
-        : null,
-      phone: org.managerPhone,
-      email: org.managerEmail,
-      assignedDate: null,
-    },
-    {
-      role: '문정원 담당자',
-      dept: org.mjDeptName,
-      manager: org.mjManagerName,
-      phone: org.mjManagerPhone,
-      email: org.mjManagerEmail,
-      assignedDate: null,
-    },
-    {
-      role: '담당 변호사',
-      dept: null,
-      manager: org.lawyerName,
-      phone: org.lawyerPhone,
-      email: org.lawyerEmail,
-      assignedDate: org.lawyerAssignedDate,
-    },
-  ]
+function ContactCard({
+  title,
+  fields,
+}: {
+  title: string
+  fields: { label: string; value: string | null }[]
+}) {
+  return (
+    <section className="rounded-lg border border-gray-200 p-4">
+      <h2 className="text-sm font-semibold">{title}</h2>
+      <div className="mt-3 space-y-1.5">
+        {fields.map((f) => (
+          <Field key={f.label} label={f.label} value={f.value} />
+        ))}
+      </div>
+    </section>
+  )
 }
 
 export default function OrgOverview({ org }: { org: Org }) {

           </div>
         </div>
 
-        {/* 담당자 3종 (신청기관/문정원/변호사) */}
-        <section className="mt-5 overflow-x-auto rounded-lg border border-gray-200">
-          <table className="w-full text-left text-sm">
-            <thead>
-              <tr className="border-b border-gray-200 text-xs text-gray-400">
-                <th className="px-4 py-2 font-medium">구분</th>
-                <th className="px-4 py-2 font-medium">부서</th>
-                <th className="px-4 py-2 font-medium">담당자</th>
-                <th className="px-4 py-2 font-medium">연락처</th>
-                <th className="px-4 py-2 font-medium">이메일</th>
-                <th className="px-4 py-2 font-medium">배정일</th>
-              </tr>
-            </thead>
-            <tbody>
-              {contactRows(org).map((row) => (
-                <tr key={row.role} className="border-b border-gray-100 last:border-b-0">
-                  <td className="px-4 py-2 font-medium text-gray-700">{row.role}</td>
-                  <td className="px-4 py-2">
-                    <Cell value={row.dept} />
-                  </td>
-                  <td className="px-4 py-2">
-                    <Cell value={row.manager} />
-                  </td>
-                  <td className="px-4 py-2">
-                    <Cell value={row.phone} />
-                  </td>
-                  <td className="px-4 py-2">
-                    <Cell value={row.email} />
-                  </td>
-                  <td className="px-4 py-2">
-                    <Cell value={row.assignedDate} />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </section>
+        {/* 담당자 카드 3개 (신청기관/문정원/변호사) */}
+        <div className="mt-5 grid grid-cols-1 gap-3 lg:grid-cols-3">
+          <ContactCard
+            title="신청기관 담당자"
+            fields={[
+              { label: '부서', value: org.deptName },
+              {
+                label: '담당자',
+                value: org.managerName
+                  ? org.managerTitle
+                    ? `${org.managerName} ${org.managerTitle}`
+                    : org.managerName
+                  : null,
+              },
+              { label: '연락처', value: org.managerPhone },
+              { label: '이메일', value: org.managerEmail },
+            ]}
+          />
+          <ContactCard
+            title="문정원 담당자"
+            fields={[
+              { label: '부서', value: org.mjDeptName },
+              { label: '담당자', value: org.mjManagerName },
+              { label: '연락처', value: org.mjManagerPhone },
+              { label: '이메일', value: org.mjManagerEmail },
+            ]}
+          />
+          <ContactCard
+            title="담당 변호사"
+            fields={[
+              { label: '성명', value: org.lawyerName },
+              { label: '연락처', value: org.lawyerPhone },
+              { label: '이메일', value: org.lawyerEmail },
+              { label: '배정일', value: org.lawyerAssignedDate },
+            ]}
+          />
+        </div>
 
         {/* 업무단계 현황 */}
         <section className="mt-5">

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,4 +1,4 @@
1		-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
	1	+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
2	2	import { beforeEach, describe, expect, it, vi } from 'vitest'
3	3	import OrgDetail from './OrgDetail'
4	4	import type { Org } from '../api/client'
...	...	@@ -39,14 +39,6 @@
39	39	}
40	40	}
41	41
42		-/** 세 담당자 그룹은 부서명/연락처/이메일 같은 라벨을 공유하므로, 그룹 제목으로 찾은
43		- * 컨테이너 안에서만 찾도록 스코프를 좁힌다 - 그렇지 않으면 getByLabelText가
44		- * "여러 개 일치"로 실패한다. */
45		-function group(title: string) {
46		- const heading = screen.getByText(title)
47		- return within(heading.closest('div') as HTMLElement)
48		-}
49		-
50	42	beforeEach(() => {
51	43	mocks.updateContact.mockReset()
52	44	mocks.provisionChannels.mockReset()
...	...	@@ -70,13 +62,11 @@
70	62	const onChanged = vi.fn()
71	63
72	64	render(<OrgDetail org={org()} onChanged={onChanged} />)
73		-
74		- const applicant = group('신청기관 담당자')
75		- fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
76		- fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
77		- fireEvent.change(applicant.getByLabelText('직급/직함'), { target: { value: '과장' } })
78		- fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
79		- fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
	65	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 부서명'), { target: { value: '데이터정보화팀' } })
	66	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 담당자명'), { target: { value: '송민지' } })
	67	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 직급/직함'), { target: { value: '과장' } })
	68	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 연락처'), { target: { value: '02-3475-5434' } })
	69	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 이메일'), { target: { value: 'ming@arirang.com' } })
80	70	fireEvent.click(screen.getByRole('button', { name: '정보 저장' }))
81	71
82	72	await waitFor(() => {
...	...	@@ -104,24 +94,18 @@
104	94	const onChanged = vi.fn()
105	95
106	96	render(<OrgDetail org={org()} onChanged={onChanged} />)
107		-
108		- const applicant = group('신청기관 담당자')
109		- fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
110		- fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
111		- fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
112		- fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
113		-
114		- const mj = group('문정원 담당자')
115		- fireEvent.change(mj.getByLabelText('부서명'), { target: { value: '문화체육관광부 저작권정책과' } })
116		- fireEvent.change(mj.getByLabelText('담당자명'), { target: { value: '김문정' } })
117		- fireEvent.change(mj.getByLabelText('연락처'), { target: { value: '02-1234-5678' } })
118		- fireEvent.change(mj.getByLabelText('이메일'), { target: { value: 'mj@mcst.go.kr' } })
119		-
120		- const lawyer = group('담당 변호사')
121		- fireEvent.change(lawyer.getByLabelText('성명'), { target: { value: '이변호' } })
122		- fireEvent.change(lawyer.getByLabelText('연락처'), { target: { value: '02-9876-5432' } })
123		- fireEvent.change(lawyer.getByLabelText('이메일'), { target: { value: 'lawyer@lawfirm.kr' } })
124		- fireEvent.change(lawyer.getByLabelText('배정일'), { target: { value: '2026-07-21' } })
	97	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 부서명'), { target: { value: '데이터정보화팀' } })
	98	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 담당자명'), { target: { value: '송민지' } })
	99	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 연락처'), { target: { value: '02-3475-5434' } })
	100	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 이메일'), { target: { value: 'ming@arirang.com' } })
	101	+ fireEvent.change(screen.getByLabelText('문정원 담당자 부서명'), { target: { value: '문화체육관광부 저작권정책과' } })
	102	+ fireEvent.change(screen.getByLabelText('문정원 담당자 담당자명'), { target: { value: '김문정' } })
	103	+ fireEvent.change(screen.getByLabelText('문정원 담당자 연락처'), { target: { value: '02-1234-5678' } })
	104	+ fireEvent.change(screen.getByLabelText('문정원 담당자 이메일'), { target: { value: 'mj@mcst.go.kr' } })
	105	+ fireEvent.change(screen.getByLabelText('담당 변호사 성명'), { target: { value: '이변호' } })
	106	+ fireEvent.change(screen.getByLabelText('담당 변호사 연락처'), { target: { value: '02-9876-5432' } })
	107	+ fireEvent.change(screen.getByLabelText('담당 변호사 이메일'), { target: { value: 'lawyer@lawfirm.kr' } })
	108	+ fireEvent.change(screen.getByLabelText('담당 변호사 배정일'), { target: { value: '2026-07-21' } })
125	109
126	110	fireEvent.click(screen.getByRole('button', { name: '정보 저장' }))
127	111
...	...	@@ -253,24 +237,18 @@
253	237
254	238	it('직급/직함이 비어있어도 나머지 필수 항목만 채우면 정보 저장 버튼이 활성화된다', () => {
255	239	render(<OrgDetail org={org()} onChanged={() => {}} />)
256		-
257		- const applicant = group('신청기관 담당자')
258		- fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
259		- fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
260		- fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
261		- fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
	240	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 부서명'), { target: { value: '데이터정보화팀' } })
	241	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 담당자명'), { target: { value: '송민지' } })
	242	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 연락처'), { target: { value: '02-3475-5434' } })
	243	+ fireEvent.change(screen.getByLabelText('신청기관 담당자 이메일'), { target: { value: 'ming@arirang.com' } })
262	244
263	245	expect(screen.getByRole('button', { name: '정보 저장' })).toBeEnabled()
264	246	})
265	247
266	248	it('문정원 담당자와 담당 변호사 항목을 채워도 신청기관 필수 항목이 비어있으면 저장 버튼은 비활성이다', () => {
267	249	render(<OrgDetail org={org()} onChanged={() => {}} />)
268		-
269		- const mj = group('문정원 담당자')
270		- fireEvent.change(mj.getByLabelText('담당자명'), { target: { value: '김문정' } })
271		-
272		- const lawyer = group('담당 변호사')
273		- fireEvent.change(lawyer.getByLabelText('성명'), { target: { value: '이변호' } })
	250	+ fireEvent.change(screen.getByLabelText('문정원 담당자 담당자명'), { target: { value: '김문정' } })
	251	+ fireEvent.change(screen.getByLabelText('담당 변호사 성명'), { target: { value: '이변호' } })
274	252
275	253	expect(screen.getByRole('button', { name: '정보 저장' })).toBeDisabled()
276	254	})

...	...	@@ -9,26 +9,50 @@
9	9	import ConfirmDialog from './ConfirmDialog'
10	10	import StatusBadge from './StatusBadge'
11	11
12		-const APPLICANT_FIELDS: { key: keyof Contact; label: string }[] = [
13		- { key: 'deptName', label: '부서명' },
14		- { key: 'managerName', label: '담당자명' },
15		- { key: 'managerTitle', label: '직급/직함' },
16		- { key: 'managerPhone', label: '연락처' },
17		- { key: 'managerEmail', label: '이메일' },
18		-]
	12	+// 엑셀처럼 한 사람이 한 행이다. 셀이 null이면 그 역할에 해당 항목이 없다는 뜻(- 표시).
	13	+// aria-label은 "행 제목 + 항목"으로 유일하게 만들어 라벨 중복 없이 접근 가능하게 한다.
	14	+const CONTACT_COLUMNS = ['부서명', '담당자명', '직급/직함', '연락처', '이메일', '배정일']
19	15
20		-const MJ_FIELDS: { key: keyof Contact; label: string; type?: string }[] = [
21		- { key: 'mjDeptName', label: '부서명' },
22		- { key: 'mjManagerName', label: '담당자명' },
23		- { key: 'mjManagerPhone', label: '연락처' },
24		- { key: 'mjManagerEmail', label: '이메일' },
25		-]
	16	+interface ContactCell {
	17	+ key: keyof Contact
	18	+ label: string
	19	+ type?: string
	20	+}
26	21
27		-const LAWYER_FIELDS: { key: keyof Contact; label: string; type?: string }[] = [
28		- { key: 'lawyerName', label: '성명' },
29		- { key: 'lawyerPhone', label: '연락처' },
30		- { key: 'lawyerEmail', label: '이메일' },
31		- { key: 'lawyerAssignedDate', label: '배정일', type: 'date' },
	22	+const CONTACT_ROWS: { title: string; cells: (ContactCell \| null)[] }[] = [
	23	+ {
	24	+ title: '신청기관 담당자',
	25	+ cells: [
	26	+ { key: 'deptName', label: '신청기관 담당자 부서명' },
	27	+ { key: 'managerName', label: '신청기관 담당자 담당자명' },
	28	+ { key: 'managerTitle', label: '신청기관 담당자 직급/직함' },
	29	+ { key: 'managerPhone', label: '신청기관 담당자 연락처' },
	30	+ { key: 'managerEmail', label: '신청기관 담당자 이메일' },
	31	+ null,
	32	+ ],
	33	+ },
	34	+ {
	35	+ title: '문정원 담당자',
	36	+ cells: [
	37	+ { key: 'mjDeptName', label: '문정원 담당자 부서명' },
	38	+ { key: 'mjManagerName', label: '문정원 담당자 담당자명' },
	39	+ null,
	40	+ { key: 'mjManagerPhone', label: '문정원 담당자 연락처' },
	41	+ { key: 'mjManagerEmail', label: '문정원 담당자 이메일' },
	42	+ null,
	43	+ ],
	44	+ },
	45	+ {
	46	+ title: '담당 변호사',
	47	+ cells: [
	48	+ null,
	49	+ { key: 'lawyerName', label: '담당 변호사 성명' },
	50	+ null,
	51	+ { key: 'lawyerPhone', label: '담당 변호사 연락처' },
	52	+ { key: 'lawyerEmail', label: '담당 변호사 이메일' },
	53	+ { key: 'lawyerAssignedDate', label: '담당 변호사 배정일', type: 'date' },
	54	+ ],
	55	+ },
32	56	]
33	57
34	58	function emptyContact(org: Org): Contact {
...	...	@@ -56,36 +80,54 @@
56	80	'managerEmail',
57	81	]
58	82
59		-function ContactFieldGroup({
60		- title,
61		- fields,
	83	+function ContactEditTable({
62	84	contact,
63	85	onChange,
64	86	}: {
65		- title: string
66		- fields: { key: keyof Contact; label: string; type?: string }[]
67	87	contact: Contact
68	88	onChange: (key: keyof Contact, value: string) => void
69	89	}) {
70	90	return (
71		- <div className="rounded-lg border border-gray-200 p-4">
72		- <h3 className="text-sm font-medium text-gray-700">{title}</h3>
73		- <div className="mt-3 space-y-3">
74		- {fields.map((field) => (
75		- <div key={field.key} className="flex items-center gap-3">
76		- <label htmlFor={field.key} className="w-20 shrink-0 text-sm text-gray-500">
77		- {field.label}
78		- </label>
79		- <input
80		- id={field.key}
81		- type={field.type ?? 'text'}
82		- className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm"
83		- value={contact[field.key]}
84		- onChange={(e) => onChange(field.key, e.target.value)}
85		- />
86		- </div>
87		- ))}
88		- </div>
	91	+ <div className="overflow-x-auto rounded-lg border border-gray-200 bg-white">
	92	+ <table className="w-full min-w-[860px] text-sm">
	93	+ <thead>
	94	+ <tr className="border-b border-gray-200 bg-gray-50 text-left text-xs text-gray-500">
	95	+ <th className="whitespace-nowrap px-3 py-2 font-medium">구분</th>
	96	+ {CONTACT_COLUMNS.map((col) => (
	97	+ <th key={col} className="whitespace-nowrap px-3 py-2 font-medium">
	98	+ {col}
	99	+ </th>
	100	+ ))}
	101	+ </tr>
	102	+ </thead>
	103	+ <tbody>
	104	+ {CONTACT_ROWS.map((row) => (
	105	+ <tr key={row.title} className="border-b border-gray-100 last:border-b-0">
	106	+ <th
	107	+ scope="row"
	108	+ className="whitespace-nowrap px-3 py-2 text-left text-sm font-medium text-gray-700"
	109	+ >
	110	+ {row.title}
	111	+ </th>
	112	+ {row.cells.map((cell, i) => (
	113	+ <td key={cell?.key ?? `empty-${i}`} className="px-2 py-1.5">
	114	+ {cell ? (
	115	+ <input
	116	+ aria-label={cell.label}
	117	+ type={cell.type ?? 'text'}
	118	+ className="w-full min-w-[7rem] rounded-md border border-gray-300 px-2.5 py-1.5 text-sm"
	119	+ value={contact[cell.key]}
	120	+ onChange={(e) => onChange(cell.key, e.target.value)}
	121	+ />
	122	+ ) : (
	123	+ <span className="block text-center text-gray-300">-</span>
	124	+ )}
	125	+ </td>
	126	+ ))}
	127	+ </tr>
	128	+ ))}
	129	+ </tbody>
	130	+ </table>
89	131	</div>
90	132	)
91	133	}
...	...	@@ -154,25 +196,11 @@
154	196	<StatusBadge status={org.status} />
155	197	</div>
156	198
157		- <section className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
158		- <ContactFieldGroup
159		- title="신청기관 담당자"
160		- fields={APPLICANT_FIELDS}
161		- contact={contact}
162		- onChange={setField}
163		- />
164		- <ContactFieldGroup
165		- title="문정원 담당자"
166		- fields={MJ_FIELDS}
167		- contact={contact}
168		- onChange={setField}
169		- />
170		- <ContactFieldGroup
171		- title="담당 변호사"
172		- fields={LAWYER_FIELDS}
173		- contact={contact}
174		- onChange={setField}
175		- />
	199	+ <section className="mt-6">
	200	+ <ContactEditTable contact={contact} onChange={setField} />
	201	+ <p className="mt-2 text-xs text-gray-400">
	202	+ 신청기관 담당자의 부서명·담당자명·연락처·이메일은 채널 생성을 위해 필수입니다.
	203	+ </p>
176	204	</section>
177	205
178	206	<div className="mt-5 flex gap-2">

...	...	@@ -59,21 +59,18 @@
59	59	await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
60	60	})
61	61
62		- it('문정원 담당자와 담당 변호사 정보가 비어 있으면 표에 -로 표시된다', async () => {
	62	+ it('문정원 담당자와 담당 변호사 정보가 비어 있으면 카드에 -로 표시된다', async () => {
63	63	render(<OrgOverview org={org()} />)
64	64
65		- const rows = screen.getAllByRole('row')
66		- const mjRow = rows.find((row) => row.textContent?.includes('문정원 담당자'))
67		- const lawyerRow = rows.find((row) => row.textContent?.includes('담당 변호사'))
	65	+ const mjCard = screen.getByText('문정원 담당자').closest('section') as HTMLElement
	66	+ const lawyerCard = screen.getByText('담당 변호사').closest('section') as HTMLElement
68	67
69		- expect(mjRow).toBeTruthy()
70		- expect(lawyerRow).toBeTruthy()
71		- expect(within(mjRow as HTMLElement).getAllByText('-')).toHaveLength(5)
72		- expect(within(lawyerRow as HTMLElement).getAllByText('-')).toHaveLength(5)
	68	+ expect(within(mjCard).getAllByText('-')).toHaveLength(4)
	69	+ expect(within(lawyerCard).getAllByText('-')).toHaveLength(4)
73	70	await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
74	71	})
75	72
76		- it('담당자 3종이 값을 가지고 있으면 표의 각 행에 값이 표시된다', async () => {
	73	+ it('담당자 3종이 값을 가지고 있으면 각 카드에 값이 표시된다', async () => {
77	74	render(
78	75	<OrgOverview
79	76	org={org({
...	...	@@ -89,23 +86,22 @@
89	86	/>,
90	87	)
91	88
92		- const rows = screen.getAllByRole('row')
93		- const applicantRow = rows.find((row) => row.textContent?.includes('신청기관 담당자'))
94		- const mjRow = rows.find((row) => row.textContent?.includes('문정원 담당자'))
95		- const lawyerRow = rows.find((row) => row.textContent?.includes('담당 변호사'))
	89	+ const applicantCard = screen.getByText('신청기관 담당자').closest('section') as HTMLElement
	90	+ const mjCard = screen.getByText('문정원 담당자').closest('section') as HTMLElement
	91	+ const lawyerCard = screen.getByText('담당 변호사').closest('section') as HTMLElement
96	92
97		- expect(within(applicantRow as HTMLElement).getByText('데이터정보화팀')).toBeTruthy()
98		- expect(within(applicantRow as HTMLElement).getByText('송민지 과장')).toBeTruthy()
	93	+ expect(within(applicantCard).getByText('데이터정보화팀')).toBeTruthy()
	94	+ expect(within(applicantCard).getByText('송민지 과장')).toBeTruthy()
99	95
100		- expect(within(mjRow as HTMLElement).getByText('문화체육관광부 저작권정책과')).toBeTruthy()
101		- expect(within(mjRow as HTMLElement).getByText('김문정')).toBeTruthy()
102		- expect(within(mjRow as HTMLElement).getByText('02-1234-5678')).toBeTruthy()
103		- expect(within(mjRow as HTMLElement).getByText('mj@mcst.go.kr')).toBeTruthy()
	96	+ expect(within(mjCard).getByText('문화체육관광부 저작권정책과')).toBeTruthy()
	97	+ expect(within(mjCard).getByText('김문정')).toBeTruthy()
	98	+ expect(within(mjCard).getByText('02-1234-5678')).toBeTruthy()
	99	+ expect(within(mjCard).getByText('mj@mcst.go.kr')).toBeTruthy()
104	100
105		- expect(within(lawyerRow as HTMLElement).getByText('이변호')).toBeTruthy()
106		- expect(within(lawyerRow as HTMLElement).getByText('02-9876-5432')).toBeTruthy()
107		- expect(within(lawyerRow as HTMLElement).getByText('lawyer@lawfirm.kr')).toBeTruthy()
108		- expect(within(lawyerRow as HTMLElement).getByText('2026-07-21')).toBeTruthy()
	101	+ expect(within(lawyerCard).getByText('이변호')).toBeTruthy()
	102	+ expect(within(lawyerCard).getByText('02-9876-5432')).toBeTruthy()
	103	+ expect(within(lawyerCard).getByText('lawyer@lawfirm.kr')).toBeTruthy()
	104	+ expect(within(lawyerCard).getByText('2026-07-21')).toBeTruthy()
109	105
110	106	await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
111	107	})

...	...	@@ -41,50 +41,34 @@
41	41	return MATTERMOST_BASE + name
42	42	}
43	43
44		-function Cell({ value }: { value: string \| null }) {
45		- return <span className={value ? 'text-gray-900' : 'text-gray-300'}>{value ?? '-'}</span>
	44	+function Field({ label, value }: { label: string; value: string \| null }) {
	45	+ return (
	46	+ <div className="flex gap-3 text-sm">
	47	+ <span className="w-14 shrink-0 text-gray-400">{label}</span>
	48	+ <span className={value ? 'font-medium text-gray-900' : 'text-gray-300'}>
	49	+ {value ?? '-'}
	50	+ </span>
	51	+ </div>
	52	+ )
46	53	}
47	54
48		-interface ContactRow {
49		- role: string
50		- dept: string \| null
51		- manager: string \| null
52		- phone: string \| null
53		- email: string \| null
54		- assignedDate: string \| null
55		-}
56		-
57		-function contactRows(org: Org): ContactRow[] {
58		- return [
59		- {
60		- role: '신청기관 담당자',
61		- dept: org.deptName,
62		- manager: org.managerName
63		- ? org.managerTitle
64		- ? `${org.managerName} ${org.managerTitle}`
65		- : org.managerName
66		- : null,
67		- phone: org.managerPhone,
68		- email: org.managerEmail,
69		- assignedDate: null,
70		- },
71		- {
72		- role: '문정원 담당자',
73		- dept: org.mjDeptName,
74		- manager: org.mjManagerName,
75		- phone: org.mjManagerPhone,
76		- email: org.mjManagerEmail,
77		- assignedDate: null,
78		- },
79		- {
80		- role: '담당 변호사',
81		- dept: null,
82		- manager: org.lawyerName,
83		- phone: org.lawyerPhone,
84		- email: org.lawyerEmail,
85		- assignedDate: org.lawyerAssignedDate,
86		- },
87		- ]
	55	+function ContactCard({
	56	+ title,
	57	+ fields,
	58	+}: {
	59	+ title: string
	60	+ fields: { label: string; value: string \| null }[]
	61	+}) {
	62	+ return (
	63	+ <section className="rounded-lg border border-gray-200 p-4">
	64	+ <h2 className="text-sm font-semibold">{title}</h2>
	65	+ <div className="mt-3 space-y-1.5">
	66	+ {fields.map((f) => (
	67	+ <Field key={f.label} label={f.label} value={f.value} />
	68	+ ))}
	69	+ </div>
	70	+ </section>
	71	+ )
88	72	}
89	73
90	74	export default function OrgOverview({ org }: { org: Org }) {
...	...	@@ -136,43 +120,43 @@
136	120	</div>
137	121	</div>
138	122
139		- {/* 담당자 3종 (신청기관/문정원/변호사) */}
140		- <section className="mt-5 overflow-x-auto rounded-lg border border-gray-200">
141		- <table className="w-full text-left text-sm">
142		- <thead>
143		- <tr className="border-b border-gray-200 text-xs text-gray-400">
144		- <th className="px-4 py-2 font-medium">구분</th>
145		- <th className="px-4 py-2 font-medium">부서</th>
146		- <th className="px-4 py-2 font-medium">담당자</th>
147		- <th className="px-4 py-2 font-medium">연락처</th>
148		- <th className="px-4 py-2 font-medium">이메일</th>
149		- <th className="px-4 py-2 font-medium">배정일</th>
150		- </tr>
151		- </thead>
152		- <tbody>
153		- {contactRows(org).map((row) => (
154		- <tr key={row.role} className="border-b border-gray-100 last:border-b-0">
155		- <td className="px-4 py-2 font-medium text-gray-700">{row.role}</td>
156		- <td className="px-4 py-2">
157		- <Cell value={row.dept} />
158		- </td>
159		- <td className="px-4 py-2">
160		- <Cell value={row.manager} />
161		- </td>
162		- <td className="px-4 py-2">
163		- <Cell value={row.phone} />
164		- </td>
165		- <td className="px-4 py-2">
166		- <Cell value={row.email} />
167		- </td>
168		- <td className="px-4 py-2">
169		- <Cell value={row.assignedDate} />
170		- </td>
171		- </tr>
172		- ))}
173		- </tbody>
174		- </table>
175		- </section>
	123	+ {/* 담당자 카드 3개 (신청기관/문정원/변호사) */}
	124	+ <div className="mt-5 grid grid-cols-1 gap-3 lg:grid-cols-3">
	125	+ <ContactCard
	126	+ title="신청기관 담당자"
	127	+ fields={[
	128	+ { label: '부서', value: org.deptName },
	129	+ {
	130	+ label: '담당자',
	131	+ value: org.managerName
	132	+ ? org.managerTitle
	133	+ ? `${org.managerName} ${org.managerTitle}`
	134	+ : org.managerName
	135	+ : null,
	136	+ },
	137	+ { label: '연락처', value: org.managerPhone },
	138	+ { label: '이메일', value: org.managerEmail },
	139	+ ]}
	140	+ />
	141	+ <ContactCard
	142	+ title="문정원 담당자"
	143	+ fields={[
	144	+ { label: '부서', value: org.mjDeptName },
	145	+ { label: '담당자', value: org.mjManagerName },
	146	+ { label: '연락처', value: org.mjManagerPhone },
	147	+ { label: '이메일', value: org.mjManagerEmail },
	148	+ ]}
	149	+ />
	150	+ <ContactCard
	151	+ title="담당 변호사"
	152	+ fields={[
	153	+ { label: '성명', value: org.lawyerName },
	154	+ { label: '연락처', value: org.lawyerPhone },
	155	+ { label: '이메일', value: org.lawyerEmail },
	156	+ { label: '배정일', value: org.lawyerAssignedDate },
	157	+ ]}
	158	+ />
	159	+ </div>
176	160
177	161	{/* 업무단계 현황 */}
178	162	<section className="mt-5">

Delete comment