Commit @08e8209ac213d6d7f775fa37f56b68fbca92bf79

ITN Dev 07-23

feat: 채널관리에 문정원·변호사 연락처 입력, 기관관리에 담당자 3종 표 추가

백엔드에 추가된 문정원 담당자·담당 변호사 필드를 화면에 반영한다.

- 사이드바 "채널생성"을 "채널관리"로 이름을 바꾸고 기관관리 위로 이동
- 채널관리(OrgDetail) 담당자 입력을 신청기관/문정원/변호사 3열 그리드로 확장,
  저장 버튼 하나로 세 그룹을 함께 저장 (필수값 규칙은 신청기관 담당자만 그대로 유지)
- 기관관리(OrgOverview) 카드 3개(신청기관 카드 + 추후연동 2개)를 담당자 3종
  가로 표 하나로 교체
- 업무메모 담당자 선택에 신청기관/문정원/변호사 중 이름이 채워진 사람을
  모두 옵션으로 제공 (중복 제거, 기존 직접입력 유지)
- 관련 컴포넌트 테스트와 org() 픽스처에 신규 필드 반영, 신규 동작 테스트 추가

@08e8209ac213d6d7f775fa37f56b68fbca92bf79

435af9e

08e8209

frontend/src/App.tsx

--- frontend/src/App.tsx

+++ frontend/src/App.tsx

...	...	@@ -8,12 +8,12 @@
8	8	import Sidebar from './components/Sidebar'
9	9	import { useCollapsiblePanel } from './hooks/useCollapsiblePanel'
10	10
11		-// 화면 2개: 기관관리(시안 레이아웃의 기관 상세)와 채널생성(명부 시드 + 담당자 입력 + 채널 생성).
	11	+// 화면 2개: 기관관리(시안 레이아웃의 기관 상세)와 채널관리(명부 시드 + 담당자 입력 + 채널 생성).
12	12	type Page = 'orgs' \| 'channels'
13	13
14	14	const PAGE_TITLE: Record<Page, string> = {
15	15	orgs: '기관관리',
16		- channels: '채널생성',
	16	+ channels: '채널관리',
17	17	}
18	18
19	19	// 'checking'이 필요하다. true로 시작하면 첫 렌더에서 getOrgs()가 아직 안 끝났는데도

435af9e

08e8209

frontend/src/api/client.test.ts

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

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


 
     const promise = updateContact(1, {
       deptName: '', managerName: '', managerTitle: '', managerPhone: '', managerEmail: '',
+      mjDeptName: '', mjManagerName: '', mjManagerPhone: '', mjManagerEmail: '',
+      lawyerName: '', lawyerPhone: '', lawyerEmail: '', lawyerAssignedDate: '',
     })
 
     await expect(promise).rejects.toThrow()

435af9e

08e8209

frontend/src/api/client.ts

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

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


   managerTitle: string | null
   managerPhone: string | null
   managerEmail: string | null
+  mjDeptName: string | null
+  mjManagerName: string | null
+  mjManagerPhone: string | null
+  mjManagerEmail: string | null
+  lawyerName: string | null
+  lawyerPhone: string | null
+  lawyerEmail: string | null
+  lawyerAssignedDate: string | null
   channelIdMj: string | null
   channelIdLaw: string | null
 }

   managerTitle: string
   managerPhone: string
   managerEmail: string
+  mjDeptName: string
+  mjManagerName: string
+  mjManagerPhone: string
+  mjManagerEmail: string
+  lawyerName: string
+  lawyerPhone: string
+  lawyerEmail: string
+  lawyerAssignedDate: string
 }
 
 export type ProvisionOutcome = 'CACHED' | 'RECOVERED' | 'CREATED' | 'FAILED'

435af9e

08e8209

frontend/src/components/ChannelFiles.test.tsx

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

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


     managerTitle: null,
     managerPhone: null,
     managerEmail: null,
+    mjDeptName: null,
+    mjManagerName: null,
+    mjManagerPhone: null,
+    mjManagerEmail: null,
+    lawyerName: null,
+    lawyerPhone: null,
+    lawyerEmail: null,
+    lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',
     ...overrides,

435af9e

08e8209

frontend/src/components/ChannelPosts.test.tsx

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

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


     managerTitle: null,
     managerPhone: null,
     managerEmail: null,
+    mjDeptName: null,
+    mjManagerName: null,
+    mjManagerPhone: null,
+    mjManagerEmail: null,
+    lawyerName: null,
+    lawyerPhone: null,
+    lawyerEmail: null,
+    lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',
     ...overrides,

435af9e

08e8209

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 { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import OrgDetail from './OrgDetail'
 import type { Org } from '../api/client'

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

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

         managerTitle: '과장',
         managerPhone: '02-3475-5434',
         managerEmail: 'ming@arirang.com',
+        mjDeptName: '',
+        mjManagerName: '',
+        mjManagerPhone: '',
+        mjManagerEmail: '',
+        lawyerName: '',
+        lawyerPhone: '',
+        lawyerEmail: '',
+        lawyerAssignedDate: '',
+      })
+      expect(onChanged).toHaveBeenCalled()
+    })
+  })
+
+  it('문정원 담당자와 담당 변호사 정보를 입력하면 한 번의 저장으로 함께 전송된다', async () => {
+    mocks.updateContact.mockResolvedValue(org({ status: 'READY' }))
+    const onChanged = vi.fn()
+
+    render(<OrgDetail org={org()} onChanged={onChanged} />)
+
+    const applicant = group('신청기관 담당자')
+    fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
+    fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
+    fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
+    fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
+
+    const mj = group('문정원 담당자')
+    fireEvent.change(mj.getByLabelText('부서명'), { target: { value: '문화체육관광부 저작권정책과' } })
+    fireEvent.change(mj.getByLabelText('담당자명'), { target: { value: '김문정' } })
+    fireEvent.change(mj.getByLabelText('연락처'), { target: { value: '02-1234-5678' } })
+    fireEvent.change(mj.getByLabelText('이메일'), { target: { value: 'mj@mcst.go.kr' } })
+
+    const lawyer = group('담당 변호사')
+    fireEvent.change(lawyer.getByLabelText('성명'), { target: { value: '이변호' } })
+    fireEvent.change(lawyer.getByLabelText('연락처'), { target: { value: '02-9876-5432' } })
+    fireEvent.change(lawyer.getByLabelText('이메일'), { target: { value: 'lawyer@lawfirm.kr' } })
+    fireEvent.change(lawyer.getByLabelText('배정일'), { target: { value: '2026-07-21' } })
+
+    fireEvent.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',
+        lawyerAssignedDate: '2026-07-21',
       })
       expect(onChanged).toHaveBeenCalled()
     })

   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' } })
