Commit @982acbec912ae3c09f00551068abcae2db1f43a0

ITN Dev 07-24

feat: 업무단계 현황 스트립을 실제 진행단계와 연결하고 타임라인 탭을 구현

- STEPS 배열을 src/stages.ts(STAGE_LABELS)로 분리해 OrgOverview와 Timeline이 공유
- 업무단계 스트립: 완료(체크)/진행중/미래 상태 표시, 현재 단계 클릭 시 확인 후 다음 단계로 진행
- [진행단계 변경] 버튼을 활성화해 12단계 중 하나를 바로 골라 변경하는 모달 추가
- Timeline 컴포넌트: 단계변경/업무메모/자료등록 이벤트를 날짜별로 묶어 시간순으로 표시
- 관련 컴포넌트 테스트 fixture에 stage 필드 추가

@982acbec912ae3c09f00551068abcae2db1f43a0

1119125

982acbe

frontend/src/api/client.ts

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

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


   lawyerAssignedDate: string | null
   channelIdMj: string | null
   channelIdLaw: string | null
+  /** null이면 아직 어떤 진행단계도 시작되지 않은 것이다(채널 생성 전). 1..12. */
+  stage: number | null
 }
 
 /** 채널관리 화면이 신청기관/문정원/아이티앤/변호사 배정을 한 번에 바꿀 때 보내는 요청. null은 해제다. */

   contactName: string
   body: string
   createdAt: number
