Commit @97f048983987e201fbf21affc08c07bf1e519ceb

ITN Dev 07-23

feat: 담당자관리 화면을 신설하고 채널관리는 배정 전용으로 전환

담당자 정보를 직접 입력하던 채널관리 화면을 배정 전용(선택/해제)으로 바꾸고,
담당자 등록·수정은 새 담당자관리 화면에서만 하도록 입력 경로를 하나로 모았다.

- 담당자관리(신규): 구분 필터 + 목록 표 + 추가/수정 공용 모달 + 삭제 확인
- ContactPickerModal(신규): 채널관리에서 역할별로 등록된 담당자를 검색해 배정
- OrgDetail: 담당자 입력 표 제거 → 배정 행 3개(미지정/선택/해제) + 변호사 배정일
- client.ts: Org가 flat 필드 대신 applicant/mj/lawyer 중첩 Contact를 갖도록 변경,
  updateAssignments/getContacts/createContact/updateContactInfo/deleteContact 추가
- OrgOverview·WorkMemos·OrgList 등 org 픽스처와 조회 로직을 새 중첩 구조에 맞춤

@97f048983987e201fbf21affc08c07bf1e519ceb

053356d

97f0489

frontend/src/App.tsx

--- frontend/src/App.tsx

+++ frontend/src/App.tsx


 import { useCallback, useEffect, useState } from 'react'
 import { ApiError, getOrgs, logout, type Org } from './api/client'
+import ContactsPage from './components/ContactsPage'
 import LoginPage from './components/LoginPage'
 import OrgDetail from './components/OrgDetail'
 import OrgList from './components/OrgList'

 import Sidebar from './components/Sidebar'
 import { useCollapsiblePanel } from './hooks/useCollapsiblePanel'
 