+    const applicant = group('신청기관 담당자')
+    fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
+    fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
+    fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
+    fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
 
     expect(screen.getByRole('button', { name: '정보 저장' })).toBeEnabled()
   })
 
+  it('문정원 담당자와 담당 변호사 항목을 채워도 신청기관 필수 항목이 비어있으면 저장 버튼은 비활성이다', () => {
+    render(<OrgDetail org={org()} onChanged={() => {}} />)
+
+    const mj = group('문정원 담당자')
+    fireEvent.change(mj.getByLabelText('담당자명'), { target: { value: '김문정' } })
+
+    const lawyer = group('담당 변호사')
+    fireEvent.change(lawyer.getByLabelText('성명'), { target: { value: '이변호' } })
+
+    expect(screen.getByRole('button', { name: '정보 저장' })).toBeDisabled()
+  })
+
   it('reload로 org 객체가 새로 만들어져도 같은 기관이면 결과가 지워지지 않는다', async () => {
     mocks.provisionChannels.mockResolvedValue({
       mj: 'CREATED',

435af9e

08e8209

frontend/src/components/OrgDetail.tsx

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

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


 import ConfirmDialog from './ConfirmDialog'
 import StatusBadge from './StatusBadge'
 
-const FIELDS: { key: keyof Contact; label: string }[] = [
+const APPLICANT_FIELDS: { key: keyof Contact; label: string }[] = [
   { key: 'deptName', label: '부서명' },
   { key: 'managerName', label: '담당자명' },
   { key: 'managerTitle', label: '직급/직함' },
   { key: 'managerPhone', label: '연락처' },
   { key: 'managerEmail', label: '이메일' },
+]
+
+const MJ_FIELDS: { key: keyof Contact; label: string; type?: string }[] = [
+  { key: 'mjDeptName', label: '부서명' },
+  { key: 'mjManagerName', label: '담당자명' },
+  { key: 'mjManagerPhone', label: '연락처' },
+  { key: 'mjManagerEmail', label: '이메일' },
+]
+
+const LAWYER_FIELDS: { key: keyof Contact; label: string; type?: string }[] = [
+  { key: 'lawyerName', label: '성명' },
+  { key: 'lawyerPhone', label: '연락처' },
+  { key: 'lawyerEmail', label: '이메일' },
+  { key: 'lawyerAssignedDate', label: '배정일', type: 'date' },
 ]
 
 function emptyContact(org: Org): Contact {

     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 ?? '',
   }
 }
 

   'managerPhone',
   'managerEmail',
 ]
+
+function ContactFieldGroup({
+  title,
+  fields,
+  contact,
+  onChange,
+}: {
+  title: string
+  fields: { key: keyof Contact; label: string; type?: string }[]
+  contact: Contact
+  onChange: (key: keyof Contact, value: string) => void
+}) {
+  return (
+    <div className="rounded-lg border border-gray-200 p-4">
+      <h3 className="text-sm font-medium text-gray-700">{title}</h3>
+      <div className="mt-3 space-y-3">
+        {fields.map((field) => (
+          <div key={field.key} className="flex items-center gap-3">
+            <label htmlFor={field.key} className="w-20 shrink-0 text-sm text-gray-500">
+              {field.label}
+            </label>
+            <input
+              id={field.key}
+              type={field.type ?? 'text'}
+              className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm"
+              value={contact[field.key]}
+              onChange={(e) => onChange(field.key, e.target.value)}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
 
 export default function OrgDetail({ org, onChanged }: { org: Org; onChanged: () => void }) {
   const [contact, setContact] = useState<Contact>(emptyContact(org))

   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 }))
+  }
 
   async function save() {
     setError(null)

         <StatusBadge status={org.status} />
       </div>
 
-      <section className="mt-6 max-w-xl rounded-lg border border-gray-200 p-5">
-        <h2 className="text-sm font-medium">신청기관 담당자</h2>
-
-        <div className="mt-4 space-y-3">
-          {FIELDS.map((field) => (
-            <div key={field.key} className="flex items-center gap-3">
-              <label htmlFor={field.key} className="w-20 shrink-0 text-sm text-gray-500">
-                {field.label}
-              </label>
-              <input
-                id={field.key}
-                className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm"
-                value={contact[field.key]}
-                onChange={(e) => setContact({ ...contact, [field.key]: e.target.value })}
-              />
-            </div>
-          ))}
-        </div>
-
-        <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}
-            onClick={() => setConfirming(true)}
-            className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white disabled:bg-gray-300"
-          >
-            채널 생성
-          </button>
-        </div>
+      <section className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <ContactFieldGroup
+          title="신청기관 담당자"
+          fields={APPLICANT_FIELDS}
+          contact={contact}
+          onChange={setField}
+        />
+        <ContactFieldGroup
+          title="문정원 담당자"
+          fields={MJ_FIELDS}
+          contact={contact}
+          onChange={setField}
+        />
+        <ContactFieldGroup
+          title="담당 변호사"
+          fields={LAWYER_FIELDS}
+          contact={contact}
+          onChange={setField}
+        />
       </section>
 
+      <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}
+          onClick={() => setConfirming(true)}
+          className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white disabled:bg-gray-300"
+        >
+          채널 생성
+        </button>
+      </div>
+
       {error && <p className="mt-4 text-sm text-red-600">{error}</p>}
 
       {result && (

435af9e

08e8209

frontend/src/components/OrgList.test.tsx

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

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


     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,
     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,
     channelIdMj: null, channelIdLaw: null,
   },
 ]

435af9e

08e8209

frontend/src/components/OrgOverview.test.tsx

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

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


-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+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'

     managerTitle: '과장',
     managerPhone: '02-3475-5434',
     managerEmail: 'ming@arirang.com',
+    mjDeptName: null,
+    mjManagerName: null,
+    mjManagerPhone: null,
+    mjManagerEmail: null,
+    lawyerName: null,
+    lawyerPhone: null,
+    lawyerEmail: null,
+    lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',
     ...overrides,

     await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
   })
 
-  it('아직 연동 전인 문정원 담당자와 담당 변호사 카드는 자리만 보여준다', async () => {
+  it('문정원 담당자와 담당 변호사 정보가 비어 있으면 표에 -로 표시된다', async () => {
     render(<OrgOverview org={org()} />)
 
-    expect(screen.getByText('문정원 담당자')).toBeTruthy()
-    expect(screen.getByText('담당 변호사')).toBeTruthy()
-    expect(screen.getAllByText('추후 연동')).toHaveLength(2)
+    const rows = screen.getAllByRole('row')
+    const mjRow = rows.find((row) => row.textContent?.includes('문정원 담당자'))
+    const lawyerRow = rows.find((row) => row.textContent?.includes('담당 변호사'))
+
+    expect(mjRow).toBeTruthy()
+    expect(lawyerRow).toBeTruthy()
+    expect(within(mjRow as HTMLElement).getAllByText('-')).toHaveLength(5)
+    expect(within(lawyerRow as HTMLElement).getAllByText('-')).toHaveLength(5)
+    await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
+  })
+
+  it('담당자 3종이 값을 가지고 있으면 표의 각 행에 값이 표시된다', async () => {
+    render(
+      <OrgOverview
+        org={org({
+          mjDeptName: '문화체육관광부 저작권정책과',
+          mjManagerName: '김문정',
+          mjManagerPhone: '02-1234-5678',
+          mjManagerEmail: 'mj@mcst.go.kr',
+          lawyerName: '이변호',
+          lawyerPhone: '02-9876-5432',
+          lawyerEmail: 'lawyer@lawfirm.kr',
+          lawyerAssignedDate: '2026-07-21',
+        })}
+      />,
+    )
+
+    const rows = screen.getAllByRole('row')
+    const applicantRow = rows.find((row) => row.textContent?.includes('신청기관 담당자'))
+    const mjRow = rows.find((row) => row.textContent?.includes('문정원 담당자'))
+    const lawyerRow = rows.find((row) => row.textContent?.includes('담당 변호사'))
+
+    expect(within(applicantRow as HTMLElement).getByText('데이터정보화팀')).toBeTruthy()
+    expect(within(applicantRow as HTMLElement).getByText('송민지 과장')).toBeTruthy()
+
+    expect(within(mjRow as HTMLElement).getByText('문화체육관광부 저작권정책과')).toBeTruthy()
+    expect(within(mjRow as HTMLElement).getByText('김문정')).toBeTruthy()
+    expect(within(mjRow as HTMLElement).getByText('02-1234-5678')).toBeTruthy()
+    expect(within(mjRow as HTMLElement).getByText('mj@mcst.go.kr')).toBeTruthy()
+
+    expect(within(lawyerRow as HTMLElement).getByText('이변호')).toBeTruthy()
+    expect(within(lawyerRow as HTMLElement).getByText('02-9876-5432')).toBeTruthy()
+    expect(within(lawyerRow as HTMLElement).getByText('lawyer@lawfirm.kr')).toBeTruthy()
+    expect(within(lawyerRow as HTMLElement).getByText('2026-07-21')).toBeTruthy()
+
     await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
   })
 

435af9e

08e8209

frontend/src/components/OrgOverview.tsx

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

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


 import WorkMemos from './WorkMemos'
 
 // 기관관리 상세 화면. 3단계 대시보드 시안의 "기관관리" 레이아웃을 따른다.
-// 웹 DB에 있는 것(연번·기관명·신청기관 담당자·채널)만 실데이터고,
-// 문정원 담당자/담당 변호사/업무단계/통계/탭 내용은 아직 백엔드가 없어
-// 시안과 같은 골격에 "추후 연동" 자리만 잡아 둔다.
+// 웹 DB에 있는 것(연번·기관명·담당자 3종·채널)만 실데이터고,
+// 업무단계/통계/일부 탭 내용은 아직 백엔드가 없어 시안과 같은 골격에
+// "추후 연동" 자리만 잡아 둔다.
 
 const STEPS = [
   '신청',

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

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

435af9e

08e8209

frontend/src/components/Sidebar.test.tsx

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

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


 
     const labels = [
       'Dashboard',
+      '채널관리',
       '기관관리',
-      '채널생성',
       '사업관리',
       '권리확인',
       '권리처리',

   it('activeKey에 해당하는 메뉴가 현재 페이지로 표시된다', () => {
     render(<Sidebar activeKey="channels" />)
 
-    expect(screen.getByRole('link', { name: '채널생성' }))
+    expect(screen.getByRole('link', { name: '채널관리' }))
       .toHaveAttribute('aria-current', 'page')
     expect(screen.getByRole('link', { name: '기관관리' }))
       .not.toHaveAttribute('aria-current')

     const onSelect = vi.fn()
     render(<Sidebar activeKey="orgs" onSelect={onSelect} />)
 
-    fireEvent.click(screen.getByRole('link', { name: '채널생성' }))
+    fireEvent.click(screen.getByRole('link', { name: '채널관리' }))
 
     expect(onSelect).toHaveBeenCalledWith('channels')
   })

435af9e

08e8209

frontend/src/components/Sidebar.tsx

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

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


     ),
   },
   {
+    key: 'channels',
+    label: '채널관리',
+    enabled: true,
+    icon: (
+      <svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M9 3L7 21M17 3l-2 18M4 8h17M3 16h17" />
+      </svg>
+    ),
+  },
+  {
     key: 'orgs',
     label: '기관관리',
     enabled: true,
     icon: (
       <svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
         <path d="M3 21h18M5 21V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16M9 8h2M9 12h2M9 16h2M15 10h4v11" />
-      </svg>
-    ),
-  },
-  {
-    key: 'channels',
-    label: '채널생성',
-    enabled: true,
-    icon: (
-      <svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-        <path d="M9 3L7 21M17 3l-2 18M4 8h17M3 16h17" />
       </svg>
     ),
   },

435af9e

08e8209

frontend/src/components/WorkMemos.test.tsx

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

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

...	...	@@ -27,6 +27,14 @@
27	27	managerTitle: '과장',
28	28	managerPhone: '02-3475-5434',
29	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,
	37	+ lawyerAssignedDate: null,
30	38	channelIdMj: 'chan-mj',
31	39	channelIdLaw: 'chan-law',
32	40	...overrides,
...	...	@@ -91,6 +99,26 @@
91	99	expect(screen.getByLabelText('담당자 이름')).toBeTruthy()
92	100	})
93	101
	102	+ it('신청기관 담당자, 문정원 담당자, 담당 변호사가 모두 있으면 셋 다 선택 옵션으로 나온다', async () => {
	103	+ mocks.getMemos.mockResolvedValue([])
	104	+
	105	+ render(
	106	+ <WorkMemos
	107	+ org={org({
	108	+ mjManagerName: '김문정',
	109	+ lawyerName: '이변호',
	110	+ })}
	111	+ />,
	112	+ )
	113	+
	114	+ await waitFor(() => expect(mocks.getMemos).toHaveBeenCalled())
	115	+
	116	+ expect(screen.getByRole('option', { name: '송민지 과장' })).toBeTruthy()
	117	+ expect(screen.getByRole('option', { name: '김문정' })).toBeTruthy()
	118	+ expect(screen.getByRole('option', { name: '이변호' })).toBeTruthy()
	119	+ expect(screen.getByRole('option', { name: '직접 입력' })).toBeTruthy()
	120	+ })
	121	+
94	122	it('메모 내용이 비어 있으면 등록 버튼이 비활성이고, 입력하면 활성화된다', async () => {
95	123	mocks.getMemos.mockResolvedValue([])
96	124

435af9e

08e8209

frontend/src/components/WorkMemos.tsx

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

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


   return org.managerTitle ? `${org.managerName} ${org.managerTitle}` : org.managerName
 }
 
+/** 신청기관 담당자, 문정원 담당자, 담당 변호사 중 이름이 채워진 사람만 후보로 낸다.
+ * 이름이 같은 사람이 중복 등록돼 있어도 셀렉트 옵션은 한 번만 보이도록 중복을 없앤다. */
+function contactOptions(org: Org): string[] {
+  const candidates = [managerOptionLabel(org), org.mjManagerName, org.lawyerName]
+  const seen = new Set<string>()
+  const options: string[] = []
+  for (const candidate of candidates) {
+    if (!candidate || candidate.trim() === '' || seen.has(candidate)) {
+      continue
+    }
+    seen.add(candidate)
+    options.push(candidate)
+  }
+  return options
+}
+
 /** 기관관리 상세의 업무메모 탭. 통화 등 담당자와의 연락 내용을 기록/조회/삭제한다. */
 export default function WorkMemos({ org }: { org: Org }) {
-  const managerLabel = managerOptionLabel(org)
+  const options = contactOptions(org)
 
   const [memos, setMemos] = useState<WorkMemo[]>([])
   const [loading, setLoading] = useState(false)
-  const [contactChoice, setContactChoice] = useState(managerLabel ?? CUSTOM_CONTACT_VALUE)
+  const [contactChoice, setContactChoice] = useState(options[0] ?? CUSTOM_CONTACT_VALUE)
   const [customContactName, setCustomContactName] = useState('')
   const [body, setBody] = useState('')
   const [busy, setBusy] = useState(false)

               onChange={(e) => setContactChoice(e.target.value)}
               className="rounded-md border border-gray-300 px-2 py-1.5 text-sm"
             >
-              {managerLabel && <option value={managerLabel}>{managerLabel}</option>}
+              {options.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
               <option value={CUSTOM_CONTACT_VALUE}>직접 입력</option>
             </select>
           </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -58,6 +58,8 @@
58	58
59	59	const promise = updateContact(1, {
60	60	deptName: '', managerName: '', managerTitle: '', managerPhone: '', managerEmail: '',
	61	+ mjDeptName: '', mjManagerName: '', mjManagerPhone: '', mjManagerEmail: '',
	62	+ lawyerName: '', lawyerPhone: '', lawyerEmail: '', lawyerAssignedDate: '',
61	63	})
62	64
63	65	await expect(promise).rejects.toThrow()

...	...	@@ -10,6 +10,14 @@
10	10	managerTitle: string \| null
11	11	managerPhone: string \| null
12	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
	20	+ lawyerAssignedDate: string \| null
13	21	channelIdMj: string \| null
14	22	channelIdLaw: string \| null
15	23	}
...	...	@@ -20,6 +28,14 @@
20	28	managerTitle: string
21	29	managerPhone: string
22	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
23	39	}
24	40
25	41	export type ProvisionOutcome = 'CACHED' \| 'RECOVERED' \| 'CREATED' \| 'FAILED'

...	...	@@ -23,6 +23,14 @@
23	23	managerTitle: null,
24	24	managerPhone: null,
25	25	managerEmail: null,
	26	+ mjDeptName: null,
	27	+ mjManagerName: null,
	28	+ mjManagerPhone: null,
	29	+ mjManagerEmail: null,
	30	+ lawyerName: null,
	31	+ lawyerPhone: null,
	32	+ lawyerEmail: null,
	33	+ lawyerAssignedDate: null,
26	34	channelIdMj: 'chan-mj',
27	35	channelIdLaw: 'chan-law',
28	36	...overrides,

...	...	@@ -29,6 +29,14 @@
29	29	managerTitle: null,
30	30	managerPhone: null,
31	31	managerEmail: null,
	32	+ mjDeptName: null,
	33	+ mjManagerName: null,
	34	+ mjManagerPhone: null,
	35	+ mjManagerEmail: null,
	36	+ lawyerName: null,
	37	+ lawyerPhone: null,
	38	+ lawyerEmail: null,
	39	+ lawyerAssignedDate: null,
32	40	channelIdMj: 'chan-mj',
33	41	channelIdLaw: 'chan-law',
34	42	...overrides,

...	...	@@ -1,4 +1,4 @@
1		-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
	1	+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
2	2	import { beforeEach, describe, expect, it, vi } from 'vitest'
3	3	import OrgDetail from './OrgDetail'
4	4	import type { Org } from '../api/client'
...	...	@@ -25,10 +25,26 @@
25	25	managerTitle: null,
26	26	managerPhone: null,
27	27	managerEmail: null,
	28	+ mjDeptName: null,
	29	+ mjManagerName: null,
	30	+ mjManagerPhone: null,
	31	+ mjManagerEmail: null,
	32	+ lawyerName: null,
	33	+ lawyerPhone: null,
	34	+ lawyerEmail: null,
	35	+ lawyerAssignedDate: null,
28	36	channelIdMj: null,
29	37	channelIdLaw: null,
30	38	...overrides,
31	39	}
	40	+}
	41	+
	42	+/** 세 담당자 그룹은 부서명/연락처/이메일 같은 라벨을 공유하므로, 그룹 제목으로 찾은
	43	+ * 컨테이너 안에서만 찾도록 스코프를 좁힌다 - 그렇지 않으면 getByLabelText가
	44	+ * "여러 개 일치"로 실패한다. */
	45	+function group(title: string) {
	46	+ const heading = screen.getByText(title)
	47	+ return within(heading.closest('div') as HTMLElement)
32	48	}
33	49
34	50	beforeEach(() => {
...	...	@@ -55,11 +71,12 @@
55	71
56	72	render(<OrgDetail org={org()} onChanged={onChanged} />)
57	73
58		- fireEvent.change(screen.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
59		- fireEvent.change(screen.getByLabelText('담당자명'), { target: { value: '송민지' } })
60		- fireEvent.change(screen.getByLabelText('직급/직함'), { target: { value: '과장' } })
61		- fireEvent.change(screen.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
62		- fireEvent.change(screen.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
	74	+ const applicant = group('신청기관 담당자')
	75	+ fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
	76	+ fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
	77	+ fireEvent.change(applicant.getByLabelText('직급/직함'), { target: { value: '과장' } })
	78	+ fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
	79	+ fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
63	80	fireEvent.click(screen.getByRole('button', { name: '정보 저장' }))
64	81
65	82	await waitFor(() => {
...	...	@@ -69,6 +86,60 @@
69	86	managerTitle: '과장',
70	87	managerPhone: '02-3475-5434',
71	88	managerEmail: 'ming@arirang.com',
	89	+ mjDeptName: '',
	90	+ mjManagerName: '',
	91	+ mjManagerPhone: '',
	92	+ mjManagerEmail: '',
	93	+ lawyerName: '',
	94	+ lawyerPhone: '',
	95	+ lawyerEmail: '',
	96	+ lawyerAssignedDate: '',
	97	+ })
	98	+ expect(onChanged).toHaveBeenCalled()
	99	+ })
	100	+ })
	101	+
	102	+ it('문정원 담당자와 담당 변호사 정보를 입력하면 한 번의 저장으로 함께 전송된다', async () => {
	103	+ mocks.updateContact.mockResolvedValue(org({ status: 'READY' }))
	104	+ const onChanged = vi.fn()
	105	+
	106	+ render(<OrgDetail org={org()} onChanged={onChanged} />)
	107	+
	108	+ const applicant = group('신청기관 담당자')
	109	+ fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
	110	+ fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
	111	+ fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
	112	+ fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
	113	+
	114	+ const mj = group('문정원 담당자')
	115	+ fireEvent.change(mj.getByLabelText('부서명'), { target: { value: '문화체육관광부 저작권정책과' } })
	116	+ fireEvent.change(mj.getByLabelText('담당자명'), { target: { value: '김문정' } })
	117	+ fireEvent.change(mj.getByLabelText('연락처'), { target: { value: '02-1234-5678' } })
	118	+ fireEvent.change(mj.getByLabelText('이메일'), { target: { value: 'mj@mcst.go.kr' } })
	119	+
	120	+ const lawyer = group('담당 변호사')
	121	+ fireEvent.change(lawyer.getByLabelText('성명'), { target: { value: '이변호' } })
	122	+ fireEvent.change(lawyer.getByLabelText('연락처'), { target: { value: '02-9876-5432' } })
	123	+ fireEvent.change(lawyer.getByLabelText('이메일'), { target: { value: 'lawyer@lawfirm.kr' } })
	124	+ fireEvent.change(lawyer.getByLabelText('배정일'), { target: { value: '2026-07-21' } })
	125	+
	126	+ fireEvent.click(screen.getByRole('button', { name: '정보 저장' }))
	127	+
	128	+ await waitFor(() => {
	129	+ expect(mocks.updateContact).toHaveBeenCalledWith(1, {
	130	+ deptName: '데이터정보화팀',
	131	+ managerName: '송민지',
	132	+ managerTitle: '',
	133	+ managerPhone: '02-3475-5434',
	134	+ managerEmail: 'ming@arirang.com',
	135	+ mjDeptName: '문화체육관광부 저작권정책과',
	136	+ mjManagerName: '김문정',
	137	+ mjManagerPhone: '02-1234-5678',
	138	+ mjManagerEmail: 'mj@mcst.go.kr',
	139	+ lawyerName: '이변호',
	140	+ lawyerPhone: '02-9876-5432',
	141	+ lawyerEmail: 'lawyer@lawfirm.kr',
	142	+ lawyerAssignedDate: '2026-07-21',
72	143	})
73	144	expect(onChanged).toHaveBeenCalled()
74	145	})
...	...	@@ -183,14 +254,27 @@
183	254	it('직급/직함이 비어있어도 나머지 필수 항목만 채우면 정보 저장 버튼이 활성화된다', () => {
184	255	render(<OrgDetail org={org()} onChanged={() => {}} />)
185	256
186		- fireEvent.change(screen.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
187		- fireEvent.change(screen.getByLabelText('담당자명'), { target: { value: '송민지' } })
188		- fireEvent.change(screen.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
189		- fireEvent.change(screen.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
	257	+ const applicant = group('신청기관 담당자')
	258	+ fireEvent.change(applicant.getByLabelText('부서명'), { target: { value: '데이터정보화팀' } })
	259	+ fireEvent.change(applicant.getByLabelText('담당자명'), { target: { value: '송민지' } })
	260	+ fireEvent.change(applicant.getByLabelText('연락처'), { target: { value: '02-3475-5434' } })
	261	+ fireEvent.change(applicant.getByLabelText('이메일'), { target: { value: 'ming@arirang.com' } })
190	262
191	263	expect(screen.getByRole('button', { name: '정보 저장' })).toBeEnabled()
192	264	})
193	265
	266	+ it('문정원 담당자와 담당 변호사 항목을 채워도 신청기관 필수 항목이 비어있으면 저장 버튼은 비활성이다', () => {
	267	+ render(<OrgDetail org={org()} onChanged={() => {}} />)
	268	+
	269	+ const mj = group('문정원 담당자')
	270	+ fireEvent.change(mj.getByLabelText('담당자명'), { target: { value: '김문정' } })
	271	+
	272	+ const lawyer = group('담당 변호사')
	273	+ fireEvent.change(lawyer.getByLabelText('성명'), { target: { value: '이변호' } })
	274	+
	275	+ expect(screen.getByRole('button', { name: '정보 저장' })).toBeDisabled()
	276	+ })
	277	+
194	278	it('reload로 org 객체가 새로 만들어져도 같은 기관이면 결과가 지워지지 않는다', async () => {
195	279	mocks.provisionChannels.mockResolvedValue({
196	280	mj: 'CREATED',

...	...	@@ -9,12 +9,26 @@
9	9	import ConfirmDialog from './ConfirmDialog'
10	10	import StatusBadge from './StatusBadge'
11	11
12		-const FIELDS: { key: keyof Contact; label: string }[] = [
	12	+const APPLICANT_FIELDS: { key: keyof Contact; label: string }[] = [
13	13	{ key: 'deptName', label: '부서명' },
14	14	{ key: 'managerName', label: '담당자명' },
15	15	{ key: 'managerTitle', label: '직급/직함' },
16	16	{ key: 'managerPhone', label: '연락처' },
17	17	{ key: 'managerEmail', label: '이메일' },
	18	+]
	19	+
	20	+const MJ_FIELDS: { key: keyof Contact; label: string; type?: string }[] = [
	21	+ { key: 'mjDeptName', label: '부서명' },
	22	+ { key: 'mjManagerName', label: '담당자명' },
	23	+ { key: 'mjManagerPhone', label: '연락처' },
	24	+ { key: 'mjManagerEmail', label: '이메일' },
	25	+]
	26	+
	27	+const LAWYER_FIELDS: { key: keyof Contact; label: string; type?: string }[] = [
	28	+ { key: 'lawyerName', label: '성명' },
	29	+ { key: 'lawyerPhone', label: '연락처' },
	30	+ { key: 'lawyerEmail', label: '이메일' },
	31	+ { key: 'lawyerAssignedDate', label: '배정일', type: 'date' },
18	32	]
19	33
20	34	function emptyContact(org: Org): Contact {
...	...	@@ -24,6 +38,14 @@
24	38	managerTitle: org.managerTitle ?? '',
25	39	managerPhone: org.managerPhone ?? '',
26	40	managerEmail: org.managerEmail ?? '',
	41	+ mjDeptName: org.mjDeptName ?? '',
	42	+ mjManagerName: org.mjManagerName ?? '',
	43	+ mjManagerPhone: org.mjManagerPhone ?? '',
	44	+ mjManagerEmail: org.mjManagerEmail ?? '',
	45	+ lawyerName: org.lawyerName ?? '',
	46	+ lawyerPhone: org.lawyerPhone ?? '',
	47	+ lawyerEmail: org.lawyerEmail ?? '',
	48	+ lawyerAssignedDate: org.lawyerAssignedDate ?? '',
27	49	}
28	50	}
29	51
...	...	@@ -33,6 +55,40 @@
33	55	'managerPhone',
34	56	'managerEmail',
35	57	]
	58	+
	59	+function ContactFieldGroup({
	60	+ title,
	61	+ fields,
	62	+ contact,
	63	+ onChange,
	64	+}: {
	65	+ title: string
	66	+ fields: { key: keyof Contact; label: string; type?: string }[]
	67	+ contact: Contact
	68	+ onChange: (key: keyof Contact, value: string) => void
	69	+}) {
	70	+ return (
	71	+ <div className="rounded-lg border border-gray-200 p-4">
	72	+ <h3 className="text-sm font-medium text-gray-700">{title}</h3>
	73	+ <div className="mt-3 space-y-3">
	74	+ {fields.map((field) => (
	75	+ <div key={field.key} className="flex items-center gap-3">
	76	+ <label htmlFor={field.key} className="w-20 shrink-0 text-sm text-gray-500">
	77	+ {field.label}
	78	+ </label>
	79	+ <input
	80	+ id={field.key}
	81	+ type={field.type ?? 'text'}
	82	+ className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm"
	83	+ value={contact[field.key]}
	84	+ onChange={(e) => onChange(field.key, e.target.value)}
	85	+ />
	86	+ </div>
	87	+ ))}
	88	+ </div>
	89	+ </div>
	90	+ )
	91	+}
36	92
37	93	export default function OrgDetail({ org, onChanged }: { org: Org; onChanged: () => void }) {
38	94	const [contact, setContact] = useState<Contact>(emptyContact(org))
...	...	@@ -56,6 +112,10 @@
56	112	const displayLaw = `${org.orgNo}_${org.orgName} (법률검토)`
57	113	const canProvision = org.status !== 'INFO_PENDING'
58	114	const requiredFilled = REQUIRED_FIELDS.every((key) => contact[key].trim() !== '')
	115	+
	116	+ function setField(key: keyof Contact, value: string) {
	117	+ setContact((prev) => ({ ...prev, [key]: value }))
	118	+ }
59	119
60	120	async function save() {
61	121	setError(null)
...	...	@@ -94,45 +154,46 @@
94	154	<StatusBadge status={org.status} />
95	155	</div>
96	156
97		- <section className="mt-6 max-w-xl rounded-lg border border-gray-200 p-5">
98		- <h2 className="text-sm font-medium">신청기관 담당자</h2>
99		-
100		- <div className="mt-4 space-y-3">
101		- {FIELDS.map((field) => (
102		- <div key={field.key} className="flex items-center gap-3">
103		- <label htmlFor={field.key} className="w-20 shrink-0 text-sm text-gray-500">
104		- {field.label}
105		- </label>
106		- <input
107		- id={field.key}
108		- className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm"
109		- value={contact[field.key]}
110		- onChange={(e) => setContact({ ...contact, [field.key]: e.target.value })}
111		- />
112		- </div>
113		- ))}
114		- </div>
115		-
116		- <div className="mt-5 flex gap-2">
117		- <button
118		- type="button"
119		- disabled={busy \|\| !requiredFilled}
120		- onClick={() => void save()}
121		- className="rounded-md border border-gray-300 px-3 py-1.5 text-sm disabled:opacity-50"
122		- >
123		- 정보 저장
124		- </button>
125		- <button
126		- type="button"
127		- disabled={busy \|\| !canProvision}
128		- onClick={() => setConfirming(true)}
129		- className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white disabled:bg-gray-300"
130		- >
131		- 채널 생성
132		- </button>
133		- </div>
	157	+ <section className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
	158	+ <ContactFieldGroup
	159	+ title="신청기관 담당자"
	160	+ fields={APPLICANT_FIELDS}
	161	+ contact={contact}
	162	+ onChange={setField}
	163	+ />
	164	+ <ContactFieldGroup
	165	+ title="문정원 담당자"
	166	+ fields={MJ_FIELDS}
	167	+ contact={contact}
	168	+ onChange={setField}
	169	+ />
	170	+ <ContactFieldGroup
	171	+ title="담당 변호사"
	172	+ fields={LAWYER_FIELDS}
	173	+ contact={contact}
	174	+ onChange={setField}
	175	+ />
134	176	</section>
135	177
	178	+ <div className="mt-5 flex gap-2">
	179	+ <button
	180	+ type="button"
	181	+ disabled={busy \|\| !requiredFilled}
	182	+ onClick={() => void save()}
	183	+ className="rounded-md border border-gray-300 px-3 py-1.5 text-sm disabled:opacity-50"
	184	+ >
	185	+ 정보 저장
	186	+ </button>
	187	+ <button
	188	+ type="button"
	189	+ disabled={busy \|\| !canProvision}
	190	+ onClick={() => setConfirming(true)}
	191	+ className="rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white disabled:bg-gray-300"
	192	+ >
	193	+ 채널 생성
	194	+ </button>
	195	+ </div>
	196	+
136	197	{error && <p className="mt-4 text-sm text-red-600">{error}</p>}
137	198
138	199	{result && (

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

...	...	@@ -6,9 +6,9 @@
6	6	import WorkMemos from './WorkMemos'
7	7
8	8	// 기관관리 상세 화면. 3단계 대시보드 시안의 "기관관리" 레이아웃을 따른다.
9		-// 웹 DB에 있는 것(연번·기관명·신청기관 담당자·채널)만 실데이터고,
10		-// 문정원 담당자/담당 변호사/업무단계/통계/탭 내용은 아직 백엔드가 없어
11		-// 시안과 같은 골격에 "추후 연동" 자리만 잡아 둔다.
	9	+// 웹 DB에 있는 것(연번·기관명·담당자 3종·채널)만 실데이터고,
	10	+// 업무단계/통계/일부 탭 내용은 아직 백엔드가 없어 시안과 같은 골격에
	11	+// "추후 연동" 자리만 잡아 둔다.
12	12
13	13	const STEPS = [
14	14	'신청',
...	...	@@ -41,24 +41,50 @@
41	41	return MATTERMOST_BASE + name
42	42	}
43	43
44		-function Field({ label, value }: { label: string; value: string \| null }) {
45		- return (
46		- <div className="flex gap-3 text-sm">
47		- <span className="w-14 shrink-0 text-gray-400">{label}</span>
48		- <span className={value ? 'font-medium text-gray-900' : 'text-gray-300'}>
49		- {value ?? '-'}
50		- </span>
51		- </div>
52		- )
	44	+function Cell({ value }: { value: string \| null }) {
	45	+ return <span className={value ? 'text-gray-900' : 'text-gray-300'}>{value ?? '-'}</span>
53	46	}
54	47
55		-function PendingCard({ title }: { title: string }) {
56		- return (
57		- <section className="rounded-lg border border-gray-200 p-4">
58		- <h2 className="text-sm font-semibold">{title}</h2>
59		- <p className="mt-3 text-sm text-gray-300">추후 연동</p>
60		- </section>
61		- )
	48	+interface ContactRow {
	49	+ role: string
	50	+ dept: string \| null
	51	+ manager: string \| null
	52	+ phone: string \| null
	53	+ email: string \| null
	54	+ assignedDate: string \| null
	55	+}
	56	+
	57	+function contactRows(org: Org): ContactRow[] {
	58	+ return [
	59	+ {
	60	+ role: '신청기관 담당자',
	61	+ dept: org.deptName,
	62	+ manager: org.managerName
	63	+ ? org.managerTitle
	64	+ ? `${org.managerName} ${org.managerTitle}`
	65	+ : org.managerName
	66	+ : null,
	67	+ phone: org.managerPhone,
	68	+ email: org.managerEmail,
	69	+ assignedDate: null,
	70	+ },
	71	+ {
	72	+ role: '문정원 담당자',
	73	+ dept: org.mjDeptName,
	74	+ manager: org.mjManagerName,
	75	+ phone: org.mjManagerPhone,
	76	+ email: org.mjManagerEmail,
	77	+ assignedDate: null,
	78	+ },
	79	+ {
	80	+ role: '담당 변호사',
	81	+ dept: null,
	82	+ manager: org.lawyerName,
	83	+ phone: org.lawyerPhone,
	84	+ email: org.lawyerEmail,
	85	+ assignedDate: org.lawyerAssignedDate,
	86	+ },
	87	+ ]
62	88	}
63	89
64	90	export default function OrgOverview({ org }: { org: Org }) {
...	...	@@ -110,30 +136,43 @@
110	136	</div>
111	137	</div>
112	138
113		- {/* 담당자 카드 3개 */}
114		- <div className="mt-5 grid grid-cols-1 gap-3 lg:grid-cols-3">
115		- <section className="rounded-lg border border-gray-200 p-4">
116		- <h2 className="text-sm font-semibold">신청기관 담당자</h2>
117		- <div className="mt-3 space-y-1.5">
118		- <Field label="부서" value={org.deptName} />
119		- <Field
120		- label="담당자"
121		- value={
122		- org.managerName
123		- ? org.managerTitle
124		- ? `${org.managerName} ${org.managerTitle}`
125		- : org.managerName
126		- : null
127		- }
128		- />
129		- <Field label="연락처" value={org.managerPhone} />
130		- <Field label="이메일" value={org.managerEmail} />
131		- </div>
132		- </section>
133		-
134		- <PendingCard title="문정원 담당자" />
135		- <PendingCard title="담당 변호사" />
136		- </div>
	139	+ {/* 담당자 3종 (신청기관/문정원/변호사) */}
	140	+ <section className="mt-5 overflow-x-auto rounded-lg border border-gray-200">
	141	+ <table className="w-full text-left text-sm">
	142	+ <thead>
	143	+ <tr className="border-b border-gray-200 text-xs text-gray-400">
	144	+ <th className="px-4 py-2 font-medium">구분</th>
	145	+ <th className="px-4 py-2 font-medium">부서</th>
	146	+ <th className="px-4 py-2 font-medium">담당자</th>
	147	+ <th className="px-4 py-2 font-medium">연락처</th>
	148	+ <th className="px-4 py-2 font-medium">이메일</th>
	149	+ <th className="px-4 py-2 font-medium">배정일</th>
	150	+ </tr>
	151	+ </thead>
	152	+ <tbody>
	153	+ {contactRows(org).map((row) => (
	154	+ <tr key={row.role} className="border-b border-gray-100 last:border-b-0">
	155	+ <td className="px-4 py-2 font-medium text-gray-700">{row.role}</td>
	156	+ <td className="px-4 py-2">
	157	+ <Cell value={row.dept} />
	158	+ </td>
	159	+ <td className="px-4 py-2">
	160	+ <Cell value={row.manager} />
	161	+ </td>
	162	+ <td className="px-4 py-2">
	163	+ <Cell value={row.phone} />
	164	+ </td>
	165	+ <td className="px-4 py-2">
	166	+ <Cell value={row.email} />
	167	+ </td>
	168	+ <td className="px-4 py-2">
	169	+ <Cell value={row.assignedDate} />
	170	+ </td>
	171	+ </tr>
	172	+ ))}
	173	+ </tbody>
	174	+ </table>
	175	+ </section>
137	176
138	177	{/* 업무단계 현황 */}
139	178	<section className="mt-5">

...	...	@@ -22,13 +22,29 @@
22	22	return org.managerTitle ? `${org.managerName} ${org.managerTitle}` : org.managerName
23	23	}
24	24
	25	+/** 신청기관 담당자, 문정원 담당자, 담당 변호사 중 이름이 채워진 사람만 후보로 낸다.
	26	+ * 이름이 같은 사람이 중복 등록돼 있어도 셀렉트 옵션은 한 번만 보이도록 중복을 없앤다. */
	27	+function contactOptions(org: Org): string[] {
	28	+ const candidates = [managerOptionLabel(org), org.mjManagerName, org.lawyerName]
	29	+ const seen = new Set<string>()
	30	+ const options: string[] = []
	31	+ for (const candidate of candidates) {
	32	+ if (!candidate \|\| candidate.trim() === '' \|\| seen.has(candidate)) {
	33	+ continue
	34	+ }
	35	+ seen.add(candidate)
	36	+ options.push(candidate)
	37	+ }
	38	+ return options
	39	+}
	40	+
25	41	/** 기관관리 상세의 업무메모 탭. 통화 등 담당자와의 연락 내용을 기록/조회/삭제한다. */
26	42	export default function WorkMemos({ org }: { org: Org }) {
27		- const managerLabel = managerOptionLabel(org)
	43	+ const options = contactOptions(org)
28	44
29	45	const [memos, setMemos] = useState<WorkMemo[]>([])
30	46	const [loading, setLoading] = useState(false)
31		- const [contactChoice, setContactChoice] = useState(managerLabel ?? CUSTOM_CONTACT_VALUE)
	47	+ const [contactChoice, setContactChoice] = useState(options[0] ?? CUSTOM_CONTACT_VALUE)
32	48	const [customContactName, setCustomContactName] = useState('')
33	49	const [body, setBody] = useState('')
34	50	const [busy, setBusy] = useState(false)
...	...	@@ -102,7 +118,11 @@
102	118	onChange={(e) => setContactChoice(e.target.value)}
103	119	className="rounded-md border border-gray-300 px-2 py-1.5 text-sm"
104	120	>
105		- {managerLabel && <option value={managerLabel}>{managerLabel}</option>}
	121	+ {options.map((option) => (
	122	+ <option key={option} value={option}>
	123	+ {option}
	124	+ </option>
	125	+ ))}
106	126	<option value={CUSTOM_CONTACT_VALUE}>직접 입력</option>
107	127	</select>
108	128	</div>

Delete comment