+
+);
+
+export default AdminPlaceholder;
diff --git a/frontend/src/tabs/admin/components/AdminSidebar.tsx b/frontend/src/tabs/admin/components/AdminSidebar.tsx
new file mode 100644
index 0000000..59852a3
--- /dev/null
+++ b/frontend/src/tabs/admin/components/AdminSidebar.tsx
@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import { ADMIN_MENU } from './adminMenuConfig';
+import type { AdminMenuItem } from './adminMenuConfig';
+
+interface AdminSidebarProps {
+ activeMenu: string;
+ onSelect: (id: string) => void;
+}
+
+/** 관리자 좌측 사이드바 — 9-섹션 아코디언 */
+const AdminSidebar = ({ activeMenu, onSelect }: AdminSidebarProps) => {
+ const [expanded, setExpanded] = useState🚧
+ {label}
+ 해당 기능은 준비 중입니다.
+
+
+ {isOpen && item.children && (
+
+ );
+ };
+
+ const renderItem = (item: AdminMenuItem, depth: number) => {
+ if (item.children && item.children.length > 0) {
+ return renderGroup(item, depth);
+ }
+ return renderLeaf(item, depth);
+ };
+
+ return (
+
+ {item.children.map(child => renderItem(child, depth + 1))}
+
+ )}
+
+ {/* 헤더 */}
+
+ );
+};
+
+/** children 중 첫 번째 leaf 노드를 찾는다 */
+function findFirstLeaf(items: AdminMenuItem[]): AdminMenuItem | null {
+ for (const item of items) {
+ if (!item.children || item.children.length === 0) return item;
+ const found = findFirstLeaf(item.children);
+ if (found) return found;
+ }
+ return null;
+}
+
+export default AdminSidebar;
diff --git a/frontend/src/tabs/admin/components/AdminView.tsx b/frontend/src/tabs/admin/components/AdminView.tsx
index 3633998..1182643 100755
--- a/frontend/src/tabs/admin/components/AdminView.tsx
+++ b/frontend/src/tabs/admin/components/AdminView.tsx
@@ -1,21 +1,42 @@
-import { useSubMenu } from '@common/hooks/useSubMenu'
-import UsersPanel from './UsersPanel'
-import PermissionsPanel from './PermissionsPanel'
-import MenusPanel from './MenusPanel'
-import SettingsPanel from './SettingsPanel'
+import { useState } from 'react';
+import AdminSidebar from './AdminSidebar';
+import AdminPlaceholder from './AdminPlaceholder';
+import { findMenuLabel } from './adminMenuConfig';
+import UsersPanel from './UsersPanel';
+import PermissionsPanel from './PermissionsPanel';
+import MenusPanel from './MenusPanel';
+import SettingsPanel from './SettingsPanel';
+import BoardMgmtPanel from './BoardMgmtPanel';
+import VesselSignalPanel from './VesselSignalPanel';
+
+/** 기존 패널이 있는 메뉴 ID 매핑 */
+const PANEL_MAP: Record
+
+
+ {/* 메뉴 목록 */}
+
+ ⚙️ 관리자 설정
+
+
+ {ADMIN_MENU.map(section => {
+ const isOpen = expanded.has(section.id);
+ const hasActiveChild = containsActive(section);
+
+ return (
+
+
+ {/* 섹션 헤더 */}
+
+
+ {/* 하위 메뉴 */}
+ {isOpen && section.children && (
+
+ );
+ })}
+
+ {section.children.map(child => renderItem(child, 1))}
+
+ )}
+
+
- )
+ );
}
diff --git a/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx b/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx
new file mode 100644
index 0000000..478221e
--- /dev/null
+++ b/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx
@@ -0,0 +1,293 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+ fetchBoardPosts,
+ adminDeleteBoardPost,
+ type BoardPostItem,
+ type BoardListResponse,
+} from '@tabs/board/services/boardApi';
+
+// ─── 상수 ──────────────────────────────────────────────────
+const PAGE_SIZE = 20;
+
+const CATEGORY_TABS = [
+ { code: '', label: '전체' },
+ { code: 'NOTICE', label: '공지사항' },
+ { code: 'DATA', label: '게시판' },
+ { code: 'QNA', label: 'Q&A' },
+] as const;
+
+const CATEGORY_LABELS: Record
- {activeSubTab === 'users' &&
+ {/* 헤더 */}
+
+ );
+}
+
+// ─── 행 컴포넌트 ───────────────────────────────────────────
+interface PostRowProps {
+ post: BoardPostItem;
+ checked: boolean;
+ onToggle: () => void;
+}
+
+function PostRow({ post, checked, onToggle }: PostRowProps) {
+ return (
+
+
+
+ {/* 카테고리 탭 + 검색 */}
+ 게시판 관리
+ + 총 {data?.totalCount ?? 0}건 + +
+
+
+ {/* 액션 바 */}
+
+ {CATEGORY_TABS.map(tab => (
+
+ ))}
+
+
+
+
+
+
+ {/* 테이블 */}
+
+
+
+
+
+
+ {/* 페이지네이션 */}
+ {totalPages > 1 && (
+ | + 0 && selected.size === items.length} + onChange={toggleAll} + className="accent-blue-500" + /> + | +번호 | +분류 | +제목 | +작성자 | +조회 | +등록일 | +
|---|---|---|---|---|---|---|
| 로딩 중... | +||||||
| 게시글이 없습니다. | +
+
+ {Array.from({ length: Math.min(totalPages, 10) }, (_, i) => {
+ const startPage = Math.max(1, Math.min(page - 4, totalPages - 9));
+ const p = startPage + i;
+ if (p > totalPages) return null;
+ return (
+
+ );
+ })}
+
+
+ )}
+
{hasChildren ? (
) : (
-
+
{node.level > 0 ? '├' : ''}
)}
- {node.icon && {node.icon}}
+ {node.icon && {node.icon}}
-
+
{node.name}
- {node.description && node.level === 0 && (
- {node.description}
- )}
+
+ ✓
+ 허용
+
+
+ ✓
+ 상속
+
+
+ —
+ 거부
+
+
+ —
+ 비활성
+
+
+ R=조회 C=생성 U=수정 D=삭제
+
+
+ )
+}
+
+// ─── RolePermTab: 기존 그룹별 권한 탭 ───────────────
+interface RolePermTabProps {
+ roles: RoleWithPermissions[]
+ permTree: PermTreeNode[]
+ rolePerms: Map
+
+
+
+
+ {/* 역할 탭 바 */}
+
+ {roles.map((role, idx) => {
+ const color = getRoleColor(role.code, idx)
+ const isSelected = selectedRoleSn === role.sn
+ return (
+
+
+ {/* 범례 */}
+
+
+ {isSelected && (
+
+ )
+ })}
+
+
+ {role.code !== 'ADMIN' && (
+
+ )}
+
+ )}
+
+
+
+
+
+ ) : (
+ | 기능 | + {OPER_CODES.map(oper => ( +
+ {OPER_LABELS[oper]}
+ {OPER_FULL_LABELS[oper]}
+ |
+ ))}
+
|---|
+ 역할을 선택하세요
+
+ )}
+
+ {/* 역할 생성 모달 */}
+ {showCreateForm && (
+
+
+ )}
+
+ )
+}
+
+// ─── UserPermTab: 사용자별 권한 탭 ───────────────────
+interface UserPermTabProps {
+ roles: RoleWithPermissions[]
+ permTree: PermTreeNode[]
+ rolePerms: Map
+
+
+
+ 새 역할 추가
+
+
+
+
+ setNewRoleCode(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, ''))}
+ placeholder="CUSTOM_ROLE"
+ className="w-full px-3 py-2 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-mono"
+ />
+
+ 영문 대문자, 숫자, 언더스코어만 허용 (생성 후 변경 불가)
+
+
+ setNewRoleName(e.target.value)}
+ placeholder="사용자 정의 역할"
+ className="w-full px-3 py-2 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-korean"
+ />
+
+
+
+ setNewRoleDesc(e.target.value)}
+ placeholder="역할에 대한 설명"
+ className="w-full px-3 py-2 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-korean"
+ />
+
+ {createError && (
+
+ {createError}
+
+ )}
+
+
+
+
+
+ {/* 사용자 검색/선택 */}
+
+ )
+}
+
// ─── 메인 PermissionsPanel ──────────────────────────
+type ActiveTab = 'role' | 'user'
+
function PermissionsPanel() {
+ const [activeTab, setActiveTab] = useState
+
+
+
+ {selectedUser ? (
+ <>
+ {/* 역할 할당 섹션 */}
+
+ {
+ setSearchQuery(e.target.value)
+ setShowDropdown(true)
+ if (selectedUser && e.target.value !== selectedUser.name) {
+ setSelectedUser(null)
+ setAssignedRoleSns([])
+ setRolesDirty(false)
+ }
+ }}
+ onFocus={() => setShowDropdown(true)}
+ placeholder={loadingUsers ? '불러오는 중...' : '이름, 계정, 조직으로 검색...'}
+ disabled={loadingUsers}
+ className="w-full max-w-sm px-3 py-2 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-korean disabled:opacity-50"
+ />
+ {showDropdown && filteredUsers.length > 0 && (
+
+
+ {filteredUsers.map(user => (
+
+ ))}
+
+ )}
+ {showDropdown && !loadingUsers && filteredUsers.length === 0 && searchQuery && (
+
+ 검색 결과 없음
+
+ )}
+
+
+
+ {/* 유효 권한 매트릭스 (읽기 전용) */}
+
+ 역할 할당
+
+
+
+ {roles.map((role, idx) => {
+ const color = getRoleColor(role.code, idx)
+ const isChecked = assignedRoleSns.includes(role.sn)
+ return (
+
+ )
+ })}
+
+
+ 유효 권한 (읽기 전용)
+ — 할당된 역할의 권한 합산 결과
+
+
+
+
+
+
+
+ ) : (
+ | 기능 | + {OPER_CODES.map(oper => ( +
+ {OPER_LABELS[oper]}
+ {OPER_FULL_LABELS[oper]}
+ |
+ ))}
+
|---|
+ 역할을 하나 이상 할당하면 유효 권한이 표시됩니다
+
+ )}
+
+ ) : (
+
+ 사용자를 선택하세요
+
+ )}
+
{/* 헤더 */}
-
+
(() => {
+ const defaultOrg = allOrgs.find(o => o.orgNm === '기동방제과')
+ return defaultOrg ? defaultOrg.orgSn : ''
+ })
+ const [email, setEmail] = useState('')
+ const [roleSns, setRoleSns] = useState([])
+ const [submitting, setSubmitting] = useState(false)
+ const [error, setError] = useState(null)
+
+ const toggleRole = (sn: number) => {
+ setRoleSns(prev => prev.includes(sn) ? prev.filter(s => s !== sn) : [...prev, sn])
+ }
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!account.trim() || !password.trim() || !name.trim()) {
+ setError('계정, 비밀번호, 사용자명은 필수 항목입니다.')
+ return
+ }
+ setSubmitting(true)
+ setError(null)
+ try {
+ await createUserApi({
+ account: account.trim(),
+ password,
+ name: name.trim(),
+ rank: rank.trim() || undefined,
+ orgSn: orgSn !== '' ? orgSn : undefined,
+ roleSns: roleSns.length > 0 ? roleSns : undefined,
+ })
+ onSuccess()
+ onClose()
+ } catch (err) {
+ setError('사용자 등록에 실패했습니다.')
+ console.error('사용자 등록 실패:', err)
+ } finally {
+ setSubmitting(false)
+ }
+ }
+
+ return (
+ (user.orgSn ?? '')
+ const [saving, setSaving] = useState(false)
+ const [newPassword, setNewPassword] = useState('')
+ const [resetPwLoading, setResetPwLoading] = useState(false)
+ const [resetPwDone, setResetPwDone] = useState(false)
+ const [unlockLoading, setUnlockLoading] = useState(false)
+ const [message, setMessage] = useState<{ text: string; type: 'success' | 'error' } | null>(null)
+
+ const handleSaveInfo = async () => {
+ setSaving(true)
+ setMessage(null)
+ try {
+ await updateUserApi(user.id, {
+ name: name.trim(),
+ rank: rank.trim() || undefined,
+ orgSn: orgSn !== '' ? orgSn : null,
+ })
+ setMessage({ text: '사용자 정보가 수정되었습니다.', type: 'success' })
+ onUpdated()
+ } catch {
+ setMessage({ text: '사용자 정보 수정에 실패했습니다.', type: 'error' })
+ } finally {
+ setSaving(false)
+ }
+ }
+
+ const handleResetPassword = async () => {
+ if (!newPassword.trim()) {
+ setMessage({ text: '새 비밀번호를 입력하세요.', type: 'error' })
+ return
+ }
+ setResetPwLoading(true)
+ setMessage(null)
+ try {
+ await changePasswordApi(user.id, newPassword)
+ setMessage({ text: '비밀번호가 초기화되었습니다.', type: 'success' })
+ setResetPwDone(true)
+ setNewPassword('')
+ } catch {
+ setMessage({ text: '비밀번호 초기화에 실패했습니다.', type: 'error' })
+ } finally {
+ setResetPwLoading(false)
+ }
+ }
+
+ const handleUnlock = async () => {
+ setUnlockLoading(true)
+ setMessage(null)
+ try {
+ await updateUserApi(user.id, { status: 'ACTIVE' })
+ setMessage({ text: '계정 잠금이 해제되었습니다.', type: 'success' })
+ onUpdated()
+ } catch {
+ setMessage({ text: '잠금 해제에 실패했습니다.', type: 'error' })
+ } finally {
+ setUnlockLoading(false)
+ }
+ }
+
+ return (
+ ('')
+ const [orgFilter, setOrgFilter] = useState('')
const [users, setUsers] = useState([])
const [loading, setLoading] = useState(true)
const [allRoles, setAllRoles] = useState([])
+ const [allOrgs, setAllOrgs] = useState([])
const [roleEditUserId, setRoleEditUserId] = useState(null)
const [selectedRoleSns, setSelectedRoleSns] = useState([])
+ const [showRegisterModal, setShowRegisterModal] = useState(false)
+ const [detailUser, setDetailUser] = useState(null)
+ const [currentPage, setCurrentPage] = useState(1)
const roleDropdownRef = useRef(null)
const loadUsers = useCallback(async () => {
@@ -27,6 +529,7 @@ function UsersPanel() {
try {
const data = await fetchUsers(searchTerm || undefined, statusFilter || undefined)
setUsers(data)
+ setCurrentPage(1)
} catch (err) {
console.error('사용자 목록 조회 실패:', err)
} finally {
@@ -40,6 +543,7 @@ function UsersPanel() {
useEffect(() => {
fetchRoles().then(setAllRoles).catch(console.error)
+ fetchOrgs().then(setAllOrgs).catch(console.error)
}, [])
useEffect(() => {
@@ -54,6 +558,17 @@ function UsersPanel() {
return () => document.removeEventListener('mousedown', handleClickOutside)
}, [roleEditUserId])
+ // ─── 필터링 (org 클라이언트 사이드) ───────────────────────────
+ const filteredUsers = orgFilter
+ ? users.filter(u => String(u.orgSn) === orgFilter)
+ : users
+
+ // ─── 페이지네이션 ──────────────────────────────────────────────
+ const totalCount = filteredUsers.length
+ const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE))
+ const pagedUsers = filteredUsers.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
+
+ // ─── 액션 핸들러 ──────────────────────────────────────────────
const handleUnlock = async (userId: string) => {
try {
await updateUserApi(userId, { status: 'ACTIVE' })
@@ -120,230 +635,349 @@ function UsersPanel() {
}
}
- const formatDate = (dateStr: string | null) => {
- if (!dateStr) return '-'
- return new Date(dateStr).toLocaleString('ko-KR', {
- year: 'numeric', month: '2-digit', day: '2-digit',
- hour: '2-digit', minute: '2-digit',
- })
- }
-
const pendingCount = users.filter(u => u.status === 'PENDING').length
return (
-
-
- 사용자 권한 관리
-역할별 리소스 × CRUD 권한을 설정합니다
+권한 관리
+역할별 리소스 × CRUD 권한 설정
+ {/* 탭 전환 */}
+
- {/* 역할 탭 바 */}
-
-
+
- {roles.map((role, idx) => {
- const color = getRoleColor(role.code, idx)
- const isSelected = selectedRoleSn === role.sn
- return (
-
-
- {/* 범례 */}
-
-
- {isSelected && (
-
- )
- })}
-
-
- {role.code !== 'ADMIN' && (
-
- )}
-
- )}
-
-
- ✓
- 명시적 허용
-
-
- ✓
- 상속 허용
-
-
- —
- 명시적 거부
-
-
- —
- 강제 거부
-
-
- R=조회 C=생성 U=수정 D=삭제
-
-
-
- {/* CRUD 매트릭스 테이블 */}
- {selectedRoleSn ? (
-
-
-
-
-
+ {activeTab === 'role' ? (
+ | 기능 | - {OPER_CODES.map(oper => ( -
- {OPER_LABELS[oper]}
- {OPER_FULL_LABELS[oper]}
- |
- ))}
-
|---|
- 역할을 선택하세요
-
- )}
-
- {/* 역할 생성 모달 */}
- {showCreateForm && (
-
-
+
-
-
-
- 새 역할 추가
-
-
-
-
- setNewRoleCode(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, ''))}
- placeholder="CUSTOM_ROLE"
- className="w-full px-3 py-2 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-mono"
- />
-
- 영문 대문자, 숫자, 언더스코어만 허용 (생성 후 변경 불가)
-
-
- setNewRoleName(e.target.value)}
- placeholder="사용자 정의 역할"
- className="w-full px-3 py-2 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-korean"
- />
-
-
-
- setNewRoleDesc(e.target.value)}
- placeholder="역할에 대한 설명"
- className="w-full px-3 py-2 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-korean"
- />
-
- {createError && (
-
- {createError}
-
- )}
-
-
-
-
-
+
+ )
+}
+
+// ─── 사용자 상세/수정 모달 ────────────────────────────────────
+interface UserDetailModalProps {
+ user: UserListItem
+ allRoles: RoleWithPermissions[]
+ allOrgs: OrgItem[]
+ onClose: () => void
+ onUpdated: () => void
+}
+
+function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalProps) {
+ const [name, setName] = useState(user.name)
+ const [rank, setRank] = useState(user.rank || '')
+ const [orgSn, setOrgSn] = useState
+ {/* 헤더 */}
+
+
+
+
+ {/* 폼 */}
+
+ 사용자 등록
+ +
+
+ )
+}
+
// ─── 사용자 관리 패널 ─────────────────────────────────────────
function UsersPanel() {
const [searchTerm, setSearchTerm] = useState('')
const [statusFilter, setStatusFilter] = useState
+ {/* 헤더 */}
+
+
+
+
+
+
+
+ 사용자 정보
+{user.account}
+
+ {/* 기본 정보 수정 */}
+
+
+ {/* 푸터 */}
+
+
+
+ {/* 구분선 */}
+
+
+ {/* 비밀번호 초기화 */}
+ 기본 정보 수정
+
+
+
+
+ setName(e.target.value)}
+ className="w-full px-3 py-1.5 text-xs bg-bg-2 border border-border rounded-md text-text-1 focus:border-primary-cyan focus:outline-none font-korean"
+ />
+
+
+
+
+
+
+ setRank(e.target.value)}
+ placeholder="예: 팀장"
+ className="w-full px-3 py-1.5 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-korean"
+ />
+
+
+
+
+
+
+
+
+ {/* 구분선 */}
+
+
+ {/* 계정 잠금 해제 */}
+ 비밀번호 초기화
+
+
+
+
+ setNewPassword(e.target.value)}
+ placeholder="새 비밀번호 입력"
+ className="w-full px-3 py-1.5 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-mono"
+ />
+
+
+
+ 초기화 후 사용자에게 새 비밀번호를 전달하세요.
+
+
+
+ {/* 기타 정보 (읽기 전용) */}
+ 계정 상태
+
+
+
+
+ {user.status === 'LOCKED' && (
+
+ )}
+
+
+
+ {(statusLabels[user.status] || statusLabels.INACTIVE).label}
+
+ {user.failCount > 0 && (
+
+ (로그인 실패 {user.failCount}회)
+
+ )}
+
+ {user.status === 'LOCKED' && (
+ + 비밀번호 5회 이상 오류로 잠금 처리됨 +
+ )} +
+
+
+ {/* 메시지 */}
+ {message && (
+ 기타 정보
+
+
+
+ 이메일:
+ {user.email || '-'}
+
+
+ OAuth:
+ {user.oauthProvider || '-'}
+
+
+ 최종 로그인:
+ {user.lastLogin ? formatDate(user.lastLogin) : '-'}
+
+
+ 등록일:
+ {formatDate(user.regDtm)}
+
+
+ {message.text}
+
+ )}
+
+
+
+
- {
try {
const params = new URLSearchParams({
- ServiceKey: API_KEY,
- type: regionType,
- ResultType: 'json'
+ serviceKey: API_KEY,
+ areaCode: regionType,
+ type: 'json',
})
const response = await fetch(`${BASE_URL}?${params}`)
@@ -60,20 +61,8 @@ export async function getOceanForecast(
throw new Error(`HTTP Error: ${response.status}`)
}
- const data = await response.json()
-
- // API 응답 구조에 따라 데이터 추출
- if (data?.result?.data) {
- return data.result.data
- }
-
- // 응답이 배열 형태인 경우
- if (Array.isArray(data)) {
- return data
- }
-
- console.warn('Unexpected API response structure:', data)
- return []
+ const data = await response.json() as OceanForecastApiResponse
+ return data?.body?.items?.item ?? []
} catch (error) {
console.error('해황예보도 조회 오류:', error)
@@ -89,10 +78,9 @@ export async function getOceanForecast(
export function getLatestForecast(forecasts: OceanForecastData[]): OceanForecastData | null {
if (!forecasts || forecasts.length === 0) return null
- // 날짜와 시간을 기준으로 정렬
const sorted = [...forecasts].sort((a, b) => {
- const dateTimeA = `${a.day}${a.hour}`
- const dateTimeB = `${b.day}${b.hour}`
+ const dateTimeA = `${a.ofcFrcstYmd}${a.ofcFrcstTm}`
+ const dateTimeB = `${b.ofcFrcstYmd}${b.ofcFrcstTm}`
return dateTimeB.localeCompare(dateTimeA)
})
@@ -112,7 +100,7 @@ export function getForecastByTime(
targetHour: string
): OceanForecastData | null {
return (
- forecasts.find((f) => f.day === targetDay && f.hour === targetHour) || null
+ forecasts.find((f) => f.ofcFrcstYmd === targetDay && f.ofcFrcstTm === targetHour) || null
)
}
@@ -157,23 +145,25 @@ export async function getRecentObservation(obsCode: string): Promise
- setShowRegisterModal(false)}
+ onSuccess={loadUsers}
+ />
+ )}
+
+ {/* 사용자 상세/수정 모달 */}
+ {detailUser && (
+ setDetailUser(null)}
+ onUpdated={() => {
+ loadUsers()
+ // 최신 정보로 모달 갱신을 위해 닫지 않음
+ }}
+ />
+ )}
+
)
}
diff --git a/frontend/src/tabs/admin/components/VesselSignalPanel.tsx b/frontend/src/tabs/admin/components/VesselSignalPanel.tsx
new file mode 100644
index 0000000..df6f586
--- /dev/null
+++ b/frontend/src/tabs/admin/components/VesselSignalPanel.tsx
@@ -0,0 +1,204 @@
+import { useState, useEffect, useCallback } from 'react';
+
+// ─── 타입 ──────────────────────────────────────────────────
+const SIGNAL_SOURCES = ['VTS', 'VTS-AIS', 'V-PASS', 'E-NAVI', 'S&P AIS'] as const;
+type SignalSource = (typeof SIGNAL_SOURCES)[number];
+
+interface SignalSlot {
+ time: string; // HH:mm
+ sources: Record;
+}
+
+// ─── 상수 ──────────────────────────────────────────────────
+const SOURCE_COLORS: Record = {
+ VTS: '#3b82f6',
+ 'VTS-AIS': '#a855f7',
+ 'V-PASS': '#22c55e',
+ 'E-NAVI': '#f97316',
+ 'S&P AIS': '#ec4899',
+};
+
+const STATUS_COLOR: Record = {
+ ok: '#22c55e',
+ warn: '#eab308',
+ error: '#ef4444',
+ none: 'rgba(255,255,255,0.06)',
+};
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+
+function generateTimeSlots(date: string): SignalSlot[] {
+ const now = new Date();
+ const isToday = date === now.toISOString().slice(0, 10);
+ const currentHour = isToday ? now.getHours() : 24;
+ const currentMin = isToday ? now.getMinutes() : 0;
+
+ const slots: SignalSlot[] = [];
+ for (let h = 0; h < 24; h++) {
+ for (let m = 0; m < 60; m += 10) {
+ const time = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+ const isPast = h < currentHour || (h === currentHour && m <= currentMin);
+
+ const sources = {} as Record;
+ for (const src of SIGNAL_SOURCES) {
+ if (!isPast) {
+ sources[src] = { count: 0, status: 'none' };
+ } else {
+ const rand = Math.random();
+ const count = Math.floor(Math.random() * 200) + 10;
+ sources[src] = {
+ count,
+ status: rand > 0.15 ? 'ok' : rand > 0.05 ? 'warn' : 'error',
+ };
+ }
+ }
+ slots.push({ time, sources });
+ }
+ }
+ return slots;
+}
+
+// ─── 타임라인 바 (10분 단위 셀) ────────────────────────────
+function TimelineBar({ slots, source }: { slots: SignalSlot[]; source: SignalSource }) {
+ if (slots.length === 0) return null;
+
+ // 144개 슬롯을 각각 1칸씩 렌더링 (10분 = 1칸)
+ return (
+ ([]);
+ const [loading, setLoading] = useState(false);
+
+ const load = useCallback(() => {
+ setLoading(true);
+ // TODO: 실제 API 연동 시 fetch 호출로 교체
+ setTimeout(() => {
+ setSlots(generateTimeSlots(date));
+ setLoading(false);
+ }, 300);
+ }, [date]);
+
+ useEffect(() => {
+ const timer = setTimeout(() => load(), 0);
+ return () => clearTimeout(timer);
+ }, [load]);
+
+ // 통계 계산
+ const stats = SIGNAL_SOURCES.map(src => {
+ let total = 0, ok = 0, warn = 0, error = 0;
+ for (const slot of slots) {
+ const s = slot.sources[src];
+ if (s.status !== 'none') {
+ total++;
+ if (s.status === 'ok') ok++;
+ else if (s.status === 'warn') warn++;
+ else error++;
+ }
+ }
+ return { src, total, ok, warn, error, rate: total > 0 ? ((ok / total) * 100).toFixed(1) : '-' };
+ });
+
+ return (
+ = {
ADMIN: 'var(--red)',
+ HQ_CLEANUP: '#34d399',
MANAGER: 'var(--orange)',
USER: 'var(--cyan)',
VIEWER: 'var(--t3)',
diff --git a/frontend/src/tabs/admin/components/adminMenuConfig.ts b/frontend/src/tabs/admin/components/adminMenuConfig.ts
new file mode 100644
index 0000000..892447c
--- /dev/null
+++ b/frontend/src/tabs/admin/components/adminMenuConfig.ts
@@ -0,0 +1,94 @@
+/** 관리자 화면 9-섹션 메뉴 트리 */
+
+export interface AdminMenuItem {
+ id: string;
+ label: string;
+ icon?: string;
+ children?: AdminMenuItem[];
+}
+
+export const ADMIN_MENU: AdminMenuItem[] = [
+ {
+ id: 'env-settings', label: '환경설정', icon: '⚙️',
+ children: [
+ { id: 'menus', label: '메뉴관리' },
+ { id: 'settings', label: '시스템설정' },
+ ],
+ },
+ {
+ id: 'user-info', label: '사용자정보', icon: '👥',
+ children: [
+ { id: 'users', label: '사용자관리' },
+ { id: 'permissions', label: '권한관리' },
+ ],
+ },
+ {
+ id: 'board-mgmt', label: '게시판관리', icon: '📋',
+ children: [
+ { id: 'notice', label: '공지사항' },
+ { id: 'board', label: '게시판' },
+ { id: 'qna', label: 'QNA' },
+ ],
+ },
+ {
+ id: 'reference', label: '기준정보', icon: '🗺️',
+ children: [
+ {
+ id: 'map-mgmt', label: '지도관리',
+ children: [
+ { id: 'map-vector', label: '지도벡데이터' },
+ { id: 'map-layer', label: '레이어' },
+ ],
+ },
+ {
+ id: 'sensitive-map', label: '민감자원지도',
+ children: [
+ { id: 'env-ecology', label: '환경/생태' },
+ { id: 'social-economy', label: '사회/경제' },
+ ],
+ },
+ {
+ id: 'coast-guard-assets', label: '해경자산',
+ children: [
+ { id: 'cleanup-equip', label: '방제장비' },
+ { id: 'dispersant-zone', label: '유처리제 제한구역' },
+ { id: 'vessel-materials', label: '방제선 보유자재' },
+ { id: 'cleanup-resource', label: '방제자원' },
+ ],
+ },
+ ],
+ },
+ {
+ id: 'external', label: '연계관리', icon: '🔗',
+ children: [
+ {
+ id: 'collection', label: '수집자료',
+ children: [
+ { id: 'collect-vessel-signal', label: '선박신호' },
+ { id: 'collect-hr', label: '인사정보' },
+ ],
+ },
+ {
+ id: 'monitoring', label: '연계모니터링',
+ children: [
+ { id: 'monitor-realtime', label: '실시간 관측자료' },
+ { id: 'monitor-forecast', label: '수치예측자료' },
+ { id: 'monitor-vessel', label: '선박위치정보' },
+ { id: 'monitor-hr', label: '인사' },
+ ],
+ },
+ ],
+ },
+];
+
+/** 메뉴 ID로 라벨을 찾는 유틸리티 */
+export function findMenuLabel(id: string, items: AdminMenuItem[] = ADMIN_MENU): string | null {
+ for (const item of items) {
+ if (item.id === id) return item.label;
+ if (item.children) {
+ const found = findMenuLabel(id, item.children);
+ if (found) return found;
+ }
+ }
+ return null;
+}
diff --git a/frontend/src/tabs/aerial/components/CCTVPlayer.tsx b/frontend/src/tabs/aerial/components/CCTVPlayer.tsx
index 558de05..42fca21 100644
--- a/frontend/src/tabs/aerial/components/CCTVPlayer.tsx
+++ b/frontend/src/tabs/aerial/components/CCTVPlayer.tsx
@@ -1,6 +1,8 @@
-import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { useRef, useEffect, useState, useCallback, useMemo, forwardRef, useImperativeHandle } from 'react';
import Hls from 'hls.js';
import { detectStreamType } from '../utils/streamUtils';
+import { useOilDetection } from '../hooks/useOilDetection';
+import OilDetectionOverlay from './OilDetectionOverlay';
interface CCTVPlayerProps {
cameraNm: string;
@@ -9,6 +11,13 @@ interface CCTVPlayerProps {
coordDc?: string | null;
sourceNm?: string | null;
cellIndex?: number;
+ oilDetectionEnabled?: boolean;
+ vesselDetectionEnabled?: boolean;
+ intrusionDetectionEnabled?: boolean;
+}
+
+export interface CCTVPlayerHandle {
+ capture: () => void;
}
type PlayerState = 'loading' | 'playing' | 'error' | 'offline' | 'no-url';
@@ -21,15 +30,19 @@ function toProxyUrl(url: string): string {
return url;
}
-export function CCTVPlayer({
+export const CCTVPlayer = forwardRef(({
cameraNm,
streamUrl,
sttsCd,
coordDc,
sourceNm,
cellIndex = 0,
-}: CCTVPlayerProps) {
+ oilDetectionEnabled = false,
+ vesselDetectionEnabled = false,
+ intrusionDetectionEnabled = false,
+}, ref) => {
const videoRef = useRef(null);
+ const containerRef = useRef(null);
const hlsRef = useRef(null);
const [hlsPlayerState, setHlsPlayerState] = useState<'loading' | 'playing' | 'error'>('loading');
const [retryKey, setRetryKey] = useState(0);
@@ -56,6 +69,73 @@ export function CCTVPlayer({
? 'playing'
: hlsPlayerState;
+ const { result: oilResult, isAnalyzing: oilAnalyzing, error: oilError } = useOilDetection({
+ videoRef,
+ enabled: oilDetectionEnabled && playerState === 'playing' && (streamType === 'hls' || streamType === 'mp4'),
+ });
+
+ useImperativeHandle(ref, () => ({
+ capture: () => {
+ const container = containerRef.current;
+ if (!container) return;
+
+ const w = container.clientWidth;
+ const h = container.clientHeight;
+ const canvas = document.createElement('canvas');
+ canvas.width = w * 2;
+ canvas.height = h * 2;
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+ ctx.scale(2, 2);
+
+ // 1) video frame
+ const video = videoRef.current;
+ if (video && video.readyState >= 2) {
+ ctx.drawImage(video, 0, 0, w, h);
+ }
+
+ // 2) oil detection overlay
+ const overlayCanvas = container.querySelector('canvas');
+ if (overlayCanvas) {
+ ctx.drawImage(overlayCanvas, 0, 0, w, h);
+ }
+
+ // 3) OSD: camera name + timestamp
+ ctx.fillStyle = 'rgba(0,0,0,0.7)';
+ ctx.fillRect(8, 8, ctx.measureText(cameraNm).width + 20, 22);
+ ctx.font = 'bold 12px sans-serif';
+ ctx.fillStyle = '#ffffff';
+ ctx.fillText(cameraNm, 18, 23);
+
+ const ts = new Date().toLocaleString('ko-KR');
+ ctx.font = '10px monospace';
+ ctx.fillStyle = 'rgba(0,0,0,0.7)';
+ const tsW = ctx.measureText(ts).width + 16;
+ ctx.fillRect(8, h - 26, tsW, 20);
+ ctx.fillStyle = '#a0aec0';
+ ctx.fillText(ts, 16, h - 12);
+
+ // 4) oil detection info
+ if (oilResult && oilResult.regions.length > 0) {
+ const areaText = oilResult.totalAreaM2 >= 1000
+ ? `오일 감지: ${(oilResult.totalAreaM2 / 1_000_000).toFixed(1)} km² (${oilResult.totalPercentage.toFixed(1)}%)`
+ : `오일 감지: ~${Math.round(oilResult.totalAreaM2)} m² (${oilResult.totalPercentage.toFixed(1)}%)`;
+ ctx.font = 'bold 11px sans-serif';
+ const atW = ctx.measureText(areaText).width + 16;
+ ctx.fillStyle = 'rgba(239,68,68,0.25)';
+ ctx.fillRect(8, h - 48, atW, 18);
+ ctx.fillStyle = '#f87171';
+ ctx.fillText(areaText, 16, h - 34);
+ }
+
+ // download
+ const link = document.createElement('a');
+ link.download = `CCTV_${cameraNm}_${new Date().toISOString().slice(0, 19).replace(/:/g, '')}.png`;
+ link.href = canvas.toDataURL('image/png');
+ link.click();
+ },
+ }), [cameraNm, oilResult]);
+
const destroyHls = useCallback(() => {
if (hlsRef.current) {
hlsRef.current.destroy();
@@ -185,7 +265,7 @@ export function CCTVPlayer({
}
return (
- <>
+
@@ -242,12 +285,16 @@ export function CctvView() {
-
+
+ {/* 사용자 등록 모달 */}
+ {showRegisterModal && (
+
-
- 사용자 관리
-총 {users.length}명
+ <> +
+ {/* 헤더 */}
+
-
+
-
+
+
+
+ {pendingCount > 0 && (
+
+ 승인대기 {pendingCount}명
+
+ )}
+ 사용자 관리
+총 {filteredUsers.length}명
+
+ {/* 소속 필터 */}
+
+ {/* 상태 필터 */}
+
+ {/* 텍스트 검색 */}
+ setSearchTerm(e.target.value)}
+ className="w-56 px-3 py-2 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-korean"
+ />
+
- {pendingCount > 0 && (
-
- 승인대기 {pendingCount}명
-
- )}
-
- setSearchTerm(e.target.value)}
- className="w-56 px-3 py-2 text-xs bg-bg-2 border border-border rounded-md text-text-1 placeholder-text-3 focus:border-primary-cyan focus:outline-none font-korean"
- />
-
-
-
- {loading ? (
-
-
-
+ )}
+
+
+ {/* 페이지네이션 */}
+ {!loading && totalPages > 1 && (
+ 불러오는 중...
- ) : (
- | 이름 | -계정 | -소속 | -역할 | -인증 | -상태 | -최근 로그인 | -관리 | -|||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {user.name} | -{user.account} | -{user.orgAbbr || '-'} | -
-
-
- handleOpenRoleEdit(user)}
- title="클릭하여 역할 변경"
- >
- {user.roles.length > 0 ? user.roles.map((roleCode, idx) => {
- const color = getRoleColor(roleCode, idx)
- const roleName = allRoles.find(r => r.code === roleCode)?.name || roleCode
- return (
-
- {roleName}
-
- )
- }) : (
- 역할 없음
- )}
-
-
-
-
- {roleEditUserId === user.id && (
-
-
- )}
- 역할 선택
- {allRoles.map((role, idx) => {
- const color = getRoleColor(role.code, idx)
- return (
-
- )
- })}
-
-
-
-
- |
- - {user.oauthProvider ? ( - - - Google - - ) : ( - - - ID/PW - - )} - | -- - - {statusInfo.label} - - | -{formatDate(user.lastLogin)} | -
-
- {user.status === 'PENDING' && (
- <>
-
-
-
- )}
- {user.status === 'LOCKED' && (
-
- )}
- {user.status === 'ACTIVE' && (
-
- )}
- {(user.status === 'INACTIVE' || user.status === 'REJECTED') && (
-
- )}
-
+ {/* 테이블 */}
+
+ {loading ? (
+
+ 불러오는 중...
+
+ ) : (
+
{rowNum} |
+
+ {/* ID(account) */}
+ {user.account} |
+
+ {/* 사용자명 */}
+
+
+ |
+
+ {/* 직급 */}
+ {user.rank || '-'} |
+
+ {/* 소속 */}
+
+ {user.orgAbbr || user.orgName || '-'}
+ |
+
+ {/* 이메일 */}
+
+ {user.email || '-'}
+ |
+
+ {/* 역할 (인라인 편집) */}
+
+ |
+
+ {/* 승인상태 */}
+
+
+ handleOpenRoleEdit(user)}
+ title="클릭하여 역할 변경"
+ >
+ {user.roles.length > 0 ? user.roles.map((roleCode, roleIdx) => {
+ const color = getRoleColor(roleCode, roleIdx)
+ const roleName = allRoles.find(r => r.code === roleCode)?.name || roleCode
+ return (
+
+ {roleName}
+
+ )
+ }) : (
+ 역할 없음
+ )}
+
+
+
+
+ {roleEditUserId === user.id && (
+
+
+ )}
+ 역할 선택
+ {allRoles.map((role, roleIdx) => {
+ const color = getRoleColor(role.code, roleIdx)
+ return (
+
+ )
+ })}
+
+
+
+
+
+
+
+ {statusInfo.label}
+
+ |
+
+ {/* 관리 */}
+
+ |
+
+ {user.status === 'PENDING' && (
+ <>
+
+
+
+ )}
+ {user.status === 'LOCKED' && (
+
+ )}
+ {user.status === 'ACTIVE' && (
+
+ )}
+ {(user.status === 'INACTIVE' || user.status === 'REJECTED') && (
+
+ )}
+
+ |
+
+ {(currentPage - 1) * PAGE_SIZE + 1}–{Math.min(currentPage * PAGE_SIZE, totalCount)} / {totalCount}명
+
+
)}
+
+ {Array.from({ length: totalPages }, (_, i) => i + 1)
+ .filter(p => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2)
+ .reduce<(number | '...')[]>((acc, p, i, arr) => {
+ if (i > 0 && typeof arr[i - 1] === 'number' && (p as number) - (arr[i - 1] as number) > 1) {
+ acc.push('...')
+ }
+ acc.push(p)
+ return acc
+ }, [])
+ .map((item, i) =>
+ item === '...' ? (
+ …
+ ) : (
+
+ )
+ )}
+
+
+
+ {slots.map((slot, i) => {
+ const s = slot.sources[source];
+ const color = STATUS_COLOR[s.status] || STATUS_COLOR.none;
+ const statusLabel = s.status === 'ok' ? '정상' : s.status === 'warn' ? '지연' : s.status === 'error' ? '오류' : '미수신';
+
+ return (
+
+ );
+ })}
+
+ );
+}
+
+// ─── 메인 패널 ─────────────────────────────────────────────
+export default function VesselSignalPanel() {
+ const [date, setDate] = useState(() => new Date().toISOString().slice(0, 10));
+ const [slots, setSlots] = useState
+ {/* 헤더 */}
+
+ );
+}
diff --git a/frontend/src/tabs/admin/components/adminConstants.ts b/frontend/src/tabs/admin/components/adminConstants.ts
index b27ed50..b45ac41 100644
--- a/frontend/src/tabs/admin/components/adminConstants.ts
+++ b/frontend/src/tabs/admin/components/adminConstants.ts
@@ -1,5 +1,6 @@
export const DEFAULT_ROLE_COLORS: Record
+
+
+ {/* 메인 콘텐츠 */}
+ 선박신호 수신 현황
+
+ setDate(e.target.value)}
+ className="px-2 py-1 text-xs rounded bg-bg-2 border border-border-1 text-text-1"
+ />
+
+
+
+ {loading ? (
+
+
+
+ 로딩 중...
+
+ ) : (
+
+ {/* 좌측: 소스 라벨 고정 열 */}
+
+ )}
+
+ {/* 시간축 높이 맞춤 빈칸 */}
+
+ {SIGNAL_SOURCES.map(src => {
+ const c = SOURCE_COLORS[src];
+ const st = stats.find(s => s.src === src)!;
+ return (
+
+
+ {/* 우측: 시간축 + 타임라인 바 */}
+
+ {src}
+ {st.rate}%
+
+ );
+ })}
+
+ {/* 시간 축 (상단) */}
+
+
+ {HOURS.map(h => (
+
+ {String(h).padStart(2, '0')}시
+
+ ))}
+
+ 24시
+
+
+
+ {/* 소스별 타임라인 바 */}
+ {SIGNAL_SOURCES.map(src => (
+
+
+ ))}
+
{/* 로딩 오버레이 */}
{playerState === 'loading' && (
@@ -207,13 +287,18 @@ export function CCTVPlayer({
/>
)}
+ {/* 오일 감지 오버레이 */}
+ {oilDetectionEnabled && (
+ 
setPlayerState('error')}
+ onError={() => setHlsPlayerState('error')}
/>
)}
@@ -224,10 +309,28 @@ export function CCTVPlayer({
title={cameraNm}
className="absolute inset-0 w-full h-full border-none"
allow="autoplay; encrypted-media"
- onError={() => setPlayerState('error')}
+ onError={() => setHlsPlayerState('error')}
/>
)}
+ {/* 안전관리 감지 상태 배지 */}
+ {(vesselDetectionEnabled || intrusionDetectionEnabled) && (
+ (null)
const [gridMode, setGridMode] = useState(1)
const [activeCells, setActiveCells] = useState([])
+ const [oilDetectionEnabled, setOilDetectionEnabled] = useState(false)
+ const [vesselDetectionEnabled, setVesselDetectionEnabled] = useState(false)
+ const [intrusionDetectionEnabled, setIntrusionDetectionEnabled] = useState(false)
+ const playerRefs = useRef<(CCTVPlayerHandle | null)[]>([])
const loadData = useCallback(async () => {
setLoading(true)
@@ -226,7 +231,45 @@ export function CctvView() {
>{g.icon}
))}
-
+
+
+
+
+ {vesselDetectionEnabled && (
+
+ )}
+
{/* OSD 오버레이 */}
+ 🚢 선박 출입 감지 중
+
+ )}
+ {intrusionDetectionEnabled && (
+
+ 🚨 침입 감지 중
+
+ )}
+
@@ -245,6 +348,8 @@ export function CCTVPlayer({
);
-}
+});
+
+CCTVPlayer.displayName = 'CCTVPlayer';
diff --git a/frontend/src/tabs/aerial/components/CctvView.tsx b/frontend/src/tabs/aerial/components/CctvView.tsx
index 5ba929f..538d535 100644
--- a/frontend/src/tabs/aerial/components/CctvView.tsx
+++ b/frontend/src/tabs/aerial/components/CctvView.tsx
@@ -1,7 +1,8 @@
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback, useEffect, useRef } from 'react'
import { fetchCctvCameras } from '../services/aerialApi'
import type { CctvCameraItem } from '../services/aerialApi'
import { CCTVPlayer } from './CCTVPlayer'
+import type { CCTVPlayerHandle } from './CCTVPlayer'
/** KHOA HLS 스트림 베이스 URL */
const KHOA_HLS = 'https://www.khoa.go.kr/SEAFOG/m4NiLawsC202gM5ixA7MPTYtO19KmV/hls/khoa';
@@ -54,6 +55,10 @@ export function CctvView() {
const [selectedCamera, setSelectedCamera] = useState
{coordDc ?? ''}{sourceNm ? ` · ${sourceNm}` : ''}
-
+
{cam ? (
{ playerRefs.current[i] = el }}
cameraNm={cam.cameraNm}
streamUrl={cam.streamUrl}
sttsCd={cam.sttsCd}
coordDc={cam.coordDc}
sourceNm={cam.sourceNm}
cellIndex={i}
+ oilDetectionEnabled={oilDetectionEnabled && gridMode !== 9}
+ vesselDetectionEnabled={vesselDetectionEnabled && gridMode !== 9}
+ intrusionDetectionEnabled={intrusionDetectionEnabled && gridMode !== 9}
/>
) : (
= {
+ 1: [0, 0, 204, 90], // black oil → 파란색
+ 2: [180, 180, 180, 90], // brown oil → 회색
+ 3: [255, 255, 0, 90], // rainbow oil → 노란색
+ 4: [178, 102, 255, 90], // silver oil → 보라색
+};
+
+const OilDetectionOverlay = memo(({ result, isAnalyzing = false, error = null }: OilDetectionOverlayProps) => {
+ const canvasRef = useRef(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+
+ const dpr = window.devicePixelRatio || 1;
+ const displayW = canvas.clientWidth;
+ const displayH = canvas.clientHeight;
+
+ canvas.width = displayW * dpr;
+ canvas.height = displayH * dpr;
+ ctx.scale(dpr, dpr);
+
+ ctx.clearRect(0, 0, displayW, displayH);
+
+ if (!result || result.regions.length === 0) return;
+
+ const { mask, maskWidth, maskHeight } = result;
+
+ // 클래스별 색상으로 마스크 렌더링
+ const offscreen = new OffscreenCanvas(maskWidth, maskHeight);
+ const offCtx = offscreen.getContext('2d');
+ if (offCtx) {
+ const imageData = new ImageData(maskWidth, maskHeight);
+ for (let i = 0; i < mask.length; i++) {
+ const classId = mask[i];
+ if (classId === 0) continue; // background skip
+
+ const color = CLASS_COLORS[classId];
+ if (!color) continue;
+
+ const pixelIdx = i * 4;
+ imageData.data[pixelIdx] = color[0];
+ imageData.data[pixelIdx + 1] = color[1];
+ imageData.data[pixelIdx + 2] = color[2];
+ imageData.data[pixelIdx + 3] = color[3];
+ }
+ offCtx.putImageData(imageData, 0, 0);
+ ctx.drawImage(offscreen, 0, 0, displayW, displayH);
+ }
+ }, [result]);
+
+ const formatArea = (m2: number): string => {
+ if (m2 >= 1000) {
+ return `${(m2 / 1_000_000).toFixed(1)} km²`;
+ }
+ return `~${Math.round(m2)} m²`;
+ };
+
+ const hasRegions = result !== null && result.regions.length > 0;
+
+ return (
+ <>
+
+
+ {/* OSD — bottom-8로 좌표 OSD(bottom-2)와 겹침 방지 */}
+ ;
+ enabled: boolean;
+ config?: Partial;
+}
+
+interface UseOilDetectionReturn {
+ result: OilDetectionResult | null;
+ isAnalyzing: boolean;
+ error: string | null;
+}
+
+export function useOilDetection(options: UseOilDetectionOptions): UseOilDetectionReturn {
+ const { videoRef, enabled, config } = options;
+
+ const [result, setResult] = useState(null);
+ const [isAnalyzing, setIsAnalyzing] = useState(false);
+ const [error, setError] = useState(null);
+
+ const configRef = useRef({
+ ...DEFAULT_OIL_DETECTION_CONFIG,
+ ...config,
+ });
+ const isBusyRef = useRef(false);
+
+ useEffect(() => {
+ configRef.current = {
+ ...DEFAULT_OIL_DETECTION_CONFIG,
+ ...config,
+ };
+ }, [config]);
+
+ const analyze = useCallback(async () => {
+ if (isBusyRef.current) return; // 이전 호출이 진행 중이면 스킵
+
+ const video = videoRef.current;
+ if (!video || video.readyState < 2) return;
+
+ isBusyRef.current = true;
+ setIsAnalyzing(true);
+
+ try {
+ const detection = await detectOilSpillAPI(video, configRef.current);
+ setResult(detection);
+ setError(null);
+ } catch (err) {
+ // API 실패 시 이전 결과 유지, 에러 메시지만 갱신
+ const message = err instanceof Error ? err.message : '추론 서버 연결 불가';
+ setError(message);
+ console.warn('[OilDetection] API 호출 실패:', message);
+ } finally {
+ isBusyRef.current = false;
+ setIsAnalyzing(false);
+ }
+ }, [videoRef]);
+
+ useEffect(() => {
+ if (!enabled) {
+ setResult(null);
+ setIsAnalyzing(false);
+ setError(null);
+ isBusyRef.current = false;
+ return;
+ }
+
+ setIsAnalyzing(true);
+
+ // 첫 분석: 2초 후 (영상 로딩 대기)
+ const firstTimeout = setTimeout(analyze, 2000);
+ // 반복 분석
+ const intervalId = setInterval(analyze, configRef.current.captureIntervalMs);
+
+ return () => {
+ clearTimeout(firstTimeout);
+ clearInterval(intervalId);
+ };
+ }, [enabled, analyze]);
+
+ return { result, isAnalyzing, error };
+}
diff --git a/frontend/src/tabs/aerial/utils/oilDetection.ts b/frontend/src/tabs/aerial/utils/oilDetection.ts
new file mode 100644
index 0000000..4e13d8b
--- /dev/null
+++ b/frontend/src/tabs/aerial/utils/oilDetection.ts
@@ -0,0 +1,165 @@
+/**
+ * 오일 유출 감지 — GPU 추론 서버 API 연동
+ *
+ * 시립대(starsafire) ResNet101+DANet 모델 기반
+ * 프레임 캡처 → base64 JPEG → POST /api/aerial/oil-detect → 세그멘테이션 결과
+ *
+ * 5개 클래스: background(0), black(1), brown(2), rainbow(3), silver(4)
+ */
+
+import { api } from '@common/services/api';
+
+// ── Types ──────────────────────────────────────────────────────────────────
+
+export interface OilDetectionConfig {
+ captureIntervalMs: number; // API 호출 주기 (ms), default 5000
+ coverageAreaM2: number; // 카메라 커버리지 면적 (m²), default 10000
+ captureWidth: number; // 캡처 해상도 (너비), default 512
+}
+
+/** 유류 클래스 정의 */
+export interface OilClass {
+ classId: number;
+ className: string;
+ color: [number, number, number]; // RGB
+ thicknessMm: number;
+}
+
+/** 개별 유류 영역 (API 응답에서 변환) */
+export interface OilRegion {
+ classId: number;
+ className: string;
+ pixelCount: number;
+ percentage: number;
+ areaM2: number;
+ thicknessMm: number;
+}
+
+/** 감지 결과 (오버레이에서 사용) */
+export interface OilDetectionResult {
+ regions: OilRegion[];
+ totalPercentage: number;
+ totalAreaM2: number;
+ mask: Uint8Array; // 클래스 인덱스 (0-4)
+ maskWidth: number;
+ maskHeight: number;
+ timestamp: number;
+}
+
+// ── Constants ──────────────────────────────────────────────────────────────
+
+export const DEFAULT_OIL_DETECTION_CONFIG: OilDetectionConfig = {
+ captureIntervalMs: 5000,
+ coverageAreaM2: 10000,
+ captureWidth: 512,
+};
+
+/** 유류 클래스 팔레트 (시립대 starsafire 기준) */
+export const OIL_CLASSES: OilClass[] = [
+ { classId: 1, className: 'black', color: [0, 0, 204], thicknessMm: 1.0 },
+ { classId: 2, className: 'brown', color: [180, 180, 180], thicknessMm: 0.1 },
+ { classId: 3, className: 'rainbow', color: [255, 255, 0], thicknessMm: 0.0003 },
+ { classId: 4, className: 'silver', color: [178, 102, 255], thicknessMm: 0.0001 },
+];
+
+export const OIL_CLASS_NAMES: Record = {
+ 1: '에멀전(Black)',
+ 2: '원유(Brown)',
+ 3: '무지개막(Rainbow)',
+ 4: '은색막(Silver)',
+};
+
+// ── Frame Capture ──────────────────────────────────────────────────────────
+
+/**
+ * 비디오 프레임을 캡처하여 base64 JPEG 문자열로 반환한다.
+ */
+export function captureFrameAsBase64(
+ video: HTMLVideoElement,
+ targetWidth: number,
+): string | null {
+ if (video.readyState < 2 || video.videoWidth === 0) return null;
+
+ const aspect = video.videoHeight / video.videoWidth;
+ const w = targetWidth;
+ const h = Math.round(w * aspect);
+
+ try {
+ const canvas = document.createElement('canvas');
+ canvas.width = w;
+ canvas.height = h;
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return null;
+ ctx.drawImage(video, 0, 0, w, h);
+ // data:image/jpeg;base64,... → base64 부분만 추출
+ const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
+ return dataUrl.split(',')[1] || null;
+ } catch {
+ return null;
+ }
+}
+
+// ── API Inference ──────────────────────────────────────────────────────────
+
+interface ApiInferenceRegion {
+ classId: number;
+ className: string;
+ pixelCount: number;
+ percentage: number;
+ thicknessMm: number;
+}
+
+interface ApiInferenceResponse {
+ mask: string; // base64 uint8 array
+ width: number;
+ height: number;
+ regions: ApiInferenceRegion[];
+}
+
+/**
+ * GPU 추론 서버에 프레임을 전송하고 오일 감지 결과를 반환한다.
+ */
+export async function detectOilSpillAPI(
+ video: HTMLVideoElement,
+ config: OilDetectionConfig,
+): Promise {
+ const imageBase64 = captureFrameAsBase64(video, config.captureWidth);
+ if (!imageBase64) return null;
+
+ const response = await api.post('/aerial/oil-detect', {
+ image: imageBase64,
+ });
+
+ const { mask: maskB64, width, height, regions: apiRegions } = response.data;
+ const totalPixels = width * height;
+
+ // base64 → Uint8Array
+ const binaryStr = atob(maskB64);
+ const mask = new Uint8Array(binaryStr.length);
+ for (let i = 0; i < binaryStr.length; i++) {
+ mask[i] = binaryStr.charCodeAt(i);
+ }
+
+ // API 영역 → OilRegion 변환 (면적 계산 포함)
+ const regions: OilRegion[] = apiRegions.map((r) => ({
+ classId: r.classId,
+ className: r.className,
+ pixelCount: r.pixelCount,
+ percentage: r.percentage,
+ areaM2: (r.pixelCount / totalPixels) * config.coverageAreaM2,
+ thicknessMm: r.thicknessMm,
+ }));
+
+ const totalPercentage = regions.reduce((sum, r) => sum + r.percentage, 0);
+ const totalAreaM2 = regions.reduce((sum, r) => sum + r.areaM2, 0);
+
+ return {
+ regions,
+ totalPercentage,
+ totalAreaM2,
+ mask,
+ maskWidth: width,
+ maskHeight: height,
+ timestamp: Date.now(),
+ };
+}
diff --git a/frontend/src/tabs/board/services/boardApi.ts b/frontend/src/tabs/board/services/boardApi.ts
index 2d86afb..5eaddaf 100644
--- a/frontend/src/tabs/board/services/boardApi.ts
+++ b/frontend/src/tabs/board/services/boardApi.ts
@@ -74,6 +74,11 @@ export async function deleteBoardPost(sn: number): Promise {
await api.delete(`/board/${sn}`);
}
+/** 관리자 전용 삭제 — 소유자 검증 없음 */
+export async function adminDeleteBoardPost(sn: number): Promise {
+ await api.post('/board/admin-delete', { sn });
+}
+
// ============================================================
// 매뉴얼 API
// ============================================================
diff --git a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
index 1abb617..ee334a6 100755
--- a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
+++ b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx
@@ -36,8 +36,8 @@ export interface HNSInputParams {
interface HNSLeftPanelProps {
activeSubTab: 'analysis' | 'list';
onSubTabChange: (tab: 'analysis' | 'list') => void;
- incidentCoord: { lon: number; lat: number };
- onCoordChange: (coord: { lon: number; lat: number }) => void;
+ incidentCoord: { lon: number; lat: number } | null;
+ onCoordChange: (coord: { lon: number; lat: number } | null) => void;
onMapSelectClick: () => void;
onRunPrediction: () => void;
isRunningPrediction: boolean;
@@ -112,7 +112,7 @@ export function HNSLeftPanel({
}, [loadedParams]);
// 기상정보 자동조회 (사고 발생 일시 기반)
- const weather = useWeatherFetch(incidentCoord.lat, incidentCoord.lon, accidentDate, accidentTime);
+ const weather = useWeatherFetch(incidentCoord?.lat ?? 0, incidentCoord?.lon ?? 0, accidentDate, accidentTime);
// 물질 독성 정보
const tox = getSubstanceToxicity(substance);
@@ -272,15 +272,23 @@ export function HNSLeftPanel({
className="prd-i flex-1 font-mono"
type="number"
step="0.0001"
- value={incidentCoord.lat.toFixed(4)}
- onChange={(e) => onCoordChange({ ...incidentCoord, lat: parseFloat(e.target.value) || 0 })}
+ value={incidentCoord?.lat.toFixed(4) ?? ''}
+ placeholder="위도"
+ onChange={(e) => {
+ const lat = parseFloat(e.target.value) || 0;
+ onCoordChange({ lon: incidentCoord?.lon ?? 0, lat });
+ }}
/>
onCoordChange({ ...incidentCoord, lon: parseFloat(e.target.value) || 0 })}
+ value={incidentCoord?.lon.toFixed(4) ?? ''}
+ placeholder="경도"
+ onChange={(e) => {
+ const lon = parseFloat(e.target.value) || 0;
+ onCoordChange({ lat: incidentCoord?.lat ?? 0, lon });
+ }}
/>
diff --git a/frontend/src/tabs/weather/hooks/useOceanForecast.ts b/frontend/src/tabs/weather/hooks/useOceanForecast.ts
index 7273659..1b1b201 100755
--- a/frontend/src/tabs/weather/hooks/useOceanForecast.ts
+++ b/frontend/src/tabs/weather/hooks/useOceanForecast.ts
@@ -70,9 +70,9 @@ export function useOceanForecast(
// 사용 가능한 시간대 목록 생성
const availableTimes = forecasts
.map((f) => ({
- day: f.day,
- hour: f.hour,
- label: `${f.day.slice(4, 6)}/${f.day.slice(6, 8)} ${f.hour}:00`
+ day: f.ofcFrcstYmd,
+ hour: f.ofcFrcstTm,
+ label: `${f.ofcFrcstYmd.slice(4, 6)}/${f.ofcFrcstYmd.slice(6, 8)} ${f.ofcFrcstTm}:00`
}))
.sort((a, b) => `${a.day}${a.hour}`.localeCompare(`${b.day}${b.hour}`))
diff --git a/frontend/src/tabs/weather/hooks/useWeatherData.ts b/frontend/src/tabs/weather/hooks/useWeatherData.ts
index 37eb2df..909face 100755
--- a/frontend/src/tabs/weather/hooks/useWeatherData.ts
+++ b/frontend/src/tabs/weather/hooks/useWeatherData.ts
@@ -87,6 +87,7 @@ export function useWeatherData(stations: WeatherStation[]) {
}
const obs = await getRecentObservation(obsCode)
+
if (obs) {
const r = (n: number) => Math.round(n * 10) / 10
diff --git a/frontend/src/tabs/weather/services/khoaApi.ts b/frontend/src/tabs/weather/services/khoaApi.ts
index 5a01d36..c3ec365 100755
--- a/frontend/src/tabs/weather/services/khoaApi.ts
+++ b/frontend/src/tabs/weather/services/khoaApi.ts
@@ -2,7 +2,7 @@
// API Key를 환경변수에서 로드 (소스코드 노출 방지)
const API_KEY = import.meta.env.VITE_DATA_GO_KR_API_KEY || ''
-const BASE_URL = 'https://www.khoa.go.kr/api/oceangrid/DataType/search.do'
+const BASE_URL = 'https://apis.data.go.kr/1192136/oceanCondition/GetOceanConditionApiService'
const RECENT_OBS_URL = 'https://apis.data.go.kr/1192136/dtRecent/GetDTRecentApiService'
// 지역 유형 (총 20개 지역)
@@ -22,20 +22,21 @@ export const OCEAN_REGIONS = {
} as const
export interface OceanForecastData {
- name: string // 지역명
- type: string // 지역유형
- day: string // 예보날짜 (YYYYMMDD)
- hour: string // 예보시간 (HH)
- fileName: string // 이미지 파일명
- filePath: string // 해양예측 이미지 URL
+ imgFileNm: string // 이미지 파일명
+ imgFilePath: string // 이미지 파일경로
+ ofcBrnchId: string // 해황예보도 지점코드
+ ofcBrnchNm: string // 해황예보도 지점이름
+ ofcFrcstTm: string // 해황예보도 예보시각
+ ofcFrcstYmd: string // 해황예보도 예보일자
}
-export interface OceanForecastResponse {
- result: {
- data: OceanForecastData[]
- meta: {
- totalCount: number
- }
+interface OceanForecastApiResponse {
+ header: { resultCode: string; resultMsg: string }
+ body: {
+ items: { item: OceanForecastData[] }
+ pageNo: number
+ numOfRows: number
+ totalCount: number
}
}
@@ -49,9 +50,9 @@ export async function getOceanForecast(
): Promise카메라를 선택하세요
diff --git a/frontend/src/tabs/aerial/components/OilDetectionOverlay.tsx b/frontend/src/tabs/aerial/components/OilDetectionOverlay.tsx
new file mode 100644
index 0000000..6568ba0
--- /dev/null
+++ b/frontend/src/tabs/aerial/components/OilDetectionOverlay.tsx
@@ -0,0 +1,161 @@
+import { useRef, useEffect, memo } from 'react';
+import type { OilDetectionResult } from '../utils/oilDetection';
+import { OIL_CLASSES, OIL_CLASS_NAMES } from '../utils/oilDetection';
+
+export interface OilDetectionOverlayProps {
+ result: OilDetectionResult | null;
+ isAnalyzing?: boolean;
+ error?: string | null;
+}
+
+/** 클래스 ID → RGBA 색상 (오버레이용) */
+const CLASS_COLORS: Record
+ {/* 에러 표시 */}
+ {error && (
+
+
+ );
+});
+
+OilDetectionOverlay.displayName = 'OilDetectionOverlay';
+
+export default OilDetectionOverlay;
diff --git a/frontend/src/tabs/aerial/hooks/useOilDetection.ts b/frontend/src/tabs/aerial/hooks/useOilDetection.ts
new file mode 100644
index 0000000..514f6fd
--- /dev/null
+++ b/frontend/src/tabs/aerial/hooks/useOilDetection.ts
@@ -0,0 +1,84 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import type { OilDetectionResult, OilDetectionConfig } from '../utils/oilDetection';
+import { detectOilSpillAPI, DEFAULT_OIL_DETECTION_CONFIG } from '../utils/oilDetection';
+
+interface UseOilDetectionOptions {
+ videoRef: React.RefObject
+ 추론 서버 연결 불가
+
+ )}
+
+ {/* 클래스별 감지 결과 */}
+ {hasRegions && result !== null && (
+ <>
+ {result.regions.map((region) => {
+ const oilClass = OIL_CLASSES.find((c) => c.classId === region.classId);
+ const color = oilClass ? `rgb(${oilClass.color.join(',')})` : '#f87171';
+ const label = OIL_CLASS_NAMES[region.classId] || region.className;
+
+ return (
+
+ {label}: {formatArea(region.areaM2)} ({region.percentage.toFixed(1)}%)
+
+ );
+ })}
+ {/* 합계 */}
+
+ 합계: {formatArea(result.totalAreaM2)} ({result.totalPercentage.toFixed(1)}%)
+
+
+ )}
+
+ {/* 감지 없음 */}
+ {!hasRegions && !isAnalyzing && !error && (
+
+ 감지 없음
+
+ )}
+
+ {/* 분석 중 */}
+ {isAnalyzing && (
+
+ 분석중...
+
+ )}
+