-// 화면 2개: 기관관리(시안 레이아웃의 기관 상세)와 채널관리(명부 시드 + 담당자 입력 + 채널 생성).
-type Page = 'orgs' | 'channels'
+// 화면 3개: 기관관리(시안 레이아웃의 기관 상세), 채널관리(명부 시드 + 담당자 배정 + 채널 생성),
+// 담당자관리(담당자 3종 CRUD - 담당자 정보가 입력되는 유일한 화면).
+type Page = 'orgs' | 'channels' | 'contacts'
 
 const PAGE_TITLE: Record<Page, string> = {
   orgs: '기관관리',
   channels: '채널관리',
+  contacts: '담당자관리',
 }
 
 // 'checking'이 필요하다. true로 시작하면 첫 렌더에서 getOrgs()가 아직 안 끝났는데도

         collapsed={menuCollapsed}
         onToggle={toggleMenu}
         onSelect={(key) => {
-          if (key === 'orgs' || key === 'channels') {
+          if (key === 'orgs' || key === 'channels' || key === 'contacts') {
             setPage(key)
           }
         }}

         </header>
 
         <div className="flex min-h-0 flex-1">
-          <div
-            className={`flex shrink-0 flex-col border-r border-gray-200 transition-all duration-200 ${
-              listCollapsed ? 'w-14' : 'w-80'
-            }`}
-          >
-            <OrgList
-              orgs={orgs}
-              selectedId={selectedId}
-              onSelect={setSelectedId}
-              collapsed={listCollapsed}
-              onToggle={toggleList}
-            />
-            {page === 'channels' && !listCollapsed && (
-              <SeedUpload onUploaded={() => void reload()} />
-            )}
-          </div>
+          {page !== 'contacts' && (
+            <div
+              className={`flex shrink-0 flex-col border-r border-gray-200 transition-all duration-200 ${
+                listCollapsed ? 'w-14' : 'w-80'
+              }`}
+            >
+              <OrgList
+                orgs={orgs}
+                selectedId={selectedId}
+                onSelect={setSelectedId}
+                collapsed={listCollapsed}
+                onToggle={toggleList}
+              />
+              {page === 'channels' && !listCollapsed && (
+                <SeedUpload onUploaded={() => void reload()} />
+              )}
+            </div>
+          )}
 
           <main className="min-w-0 flex-1 overflow-y-auto bg-gray-50/50">
-            {selected ? (
+            {page === 'contacts' ? (
+              <ContactsPage />
+            ) : selected ? (
               page === 'channels' ? (
                 <OrgDetail org={selected} onChanged={() => void reload()} />
               ) : (

053356d

97f0489

frontend/src/api/client.test.ts

--- frontend/src/api/client.test.ts

+++ frontend/src/api/client.test.ts


 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { ApiError, getOrgs, logout, provisionChannels, updateContact } from './client'
+import { ApiError, getOrgs, logout, provisionChannels, updateAssignments } from './client'
 
 afterEach(() => {
   vi.unstubAllGlobals()

       text: async () => 'bad request',
     }))
 
-    const promise = updateContact(1, {
-      deptName: '', managerName: '', managerTitle: '', managerPhone: '', managerEmail: '',
-      mjDeptName: '', mjManagerName: '', mjManagerPhone: '', mjManagerEmail: '',
-      lawyerName: '', lawyerPhone: '', lawyerEmail: '', lawyerAssignedDate: '',
+    const promise = updateAssignments(1, {
+      applicantContactId: null,
+      mjContactId: null,
+      lawyerContactId: null,
+      lawyerAssignedDate: null,
     })
 
     await expect(promise).rejects.toThrow()
     await expect(promise).rejects.toBeInstanceOf(ApiError)
     await expect(promise).rejects.toMatchObject({ status: 400 })
   })
+
+  it('배정 변경은 CSRF 헤더를 붙여 PUT한다', async () => {
+    document.cookie = 'XSRF-TOKEN=token-value'
+    const fetchMock = vi.fn().mockResolvedValue({ ok: true, json: async () => ({}) })
+    vi.stubGlobal('fetch', fetchMock)
+
+    await updateAssignments(7, {
+      applicantContactId: 1,
+      mjContactId: null,
+      lawyerContactId: null,
+      lawyerAssignedDate: null,
+    })
+
+    const [url, init] = fetchMock.mock.calls[0]
+    expect(url).toBe('/api/orgs/7/assignments')
+    expect(init.method).toBe('PUT')
+    expect(init.headers['X-XSRF-TOKEN']).toBe('token-value')
+  })
 })

053356d

97f0489

frontend/src/api/client.ts

--- frontend/src/api/client.ts

+++ frontend/src/api/client.ts

...	...	@@ -1,41 +1,49 @@
1	1	export type OrgStatus = 'INFO_PENDING' \| 'READY' \| 'PARTIAL' \| 'ACTIVE'
2	2
	3	+export type ContactCategory = 'APPLICANT' \| 'MJ' \| 'LAWYER'
	4	+
	5	+/** 담당자관리에 등록된 담당자 1명. 신청기관 담당자는 affiliation에 소속 기관명이 들어간다. */
	6	+export interface Contact {
	7	+ id: number
	8	+ category: ContactCategory
	9	+ name: string
	10	+ affiliation: string \| null
	11	+ deptName: string \| null
	12	+ title: string \| null
	13	+ phone: string \| null
	14	+ email: string \| null
	15	+}
	16	+
	17	+/** 담당자 등록/수정 폼 입력. 폼 상태는 문자열로만 다루므로 빈 문자열이 "값 없음"을 뜻한다. */
	18	+export interface ContactInput {
	19	+ category: ContactCategory
	20	+ name: string
	21	+ affiliation: string
	22	+ deptName: string
	23	+ title: string
	24	+ phone: string
	25	+ email: string
	26	+}
	27	+
3	28	export interface Org {
4	29	id: number
5	30	orgNo: string
6	31	orgName: string
7	32	status: OrgStatus
8		- deptName: string \| null
9		- managerName: string \| null
10		- managerTitle: string \| null
11		- managerPhone: string \| null
12		- managerEmail: string \| null
13		- mjDeptName: string \| null
14		- mjManagerName: string \| null
15		- mjManagerPhone: string \| null
16		- mjManagerEmail: string \| null
17		- lawyerName: string \| null
18		- lawyerPhone: string \| null
19		- lawyerEmail: string \| null
	33	+ applicant: Contact \| null
	34	+ mj: Contact \| null
	35	+ lawyer: Contact \| null
20	36	lawyerAssignedDate: string \| null
21	37	channelIdMj: string \| null
22	38	channelIdLaw: string \| null
23	39	}
24	40
25		-export interface Contact {
26		- deptName: string
27		- managerName: string
28		- managerTitle: string
29		- managerPhone: string
30		- managerEmail: string
31		- mjDeptName: string
32		- mjManagerName: string
33		- mjManagerPhone: string
34		- mjManagerEmail: string
35		- lawyerName: string
36		- lawyerPhone: string
37		- lawyerEmail: string
38		- lawyerAssignedDate: string
	41	+/** 채널관리 화면이 신청기관/문정원/변호사 배정을 한 번에 바꿀 때 보내는 요청. null은 해제다. */
	42	+export interface AssignmentInput {
	43	+ applicantContactId: number \| null
	44	+ mjContactId: number \| null
	45	+ lawyerContactId: number \| null
	46	+ lawyerAssignedDate: string \| null
39	47	}
40	48
41	49	export type ProvisionOutcome = 'CACHED' \| 'RECOVERED' \| 'CREATED' \| 'FAILED'
...	...	@@ -129,14 +137,48 @@
129	137	return request<Org[]>('/api/orgs')
130	138	}
131	139
132		-export function updateContact(id: number, contact: Contact): Promise<Org> {
133		- return request<Org>(`/api/orgs/${id}/contact`, {
	140	+export function updateAssignments(orgId: number, body: AssignmentInput): Promise<Org> {
	141	+ return request<Org>(`/api/orgs/${orgId}/assignments`, {
134	142	method: 'PUT',
135	143	headers: { 'Content-Type': 'application/json' },
136		- body: JSON.stringify(contact),
	144	+ body: JSON.stringify(body),
137	145	})
138	146	}
139	147
	148	+export function getContacts(category?: ContactCategory): Promise<Contact[]> {
	149	+ const query = category ? `?category=${category}` : ''
	150	+ return request<Contact[]>(`/api/contacts${query}`)
	151	+}
	152	+
	153	+export function createContact(body: ContactInput): Promise<Contact> {
	154	+ return request<Contact>('/api/contacts', {
	155	+ method: 'POST',
	156	+ headers: { 'Content-Type': 'application/json' },
	157	+ body: JSON.stringify(body),
	158	+ })
	159	+}
	160	+
	161	+export function updateContactInfo(id: number, body: ContactInput): Promise<Contact> {
	162	+ return request<Contact>(`/api/contacts/${id}`, {
	163	+ method: 'PUT',
	164	+ headers: { 'Content-Type': 'application/json' },
	165	+ body: JSON.stringify(body),
	166	+ })
	167	+}
	168	+
	169	+/** 204를 돌려주므로 request()의 json() 경로를 타지 않고 직접 부른다(deleteMemo()와 동일한 패턴). */
	170	+export async function deleteContact(id: number): Promise<void> {
	171	+ const response = await fetch(`/api/contacts/${id}`, {
	172	+ method: 'DELETE',
	173	+ credentials: 'same-origin',
	174	+ headers: { 'X-XSRF-TOKEN': csrfToken() },
	175	+ })
	176	+ if (!response.ok) {
	177	+ const body = await response.text()
	178	+ throw new ApiError(response.status, `요청 실패 (${response.status}): ${body}`)
	179	+ }
	180	+}
	181	+
140	182	export function provisionChannels(id: number): Promise<ProvisionResult> {
141	183	return request<ProvisionResult>(`/api/orgs/${id}/channels`, { method: 'POST' })
142	184	}

053356d

97f0489

frontend/src/components/ChannelFiles.test.tsx

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

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


     orgNo: '001',
     orgName: '국제방송교류재단',
     status: 'ACTIVE',
-    deptName: null,
-    managerName: null,
-    managerTitle: null,
-    managerPhone: null,
-    managerEmail: null,
-    mjDeptName: null,
-    mjManagerName: null,
-    mjManagerPhone: null,
-    mjManagerEmail: null,
-    lawyerName: null,
-    lawyerPhone: null,
-    lawyerEmail: null,
+    applicant: null,
+    mj: null,
+    lawyer: null,
     lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',

053356d

97f0489

frontend/src/components/ChannelPosts.test.tsx

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

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


     orgNo: '001',
     orgName: '국제방송교류재단',
     status: 'ACTIVE',
-    deptName: null,
-    managerName: null,
-    managerTitle: null,
-    managerPhone: null,
-    managerEmail: null,
-    mjDeptName: null,
-    mjManagerName: null,
-    mjManagerPhone: null,
-    mjManagerEmail: null,
-    lawyerName: null,
-    lawyerPhone: null,
-    lawyerEmail: null,
+    applicant: null,
+    mj: null,
+    lawyer: null,
     lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',

97f0489

frontend/src/components/ContactPickerModal.test.tsx (added)

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

...	...	@@ -0,0 +1,124 @@
	1	+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
	2	+import { beforeEach, describe, expect, it, vi } from 'vitest'
	3	+import ContactPickerModal from './ContactPickerModal'
	4	+import type { Contact } from '../api/client'
	5	+
	6	+const mocks = vi.hoisted(() => ({
	7	+ getContacts: vi.fn(),
	8	+}))
	9	+
	10	+vi.mock('../api/client', async (importOriginal) => ({
	11	+ ...(await importOriginal<typeof import('../api/client')>()),
	12	+ getContacts: mocks.getContacts,
	13	+}))
	14	+
	15	+function contact(overrides: Partial<Contact> = {}): Contact {
	16	+ return {
	17	+ id: 1,
	18	+ category: 'APPLICANT',
	19	+ name: '송민지',
	20	+ affiliation: '국제방송교류재단',
	21	+ deptName: '데이터정보화팀',
	22	+ title: '과장',
	23	+ phone: '02-3475-5434',
	24	+ email: 'ming@arirang.com',
	25	+ ...overrides,
	26	+ }
	27	+}
	28	+
	29	+beforeEach(() => {
	30	+ mocks.getContacts.mockReset()
	31	+})
	32	+
	33	+describe('ContactPickerModal', () => {
	34	+ it('카테고리로 담당자 목록을 불러와 행으로 보여준다', async () => {
	35	+ mocks.getContacts.mockResolvedValue([contact()])
	36	+
	37	+ render(
	38	+ <ContactPickerModal
	39	+ category="APPLICANT"
	40	+ title="신청기관 담당자 선택"
	41	+ onSelect={() => {}}
	42	+ onClose={() => {}}
	43	+ />,
	44	+ )
	45	+
	46	+ expect(mocks.getContacts).toHaveBeenCalledWith('APPLICANT')
	47	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	48	+ expect(screen.getByText(/국제방송교류재단/)).toBeTruthy()
	49	+ expect(screen.getByText(/데이터정보화팀/)).toBeTruthy()
	50	+ expect(screen.getByRole('button', { name: '선택' })).toBeTruthy()
	51	+ })
	52	+
	53	+ it('담당자가 없으면 안내 문구와 하단 메모를 보여준다', async () => {
	54	+ mocks.getContacts.mockResolvedValue([])
	55	+
	56	+ render(
	57	+ <ContactPickerModal category="MJ" title="문정원 담당자 선택" onSelect={() => {}} onClose={() => {}} />,
	58	+ )
	59	+
	60	+ await waitFor(() => {
	61	+ expect(screen.getByText('등록된 담당자가 없습니다.')).toBeTruthy()
	62	+ })
	63	+ expect(screen.getByText('담당자 등록·수정은 담당자관리 메뉴에서 합니다.')).toBeTruthy()
	64	+ })
	65	+
	66	+ it('검색어로 이름·소속을 걸러낸다', async () => {
	67	+ mocks.getContacts.mockResolvedValue([
	68	+ contact({ id: 1, name: '송민지', affiliation: '국제방송교류재단' }),
	69	+ contact({ id: 2, name: '권유나', affiliation: '세종학당재단' }),
	70	+ ])
	71	+
	72	+ render(
	73	+ <ContactPickerModal category="APPLICANT" title="신청기관 담당자 선택" onSelect={() => {}} onClose={() => {}} />,
	74	+ )
	75	+
	76	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	77	+
	78	+ fireEvent.change(screen.getByLabelText('담당자 검색'), { target: { value: '세종' } })
	79	+
	80	+ expect(screen.queryByText('송민지')).toBeNull()
	81	+ expect(screen.getByText('권유나')).toBeTruthy()
	82	+ })
	83	+
	84	+ it('선택 버튼을 누르면 onSelect가 그 담당자로 호출된다', async () => {
	85	+ const target = contact({ id: 42, name: '송민지' })
	86	+ mocks.getContacts.mockResolvedValue([target])
	87	+ const onSelect = vi.fn()
	88	+
	89	+ render(
	90	+ <ContactPickerModal category="APPLICANT" title="신청기관 담당자 선택" onSelect={onSelect} onClose={() => {}} />,
	91	+ )
	92	+
	93	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	94	+ fireEvent.click(screen.getByRole('button', { name: '선택' }))
	95	+
	96	+ expect(onSelect).toHaveBeenCalledWith(target)
	97	+ })
	98	+
	99	+ it('닫기 버튼을 누르면 onClose가 호출된다', async () => {
	100	+ mocks.getContacts.mockResolvedValue([])
	101	+ const onClose = vi.fn()
	102	+
	103	+ render(
	104	+ <ContactPickerModal category="APPLICANT" title="신청기관 담당자 선택" onSelect={() => {}} onClose={onClose} />,
	105	+ )
	106	+
	107	+ fireEvent.click(screen.getByRole('button', { name: '닫기' }))
	108	+
	109	+ expect(onClose).toHaveBeenCalled()
	110	+ })
	111	+
	112	+ it('Esc를 누르면 onClose가 호출된다', async () => {
	113	+ mocks.getContacts.mockResolvedValue([])
	114	+ const onClose = vi.fn()
	115	+
	116	+ render(
	117	+ <ContactPickerModal category="APPLICANT" title="신청기관 담당자 선택" onSelect={() => {}} onClose={onClose} />,
	118	+ )
	119	+
	120	+ fireEvent.keyDown(window, { key: 'Escape' })
	121	+
	122	+ expect(onClose).toHaveBeenCalled()
	123	+ })
	124	+})

97f0489

frontend/src/components/ContactPickerModal.tsx (added)

+++ frontend/src/components/ContactPickerModal.tsx

...	...	@@ -0,0 +1,129 @@
	1	+import { useEffect, useState } from 'react'
	2	+import { getContacts, type Contact, type ContactCategory } from '../api/client'
	3	+
	4	+const FOOTER_NOTE = '담당자 등록·수정은 담당자관리 메뉴에서 합니다.'
	5	+
	6	+/** 채널관리에서 담당자 3종(신청기관/문정원/변호사)을 배정할 때 여는 선택 모달.
	7	+ * 담당자 정보를 여기서 입력하지 않는다 - 등록/수정은 항상 담당자관리 화면에서만 한다. */
	8	+export default function ContactPickerModal({
	9	+ category,
	10	+ title,
	11	+ onSelect,
	12	+ onClose,
	13	+}: {
	14	+ category: ContactCategory
	15	+ title: string
	16	+ onSelect: (contact: Contact) => void
	17	+ onClose: () => void
	18	+}) {
	19	+ const [contacts, setContacts] = useState<Contact[]>([])
	20	+ const [loading, setLoading] = useState(true)
	21	+ const [keyword, setKeyword] = useState('')
	22	+ const [error, setError] = useState<string \| null>(null)
	23	+
	24	+ useEffect(() => {
	25	+ let cancelled = false
	26	+ setLoading(true)
	27	+ getContacts(category)
	28	+ .then((data) => {
	29	+ if (!cancelled) {
	30	+ setContacts(data)
	31	+ }
	32	+ })
	33	+ .catch((e) => {
	34	+ if (!cancelled) {
	35	+ setError(e instanceof Error ? e.message : '담당자 목록을 불러오지 못했습니다.')
	36	+ }
	37	+ })
	38	+ .finally(() => {
	39	+ if (!cancelled) {
	40	+ setLoading(false)
	41	+ }
	42	+ })
	43	+ return () => {
	44	+ cancelled = true
	45	+ }
	46	+ }, [category])
	47	+
	48	+ useEffect(() => {
	49	+ function onKeyDown(e: KeyboardEvent) {
	50	+ if (e.key === 'Escape') {
	51	+ onClose()
	52	+ }
	53	+ }
	54	+ window.addEventListener('keydown', onKeyDown)
	55	+ return () => window.removeEventListener('keydown', onKeyDown)
	56	+ }, [onClose])
	57	+
	58	+ const keywordTrimmed = keyword.trim()
	59	+ const visible = contacts.filter((c) => {
	60	+ if (keywordTrimmed === '') {
	61	+ return true
	62	+ }
	63	+ return c.name.includes(keywordTrimmed) \|\| (c.affiliation ?? '').includes(keywordTrimmed)
	64	+ })
	65	+
	66	+ return (
	67	+ <div className="fixed inset-0 flex items-center justify-center bg-black/30">
	68	+ <div className="w-[30rem] rounded-lg bg-white p-5">
	69	+ <div className="flex items-center justify-between">
	70	+ <h2 className="text-base font-semibold">{title}</h2>
	71	+ <button
	72	+ type="button"
	73	+ onClick={onClose}
	74	+ aria-label="닫기"
	75	+ className="rounded-md p-1 text-gray-400 hover:bg-gray-100"
	76	+ >
	77	+ ✕
	78	+ </button>
	79	+ </div>
	80	+
	81	+ <input
	82	+ type="text"
	83	+ value={keyword}
	84	+ onChange={(e) => setKeyword(e.target.value)}
	85	+ placeholder="이름·소속으로 검색"
	86	+ aria-label="담당자 검색"
	87	+ className="mt-3 w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm"
	88	+ />
	89	+
	90	+ {error && <p className="mt-2 text-xs text-red-600">{error}</p>}
	91	+
	92	+ <div className="mt-3 max-h-72 overflow-y-auto">
	93	+ {loading ? (
	94	+ <p className="py-6 text-center text-sm text-gray-400">불러오는 중…</p>
	95	+ ) : visible.length === 0 ? (
	96	+ <p className="py-6 text-center text-sm text-gray-300">등록된 담당자가 없습니다.</p>
	97	+ ) : (
	98	+ <ul className="divide-y divide-gray-100">
	99	+ {visible.map((contact) => (
	100	+ <li key={contact.id} className="flex items-center justify-between gap-3 py-2 text-sm">
	101	+ <div>
	102	+ <p className="font-medium text-gray-900">
	103	+ {contact.name}
	104	+ {contact.affiliation && (
	105	+ <span className="ml-1 text-gray-500">· {contact.affiliation}</span>
	106	+ )}
	107	+ </p>
	108	+ <p className="text-xs text-gray-400">
	109	+ {[contact.deptName, contact.phone, contact.email].filter(Boolean).join(' · ') \|\| '-'}
	110	+ </p>
	111	+ </div>
	112	+ <button
	113	+ type="button"
	114	+ onClick={() => onSelect(contact)}
	115	+ className="shrink-0 rounded-md border border-gray-300 px-2.5 py-1 text-xs text-gray-700 hover:bg-gray-50"
	116	+ >
	117	+ 선택
	118	+ </button>
	119	+ </li>
	120	+ ))}
	121	+ </ul>
	122	+ )}
	123	+ </div>
	124	+
	125	+ <p className="mt-4 border-t border-gray-100 pt-3 text-xs text-gray-400">{FOOTER_NOTE}</p>
	126	+ </div>
	127	+ </div>
	128	+ )
	129	+}

97f0489

frontend/src/components/ContactsPage.test.tsx (added)

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

...	...	@@ -0,0 +1,180 @@
	1	+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
	2	+import { beforeEach, describe, expect, it, vi } from 'vitest'
	3	+import ContactsPage from './ContactsPage'
	4	+import type { Contact } from '../api/client'
	5	+
	6	+const mocks = vi.hoisted(() => ({
	7	+ getContacts: vi.fn(),
	8	+ createContact: vi.fn(),
	9	+ updateContactInfo: vi.fn(),
	10	+ deleteContact: vi.fn(),
	11	+}))
	12	+
	13	+vi.mock('../api/client', async (importOriginal) => ({
	14	+ ...(await importOriginal<typeof import('../api/client')>()),
	15	+ getContacts: mocks.getContacts,
	16	+ createContact: mocks.createContact,
	17	+ updateContactInfo: mocks.updateContactInfo,
	18	+ deleteContact: mocks.deleteContact,
	19	+}))
	20	+
	21	+function contact(overrides: Partial<Contact> = {}): Contact {
	22	+ return {
	23	+ id: 1,
	24	+ category: 'APPLICANT',
	25	+ name: '송민지',
	26	+ affiliation: '국제방송교류재단',
	27	+ deptName: '데이터정보화팀',
	28	+ title: '과장',
	29	+ phone: '02-3475-5434',
	30	+ email: 'ming@arirang.com',
	31	+ ...overrides,
	32	+ }
	33	+}
	34	+
	35	+beforeEach(() => {
	36	+ mocks.getContacts.mockReset()
	37	+ mocks.createContact.mockReset()
	38	+ mocks.updateContactInfo.mockReset()
	39	+ mocks.deleteContact.mockReset()
	40	+})
	41	+
	42	+describe('ContactsPage', () => {
	43	+ it('담당자 목록을 구분·성명 등과 함께 보여준다', async () => {
	44	+ mocks.getContacts.mockResolvedValue([contact()])
	45	+
	46	+ render(<ContactsPage />)
	47	+
	48	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	49	+ expect(screen.getByRole('cell', { name: '신청기관' })).toBeTruthy()
	50	+ expect(screen.getByText('국제방송교류재단')).toBeTruthy()
	51	+ expect(screen.getByText('데이터정보화팀')).toBeTruthy()
	52	+ expect(screen.getByText('02-3475-5434')).toBeTruthy()
	53	+ expect(screen.getByText('ming@arirang.com')).toBeTruthy()
	54	+ })
	55	+
	56	+ it('담당자가 없으면 안내 문구를 보여준다', async () => {
	57	+ mocks.getContacts.mockResolvedValue([])
	58	+
	59	+ render(<ContactsPage />)
	60	+
	61	+ await waitFor(() => {
	62	+ expect(screen.getByText('등록된 담당자가 없습니다.')).toBeTruthy()
	63	+ })
	64	+ })
	65	+
	66	+ it('필터 칩을 누르면 해당 구분만 보인다', async () => {
	67	+ mocks.getContacts.mockResolvedValue([
	68	+ contact({ id: 1, name: '송민지', category: 'APPLICANT' }),
	69	+ contact({ id: 2, name: '이변호', category: 'LAWYER', affiliation: null, deptName: null }),
	70	+ ])
	71	+
	72	+ render(<ContactsPage />)
	73	+
	74	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	75	+
	76	+ fireEvent.click(screen.getByRole('button', { name: '변호사' }))
	77	+
	78	+ expect(screen.queryByText('송민지')).toBeNull()
	79	+ expect(screen.getByText('이변호')).toBeTruthy()
	80	+ })
	81	+
	82	+ it('담당자 추가를 누르면 모달이 뜨고, 구분과 성명을 채워야 저장이 활성화된다', async () => {
	83	+ mocks.getContacts.mockResolvedValue([])
	84	+
	85	+ render(<ContactsPage />)
	86	+ await waitFor(() => expect(mocks.getContacts).toHaveBeenCalled())
	87	+
	88	+ fireEvent.click(screen.getByRole('button', { name: '담당자 추가' }))
	89	+
	90	+ expect(screen.getByRole('heading', { name: '담당자 추가' })).toBeTruthy()
	91	+ const save = screen.getByRole('button', { name: '저장' })
	92	+ expect(save).toBeDisabled()
	93	+
	94	+ fireEvent.change(screen.getByLabelText('성명'), { target: { value: '홍길동' } })
	95	+ expect(save).toBeEnabled()
	96	+ })
	97	+
	98	+ it('저장하면 createContact가 폼 값으로 호출되고, 이후 목록을 다시 불러온다', async () => {
	99	+ mocks.getContacts.mockResolvedValueOnce([]).mockResolvedValueOnce([contact({ name: '홍길동' })])
	100	+ mocks.createContact.mockResolvedValue(contact({ name: '홍길동' }))
	101	+
	102	+ render(<ContactsPage />)
	103	+ await waitFor(() => expect(mocks.getContacts).toHaveBeenCalledTimes(1))
	104	+
	105	+ fireEvent.click(screen.getByRole('button', { name: '담당자 추가' }))
	106	+ fireEvent.change(screen.getByLabelText('성명'), { target: { value: '홍길동' } })
	107	+ fireEvent.change(screen.getByLabelText('구분'), { target: { value: 'MJ' } })
	108	+ fireEvent.click(screen.getByRole('button', { name: '저장' }))
	109	+
	110	+ await waitFor(() => {
	111	+ expect(mocks.createContact).toHaveBeenCalledWith({
	112	+ category: 'MJ',
	113	+ name: '홍길동',
	114	+ affiliation: '',
	115	+ deptName: '',
	116	+ title: '',
	117	+ phone: '',
	118	+ email: '',
	119	+ })
	120	+ })
	121	+
	122	+ await waitFor(() => expect(mocks.getContacts).toHaveBeenCalledTimes(2))
	123	+ })
	124	+
	125	+ it('수정 버튼을 누르면 기존 값이 채워진 모달이 뜨고, 저장하면 updateContactInfo가 호출된다', async () => {
	126	+ mocks.getContacts.mockResolvedValue([contact()])
	127	+ mocks.updateContactInfo.mockResolvedValue(contact({ phone: '02-0000-0000' }))
	128	+
	129	+ render(<ContactsPage />)
	130	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	131	+
	132	+ fireEvent.click(screen.getByRole('button', { name: '수정' }))
	133	+
	134	+ expect(screen.getByText('담당자 수정')).toBeTruthy()
	135	+ expect(screen.getByLabelText('성명')).toHaveValue('송민지')
	136	+
	137	+ fireEvent.change(screen.getByLabelText('연락처'), { target: { value: '02-0000-0000' } })
	138	+ fireEvent.click(screen.getByRole('button', { name: '저장' }))
	139	+
	140	+ await waitFor(() => {
	141	+ expect(mocks.updateContactInfo).toHaveBeenCalledWith(
	142	+ 1,
	143	+ expect.objectContaining({ phone: '02-0000-0000' }),
	144	+ )
	145	+ })
	146	+ })
	147	+
	148	+ it('삭제를 누르면 확인을 물어보고, 확인하면 deleteContact를 호출한다', async () => {
	149	+ mocks.getContacts.mockResolvedValue([contact()])
	150	+ mocks.deleteContact.mockResolvedValue(undefined)
	151	+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
	152	+
	153	+ render(<ContactsPage />)
	154	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	155	+
	156	+ fireEvent.click(screen.getByRole('button', { name: '삭제' }))
	157	+
	158	+ expect(confirmSpy).toHaveBeenCalledWith(
	159	+ '삭제하면 기관에 지정된 배정도 함께 해제됩니다. 삭제할까요?',
	160	+ )
	161	+ await waitFor(() => expect(mocks.deleteContact).toHaveBeenCalledWith(1))
	162	+
	163	+ confirmSpy.mockRestore()
	164	+ })
	165	+
	166	+ it('삭제 확인을 취소하면 deleteContact를 호출하지 않는다', async () => {
	167	+ mocks.getContacts.mockResolvedValue([contact()])
	168	+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
	169	+
	170	+ render(<ContactsPage />)
	171	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	172	+
	173	+ fireEvent.click(screen.getByRole('button', { name: '삭제' }))
	174	+
	175	+ expect(confirmSpy).toHaveBeenCalled()
	176	+ expect(mocks.deleteContact).not.toHaveBeenCalled()
	177	+
	178	+ confirmSpy.mockRestore()
	179	+ })
	180	+})

97f0489

frontend/src/components/ContactsPage.tsx (added)

+++ frontend/src/components/ContactsPage.tsx

...	...	@@ -0,0 +1,381 @@
	1	+import { useEffect, useState } from 'react'
	2	+import {
	3	+ createContact,
	4	+ deleteContact,
	5	+ getContacts,
	6	+ updateContactInfo,
	7	+ type Contact,
	8	+ type ContactCategory,
	9	+ type ContactInput,
	10	+} from '../api/client'
	11	+
	12	+const CATEGORY_LABELS: Record<ContactCategory, string> = {
	13	+ APPLICANT: '신청기관',
	14	+ MJ: '문정원',
	15	+ LAWYER: '변호사',
	16	+}
	17	+
	18	+const CATEGORY_BADGE_STYLES: Record<ContactCategory, string> = {
	19	+ APPLICANT: 'bg-blue-50 text-blue-700',
	20	+ MJ: 'bg-emerald-50 text-emerald-700',
	21	+ LAWYER: 'bg-violet-50 text-violet-700',
	22	+}
	23	+
	24	+const FILTERS: { key: ContactCategory \| 'ALL'; label: string }[] = [
	25	+ { key: 'ALL', label: '전체' },
	26	+ { key: 'APPLICANT', label: '신청기관' },
	27	+ { key: 'MJ', label: '문정원' },
	28	+ { key: 'LAWYER', label: '변호사' },
	29	+]
	30	+
	31	+function emptyForm(contact: Contact \| null): ContactInput {
	32	+ return {
	33	+ category: contact?.category ?? 'APPLICANT',
	34	+ name: contact?.name ?? '',
	35	+ affiliation: contact?.affiliation ?? '',
	36	+ deptName: contact?.deptName ?? '',
	37	+ title: contact?.title ?? '',
	38	+ phone: contact?.phone ?? '',
	39	+ email: contact?.email ?? '',
	40	+ }
	41	+}
	42	+
	43	+function ContactFormModal({
	44	+ editing,
	45	+ onClose,
	46	+ onSaved,
	47	+}: {
	48	+ editing: Contact \| null
	49	+ onClose: () => void
	50	+ onSaved: () => void
	51	+}) {
	52	+ const [form, setForm] = useState<ContactInput>(emptyForm(editing))
	53	+ const [busy, setBusy] = useState(false)
	54	+ const [error, setError] = useState<string \| null>(null)
	55	+
	56	+ useEffect(() => {
	57	+ function onKeyDown(e: KeyboardEvent) {
	58	+ if (e.key === 'Escape') {
	59	+ onClose()
	60	+ }
	61	+ }
	62	+ window.addEventListener('keydown', onKeyDown)
	63	+ return () => window.removeEventListener('keydown', onKeyDown)
	64	+ }, [onClose])
	65	+
	66	+ const canSave = form.category.trim() !== '' && form.name.trim() !== '' && !busy
	67	+
	68	+ function setField(key: keyof ContactInput, value: string) {
	69	+ setForm((prev) => ({ ...prev, [key]: value }))
	70	+ }
	71	+
	72	+ async function handleSave() {
	73	+ if (!canSave) {
	74	+ return
	75	+ }
	76	+ setBusy(true)
	77	+ setError(null)
	78	+ try {
	79	+ if (editing) {
	80	+ await updateContactInfo(editing.id, form)
	81	+ } else {
	82	+ await createContact(form)
	83	+ }
	84	+ onSaved()
	85	+ } catch (e) {
	86	+ setError(e instanceof Error ? e.message : '저장에 실패했습니다.')
	87	+ } finally {
	88	+ setBusy(false)
	89	+ }
	90	+ }
	91	+
	92	+ return (
	93	+ <div className="fixed inset-0 flex items-center justify-center bg-black/30">
	94	+ <div className="w-[26rem] rounded-lg bg-white p-5">
	95	+ <div className="flex items-center justify-between">
	96	+ <h2 className="text-base font-semibold">{editing ? '담당자 수정' : '담당자 추가'}</h2>
	97	+ <button
	98	+ type="button"
	99	+ onClick={onClose}
	100	+ aria-label="닫기"
	101	+ disabled={busy}
	102	+ className="rounded-md p-1 text-gray-400 hover:bg-gray-100 disabled:opacity-50"
	103	+ >
	104	+ ✕
	105	+ </button>
	106	+ </div>
	107	+
	108	+ <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
	109	+ <div className="flex flex-col gap-1">
	110	+ <label htmlFor="contact-category" className="text-xs text-gray-500">
	111	+ 구분
	112	+ </label>
	113	+ <select
	114	+ id="contact-category"
	115	+ value={form.category}
	116	+ onChange={(e) => setField('category', e.target.value)}
	117	+ className="rounded-md border border-gray-300 px-2 py-1.5"
	118	+ >
	119	+ <option value="APPLICANT">신청기관</option>
	120	+ <option value="MJ">문정원</option>
	121	+ <option value="LAWYER">변호사</option>
	122	+ </select>
	123	+ </div>
	124	+ <div className="flex flex-col gap-1">
	125	+ <label htmlFor="contact-name" className="text-xs text-gray-500">
	126	+ 성명
	127	+ </label>
	128	+ <input
	129	+ id="contact-name"
	130	+ value={form.name}
	131	+ onChange={(e) => setField('name', e.target.value)}
	132	+ className="rounded-md border border-gray-300 px-2 py-1.5"
	133	+ />
	134	+ </div>
	135	+ <div className="flex flex-col gap-1">
	136	+ <label htmlFor="contact-affiliation" className="text-xs text-gray-500">
	137	+ 소속
	138	+ </label>
	139	+ <input
	140	+ id="contact-affiliation"
	141	+ value={form.affiliation}
	142	+ onChange={(e) => setField('affiliation', e.target.value)}
	143	+ className="rounded-md border border-gray-300 px-2 py-1.5"
	144	+ />
	145	+ </div>
	146	+ <div className="flex flex-col gap-1">
	147	+ <label htmlFor="contact-dept" className="text-xs text-gray-500">
	148	+ 부서
	149	+ </label>
	150	+ <input
	151	+ id="contact-dept"
	152	+ value={form.deptName}
	153	+ onChange={(e) => setField('deptName', e.target.value)}
	154	+ className="rounded-md border border-gray-300 px-2 py-1.5"
	155	+ />
	156	+ </div>
	157	+ <div className="flex flex-col gap-1">
	158	+ <label htmlFor="contact-title" className="text-xs text-gray-500">
	159	+ 직급/직함
	160	+ </label>
	161	+ <input
	162	+ id="contact-title"
	163	+ value={form.title}
	164	+ onChange={(e) => setField('title', e.target.value)}
	165	+ className="rounded-md border border-gray-300 px-2 py-1.5"
	166	+ />
	167	+ </div>
	168	+ <div className="flex flex-col gap-1">
	169	+ <label htmlFor="contact-phone" className="text-xs text-gray-500">
	170	+ 연락처
	171	+ </label>
	172	+ <input
	173	+ id="contact-phone"
	174	+ value={form.phone}
	175	+ onChange={(e) => setField('phone', e.target.value)}
	176	+ className="rounded-md border border-gray-300 px-2 py-1.5"
	177	+ />
	178	+ </div>
	179	+ <div className="col-span-2 flex flex-col gap-1">
	180	+ <label htmlFor="contact-email" className="text-xs text-gray-500">
	181	+ 이메일
	182	+ </label>
	183	+ <input
	184	+ id="contact-email"
	185	+ value={form.email}
	186	+ onChange={(e) => setField('email', e.target.value)}
	187	+ className="rounded-md border border-gray-300 px-2 py-1.5"
	188	+ />
	189	+ </div>
	190	+ </div>
	191	+
	192	+ {error && <p className="mt-3 text-xs text-red-600">{error}</p>}
	193	+
	194	+ <div className="mt-5 flex justify-end gap-2">
	195	+ <button
	196	+ type="button"
	197	+ disabled={busy}
	198	+ onClick={onClose}
	199	+ className="rounded-md border border-gray-300 px-3 py-1.5 text-sm disabled:opacity-50"
	200	+ >
	201	+ 취소
	202	+ </button>
	203	+ <button
	204	+ type="button"
	205	+ disabled={!canSave}
	206	+ onClick={() => void handleSave()}
	207	+ className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white disabled:bg-gray-300"
	208	+ >
	209	+ 저장
	210	+ </button>
	211	+ </div>
	212	+ </div>
	213	+ </div>
	214	+ )
	215	+}
	216	+
	217	+/** 담당자관리 화면. 담당자 정보가 입력되는 유일한 곳이다 - 채널관리는 여기 등록된
	218	+ * 담당자를 ContactPickerModal로 골라 배정만 한다. */
	219	+export default function ContactsPage() {
	220	+ const [contacts, setContacts] = useState<Contact[]>([])
	221	+ const [loading, setLoading] = useState(true)
	222	+ const [filter, setFilter] = useState<ContactCategory \| 'ALL'>('ALL')
	223	+ const [modalOpen, setModalOpen] = useState(false)
	224	+ const [editing, setEditing] = useState<Contact \| null>(null)
	225	+ const [error, setError] = useState<string \| null>(null)
	226	+
	227	+ async function load() {
	228	+ setLoading(true)
	229	+ try {
	230	+ setContacts(await getContacts())
	231	+ } catch (e) {
	232	+ setError(e instanceof Error ? e.message : '담당자 목록을 불러오지 못했습니다.')
	233	+ } finally {
	234	+ setLoading(false)
	235	+ }
	236	+ }
	237	+
	238	+ useEffect(() => {
	239	+ void load()
	240	+ }, [])
	241	+
	242	+ const visible = filter === 'ALL' ? contacts : contacts.filter((c) => c.category === filter)
	243	+
	244	+ function openAdd() {
	245	+ setEditing(null)
	246	+ setModalOpen(true)
	247	+ }
	248	+
	249	+ function openEdit(contact: Contact) {
	250	+ setEditing(contact)
	251	+ setModalOpen(true)
	252	+ }
	253	+
	254	+ function closeModal() {
	255	+ setModalOpen(false)
	256	+ setEditing(null)
	257	+ }
	258	+
	259	+ async function handleSaved() {
	260	+ closeModal()
	261	+ await load()
	262	+ }
	263	+
	264	+ async function handleDelete(contact: Contact) {
	265	+ if (!window.confirm('삭제하면 기관에 지정된 배정도 함께 해제됩니다. 삭제할까요?')) {
	266	+ return
	267	+ }
	268	+ try {
	269	+ await deleteContact(contact.id)
	270	+ await load()
	271	+ } catch (e) {
	272	+ setError(e instanceof Error ? e.message : '삭제에 실패했습니다.')
	273	+ }
	274	+ }
	275	+
	276	+ return (
	277	+ <div className="p-8">
	278	+ <div className="flex flex-wrap items-center justify-between gap-3">
	279	+ <div className="flex flex-wrap gap-2">
	280	+ {FILTERS.map((f) => (
	281	+ <button
	282	+ key={f.key}
	283	+ type="button"
	284	+ onClick={() => setFilter(f.key)}
	285	+ aria-current={filter === f.key ? 'true' : undefined}
	286	+ className={`rounded-full px-3 py-1.5 text-sm ${
	287	+ filter === f.key
	288	+ ? 'bg-gray-900 text-white'
	289	+ : 'border border-gray-300 text-gray-600 hover:bg-gray-50'
	290	+ }`}
	291	+ >
	292	+ {f.label}
	293	+ </button>
	294	+ ))}
	295	+ </div>
	296	+
	297	+ <button
	298	+ type="button"
	299	+ onClick={openAdd}
	300	+ className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
	301	+ >
	302	+ 담당자 추가
	303	+ </button>
	304	+ </div>
	305	+
	306	+ {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
	307	+
	308	+ <div className="mt-5 overflow-x-auto rounded-lg border border-gray-200 bg-white">
	309	+ <table className="w-full min-w-[860px] text-sm">
	310	+ <thead>
	311	+ <tr className="border-b border-gray-200 bg-gray-50 text-left text-xs text-gray-500">
	312	+ <th className="whitespace-nowrap px-3 py-2 font-medium">구분</th>
	313	+ <th className="whitespace-nowrap px-3 py-2 font-medium">성명</th>
	314	+ <th className="whitespace-nowrap px-3 py-2 font-medium">소속</th>
	315	+ <th className="whitespace-nowrap px-3 py-2 font-medium">부서</th>
	316	+ <th className="whitespace-nowrap px-3 py-2 font-medium">직급/직함</th>
	317	+ <th className="whitespace-nowrap px-3 py-2 font-medium">연락처</th>
	318	+ <th className="whitespace-nowrap px-3 py-2 font-medium">이메일</th>
	319	+ <th className="whitespace-nowrap px-3 py-2 font-medium">관리</th>
	320	+ </tr>
	321	+ </thead>
	322	+ <tbody>
	323	+ {loading ? (
	324	+ <tr>
	325	+ <td colSpan={8} className="py-8 text-center text-sm text-gray-400">
	326	+ 불러오는 중…
	327	+ </td>
	328	+ </tr>
	329	+ ) : visible.length === 0 ? (
	330	+ <tr>
	331	+ <td colSpan={8} className="py-8 text-center text-sm text-gray-300">
	332	+ 등록된 담당자가 없습니다.
	333	+ </td>
	334	+ </tr>
	335	+ ) : (
	336	+ visible.map((contact) => (
	337	+ <tr key={contact.id} className="border-b border-gray-100 last:border-b-0">
	338	+ <td className="px-3 py-2">
	339	+ <span
	340	+ className={`rounded-full px-2 py-0.5 text-xs font-medium ${CATEGORY_BADGE_STYLES[contact.category]}`}
	341	+ >
	342	+ {CATEGORY_LABELS[contact.category]}
	343	+ </span>
	344	+ </td>
	345	+ <td className="px-3 py-2 font-medium text-gray-900">{contact.name}</td>
	346	+ <td className="px-3 py-2 text-gray-600">{contact.affiliation ?? '-'}</td>
	347	+ <td className="px-3 py-2 text-gray-600">{contact.deptName ?? '-'}</td>
	348	+ <td className="px-3 py-2 text-gray-600">{contact.title ?? '-'}</td>
	349	+ <td className="px-3 py-2 text-gray-600">{contact.phone ?? '-'}</td>
	350	+ <td className="px-3 py-2 text-gray-600">{contact.email ?? '-'}</td>
	351	+ <td className="px-3 py-2">
	352	+ <div className="flex gap-2">
	353	+ <button
	354	+ type="button"
	355	+ onClick={() => openEdit(contact)}
	356	+ className="rounded-md border border-gray-200 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-50"
	357	+ >
	358	+ 수정
	359	+ </button>
	360	+ <button
	361	+ type="button"
	362	+ onClick={() => void handleDelete(contact)}
	363	+ className="rounded-md border border-gray-200 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-50"
	364	+ >
	365	+ 삭제
	366	+ </button>
	367	+ </div>
	368	+ </td>
	369	+ </tr>
	370	+ ))
	371	+ )}
	372	+ </tbody>
	373	+ </table>
	374	+ </div>
	375	+
	376	+ {modalOpen && (
	377	+ <ContactFormModal editing={editing} onClose={closeModal} onSaved={() => void handleSaved()} />
	378	+ )}
	379	+ </div>
	380	+ )
	381	+}

053356d

97f0489

frontend/src/components/OrgDetail.test.tsx

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

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


 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'
+import type { Contact, Org } from '../api/client'
 
 const mocks = vi.hoisted(() => ({
-  updateContact: vi.fn(),
+  updateAssignments: vi.fn(),
   provisionChannels: vi.fn(),
+  getContacts: vi.fn(),
 }))
 
 vi.mock('../api/client', async (importOriginal) => ({
   ...(await importOriginal<typeof import('../api/client')>()),
-  updateContact: mocks.updateContact,
+  updateAssignments: mocks.updateAssignments,
   provisionChannels: mocks.provisionChannels,
+  getContacts: mocks.getContacts,
 }))
+
+function contact(overrides: Partial<Contact> = {}): Contact {
+  return {
+    id: 1,
+    category: 'APPLICANT',
+    name: '이름없음',
+    affiliation: null,
+    deptName: null,
+    title: null,
+    phone: null,
+    email: null,
+    ...overrides,
+  }
+}
 
 function org(overrides: Partial<Org> = {}): Org {
   return {

     orgNo: '001',
     orgName: '국제방송교류재단',
     status: 'INFO_PENDING',
-    deptName: null,
-    managerName: null,
-    managerTitle: null,
-    managerPhone: null,
-    managerEmail: null,
-    mjDeptName: null,
-    mjManagerName: null,
-    mjManagerPhone: null,
-    mjManagerEmail: null,
-    lawyerName: null,
-    lawyerPhone: null,
-    lawyerEmail: null,
+    applicant: null,
+    mj: null,
+    lawyer: null,
     lawyerAssignedDate: null,
     channelIdMj: null,
     channelIdLaw: null,

 }
 
 beforeEach(() => {
-  mocks.updateContact.mockReset()
+  mocks.updateAssignments.mockReset()
   mocks.provisionChannels.mockReset()
+  mocks.getContacts.mockReset().mockResolvedValue([])
 })
 
 describe('OrgDetail', () => {

     expect(screen.getByRole('button', { name: '채널 생성' })).toBeEnabled()
   })
 
-  it('담당자 정보를 저장하면 API를 호출한다', async () => {
-    mocks.updateContact.mockResolvedValue(org({ status: 'READY' }))
+  it('배정되지 않은 역할은 미지정으로 표시된다', () => {
+    render(<OrgDetail org={org()} onChanged={() => {}} />)
+
+    expect(screen.getAllByText('미지정')).toHaveLength(3)
+  })
+
+  it('배정된 담당자는 요약(이름·부서·연락처)으로 표시된다', () => {
+    render(
+      <OrgDetail
+        org={org({
+          applicant: contact({
+            name: '송민지',
+            deptName: '데이터정보화팀',
+            phone: '02-3475-5434',
+          }),
+        })}
+        onChanged={() => {}}
+      />,
+    )
+
+    expect(screen.getByText('송민지 · 데이터정보화팀 · 02-3475-5434')).toBeTruthy()
+  })
+
+  it('선택 버튼을 누르면 담당자 선택 모달이 뜬다', async () => {
+    mocks.getContacts.mockResolvedValue([contact({ id: 9, name: '송민지' })])
+
+    render(<OrgDetail org={org()} onChanged={() => {}} />)
+
+    fireEvent.click(screen.getByRole('button', { name: '신청기관 담당자 선택' }))
+
+    expect(screen.getByText('신청기관 담당자 선택')).toBeTruthy()
+    await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
+    expect(mocks.getContacts).toHaveBeenCalledWith('APPLICANT')
+  })
+
+  it('모달에서 담당자를 고르면 updateAssignments가 그 담당자ID로 호출된다', async () => {
+    mocks.getContacts.mockResolvedValue([contact({ id: 9, name: '송민지' })])
+    mocks.updateAssignments.mockResolvedValue(org({ status: 'READY' }))
     const onChanged = vi.fn()
 
     render(<OrgDetail org={org()} onChanged={onChanged} />)
-    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: '정보 저장' }))
+
+    fireEvent.click(screen.getByRole('button', { name: '신청기관 담당자 선택' }))
+    await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
+    fireEvent.click(screen.getByRole('button', { name: '선택' }))
 
     await waitFor(() => {
-      expect(mocks.updateContact).toHaveBeenCalledWith(1, {
-        deptName: '데이터정보화팀',
-        managerName: '송민지',
-        managerTitle: '과장',
-        managerPhone: '02-3475-5434',
-        managerEmail: 'ming@arirang.com',
-        mjDeptName: '',
-        mjManagerName: '',
-        mjManagerPhone: '',
-        mjManagerEmail: '',
-        lawyerName: '',
-        lawyerPhone: '',
-        lawyerEmail: '',
-        lawyerAssignedDate: '',
+      expect(mocks.updateAssignments).toHaveBeenCalledWith(1, {
+        applicantContactId: 9,
+        mjContactId: null,
+        lawyerContactId: null,
+        lawyerAssignedDate: null,
       })
       expect(onChanged).toHaveBeenCalled()
     })
   })
 
-  it('문정원 담당자와 담당 변호사 정보를 입력하면 한 번의 저장으로 함께 전송된다', async () => {
-    mocks.updateContact.mockResolvedValue(org({ status: 'READY' }))
+  it('해제 버튼을 누르면 해당 역할만 null로 배정을 해제한다', async () => {
+    mocks.updateAssignments.mockResolvedValue(org())
     const onChanged = vi.fn()
 
-    render(<OrgDetail org={org()} onChanged={onChanged} />)
-    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' } })
+    render(
+      <OrgDetail
+        org={org({
+          status: 'READY',
+          applicant: contact({ id: 5, name: '송민지' }),
+          mj: contact({ id: 6, category: 'MJ', name: '김문정' }),
+        })}
+        onChanged={onChanged}
+      />,
+    )
 
-    fireEvent.click(screen.getByRole('button', { name: '정보 저장' }))
+    fireEvent.click(screen.getByRole('button', { name: '신청기관 담당자 해제' }))
 
     await waitFor(() => {
-      expect(mocks.updateContact).toHaveBeenCalledWith(1, {
-        deptName: '데이터정보화팀',
-        managerName: '송민지',
-        managerTitle: '',
-        managerPhone: '02-3475-5434',
-        managerEmail: 'ming@arirang.com',
-        mjDeptName: '문화체육관광부 저작권정책과',
-        mjManagerName: '김문정',
-        mjManagerPhone: '02-1234-5678',
-        mjManagerEmail: 'mj@mcst.go.kr',
-        lawyerName: '이변호',
-        lawyerPhone: '02-9876-5432',
-        lawyerEmail: 'lawyer@lawfirm.kr',
+      expect(mocks.updateAssignments).toHaveBeenCalledWith(1, {
+        applicantContactId: null,
+        mjContactId: 6,
+        lawyerContactId: null,
+        lawyerAssignedDate: null,
+      })
+      expect(onChanged).toHaveBeenCalled()
+    })
+  })
+
+  it('배정이 없는 역할에는 해제 버튼이 없다', () => {
+    render(<OrgDetail org={org()} onChanged={() => {}} />)
+
+    expect(screen.queryByRole('button', { name: '신청기관 담당자 해제' })).toBeNull()
+  })
+
+  it('담당 변호사 배정일을 바꾸면 updateAssignments가 호출된다', async () => {
+    mocks.updateAssignments.mockResolvedValue(org())
+    const onChanged = vi.fn()
+
+    render(
+      <OrgDetail
+        org={org({ lawyer: contact({ id: 7, category: 'LAWYER', name: '이변호' }) })}
+        onChanged={onChanged}
+      />,
+    )
+
+    fireEvent.change(screen.getByLabelText('배정일'), { target: { value: '2026-07-21' } })
+
+    await waitFor(() => {
+      expect(mocks.updateAssignments).toHaveBeenCalledWith(1, {
+        applicantContactId: null,
+        mjContactId: null,
+        lawyerContactId: 7,
         lawyerAssignedDate: '2026-07-21',
       })
       expect(onChanged).toHaveBeenCalled()

     })
   })
 
-  it('필수 항목이 비어있으면 정보 저장 버튼이 비활성화된다', () => {
-    render(<OrgDetail org={org()} onChanged={() => {}} />)
-
-    expect(screen.getByRole('button', { name: '정보 저장' })).toBeDisabled()
-  })
-
-  it('직급/직함이 비어있어도 나머지 필수 항목만 채우면 정보 저장 버튼이 활성화된다', () => {
-    render(<OrgDetail org={org()} onChanged={() => {}} />)
-    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={() => {}} />)
-    fireEvent.change(screen.getByLabelText('문정원 담당자 담당자명'), { target: { value: '김문정' } })
-    fireEvent.change(screen.getByLabelText('담당 변호사 성명'), { target: { value: '이변호' } })
-
-    expect(screen.getByRole('button', { name: '정보 저장' })).toBeDisabled()
-  })
-
   it('reload로 org 객체가 새로 만들어져도 같은 기관이면 결과가 지워지지 않는다', async () => {
     mocks.provisionChannels.mockResolvedValue({
       mj: 'CREATED',

     expect(screen.getByText(/법률검토 채널 생성에 실패/)).toBeTruthy()
   })
 
-  it('다른 기관으로 전환하면 이전 결과와 입력값이 초기화된다', async () => {
+  it('다른 기관으로 전환하면 이전 결과가 초기화된다', async () => {
     mocks.provisionChannels.mockResolvedValue({
       mj: 'CREATED',
       law: 'FAILED',

053356d

97f0489

frontend/src/components/OrgDetail.tsx

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

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


 import { useEffect, useState } from 'react'
 import {
   provisionChannels,
-  updateContact,
+  updateAssignments,
+  type AssignmentInput,
   type Contact,
+  type ContactCategory,
   type Org,
   type ProvisionResult,
 } from '../api/client'
 import ConfirmDialog from './ConfirmDialog'
+import ContactPickerModal from './ContactPickerModal'
 import StatusBadge from './StatusBadge'
 
-// 엑셀처럼 한 사람이 한 행이다. 셀이 null이면 그 역할에 해당 항목이 없다는 뜻(- 표시).
-// aria-label은 "행 제목 + 항목"으로 유일하게 만들어 라벨 중복 없이 접근 가능하게 한다.
-const CONTACT_COLUMNS = ['부서명', '담당자명', '직급/직함', '연락처', '이메일', '배정일']
+// 채널관리 상세. 담당자 정보는 여기서 입력하지 않는다(담당자관리에서만 입력) - 이 화면은
+// 이미 등록된 담당자를 ContactPickerModal로 골라 신청기관/문정원/변호사 역할에 배정만 한다.
 
-interface ContactCell {
-  key: keyof Contact
+interface RoleConfig {
+  key: 'applicant' | 'mj' | 'lawyer'
+  category: ContactCategory
   label: string
-  type?: string
+  pickerTitle: string
+  field: keyof AssignmentInput
 }
 
-const CONTACT_ROWS: { title: string; cells: (ContactCell | null)[] }[] = [
+const ROLES: RoleConfig[] = [
   {
-    title: '신청기관 담당자',
-    cells: [
-      { key: 'deptName', label: '신청기관 담당자 부서명' },
-      { key: 'managerName', label: '신청기관 담당자 담당자명' },
-      { key: 'managerTitle', label: '신청기관 담당자 직급/직함' },
-      { key: 'managerPhone', label: '신청기관 담당자 연락처' },
-      { key: 'managerEmail', label: '신청기관 담당자 이메일' },
-      null,
-    ],
+    key: 'applicant',
+    category: 'APPLICANT',
+    label: '신청기관 담당자',
+    pickerTitle: '신청기관 담당자 선택',
+    field: 'applicantContactId',
   },
   {
-    title: '문정원 담당자',
-    cells: [
-      { key: 'mjDeptName', label: '문정원 담당자 부서명' },
-      { key: 'mjManagerName', label: '문정원 담당자 담당자명' },
-      null,
-      { key: 'mjManagerPhone', label: '문정원 담당자 연락처' },
-      { key: 'mjManagerEmail', label: '문정원 담당자 이메일' },
-      null,
-    ],
+    key: 'mj',
+    category: 'MJ',
+    label: '문정원 담당자',
+    pickerTitle: '문정원 담당자 선택',
+    field: 'mjContactId',
   },
   {
-    title: '담당 변호사',
-    cells: [
-      null,
-      { key: 'lawyerName', label: '담당 변호사 성명' },
-      null,
-      { key: 'lawyerPhone', label: '담당 변호사 연락처' },
-      { key: 'lawyerEmail', label: '담당 변호사 이메일' },
-      { key: 'lawyerAssignedDate', label: '담당 변호사 배정일', type: 'date' },
-    ],
+    key: 'lawyer',
+    category: 'LAWYER',
+    label: '담당 변호사',
+    pickerTitle: '담당 변호사 선택',
+    field: 'lawyerContactId',
   },
 ]
 
-function emptyContact(org: Org): Contact {
-  return {
-    deptName: org.deptName ?? '',
-    managerName: org.managerName ?? '',
-    managerTitle: org.managerTitle ?? '',
-    managerPhone: org.managerPhone ?? '',
-    managerEmail: org.managerEmail ?? '',
-    mjDeptName: org.mjDeptName ?? '',
-    mjManagerName: org.mjManagerName ?? '',
-    mjManagerPhone: org.mjManagerPhone ?? '',
-    mjManagerEmail: org.mjManagerEmail ?? '',
-    lawyerName: org.lawyerName ?? '',
-    lawyerPhone: org.lawyerPhone ?? '',
-    lawyerEmail: org.lawyerEmail ?? '',
-    lawyerAssignedDate: org.lawyerAssignedDate ?? '',
+function contactOf(org: Org, role: RoleConfig): Contact | null {
+  switch (role.key) {
+    case 'applicant':
+      return org.applicant
+    case 'mj':
+      return org.mj
+    case 'lawyer':
+      return org.lawyer
   }
 }
 
-const REQUIRED_FIELDS: (keyof Contact)[] = [
-  'deptName',
-  'managerName',
-  'managerPhone',
-  'managerEmail',
-]
-
-function ContactEditTable({
-  contact,
-  onChange,
-}: {
-  contact: Contact
-  onChange: (key: keyof Contact, value: string) => void
-}) {
-  return (
-    <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>
-  )
+/** 배정된 담당자의 한 줄 요약: 이름 · 부서(또는 소속) · 연락처. 값이 없는 항목은 건너뛴다. */
+function contactSummary(contact: Contact): string {
+  const parts = [contact.name, contact.deptName ?? contact.affiliation ?? null, contact.phone]
+  return parts.filter((p): p is string => Boolean(p)).join(' · ')
 }
 
 export default function OrgDetail({ org, onChanged }: { org: Org; onChanged: () => void }) {
-  const [contact, setContact] = useState<Contact>(emptyContact(org))
   const [confirming, setConfirming] = useState(false)
   const [result, setResult] = useState<ProvisionResult | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [busy, setBusy] = useState(false)
+  const [pickerRole, setPickerRole] = useState<RoleConfig | null>(null)
+  const [lawyerDate, setLawyerDate] = useState(org.lawyerAssignedDate ?? '')
 
-  // org.id로만 키를 잡는다(org 객체 전체가 아니라) - App.reload()가 채널 생성 뒤에
+  // org.id로만 키를 잡는다(org 객체 전체가 아니라) - App.reload()가 채널 생성/배정 뒤에
   // 새 배열/새 객체를 만들어 넘기더라도, 같은 기관을 계속 보고 있는 한 방금 받은
-  // result/error를 이 effect가 지워버리면 안 되기 때문이다(같은 이유로 입력 중이던
-  // contact 값도 다른 기관으로 전환할 때만 초기화한다).
+  // result/error를 이 effect가 지워버리면 안 되기 때문이다.
   useEffect(() => {
-    setContact(emptyContact(org))
     setResult(null)
     setError(null)
+    setLawyerDate(org.lawyerAssignedDate ?? '')
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [org.id])
 
   const displayMj = `${org.orgNo}_${org.orgName} (문정원)`
   const displayLaw = `${org.orgNo}_${org.orgName} (법률검토)`
   const canProvision = org.status !== 'INFO_PENDING'
-  const requiredFilled = REQUIRED_FIELDS.every((key) => contact[key].trim() !== '')
 
-  function setField(key: keyof Contact, value: string) {
-    setContact((prev) => ({ ...prev, [key]: value }))
+  function currentAssignment(): AssignmentInput {
+    return {
+      applicantContactId: org.applicant?.id ?? null,
+      mjContactId: org.mj?.id ?? null,
+      lawyerContactId: org.lawyer?.id ?? null,
+      lawyerAssignedDate: org.lawyerAssignedDate ?? null,
+    }
   }
 
-  async function save() {
+  /** 매 호출이 세 배정값 + 배정일을 통째로 다시 보낸다(부분 갱신이 아니다). */
+  async function persistAssignments(overrides: Partial<AssignmentInput>) {
     setError(null)
     setBusy(true)
     try {
-      await updateContact(org.id, contact)
+      await updateAssignments(org.id, { ...currentAssignment(), ...overrides })
       onChanged()
     } catch (e) {
-      setError((e as Error).message)
+      setError(e instanceof Error ? e.message : '저장에 실패했습니다.')
     } finally {
       setBusy(false)
     }
+  }
+
+  async function handleSelect(role: RoleConfig, contact: Contact) {
+    setPickerRole(null)
+    await persistAssignments({ [role.field]: contact.id })
+  }
+
+  async function handleClear(role: RoleConfig) {
+    await persistAssignments({ [role.field]: null })
+  }
+
+  async function handleLawyerDateChange(value: string) {
+    setLawyerDate(value)
+    await persistAssignments({ lawyerAssignedDate: value === '' ? null : value })
   }
 
   async function provision() {

         <StatusBadge status={org.status} />
       </div>
 
-      <section className="mt-6">
-        <ContactEditTable contact={contact} onChange={setField} />
-        <p className="mt-2 text-xs text-gray-400">
-          신청기관 담당자의 부서명·담당자명·연락처·이메일은 채널 생성을 위해 필수입니다.
-        </p>
+      <section className="mt-6 space-y-3">
+        {ROLES.map((role) => {
+          const contact = contactOf(org, role)
+          return (
+            <div
+              key={role.key}
+              className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-gray-200 bg-white p-4"
+            >
+              <div className="flex flex-col gap-1">
+                <span className="text-xs text-gray-500">{role.label}</span>
+                {contact ? (
+                  <span className="text-sm font-medium text-gray-900">{contactSummary(contact)}</span>
+                ) : (
+                  <span className="text-sm text-gray-300">미지정</span>
+                )}
+              </div>
+
+              <div className="flex items-end gap-2">
+                {role.key === 'lawyer' && (
+                  <div className="flex flex-col gap-1">
+                    <label htmlFor="lawyer-assigned-date" className="text-xs text-gray-500">
+                      배정일
+                    </label>
+                    <input
+                      id="lawyer-assigned-date"
+                      type="date"
+                      disabled={busy}
+                      value={lawyerDate}
+                      onChange={(e) => void handleLawyerDateChange(e.target.value)}
+                      className="rounded-md border border-gray-300 px-2 py-1 text-sm"
+                    />
+                  </div>
+                )}
+                <button
+                  type="button"
+                  disabled={busy}
+                  aria-label={`${role.label} 선택`}
+                  onClick={() => setPickerRole(role)}
+                  className="rounded-md border border-gray-300 px-3 py-1.5 text-sm disabled:opacity-50"
+                >
+                  선택
+                </button>
+                {contact && (
+                  <button
+                    type="button"
+                    disabled={busy}
+                    aria-label={`${role.label} 해제`}
+                    onClick={() => void handleClear(role)}
+                    className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-500 disabled:opacity-50"
+                  >
+                    해제
+                  </button>
+                )}
+              </div>
+            </div>
+          )
+        })}
+        <p className="text-xs text-gray-400">신청기관 담당자를 지정해야 채널을 만들 수 있습니다.</p>
       </section>
 
       <div className="mt-5 flex gap-2">
-        <button
-          type="button"
-          disabled={busy || !requiredFilled}
-          onClick={() => void save()}
-          className="rounded-md border border-gray-300 px-3 py-1.5 text-sm disabled:opacity-50"
-        >
-          정보 저장
-        </button>
         <button
           type="button"
           disabled={busy || !canProvision}

           onCancel={() => setConfirming(false)}
         />
       )}
+
+      {pickerRole && (
+        <ContactPickerModal
+          category={pickerRole.category}
+          title={pickerRole.pickerTitle}
+          onSelect={(contact) => void handleSelect(pickerRole, contact)}
+          onClose={() => setPickerRole(null)}
+        />
+      )}
     </div>
   )
 }

053356d

97f0489

frontend/src/components/OrgList.test.tsx

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

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


 const orgs: Org[] = [
   {
     id: 1, orgNo: '001', orgName: '국제방송교류재단', status: 'ACTIVE',
-    deptName: null, managerName: null, managerTitle: null,
-    managerPhone: null, managerEmail: null,
-    mjDeptName: null, mjManagerName: null, mjManagerPhone: null, mjManagerEmail: null,
-    lawyerName: null, lawyerPhone: null, lawyerEmail: null, lawyerAssignedDate: null,
+    applicant: null, mj: null, lawyer: null, lawyerAssignedDate: null,
     channelIdMj: 'a', channelIdLaw: 'b',
   },
   {
     id: 2, orgNo: '008', orgName: '경찰청_치안정책연구소', status: 'INFO_PENDING',
-    deptName: null, managerName: null, managerTitle: null,
-    managerPhone: null, managerEmail: null,
-    mjDeptName: null, mjManagerName: null, mjManagerPhone: null, mjManagerEmail: null,
-    lawyerName: null, lawyerPhone: null, lawyerEmail: null, lawyerAssignedDate: null,
+    applicant: null, mj: null, lawyer: null, lawyerAssignedDate: null,
     channelIdMj: null, channelIdLaw: null,
   },
 ]

053356d

97f0489

frontend/src/components/OrgOverview.test.tsx

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

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


 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import OrgOverview from './OrgOverview'
-import type { Org } from '../api/client'
+import type { Contact, Org } from '../api/client'
 
 const mocks = vi.hoisted(() => ({
   getPosts: vi.fn(),

   getMemos: mocks.getMemos,
 }))
 
+function contact(overrides: Partial<Contact> = {}): Contact {
+  return {
+    id: 1,
+    category: 'APPLICANT',
+    name: '이름없음',
+    affiliation: null,
+    deptName: null,
+    title: null,
+    phone: null,
+    email: null,
+    ...overrides,
+  }
+}
+
 function org(overrides: Partial<Org> = {}): Org {
   return {
     id: 1,
     orgNo: '001',
     orgName: '국제방송교류재단',
     status: 'ACTIVE',
-    deptName: '데이터정보화팀',
-    managerName: '송민지',
-    managerTitle: '과장',
-    managerPhone: '02-3475-5434',
-    managerEmail: 'ming@arirang.com',
-    mjDeptName: null,
-    mjManagerName: null,
-    mjManagerPhone: null,
-    mjManagerEmail: null,
-    lawyerName: null,
-    lawyerPhone: null,
-    lawyerEmail: null,
+    applicant: contact({
+      id: 1,
+      category: 'APPLICANT',
+      name: '송민지',
+      affiliation: '국제방송교류재단',
+      deptName: '데이터정보화팀',
+      title: '과장',
+      phone: '02-3475-5434',
+      email: 'ming@arirang.com',
+    }),
+    mj: null,
+    lawyer: null,
     lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',

     render(
       <OrgOverview
         org={org({
-          mjDeptName: '문화체육관광부 저작권정책과',
-          mjManagerName: '김문정',
-          mjManagerPhone: '02-1234-5678',
-          mjManagerEmail: 'mj@mcst.go.kr',
-          lawyerName: '이변호',
-          lawyerPhone: '02-9876-5432',
-          lawyerEmail: 'lawyer@lawfirm.kr',
+          mj: contact({
+            id: 2,
+            category: 'MJ',
+            name: '김문정',
+            deptName: '문화체육관광부 저작권정책과',
+            phone: '02-1234-5678',
+            email: 'mj@mcst.go.kr',
+          }),
+          lawyer: contact({
+            id: 3,
+            category: 'LAWYER',
+            name: '이변호',
+            phone: '02-9876-5432',
+            email: 'lawyer@lawfirm.kr',
+          }),
           lawyerAssignedDate: '2026-07-21',
         })}
       />,

053356d

97f0489

frontend/src/components/OrgOverview.tsx

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

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


           </div>
         </div>
 
-        {/* 담당자 카드 3개 (신청기관/문정원/변호사) */}
+        {/* 담당자 카드 3개 (신청기관/문정원/변호사) - 담당자 정보는 담당자관리에서만 입력하고,
+            여기서는 org.applicant/mj/lawyer로 배정된 담당자를 읽기 전용으로 보여준다. */}
         <div className="mt-5 grid grid-cols-1 gap-3 lg:grid-cols-3">
           <ContactCard
             title="신청기관 담당자"
             fields={[
-              { label: '부서', value: org.deptName },
+              { label: '부서', value: org.applicant?.deptName ?? null },
               {
                 label: '담당자',
-                value: org.managerName
-                  ? org.managerTitle
-                    ? `${org.managerName} ${org.managerTitle}`
-                    : org.managerName
+                value: org.applicant
+                  ? org.applicant.title
+                    ? `${org.applicant.name} ${org.applicant.title}`
+                    : org.applicant.name
                   : null,
               },
-              { label: '연락처', value: org.managerPhone },
-              { label: '이메일', value: org.managerEmail },
+              { label: '연락처', value: org.applicant?.phone ?? null },
+              { label: '이메일', value: org.applicant?.email ?? null },
             ]}
           />
           <ContactCard
             title="문정원 담당자"
             fields={[
-              { label: '부서', value: org.mjDeptName },
-              { label: '담당자', value: org.mjManagerName },
-              { label: '연락처', value: org.mjManagerPhone },
-              { label: '이메일', value: org.mjManagerEmail },
+              { label: '부서', value: org.mj?.deptName ?? null },
+              { label: '담당자', value: org.mj?.name ?? null },
+              { label: '연락처', value: org.mj?.phone ?? null },
+              { label: '이메일', value: org.mj?.email ?? null },
             ]}
           />
           <ContactCard
             title="담당 변호사"
             fields={[
-              { label: '성명', value: org.lawyerName },
-              { label: '연락처', value: org.lawyerPhone },
-              { label: '이메일', value: org.lawyerEmail },
+              { label: '성명', value: org.lawyer?.name ?? null },
+              { label: '연락처', value: org.lawyer?.phone ?? null },
+              { label: '이메일', value: org.lawyer?.email ?? null },
               { label: '배정일', value: org.lawyerAssignedDate },
             ]}
           />

053356d

97f0489

frontend/src/components/Sidebar.test.tsx

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

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

...	...	@@ -10,6 +10,7 @@
10	10	'Dashboard',
11	11	'채널관리',
12	12	'기관관리',
	13	+ '담당자관리',
13	14	'사업관리',
14	15	'권리확인',
15	16	'권리처리',

053356d

97f0489

frontend/src/components/Sidebar.tsx

--- frontend/src/components/Sidebar.tsx

+++ frontend/src/components/Sidebar.tsx


     ),
   },
   {
+    key: 'contacts',
+    label: '담당자관리',
+    enabled: true,
+    icon: (
+      <svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M16 14a4 4 0 1 0-8 0M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0" />
+      </svg>
+    ),
+  },
+  {
     key: 'projects',
     label: '사업관리',
     enabled: false,

053356d

97f0489

frontend/src/components/WorkMemos.test.tsx

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

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


 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import WorkMemos from './WorkMemos'
-import type { Org, WorkMemo } from '../api/client'
+import type { Contact, Org, WorkMemo } from '../api/client'
 
 const mocks = vi.hoisted(() => ({
   getMemos: vi.fn(),

   deleteMemo: mocks.deleteMemo,
 }))
 
+function contact(overrides: Partial<Contact> = {}): Contact {
+  return {
+    id: 1,
+    category: 'APPLICANT',
+    name: '이름없음',
+    affiliation: null,
+    deptName: null,
+    title: null,
+    phone: null,
+    email: null,
+    ...overrides,
+  }
+}
+
 function org(overrides: Partial<Org> = {}): Org {
   return {
     id: 1,
     orgNo: '001',
     orgName: '국제방송교류재단',
     status: 'ACTIVE',
-    deptName: '데이터정보화팀',
-    managerName: '송민지',
-    managerTitle: '과장',
-    managerPhone: '02-3475-5434',
-    managerEmail: 'ming@arirang.com',
-    mjDeptName: null,
-    mjManagerName: null,
-    mjManagerPhone: null,
-    mjManagerEmail: null,
-    lawyerName: null,
-    lawyerPhone: null,
-    lawyerEmail: null,
+    applicant: contact({
+      id: 1,
+      category: 'APPLICANT',
+      name: '송민지',
+      affiliation: '국제방송교류재단',
+      deptName: '데이터정보화팀',
+      title: '과장',
+      phone: '02-3475-5434',
+      email: 'ming@arirang.com',
+    }),
+    mj: null,
+    lawyer: null,
     lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',

     render(
       <WorkMemos
         org={org({
-          mjManagerName: '김문정',
-          lawyerName: '이변호',
+          mj: contact({ id: 2, category: 'MJ', name: '김문정' }),
+          lawyer: contact({ id: 3, category: 'LAWYER', name: '이변호' }),
         })}
       />,
     )

053356d

97f0489

frontend/src/components/WorkMemos.tsx

--- frontend/src/components/WorkMemos.tsx

+++ frontend/src/components/WorkMemos.tsx


   return dateFormatter.format(new Date(createdAt))
 }
 
-function managerOptionLabel(org: Org): string | null {
-  if (!org.managerName) {
+function applicantOptionLabel(org: Org): string | null {
+  if (!org.applicant) {
     return null
   }
-  return org.managerTitle ? `${org.managerName} ${org.managerTitle}` : org.managerName
+  return org.applicant.title ? `${org.applicant.name} ${org.applicant.title}` : org.applicant.name
 }
 
-/** 신청기관 담당자, 문정원 담당자, 담당 변호사 중 이름이 채워진 사람만 후보로 낸다.
+/** 신청기관 담당자, 문정원 담당자, 담당 변호사 중 배정되어 있는 사람만 후보로 낸다.
  * 이름이 같은 사람이 중복 등록돼 있어도 셀렉트 옵션은 한 번만 보이도록 중복을 없앤다. */
 function contactOptions(org: Org): string[] {
-  const candidates = [managerOptionLabel(org), org.mjManagerName, org.lawyerName]
+  const candidates = [applicantOptionLabel(org), org.mj?.name ?? null, org.lawyer?.name ?? null]
   const seen = new Set<string>()
   const options: string[] = []
   for (const candidate of candidates) {

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,5 +1,6 @@
1	1	import { useCallback, useEffect, useState } from 'react'
2	2	import { ApiError, getOrgs, logout, type Org } from './api/client'
	3	+import ContactsPage from './components/ContactsPage'
3	4	import LoginPage from './components/LoginPage'
4	5	import OrgDetail from './components/OrgDetail'
5	6	import OrgList from './components/OrgList'
...	...	@@ -8,12 +9,14 @@
8	9	import Sidebar from './components/Sidebar'
9	10	import { useCollapsiblePanel } from './hooks/useCollapsiblePanel'
10	11
11		-// 화면 2개: 기관관리(시안 레이아웃의 기관 상세)와 채널관리(명부 시드 + 담당자 입력 + 채널 생성).
12		-type Page = 'orgs' \| 'channels'
	12	+// 화면 3개: 기관관리(시안 레이아웃의 기관 상세), 채널관리(명부 시드 + 담당자 배정 + 채널 생성),
	13	+// 담당자관리(담당자 3종 CRUD - 담당자 정보가 입력되는 유일한 화면).
	14	+type Page = 'orgs' \| 'channels' \| 'contacts'
13	15
14	16	const PAGE_TITLE: Record<Page, string> = {
15	17	orgs: '기관관리',
16	18	channels: '채널관리',
	19	+ contacts: '담당자관리',
17	20	}
18	21
19	22	// 'checking'이 필요하다. true로 시작하면 첫 렌더에서 getOrgs()가 아직 안 끝났는데도
...	...	@@ -97,7 +100,7 @@
97	100	collapsed={menuCollapsed}
98	101	onToggle={toggleMenu}
99	102	onSelect={(key) => {
100		- if (key === 'orgs' \|\| key === 'channels') {
	103	+ if (key === 'orgs' \|\| key === 'channels' \|\| key === 'contacts') {
101	104	setPage(key)
102	105	}
103	106	}}
...	...	@@ -119,25 +122,29 @@
119	122	</header>
120	123
121	124	<div className="flex min-h-0 flex-1">
122		- <div
123		- className={`flex shrink-0 flex-col border-r border-gray-200 transition-all duration-200 ${
124		- listCollapsed ? 'w-14' : 'w-80'
125		- }`}
126		- >
127		- <OrgList
128		- orgs={orgs}
129		- selectedId={selectedId}
130		- onSelect={setSelectedId}
131		- collapsed={listCollapsed}
132		- onToggle={toggleList}
133		- />
134		- {page === 'channels' && !listCollapsed && (
135		- <SeedUpload onUploaded={() => void reload()} />
136		- )}
137		- </div>
	125	+ {page !== 'contacts' && (
	126	+ <div
	127	+ className={`flex shrink-0 flex-col border-r border-gray-200 transition-all duration-200 ${
	128	+ listCollapsed ? 'w-14' : 'w-80'
	129	+ }`}
	130	+ >
	131	+ <OrgList
	132	+ orgs={orgs}
	133	+ selectedId={selectedId}
	134	+ onSelect={setSelectedId}
	135	+ collapsed={listCollapsed}
	136	+ onToggle={toggleList}
	137	+ />
	138	+ {page === 'channels' && !listCollapsed && (
	139	+ <SeedUpload onUploaded={() => void reload()} />
	140	+ )}
	141	+ </div>
	142	+ )}
138	143
139	144	<main className="min-w-0 flex-1 overflow-y-auto bg-gray-50/50">
140		- {selected ? (
	145	+ {page === 'contacts' ? (
	146	+ <ContactsPage />
	147	+ ) : selected ? (
141	148	page === 'channels' ? (
142	149	<OrgDetail org={selected} onChanged={() => void reload()} />
143	150	) : (

...	...	@@ -1,5 +1,5 @@
1	1	import { afterEach, describe, expect, it, vi } from 'vitest'
2		-import { ApiError, getOrgs, logout, provisionChannels, updateContact } from './client'
	2	+import { ApiError, getOrgs, logout, provisionChannels, updateAssignments } from './client'
3	3
4	4	afterEach(() => {
5	5	vi.unstubAllGlobals()
...	...	@@ -56,14 +56,33 @@
56	56	text: async () => 'bad request',
57	57	}))
58	58
59		- const promise = updateContact(1, {
60		- deptName: '', managerName: '', managerTitle: '', managerPhone: '', managerEmail: '',
61		- mjDeptName: '', mjManagerName: '', mjManagerPhone: '', mjManagerEmail: '',
62		- lawyerName: '', lawyerPhone: '', lawyerEmail: '', lawyerAssignedDate: '',
	59	+ const promise = updateAssignments(1, {
	60	+ applicantContactId: null,
	61	+ mjContactId: null,
	62	+ lawyerContactId: null,
	63	+ lawyerAssignedDate: null,
63	64	})
64	65
65	66	await expect(promise).rejects.toThrow()
66	67	await expect(promise).rejects.toBeInstanceOf(ApiError)
67	68	await expect(promise).rejects.toMatchObject({ status: 400 })
68	69	})
	70	+
	71	+ it('배정 변경은 CSRF 헤더를 붙여 PUT한다', async () => {
	72	+ document.cookie = 'XSRF-TOKEN=token-value'
	73	+ const fetchMock = vi.fn().mockResolvedValue({ ok: true, json: async () => ({}) })
	74	+ vi.stubGlobal('fetch', fetchMock)
	75	+
	76	+ await updateAssignments(7, {
	77	+ applicantContactId: 1,
	78	+ mjContactId: null,
	79	+ lawyerContactId: null,
	80	+ lawyerAssignedDate: null,
	81	+ })
	82	+
	83	+ const [url, init] = fetchMock.mock.calls[0]
	84	+ expect(url).toBe('/api/orgs/7/assignments')
	85	+ expect(init.method).toBe('PUT')
	86	+ expect(init.headers['X-XSRF-TOKEN']).toBe('token-value')
	87	+ })
69	88	})

...	...	@@ -18,18 +18,9 @@
18	18	orgNo: '001',
19	19	orgName: '국제방송교류재단',
20	20	status: 'ACTIVE',
21		- deptName: null,
22		- managerName: null,
23		- managerTitle: null,
24		- managerPhone: null,
25		- managerEmail: null,
26		- mjDeptName: null,
27		- mjManagerName: null,
28		- mjManagerPhone: null,
29		- mjManagerEmail: null,
30		- lawyerName: null,
31		- lawyerPhone: null,
32		- lawyerEmail: null,
	21	+ applicant: null,
	22	+ mj: null,
	23	+ lawyer: null,
33	24	lawyerAssignedDate: null,
34	25	channelIdMj: 'chan-mj',
35	26	channelIdLaw: 'chan-law',

...	...	@@ -24,18 +24,9 @@
24	24	orgNo: '001',
25	25	orgName: '국제방송교류재단',
26	26	status: 'ACTIVE',
27		- deptName: null,
28		- managerName: null,
29		- managerTitle: null,
30		- managerPhone: null,
31		- managerEmail: null,
32		- mjDeptName: null,
33		- mjManagerName: null,
34		- mjManagerPhone: null,
35		- mjManagerEmail: null,
36		- lawyerName: null,
37		- lawyerPhone: null,
38		- lawyerEmail: null,
	27	+ applicant: null,
	28	+ mj: null,
	29	+ lawyer: null,
39	30	lawyerAssignedDate: null,
40	31	channelIdMj: 'chan-mj',
41	32	channelIdLaw: 'chan-law',

...	...	@@ -1,18 +1,34 @@
1	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		-import type { Org } from '../api/client'
	4	+import type { Contact, Org } from '../api/client'
5	5
6	6	const mocks = vi.hoisted(() => ({
7		- updateContact: vi.fn(),
	7	+ updateAssignments: vi.fn(),
8	8	provisionChannels: vi.fn(),
	9	+ getContacts: vi.fn(),
9	10	}))
10	11
11	12	vi.mock('../api/client', async (importOriginal) => ({
12	13	...(await importOriginal<typeof import('../api/client')>()),
13		- updateContact: mocks.updateContact,
	14	+ updateAssignments: mocks.updateAssignments,
14	15	provisionChannels: mocks.provisionChannels,
	16	+ getContacts: mocks.getContacts,
15	17	}))
	18	+
	19	+function contact(overrides: Partial<Contact> = {}): Contact {
	20	+ return {
	21	+ id: 1,
	22	+ category: 'APPLICANT',
	23	+ name: '이름없음',
	24	+ affiliation: null,
	25	+ deptName: null,
	26	+ title: null,
	27	+ phone: null,
	28	+ email: null,
	29	+ ...overrides,
	30	+ }
	31	+}
16	32
17	33	function org(overrides: Partial<Org> = {}): Org {
18	34	return {
...	...	@@ -20,18 +36,9 @@
20	36	orgNo: '001',
21	37	orgName: '국제방송교류재단',
22	38	status: 'INFO_PENDING',
23		- deptName: null,
24		- managerName: null,
25		- managerTitle: null,
26		- managerPhone: null,
27		- managerEmail: null,
28		- mjDeptName: null,
29		- mjManagerName: null,
30		- mjManagerPhone: null,
31		- mjManagerEmail: null,
32		- lawyerName: null,
33		- lawyerPhone: null,
34		- lawyerEmail: null,
	39	+ applicant: null,
	40	+ mj: null,
	41	+ lawyer: null,
35	42	lawyerAssignedDate: null,
36	43	channelIdMj: null,
37	44	channelIdLaw: null,
...	...	@@ -40,8 +47,9 @@
40	47	}
41	48
42	49	beforeEach(() => {
43		- mocks.updateContact.mockReset()
	50	+ mocks.updateAssignments.mockReset()
44	51	mocks.provisionChannels.mockReset()
	52	+ mocks.getContacts.mockReset().mockResolvedValue([])
45	53	})
46	54
47	55	describe('OrgDetail', () => {
...	...	@@ -57,72 +65,115 @@
57	65	expect(screen.getByRole('button', { name: '채널 생성' })).toBeEnabled()
58	66	})
59	67
60		- it('담당자 정보를 저장하면 API를 호출한다', async () => {
61		- mocks.updateContact.mockResolvedValue(org({ status: 'READY' }))
	68	+ it('배정되지 않은 역할은 미지정으로 표시된다', () => {
	69	+ render(<OrgDetail org={org()} onChanged={() => {}} />)
	70	+
	71	+ expect(screen.getAllByText('미지정')).toHaveLength(3)
	72	+ })
	73	+
	74	+ it('배정된 담당자는 요약(이름·부서·연락처)으로 표시된다', () => {
	75	+ render(
	76	+ <OrgDetail
	77	+ org={org({
	78	+ applicant: contact({
	79	+ name: '송민지',
	80	+ deptName: '데이터정보화팀',
	81	+ phone: '02-3475-5434',
	82	+ }),
	83	+ })}
	84	+ onChanged={() => {}}
	85	+ />,
	86	+ )
	87	+
	88	+ expect(screen.getByText('송민지 · 데이터정보화팀 · 02-3475-5434')).toBeTruthy()
	89	+ })
	90	+
	91	+ it('선택 버튼을 누르면 담당자 선택 모달이 뜬다', async () => {
	92	+ mocks.getContacts.mockResolvedValue([contact({ id: 9, name: '송민지' })])
	93	+
	94	+ render(<OrgDetail org={org()} onChanged={() => {}} />)
	95	+
	96	+ fireEvent.click(screen.getByRole('button', { name: '신청기관 담당자 선택' }))
	97	+
	98	+ expect(screen.getByText('신청기관 담당자 선택')).toBeTruthy()
	99	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	100	+ expect(mocks.getContacts).toHaveBeenCalledWith('APPLICANT')
	101	+ })
	102	+
	103	+ it('모달에서 담당자를 고르면 updateAssignments가 그 담당자ID로 호출된다', async () => {
	104	+ mocks.getContacts.mockResolvedValue([contact({ id: 9, name: '송민지' })])
	105	+ mocks.updateAssignments.mockResolvedValue(org({ status: 'READY' }))
62	106	const onChanged = vi.fn()
63	107
64	108	render(<OrgDetail org={org()} onChanged={onChanged} />)
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' } })
70		- fireEvent.click(screen.getByRole('button', { name: '정보 저장' }))
	109	+
	110	+ fireEvent.click(screen.getByRole('button', { name: '신청기관 담당자 선택' }))
	111	+ await waitFor(() => expect(screen.getByText('송민지')).toBeTruthy())
	112	+ fireEvent.click(screen.getByRole('button', { name: '선택' }))
71	113
72	114	await waitFor(() => {
73		- expect(mocks.updateContact).toHaveBeenCalledWith(1, {
74		- deptName: '데이터정보화팀',
75		- managerName: '송민지',
76		- managerTitle: '과장',
77		- managerPhone: '02-3475-5434',
78		- managerEmail: 'ming@arirang.com',
79		- mjDeptName: '',
80		- mjManagerName: '',
81		- mjManagerPhone: '',
82		- mjManagerEmail: '',
83		- lawyerName: '',
84		- lawyerPhone: '',
85		- lawyerEmail: '',
86		- lawyerAssignedDate: '',
	115	+ expect(mocks.updateAssignments).toHaveBeenCalledWith(1, {
	116	+ applicantContactId: 9,
	117	+ mjContactId: null,
	118	+ lawyerContactId: null,
	119	+ lawyerAssignedDate: null,
87	120	})
88	121	expect(onChanged).toHaveBeenCalled()
89	122	})
90	123	})
91	124
92		- it('문정원 담당자와 담당 변호사 정보를 입력하면 한 번의 저장으로 함께 전송된다', async () => {
93		- mocks.updateContact.mockResolvedValue(org({ status: 'READY' }))
	125	+ it('해제 버튼을 누르면 해당 역할만 null로 배정을 해제한다', async () => {
	126	+ mocks.updateAssignments.mockResolvedValue(org())
94	127	const onChanged = vi.fn()
95	128
96		- render(<OrgDetail org={org()} onChanged={onChanged} />)
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' } })
	129	+ render(
	130	+ <OrgDetail
	131	+ org={org({
	132	+ status: 'READY',
	133	+ applicant: contact({ id: 5, name: '송민지' }),
	134	+ mj: contact({ id: 6, category: 'MJ', name: '김문정' }),
	135	+ })}
	136	+ onChanged={onChanged}
	137	+ />,
	138	+ )
109	139
110		- fireEvent.click(screen.getByRole('button', { name: '정보 저장' }))
	140	+ fireEvent.click(screen.getByRole('button', { name: '신청기관 담당자 해제' }))
111	141
112	142	await waitFor(() => {
113		- expect(mocks.updateContact).toHaveBeenCalledWith(1, {
114		- deptName: '데이터정보화팀',
115		- managerName: '송민지',
116		- managerTitle: '',
117		- managerPhone: '02-3475-5434',
118		- managerEmail: 'ming@arirang.com',
119		- mjDeptName: '문화체육관광부 저작권정책과',
120		- mjManagerName: '김문정',
121		- mjManagerPhone: '02-1234-5678',
122		- mjManagerEmail: 'mj@mcst.go.kr',
123		- lawyerName: '이변호',
124		- lawyerPhone: '02-9876-5432',
125		- lawyerEmail: 'lawyer@lawfirm.kr',
	143	+ expect(mocks.updateAssignments).toHaveBeenCalledWith(1, {
	144	+ applicantContactId: null,
	145	+ mjContactId: 6,
	146	+ lawyerContactId: null,
	147	+ lawyerAssignedDate: null,
	148	+ })
	149	+ expect(onChanged).toHaveBeenCalled()
	150	+ })
	151	+ })
	152	+
	153	+ it('배정이 없는 역할에는 해제 버튼이 없다', () => {
	154	+ render(<OrgDetail org={org()} onChanged={() => {}} />)
	155	+
	156	+ expect(screen.queryByRole('button', { name: '신청기관 담당자 해제' })).toBeNull()
	157	+ })
	158	+
	159	+ it('담당 변호사 배정일을 바꾸면 updateAssignments가 호출된다', async () => {
	160	+ mocks.updateAssignments.mockResolvedValue(org())
	161	+ const onChanged = vi.fn()
	162	+
	163	+ render(
	164	+ <OrgDetail
	165	+ org={org({ lawyer: contact({ id: 7, category: 'LAWYER', name: '이변호' }) })}
	166	+ onChanged={onChanged}
	167	+ />,
	168	+ )
	169	+
	170	+ fireEvent.change(screen.getByLabelText('배정일'), { target: { value: '2026-07-21' } })
	171	+
	172	+ await waitFor(() => {
	173	+ expect(mocks.updateAssignments).toHaveBeenCalledWith(1, {
	174	+ applicantContactId: null,
	175	+ mjContactId: null,
	176	+ lawyerContactId: 7,
126	177	lawyerAssignedDate: '2026-07-21',
127	178	})
128	179	expect(onChanged).toHaveBeenCalled()
...	...	@@ -229,30 +280,6 @@
229	280	})
230	281	})
231	282
232		- it('필수 항목이 비어있으면 정보 저장 버튼이 비활성화된다', () => {
233		- render(<OrgDetail org={org()} onChanged={() => {}} />)
234		-
235		- expect(screen.getByRole('button', { name: '정보 저장' })).toBeDisabled()
236		- })
237		-
238		- it('직급/직함이 비어있어도 나머지 필수 항목만 채우면 정보 저장 버튼이 활성화된다', () => {
239		- render(<OrgDetail org={org()} onChanged={() => {}} />)
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' } })
244		-
245		- expect(screen.getByRole('button', { name: '정보 저장' })).toBeEnabled()
246		- })
247		-
248		- it('문정원 담당자와 담당 변호사 항목을 채워도 신청기관 필수 항목이 비어있으면 저장 버튼은 비활성이다', () => {
249		- render(<OrgDetail org={org()} onChanged={() => {}} />)
250		- fireEvent.change(screen.getByLabelText('문정원 담당자 담당자명'), { target: { value: '김문정' } })
251		- fireEvent.change(screen.getByLabelText('담당 변호사 성명'), { target: { value: '이변호' } })
252		-
253		- expect(screen.getByRole('button', { name: '정보 저장' })).toBeDisabled()
254		- })
255		-
256	283	it('reload로 org 객체가 새로 만들어져도 같은 기관이면 결과가 지워지지 않는다', async () => {
257	284	mocks.provisionChannels.mockResolvedValue({
258	285	mj: 'CREATED',
...	...	@@ -280,7 +307,7 @@
280	307	expect(screen.getByText(/법률검토 채널 생성에 실패/)).toBeTruthy()
281	308	})
282	309
283		- it('다른 기관으로 전환하면 이전 결과와 입력값이 초기화된다', async () => {
	310	+ it('다른 기관으로 전환하면 이전 결과가 초기화된다', async () => {
284	311	mocks.provisionChannels.mockResolvedValue({
285	312	mj: 'CREATED',
286	313	law: 'FAILED',

...	...	@@ -1,175 +1,126 @@
1	1	import { useEffect, useState } from 'react'
2	2	import {
3	3	provisionChannels,
4		- updateContact,
	4	+ updateAssignments,
	5	+ type AssignmentInput,
5	6	type Contact,
	7	+ type ContactCategory,
6	8	type Org,
7	9	type ProvisionResult,
8	10	} from '../api/client'
9	11	import ConfirmDialog from './ConfirmDialog'
	12	+import ContactPickerModal from './ContactPickerModal'
10	13	import StatusBadge from './StatusBadge'
11	14
12		-// 엑셀처럼 한 사람이 한 행이다. 셀이 null이면 그 역할에 해당 항목이 없다는 뜻(- 표시).
13		-// aria-label은 "행 제목 + 항목"으로 유일하게 만들어 라벨 중복 없이 접근 가능하게 한다.
14		-const CONTACT_COLUMNS = ['부서명', '담당자명', '직급/직함', '연락처', '이메일', '배정일']
	15	+// 채널관리 상세. 담당자 정보는 여기서 입력하지 않는다(담당자관리에서만 입력) - 이 화면은
	16	+// 이미 등록된 담당자를 ContactPickerModal로 골라 신청기관/문정원/변호사 역할에 배정만 한다.
15	17
16		-interface ContactCell {
17		- key: keyof Contact
	18	+interface RoleConfig {
	19	+ key: 'applicant' \| 'mj' \| 'lawyer'
	20	+ category: ContactCategory
18	21	label: string
19		- type?: string
	22	+ pickerTitle: string
	23	+ field: keyof AssignmentInput
20	24	}
21	25
22		-const CONTACT_ROWS: { title: string; cells: (ContactCell \| null)[] }[] = [
	26	+const ROLES: RoleConfig[] = [
23	27	{
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		- ],
	28	+ key: 'applicant',
	29	+ category: 'APPLICANT',
	30	+ label: '신청기관 담당자',
	31	+ pickerTitle: '신청기관 담당자 선택',
	32	+ field: 'applicantContactId',
33	33	},
34	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		- ],
	35	+ key: 'mj',
	36	+ category: 'MJ',
	37	+ label: '문정원 담당자',
	38	+ pickerTitle: '문정원 담당자 선택',
	39	+ field: 'mjContactId',
44	40	},
45	41	{
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		- ],
	42	+ key: 'lawyer',
	43	+ category: 'LAWYER',
	44	+ label: '담당 변호사',
	45	+ pickerTitle: '담당 변호사 선택',
	46	+ field: 'lawyerContactId',
55	47	},
56	48	]
57	49
58		-function emptyContact(org: Org): Contact {
59		- return {
60		- deptName: org.deptName ?? '',
61		- managerName: org.managerName ?? '',
62		- managerTitle: org.managerTitle ?? '',
63		- managerPhone: org.managerPhone ?? '',
64		- managerEmail: org.managerEmail ?? '',
65		- mjDeptName: org.mjDeptName ?? '',
66		- mjManagerName: org.mjManagerName ?? '',
67		- mjManagerPhone: org.mjManagerPhone ?? '',
68		- mjManagerEmail: org.mjManagerEmail ?? '',
69		- lawyerName: org.lawyerName ?? '',
70		- lawyerPhone: org.lawyerPhone ?? '',
71		- lawyerEmail: org.lawyerEmail ?? '',
72		- lawyerAssignedDate: org.lawyerAssignedDate ?? '',
	50	+function contactOf(org: Org, role: RoleConfig): Contact \| null {
	51	+ switch (role.key) {
	52	+ case 'applicant':
	53	+ return org.applicant
	54	+ case 'mj':
	55	+ return org.mj
	56	+ case 'lawyer':
	57	+ return org.lawyer
73	58	}
74	59	}
75	60
76		-const REQUIRED_FIELDS: (keyof Contact)[] = [
77		- 'deptName',
78		- 'managerName',
79		- 'managerPhone',
80		- 'managerEmail',
81		-]
82		-
83		-function ContactEditTable({
84		- contact,
85		- onChange,
86		-}: {
87		- contact: Contact
88		- onChange: (key: keyof Contact, value: string) => void
89		-}) {
90		- return (
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>
131		- </div>
132		- )
	61	+/** 배정된 담당자의 한 줄 요약: 이름 · 부서(또는 소속) · 연락처. 값이 없는 항목은 건너뛴다. */
	62	+function contactSummary(contact: Contact): string {
	63	+ const parts = [contact.name, contact.deptName ?? contact.affiliation ?? null, contact.phone]
	64	+ return parts.filter((p): p is string => Boolean(p)).join(' · ')
133	65	}
134	66
135	67	export default function OrgDetail({ org, onChanged }: { org: Org; onChanged: () => void }) {
136		- const [contact, setContact] = useState<Contact>(emptyContact(org))
137	68	const [confirming, setConfirming] = useState(false)
138	69	const [result, setResult] = useState<ProvisionResult \| null>(null)
139	70	const [error, setError] = useState<string \| null>(null)
140	71	const [busy, setBusy] = useState(false)
	72	+ const [pickerRole, setPickerRole] = useState<RoleConfig \| null>(null)
	73	+ const [lawyerDate, setLawyerDate] = useState(org.lawyerAssignedDate ?? '')
141	74
142		- // org.id로만 키를 잡는다(org 객체 전체가 아니라) - App.reload()가 채널 생성 뒤에
	75	+ // org.id로만 키를 잡는다(org 객체 전체가 아니라) - App.reload()가 채널 생성/배정 뒤에
143	76	// 새 배열/새 객체를 만들어 넘기더라도, 같은 기관을 계속 보고 있는 한 방금 받은
144		- // result/error를 이 effect가 지워버리면 안 되기 때문이다(같은 이유로 입력 중이던
145		- // contact 값도 다른 기관으로 전환할 때만 초기화한다).
	77	+ // result/error를 이 effect가 지워버리면 안 되기 때문이다.
146	78	useEffect(() => {
147		- setContact(emptyContact(org))
148	79	setResult(null)
149	80	setError(null)
	81	+ setLawyerDate(org.lawyerAssignedDate ?? '')
150	82	// eslint-disable-next-line react-hooks/exhaustive-deps
151	83	}, [org.id])
152	84
153	85	const displayMj = `${org.orgNo}_${org.orgName} (문정원)`
154	86	const displayLaw = `${org.orgNo}_${org.orgName} (법률검토)`
155	87	const canProvision = org.status !== 'INFO_PENDING'
156		- const requiredFilled = REQUIRED_FIELDS.every((key) => contact[key].trim() !== '')
157	88
158		- function setField(key: keyof Contact, value: string) {
159		- setContact((prev) => ({ ...prev, [key]: value }))
	89	+ function currentAssignment(): AssignmentInput {
	90	+ return {
	91	+ applicantContactId: org.applicant?.id ?? null,
	92	+ mjContactId: org.mj?.id ?? null,
	93	+ lawyerContactId: org.lawyer?.id ?? null,
	94	+ lawyerAssignedDate: org.lawyerAssignedDate ?? null,
	95	+ }
160	96	}
161	97
162		- async function save() {
	98	+ /** 매 호출이 세 배정값 + 배정일을 통째로 다시 보낸다(부분 갱신이 아니다). */
	99	+ async function persistAssignments(overrides: Partial<AssignmentInput>) {
163	100	setError(null)
164	101	setBusy(true)
165	102	try {
166		- await updateContact(org.id, contact)
	103	+ await updateAssignments(org.id, { ...currentAssignment(), ...overrides })
167	104	onChanged()
168	105	} catch (e) {
169		- setError((e as Error).message)
	106	+ setError(e instanceof Error ? e.message : '저장에 실패했습니다.')
170	107	} finally {
171	108	setBusy(false)
172	109	}
	110	+ }
	111	+
	112	+ async function handleSelect(role: RoleConfig, contact: Contact) {
	113	+ setPickerRole(null)
	114	+ await persistAssignments({ [role.field]: contact.id })
	115	+ }
	116	+
	117	+ async function handleClear(role: RoleConfig) {
	118	+ await persistAssignments({ [role.field]: null })
	119	+ }
	120	+
	121	+ async function handleLawyerDateChange(value: string) {
	122	+ setLawyerDate(value)
	123	+ await persistAssignments({ lawyerAssignedDate: value === '' ? null : value })
173	124	}
174	125
175	126	async function provision() {
...	...	@@ -196,22 +147,67 @@
196	147	<StatusBadge status={org.status} />
197	148	</div>
198	149
199		- <section className="mt-6">
200		- <ContactEditTable contact={contact} onChange={setField} />
201		- <p className="mt-2 text-xs text-gray-400">
202		- 신청기관 담당자의 부서명·담당자명·연락처·이메일은 채널 생성을 위해 필수입니다.
203		- </p>
	150	+ <section className="mt-6 space-y-3">
	151	+ {ROLES.map((role) => {
	152	+ const contact = contactOf(org, role)
	153	+ return (
	154	+ <div
	155	+ key={role.key}
	156	+ className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-gray-200 bg-white p-4"
	157	+ >
	158	+ <div className="flex flex-col gap-1">
	159	+ <span className="text-xs text-gray-500">{role.label}</span>
	160	+ {contact ? (
	161	+ <span className="text-sm font-medium text-gray-900">{contactSummary(contact)}</span>
	162	+ ) : (
	163	+ <span className="text-sm text-gray-300">미지정</span>
	164	+ )}
	165	+ </div>
	166	+
	167	+ <div className="flex items-end gap-2">
	168	+ {role.key === 'lawyer' && (
	169	+ <div className="flex flex-col gap-1">
	170	+ <label htmlFor="lawyer-assigned-date" className="text-xs text-gray-500">
	171	+ 배정일
	172	+ </label>
	173	+ <input
	174	+ id="lawyer-assigned-date"
	175	+ type="date"
	176	+ disabled={busy}
	177	+ value={lawyerDate}
	178	+ onChange={(e) => void handleLawyerDateChange(e.target.value)}
	179	+ className="rounded-md border border-gray-300 px-2 py-1 text-sm"
	180	+ />
	181	+ </div>
	182	+ )}
	183	+ <button
	184	+ type="button"
	185	+ disabled={busy}
	186	+ aria-label={`${role.label} 선택`}
	187	+ onClick={() => setPickerRole(role)}
	188	+ className="rounded-md border border-gray-300 px-3 py-1.5 text-sm disabled:opacity-50"
	189	+ >
	190	+ 선택
	191	+ </button>
	192	+ {contact && (
	193	+ <button
	194	+ type="button"
	195	+ disabled={busy}
	196	+ aria-label={`${role.label} 해제`}
	197	+ onClick={() => void handleClear(role)}
	198	+ className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-500 disabled:opacity-50"
	199	+ >
	200	+ 해제
	201	+ </button>
	202	+ )}
	203	+ </div>
	204	+ </div>
	205	+ )
	206	+ })}
	207	+ <p className="text-xs text-gray-400">신청기관 담당자를 지정해야 채널을 만들 수 있습니다.</p>
204	208	</section>
205	209
206	210	<div className="mt-5 flex gap-2">
207		- <button
208		- type="button"
209		- disabled={busy \|\| !requiredFilled}
210		- onClick={() => void save()}
211		- className="rounded-md border border-gray-300 px-3 py-1.5 text-sm disabled:opacity-50"
212		- >
213		- 정보 저장
214		- </button>
215	211	<button
216	212	type="button"
217	213	disabled={busy \|\| !canProvision}
...	...	@@ -265,6 +261,15 @@
265	261	onCancel={() => setConfirming(false)}
266	262	/>
267	263	)}
	264	+
	265	+ {pickerRole && (
	266	+ <ContactPickerModal
	267	+ category={pickerRole.category}
	268	+ title={pickerRole.pickerTitle}
	269	+ onSelect={(contact) => void handleSelect(pickerRole, contact)}
	270	+ onClose={() => setPickerRole(null)}
	271	+ />
	272	+ )}
268	273	</div>
269	274	)
270	275	}

...	...	@@ -6,18 +6,12 @@
6	6	const orgs: Org[] = [
7	7	{
8	8	id: 1, orgNo: '001', orgName: '국제방송교류재단', status: 'ACTIVE',
9		- deptName: null, managerName: null, managerTitle: null,
10		- managerPhone: null, managerEmail: null,
11		- mjDeptName: null, mjManagerName: null, mjManagerPhone: null, mjManagerEmail: null,
12		- lawyerName: null, lawyerPhone: null, lawyerEmail: null, lawyerAssignedDate: null,
	9	+ applicant: null, mj: null, lawyer: null, lawyerAssignedDate: null,
13	10	channelIdMj: 'a', channelIdLaw: 'b',
14	11	},
15	12	{
16	13	id: 2, orgNo: '008', orgName: '경찰청_치안정책연구소', status: 'INFO_PENDING',
17		- deptName: null, managerName: null, managerTitle: null,
18		- managerPhone: null, managerEmail: null,
19		- mjDeptName: null, mjManagerName: null, mjManagerPhone: null, mjManagerEmail: null,
20		- lawyerName: null, lawyerPhone: null, lawyerEmail: null, lawyerAssignedDate: null,
	14	+ applicant: null, mj: null, lawyer: null, lawyerAssignedDate: null,
21	15	channelIdMj: null, channelIdLaw: null,
22	16	},
23	17	]

...	...	@@ -1,7 +1,7 @@
1	1	import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
2	2	import { beforeEach, describe, expect, it, vi } from 'vitest'
3	3	import OrgOverview from './OrgOverview'
4		-import type { Org } from '../api/client'
	4	+import type { Contact, Org } from '../api/client'
5	5
6	6	const mocks = vi.hoisted(() => ({
7	7	getPosts: vi.fn(),
...	...	@@ -16,24 +16,38 @@
16	16	getMemos: mocks.getMemos,
17	17	}))
18	18
	19	+function contact(overrides: Partial<Contact> = {}): Contact {
	20	+ return {
	21	+ id: 1,
	22	+ category: 'APPLICANT',
	23	+ name: '이름없음',
	24	+ affiliation: null,
	25	+ deptName: null,
	26	+ title: null,
	27	+ phone: null,
	28	+ email: null,
	29	+ ...overrides,
	30	+ }
	31	+}
	32	+
19	33	function org(overrides: Partial<Org> = {}): Org {
20	34	return {
21	35	id: 1,
22	36	orgNo: '001',
23	37	orgName: '국제방송교류재단',
24	38	status: 'ACTIVE',
25		- deptName: '데이터정보화팀',
26		- managerName: '송민지',
27		- managerTitle: '과장',
28		- managerPhone: '02-3475-5434',
29		- managerEmail: 'ming@arirang.com',
30		- mjDeptName: null,
31		- mjManagerName: null,
32		- mjManagerPhone: null,
33		- mjManagerEmail: null,
34		- lawyerName: null,
35		- lawyerPhone: null,
36		- lawyerEmail: null,
	39	+ applicant: contact({
	40	+ id: 1,
	41	+ category: 'APPLICANT',
	42	+ name: '송민지',
	43	+ affiliation: '국제방송교류재단',
	44	+ deptName: '데이터정보화팀',
	45	+ title: '과장',
	46	+ phone: '02-3475-5434',
	47	+ email: 'ming@arirang.com',
	48	+ }),
	49	+ mj: null,
	50	+ lawyer: null,
37	51	lawyerAssignedDate: null,
38	52	channelIdMj: 'chan-mj',
39	53	channelIdLaw: 'chan-law',
...	...	@@ -74,13 +88,21 @@
74	88	render(
75	89	<OrgOverview
76	90	org={org({
77		- mjDeptName: '문화체육관광부 저작권정책과',
78		- mjManagerName: '김문정',
79		- mjManagerPhone: '02-1234-5678',
80		- mjManagerEmail: 'mj@mcst.go.kr',
81		- lawyerName: '이변호',
82		- lawyerPhone: '02-9876-5432',
83		- lawyerEmail: 'lawyer@lawfirm.kr',
	91	+ mj: contact({
	92	+ id: 2,
	93	+ category: 'MJ',
	94	+ name: '김문정',
	95	+ deptName: '문화체육관광부 저작권정책과',
	96	+ phone: '02-1234-5678',
	97	+ email: 'mj@mcst.go.kr',
	98	+ }),
	99	+ lawyer: contact({
	100	+ id: 3,
	101	+ category: 'LAWYER',
	102	+ name: '이변호',
	103	+ phone: '02-9876-5432',
	104	+ email: 'lawyer@lawfirm.kr',
	105	+ }),
84	106	lawyerAssignedDate: '2026-07-21',
85	107	})}
86	108	/>,

...	...	@@ -120,39 +120,40 @@
120	120	</div>
121	121	</div>
122	122
123		- {/* 담당자 카드 3개 (신청기관/문정원/변호사) */}
	123	+ {/* 담당자 카드 3개 (신청기관/문정원/변호사) - 담당자 정보는 담당자관리에서만 입력하고,
	124	+ 여기서는 org.applicant/mj/lawyer로 배정된 담당자를 읽기 전용으로 보여준다. */}
124	125	<div className="mt-5 grid grid-cols-1 gap-3 lg:grid-cols-3">
125	126	<ContactCard
126	127	title="신청기관 담당자"
127	128	fields={[
128		- { label: '부서', value: org.deptName },
	129	+ { label: '부서', value: org.applicant?.deptName ?? null },
129	130	{
130	131	label: '담당자',
131		- value: org.managerName
132		- ? org.managerTitle
133		- ? `${org.managerName} ${org.managerTitle}`
134		- : org.managerName
	132	+ value: org.applicant
	133	+ ? org.applicant.title
	134	+ ? `${org.applicant.name} ${org.applicant.title}`
	135	+ : org.applicant.name
135	136	: null,
136	137	},
137		- { label: '연락처', value: org.managerPhone },
138		- { label: '이메일', value: org.managerEmail },
	138	+ { label: '연락처', value: org.applicant?.phone ?? null },
	139	+ { label: '이메일', value: org.applicant?.email ?? null },
139	140	]}
140	141	/>
141	142	<ContactCard
142	143	title="문정원 담당자"
143	144	fields={[
144		- { label: '부서', value: org.mjDeptName },
145		- { label: '담당자', value: org.mjManagerName },
146		- { label: '연락처', value: org.mjManagerPhone },
147		- { label: '이메일', value: org.mjManagerEmail },
	145	+ { label: '부서', value: org.mj?.deptName ?? null },
	146	+ { label: '담당자', value: org.mj?.name ?? null },
	147	+ { label: '연락처', value: org.mj?.phone ?? null },
	148	+ { label: '이메일', value: org.mj?.email ?? null },
148	149	]}
149	150	/>
150	151	<ContactCard
151	152	title="담당 변호사"
152	153	fields={[
153		- { label: '성명', value: org.lawyerName },
154		- { label: '연락처', value: org.lawyerPhone },
155		- { label: '이메일', value: org.lawyerEmail },
	154	+ { label: '성명', value: org.lawyer?.name ?? null },
	155	+ { label: '연락처', value: org.lawyer?.phone ?? null },
	156	+ { label: '이메일', value: org.lawyer?.email ?? null },
156	157	{ label: '배정일', value: org.lawyerAssignedDate },
157	158	]}
158	159	/>

...	...	@@ -15,17 +15,17 @@
15	15	return dateFormatter.format(new Date(createdAt))
16	16	}
17	17
18		-function managerOptionLabel(org: Org): string \| null {
19		- if (!org.managerName) {
	18	+function applicantOptionLabel(org: Org): string \| null {
	19	+ if (!org.applicant) {
20	20	return null
21	21	}
22		- return org.managerTitle ? `${org.managerName} ${org.managerTitle}` : org.managerName
	22	+ return org.applicant.title ? `${org.applicant.name} ${org.applicant.title}` : org.applicant.name
23	23	}
24	24
25		-/** 신청기관 담당자, 문정원 담당자, 담당 변호사 중 이름이 채워진 사람만 후보로 낸다.
	25	+/** 신청기관 담당자, 문정원 담당자, 담당 변호사 중 배정되어 있는 사람만 후보로 낸다.
26	26	* 이름이 같은 사람이 중복 등록돼 있어도 셀렉트 옵션은 한 번만 보이도록 중복을 없앤다. */
27	27	function contactOptions(org: Org): string[] {
28		- const candidates = [managerOptionLabel(org), org.mjManagerName, org.lawyerName]
	28	+ const candidates = [applicantOptionLabel(org), org.mj?.name ?? null, org.lawyer?.name ?? null]
29	29	const seen = new Set<string>()
30	30	const options: string[] = []
31	31	for (const candidate of candidates) {

Delete comment