Commit @de951975a6dd0628390d3f367335897f6d8f18e2

ITN Dev 07-24

style: 권리확인/권리처리 상세화면을 정부시스템 폼 스타일로 재구성

- ReviewBoard/ProcessBoard 상세 뷰를 회색 라벨 셀 + 테두리 표 레이아웃으로 교체
- 권리확인 대분류/세부/처리결과 라디오를 참조 양식과 동일한 rowSpan 표로 재구성
  (접근성 이름은 aria-label로 원래 값 그대로 고정해 라벨/버튼 텍스트 불변 유지)
- ProcessBoard 상세 액션바에 삭제 버튼 추가(목록의 삭제와 동일한 확인+호출 동작)

@de951975a6dd0628390d3f367335897f6d8f18e2

e8d2325

de95197

frontend/src/components/ProcessBoard.test.tsx

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

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

...	...	@@ -350,4 +350,25 @@
350	350	expect(screen.getByRole('button', { name: '엑셀 업로드' })).toBeTruthy()
351	351	expect(mocks.updateProcessing).not.toHaveBeenCalled()
352	352	})
	353	+
	354	+ it('상세 화면에서 삭제를 누르면 확인 후 deleteProcessItem을 호출하고 목록으로 돌아간다', async () => {
	355	+ mocks.getProcessPage.mockResolvedValue(page())
	356	+ mocks.getProcessItem.mockResolvedValue(item())
	357	+ mocks.deleteProcessItem.mockResolvedValue(undefined)
	358	+ const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
	359	+
	360	+ render(<ProcessBoard org={org()} />)
	361	+
	362	+ await waitFor(() => expect(screen.getByText('2026년 사업 공고')).toBeTruthy())
	363	+ fireEvent.click(screen.getByRole('button', { name: '처리등록' }))
	364	+ await waitFor(() => expect(mocks.getProcessItem).toHaveBeenCalled())
	365	+
	366	+ fireEvent.click(screen.getByRole('button', { name: '삭제' }))
	367	+
	368	+ expect(confirmSpy).toHaveBeenCalled()
	369	+ await waitFor(() => expect(mocks.deleteProcessItem).toHaveBeenCalledWith(1, 1))
	370	+ await waitFor(() => expect(screen.getByRole('button', { name: '엑셀 업로드' })).toBeTruthy())
	371	+
	372	+ confirmSpy.mockRestore()
	373	+ })
353	374	})

e8d2325

de95197

frontend/src/components/ProcessBoard.tsx

--- frontend/src/components/ProcessBoard.tsx

+++ frontend/src/components/ProcessBoard.tsx


-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import {
   deleteProcessItem,
   getProcessItem,

   return text.length > max ? `${text.slice(0, max)}…` : text
 }
 
-function Field({ label, value }: { label: string; value: string | null }) {
+/** 소제목: 작은 파란 사각 불릿 + 굵은 제목. */
+function SectionHeader({ title }: { title: string }) {
   return (
-    <div className="flex gap-3 text-sm">
-      <span className="w-24 shrink-0 text-gray-400">{label}</span>
-      <span className={value ? 'text-gray-900' : 'text-gray-300'}>{value ?? '-'}</span>
+    <h3 className="flex items-center gap-2 text-sm font-bold">
+      <span className="h-2.5 w-2.5 shrink-0 bg-blue-700" />
+      {title}
+    </h3>
+  )
+}
+
+/** 정보 테이블의 회색 라벨 셀. required면 라벨 앞에 빨간 별표를 붙인다. */
+function LabelCell({ children, required }: { children: ReactNode; required?: boolean }) {
+  return (
+    <div className="flex items-center bg-gray-50 px-3 py-2 text-xs font-medium text-gray-600">
+      {required && <span className="text-red-500">*</span>}
+      {children}
+    </div>
+  )
+}
+
+/** 정보 테이블의 값 셀. */
+function ValueCell({ children }: { children: ReactNode }) {
+  return <div className="flex items-center px-3 py-1.5">{children}</div>
+}
+
+/** 읽기전용 값 표시용 회색 박스. */
+function ReadonlyBox({ value }: { value: ReactNode }) {
+  return (
+    <div className="w-full rounded border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-gray-800">
+      {value || <span className="text-gray-400">-</span>}
+    </div>
+  )
+}
+
+/** 단일 라벨/값 행(150px + 1fr). */
+function InfoRow({
+  label,
+  required,
+  children,
+}: {
+  label: string
+  required?: boolean
+  children: ReactNode
+}) {
+  return (
+    <div className="grid grid-cols-[150px_1fr]">
+      <LabelCell required={required}>{label}</LabelCell>
+      <ValueCell>{children}</ValueCell>
+    </div>
+  )
+}
+
+/** 라벨/값 두 쌍을 한 행에 나란히 배치(150px + 1fr + 150px + 1fr). */
+function InfoRowPair({
+  leftLabel,
+  left,
+  rightLabel,
+  right,
+}: {
+  leftLabel: string
+  left: ReactNode
+  rightLabel: string
+  right: ReactNode
+}) {
+  return (
+    <div className="grid grid-cols-[150px_1fr_150px_1fr]">
+      <LabelCell>{leftLabel}</LabelCell>
+      <ValueCell>{left}</ValueCell>
+      <LabelCell>{rightLabel}</LabelCell>
+      <ValueCell>{right}</ValueCell>
     </div>
   )
 }

     }
   }
 