+}
+
+/** 타임라인 탭 한 줄. detail은 STAGE 이벤트에서는 항상 null이다. */
+export interface TimelineEvent {
+  type: 'STAGE' | 'MEMO' | 'FILE'
+  at: number
+  title: string
+  detail: string | null
 }
 
 /**

   return request<ProvisionResult>(`/api/orgs/${id}/channels`, { method: 'POST' })
 }
 
+export function updateStage(orgId: number, stage: number): Promise<Org> {
+  return request<Org>(`/api/orgs/${orgId}/stage`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ stage }),
+  })
+}
+
+export function getTimeline(orgId: number): Promise<TimelineEvent[]> {
+  return request<TimelineEvent[]>(`/api/orgs/${orgId}/timeline`)
+}
+
 export function getPosts(orgId: number, channel: ChannelKindKey): Promise<PostView[]> {
   return request<PostView[]>(`/api/orgs/${orgId}/posts?channel=${channel}`)
 }

1119125

982acbe

frontend/src/components/ChannelFiles.test.tsx

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

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


     lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',
+    stage: null,
     ...overrides,
   }
 }

1119125

982acbe

frontend/src/components/ChannelPosts.test.tsx

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

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


     lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',
+    stage: null,
     ...overrides,
   }
 }

1119125

982acbe

frontend/src/components/OrgDetail.test.tsx

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

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


     lawyerAssignedDate: null,
     channelIdMj: null,
     channelIdLaw: null,
+    stage: null,
     ...overrides,
   }
 }

1119125

982acbe

frontend/src/components/OrgList.test.tsx

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

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


   {
     id: 1, orgNo: '001_00', orgName: '국제방송교류재단', status: 'ACTIVE',
     applicant: null, mj: null, itn: null, lawyer: null, lawyerAssignedDate: null,
-    channelIdMj: 'a', channelIdLaw: 'b',
+    channelIdMj: 'a', channelIdLaw: 'b', stage: 1,
   },
   {
     id: 2, orgNo: '008_01', orgName: '경찰청_치안정책연구소', status: 'INFO_PENDING',
     applicant: null, mj: null, itn: null, lawyer: null, lawyerAssignedDate: null,
-    channelIdMj: null, channelIdLaw: null,
+    channelIdMj: null, channelIdLaw: null, stage: null,
   },
 ]
 

1119125

982acbe

frontend/src/components/OrgOverview.test.tsx

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

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


   getMemos: vi.fn(),
   getContacts: vi.fn(),
   updateAssignments: vi.fn(),
+  getTimeline: vi.fn(),
+  updateStage: vi.fn(),
 }))
 
 vi.mock('../api/client', async (importOriginal) => ({

   getMemos: mocks.getMemos,
   getContacts: mocks.getContacts,
   updateAssignments: mocks.updateAssignments,
+  getTimeline: mocks.getTimeline,
+  updateStage: mocks.updateStage,
 }))
 
 function contact(overrides: Partial<Contact> = {}): Contact {

     lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',
+    stage: null,
     ...overrides,
   }
 }

   mocks.getMemos.mockReset().mockResolvedValue([])
   mocks.getContacts.mockReset().mockResolvedValue([])
   mocks.updateAssignments.mockReset().mockResolvedValue(undefined)
+  mocks.getTimeline.mockReset().mockResolvedValue([])
+  mocks.updateStage.mockReset().mockResolvedValue(undefined)
 })
 
 describe('OrgOverview', () => {

     render(<OrgOverview org={org()} />)
 
     expect(screen.queryByRole('button', { name: '담당 변호사 변경' })).toBeNull()
-    expect(screen.getByRole('button', { name: '진행단계 변경' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: '진행단계 변경' })).not.toBeDisabled()
     await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
   })
 

 
     await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
 
+    fireEvent.click(screen.getByRole('button', { name: '권리확인' }))
+
+    expect(screen.getByText('권리확인 상세 화면은 추후 확정')).toBeTruthy()
+    expect(screen.queryByRole('button', { name: '문정원' })).toBeNull()
+  })
+
+  it('타임라인 탭을 누르면 Timeline이 마운트되어 조회를 부른다', async () => {
+    render(<OrgOverview org={org()} />)
+
+    await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
+
     fireEvent.click(screen.getByRole('button', { name: '타임라인' }))
 
-    expect(screen.getByText('타임라인 상세 화면은 추후 확정')).toBeTruthy()
-    expect(screen.queryByRole('button', { name: '문정원' })).toBeNull()
+    await waitFor(() => expect(mocks.getTimeline).toHaveBeenCalledWith(1))
+    expect(screen.queryByText('타임라인 상세 화면은 추후 확정')).toBeNull()
   })
 
   it('자료 탭을 누르면 자료 목록 화면으로 바뀐다', async () => {

   it('미구현 동작 버튼들은 비활성이다', async () => {
     render(<OrgOverview org={org()} />)
 
-    expect(screen.getByRole('button', { name: '진행단계 변경' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: '자료 업로드' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: '최초 게시글 보기' })).toBeDisabled()
     expect(screen.getByRole('button', { name: '보고서 관리' })).toBeDisabled()
     await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
   })
+
+  describe('업무단계 현황 스트립', () => {
+    it('채널이 없어 단계가 시작되지 않았으면 전부 회색이고 안내 문구가 보인다', async () => {
+      render(<OrgOverview org={org({ stage: null, channelIdMj: null, channelIdLaw: null, status: 'READY' })} />)
+
+      expect(screen.getByText('채널 생성 시 신청 단계가 시작됩니다')).toBeTruthy()
+      expect(screen.queryByText('진행중')).toBeNull()
+    })
+
+    it('현재 단계 이전은 완료(체크) 표시, 현재 단계는 진행중, 이후는 미래 상태로 보인다', async () => {
+      render(<OrgOverview org={org({ stage: 3 })} />)
+
+      const doneButton = screen.getByText('목록접수').closest('button') as HTMLElement
+      const currentButton = screen.getByText('예비검토').closest('button') as HTMLElement
+      const futureButton = screen.getByText('변호사 배당').closest('button') as HTMLElement
+
+      expect(within(doneButton).getByText('✓')).toBeTruthy()
+      expect(within(currentButton).getByText('진행중')).toBeTruthy()
+      expect(within(futureButton).getByText('-')).toBeTruthy()
+      expect(futureButton).toBeDisabled()
+      expect(doneButton).toBeDisabled()
+      expect(currentButton).not.toBeDisabled()
+
+      await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
+    })
+
+    it('현재 단계를 클릭하면 확인 후 다음 단계로 진행단계 변경 API를 부른다', async () => {
+      const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+      const onChanged = vi.fn()
+
+      render(<OrgOverview org={org({ stage: 4 })} onChanged={onChanged} />)
+
+      const currentButton = screen.getByText('변호사 배당').closest('button') as HTMLElement
+      fireEvent.click(currentButton)
+
+      expect(confirmSpy).toHaveBeenCalledWith(
+        '다음 단계 "5. 법률검토(권리확인)"(으)로 진행할까요?',
+      )
+      await waitFor(() => expect(mocks.updateStage).toHaveBeenCalledWith(1, 5))
+      expect(onChanged).toHaveBeenCalled()
+
+      confirmSpy.mockRestore()
+    })
+
+    it('확인을 취소하면 진행단계 변경 API를 부르지 않는다', async () => {
+      const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
+
+      render(<OrgOverview org={org({ stage: 4 })} />)
+
+      fireEvent.click(screen.getByText('변호사 배당').closest('button') as HTMLElement)
+
+      expect(confirmSpy).toHaveBeenCalled()
+      expect(mocks.updateStage).not.toHaveBeenCalled()
+
+      confirmSpy.mockRestore()
+    })
+
+    it('현재 단계가 아닌 다른 단계를 클릭해도 아무 일도 일어나지 않는다', async () => {
+      const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+
+      render(<OrgOverview org={org({ stage: 4 })} />)
+
+      fireEvent.click(screen.getByText('예비검토').closest('button') as HTMLElement)
+      fireEvent.click(screen.getByText('RE:확인').closest('button') as HTMLElement)
+
+      expect(confirmSpy).not.toHaveBeenCalled()
+      expect(mocks.updateStage).not.toHaveBeenCalled()
+
+      confirmSpy.mockRestore()
+    })
+
+    it('마지막 단계(12)가 현재 단계이면 클릭해도 아무 일도 일어나지 않는다', async () => {
+      const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+
+      render(<OrgOverview org={org({ stage: 12 })} />)
+
+      const lastButton = screen.getByText('보고서 작성').closest('button') as HTMLElement
+      expect(lastButton).toBeDisabled()
+      fireEvent.click(lastButton)
+
+      expect(confirmSpy).not.toHaveBeenCalled()
+      expect(mocks.updateStage).not.toHaveBeenCalled()
+
+      confirmSpy.mockRestore()
+    })
+  })
+
+  describe('진행단계 변경 모달', () => {
+    it('버튼을 누르면 12개 단계 목록이 열리고 하나를 고르면 확인 후 해당 단계로 바꾼다', async () => {
+      const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
+      const onChanged = vi.fn()
+
+      render(<OrgOverview org={org({ stage: 2 })} onChanged={onChanged} />)
+
+      fireEvent.click(screen.getByRole('button', { name: '진행단계 변경' }))
+
+      const modalHeading = screen.getByRole('heading', { name: '진행단계 변경' })
+      const modal = modalHeading.closest('div')!.parentElement as HTMLElement
+      expect(within(modal).getByText('보고서 작성')).toBeTruthy()
+
+      fireEvent.click(within(modal).getByText('법률검토(권리확인)'))
+
+      expect(confirmSpy).toHaveBeenCalledWith(
+        '"5. 법률검토(권리확인)"(으)로 진행단계를 변경할까요?',
+      )
+      await waitFor(() => expect(mocks.updateStage).toHaveBeenCalledWith(1, 5))
+      expect(onChanged).toHaveBeenCalled()
+
+      confirmSpy.mockRestore()
+    })
+
+    it('닫기를 누르면 모달이 사라진다', async () => {
+      render(<OrgOverview org={org({ stage: 2 })} />)
+
+      fireEvent.click(screen.getByRole('button', { name: '진행단계 변경' }))
+      expect(screen.getByRole('heading', { name: '진행단계 변경' })).toBeTruthy()
+
+      fireEvent.click(screen.getByRole('button', { name: '닫기' }))
+
+      expect(screen.queryByRole('heading', { name: '진행단계 변경' })).toBeNull()
+    })
+  })
 })

1119125

982acbe

frontend/src/components/OrgOverview.tsx

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

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


 import { useState } from 'react'
 import {
   updateAssignments,
+  updateStage,
   type Contact,
   type ContactCategory,
   type Org,
 } from '../api/client'
+import { STAGE_LABELS, stageLabel } from '../stages'
 import ChannelFiles from './ChannelFiles'
 import ChannelPosts from './ChannelPosts'
 import ContactPickerModal from './ContactPickerModal'
 import StatusBadge from './StatusBadge'
+import Timeline from './Timeline'
 import WorkMemos from './WorkMemos'
 
 // 기관관리 상세 화면. 3단계 대시보드 시안의 "기관관리" 레이아웃을 따른다.
-// 웹 DB에 있는 것(연번·기관명·담당자 3종·채널)만 실데이터고,
-// 업무단계/통계/일부 탭 내용은 아직 백엔드가 없어 시안과 같은 골격에
-// "추후 연동" 자리만 잡아 둔다.
-
-const STEPS = [
-  '신청',
-  '목록접수',
-  '예비검토',
-  '변호사 배당',
-  '법률검토(권리확인)',
-  'RE:확인',
-  '법률검토(권리확인) 완료',
-  '법률검토(권리처리)',
-  'RE:처리',
-  '법률검토(권리처리) 완료',
-  '법률검토 최종완료',
-  '보고서 작성',
-]
+// 웹 DB에 있는 것(연번·기관명·담당자 3종·채널·진행단계)만 실데이터고,
+// 통계/일부 탭 내용은 아직 백엔드가 없어 시안과 같은 골격에 "추후 연동" 자리만 잡아 둔다.
 
 const TABS = ['채팅', '자료', '권리확인', '권리처리', 'RE', '타임라인', '업무메모']
 
-// 담당 변호사 변경은 카드의 [생성/변경] 버튼으로 대체되어 목록에서 뺐다
-const DISABLED_ACTIONS = ['진행단계 변경', '자료 업로드', '최초 게시글 보기', '보고서 관리']
+// 담당 변호사 변경은 카드의 [생성/변경] 버튼으로 대체되어 목록에서 뺐다.
+// 진행단계 변경은 업무단계 현황 스트립 + 이 버튼의 모달로 실제 동작한다.
+const DISABLED_ACTIONS = ['자료 업로드', '최초 게시글 보기', '보고서 관리']
 
 // 카드에서 담당자를 지정/변경할 때 쓰는 역할 정의 (채널관리의 배정과 같은 API를 쓴다)
 const CARD_ROLES: Record<

   const [assignBusy, setAssignBusy] = useState(false)
   const [assignError, setAssignError] = useState<string | null>(null)
 
+  const [stageBusy, setStageBusy] = useState(false)
+  const [stageError, setStageError] = useState<string | null>(null)
+  const [stagePickerOpen, setStagePickerOpen] = useState(false)
+
   async function assign(role: 'applicant' | 'mj' | 'itn' | 'lawyer', contact: Contact) {
     setPickerRole(null)
     setAssignError(null)

     }
   }
 
+  /** 실제로 진행단계를 바꾸는 공통 경로. 스트립의 "다음 단계로" 클릭과 [진행단계 변경]
+   * 모달의 단계 선택이 모두 여기를 거친다. */
+  async function changeStage(next: number) {
+    setStageError(null)
+    setStageBusy(true)
+    try {
+      await updateStage(org.id, next)
+      onChanged?.()
+    } catch (e) {
+      setStageError(e instanceof Error ? e.message : '진행단계 변경에 실패했습니다.')
+    } finally {
+      setStageBusy(false)
+    }
+  }
+
+  /** 업무단계 현황 스트립에서 "현재 단계"를 클릭했을 때만 호출된다 - 다음 단계로 1칸 전진. */
+  async function advanceStage() {
+    if (org.stage === null || org.stage >= 12 || stageBusy) {
+      return
+    }
+    const next = org.stage + 1
+    if (!window.confirm(`다음 단계 "${next}. ${stageLabel(next)}"(으)로 진행할까요?`)) {
+      return
+    }
+    await changeStage(next)
+  }
+
+  async function pickStage(next: number) {
+    if (!window.confirm(`"${next}. ${stageLabel(next)}"(으)로 진행단계를 변경할까요?`)) {
+      return
+    }
+    setStagePickerOpen(false)
+    await changeStage(next)
+  }
+
   return (
     <div className="p-6">
       <div className="rounded-xl border border-gray-200 bg-white p-6">

           </div>
 
           <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              disabled={stageBusy}
+              onClick={() => setStagePickerOpen(true)}
+              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+            >
+              진행단계 변경
+            </button>
             {DISABLED_ACTIONS.map((label) => (
               <button
                 key={label}

           />
         )}
 
-        {/* 업무단계 현황 */}
+        {/* 업무단계 현황: 완료된 단계는 초록 체크, 현재 단계는 파란 강조 + 클릭 시 다음 단계로
+            전진(확인 후), 그 뒤 단계는 회색 그대로. 채널 생성 전(stage === null)에는 전부 회색이다. */}
         <section className="mt-5">
           <h2 className="text-sm font-semibold">업무단계 현황</h2>
           <ol className="mt-3 flex gap-2 overflow-x-auto pb-2">
-            {STEPS.map((step, i) => (
-              <li
-                key={step}
-                className="flex w-24 shrink-0 flex-col items-center gap-1 rounded-lg border border-gray-200 px-2 py-3 text-center"
-              >
-                <span className="flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 text-xs text-gray-500">
-                  {i + 1}
-                </span>
-                <span className="text-[11px] leading-tight text-gray-600">{step}</span>
-                <span className="text-[11px] text-gray-300">-</span>
-              </li>
-            ))}
+            {STAGE_LABELS.map((step, i) => {
+              const n = i + 1
+              const isDone = org.stage !== null && n < org.stage
+              const isCurrent = org.stage !== null && n === org.stage
+              const clickable = isCurrent && n < 12
+
+              return (
+                <li key={step} className="shrink-0">
+                  <button
+                    type="button"
+                    disabled={!clickable || stageBusy}
+                    title={isCurrent && n >= 12 ? '마지막 단계입니다' : undefined}
+                    onClick={() => {
+                      if (isCurrent) {
+                        void advanceStage()
+                      }
+                    }}
+                    className={`flex w-24 flex-col items-center gap-1 rounded-lg border px-2 py-3 text-center ${
+                      isDone
+                        ? 'border-emerald-200 bg-emerald-50'
+                        : isCurrent
+                          ? 'border-blue-400 bg-blue-50'
+                          : 'border-gray-200'
+                    } ${clickable ? 'cursor-pointer hover:bg-blue-100' : 'cursor-default disabled:opacity-100'}`}
+                  >
+                    <span
+                      className={`flex h-6 w-6 items-center justify-center rounded-full border text-xs ${
+                        isDone
+                          ? 'border-emerald-500 bg-emerald-500 text-white'
+                          : isCurrent
+                            ? 'border-blue-600 bg-blue-600 text-white'
+                            : 'border-gray-300 text-gray-500'
+                      }`}
+                    >
+                      {isDone ? '✓' : n}
+                    </span>
+                    <span
+                      className={`text-[11px] leading-tight ${
+                        isDone ? 'text-emerald-700' : isCurrent ? 'font-semibold text-blue-700' : 'text-gray-600'
+                      }`}
+                    >
+                      {step}
+                    </span>
+                    {isCurrent ? (
+                      <span className="text-[11px] font-semibold text-blue-600">진행중</span>
+                    ) : (
+                      <span className="text-[11px] text-gray-300">-</span>
+                    )}
+                  </button>
+                </li>
+              )
+            })}
           </ol>
+          {org.stage === null && (
+            <p className="mt-1 text-xs text-gray-400">채널 생성 시 신청 단계가 시작됩니다</p>
+          )}
+          {stageError && <p className="mt-1 text-xs text-red-600">{stageError}</p>}
         </section>
 
         {/* 통계 4칸 */}

           <div className="mt-4 rounded-lg border border-gray-200">
             <WorkMemos key={org.id} org={org} />
           </div>
+        ) : activeTab === '타임라인' ? (
+          <div className="mt-4 rounded-lg border border-gray-200">
+            <Timeline key={org.id} org={org} />
+          </div>
         ) : (
           <div className="mt-4 rounded-lg border border-dashed border-gray-200 p-10 text-center text-sm text-gray-400">
             {activeTab} 상세 화면은 추후 확정
           </div>
         )}
       </div>