+  async function handleDelete() {
+    if (!item) {
+      return
+    }
+    if (!window.confirm(`"${item.postTitle ?? item.seq}" 게시물을 삭제할까요?`)) {
+      return
+    }
+    setBusy(true)
+    setSaveError(null)
+    try {
+      await deleteProcessItem(org.id, itemId)
+      onSaved()
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : '삭제에 실패했습니다.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
   if (loading) {
     return <p className="p-4 py-10 text-center text-sm text-gray-400">불러오는 중…</p>
   }

   return (
     <div className="p-4">
       <section className="rounded-lg border border-gray-200 p-4">
-        <h2 className="text-sm font-semibold">기본정보</h2>
-        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
-          <Field label="기관명" value={org.orgName} />
-          <Field label="사이트명" value={item.siteName} />
-          <Field label="게시판명" value={item.boardName} />
-          <Field label="게시물제목" value={item.postTitle} />
-          <div className="flex gap-3 text-sm">
-            <span className="w-24 shrink-0 text-gray-400">URL</span>
-            {item.url ? (
-              <a href={item.url} target="_blank" rel="noreferrer" className="break-all text-blue-600 hover:underline">
-                {item.url}
-              </a>
-            ) : (
-              <span className="text-gray-300">-</span>
-            )}
-          </div>
-          <Field label="기존 공공누리" value={item.priorKoglType} />
+        <SectionHeader title="기본정보" />
+
+        <div className="mt-3 overflow-hidden rounded border border-gray-300 divide-y divide-gray-200">
+          <InfoRow label="기관명">
+            <ReadonlyBox value={org.orgName} />
+          </InfoRow>
+          <InfoRowPair
+            leftLabel="사이트명"
+            left={<ReadonlyBox value={item.siteName} />}
+            rightLabel="게시판명"
+            right={<ReadonlyBox value={item.boardName} />}
+          />
+          <InfoRow label="게시물제목">
+            <div className="flex w-full items-center gap-1.5 rounded border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-gray-800">
+              <span>{item.postTitle ?? '-'}</span>
+              {item.url && (
+                <a
+                  href={item.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  title="원문 보기"
+                  aria-label="원문 보기"
+                  className="text-blue-500 hover:underline"
+                >
+                  🔗
+                </a>
+              )}
+            </div>
+          </InfoRow>
+          <InfoRow label="기존 공공누리">
+            <ReadonlyBox value={item.priorKoglType} />
+          </InfoRow>
         </div>
       </section>
 
       <section className="mt-4 rounded-lg border border-gray-200 p-4">
-        <h2 className="text-sm font-semibold">권리확인</h2>
-        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
-          <Field
-            label="권리확인"
-            value={item.reviewMajor ? `${item.reviewMajor}${item.reviewMinor ? ` > ${item.reviewMinor}` : ''}` : null}
-          />
-          <Field
-            label="공공누리유형"
-            value={item.reviewKoglType ? `${item.reviewKoglType}${item.reviewAiType === 'Y' ? ' + AI' : ''}` : null}
-          />
-          <Field label="처리 구분" value={item.reviewResult} />
-          <Field label="의견" value={item.reviewOpinion} />
-          <Field label="비고" value={item.reviewNote} />
+        <SectionHeader title="권리확인" />
+
+        <div className="mt-3 overflow-hidden rounded border border-gray-300 divide-y divide-gray-200">
+          <InfoRow label="권리확인">
+            <ReadonlyBox
+              value={item.reviewMajor ? `${item.reviewMajor}${item.reviewMinor ? ` > ${item.reviewMinor}` : ''}` : null}
+            />
+          </InfoRow>
+          <InfoRow label="권리확인 공공누리유형">
+            <ReadonlyBox
+              value={item.reviewKoglType ? `${item.reviewKoglType}${item.reviewAiType === 'Y' ? ' + AI' : ''}` : null}
+            />
+          </InfoRow>
+          <InfoRow label="처리 구분">
+            <ReadonlyBox value={item.reviewResult} />
+          </InfoRow>
+          <InfoRow label="의견">
+            <ReadonlyBox value={item.reviewOpinion} />
+          </InfoRow>
+          <InfoRow label="비고">
+            <ReadonlyBox value={item.reviewNote} />
+          </InfoRow>
         </div>
       </section>
 
       <section className="mt-4 rounded-lg border border-gray-200 p-4">
-        <h2 className="text-sm font-semibold">권리처리</h2>
+        <SectionHeader title="권리처리" />
 
-        <div className="mt-3 flex flex-col gap-4">
-          <fieldset className="flex flex-col gap-1.5">
-            <legend className="text-xs text-gray-500">계약서 유무</legend>
-            <div className="flex flex-wrap gap-x-4 gap-y-1">
-              {CONTRACT_DOC_OPTIONS.map((option) => (
-                <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
+        <div className="mt-3 overflow-hidden rounded border border-gray-300 divide-y divide-gray-200">
+          <InfoRow label="계약서 유무">
+            <div className="flex flex-col gap-1.5">
+              <div className="flex flex-wrap gap-x-4 gap-y-1">
+                {CONTRACT_DOC_OPTIONS.map((option) => (
+                  <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
+                    <input
+                      type="checkbox"
+                      checked={contractSelected.has(option)}
+                      onChange={() => toggleContractOption(option)}
+                    />
+                    {option}
+                  </label>
+                ))}
+                <label className="flex items-center gap-1.5 text-sm text-gray-800">
                   <input
                     type="checkbox"
-                    checked={contractSelected.has(option)}
-                    onChange={() => toggleContractOption(option)}
+                    checked={contractSelected.has(CONTRACT_ETC)}
+                    onChange={() => toggleContractOption(CONTRACT_ETC)}
                   />
-                  {option}
+                  {CONTRACT_ETC}
                 </label>
-              ))}
-              <label className="flex items-center gap-1.5 text-sm text-gray-800">
+              </div>
+              {contractSelected.has(CONTRACT_ETC) && (
                 <input
-                  type="checkbox"
-                  checked={contractSelected.has(CONTRACT_ETC)}
-                  onChange={() => toggleContractOption(CONTRACT_ETC)}
+                  type="text"
+                  aria-label="기타 계약서 내용"
+                  value={contractEtc}
+                  onChange={(e) => setContractEtc(e.target.value)}
+                  placeholder="기타 내용을 입력하세요"
+                  className="w-72 rounded-md border border-gray-300 px-2 py-1.5 text-sm"
                 />
-                {CONTRACT_ETC}
-              </label>
+              )}
             </div>
-            {contractSelected.has(CONTRACT_ETC) && (
-              <input
-                type="text"
-                aria-label="기타 계약서 내용"
-                value={contractEtc}
-                onChange={(e) => setContractEtc(e.target.value)}
-                placeholder="기타 내용을 입력하세요"
-                className="mt-1 w-72 rounded-md border border-gray-300 px-2 py-1.5 text-sm"
-              />
-            )}
-          </fieldset>
+          </InfoRow>
 
-          <fieldset className="flex flex-col gap-1.5">
-            <legend className="text-xs text-gray-500">공공누리 유형</legend>
-            <div className="flex flex-wrap gap-x-4 gap-y-1">
-              {JUDGED_KOGL_TYPE_OPTIONS.map((option) => (
-                <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
+          <InfoRow label="공공누리 유형">
+            <div className="flex flex-col gap-1.5">
+              <div className="flex flex-wrap gap-x-4 gap-y-1">
+                {JUDGED_KOGL_TYPE_OPTIONS.filter((o) => o === '0유형' || o === '개방불가').map((option) => (
+                  <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
+                    <input
+                      type="radio"
+                      name="judged-kogl-type"
+                      checked={judgedKoglType === option}
+                      onChange={() => setJudgedKoglType(option)}
+                    />
+                    {option}
+                  </label>
+                ))}
+              </div>
+              <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+                {JUDGED_KOGL_TYPE_OPTIONS.filter((o) => o !== '0유형' && o !== '개방불가').map((option) => (
+                  <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
+                    <input
+                      type="radio"
+                      name="judged-kogl-type"
+                      checked={judgedKoglType === option}
+                      onChange={() => setJudgedKoglType(option)}
+                    />
+                    {option}
+                  </label>
+                ))}
+                <label className="ml-2 flex items-center gap-1.5 text-sm text-gray-800">
                   <input
-                    type="radio"
-                    name="judged-kogl-type"
-                    checked={judgedKoglType === option}
-                    onChange={() => setJudgedKoglType(option)}
+                    type="checkbox"
+                    checked={judgedAiType}
+                    onChange={(e) => setJudgedAiType(e.target.checked)}
                   />
-                  {option}
+                  AI유형
                 </label>
-              ))}
+              </div>
             </div>
-          </fieldset>
+          </InfoRow>
 
-          <label className="flex items-center gap-2 text-sm text-gray-800">
-            <input type="checkbox" checked={judgedAiType} onChange={(e) => setJudgedAiType(e.target.checked)} />
-            AI유형
-          </label>
-
-          <div className="flex flex-col gap-1 text-sm">
-            <label htmlFor="process-final-opinion" className="text-xs text-gray-500">
-              최종의견
-            </label>
-            <textarea
-              id="process-final-opinion"
-              rows={3}
-              value={finalOpinion}
-              onChange={(e) => setFinalOpinion(e.target.value)}
-              placeholder="전부 양도 체결, 일부 양도 체결, 초상 이용 동의, 공공누리 동의 등 처리한 사유 기입"
-              className="rounded-md border border-gray-300 px-2 py-1.5"
-            />
+          <div className="grid grid-cols-[150px_1fr]">
+            <LabelCell>권리처리 결과</LabelCell>
+            <div className="flex flex-col divide-y divide-gray-200">
+              <div className="grid grid-cols-[110px_1fr]">
+                <div className="flex items-center bg-gray-50 px-3 py-2 text-xs font-medium text-gray-600">
+                  최종의견
+                </div>
+                <div className="flex flex-col gap-1 px-3 py-1.5">
+                  <span className="text-[11px] text-gray-400">
+                    작성안내) 전부 양도 체결, 일부 양도 체결, 초상 이용 동의, 공공누리 동의 등 처리한 사유 기입
+                  </span>
+                  <textarea
+                    id="process-final-opinion"
+                    aria-label="최종의견"
+                    rows={3}
+                    value={finalOpinion}
+                    onChange={(e) => setFinalOpinion(e.target.value)}
+                    className="w-full rounded border border-gray-300 px-2 py-1.5 text-sm"
+                  />
+                </div>
+              </div>
+              <div className="grid grid-cols-[110px_1fr]">
+                <div className="flex items-center bg-gray-50 px-3 py-2 text-xs font-medium text-gray-600">
+                  판단근거
+                </div>
+                <div className="flex flex-col gap-1 px-3 py-1.5">
+                  <span className="text-[11px] text-gray-400">작성안내) 계약서 명칭, 해당 문구 기입</span>
+                  <textarea
+                    id="process-judgment-basis"
+                    aria-label="판단근거"
+                    rows={3}
+                    value={judgmentBasis}
+                    onChange={(e) => setJudgmentBasis(e.target.value)}
+                    className="w-full rounded border border-gray-300 px-2 py-1.5 text-sm"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
 
-          <div className="flex flex-col gap-1 text-sm">
-            <label htmlFor="process-judgment-basis" className="text-xs text-gray-500">
-              판단근거
-            </label>
-            <textarea
-              id="process-judgment-basis"
-              rows={3}
-              value={judgmentBasis}
-              onChange={(e) => setJudgmentBasis(e.target.value)}
-              placeholder="계약서 명칭, 해당 문구 기입"
-              className="rounded-md border border-gray-300 px-2 py-1.5"
-            />
-          </div>
-
-          <div className="flex flex-col gap-1 text-sm">
-            <label htmlFor="process-status" className="text-xs text-gray-500">
-              *권리처리상태
-            </label>
+          <InfoRow label="권리처리상태" required>
             <select
               id="process-status"
+              aria-label="*권리처리상태"
               value={processStatus}
               onChange={(e) => setProcessStatus(e.target.value)}
-              className="w-40 rounded-md border border-gray-300 px-2 py-1.5"
+              className="w-40 rounded-md border border-gray-300 px-2 py-1.5 text-sm"
             >
               <option value="">선택</option>
               {PROCESS_STATUS_OPTIONS.map((option) => (

                 </option>
               ))}
             </select>
-          </div>
+          </InfoRow>
         </div>
 
         {saveError && <p className="mt-3 text-sm text-red-600">{saveError}</p>}

             type="button"
             disabled={busy}
             onClick={onBack}
-            className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+            className="rounded-md bg-gray-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-gray-700 disabled:opacity-50"
           >
             목록
           </button>
           <button
             type="button"
+            disabled={busy}
+            onClick={() => void handleDelete()}
+            className="rounded-md border border-red-300 px-3 py-1.5 text-sm font-semibold text-red-600 hover:bg-red-50 disabled:opacity-50"
+          >
+            삭제
+          </button>
+          <button
+            type="button"
             disabled={busy || !processStatus}
             onClick={() => void handleSave()}
-            className="rounded-md bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-300"
+            className="rounded-md bg-blue-700 px-4 py-1.5 text-sm font-semibold text-white hover:bg-blue-800 disabled:cursor-not-allowed disabled:bg-gray-300"
           >
             수정
           </button>

e8d2325

de95197

frontend/src/components/ReviewBoard.tsx

--- frontend/src/components/ReviewBoard.tsx

+++ frontend/src/components/ReviewBoard.tsx


-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import {
   deleteReviewItem,
   getReviewItem,

   return null
 }
 
-function Field({ label, value }: { label: string; value: string | null }) {
+/** 세부(review-minor) 라디오의 실제 저장값은 REVIEW_MINOR_OPTIONS 그대로 유지하고,
+ * 참조 양식과 같은 화면 표기(줄바꿈된 부연설명)만 별도로 매핑한다. */
+const REVIEW_MINOR_DISPLAY: { value: string; label: string; note?: string }[] = [
+  { value: REVIEW_MINOR_OPTIONS[0], label: '1. 원시적 권리 전부 보유' },
+  { value: REVIEW_MINOR_OPTIONS[1], label: '2. 후천적 권리 전부 보유', note: '(계약에 의한 전부 양수)' },
+  {
+    value: REVIEW_MINOR_OPTIONS[2],
+    label: '3. 권리 일부(공동) 보유',
+    note: '(보도자료·제3자저작물, 계약에 의한 전부/공동 보유 등)',
+  },
+  { value: REVIEW_MINOR_OPTIONS[3], label: '4. 권리 미보유', note: '(공모전 수상작 등)' },
+  { value: REVIEW_MINOR_OPTIONS[4], label: '초상권 포함' },
+]
+
+/** 소제목: 작은 파란 사각 불릿 + 굵은 제목 + 회색 부연설명. */
+function SectionHeader({ title, note }: { title: string; note?: string }) {
   return (
-    <div className="flex gap-3 text-sm">
-      <span className="w-24 shrink-0 text-gray-400">{label}</span>
-      <span className={value ? 'text-gray-900' : 'text-gray-300'}>{value ?? '-'}</span>
+    <h3 className="flex items-center gap-2 text-sm font-bold">
+      <span className="h-2.5 w-2.5 shrink-0 bg-blue-700" />
+      {title}
+      {note && <span className="text-xs font-normal text-gray-400">{note}</span>}
+    </h3>
+  )
+}
+
+/** 정보 테이블의 회색 라벨 셀. */
+function LabelCell({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex items-center bg-gray-50 px-3 py-2 text-xs font-medium text-gray-600">{children}</div>
+  )
+}
+
+/** 정보 테이블의 값 셀. */
+function ValueCell({ children }: { children: ReactNode }) {
+  return <div className="flex items-center px-3 py-1.5">{children}</div>
+}
+
+/** 읽기전용 값 표시용 회색 박스. */
+function ReadonlyBox({ value }: { value: string | null }) {
+  return (
+    <div className="w-full rounded border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-gray-800">
+      {value ? value : <span className="text-gray-400">-</span>}
     </div>
   )
 }
 
-function RadioGroup({
-  legend,
-  name,
-  options,
-  value,
-  onChange,
-  disabled,
+/** 단일 라벨/값 행(150px + 1fr). */
+function InfoRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid grid-cols-[150px_1fr]">
+      <LabelCell>{label}</LabelCell>
+      <ValueCell>{children}</ValueCell>
+    </div>
+  )
+}
+
+/** 라벨/값 두 쌍을 한 행에 나란히 배치(150px + 1fr + 150px + 1fr). */
+function InfoRowPair({
+  leftLabel,
+  left,
+  rightLabel,
+  right,
 }: {
-  legend: string
-  name: string
-  options: string[]
-  value: string
-  onChange: (value: string) => void
-  disabled?: boolean
+  leftLabel: string
+  left: ReactNode
+  rightLabel: string
+  right: ReactNode
 }) {
   return (
-    <fieldset className="flex flex-col gap-1.5">
-      <legend className="text-xs text-gray-500">{legend}</legend>
-      <div className="flex flex-wrap gap-x-4 gap-y-1">
-        {options.map((option) => (
-          <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
-            <input
-              type="radio"
-              name={name}
-              disabled={disabled}
-              checked={value === option}
-              onChange={() => onChange(option)}
-            />
-            {option}
-          </label>
-        ))}
-      </div>
-    </fieldset>
+    <div className="grid grid-cols-[150px_1fr_150px_1fr]">
+      <LabelCell>{leftLabel}</LabelCell>
+      <ValueCell>{left}</ValueCell>
+      <LabelCell>{rightLabel}</LabelCell>
+      <ValueCell>{right}</ValueCell>
+    </div>
+  )
+}
+
+/** 권리확인 매트릭스 표의 라디오 한 칸. aria-label로 접근성 이름을 실제 저장값 텍스트로 고정해
+ * 화면 표기(줄바꿈된 부연설명)가 늘어나도 접근성 이름은 항상 원래 값과 동일하게 유지한다. */
+function MatrixRadio({
+  name,
+  value,
+  label,
+  note,
+  checked,
+  onChange,
+  bold,
+}: {
+  name: string
+  value: string
+  label?: string
+  note?: string
+  checked: boolean
+  onChange: () => void
+  bold?: boolean
+}) {
+  return (
+    <label className="flex cursor-pointer flex-col gap-0.5">
+      <span className="flex items-center gap-1.5">
+        <input type="radio" name={name} aria-label={value} checked={checked} onChange={onChange} />
+        <span className={bold ? 'font-semibold text-gray-900' : 'text-gray-800'}>{label ?? value}</span>
+      </span>
+      {note && <span className="pl-5 text-[11px] text-gray-400">{note}</span>}
+    </label>
   )
 }
 

     return <p className="p-4 py-10 text-center text-sm text-red-600">{loadError ?? '게시물을 찾을 수 없습니다.'}</p>
   }
 
+  const koglSummary = `${item.koglAttached ?? '-'} / ${item.koglType ?? '-'}${item.aiType ? ' · AI' : ''}`
+
   return (
     <div className="p-4">
       <section className="rounded-lg border border-gray-200 p-4">
-        <h2 className="text-sm font-semibold">게시물 정보 (조사원)</h2>
-        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
-          <Field label="기관명" value={org.orgName} />
-          <Field label="사이트명" value={item.siteName} />
-          <Field label="범주" value={item.category} />
-          <Field label="게시판명" value={item.boardName} />
-          <Field label="게시물제목" value={item.postTitle} />
-          <div className="flex gap-3 text-sm">
-            <span className="w-24 shrink-0 text-gray-400">URL</span>
+        <SectionHeader title="게시물 정보" note="(조사원)" />
+
+        <div className="mt-3 overflow-hidden rounded border border-gray-300 divide-y divide-gray-200">
+          <InfoRow label="기관명">
+            <ReadonlyBox value={org.orgName} />
+          </InfoRow>
+          <InfoRowPair
+            leftLabel="사이트명"
+            left={<ReadonlyBox value={item.siteName} />}
+            rightLabel="범주(카테고리)"
+            right={<ReadonlyBox value={item.category} />}
+          />
+          <InfoRow label="게시판명">
+            <ReadonlyBox value={item.boardName} />
+          </InfoRow>
+          <InfoRow label="게시물제목">
+            <ReadonlyBox value={item.postTitle} />
+          </InfoRow>
+          <InfoRow label="URL주소">
             {item.url ? (
-              <a href={item.url} target="_blank" rel="noreferrer" className="break-all text-blue-600 hover:underline">
+              <a
+                href={item.url}
+                target="_blank"
+                rel="noreferrer"
+                className="w-full break-all rounded border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-blue-600 hover:underline"
+              >
                 {item.url}
               </a>
             ) : (
-              <span className="text-gray-300">-</span>
+              <ReadonlyBox value={null} />
             )}
-          </div>
-          <Field label="제작일" value={item.producedDate} />
-          <Field label="공표일" value={item.publishedDate} />
-          <Field label="첨부파일 여부" value={item.hasAttachment} />
-          <Field label="기존 공공누리 부착" value={item.koglAttached} />
-          <Field label="기존 공공누리유형" value={item.koglType} />
-          <Field label="기존 AI유형" value={item.aiType} />
+          </InfoRow>
+          <InfoRowPair
+            leftLabel="제작일"
+            left={<ReadonlyBox value={item.producedDate} />}
+            rightLabel="공표일"
+            right={<ReadonlyBox value={item.publishedDate} />}
+          />
+          <InfoRow label="첨부파일 여부">
+            <ReadonlyBox value={item.hasAttachment} />
+          </InfoRow>
+          <InfoRow label="기존 공공누리">
+            <ReadonlyBox value={koglSummary} />
+          </InfoRow>
         </div>
       </section>
 
       <section className="mt-4 rounded-lg border border-gray-200 p-4">
-        <h2 className="text-sm font-semibold">권리확인 (변호사)</h2>
+        <SectionHeader title="권리확인" note="(변호사)" />
 
-        <div className="mt-3 flex flex-col gap-4">
-          <RadioGroup
-            legend="권리확인(대분류)"
-            name="review-major"
-            options={REVIEW_MAJOR_OPTIONS}
-            value={reviewMajor}
-            onChange={pickMajor}
-          />
+        <div className="mt-3 overflow-x-auto">
+          <table className="w-full border-collapse text-sm">
+            <thead>
+              <tr className="bg-gray-50 text-xs font-semibold text-gray-600">
+                <th className="border border-gray-300 px-3 py-2">좌(대분류)</th>
+                <th className="border border-gray-300 px-3 py-2">중(세부)</th>
+                <th className="border border-gray-300 px-3 py-2">우(처리결과)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className="border border-gray-300 px-3 py-2 align-top" rowSpan={1}>
+                  <MatrixRadio
+                    name="review-major"
+                    value={REVIEW_MAJOR_OPTIONS[0]}
+                    note="저작권성 없음, 배포용, 단순데이터"
+                    checked={reviewMajor === REVIEW_MAJOR_OPTIONS[0]}
+                    onChange={() => pickMajor(REVIEW_MAJOR_OPTIONS[0])}
+                  />
+                </td>
+                <td className="border border-gray-300 px-3 py-2" />
+                <td
+                  className="border border-gray-300 bg-gray-50 px-3 py-2 text-center align-middle"
+                  rowSpan={2}
+                >
+                  <MatrixRadio
+                    name="review-result"
+                    value={REVIEW_RESULT_OPTIONS[0]}
+                    checked={reviewResult === REVIEW_RESULT_OPTIONS[0]}
+                    onChange={() => pickResult(REVIEW_RESULT_OPTIONS[0])}
+                    bold
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-gray-300 px-3 py-2 align-top" rowSpan={1}>
+                  <MatrixRadio
+                    name="review-major"
+                    value={REVIEW_MAJOR_OPTIONS[1]}
+                    checked={reviewMajor === REVIEW_MAJOR_OPTIONS[1]}
+                    onChange={() => pickMajor(REVIEW_MAJOR_OPTIONS[1])}
+                  />
+                </td>
+                <td className="border border-gray-300 px-3 py-2 align-top">
+                  <MatrixRadio
+                    name="review-minor"
+                    value={REVIEW_MINOR_DISPLAY[0].value}
+                    label={REVIEW_MINOR_DISPLAY[0].label}
+                    checked={reviewMinor === REVIEW_MINOR_DISPLAY[0].value}
+                    onChange={() => pickMinor(REVIEW_MINOR_DISPLAY[0].value)}
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-gray-300 px-3 py-2 align-top" rowSpan={4}>
+                  <MatrixRadio
+                    name="review-major"
+                    value={REVIEW_MAJOR_OPTIONS[2]}
+                    checked={reviewMajor === REVIEW_MAJOR_OPTIONS[2]}
+                    onChange={() => pickMajor(REVIEW_MAJOR_OPTIONS[2])}
+                  />
+                </td>
+                <td className="border border-gray-300 px-3 py-2 align-top">
+                  <MatrixRadio
+                    name="review-minor"
+                    value={REVIEW_MINOR_DISPLAY[1].value}
+                    label={REVIEW_MINOR_DISPLAY[1].label}
+                    note={REVIEW_MINOR_DISPLAY[1].note}
+                    checked={reviewMinor === REVIEW_MINOR_DISPLAY[1].value}
+                    onChange={() => pickMinor(REVIEW_MINOR_DISPLAY[1].value)}
+                  />
+                </td>
+                <td
+                  className="border border-gray-300 bg-gray-50 px-3 py-2 text-center align-middle"
+                  rowSpan={1}
+                >
+                  <MatrixRadio
+                    name="review-result"
+                    value={REVIEW_RESULT_OPTIONS[1]}
+                    checked={reviewResult === REVIEW_RESULT_OPTIONS[1]}
+                    onChange={() => pickResult(REVIEW_RESULT_OPTIONS[1])}
+                    bold
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-gray-300 px-3 py-2 align-top">
+                  <MatrixRadio
+                    name="review-minor"
+                    value={REVIEW_MINOR_DISPLAY[2].value}
+                    label={REVIEW_MINOR_DISPLAY[2].label}
+                    note={REVIEW_MINOR_DISPLAY[2].note}
+                    checked={reviewMinor === REVIEW_MINOR_DISPLAY[2].value}
+                    onChange={() => pickMinor(REVIEW_MINOR_DISPLAY[2].value)}
+                  />
+                </td>
+                <td
+                  className="border border-gray-300 bg-gray-50 px-3 py-2 text-center align-middle"
+                  rowSpan={3}
+                >
+                  <MatrixRadio
+                    name="review-result"
+                    value={REVIEW_RESULT_OPTIONS[2]}
+                    checked={reviewResult === REVIEW_RESULT_OPTIONS[2]}
+                    onChange={() => pickResult(REVIEW_RESULT_OPTIONS[2])}
+                    bold
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-gray-300 px-3 py-2 align-top">
+                  <MatrixRadio
+                    name="review-minor"
+                    value={REVIEW_MINOR_DISPLAY[3].value}
+                    label={REVIEW_MINOR_DISPLAY[3].label}
+                    note={REVIEW_MINOR_DISPLAY[3].note}
+                    checked={reviewMinor === REVIEW_MINOR_DISPLAY[3].value}
+                    onChange={() => pickMinor(REVIEW_MINOR_DISPLAY[3].value)}
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-gray-300 px-3 py-2 align-top">
+                  <MatrixRadio
+                    name="review-minor"
+                    value={REVIEW_MINOR_DISPLAY[4].value}
+                    label={REVIEW_MINOR_DISPLAY[4].label}
+                    checked={reviewMinor === REVIEW_MINOR_DISPLAY[4].value}
+                    onChange={() => pickMinor(REVIEW_MINOR_DISPLAY[4].value)}
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-gray-300 px-3 py-2 align-top" rowSpan={1}>
+                  <MatrixRadio
+                    name="review-major"
+                    value={REVIEW_MAJOR_OPTIONS[3]}
+                    note="공공누리 적용 제외 대상, 검토불가"
+                    checked={reviewMajor === REVIEW_MAJOR_OPTIONS[3]}
+                    onChange={() => pickMajor(REVIEW_MAJOR_OPTIONS[3])}
+                  />
+                </td>
+                <td className="border border-gray-300 px-3 py-2" />
+                <td
+                  className="border border-gray-300 bg-gray-50 px-3 py-2 text-center align-middle"
+                  rowSpan={1}
+                >
+                  <MatrixRadio
+                    name="review-result"
+                    value={REVIEW_RESULT_OPTIONS[3]}
+                    checked={reviewResult === REVIEW_RESULT_OPTIONS[3]}
+                    onChange={() => pickResult(REVIEW_RESULT_OPTIONS[3])}
+                    bold
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
 
-          {reviewMajor === '제3자 권리' && (
-            <RadioGroup
-              legend="권리확인(세부)"
-              name="review-minor"
-              options={REVIEW_MINOR_OPTIONS}
-              value={reviewMinor}
-              onChange={pickMinor}
-            />
-          )}
+        <div className="mt-3 overflow-hidden rounded border border-gray-300 divide-y divide-gray-200">
+          <InfoRow label="공공누리 유형">
+            <div className="flex flex-col gap-1.5">
+              <div className="flex flex-wrap gap-x-4 gap-y-1">
+                {JUDGED_KOGL_TYPE_OPTIONS.filter((o) => o === '0유형' || o === '개방불가').map((option) => (
+                  <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
+                    <input
+                      type="radio"
+                      name="judged-kogl-type"
+                      checked={judgedKoglType === option}
+                      onChange={() => setJudgedKoglType(option)}
+                    />
+                    {option}
+                  </label>
+                ))}
+              </div>
+              <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
+                {JUDGED_KOGL_TYPE_OPTIONS.filter((o) => o !== '0유형' && o !== '개방불가').map((option) => (
+                  <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
+                    <input
+                      type="radio"
+                      name="judged-kogl-type"
+                      checked={judgedKoglType === option}
+                      onChange={() => setJudgedKoglType(option)}
+                    />
+                    {option}
+                  </label>
+                ))}
+                <label className="ml-2 flex items-center gap-1.5 text-sm text-gray-800">
+                  <input
+                    type="checkbox"
+                    checked={judgedAiType}
+                    onChange={(e) => setJudgedAiType(e.target.checked)}
+                  />
+                  AI유형
+                </label>
+              </div>
+            </div>
+          </InfoRow>
 
-          <RadioGroup
-            legend="처리결과"
-            name="review-result"
-            options={REVIEW_RESULT_OPTIONS}
-            value={reviewResult}
-            onChange={pickResult}
-          />
-
-          <RadioGroup
-            legend="공공누리유형(판정)"
-            name="judged-kogl-type"
-            options={JUDGED_KOGL_TYPE_OPTIONS}
-            value={judgedKoglType}
-            onChange={setJudgedKoglType}
-          />
-
-          <label className="flex items-center gap-2 text-sm text-gray-800">
-            <input
-              type="checkbox"
-              checked={judgedAiType}
-              onChange={(e) => setJudgedAiType(e.target.checked)}
-            />
-            AI유형
-          </label>
-
-          <label className="flex items-center gap-2 text-sm text-gray-800">
-            <input
-              type="checkbox"
-              checked={needsProcessing}
-              onChange={(e) => setNeedsProcessing(e.target.checked)}
-            />
-            권리처리필요
-          </label>
-
-          <div className="flex flex-col gap-1 text-sm">
-            <label htmlFor="review-opinion" className="text-xs text-gray-500">
-              의견
+          <InfoRow label="권리처리필요">
+            <label className="flex items-center gap-1.5 text-sm text-gray-800">
+              <input
+                type="checkbox"
+                checked={needsProcessing}
+                onChange={(e) => setNeedsProcessing(e.target.checked)}
+              />
+              권리처리필요
             </label>
+          </InfoRow>
+
+          <InfoRow label="의견">
             <textarea
               id="review-opinion"
+              aria-label="의견"
               rows={3}
               value={opinion}
               onChange={(e) => setOpinion(e.target.value)}
-              className="rounded-md border border-gray-300 px-2 py-1.5"
+              className="w-full rounded border border-gray-300 px-2 py-1.5 text-sm"
             />
-          </div>
+          </InfoRow>
 
-          <div className="flex flex-col gap-1 text-sm">
-            <label htmlFor="review-lawyer-note" className="text-xs text-gray-500">
-              비고
-            </label>
+          <InfoRow label="비고">
             <textarea
               id="review-lawyer-note"
+              aria-label="비고"
               rows={3}
               value={lawyerNote}
               onChange={(e) => setLawyerNote(e.target.value)}
-              className="rounded-md border border-gray-300 px-2 py-1.5"
+              className="w-full rounded border border-gray-300 px-2 py-1.5 text-sm"
             />
-          </div>
+          </InfoRow>
         </div>
 
         {saveError && <p className="mt-3 text-sm text-red-600">{saveError}</p>}

             type="button"
             disabled={busy}
             onClick={onBack}
-            className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+            className="rounded-md bg-gray-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-gray-700 disabled:opacity-50"
           >
             목록
           </button>

             type="button"
             disabled={busy}
             onClick={() => void handleSave()}
-            className="rounded-md bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-300"
+            className="rounded-md bg-blue-700 px-4 py-1.5 text-sm font-semibold text-white hover:bg-blue-800 disabled:cursor-not-allowed disabled:bg-gray-300"
           >
             수정
           </button>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,4 +1,4 @@
1		-import { useEffect, useRef, useState } from 'react'
	1	+import { useEffect, useRef, useState, type ReactNode } from 'react'
2	2	import {
3	3	deleteProcessItem,
4	4	getProcessItem,
...	...	@@ -77,11 +77,76 @@
77	77	return text.length > max ? `${text.slice(0, max)}…` : text
78	78	}
79	79
80		-function Field({ label, value }: { label: string; value: string \| null }) {
	80	+/** 소제목: 작은 파란 사각 불릿 + 굵은 제목. */
	81	+function SectionHeader({ title }: { title: string }) {
81	82	return (
82		- <div className="flex gap-3 text-sm">
83		- <span className="w-24 shrink-0 text-gray-400">{label}</span>
84		- <span className={value ? 'text-gray-900' : 'text-gray-300'}>{value ?? '-'}</span>
	83	+ <h3 className="flex items-center gap-2 text-sm font-bold">
	84	+ <span className="h-2.5 w-2.5 shrink-0 bg-blue-700" />
	85	+ {title}
	86	+ </h3>
	87	+ )
	88	+}
	89	+
	90	+/** 정보 테이블의 회색 라벨 셀. required면 라벨 앞에 빨간 별표를 붙인다. */
	91	+function LabelCell({ children, required }: { children: ReactNode; required?: boolean }) {
	92	+ return (
	93	+ <div className="flex items-center bg-gray-50 px-3 py-2 text-xs font-medium text-gray-600">
	94	+ {required && <span className="text-red-500">*</span>}
	95	+ {children}
	96	+ </div>
	97	+ )
	98	+}
	99	+
	100	+/** 정보 테이블의 값 셀. */
	101	+function ValueCell({ children }: { children: ReactNode }) {
	102	+ return <div className="flex items-center px-3 py-1.5">{children}</div>
	103	+}
	104	+
	105	+/** 읽기전용 값 표시용 회색 박스. */
	106	+function ReadonlyBox({ value }: { value: ReactNode }) {
	107	+ return (
	108	+ <div className="w-full rounded border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-gray-800">
	109	+ {value \|\| <span className="text-gray-400">-</span>}
	110	+ </div>
	111	+ )
	112	+}
	113	+
	114	+/** 단일 라벨/값 행(150px + 1fr). */
	115	+function InfoRow({
	116	+ label,
	117	+ required,
	118	+ children,
	119	+}: {
	120	+ label: string
	121	+ required?: boolean
	122	+ children: ReactNode
	123	+}) {
	124	+ return (
	125	+ <div className="grid grid-cols-[150px_1fr]">
	126	+ <LabelCell required={required}>{label}</LabelCell>
	127	+ <ValueCell>{children}</ValueCell>
	128	+ </div>
	129	+ )
	130	+}
	131	+
	132	+/** 라벨/값 두 쌍을 한 행에 나란히 배치(150px + 1fr + 150px + 1fr). */
	133	+function InfoRowPair({
	134	+ leftLabel,
	135	+ left,
	136	+ rightLabel,
	137	+ right,
	138	+}: {
	139	+ leftLabel: string
	140	+ left: ReactNode
	141	+ rightLabel: string
	142	+ right: ReactNode
	143	+}) {
	144	+ return (
	145	+ <div className="grid grid-cols-[150px_1fr_150px_1fr]">
	146	+ <LabelCell>{leftLabel}</LabelCell>
	147	+ <ValueCell>{left}</ValueCell>
	148	+ <LabelCell>{rightLabel}</LabelCell>
	149	+ <ValueCell>{right}</ValueCell>
85	150	</div>
86	151	)
87	152	}
...	...	@@ -561,6 +626,25 @@
561	626	}
562	627	}
563	628
	629	+ async function handleDelete() {
	630	+ if (!item) {
	631	+ return
	632	+ }
	633	+ if (!window.confirm(`"${item.postTitle ?? item.seq}" 게시물을 삭제할까요?`)) {
	634	+ return
	635	+ }
	636	+ setBusy(true)
	637	+ setSaveError(null)
	638	+ try {
	639	+ await deleteProcessItem(org.id, itemId)
	640	+ onSaved()
	641	+ } catch (e) {
	642	+ setSaveError(e instanceof Error ? e.message : '삭제에 실패했습니다.')
	643	+ } finally {
	644	+ setBusy(false)
	645	+ }
	646	+ }
	647	+
564	648	if (loading) {
565	649	return <p className="p-4 py-10 text-center text-sm text-gray-400">불러오는 중…</p>
566	650	}
...	...	@@ -571,140 +655,192 @@
571	655	return (
572	656	<div className="p-4">
573	657	<section className="rounded-lg border border-gray-200 p-4">
574		- <h2 className="text-sm font-semibold">기본정보</h2>
575		- <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
576		- <Field label="기관명" value={org.orgName} />
577		- <Field label="사이트명" value={item.siteName} />
578		- <Field label="게시판명" value={item.boardName} />
579		- <Field label="게시물제목" value={item.postTitle} />
580		- <div className="flex gap-3 text-sm">
581		- <span className="w-24 shrink-0 text-gray-400">URL</span>
582		- {item.url ? (
583		- <a href={item.url} target="_blank" rel="noreferrer" className="break-all text-blue-600 hover:underline">
584		- {item.url}
585		- </a>
586		- ) : (
587		- <span className="text-gray-300">-</span>
588		- )}
589		- </div>
590		- <Field label="기존 공공누리" value={item.priorKoglType} />
	658	+ <SectionHeader title="기본정보" />
	659	+
	660	+ <div className="mt-3 overflow-hidden rounded border border-gray-300 divide-y divide-gray-200">
	661	+ <InfoRow label="기관명">
	662	+ <ReadonlyBox value={org.orgName} />
	663	+ </InfoRow>
	664	+ <InfoRowPair
	665	+ leftLabel="사이트명"
	666	+ left={<ReadonlyBox value={item.siteName} />}
	667	+ rightLabel="게시판명"
	668	+ right={<ReadonlyBox value={item.boardName} />}
	669	+ />
	670	+ <InfoRow label="게시물제목">
	671	+ <div className="flex w-full items-center gap-1.5 rounded border border-gray-200 bg-gray-100 px-3 py-1.5 text-sm text-gray-800">
	672	+ <span>{item.postTitle ?? '-'}</span>
	673	+ {item.url && (
	674	+ <a
	675	+ href={item.url}
	676	+ target="_blank"
	677	+ rel="noreferrer"
	678	+ title="원문 보기"
	679	+ aria-label="원문 보기"
	680	+ className="text-blue-500 hover:underline"
	681	+ >
	682	+ 🔗
	683	+ </a>
	684	+ )}
	685	+ </div>
	686	+ </InfoRow>
	687	+ <InfoRow label="기존 공공누리">
	688	+ <ReadonlyBox value={item.priorKoglType} />
	689	+ </InfoRow>
591	690	</div>
592	691	</section>
593	692
594	693	<section className="mt-4 rounded-lg border border-gray-200 p-4">
595		- <h2 className="text-sm font-semibold">권리확인</h2>
596		- <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
597		- <Field
598		- label="권리확인"
599		- value={item.reviewMajor ? `${item.reviewMajor}${item.reviewMinor ? ` > ${item.reviewMinor}` : ''}` : null}
600		- />
601		- <Field
602		- label="공공누리유형"
603		- value={item.reviewKoglType ? `${item.reviewKoglType}${item.reviewAiType === 'Y' ? ' + AI' : ''}` : null}
604		- />
605		- <Field label="처리 구분" value={item.reviewResult} />
606		- <Field label="의견" value={item.reviewOpinion} />
607		- <Field label="비고" value={item.reviewNote} />
	694	+ <SectionHeader title="권리확인" />
	695	+
	696	+ <div className="mt-3 overflow-hidden rounded border border-gray-300 divide-y divide-gray-200">
	697	+ <InfoRow label="권리확인">
	698	+ <ReadonlyBox
	699	+ value={item.reviewMajor ? `${item.reviewMajor}${item.reviewMinor ? ` > ${item.reviewMinor}` : ''}` : null}
	700	+ />
	701	+ </InfoRow>
	702	+ <InfoRow label="권리확인 공공누리유형">
	703	+ <ReadonlyBox
	704	+ value={item.reviewKoglType ? `${item.reviewKoglType}${item.reviewAiType === 'Y' ? ' + AI' : ''}` : null}
	705	+ />
	706	+ </InfoRow>
	707	+ <InfoRow label="처리 구분">
	708	+ <ReadonlyBox value={item.reviewResult} />
	709	+ </InfoRow>
	710	+ <InfoRow label="의견">
	711	+ <ReadonlyBox value={item.reviewOpinion} />
	712	+ </InfoRow>
	713	+ <InfoRow label="비고">
	714	+ <ReadonlyBox value={item.reviewNote} />
	715	+ </InfoRow>
608	716	</div>
609	717	</section>
610	718
611	719	<section className="mt-4 rounded-lg border border-gray-200 p-4">
612		- <h2 className="text-sm font-semibold">권리처리</h2>
	720	+ <SectionHeader title="권리처리" />
613	721
614		- <div className="mt-3 flex flex-col gap-4">
615		- <fieldset className="flex flex-col gap-1.5">
616		- <legend className="text-xs text-gray-500">계약서 유무</legend>
617		- <div className="flex flex-wrap gap-x-4 gap-y-1">
618		- {CONTRACT_DOC_OPTIONS.map((option) => (
619		- <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
	722	+ <div className="mt-3 overflow-hidden rounded border border-gray-300 divide-y divide-gray-200">
	723	+ <InfoRow label="계약서 유무">
	724	+ <div className="flex flex-col gap-1.5">
	725	+ <div className="flex flex-wrap gap-x-4 gap-y-1">
	726	+ {CONTRACT_DOC_OPTIONS.map((option) => (
	727	+ <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
	728	+ <input
	729	+ type="checkbox"
	730	+ checked={contractSelected.has(option)}
	731	+ onChange={() => toggleContractOption(option)}
	732	+ />
	733	+ {option}
	734	+ </label>
	735	+ ))}
	736	+ <label className="flex items-center gap-1.5 text-sm text-gray-800">
620	737	<input
621	738	type="checkbox"
622		- checked={contractSelected.has(option)}
623		- onChange={() => toggleContractOption(option)}
	739	+ checked={contractSelected.has(CONTRACT_ETC)}
	740	+ onChange={() => toggleContractOption(CONTRACT_ETC)}
624	741	/>
625		- {option}
	742	+ {CONTRACT_ETC}
626	743	</label>
627		- ))}
628		- <label className="flex items-center gap-1.5 text-sm text-gray-800">
	744	+ </div>
	745	+ {contractSelected.has(CONTRACT_ETC) && (
629	746	<input
630		- type="checkbox"
631		- checked={contractSelected.has(CONTRACT_ETC)}
632		- onChange={() => toggleContractOption(CONTRACT_ETC)}
	747	+ type="text"
	748	+ aria-label="기타 계약서 내용"
	749	+ value={contractEtc}
	750	+ onChange={(e) => setContractEtc(e.target.value)}
	751	+ placeholder="기타 내용을 입력하세요"
	752	+ className="w-72 rounded-md border border-gray-300 px-2 py-1.5 text-sm"
633	753	/>
634		- {CONTRACT_ETC}
635		- </label>
	754	+ )}
636	755	</div>
637		- {contractSelected.has(CONTRACT_ETC) && (
638		- <input
639		- type="text"
640		- aria-label="기타 계약서 내용"
641		- value={contractEtc}
642		- onChange={(e) => setContractEtc(e.target.value)}
643		- placeholder="기타 내용을 입력하세요"
644		- className="mt-1 w-72 rounded-md border border-gray-300 px-2 py-1.5 text-sm"
645		- />
646		- )}
647		- </fieldset>
	756	+ </InfoRow>
648	757
649		- <fieldset className="flex flex-col gap-1.5">
650		- <legend className="text-xs text-gray-500">공공누리 유형</legend>
651		- <div className="flex flex-wrap gap-x-4 gap-y-1">
652		- {JUDGED_KOGL_TYPE_OPTIONS.map((option) => (
653		- <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
	758	+ <InfoRow label="공공누리 유형">
	759	+ <div className="flex flex-col gap-1.5">
	760	+ <div className="flex flex-wrap gap-x-4 gap-y-1">
	761	+ {JUDGED_KOGL_TYPE_OPTIONS.filter((o) => o === '0유형' \|\| o === '개방불가').map((option) => (
	762	+ <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
	763	+ <input
	764	+ type="radio"
	765	+ name="judged-kogl-type"
	766	+ checked={judgedKoglType === option}
	767	+ onChange={() => setJudgedKoglType(option)}
	768	+ />
	769	+ {option}
	770	+ </label>
	771	+ ))}
	772	+ </div>
	773	+ <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
	774	+ {JUDGED_KOGL_TYPE_OPTIONS.filter((o) => o !== '0유형' && o !== '개방불가').map((option) => (
	775	+ <label key={option} className="flex items-center gap-1.5 text-sm text-gray-800">
	776	+ <input
	777	+ type="radio"
	778	+ name="judged-kogl-type"
	779	+ checked={judgedKoglType === option}
	780	+ onChange={() => setJudgedKoglType(option)}
	781	+ />
	782	+ {option}
	783	+ </label>
	784	+ ))}
	785	+ <label className="ml-2 flex items-center gap-1.5 text-sm text-gray-800">
654	786	<input
655		- type="radio"
656		- name="judged-kogl-type"
657		- checked={judgedKoglType === option}
658		- onChange={() => setJudgedKoglType(option)}
	787	+ type="checkbox"
	788	+ checked={judgedAiType}
	789	+ onChange={(e) => setJudgedAiType(e.target.checked)}
659	790	/>
660		- {option}
	791	+ AI유형
661	792	</label>
662		- ))}
	793	+ </div>
663	794	</div>
664		- </fieldset>
	795	+ </InfoRow>
665	796
666		- <label className="flex items-center gap-2 text-sm text-gray-800">
667		- <input type="checkbox" checked={judgedAiType} onChange={(e) => setJudgedAiType(e.target.checked)} />
668		- AI유형
669		- </label>
670		-
671		- <div className="flex flex-col gap-1 text-sm">
672		- <label htmlFor="process-final-opinion" className="text-xs text-gray-500">
673		- 최종의견
674		- </label>
675		- <textarea
676		- id="process-final-opinion"
677		- rows={3}
678		- value={finalOpinion}
679		- onChange={(e) => setFinalOpinion(e.target.value)}
680		- placeholder="전부 양도 체결, 일부 양도 체결, 초상 이용 동의, 공공누리 동의 등 처리한 사유 기입"
681		- className="rounded-md border border-gray-300 px-2 py-1.5"
682		- />
	797	+ <div className="grid grid-cols-[150px_1fr]">
	798	+ <LabelCell>권리처리 결과</LabelCell>
	799	+ <div className="flex flex-col divide-y divide-gray-200">
	800	+ <div className="grid grid-cols-[110px_1fr]">
	801	+ <div className="flex items-center bg-gray-50 px-3 py-2 text-xs font-medium text-gray-600">
	802	+ 최종의견
	803	+ </div>
	804	+ <div className="flex flex-col gap-1 px-3 py-1.5">
	805	+ <span className="text-[11px] text-gray-400">
	806	+ 작성안내) 전부 양도 체결, 일부 양도 체결, 초상 이용 동의, 공공누리 동의 등 처리한 사유 기입
	807	+ </span>
	808	+ <textarea
	809	+ id="process-final-opinion"
	810	+ aria-label="최종의견"
	811	+ rows={3}
	812	+ value={finalOpinion}
	813	+ onChange={(e) => setFinalOpinion(e.target.value)}
	814	+ className="w-full rounded border border-gray-300 px-2 py-1.5 text-sm"
	815	+ />
	816	+ </div>
	817	+ </div>
	818	+ <div className="grid grid-cols-[110px_1fr]">
	819	+ <div className="flex items-center bg-gray-50 px-3 py-2 text-xs font-medium text-gray-600">
	820	+ 판단근거
	821	+ </div>
	822	+ <div className="flex flex-col gap-1 px-3 py-1.5">
	823	+ <span className="text-[11px] text-gray-400">작성안내) 계약서 명칭, 해당 문구 기입</span>
	824	+ <textarea
	825	+ id="process-judgment-basis"
	826	+ aria-label="판단근거"
	827	+ rows={3}
	828	+ value={judgmentBasis}
	829	+ onChange={(e) => setJudgmentBasis(e.target.value)}
	830	+ className="w-full rounded border border-gray-300 px-2 py-1.5 text-sm"
	831	+ />
	832	+ </div>
	833	+ </div>
	834	+ </div>
683	835	</div>
684	836
685		- <div className="flex flex-col gap-1 text-sm">
686		- <label htmlFor="process-judgment-basis" className="text-xs text-gray-500">
687		- 판단근거
688		- </label>
689		- <textarea
690		- id="process-judgment-basis"
691		- rows={3}
692		- value={judgmentBasis}
693		- onChange={(e) => setJudgmentBasis(e.target.value)}
694		- placeholder="계약서 명칭, 해당 문구 기입"
695		- className="rounded-md border border-gray-300 px-2 py-1.5"
696		- />
697		- </div>
698		-
699		- <div className="flex flex-col gap-1 text-sm">
700		- <label htmlFor="process-status" className="text-xs text-gray-500">
701		- *권리처리상태
702		- </label>
	837	+ <InfoRow label="권리처리상태" required>
703	838	<select
704	839	id="process-status"
	840	+ aria-label="*권리처리상태"
705	841	value={processStatus}
706	842	onChange={(e) => setProcessStatus(e.target.value)}
707		- className="w-40 rounded-md border border-gray-300 px-2 py-1.5"
	843	+ className="w-40 rounded-md border border-gray-300 px-2 py-1.5 text-sm"
708	844	>
709	845	<option value="">선택</option>
710	846	{PROCESS_STATUS_OPTIONS.map((option) => (
...	...	@@ -713,7 +849,7 @@
713	849	</option>
714	850	))}
715	851	</select>
716		- </div>
	852	+ </InfoRow>
717	853	</div>
718	854
719	855	{saveError && <p className="mt-3 text-sm text-red-600">{saveError}</p>}
...	...	@@ -723,15 +859,23 @@
723	859	type="button"
724	860	disabled={busy}
725	861	onClick={onBack}
726		- className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
	862	+ className="rounded-md bg-gray-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-gray-700 disabled:opacity-50"
727	863	>
728	864	목록
729	865	</button>
730	866	<button
731	867	type="button"
	868	+ disabled={busy}
	869	+ onClick={() => void handleDelete()}
	870	+ className="rounded-md border border-red-300 px-3 py-1.5 text-sm font-semibold text-red-600 hover:bg-red-50 disabled:opacity-50"
	871	+ >
	872	+ 삭제
	873	+ </button>
	874	+ <button
	875	+ type="button"
732	876	disabled={busy \|\| !processStatus}
733	877	onClick={() => void handleSave()}
734		- className="rounded-md bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-300"
	878	+ className="rounded-md bg-blue-700 px-4 py-1.5 text-sm font-semibold text-white hover:bg-blue-800 disabled:cursor-not-allowed disabled:bg-gray-300"
735	879	>
736	880	수정
737	881	</button>

Delete comment