+
+      {stagePickerOpen && (
+        <StagePickerModal
+          currentStage={org.stage}
+          busy={stageBusy}
+          onPick={(n) => void pickStage(n)}
+          onClose={() => setStagePickerOpen(false)}
+        />
+      )}
+    </div>
+  )
+}
+
+/** [진행단계 변경] 버튼이 여는 모달. 12개 단계 중 하나를 골라 바로 그 단계로 변경한다
+ * (현재 단계는 굵게 표시). ContactPickerModal과 같은 오버레이/닫기 규칙을 따른다. */
+function StagePickerModal({
+  currentStage,
+  busy,
+  onPick,
+  onClose,
+}: {
+  currentStage: number | null
+  busy: boolean
+  onPick: (stage: number) => void
+  onClose: () => void
+}) {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black/30">
+      <div className="w-96 rounded-lg bg-white p-5">
+        <div className="flex items-center justify-between">
+          <h2 className="text-base font-semibold">진행단계 변경</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="닫기"
+            className="rounded-md p-1 text-gray-400 hover:bg-gray-100"
+          >
+            ✕
+          </button>
+        </div>
+
+        <ul className="mt-3 max-h-80 space-y-1 overflow-y-auto">
+          {STAGE_LABELS.map((label, i) => {
+            const n = i + 1
+            const isCurrent = currentStage === n
+            return (
+              <li key={label}>
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => onPick(n)}
+                  className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-gray-50 disabled:opacity-50 ${
+                    isCurrent ? 'font-semibold text-blue-700' : 'text-gray-700'
+                  }`}
+                >
+                  <span className="w-5 shrink-0 text-xs text-gray-400">{n}</span>
+                  <span>{label}</span>
+                  {isCurrent && <span className="ml-auto text-xs text-blue-500">현재</span>}
+                </button>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
     </div>
   )
 }

982acbe

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

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

...	...	@@ -0,0 +1,118 @@
	1	+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
	2	+import { beforeEach, describe, expect, it, vi } from 'vitest'
	3	+import Timeline from './Timeline'
	4	+import type { Org, TimelineEvent } from '../api/client'
	5	+
	6	+const mocks = vi.hoisted(() => ({
	7	+ getTimeline: vi.fn(),
	8	+}))
	9	+
	10	+vi.mock('../api/client', async (importOriginal) => ({
	11	+ ...(await importOriginal<typeof import('../api/client')>()),
	12	+ getTimeline: mocks.getTimeline,
	13	+}))
	14	+
	15	+function org(overrides: Partial<Org> = {}): Org {
	16	+ return {
	17	+ id: 1,
	18	+ orgNo: '001',
	19	+ orgName: '국제방송교류재단',
	20	+ status: 'ACTIVE',
	21	+ applicant: null,
	22	+ mj: null,
	23	+ itn: null,
	24	+ lawyer: null,
	25	+ lawyerAssignedDate: null,
	26	+ channelIdMj: 'chan-mj',
	27	+ channelIdLaw: 'chan-law',
	28	+ stage: 5,
	29	+ ...overrides,
	30	+ }
	31	+}
	32	+
	33	+function event(overrides: Partial<TimelineEvent> = {}): TimelineEvent {
	34	+ return {
	35	+ type: 'STAGE',
	36	+ at: Date.now(),
	37	+ title: '1',
	38	+ detail: null,
	39	+ ...overrides,
	40	+ }
	41	+}
	42	+
	43	+beforeEach(() => {
	44	+ mocks.getTimeline.mockReset()
	45	+})
	46	+
	47	+describe('Timeline', () => {
	48	+ it('불러오는 동안 로딩 문구를 보여준다', () => {
	49	+ mocks.getTimeline.mockReturnValue(new Promise(() => {}))
	50	+
	51	+ render(<Timeline org={org()} />)
	52	+
	53	+ expect(screen.getByText('불러오는 중…')).toBeTruthy()
	54	+ })
	55	+
	56	+ it('기록이 없으면 빈 상태 문구를 보여준다', async () => {
	57	+ mocks.getTimeline.mockResolvedValue([])
	58	+
	59	+ render(<Timeline org={org()} />)
	60	+
	61	+ await waitFor(() =>
	62	+ expect(
	63	+ screen.getByText('아직 기록이 없습니다. 채널을 만들고 업무를 진행하면 여기에 쌓입니다.'),
	64	+ ).toBeTruthy(),
	65	+ )
	66	+ })
	67	+
	68	+ it('세 종류 이벤트를 종류별 라벨과 함께 날짜로 묶어서 보여준다', async () => {
	69	+ const day1 = new Date('2026-07-20T09:00:00').getTime()
	70	+ const day2Morning = new Date('2026-07-21T08:30:00').getTime()
	71	+ const day2Afternoon = new Date('2026-07-21T15:00:00').getTime()
	72	+
	73	+ mocks.getTimeline.mockResolvedValue([
	74	+ event({ type: 'FILE', at: day2Afternoon, title: '보고서.pdf', detail: '문정원 · 박아이티' }),
	75	+ event({ type: 'MEMO', at: day2Morning, title: '송민지', detail: '전화 통화 내용' }),
	76	+ event({ type: 'STAGE', at: day1, title: '4', detail: null }),
	77	+ ])
	78	+
	79	+ render(<Timeline org={org()} />)
	80	+
	81	+ await waitFor(() => expect(screen.getByText('보고서.pdf')).toBeTruthy())
	82	+
	83	+ expect(screen.getAllByText('자료 등록')).toHaveLength(1)
	84	+ expect(screen.getByText('문정원 · 박아이티')).toBeTruthy()
	85	+
	86	+ expect(screen.getByText('업무메모')).toBeTruthy()
	87	+ expect(screen.getByText('송민지')).toBeTruthy()
	88	+ expect(screen.getByText('전화 통화 내용')).toBeTruthy()
	89	+
	90	+ expect(screen.getByText('단계 변경')).toBeTruthy()
	91	+ expect(screen.getByText('4. 변호사 배당 단계로 진행')).toBeTruthy()
	92	+
	93	+ // 날짜 그룹 헤더 2개(2026-07-21, 2026-07-20)가 최신순으로 보여야 한다.
	94	+ const headers = screen.getAllByText(/2026-07-2[01]/)
	95	+ expect(headers[0].textContent).toContain('2026-07-21')
	96	+ expect(headers[1].textContent).toContain('2026-07-20')
	97	+ })
	98	+
	99	+ it('새로고침 버튼을 누르면 다시 조회한다', async () => {
	100	+ mocks.getTimeline.mockResolvedValue([])
	101	+
	102	+ render(<Timeline org={org()} />)
	103	+
	104	+ await waitFor(() => expect(mocks.getTimeline).toHaveBeenCalledTimes(1))
	105	+
	106	+ fireEvent.click(screen.getByRole('button', { name: '새로고침' }))
	107	+
	108	+ await waitFor(() => expect(mocks.getTimeline).toHaveBeenCalledTimes(2))
	109	+ })
	110	+
	111	+ it('조회가 실패하면 오류 메시지를 보여준다', async () => {
	112	+ mocks.getTimeline.mockRejectedValue(new Error('타임라인을 불러오지 못했습니다.'))
	113	+
	114	+ render(<Timeline org={org()} />)
	115	+
	116	+ await waitFor(() => expect(screen.getByText('타임라인을 불러오지 못했습니다.')).toBeTruthy())
	117	+ })
	118	+})

982acbe

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

+++ frontend/src/components/Timeline.tsx

...	...	@@ -0,0 +1,185 @@
	1	+import { useEffect, useState } from 'react'
	2	+import { getTimeline, type Org, type TimelineEvent } from '../api/client'
	3	+import { stageLabel } from '../stages'
	4	+
	5	+const dateFormatter = new Intl.DateTimeFormat('ko-KR', {
	6	+ year: 'numeric',
	7	+ month: '2-digit',
	8	+ day: '2-digit',
	9	+ weekday: 'short',
	10	+})
	11	+
	12	+const timeFormatter = new Intl.DateTimeFormat('ko-KR', {
	13	+ hour: '2-digit',
	14	+ minute: '2-digit',
	15	+ hour12: false,
	16	+})
	17	+
	18	+function dateParts(at: number): { year: string; month: string; day: string; weekday: string } {
	19	+ const parts = dateFormatter.formatToParts(new Date(at))
	20	+ const get = (type: string) => parts.find((p) => p.type === type)?.value ?? ''
	21	+ return { year: get('year'), month: get('month'), day: get('day'), weekday: get('weekday') }
	22	+}
	23	+
	24	+function dateKey(at: number): string {
	25	+ const { year, month, day } = dateParts(at)
	26	+ return `${year}-${month}-${day}`
	27	+}
	28	+
	29	+function dateHeader(at: number): string {
	30	+ const { year, month, day, weekday } = dateParts(at)
	31	+ return `${year}-${month}-${day} (${weekday})`
	32	+}
	33	+
	34	+function formatTime(at: number): string {
	35	+ return timeFormatter.format(new Date(at))
	36	+}
	37	+
	38	+interface EventGroup {
	39	+ key: string
	40	+ header: string
	41	+ items: TimelineEvent[]
	42	+}
	43	+
	44	+function groupByDate(events: TimelineEvent[]): EventGroup[] {
	45	+ const groups: EventGroup[] = []
	46	+ for (const event of events) {
	47	+ const key = dateKey(event.at)
	48	+ const current = groups[groups.length - 1]
	49	+ if (current && current.key === key) {
	50	+ current.items.push(event)
	51	+ } else {
	52	+ groups.push({ key, header: dateHeader(event.at), items: [event] })
	53	+ }
	54	+ }
	55	+ return groups
	56	+}
	57	+
	58	+const EVENT_META: Record<TimelineEvent['type'], { dot: string; icon: string; badge: string; badgeClass: string }> = {
	59	+ STAGE: { dot: 'bg-blue-600', icon: '��', badge: '단계 변경', badgeClass: 'bg-blue-50 text-blue-700' },
	60	+ FILE: { dot: 'bg-amber-500', icon: '��', badge: '자료 등록', badgeClass: 'bg-amber-50 text-amber-700' },
	61	+ MEMO: { dot: 'bg-emerald-600', icon: '✏️', badge: '업무메모', badgeClass: 'bg-emerald-50 text-emerald-700' },
	62	+}
	63	+
	64	+/** STAGE 이벤트의 title(단계 번호 문자열)을 "5. 법률검토(권리확인) 진행" 형태로 바꾼다. */
	65	+function stageEventText(title: string): string {
	66	+ const n = Number(title)
	67	+ if (!Number.isInteger(n)) {
	68	+ return `${title} 단계로 진행`
	69	+ }
	70	+ return `${n}. ${stageLabel(n)} 단계로 진행`
	71	+}
	72	+
	73	+function EventBody({ event }: { event: TimelineEvent }) {
	74	+ if (event.type === 'STAGE') {
	75	+ return <p className="text-sm font-medium text-gray-900">{stageEventText(event.title)}</p>
	76	+ }
	77	+ if (event.type === 'FILE') {
	78	+ return (
	79	+ <p className="text-sm text-gray-900">
	80	+ <span className="font-semibold">{event.title}</span>
	81	+ {event.detail && <span className="ml-2 text-xs text-gray-400">{event.detail}</span>}
	82	+ </p>
	83	+ )
	84	+ }
	85	+ return (
	86	+ <p className="text-sm text-gray-900">
	87	+ <span className="font-semibold">{event.title}</span>
	88	+ {event.detail && <span className="ml-2 text-xs text-gray-500">{event.detail}</span>}
	89	+ </p>
	90	+ )
	91	+}
	92	+
	93	+/** 기관관리 상세의 타임라인 탭. 단계 변경 이력·업무메모·채널 첨부파일 등록을 하나의 시간순
	94	+ * 목록으로 합쳐 보여준다(조회는 GET /api/orgs/{id}/timeline 한 번뿐이고 폴링은 없다). */
	95	+export default function Timeline({ org }: { org: Org }) {
	96	+ const [events, setEvents] = useState<TimelineEvent[]>([])
	97	+ const [loading, setLoading] = useState(false)
	98	+ const [error, setError] = useState<string \| null>(null)
	99	+ const [reloadKey, setReloadKey] = useState(0)
	100	+
	101	+ useEffect(() => {
	102	+ let cancelled = false
	103	+ setLoading(true)
	104	+ setError(null)
	105	+
	106	+ getTimeline(org.id)
	107	+ .then((data) => {
	108	+ if (!cancelled) {
	109	+ setEvents(data)
	110	+ }
	111	+ })
	112	+ .catch((e: Error) => {
	113	+ if (!cancelled) {
	114	+ setError(e.message)
	115	+ }
	116	+ })
	117	+ .finally(() => {
	118	+ if (!cancelled) {
	119	+ setLoading(false)
	120	+ }
	121	+ })
	122	+
	123	+ return () => {
	124	+ cancelled = true
	125	+ }
	126	+ }, [org.id, reloadKey])
	127	+
	128	+ const groups = groupByDate(events)
	129	+
	130	+ return (
	131	+ <div className="p-4">
	132	+ <div className="flex justify-end">
	133	+ <button
	134	+ type="button"
	135	+ onClick={() => setReloadKey((k) => k + 1)}
	136	+ className="rounded-md border border-gray-300 px-3 py-1 text-xs text-gray-600 hover:bg-gray-50"
	137	+ >
	138	+ 새로고침
	139	+ </button>
	140	+ </div>
	141	+
	142	+ {loading && <p className="py-6 text-center text-sm text-gray-400">불러오는 중…</p>}
	143	+ {!loading && error && <p className="py-4 text-center text-sm text-red-600">{error}</p>}
	144	+ {!loading && !error && events.length === 0 && (
	145	+ <p className="py-10 text-center text-sm text-gray-300">
	146	+ 아직 기록이 없습니다. 채널을 만들고 업무를 진행하면 여기에 쌓입니다.
	147	+ </p>
	148	+ )}
	149	+
	150	+ {!loading && !error && events.length > 0 && (
	151	+ <div className="mt-3 space-y-6">
	152	+ {groups.map((group) => (
	153	+ <section key={group.key}>
	154	+ <h3 className="text-xs font-semibold text-gray-500">{group.header}</h3>
	155	+ <ol className="mt-2 space-y-4 border-l-2 border-gray-200 pl-5">
	156	+ {group.items.map((event, i) => {
	157	+ const meta = EVENT_META[event.type]
	158	+ return (
	159	+ <li key={`${group.key}-${i}`} className="relative">
	160	+ <span
	161	+ aria-hidden="true"
	162	+ className={`absolute -left-[1.65rem] flex h-5 w-5 items-center justify-center rounded-full text-[10px] leading-none text-white ${meta.dot}`}
	163	+ >
	164	+ {meta.icon}
	165	+ </span>
	166	+ <div className="flex items-baseline gap-2">
	167	+ <span className="text-xs tabular-nums text-gray-400">{formatTime(event.at)}</span>
	168	+ <span className={`rounded px-1.5 py-0.5 text-[11px] font-medium ${meta.badgeClass}`}>
	169	+ {meta.badge}
	170	+ </span>
	171	+ </div>
	172	+ <div className="mt-1">
	173	+ <EventBody event={event} />
	174	+ </div>
	175	+ </li>
	176	+ )
	177	+ })}
	178	+ </ol>
	179	+ </section>
	180	+ ))}
	181	+ </div>
	182	+ )}
	183	+ </div>
	184	+ )
	185	+}

1119125

982acbe

frontend/src/components/WorkMemos.test.tsx

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

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


     lawyerAssignedDate: null,
     channelIdMj: 'chan-mj',
     channelIdLaw: 'chan-law',
+    stage: null,
     ...overrides,
   }
 }

982acbe

frontend/src/stages.ts (added)

+++ frontend/src/stages.ts

...	...	@@ -0,0 +1,22 @@
	1	+// 진행단계 12개 라벨. 백엔드는 숫자(1..12)만 저장하고 라벨은 여기서만 관리한다 -
	2	+// OrgOverview(업무단계 현황 스트립·진행단계 변경 모달)와 Timeline(단계 변경 이벤트)이
	3	+// 같은 배열을 가져다 쓴다. 인덱스 0이 1단계다.
	4	+export const STAGE_LABELS: string[] = [
	5	+ '신청',
	6	+ '목록접수',
	7	+ '예비검토',
	8	+ '변호사 배당',
	9	+ '법률검토(권리확인)',
	10	+ 'RE:확인',
	11	+ '법률검토(권리확인) 완료',
	12	+ '법률검토(권리처리)',
	13	+ 'RE:처리',
	14	+ '법률검토(권리처리) 완료',
	15	+ '법률검토 최종완료',
	16	+ '보고서 작성',
	17	+]
	18	+
	19	+/** 1..12 단계 번호를 라벨로 바꾼다. 범위 밖이면 번호를 그대로 문자열로 돌려준다. */
	20	+export function stageLabel(stage: number): string {
	21	+ return STAGE_LABELS[stage - 1] ?? String(stage)
	22	+}

Add a comment

Open 0
Closed 0

List

...	...	@@ -37,6 +37,8 @@
37	37	lawyerAssignedDate: string \| null
38	38	channelIdMj: string \| null
39	39	channelIdLaw: string \| null
	40	+ /** null이면 아직 어떤 진행단계도 시작되지 않은 것이다(채널 생성 전). 1..12. */
	41	+ stage: number \| null
40	42	}
41	43
42	44	/** 채널관리 화면이 신청기관/문정원/아이티앤/변호사 배정을 한 번에 바꿀 때 보내는 요청. null은 해제다. */
...	...	@@ -94,6 +96,14 @@
94	96	contactName: string
95	97	body: string
96	98	createdAt: number
	99	+}
	100	+
	101	+/** 타임라인 탭 한 줄. detail은 STAGE 이벤트에서는 항상 null이다. */
	102	+export interface TimelineEvent {
	103	+ type: 'STAGE' \| 'MEMO' \| 'FILE'
	104	+ at: number
	105	+ title: string
	106	+ detail: string \| null
97	107	}
98	108
99	109	/**
...	...	@@ -185,6 +195,18 @@
185	195	return request<ProvisionResult>(`/api/orgs/${id}/channels`, { method: 'POST' })
186	196	}
187	197
	198	+export function updateStage(orgId: number, stage: number): Promise<Org> {
	199	+ return request<Org>(`/api/orgs/${orgId}/stage`, {
	200	+ method: 'PUT',
	201	+ headers: { 'Content-Type': 'application/json' },
	202	+ body: JSON.stringify({ stage }),
	203	+ })
	204	+}
	205	+
	206	+export function getTimeline(orgId: number): Promise<TimelineEvent[]> {
	207	+ return request<TimelineEvent[]>(`/api/orgs/${orgId}/timeline`)
	208	+}
	209	+
188	210	export function getPosts(orgId: number, channel: ChannelKindKey): Promise<PostView[]> {
189	211	return request<PostView[]>(`/api/orgs/${orgId}/posts?channel=${channel}`)
190	212	}

...	...	@@ -25,6 +25,7 @@
25	25	lawyerAssignedDate: null,
26	26	channelIdMj: 'chan-mj',
27	27	channelIdLaw: 'chan-law',
	28	+ stage: null,
28	29	...overrides,
29	30	}
30	31	}

...	...	@@ -31,6 +31,7 @@
31	31	lawyerAssignedDate: null,
32	32	channelIdMj: 'chan-mj',
33	33	channelIdLaw: 'chan-law',
	34	+ stage: null,
34	35	...overrides,
35	36	}
36	37	}

...	...	@@ -43,6 +43,7 @@
43	43	lawyerAssignedDate: null,
44	44	channelIdMj: null,
45	45	channelIdLaw: null,
	46	+ stage: null,
46	47	...overrides,
47	48	}
48	49	}

...	...	@@ -7,12 +7,12 @@
7	7	{
8	8	id: 1, orgNo: '001_00', orgName: '국제방송교류재단', status: 'ACTIVE',
9	9	applicant: null, mj: null, itn: null, lawyer: null, lawyerAssignedDate: null,
10		- channelIdMj: 'a', channelIdLaw: 'b',
	10	+ channelIdMj: 'a', channelIdLaw: 'b', stage: 1,
11	11	},
12	12	{
13	13	id: 2, orgNo: '008_01', orgName: '경찰청_치안정책연구소', status: 'INFO_PENDING',
14	14	applicant: null, mj: null, itn: null, lawyer: null, lawyerAssignedDate: null,
15		- channelIdMj: null, channelIdLaw: null,
	15	+ channelIdMj: null, channelIdLaw: null, stage: null,
16	16	},
17	17	]
18	18

...	...	@@ -9,6 +9,8 @@
9	9	getMemos: vi.fn(),
10	10	getContacts: vi.fn(),
11	11	updateAssignments: vi.fn(),
	12	+ getTimeline: vi.fn(),
	13	+ updateStage: vi.fn(),
12	14	}))
13	15
14	16	vi.mock('../api/client', async (importOriginal) => ({
...	...	@@ -18,6 +20,8 @@
18	20	getMemos: mocks.getMemos,
19	21	getContacts: mocks.getContacts,
20	22	updateAssignments: mocks.updateAssignments,
	23	+ getTimeline: mocks.getTimeline,
	24	+ updateStage: mocks.updateStage,
21	25	}))
22	26
23	27	function contact(overrides: Partial<Contact> = {}): Contact {
...	...	@@ -56,6 +60,7 @@
56	60	lawyerAssignedDate: null,
57	61	channelIdMj: 'chan-mj',
58	62	channelIdLaw: 'chan-law',
	63	+ stage: null,
59	64	...overrides,
60	65	}
61	66	}
...	...	@@ -66,6 +71,8 @@
66	71	mocks.getMemos.mockReset().mockResolvedValue([])
67	72	mocks.getContacts.mockReset().mockResolvedValue([])
68	73	mocks.updateAssignments.mockReset().mockResolvedValue(undefined)
	74	+ mocks.getTimeline.mockReset().mockResolvedValue([])
	75	+ mocks.updateStage.mockReset().mockResolvedValue(undefined)
69	76	})
70	77
71	78	describe('OrgOverview', () => {
...	...	@@ -215,7 +222,7 @@
215	222	render(<OrgOverview org={org()} />)
216	223
217	224	expect(screen.queryByRole('button', { name: '담당 변호사 변경' })).toBeNull()
218		- expect(screen.getByRole('button', { name: '진행단계 변경' })).toBeDisabled()
	225	+ expect(screen.getByRole('button', { name: '진행단계 변경' })).not.toBeDisabled()
219	226	await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
220	227	})
221	228
...	...	@@ -240,10 +247,21 @@
240	247
241	248	await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
242	249
	250	+ fireEvent.click(screen.getByRole('button', { name: '권리확인' }))
	251	+
	252	+ expect(screen.getByText('권리확인 상세 화면은 추후 확정')).toBeTruthy()
	253	+ expect(screen.queryByRole('button', { name: '문정원' })).toBeNull()
	254	+ })
	255	+
	256	+ it('타임라인 탭을 누르면 Timeline이 마운트되어 조회를 부른다', async () => {
	257	+ render(<OrgOverview org={org()} />)
	258	+
	259	+ await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
	260	+
243	261	fireEvent.click(screen.getByRole('button', { name: '타임라인' }))
244	262
245		- expect(screen.getByText('타임라인 상세 화면은 추후 확정')).toBeTruthy()
246		- expect(screen.queryByRole('button', { name: '문정원' })).toBeNull()
	263	+ await waitFor(() => expect(mocks.getTimeline).toHaveBeenCalledWith(1))
	264	+ expect(screen.queryByText('타임라인 상세 화면은 추후 확정')).toBeNull()
247	265	})
248	266
249	267	it('자료 탭을 누르면 자료 목록 화면으로 바뀐다', async () => {
...	...	@@ -290,8 +308,131 @@
290	308	it('미구현 동작 버튼들은 비활성이다', async () => {
291	309	render(<OrgOverview org={org()} />)
292	310
293		- expect(screen.getByRole('button', { name: '진행단계 변경' })).toBeDisabled()
	311	+ expect(screen.getByRole('button', { name: '자료 업로드' })).toBeDisabled()
	312	+ expect(screen.getByRole('button', { name: '최초 게시글 보기' })).toBeDisabled()
294	313	expect(screen.getByRole('button', { name: '보고서 관리' })).toBeDisabled()
295	314	await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
296	315	})
	316	+
	317	+ describe('업무단계 현황 스트립', () => {
	318	+ it('채널이 없어 단계가 시작되지 않았으면 전부 회색이고 안내 문구가 보인다', async () => {
	319	+ render(<OrgOverview org={org({ stage: null, channelIdMj: null, channelIdLaw: null, status: 'READY' })} />)
	320	+
	321	+ expect(screen.getByText('채널 생성 시 신청 단계가 시작됩니다')).toBeTruthy()
	322	+ expect(screen.queryByText('진행중')).toBeNull()
	323	+ })
	324	+
	325	+ it('현재 단계 이전은 완료(체크) 표시, 현재 단계는 진행중, 이후는 미래 상태로 보인다', async () => {
	326	+ render(<OrgOverview org={org({ stage: 3 })} />)
	327	+
	328	+ const doneButton = screen.getByText('목록접수').closest('button') as HTMLElement
	329	+ const currentButton = screen.getByText('예비검토').closest('button') as HTMLElement
	330	+ const futureButton = screen.getByText('변호사 배당').closest('button') as HTMLElement
	331	+
	332	+ expect(within(doneButton).getByText('✓')).toBeTruthy()
	333	+ expect(within(currentButton).getByText('진행중')).toBeTruthy()
	334	+ expect(within(futureButton).getByText('-')).toBeTruthy()
	335	+ expect(futureButton).toBeDisabled()
	336	+ expect(doneButton).toBeDisabled()
	337	+ expect(currentButton).not.toBeDisabled()
	338	+
	339	+ await waitFor(() => expect(mocks.getPosts).toHaveBeenCalled())
	340	+ })
	341	+
	342	+ it('현재 단계를 클릭하면 확인 후 다음 단계로 진행단계 변경 API를 부른다', async () => {
	343	+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
	344	+ const onChanged = vi.fn()
	345	+
	346	+ render(<OrgOverview org={org({ stage: 4 })} onChanged={onChanged} />)
	347	+
	348	+ const currentButton = screen.getByText('변호사 배당').closest('button') as HTMLElement
	349	+ fireEvent.click(currentButton)
	350	+
	351	+ expect(confirmSpy).toHaveBeenCalledWith(
	352	+ '다음 단계 "5. 법률검토(권리확인)"(으)로 진행할까요?',
	353	+ )
	354	+ await waitFor(() => expect(mocks.updateStage).toHaveBeenCalledWith(1, 5))
	355	+ expect(onChanged).toHaveBeenCalled()
	356	+
	357	+ confirmSpy.mockRestore()
	358	+ })
	359	+
	360	+ it('확인을 취소하면 진행단계 변경 API를 부르지 않는다', async () => {
	361	+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
	362	+
	363	+ render(<OrgOverview org={org({ stage: 4 })} />)
	364	+
	365	+ fireEvent.click(screen.getByText('변호사 배당').closest('button') as HTMLElement)
	366	+
	367	+ expect(confirmSpy).toHaveBeenCalled()
	368	+ expect(mocks.updateStage).not.toHaveBeenCalled()
	369	+
	370	+ confirmSpy.mockRestore()
	371	+ })
	372	+
	373	+ it('현재 단계가 아닌 다른 단계를 클릭해도 아무 일도 일어나지 않는다', async () => {
	374	+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
	375	+
	376	+ render(<OrgOverview org={org({ stage: 4 })} />)
	377	+
	378	+ fireEvent.click(screen.getByText('예비검토').closest('button') as HTMLElement)
	379	+ fireEvent.click(screen.getByText('RE:확인').closest('button') as HTMLElement)
	380	+
	381	+ expect(confirmSpy).not.toHaveBeenCalled()
	382	+ expect(mocks.updateStage).not.toHaveBeenCalled()
	383	+
	384	+ confirmSpy.mockRestore()
	385	+ })
	386	+
	387	+ it('마지막 단계(12)가 현재 단계이면 클릭해도 아무 일도 일어나지 않는다', async () => {
	388	+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
	389	+
	390	+ render(<OrgOverview org={org({ stage: 12 })} />)
	391	+
	392	+ const lastButton = screen.getByText('보고서 작성').closest('button') as HTMLElement
	393	+ expect(lastButton).toBeDisabled()
	394	+ fireEvent.click(lastButton)
	395	+
	396	+ expect(confirmSpy).not.toHaveBeenCalled()
	397	+ expect(mocks.updateStage).not.toHaveBeenCalled()
	398	+
	399	+ confirmSpy.mockRestore()
	400	+ })
	401	+ })
	402	+
	403	+ describe('진행단계 변경 모달', () => {
	404	+ it('버튼을 누르면 12개 단계 목록이 열리고 하나를 고르면 확인 후 해당 단계로 바꾼다', async () => {
	405	+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
	406	+ const onChanged = vi.fn()
	407	+
	408	+ render(<OrgOverview org={org({ stage: 2 })} onChanged={onChanged} />)
	409	+
	410	+ fireEvent.click(screen.getByRole('button', { name: '진행단계 변경' }))
	411	+
	412	+ const modalHeading = screen.getByRole('heading', { name: '진행단계 변경' })
	413	+ const modal = modalHeading.closest('div')!.parentElement as HTMLElement
	414	+ expect(within(modal).getByText('보고서 작성')).toBeTruthy()
	415	+
	416	+ fireEvent.click(within(modal).getByText('법률검토(권리확인)'))
	417	+
	418	+ expect(confirmSpy).toHaveBeenCalledWith(
	419	+ '"5. 법률검토(권리확인)"(으)로 진행단계를 변경할까요?',
	420	+ )
	421	+ await waitFor(() => expect(mocks.updateStage).toHaveBeenCalledWith(1, 5))
	422	+ expect(onChanged).toHaveBeenCalled()
	423	+
	424	+ confirmSpy.mockRestore()
	425	+ })
	426	+
	427	+ it('닫기를 누르면 모달이 사라진다', async () => {
	428	+ render(<OrgOverview org={org({ stage: 2 })} />)
	429	+
	430	+ fireEvent.click(screen.getByRole('button', { name: '진행단계 변경' }))
	431	+ expect(screen.getByRole('heading', { name: '진행단계 변경' })).toBeTruthy()
	432	+
	433	+ fireEvent.click(screen.getByRole('button', { name: '닫기' }))
	434	+
	435	+ expect(screen.queryByRole('heading', { name: '진행단계 변경' })).toBeNull()
	436	+ })
	437	+ })
297	438	})

...	...	@@ -1,40 +1,28 @@
1	1	import { useState } from 'react'
2	2	import {
3	3	updateAssignments,
	4	+ updateStage,
4	5	type Contact,
5	6	type ContactCategory,
6	7	type Org,
7	8	} from '../api/client'
	9	+import { STAGE_LABELS, stageLabel } from '../stages'
8	10	import ChannelFiles from './ChannelFiles'
9	11	import ChannelPosts from './ChannelPosts'
10	12	import ContactPickerModal from './ContactPickerModal'
11	13	import StatusBadge from './StatusBadge'
	14	+import Timeline from './Timeline'
12	15	import WorkMemos from './WorkMemos'
13	16
14	17	// 기관관리 상세 화면. 3단계 대시보드 시안의 "기관관리" 레이아웃을 따른다.
15		-// 웹 DB에 있는 것(연번·기관명·담당자 3종·채널)만 실데이터고,
16		-// 업무단계/통계/일부 탭 내용은 아직 백엔드가 없어 시안과 같은 골격에
17		-// "추후 연동" 자리만 잡아 둔다.
18		-
19		-const STEPS = [
20		- '신청',
21		- '목록접수',
22		- '예비검토',
23		- '변호사 배당',
24		- '법률검토(권리확인)',
25		- 'RE:확인',
26		- '법률검토(권리확인) 완료',
27		- '법률검토(권리처리)',
28		- 'RE:처리',
29		- '법률검토(권리처리) 완료',
30		- '법률검토 최종완료',
31		- '보고서 작성',
32		-]
	18	+// 웹 DB에 있는 것(연번·기관명·담당자 3종·채널·진행단계)만 실데이터고,
	19	+// 통계/일부 탭 내용은 아직 백엔드가 없어 시안과 같은 골격에 "추후 연동" 자리만 잡아 둔다.
33	20
34	21	const TABS = ['채팅', '자료', '권리확인', '권리처리', 'RE', '타임라인', '업무메모']
35	22
36		-// 담당 변호사 변경은 카드의 [생성/변경] 버튼으로 대체되어 목록에서 뺐다
37		-const DISABLED_ACTIONS = ['진행단계 변경', '자료 업로드', '최초 게시글 보기', '보고서 관리']
	23	+// 담당 변호사 변경은 카드의 [생성/변경] 버튼으로 대체되어 목록에서 뺐다.
	24	+// 진행단계 변경은 업무단계 현황 스트립 + 이 버튼의 모달로 실제 동작한다.
	25	+const DISABLED_ACTIONS = ['자료 업로드', '최초 게시글 보기', '보고서 관리']
38	26
39	27	// 카드에서 담당자를 지정/변경할 때 쓰는 역할 정의 (채널관리의 배정과 같은 API를 쓴다)
40	28	const CARD_ROLES: Record<
...	...	@@ -116,6 +104,10 @@
116	104	const [assignBusy, setAssignBusy] = useState(false)
117	105	const [assignError, setAssignError] = useState<string \| null>(null)
118	106
	107	+ const [stageBusy, setStageBusy] = useState(false)
	108	+ const [stageError, setStageError] = useState<string \| null>(null)
	109	+ const [stagePickerOpen, setStagePickerOpen] = useState(false)
	110	+
119	111	async function assign(role: 'applicant' \| 'mj' \| 'itn' \| 'lawyer', contact: Contact) {
120	112	setPickerRole(null)
121	113	setAssignError(null)
...	...	@@ -136,6 +128,41 @@
136	128	}
137	129	}
138	130
	131	+ /** 실제로 진행단계를 바꾸는 공통 경로. 스트립의 "다음 단계로" 클릭과 [진행단계 변경]
	132	+ * 모달의 단계 선택이 모두 여기를 거친다. */
	133	+ async function changeStage(next: number) {
	134	+ setStageError(null)
	135	+ setStageBusy(true)
	136	+ try {
	137	+ await updateStage(org.id, next)
	138	+ onChanged?.()
	139	+ } catch (e) {
	140	+ setStageError(e instanceof Error ? e.message : '진행단계 변경에 실패했습니다.')
	141	+ } finally {
	142	+ setStageBusy(false)
	143	+ }
	144	+ }
	145	+
	146	+ /** 업무단계 현황 스트립에서 "현재 단계"를 클릭했을 때만 호출된다 - 다음 단계로 1칸 전진. */
	147	+ async function advanceStage() {
	148	+ if (org.stage === null \|\| org.stage >= 12 \|\| stageBusy) {
	149	+ return
	150	+ }
	151	+ const next = org.stage + 1
	152	+ if (!window.confirm(`다음 단계 "${next}. ${stageLabel(next)}"(으)로 진행할까요?`)) {
	153	+ return
	154	+ }
	155	+ await changeStage(next)
	156	+ }
	157	+
	158	+ async function pickStage(next: number) {
	159	+ if (!window.confirm(`"${next}. ${stageLabel(next)}"(으)로 진행단계를 변경할까요?`)) {
	160	+ return
	161	+ }
	162	+ setStagePickerOpen(false)
	163	+ await changeStage(next)
	164	+ }
	165	+
139	166	return (
140	167	<div className="p-6">
141	168	<div className="rounded-xl border border-gray-200 bg-white p-6">
...	...	@@ -149,6 +176,14 @@
149	176	</div>
150	177
151	178	<div className="flex flex-wrap gap-2">
	179	+ <button
	180	+ type="button"
	181	+ disabled={stageBusy}
	182	+ onClick={() => setStagePickerOpen(true)}
	183	+ className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
	184	+ >
	185	+ 진행단계 변경
	186	+ </button>
152	187	{DISABLED_ACTIONS.map((label) => (
153	188	<button
154	189	key={label}
...	...	@@ -253,23 +288,68 @@
253	288	/>
254	289	)}
255	290
256		- {/* 업무단계 현황 */}
	291	+ {/* 업무단계 현황: 완료된 단계는 초록 체크, 현재 단계는 파란 강조 + 클릭 시 다음 단계로
	292	+ 전진(확인 후), 그 뒤 단계는 회색 그대로. 채널 생성 전(stage === null)에는 전부 회색이다. */}
257	293	<section className="mt-5">
258	294	<h2 className="text-sm font-semibold">업무단계 현황</h2>
259	295	<ol className="mt-3 flex gap-2 overflow-x-auto pb-2">
260		- {STEPS.map((step, i) => (
261		- <li
262		- key={step}
263		- className="flex w-24 shrink-0 flex-col items-center gap-1 rounded-lg border border-gray-200 px-2 py-3 text-center"
264		- >
265		- <span className="flex h-6 w-6 items-center justify-center rounded-full border border-gray-300 text-xs text-gray-500">
266		- {i + 1}
267		- </span>
268		- <span className="text-[11px] leading-tight text-gray-600">{step}</span>
269		- <span className="text-[11px] text-gray-300">-</span>
270		- </li>
271		- ))}
	296	+ {STAGE_LABELS.map((step, i) => {
	297	+ const n = i + 1
	298	+ const isDone = org.stage !== null && n < org.stage
	299	+ const isCurrent = org.stage !== null && n === org.stage
	300	+ const clickable = isCurrent && n < 12
	301	+
	302	+ return (
	303	+ <li key={step} className="shrink-0">
	304	+ <button
	305	+ type="button"
	306	+ disabled={!clickable \|\| stageBusy}
	307	+ title={isCurrent && n >= 12 ? '마지막 단계입니다' : undefined}
	308	+ onClick={() => {
	309	+ if (isCurrent) {
	310	+ void advanceStage()
	311	+ }
	312	+ }}
	313	+ className={`flex w-24 flex-col items-center gap-1 rounded-lg border px-2 py-3 text-center ${
	314	+ isDone
	315	+ ? 'border-emerald-200 bg-emerald-50'
	316	+ : isCurrent
	317	+ ? 'border-blue-400 bg-blue-50'
	318	+ : 'border-gray-200'
	319	+ } ${clickable ? 'cursor-pointer hover:bg-blue-100' : 'cursor-default disabled:opacity-100'}`}
	320	+ >
	321	+ <span
	322	+ className={`flex h-6 w-6 items-center justify-center rounded-full border text-xs ${
	323	+ isDone
	324	+ ? 'border-emerald-500 bg-emerald-500 text-white'
	325	+ : isCurrent
	326	+ ? 'border-blue-600 bg-blue-600 text-white'
	327	+ : 'border-gray-300 text-gray-500'
	328	+ }`}
	329	+ >
	330	+ {isDone ? '✓' : n}
	331	+ </span>
	332	+ <span
	333	+ className={`text-[11px] leading-tight ${
	334	+ isDone ? 'text-emerald-700' : isCurrent ? 'font-semibold text-blue-700' : 'text-gray-600'
	335	+ }`}
	336	+ >
	337	+ {step}
	338	+ </span>
	339	+ {isCurrent ? (
	340	+ <span className="text-[11px] font-semibold text-blue-600">진행중</span>
	341	+ ) : (
	342	+ <span className="text-[11px] text-gray-300">-</span>
	343	+ )}
	344	+ </button>
	345	+ </li>
	346	+ )
	347	+ })}
272	348	</ol>
	349	+ {org.stage === null && (
	350	+ <p className="mt-1 text-xs text-gray-400">채널 생성 시 신청 단계가 시작됩니다</p>
	351	+ )}
	352	+ {stageError && <p className="mt-1 text-xs text-red-600">{stageError}</p>}
273	353	</section>
274	354
275	355	{/* 통계 4칸 */}
...	...	@@ -322,12 +402,80 @@
322	402	<div className="mt-4 rounded-lg border border-gray-200">
323	403	<WorkMemos key={org.id} org={org} />
324	404	</div>
	405	+ ) : activeTab === '타임라인' ? (
	406	+ <div className="mt-4 rounded-lg border border-gray-200">
	407	+ <Timeline key={org.id} org={org} />
	408	+ </div>
325	409	) : (
326	410	<div className="mt-4 rounded-lg border border-dashed border-gray-200 p-10 text-center text-sm text-gray-400">
327	411	{activeTab} 상세 화면은 추후 확정
328	412	</div>
329	413	)}
330	414	</div>
	415	+
	416	+ {stagePickerOpen && (
	417	+ <StagePickerModal
	418	+ currentStage={org.stage}
	419	+ busy={stageBusy}
	420	+ onPick={(n) => void pickStage(n)}
	421	+ onClose={() => setStagePickerOpen(false)}
	422	+ />
	423	+ )}
	424	+ </div>
	425	+ )
	426	+}
	427	+
	428	+/** [진행단계 변경] 버튼이 여는 모달. 12개 단계 중 하나를 골라 바로 그 단계로 변경한다
	429	+ * (현재 단계는 굵게 표시). ContactPickerModal과 같은 오버레이/닫기 규칙을 따른다. */
	430	+function StagePickerModal({
	431	+ currentStage,
	432	+ busy,
	433	+ onPick,
	434	+ onClose,
	435	+}: {
	436	+ currentStage: number \| null
	437	+ busy: boolean
	438	+ onPick: (stage: number) => void
	439	+ onClose: () => void
	440	+}) {
	441	+ return (
	442	+ <div className="fixed inset-0 flex items-center justify-center bg-black/30">
	443	+ <div className="w-96 rounded-lg bg-white p-5">
	444	+ <div className="flex items-center justify-between">
	445	+ <h2 className="text-base font-semibold">진행단계 변경</h2>
	446	+ <button
	447	+ type="button"
	448	+ onClick={onClose}
	449	+ aria-label="닫기"
	450	+ className="rounded-md p-1 text-gray-400 hover:bg-gray-100"
	451	+ >
	452	+ ✕
	453	+ </button>
	454	+ </div>
	455	+
	456	+ <ul className="mt-3 max-h-80 space-y-1 overflow-y-auto">
	457	+ {STAGE_LABELS.map((label, i) => {
	458	+ const n = i + 1
	459	+ const isCurrent = currentStage === n
	460	+ return (
	461	+ <li key={label}>
	462	+ <button
	463	+ type="button"
	464	+ disabled={busy}
	465	+ onClick={() => onPick(n)}
	466	+ className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-gray-50 disabled:opacity-50 ${
	467	+ isCurrent ? 'font-semibold text-blue-700' : 'text-gray-700'
	468	+ }`}
	469	+ >
	470	+ <span className="w-5 shrink-0 text-xs text-gray-400">{n}</span>
	471	+ <span>{label}</span>
	472	+ {isCurrent && <span className="ml-auto text-xs text-blue-500">현재</span>}
	473	+ </button>
	474	+ </li>
	475	+ )
	476	+ })}
	477	+ </ul>
	478	+ </div>
331	479	</div>
332	480	)
333	481	}

...	...	@@ -52,6 +52,7 @@
52	52	lawyerAssignedDate: null,
53	53	channelIdMj: 'chan-mj',
54	54	channelIdLaw: 'chan-law',
	55	+ stage: null,
55	56	...overrides,
56	57	}
57	58	}

Delete comment