release: 2026-03-25 (11건 커밋) #122
@ -1,6 +1,6 @@
|
||||
{
|
||||
"applied_global_version": "1.6.1",
|
||||
"applied_date": "2026-03-24",
|
||||
"applied_date": "2026-03-25",
|
||||
"project_type": "react-ts",
|
||||
"gitea_url": "https://gitea.gc-si.dev",
|
||||
"custom_pre_commit": true
|
||||
|
||||
20
backend/src/monitor/monitorRouter.ts
Normal file
20
backend/src/monitor/monitorRouter.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { Router } from 'express'
|
||||
import { requireAuth } from '../auth/authMiddleware.js'
|
||||
import { getNumericalDataStatus } from './monitorService.js'
|
||||
|
||||
const router = Router()
|
||||
|
||||
router.use(requireAuth)
|
||||
|
||||
// GET /api/monitor/numerical — 수치예측자료 다운로드 상태 조회
|
||||
router.get('/numerical', async (_req, res) => {
|
||||
try {
|
||||
const data = await getNumericalDataStatus()
|
||||
res.json(data)
|
||||
} catch (err) {
|
||||
console.error('[monitor] 수치예측자료 상태 조회 오류:', err)
|
||||
res.status(500).json({ error: '수치예측자료 상태를 조회할 수 없습니다.' })
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
121
backend/src/monitor/monitorService.ts
Normal file
121
backend/src/monitor/monitorService.ts
Normal file
@ -0,0 +1,121 @@
|
||||
export interface NumericalDataStatus {
|
||||
modelName: string;
|
||||
jobName: string;
|
||||
lastStatus: 'COMPLETED' | 'FAILED' | 'STARTED' | 'UNKNOWN';
|
||||
lastDataDate: string | null; // 데이터 기준일 (YYYY-MM-DD)
|
||||
lastDownloadedAt: string | null; // 마지막 실행 완료 시각 (ISO)
|
||||
nextScheduledAt: string | null; // Quartz 다음 예정 시각 (ISO)
|
||||
durationSec: number | null; // 소요 시간 (초)
|
||||
consecutiveFailures: number; // 연속 실패 횟수
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Mock 데이터 (Spring Batch/Quartz DB 연동 전)
|
||||
// DB 연동 준비 완료 후 getMockNumericalDataStatus → getActualNumericalDataStatus 교체
|
||||
// ============================================================
|
||||
const MOCK_DATA: NumericalDataStatus[] = [
|
||||
{
|
||||
modelName: 'HYCOM',
|
||||
jobName: 'downloadHycomJob',
|
||||
lastStatus: 'COMPLETED',
|
||||
lastDataDate: '2026-03-25',
|
||||
lastDownloadedAt: '2026-03-25T06:12:34',
|
||||
nextScheduledAt: '2026-03-25T12:00:00',
|
||||
durationSec: 342,
|
||||
consecutiveFailures: 0,
|
||||
},
|
||||
{
|
||||
modelName: 'GFS',
|
||||
jobName: 'downloadGfsJob',
|
||||
lastStatus: 'COMPLETED',
|
||||
lastDataDate: '2026-03-25',
|
||||
lastDownloadedAt: '2026-03-25T06:48:11',
|
||||
nextScheduledAt: '2026-03-25T12:00:00',
|
||||
durationSec: 518,
|
||||
consecutiveFailures: 0,
|
||||
},
|
||||
{
|
||||
modelName: 'WW3',
|
||||
jobName: 'downloadWw3Job',
|
||||
lastStatus: 'FAILED',
|
||||
lastDataDate: '2026-03-24',
|
||||
lastDownloadedAt: '2026-03-25T07:03:55',
|
||||
nextScheduledAt: '2026-03-25T13:00:00',
|
||||
durationSec: null,
|
||||
consecutiveFailures: 2,
|
||||
},
|
||||
{
|
||||
modelName: 'KOAST POS_WIND',
|
||||
jobName: 'downloadKoastWindJob',
|
||||
lastStatus: 'COMPLETED',
|
||||
lastDataDate: '2026-03-25',
|
||||
lastDownloadedAt: '2026-03-25T07:21:05',
|
||||
nextScheduledAt: '2026-03-25T13:00:00',
|
||||
durationSec: 127,
|
||||
consecutiveFailures: 0,
|
||||
},
|
||||
{
|
||||
modelName: 'KOAST POS_HYDR',
|
||||
jobName: 'downloadKoastHydrJob',
|
||||
lastStatus: 'COMPLETED',
|
||||
lastDataDate: '2026-03-25',
|
||||
lastDownloadedAt: '2026-03-25T07:35:48',
|
||||
nextScheduledAt: '2026-03-25T13:00:00',
|
||||
durationSec: 183,
|
||||
consecutiveFailures: 0,
|
||||
},
|
||||
{
|
||||
modelName: 'KOAST POS_WAVE',
|
||||
jobName: 'downloadKoastWaveJob',
|
||||
lastStatus: 'COMPLETED',
|
||||
lastDataDate: '2026-03-25',
|
||||
lastDownloadedAt: '2026-03-25T07:52:19',
|
||||
nextScheduledAt: '2026-03-25T13:00:00',
|
||||
durationSec: 156,
|
||||
consecutiveFailures: 0,
|
||||
},
|
||||
];
|
||||
|
||||
export async function getNumericalDataStatus(): Promise<NumericalDataStatus[]> {
|
||||
// TODO: Spring Batch + Quartz DB 테이블 생성 후 아래 실제 쿼리로 교체
|
||||
//
|
||||
// import { wingDb } from '../db/wingDb.js'
|
||||
//
|
||||
// -- 각 Job의 최신 실행 결과 조회 (BATCH_JOB_EXECUTION)
|
||||
// SELECT
|
||||
// ji.JOB_NAME,
|
||||
// je.START_TIME, je.END_TIME,
|
||||
// je.STATUS, je.EXIT_CODE, je.EXIT_MESSAGE,
|
||||
// jep.STRING_VAL AS data_date,
|
||||
// EXTRACT(EPOCH FROM (je.END_TIME - je.START_TIME))::INT AS duration_sec
|
||||
// FROM BATCH_JOB_EXECUTION je
|
||||
// JOIN BATCH_JOB_INSTANCE ji ON je.JOB_INSTANCE_ID = ji.JOB_INSTANCE_ID
|
||||
// LEFT JOIN BATCH_JOB_EXECUTION_PARAMS jep
|
||||
// ON je.JOB_EXECUTION_ID = jep.JOB_EXECUTION_ID
|
||||
// AND jep.KEY_NAME = 'data_date'
|
||||
// WHERE je.JOB_EXECUTION_ID IN (
|
||||
// SELECT MAX(je2.JOB_EXECUTION_ID)
|
||||
// FROM BATCH_JOB_EXECUTION je2
|
||||
// GROUP BY je2.JOB_INSTANCE_ID
|
||||
// )
|
||||
// ORDER BY je.START_TIME DESC;
|
||||
//
|
||||
// -- Quartz 다음 실행 예정 시각 (NEXT_FIRE_TIME은 epoch milliseconds)
|
||||
// SELECT JOB_NAME, to_timestamp(NEXT_FIRE_TIME / 1000) AS next_fire_time
|
||||
// FROM QRTZ_TRIGGERS;
|
||||
//
|
||||
// -- 연속 실패 횟수 집계 (최근 실행부터 COMPLETED 전까지 카운트)
|
||||
// SELECT ji.JOB_NAME, COUNT(*) AS consecutive_failures
|
||||
// FROM BATCH_JOB_EXECUTION je
|
||||
// JOIN BATCH_JOB_INSTANCE ji ON je.JOB_INSTANCE_ID = ji.JOB_INSTANCE_ID
|
||||
// WHERE je.STATUS = 'FAILED'
|
||||
// AND je.JOB_EXECUTION_ID > (
|
||||
// SELECT COALESCE(MAX(je2.JOB_EXECUTION_ID), 0)
|
||||
// FROM BATCH_JOB_EXECUTION je2
|
||||
// WHERE je2.JOB_INSTANCE_ID = je.JOB_INSTANCE_ID
|
||||
// AND je2.STATUS = 'COMPLETED'
|
||||
// )
|
||||
// GROUP BY ji.JOB_NAME;
|
||||
|
||||
return MOCK_DATA;
|
||||
}
|
||||
@ -46,7 +46,7 @@ router.get('/analyses/:acdntSn', requireAuth, requirePermission('prediction', 'R
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/prediction/analyses/:acdntSn/trajectory — 최신 OpenDrift 결과 조회
|
||||
// GET /api/prediction/analyses/:acdntSn/trajectory — 예측 결과 조회 (predRunSn으로 특정 실행 지정 가능)
|
||||
router.get('/analyses/:acdntSn/trajectory', requireAuth, requirePermission('prediction', 'READ'), async (req, res) => {
|
||||
try {
|
||||
const acdntSn = parseInt(req.params.acdntSn as string, 10);
|
||||
@ -54,7 +54,8 @@ router.get('/analyses/:acdntSn/trajectory', requireAuth, requirePermission('pred
|
||||
res.status(400).json({ error: '유효하지 않은 사고 번호' });
|
||||
return;
|
||||
}
|
||||
const result = await getAnalysisTrajectory(acdntSn);
|
||||
const predRunSn = req.query.predRunSn ? parseInt(req.query.predRunSn as string, 10) : undefined;
|
||||
const result = await getAnalysisTrajectory(acdntSn, predRunSn);
|
||||
if (!result) {
|
||||
res.json({ trajectory: null, summary: null });
|
||||
return;
|
||||
|
||||
@ -19,6 +19,8 @@ interface PredictionAnalysis {
|
||||
analyst: string;
|
||||
officeName: string;
|
||||
acdntSttsCd: string;
|
||||
predRunSn: number | null;
|
||||
runDtm: string | null;
|
||||
}
|
||||
|
||||
interface PredictionDetail {
|
||||
@ -142,21 +144,26 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<Prediction
|
||||
S.SPIL_QTY,
|
||||
S.SPIL_UNIT_CD,
|
||||
S.FCST_HR,
|
||||
P.PRED_RUN_SN,
|
||||
P.RUN_DTM,
|
||||
P.KOSPS_STATUS,
|
||||
P.POSEIDON_STATUS,
|
||||
P.OPENDRIFT_STATUS,
|
||||
B.BACKTRACK_STATUS
|
||||
FROM ACDNT A
|
||||
LEFT JOIN SPIL_DATA S ON S.ACDNT_SN = A.ACDNT_SN
|
||||
LEFT JOIN (
|
||||
INNER JOIN (
|
||||
SELECT
|
||||
ACDNT_SN,
|
||||
PRED_RUN_SN,
|
||||
MIN(BGNG_DTM) AS RUN_DTM,
|
||||
MIN(SPIL_DATA_SN) AS SPIL_DATA_SN,
|
||||
MAX(CASE WHEN ALGO_CD = 'KOSPS' THEN EXEC_STTS_CD END) AS KOSPS_STATUS,
|
||||
MAX(CASE WHEN ALGO_CD = 'POSEIDON' THEN EXEC_STTS_CD END) AS POSEIDON_STATUS,
|
||||
MAX(CASE WHEN ALGO_CD = 'OPENDRIFT' THEN EXEC_STTS_CD END) AS OPENDRIFT_STATUS
|
||||
FROM PRED_EXEC
|
||||
GROUP BY ACDNT_SN
|
||||
GROUP BY ACDNT_SN, PRED_RUN_SN
|
||||
) P ON P.ACDNT_SN = A.ACDNT_SN
|
||||
LEFT JOIN SPIL_DATA S ON S.SPIL_DATA_SN = P.SPIL_DATA_SN
|
||||
LEFT JOIN (
|
||||
SELECT
|
||||
ACDNT_SN,
|
||||
@ -165,7 +172,7 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<Prediction
|
||||
GROUP BY ACDNT_SN
|
||||
) B ON B.ACDNT_SN = A.ACDNT_SN
|
||||
${whereClause}
|
||||
ORDER BY A.OCCRN_DTM DESC
|
||||
ORDER BY A.OCCRN_DTM DESC, P.RUN_DTM DESC NULLS LAST
|
||||
`;
|
||||
|
||||
const { rows } = await wingPool.query(sql, params);
|
||||
@ -189,6 +196,8 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<Prediction
|
||||
analyst: String(row['analyst_nm'] ?? ''),
|
||||
officeName: String(row['office_nm'] ?? ''),
|
||||
acdntSttsCd: String(row['acdnt_stts_cd'] ?? 'ACTIVE'),
|
||||
predRunSn: row['pred_run_sn'] != null ? Number(row['pred_run_sn']) : null,
|
||||
runDtm: row['run_dtm'] ? String(row['run_dtm']) : null,
|
||||
}));
|
||||
}
|
||||
|
||||
@ -539,16 +548,27 @@ function transformTrajectoryResult(rawResult: TrajectoryTimeStep[], model: strin
|
||||
return { trajectory, summary, stepSummaries, centerPoints, windData, hydrData };
|
||||
}
|
||||
|
||||
export async function getAnalysisTrajectory(acdntSn: number): Promise<TrajectoryResult | null> {
|
||||
export async function getAnalysisTrajectory(acdntSn: number, predRunSn?: number): Promise<TrajectoryResult | null> {
|
||||
// 완료된 모든 모델(OPENDRIFT, POSEIDON) 결과 조회
|
||||
const sql = `
|
||||
SELECT ALGO_CD, RSLT_DATA, CMPL_DTM FROM wing.PRED_EXEC
|
||||
WHERE ACDNT_SN = $1
|
||||
AND ALGO_CD IN ('OPENDRIFT', 'POSEIDON')
|
||||
AND EXEC_STTS_CD = 'COMPLETED'
|
||||
ORDER BY CMPL_DTM DESC
|
||||
`;
|
||||
const { rows } = await wingPool.query(sql, [acdntSn]);
|
||||
// predRunSn이 있으면 해당 실행의 결과만, 없으면 최신 결과
|
||||
const sql = predRunSn != null
|
||||
? `
|
||||
SELECT ALGO_CD, RSLT_DATA, CMPL_DTM FROM wing.PRED_EXEC
|
||||
WHERE ACDNT_SN = $1
|
||||
AND PRED_RUN_SN = $2
|
||||
AND ALGO_CD IN ('OPENDRIFT', 'POSEIDON')
|
||||
AND EXEC_STTS_CD = 'COMPLETED'
|
||||
ORDER BY CMPL_DTM DESC
|
||||
`
|
||||
: `
|
||||
SELECT ALGO_CD, RSLT_DATA, CMPL_DTM FROM wing.PRED_EXEC
|
||||
WHERE ACDNT_SN = $1
|
||||
AND ALGO_CD IN ('OPENDRIFT', 'POSEIDON')
|
||||
AND EXEC_STTS_CD = 'COMPLETED'
|
||||
ORDER BY CMPL_DTM DESC
|
||||
`;
|
||||
const params = predRunSn != null ? [acdntSn, predRunSn] : [acdntSn];
|
||||
const { rows } = await wingPool.query(sql, params);
|
||||
if (rows.length === 0) return null;
|
||||
|
||||
// 모든 모델의 파티클을 하나의 배열로 병합
|
||||
|
||||
@ -210,14 +210,21 @@ router.post('/run', requireAuth, async (req: Request, res: Response) => {
|
||||
if (resolvedAcdntSn && !resolvedSpilDataSn) {
|
||||
try {
|
||||
const spilRes = await wingPool.query(
|
||||
`SELECT SPIL_DATA_SN FROM wing.SPIL_DATA WHERE ACDNT_SN = $1 ORDER BY SPIL_DATA_SN DESC LIMIT 1`,
|
||||
[resolvedAcdntSn]
|
||||
`INSERT INTO wing.SPIL_DATA (ACDNT_SN, OIL_TP_CD, SPIL_QTY, SPIL_UNIT_CD, SPIL_TP_CD, FCST_HR, REG_DTM)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, NOW())
|
||||
RETURNING SPIL_DATA_SN`,
|
||||
[
|
||||
resolvedAcdntSn,
|
||||
OIL_DB_CODE_MAP[matTy as string] ?? 'BUNKER_C',
|
||||
matVol ?? 0,
|
||||
UNIT_MAP[spillUnit as string] ?? 'KL',
|
||||
SPIL_TYPE_MAP[spillTypeCd as string] ?? 'CONTINUOUS',
|
||||
runTime,
|
||||
]
|
||||
)
|
||||
if (spilRes.rows.length > 0) {
|
||||
resolvedSpilDataSn = spilRes.rows[0].spil_data_sn as number
|
||||
}
|
||||
resolvedSpilDataSn = spilRes.rows[0].spil_data_sn as number
|
||||
} catch (dbErr) {
|
||||
console.error('[simulation] SPIL_DATA 조회 실패:', dbErr)
|
||||
console.error('[simulation] SPIL_DATA INSERT 실패:', dbErr)
|
||||
}
|
||||
}
|
||||
|
||||
@ -545,30 +552,47 @@ router.post('/run-model', requireAuth, async (req: Request, res: Response) => {
|
||||
if (resolvedAcdntSn && !resolvedSpilDataSn) {
|
||||
try {
|
||||
const spilRes = await wingPool.query(
|
||||
`SELECT SPIL_DATA_SN FROM wing.SPIL_DATA WHERE ACDNT_SN = $1 ORDER BY SPIL_DATA_SN DESC LIMIT 1`,
|
||||
[resolvedAcdntSn]
|
||||
`INSERT INTO wing.SPIL_DATA (ACDNT_SN, OIL_TP_CD, SPIL_QTY, SPIL_UNIT_CD, SPIL_TP_CD, FCST_HR, REG_DTM)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, NOW())
|
||||
RETURNING SPIL_DATA_SN`,
|
||||
[
|
||||
resolvedAcdntSn,
|
||||
OIL_DB_CODE_MAP[matTy as string] ?? 'BUNKER_C',
|
||||
matVol ?? 0,
|
||||
UNIT_MAP[spillUnit as string] ?? 'KL',
|
||||
SPIL_TYPE_MAP[spillTypeCd as string] ?? 'CONTINUOUS',
|
||||
runTime,
|
||||
]
|
||||
)
|
||||
if (spilRes.rows.length > 0) {
|
||||
resolvedSpilDataSn = spilRes.rows[0].spil_data_sn as number
|
||||
}
|
||||
resolvedSpilDataSn = spilRes.rows[0].spil_data_sn as number
|
||||
} catch (dbErr) {
|
||||
console.error('[simulation/run-model] SPIL_DATA 조회 실패:', dbErr)
|
||||
console.error('[simulation/run-model] SPIL_DATA INSERT 실패:', dbErr)
|
||||
}
|
||||
}
|
||||
|
||||
const odMatTy = matTy !== undefined ? (OIL_TYPE_MAP[matTy as string] ?? (matTy as string)) : undefined
|
||||
const execNmBase = `EXPC_${Date.now()}`
|
||||
|
||||
// 이번 예측 실행을 식별하는 그룹 SN 생성
|
||||
let predRunSn: number
|
||||
try {
|
||||
const runSnRes = await wingPool.query("SELECT nextval('wing.PRED_RUN_SN_SEQ') AS pred_run_sn")
|
||||
predRunSn = runSnRes.rows[0].pred_run_sn as number
|
||||
} catch (dbErr) {
|
||||
console.error('[simulation/run-model] PRED_RUN_SN_SEQ 조회 실패:', dbErr)
|
||||
return res.status(500).json({ error: '실행 SN 생성 실패' })
|
||||
}
|
||||
|
||||
// KOSPS: PRED_EXEC INSERT(PENDING)만 수행
|
||||
const execSns: Array<{ model: string; execSn: number }> = []
|
||||
if (requestedModels.includes('KOSPS')) {
|
||||
try {
|
||||
const kospsExecNm = `${execNmBase}_KOSPS`
|
||||
const insertRes = await wingPool.query(
|
||||
`INSERT INTO wing.PRED_EXEC (ACDNT_SN, SPIL_DATA_SN, ALGO_CD, EXEC_STTS_CD, EXEC_NM, BGNG_DTM)
|
||||
VALUES ($1, $2, 'KOSPS', 'PENDING', $3, NOW())
|
||||
`INSERT INTO wing.PRED_EXEC (ACDNT_SN, SPIL_DATA_SN, ALGO_CD, EXEC_STTS_CD, EXEC_NM, PRED_RUN_SN, BGNG_DTM)
|
||||
VALUES ($1, $2, 'KOSPS', 'PENDING', $3, $4, NOW())
|
||||
RETURNING PRED_EXEC_SN`,
|
||||
[resolvedAcdntSn, resolvedSpilDataSn, kospsExecNm]
|
||||
[resolvedAcdntSn, resolvedSpilDataSn, kospsExecNm, predRunSn]
|
||||
)
|
||||
execSns.push({ model: 'KOSPS', execSn: insertRes.rows[0].pred_exec_sn as number })
|
||||
} catch (dbErr) {
|
||||
@ -602,10 +626,10 @@ router.post('/run-model', requireAuth, async (req: Request, res: Response) => {
|
||||
let predExecSn: number
|
||||
try {
|
||||
const insertRes = await wingPool.query(
|
||||
`INSERT INTO wing.PRED_EXEC (ACDNT_SN, SPIL_DATA_SN, ALGO_CD, EXEC_STTS_CD, EXEC_NM, BGNG_DTM)
|
||||
VALUES ($1, $2, $3, 'PENDING', $4, NOW())
|
||||
`INSERT INTO wing.PRED_EXEC (ACDNT_SN, SPIL_DATA_SN, ALGO_CD, EXEC_STTS_CD, EXEC_NM, PRED_RUN_SN, BGNG_DTM)
|
||||
VALUES ($1, $2, $3, 'PENDING', $4, $5, NOW())
|
||||
RETURNING PRED_EXEC_SN`,
|
||||
[resolvedAcdntSn, resolvedSpilDataSn, algoCd, execNm]
|
||||
[resolvedAcdntSn, resolvedSpilDataSn, algoCd, execNm, predRunSn]
|
||||
)
|
||||
predExecSn = insertRes.rows[0].pred_exec_sn as number
|
||||
} catch (dbErr) {
|
||||
@ -713,6 +737,7 @@ router.post('/run-model', requireAuth, async (req: Request, res: Response) => {
|
||||
res.json({
|
||||
success: true,
|
||||
acdntSn: resolvedAcdntSn,
|
||||
predRunSn,
|
||||
execSns: [...execSns, ...modelResults.map(({ model, execSn }) => ({ model, execSn }))],
|
||||
results: modelResults,
|
||||
})
|
||||
|
||||
@ -23,6 +23,7 @@ import predictionRouter from './prediction/predictionRouter.js'
|
||||
import aerialRouter from './aerial/aerialRouter.js'
|
||||
import rescueRouter from './rescue/rescueRouter.js'
|
||||
import mapBaseRouter from './map-base/mapBaseRouter.js'
|
||||
import monitorRouter from './monitor/monitorRouter.js'
|
||||
import {
|
||||
sanitizeBody,
|
||||
sanitizeQuery,
|
||||
@ -170,6 +171,7 @@ app.use('/api/prediction', predictionRouter)
|
||||
app.use('/api/aerial', aerialRouter)
|
||||
app.use('/api/rescue', rescueRouter)
|
||||
app.use('/api/map-base', mapBaseRouter)
|
||||
app.use('/api/monitor', monitorRouter)
|
||||
|
||||
// 헬스 체크
|
||||
app.get('/health', (_req, res) => {
|
||||
|
||||
25
database/migration/028_pred_run_sn.sql
Normal file
25
database/migration/028_pred_run_sn.sql
Normal file
@ -0,0 +1,25 @@
|
||||
-- Migration 028: PRED_EXEC에 실행 그룹 식별자(PRED_RUN_SN) 추가
|
||||
-- 같은 시점에 여러 모델로 실행된 PRED_EXEC 레코드를 하나의 "예측 실행"으로 묶는다.
|
||||
-- 목록 화면에서 사고당 예측 실행 횟수만큼 행을 표시하기 위한 기반 구조.
|
||||
|
||||
-- 1. 컬럼 추가
|
||||
ALTER TABLE wing.PRED_EXEC ADD COLUMN IF NOT EXISTS PRED_RUN_SN INTEGER;
|
||||
|
||||
-- 2. 기존 데이터 마이그레이션
|
||||
-- 같은 ACDNT_SN + 시작 시각 60초 이내의 레코드를 동일 실행 그룹으로 묶는다.
|
||||
-- MIN(PRED_EXEC_SN)을 그룹 대표 키로 사용한다.
|
||||
UPDATE wing.PRED_EXEC pe1
|
||||
SET PRED_RUN_SN = (
|
||||
SELECT MIN(pe2.PRED_EXEC_SN)
|
||||
FROM wing.PRED_EXEC pe2
|
||||
WHERE pe2.ACDNT_SN = pe1.ACDNT_SN
|
||||
AND ABS(EXTRACT(EPOCH FROM (
|
||||
COALESCE(pe2.BGNG_DTM, NOW()) - COALESCE(pe1.BGNG_DTM, NOW())
|
||||
))) < 60
|
||||
)
|
||||
WHERE pe1.PRED_RUN_SN IS NULL;
|
||||
|
||||
-- 3. 시퀀스 생성 (신규 실행용 — 기존 최대값보다 충분히 높은 값에서 시작)
|
||||
CREATE SEQUENCE IF NOT EXISTS wing.PRED_RUN_SN_SEQ
|
||||
START WITH 10000
|
||||
INCREMENT BY 1;
|
||||
@ -4,6 +4,16 @@
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [2026-03-25]
|
||||
|
||||
### 추가
|
||||
- 예측: 실행 이력 선택 기능 (predRunSn 기반 특정 예측 결과 조회)
|
||||
- DB: PRED_RUN_SN 마이그레이션 추가 (028_pred_run_sn)
|
||||
- 관리자: 수치예측자료 연계 모니터링 패널 추가 (HYCOM·GFS·WW3·KOAST POS_WIND/HYDR/WAVE)
|
||||
|
||||
### 변경
|
||||
- 보고서: 기능 개선 (TemplateEditPage, ReportGenerator, hwpxExport 등)
|
||||
|
||||
## [2026-03-24]
|
||||
|
||||
### 추가
|
||||
@ -11,6 +21,8 @@
|
||||
- react-router-dom 도입, BrowserRouter 래핑
|
||||
- SVG 아이콘 에셋 19종 추가
|
||||
- @/ path alias 추가
|
||||
- 디자인: Components 탭 추가 (Button, TextField, Overview 페이지)
|
||||
- 관리자: 수거인력 패널 및 선박모니터링 패널 추가
|
||||
- 레이어: 레이어 데이터 테이블 매핑 구현 + 어장 팝업 수정
|
||||
- 확산예측: 예측 실행 시 기상정보(풍속·풍향·기압·파고·수온·기온·염분 등) ACDNT_WEATHER 테이블에 자동 저장
|
||||
- DB: ACDNT_WEATHER 테이블에 구조화된 기상 수치 컬럼 19개 추가 (025 마이그레이션)
|
||||
@ -22,6 +34,7 @@
|
||||
- 관리자: 방제장비 현황 패널에 장비 타입 필터 및 조건부 컬럼 강조 스타일 추가
|
||||
|
||||
### 변경
|
||||
- 디자인: 색상 팔레트 컨텐츠 개선 + base.css 확장
|
||||
- SCAT 지도 하드코딩 제주 해안선 제거, 인접 구간 기반 동적 방향 계산으로 전환
|
||||
- 예측: 분석 API를 예측 서비스로 통합 (analysisRouter 제거)
|
||||
- 예측: 예측 API 확장 (predictionRouter/Service, LeftPanel/RightPanel 연동)
|
||||
|
||||
@ -23,6 +23,84 @@
|
||||
--fM: JetBrains Mono, monospace;
|
||||
--rS: 6px;
|
||||
--rM: 8px;
|
||||
|
||||
/* === Design Token System === */
|
||||
|
||||
/* Static */
|
||||
--static-black: #131415;
|
||||
--static-white: #ffffff;
|
||||
|
||||
/* Gray */
|
||||
--gray-100: #f1f5f9;
|
||||
--gray-200: #e2e8f0;
|
||||
--gray-300: #cbd5e1;
|
||||
--gray-400: #94a3b8;
|
||||
--gray-500: #64748b;
|
||||
--gray-600: #475569;
|
||||
--gray-700: #334155;
|
||||
--gray-800: #1e293b;
|
||||
--gray-900: #0f172a;
|
||||
--gray-1000: #020617;
|
||||
|
||||
/* Blue */
|
||||
--blue-100: #dbeafe;
|
||||
--blue-200: #bfdbfe;
|
||||
--blue-300: #93c5fd;
|
||||
--blue-400: #60a5fa;
|
||||
--blue-500: #3b82f6;
|
||||
--blue-600: #2563eb;
|
||||
--blue-700: #1d4ed8;
|
||||
--blue-800: #1e40af;
|
||||
--blue-900: #1e3a8a;
|
||||
--blue-1000: #172554;
|
||||
|
||||
/* Green */
|
||||
--green-100: #dcfce7;
|
||||
--green-200: #bbf7d0;
|
||||
--green-300: #86efac;
|
||||
--green-400: #4ade80;
|
||||
--green-500: #22c55e;
|
||||
--green-600: #16a34a;
|
||||
--green-700: #15803d;
|
||||
--green-800: #166534;
|
||||
--green-900: #14532d;
|
||||
--green-1000: #052e16;
|
||||
|
||||
/* Yellow */
|
||||
--yellow-100: #fef9c3;
|
||||
--yellow-200: #fef08a;
|
||||
--yellow-300: #fde047;
|
||||
--yellow-400: #facc15;
|
||||
--yellow-500: #eab308;
|
||||
--yellow-600: #ca8a04;
|
||||
--yellow-700: #a16207;
|
||||
--yellow-800: #854d0e;
|
||||
--yellow-900: #713f12;
|
||||
--yellow-1000: #422006;
|
||||
|
||||
/* Red */
|
||||
--red-100: #fee2e2;
|
||||
--red-200: #fecaca;
|
||||
--red-300: #fca5a5;
|
||||
--red-400: #f87171;
|
||||
--red-500: #ef4444;
|
||||
--red-600: #dc2626;
|
||||
--red-700: #b91c1c;
|
||||
--red-800: #991b1b;
|
||||
--red-900: #7f1d1d;
|
||||
--red-1000: #450a0a;
|
||||
|
||||
/* Purple */
|
||||
--purple-100: #f3e8ff;
|
||||
--purple-200: #e9d5ff;
|
||||
--purple-300: #d8b4fe;
|
||||
--purple-400: #c084fc;
|
||||
--purple-500: #a855f7;
|
||||
--purple-600: #9333ea;
|
||||
--purple-700: #7e22ce;
|
||||
--purple-800: #6b21a8;
|
||||
--purple-900: #581c87;
|
||||
--purple-1000: #3b0764;
|
||||
}
|
||||
|
||||
* {
|
||||
|
||||
741
frontend/src/pages/design/ButtonContent.tsx
Normal file
741
frontend/src/pages/design/ButtonContent.tsx
Normal file
@ -0,0 +1,741 @@
|
||||
// ButtonContent.tsx — WING-OPS Button 컴포넌트 상세 페이지 (다크/라이트 테마 지원)
|
||||
|
||||
import type { DesignTheme } from './designTheme';
|
||||
|
||||
// ---------- 타입 ----------
|
||||
|
||||
interface ButtonSizeRow {
|
||||
label: string;
|
||||
heightClass: string;
|
||||
heightPx: number;
|
||||
px: number;
|
||||
}
|
||||
|
||||
interface ButtonVariantStyle {
|
||||
bg: string;
|
||||
text: string;
|
||||
border?: string;
|
||||
}
|
||||
|
||||
interface ButtonStateRow {
|
||||
state: string;
|
||||
accent: ButtonVariantStyle;
|
||||
primary: ButtonVariantStyle;
|
||||
secondary: ButtonVariantStyle;
|
||||
tertiary: ButtonVariantStyle;
|
||||
tertiaryFilled: ButtonVariantStyle;
|
||||
}
|
||||
|
||||
// ---------- 데이터 ----------
|
||||
|
||||
const BUTTON_SIZES: ButtonSizeRow[] = [
|
||||
{ label: 'XLarge (56)', heightClass: 'h-14', heightPx: 56, px: 24 },
|
||||
{ label: 'Large (48)', heightClass: 'h-12', heightPx: 48, px: 20 },
|
||||
{ label: 'Medium (44)', heightClass: 'h-11', heightPx: 44, px: 16 },
|
||||
{ label: 'Small (32)', heightClass: 'h-8', heightPx: 32, px: 12 },
|
||||
{ label: 'XSmall (24)', heightClass: 'h-6', heightPx: 24, px: 8 },
|
||||
];
|
||||
|
||||
const VARIANTS = ['Accent', 'Primary', 'Secondary', 'Tertiary', 'Tertiary (filled)'] as const;
|
||||
|
||||
const getDarkStateRows = (): ButtonStateRow[] => [
|
||||
{
|
||||
state: 'Default',
|
||||
accent: { bg: '#ef4444', text: '#fff' },
|
||||
primary: { bg: '#1a1a2e', text: '#fff' },
|
||||
secondary: { bg: '#6b7280', text: '#fff' },
|
||||
tertiary: { bg: 'transparent', text: '#c2c6d6', border: '#6b7280' },
|
||||
tertiaryFilled: { bg: '#374151', text: '#c2c6d6' },
|
||||
},
|
||||
{
|
||||
state: 'Hover',
|
||||
accent: { bg: '#dc2626', text: '#fff' },
|
||||
primary: { bg: '#2d2d44', text: '#fff' },
|
||||
secondary: { bg: '#7c8393', text: '#fff' },
|
||||
tertiary: { bg: 'rgba(255,255,255,0.05)', text: '#c2c6d6', border: '#9ca3af' },
|
||||
tertiaryFilled: { bg: '#4b5563', text: '#c2c6d6' },
|
||||
},
|
||||
{
|
||||
state: 'Pressed',
|
||||
accent: { bg: '#b91c1c', text: '#fff' },
|
||||
primary: { bg: '#3d3d5c', text: '#fff' },
|
||||
secondary: { bg: '#9ca3af', text: '#fff' },
|
||||
tertiary: { bg: 'rgba(255,255,255,0.1)', text: '#c2c6d6', border: '#9ca3af' },
|
||||
tertiaryFilled: { bg: '#6b7280', text: '#c2c6d6' },
|
||||
},
|
||||
{
|
||||
state: 'Disabled',
|
||||
accent: { bg: 'rgba(239,68,68,0.3)', text: 'rgba(255,255,255,0.5)' },
|
||||
primary: { bg: 'rgba(26,26,46,0.5)', text: 'rgba(255,255,255,0.4)' },
|
||||
secondary: { bg: 'rgba(107,114,128,0.3)', text: 'rgba(255,255,255,0.4)' },
|
||||
tertiary: { bg: 'transparent', text: 'rgba(255,255,255,0.3)', border: 'rgba(107,114,128,0.3)' },
|
||||
tertiaryFilled: { bg: 'rgba(55,65,81,0.3)', text: 'rgba(255,255,255,0.3)' },
|
||||
},
|
||||
];
|
||||
|
||||
const getLightStateRows = (): ButtonStateRow[] => [
|
||||
{
|
||||
state: 'Default',
|
||||
accent: { bg: '#ef4444', text: '#fff' },
|
||||
primary: { bg: '#1a1a2e', text: '#fff' },
|
||||
secondary: { bg: '#d1d5db', text: '#374151' },
|
||||
tertiary: { bg: 'transparent', text: '#374151', border: '#d1d5db' },
|
||||
tertiaryFilled: { bg: '#e5e7eb', text: '#374151' },
|
||||
},
|
||||
{
|
||||
state: 'Hover',
|
||||
accent: { bg: '#dc2626', text: '#fff' },
|
||||
primary: { bg: '#2d2d44', text: '#fff' },
|
||||
secondary: { bg: '#bcc0c7', text: '#374151' },
|
||||
tertiary: { bg: 'rgba(0,0,0,0.03)', text: '#374151', border: '#9ca3af' },
|
||||
tertiaryFilled: { bg: '#d1d5db', text: '#374151' },
|
||||
},
|
||||
{
|
||||
state: 'Pressed',
|
||||
accent: { bg: '#b91c1c', text: '#fff' },
|
||||
primary: { bg: '#3d3d5c', text: '#fff' },
|
||||
secondary: { bg: '#9ca3af', text: '#374151' },
|
||||
tertiary: { bg: 'rgba(0,0,0,0.06)', text: '#374151', border: '#6b7280' },
|
||||
tertiaryFilled: { bg: '#bcc0c7', text: '#374151' },
|
||||
},
|
||||
{
|
||||
state: 'Disabled',
|
||||
accent: { bg: 'rgba(239,68,68,0.3)', text: 'rgba(255,255,255,0.5)' },
|
||||
primary: { bg: 'rgba(26,26,46,0.3)', text: 'rgba(255,255,255,0.5)' },
|
||||
secondary: { bg: 'rgba(209,213,219,0.5)', text: 'rgba(55,65,81,0.4)' },
|
||||
tertiary: { bg: 'transparent', text: 'rgba(55,65,81,0.3)', border: 'rgba(209,213,219,0.5)' },
|
||||
tertiaryFilled: { bg: 'rgba(229,231,235,0.5)', text: 'rgba(55,65,81,0.3)' },
|
||||
},
|
||||
];
|
||||
|
||||
// ---------- Props ----------
|
||||
|
||||
interface ButtonContentProps {
|
||||
theme: DesignTheme;
|
||||
}
|
||||
|
||||
// ---------- 헬퍼 ----------
|
||||
|
||||
function getVariantStyle(row: ButtonStateRow, variantIndex: number): ButtonVariantStyle {
|
||||
const keys: (keyof Omit<ButtonStateRow, 'state'>)[] = [
|
||||
'accent',
|
||||
'primary',
|
||||
'secondary',
|
||||
'tertiary',
|
||||
'tertiaryFilled',
|
||||
];
|
||||
return row[keys[variantIndex]];
|
||||
}
|
||||
|
||||
// ---------- 컴포넌트 ----------
|
||||
|
||||
export const ButtonContent = ({ theme }: ButtonContentProps) => {
|
||||
const t = theme;
|
||||
const isDark = t.mode === 'dark';
|
||||
|
||||
const sectionCardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
|
||||
const dividerColor = isDark ? 'rgba(255,255,255,0.08)' : '#e5e7eb';
|
||||
const badgeBg = isDark ? '#4a5568' : '#6b7280';
|
||||
const annotationColor = isDark ? '#f87171' : '#ef4444';
|
||||
const buttonDarkBg = isDark ? '#e2e8f0' : '#1a1a2e';
|
||||
const buttonDarkText = isDark ? '#1a1a2e' : '#fff';
|
||||
|
||||
const stateRows = isDark ? getDarkStateRows() : getLightStateRows();
|
||||
|
||||
return (
|
||||
<div className="p-12" style={{ color: t.textPrimary }}>
|
||||
<div style={{ maxWidth: '64rem' }}>
|
||||
|
||||
{/* ── 섹션 1: 헤더 ── */}
|
||||
<div
|
||||
className="pb-10 mb-12 border-b border-solid"
|
||||
style={{ borderColor: dividerColor }}
|
||||
>
|
||||
<p
|
||||
className="font-mono text-sm uppercase tracking-widest mb-3"
|
||||
style={{ color: t.textAccent }}
|
||||
>
|
||||
Components
|
||||
</p>
|
||||
<h1
|
||||
className="text-4xl font-bold mb-4"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
Button
|
||||
</h1>
|
||||
<p
|
||||
className="text-lg mb-1"
|
||||
style={{ color: t.textSecondary }}
|
||||
>
|
||||
사용자의 의도를 명확하게 전달하고, 행동을 유도합니다.
|
||||
</p>
|
||||
<p
|
||||
className="text-lg"
|
||||
style={{ color: t.textSecondary }}
|
||||
>
|
||||
버튼의 형태와 색은 우선순위를 시각적으로 구분합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ── 섹션 2: Anatomy ── */}
|
||||
<div className="mb-16">
|
||||
<h2
|
||||
className="text-2xl font-bold mb-8"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
Anatomy
|
||||
</h2>
|
||||
|
||||
{/* Anatomy 카드 */}
|
||||
<div
|
||||
className="rounded-xl p-10 mb-8"
|
||||
style={{ backgroundColor: sectionCardBg }}
|
||||
>
|
||||
<div className="flex flex-row items-start gap-16 justify-center">
|
||||
|
||||
{/* 왼쪽: 텍스트 + 아이콘 버튼 */}
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="relative">
|
||||
{/* 버튼 본체 */}
|
||||
<div
|
||||
className="relative inline-flex items-center gap-2 px-5 rounded-md"
|
||||
style={{
|
||||
height: '44px',
|
||||
backgroundColor: buttonDarkBg,
|
||||
color: buttonDarkText,
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{/* Container 번호 — 테두리 점선 */}
|
||||
<span
|
||||
className="absolute inset-0 rounded-md pointer-events-none"
|
||||
style={{
|
||||
border: `1.5px dashed ${isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.20)'}`,
|
||||
}}
|
||||
/>
|
||||
<span>레이블</span>
|
||||
<span className="font-bold">+</span>
|
||||
|
||||
{/* 번호 뱃지 — Container (1) */}
|
||||
<span
|
||||
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||
style={{
|
||||
width: '22px',
|
||||
height: '22px',
|
||||
fontSize: '10px',
|
||||
backgroundColor: badgeBg,
|
||||
top: '-12px',
|
||||
left: '-12px',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</span>
|
||||
|
||||
{/* 번호 뱃지 — Label (2) */}
|
||||
<span
|
||||
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||
style={{
|
||||
width: '22px',
|
||||
height: '22px',
|
||||
fontSize: '10px',
|
||||
backgroundColor: badgeBg,
|
||||
top: '-12px',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
}}
|
||||
>
|
||||
2
|
||||
</span>
|
||||
|
||||
{/* 번호 뱃지 — Icon (3) */}
|
||||
<span
|
||||
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||
style={{
|
||||
width: '22px',
|
||||
height: '22px',
|
||||
fontSize: '10px',
|
||||
backgroundColor: badgeBg,
|
||||
top: '-12px',
|
||||
right: '-12px',
|
||||
}}
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="text-xs font-mono"
|
||||
style={{ color: t.textMuted }}
|
||||
>
|
||||
텍스트 + 아이콘 버튼
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 아이콘 전용 버튼 */}
|
||||
<div className="flex flex-col items-center gap-6">
|
||||
<div className="relative">
|
||||
<div
|
||||
className="relative inline-flex items-center justify-center rounded-md"
|
||||
style={{
|
||||
width: '44px',
|
||||
height: '44px',
|
||||
backgroundColor: buttonDarkBg,
|
||||
color: buttonDarkText,
|
||||
fontSize: '18px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="absolute inset-0 rounded-md pointer-events-none"
|
||||
style={{
|
||||
border: `1.5px dashed ${isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.20)'}`,
|
||||
}}
|
||||
/>
|
||||
♥
|
||||
|
||||
{/* 번호 뱃지 — Container (1) */}
|
||||
<span
|
||||
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||
style={{
|
||||
width: '22px',
|
||||
height: '22px',
|
||||
fontSize: '10px',
|
||||
backgroundColor: badgeBg,
|
||||
top: '-12px',
|
||||
left: '-12px',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</span>
|
||||
|
||||
{/* 번호 뱃지 — Icon (3) */}
|
||||
<span
|
||||
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||
style={{
|
||||
width: '22px',
|
||||
height: '22px',
|
||||
fontSize: '10px',
|
||||
backgroundColor: badgeBg,
|
||||
top: '-12px',
|
||||
right: '-12px',
|
||||
}}
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="text-xs font-mono"
|
||||
style={{ color: t.textMuted }}
|
||||
>
|
||||
아이콘 전용 버튼
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 번호 목록 */}
|
||||
<ol className="flex flex-col gap-2 pl-5 list-decimal">
|
||||
{[
|
||||
{ label: 'Container', desc: '버튼의 외곽 영역. 클릭 가능한 전체 영역을 정의합니다.' },
|
||||
{ label: 'Label', desc: '버튼의 텍스트 레이블.' },
|
||||
{ label: 'Icon (Optional)', desc: '선택적으로 추가되는 아이콘 요소.' },
|
||||
].map((item) => (
|
||||
<li key={item.label} style={{ color: t.textSecondary }}>
|
||||
<span className="font-bold" style={{ color: t.textPrimary }}>
|
||||
{item.label}
|
||||
</span>
|
||||
{' '}— {item.desc}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{/* ── 섹션 3: Spec ── */}
|
||||
<div className="mb-16">
|
||||
<h2
|
||||
className="text-2xl font-bold mb-10"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
Spec
|
||||
</h2>
|
||||
|
||||
{/* 3-1. Size */}
|
||||
<div className="mb-12">
|
||||
<h3
|
||||
className="text-xl font-semibold mb-6"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
1. Size
|
||||
</h3>
|
||||
<div
|
||||
className="rounded-xl p-8"
|
||||
style={{ backgroundColor: sectionCardBg }}
|
||||
>
|
||||
<div className="flex flex-col gap-5">
|
||||
{BUTTON_SIZES.map((size) => (
|
||||
<div key={size.label} className="flex items-center justify-between gap-8">
|
||||
{/* 라벨 */}
|
||||
<span
|
||||
className="font-mono text-sm w-36 shrink-0"
|
||||
style={{ color: t.textSecondary }}
|
||||
>
|
||||
{size.label}
|
||||
</span>
|
||||
|
||||
{/* 실제 크기 버튼 */}
|
||||
<div className="flex-1 flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md font-semibold text-sm"
|
||||
style={{
|
||||
height: `${size.heightPx}px`,
|
||||
paddingLeft: `${size.px}px`,
|
||||
paddingRight: `${size.px}px`,
|
||||
backgroundColor: buttonDarkBg,
|
||||
color: buttonDarkText,
|
||||
border: 'none',
|
||||
cursor: 'default',
|
||||
fontSize: size.heightPx <= 24 ? '11px' : size.heightPx <= 32 ? '12px' : '14px',
|
||||
}}
|
||||
>
|
||||
레이블
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3-2. Container */}
|
||||
<div className="mb-12">
|
||||
<h3
|
||||
className="text-xl font-semibold mb-6"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
2. Container
|
||||
</h3>
|
||||
<div
|
||||
className="rounded-xl p-8"
|
||||
style={{ backgroundColor: sectionCardBg }}
|
||||
>
|
||||
<div className="flex flex-col gap-8">
|
||||
|
||||
{/* Flexible */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<span
|
||||
className="font-mono text-sm font-bold"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
Flexible
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative inline-flex">
|
||||
{/* 좌측 padding 치수선 */}
|
||||
<div
|
||||
className="absolute top-1/2 flex items-center"
|
||||
style={{
|
||||
left: '0',
|
||||
transform: 'translateY(-50%)',
|
||||
color: annotationColor,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '1px',
|
||||
backgroundColor: annotationColor,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="font-mono absolute"
|
||||
style={{
|
||||
fontSize: '9px',
|
||||
color: annotationColor,
|
||||
top: '-14px',
|
||||
left: '2px',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
20px
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md font-semibold"
|
||||
style={{
|
||||
height: '44px',
|
||||
paddingLeft: '20px',
|
||||
paddingRight: '20px',
|
||||
backgroundColor: buttonDarkBg,
|
||||
color: buttonDarkText,
|
||||
fontSize: '14px',
|
||||
border: 'none',
|
||||
cursor: 'default',
|
||||
}}
|
||||
>
|
||||
레이블
|
||||
</button>
|
||||
|
||||
{/* 우측 padding 치수선 */}
|
||||
<div
|
||||
className="absolute top-1/2 flex items-center justify-end"
|
||||
style={{
|
||||
right: '0',
|
||||
transform: 'translateY(-50%)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '20px',
|
||||
height: '1px',
|
||||
backgroundColor: annotationColor,
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className="font-mono absolute"
|
||||
style={{
|
||||
fontSize: '9px',
|
||||
color: annotationColor,
|
||||
top: '-14px',
|
||||
right: '2px',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
20px
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="font-mono text-xs"
|
||||
style={{ color: t.textSecondary }}
|
||||
>
|
||||
콘텐츠에 맞게 너비가 자동으로 조정됩니다.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fixed */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<span
|
||||
className="font-mono text-sm font-bold"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
Fixed
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md font-semibold"
|
||||
style={{
|
||||
height: '44px',
|
||||
width: '160px',
|
||||
backgroundColor: buttonDarkBg,
|
||||
color: buttonDarkText,
|
||||
fontSize: '14px',
|
||||
border: 'none',
|
||||
cursor: 'default',
|
||||
}}
|
||||
>
|
||||
레이블
|
||||
</button>
|
||||
{/* 고정 너비 표시 */}
|
||||
<div
|
||||
className="absolute"
|
||||
style={{
|
||||
bottom: '-18px',
|
||||
left: '0',
|
||||
right: '0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
}}
|
||||
>
|
||||
<div style={{ height: '1px', flex: 1, backgroundColor: annotationColor }} />
|
||||
<span
|
||||
className="font-mono"
|
||||
style={{ fontSize: '9px', color: annotationColor, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
Fixed Width
|
||||
</span>
|
||||
<div style={{ height: '1px', flex: 1, backgroundColor: annotationColor }} />
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="font-mono text-xs ml-4"
|
||||
style={{ color: t.textSecondary }}
|
||||
>
|
||||
너비가 고정된 버튼입니다.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3-3. Label */}
|
||||
<div className="mb-12">
|
||||
<h3
|
||||
className="text-xl font-semibold mb-6"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
3. Label
|
||||
</h3>
|
||||
<div
|
||||
className="rounded-xl p-8"
|
||||
style={{ backgroundColor: sectionCardBg }}
|
||||
>
|
||||
<div className="flex flex-col gap-8">
|
||||
{[
|
||||
{ resolution: '해상도 430', width: '100%', maxWidth: '390px', padding: 16 },
|
||||
{ resolution: '해상도 360', width: '100%', maxWidth: '328px', padding: 16 },
|
||||
{ resolution: '해상도 320', width: '248px', maxWidth: '248px', padding: 16 },
|
||||
].map((item) => (
|
||||
<div key={item.resolution} className="flex flex-col gap-3">
|
||||
<span
|
||||
className="font-mono text-sm"
|
||||
style={{ color: t.textSecondary }}
|
||||
>
|
||||
{item.resolution}
|
||||
</span>
|
||||
<div className="flex items-center gap-6">
|
||||
<div
|
||||
className="relative"
|
||||
style={{ width: item.width, maxWidth: item.maxWidth }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full rounded-md font-semibold"
|
||||
style={{
|
||||
height: '44px',
|
||||
paddingLeft: `${item.padding}px`,
|
||||
paddingRight: `${item.padding}px`,
|
||||
backgroundColor: buttonDarkBg,
|
||||
color: buttonDarkText,
|
||||
fontSize: '14px',
|
||||
border: 'none',
|
||||
cursor: 'default',
|
||||
}}
|
||||
>
|
||||
레이블
|
||||
</button>
|
||||
{/* 패딩 주석 */}
|
||||
<span
|
||||
className="absolute font-mono"
|
||||
style={{
|
||||
fontSize: '9px',
|
||||
color: annotationColor,
|
||||
top: '-16px',
|
||||
left: '0',
|
||||
}}
|
||||
>
|
||||
padding {item.padding}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── 섹션 4: Style (변형 × 상태 매트릭스) ── */}
|
||||
<div
|
||||
className="pt-12 border-t border-solid"
|
||||
style={{ borderColor: dividerColor }}
|
||||
>
|
||||
<h2
|
||||
className="text-2xl font-bold mb-8"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
Style
|
||||
</h2>
|
||||
|
||||
<div
|
||||
className="rounded-xl p-8 overflow-x-auto"
|
||||
style={{ backgroundColor: sectionCardBg }}
|
||||
>
|
||||
<table style={{ borderCollapse: 'collapse', minWidth: '700px' }}>
|
||||
{/* 열 헤더 */}
|
||||
<thead>
|
||||
<tr>
|
||||
{/* 빈 셀 (상태 열) */}
|
||||
<th style={{ width: '100px', padding: '8px 12px' }} />
|
||||
{VARIANTS.map((variant) => (
|
||||
<th
|
||||
key={variant}
|
||||
className="font-mono text-xs font-semibold text-center pb-4"
|
||||
style={{
|
||||
color: t.textSecondary,
|
||||
padding: '8px 12px',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{variant}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{stateRows.map((row, rowIdx) => (
|
||||
<tr key={row.state}>
|
||||
{/* 상태 라벨 */}
|
||||
<td
|
||||
className="font-mono text-xs font-medium"
|
||||
style={{
|
||||
color: t.textSecondary,
|
||||
padding: rowIdx === 0 ? '8px 12px 8px 0' : '8px 12px 8px 0',
|
||||
verticalAlign: 'middle',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{row.state}
|
||||
</td>
|
||||
|
||||
{/* 각 변형별 버튼 셀 */}
|
||||
{VARIANTS.map((_, vIdx) => {
|
||||
const style = getVariantStyle(row, vIdx);
|
||||
return (
|
||||
<td
|
||||
key={vIdx}
|
||||
style={{ padding: '8px 12px', verticalAlign: 'middle', textAlign: 'center' }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md font-semibold"
|
||||
style={{
|
||||
width: '96px',
|
||||
height: '40px',
|
||||
backgroundColor: style.bg,
|
||||
color: style.text,
|
||||
border: style.border ? `1.5px solid ${style.border}` : 'none',
|
||||
fontSize: '12px',
|
||||
cursor: 'default',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
레이블
|
||||
</button>
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ButtonContent;
|
||||
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
Load Diff
219
frontend/src/pages/design/ComponentsOverview.tsx
Normal file
219
frontend/src/pages/design/ComponentsOverview.tsx
Normal file
@ -0,0 +1,219 @@
|
||||
// ComponentsOverview.tsx — Components 탭 Overview 카드 그리드
|
||||
|
||||
import type { DesignTheme } from './designTheme';
|
||||
|
||||
// ---------- 타입 ----------
|
||||
|
||||
interface OverviewCard {
|
||||
id: string;
|
||||
label: string;
|
||||
thumbnail: (isDark: boolean) => React.ReactNode;
|
||||
}
|
||||
|
||||
// ---------- 썸네일 구현 ----------
|
||||
|
||||
const ButtonsThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||
const accent = isDark ? '#4cd7f6' : '#06b6d4';
|
||||
const secondaryBg = isDark ? 'rgba(255,255,255,0.07)' : '#e2e8f0';
|
||||
const secondaryText = isDark ? 'rgba(223,226,243,0.85)' : '#475569';
|
||||
const outlineBorder = isDark ? 'rgba(76,215,246,0.40)' : 'rgba(6,182,212,0.50)';
|
||||
|
||||
const buttons = [
|
||||
{ label: 'Primary', bg: accent, border: accent, color: isDark ? '#0a0e1a' : '#ffffff' },
|
||||
{ label: 'Secondary', bg: secondaryBg, border: 'transparent', color: secondaryText },
|
||||
{ label: 'Outline', bg: 'transparent', border: outlineBorder, color: accent },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col items-center justify-center gap-3 px-8">
|
||||
{buttons.map(({ label, bg, border, color }) => (
|
||||
<div
|
||||
key={label}
|
||||
className="w-full rounded flex items-center justify-center"
|
||||
style={{
|
||||
height: '32px',
|
||||
backgroundColor: bg,
|
||||
border: `1.5px solid ${border}`,
|
||||
color,
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TextInputsThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||
const labelColor = isDark ? 'rgba(194,198,214,0.80)' : '#64748b';
|
||||
const inputBg = isDark ? 'rgba(255,255,255,0.04)' : '#ffffff';
|
||||
const inputBorder = isDark ? 'rgba(255,255,255,0.12)' : '#cbd5e1';
|
||||
const placeholderColor = isDark ? 'rgba(140,144,159,0.60)' : '#94a3b8';
|
||||
const accentBorder = isDark ? '#4cd7f6' : '#06b6d4';
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col items-center justify-center gap-3 px-8">
|
||||
{/* 라벨 + 기본 입력 */}
|
||||
<div className="w-full flex flex-col gap-1.5">
|
||||
<div
|
||||
className="rounded"
|
||||
style={{ height: '9px', width: '48px', backgroundColor: labelColor, opacity: 0.6 }}
|
||||
/>
|
||||
<div
|
||||
className="w-full rounded flex items-center px-3"
|
||||
style={{
|
||||
height: '30px',
|
||||
backgroundColor: inputBg,
|
||||
border: `1.5px solid ${inputBorder}`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="rounded"
|
||||
style={{ height: '8px', width: '70px', backgroundColor: placeholderColor, opacity: 0.5 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* 포커스 상태 입력 */}
|
||||
<div className="w-full flex flex-col gap-1.5">
|
||||
<div
|
||||
className="rounded"
|
||||
style={{ height: '9px', width: '56px', backgroundColor: labelColor, opacity: 0.6 }}
|
||||
/>
|
||||
<div
|
||||
className="w-full rounded flex items-center px-3"
|
||||
style={{
|
||||
height: '30px',
|
||||
backgroundColor: inputBg,
|
||||
border: `1.5px solid ${accentBorder}`,
|
||||
boxShadow: isDark
|
||||
? `0 0 0 2px rgba(76,215,246,0.15)`
|
||||
: `0 0 0 2px rgba(6,182,212,0.12)`,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="rounded"
|
||||
style={{ height: '8px', width: '90px', backgroundColor: isDark ? 'rgba(223,226,243,0.50)' : '#475569', opacity: 0.7 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ---------- 카드 정의 ----------
|
||||
|
||||
const OVERVIEW_CARDS: OverviewCard[] = [
|
||||
{
|
||||
id: 'buttons',
|
||||
label: 'Buttons',
|
||||
thumbnail: (isDark) => <ButtonsThumbnail isDark={isDark} />,
|
||||
},
|
||||
{
|
||||
id: 'text-field',
|
||||
label: 'Text Field',
|
||||
thumbnail: (isDark) => <TextInputsThumbnail isDark={isDark} />,
|
||||
},
|
||||
];
|
||||
|
||||
// ---------- Props ----------
|
||||
|
||||
interface ComponentsOverviewProps {
|
||||
theme: DesignTheme;
|
||||
onNavigate: (id: string) => void;
|
||||
}
|
||||
|
||||
// ---------- 컴포넌트 ----------
|
||||
|
||||
const ComponentsOverview = ({ theme, onNavigate }: ComponentsOverviewProps) => {
|
||||
const t = theme;
|
||||
const isDark = t.mode === 'dark';
|
||||
|
||||
const cardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
|
||||
const cardBorder = isDark ? 'rgba(255,255,255,0.06)' : '#e5e5e5';
|
||||
const thumbnailBorderBottom = isDark ? 'rgba(255,255,255,0.06)' : '#e0e0e0';
|
||||
|
||||
return (
|
||||
<div className="pt-24 px-12 pb-16 max-w-5xl flex flex-col gap-12">
|
||||
|
||||
{/* ── 헤더 영역 ── */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<span
|
||||
className="font-mono text-xs font-semibold uppercase"
|
||||
style={{ letterSpacing: '1.4px', color: t.textAccent }}
|
||||
>
|
||||
Components
|
||||
</span>
|
||||
<h1
|
||||
className="font-sans text-4xl font-bold leading-tight"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
Overview
|
||||
</h1>
|
||||
<p
|
||||
className="font-korean text-sm leading-6"
|
||||
style={{ color: t.textSecondary }}
|
||||
>
|
||||
재사용 가능한 UI 컴포넌트 카탈로그입니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ── 3열 카드 그리드 ── */}
|
||||
<div
|
||||
className="grid gap-5"
|
||||
style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}
|
||||
>
|
||||
{OVERVIEW_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className="rounded-lg border border-solid flex flex-col cursor-pointer transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: cardBg,
|
||||
borderColor: cardBorder,
|
||||
}}
|
||||
onClick={() => onNavigate(card.id)}
|
||||
onMouseEnter={(e) => {
|
||||
const el = e.currentTarget;
|
||||
el.style.transform = 'scale(1.025)';
|
||||
el.style.boxShadow = isDark
|
||||
? '0 8px 24px rgba(0,0,0,0.35)'
|
||||
: '0 6px 18px rgba(0,0,0,0.10)';
|
||||
el.style.borderColor = isDark
|
||||
? 'rgba(76,215,246,0.22)'
|
||||
: 'rgba(6,182,212,0.28)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const el = e.currentTarget;
|
||||
el.style.transform = 'scale(1)';
|
||||
el.style.boxShadow = 'none';
|
||||
el.style.borderColor = cardBorder;
|
||||
}}
|
||||
>
|
||||
{/* 썸네일 영역 */}
|
||||
<div
|
||||
className="h-48 rounded-t-lg overflow-hidden"
|
||||
style={{
|
||||
borderBottom: `1px solid ${thumbnailBorderBottom}`,
|
||||
}}
|
||||
>
|
||||
{card.thumbnail(isDark)}
|
||||
</div>
|
||||
|
||||
{/* 카드 라벨 */}
|
||||
<div className="px-5 py-4">
|
||||
<span
|
||||
className="font-sans text-sm font-semibold"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
{card.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComponentsOverview;
|
||||
@ -1,3 +1,4 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import type { DesignTheme } from './designTheme';
|
||||
|
||||
export type DesignTab = 'foundations' | 'components';
|
||||
@ -16,6 +17,7 @@ const TABS: { label: string; id: DesignTab }[] = [
|
||||
|
||||
export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: DesignHeaderProps) => {
|
||||
const isDark = theme.mode === 'dark';
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<header
|
||||
@ -27,12 +29,14 @@ export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: D
|
||||
>
|
||||
{/* 좌측: 로고 + 버전 뱃지 */}
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<span
|
||||
className="font-sans text-2xl leading-8 font-bold"
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('/')}
|
||||
className="font-sans text-2xl leading-8 font-bold bg-transparent border-none p-0 cursor-pointer transition-opacity hover:opacity-70"
|
||||
style={{ letterSpacing: '2.4px', color: theme.textAccent }}
|
||||
>
|
||||
WING-OPS
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
className="rounded-sm border border-solid py-1 px-2"
|
||||
style={{
|
||||
|
||||
@ -9,18 +9,22 @@ import { ColorPaletteContent } from './ColorPaletteContent';
|
||||
import { TypographyContent } from './TypographyContent';
|
||||
import { RadiusContent } from './RadiusContent';
|
||||
import { LayoutContent } from './LayoutContent';
|
||||
import FoundationsOverview from './FoundationsOverview';
|
||||
import ComponentsOverview from './ComponentsOverview';
|
||||
import { ButtonContent } from './ButtonContent';
|
||||
import { TextFieldContent } from './TextFieldContent';
|
||||
import { getTheme } from './designTheme';
|
||||
import type { ThemeMode } from './designTheme';
|
||||
|
||||
const FIRST_ITEM: Record<DesignTab, MenuItemId> = {
|
||||
foundations: 'color',
|
||||
components: 'buttons',
|
||||
foundations: 'overview',
|
||||
components: 'overview',
|
||||
};
|
||||
|
||||
export const DesignPage = () => {
|
||||
const [activeTab, setActiveTab] = useState<DesignTab>('foundations');
|
||||
const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
|
||||
const [sidebarItem, setSidebarItem] = useState<MenuItemId>('color');
|
||||
const [sidebarItem, setSidebarItem] = useState<MenuItemId>('overview');
|
||||
|
||||
const theme = getTheme(themeMode);
|
||||
|
||||
@ -32,6 +36,8 @@ export const DesignPage = () => {
|
||||
const renderContent = () => {
|
||||
if (activeTab === 'foundations') {
|
||||
switch (sidebarItem) {
|
||||
case 'overview':
|
||||
return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
||||
case 'color':
|
||||
return <ColorPaletteContent theme={theme} />;
|
||||
case 'typography':
|
||||
@ -41,10 +47,19 @@ export const DesignPage = () => {
|
||||
case 'layout':
|
||||
return <LayoutContent theme={theme} />;
|
||||
default:
|
||||
return <ColorPaletteContent theme={theme} />;
|
||||
return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
||||
}
|
||||
}
|
||||
return <ComponentsContent />;
|
||||
switch (sidebarItem) {
|
||||
case 'overview':
|
||||
return <ComponentsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
||||
case 'buttons':
|
||||
return <ButtonContent theme={theme} />;
|
||||
case 'text-field':
|
||||
return <TextFieldContent theme={theme} />;
|
||||
default:
|
||||
return <ComponentsContent />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -1,38 +1,27 @@
|
||||
import type { DesignTheme } from './designTheme';
|
||||
import type { DesignTab } from './DesignHeader';
|
||||
|
||||
import wingColorPaletteIcon from '../../assets/icons/wing-color-palette.svg';
|
||||
import wingElevationIcon from '../../assets/icons/wing-elevation.svg';
|
||||
import wingFoundationsIcon from '../../assets/icons/wing-foundations.svg';
|
||||
import wingLayoutGridIcon from '../../assets/icons/wing-layout-grid.svg';
|
||||
import wingTypographyIcon from '../../assets/icons/wing-typography.svg';
|
||||
|
||||
export type FoundationsMenuItemId = 'color' | 'typography' | 'radius' | 'layout';
|
||||
export type ComponentsMenuItemId = 'buttons' | 'text-inputs' | 'controls' | 'badge' | 'dialog' | 'tabs' | 'popup' | 'navigation';
|
||||
export type FoundationsMenuItemId = 'overview' | 'color' | 'typography' | 'radius' | 'layout';
|
||||
export type ComponentsMenuItemId = 'overview' | 'buttons' | 'text-field';
|
||||
export type MenuItemId = FoundationsMenuItemId | ComponentsMenuItemId;
|
||||
|
||||
interface MenuItem {
|
||||
id: MenuItemId;
|
||||
label: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
const FOUNDATIONS_MENU: MenuItem[] = [
|
||||
{ id: 'color', label: 'Color', icon: wingColorPaletteIcon },
|
||||
{ id: 'typography', label: 'Typography', icon: wingTypographyIcon },
|
||||
{ id: 'radius', label: 'Radius', icon: wingElevationIcon },
|
||||
{ id: 'layout', label: 'Layout', icon: wingLayoutGridIcon },
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'color', label: 'Color' },
|
||||
{ id: 'typography', label: 'Typography' },
|
||||
{ id: 'radius', label: 'Radius' },
|
||||
{ id: 'layout', label: 'Layout' },
|
||||
];
|
||||
|
||||
const COMPONENTS_MENU: MenuItem[] = [
|
||||
{ id: 'buttons', label: 'Buttons', icon: wingFoundationsIcon },
|
||||
{ id: 'text-inputs', label: 'Text Inputs', icon: wingFoundationsIcon },
|
||||
{ id: 'controls', label: 'Controls', icon: wingFoundationsIcon },
|
||||
{ id: 'badge', label: 'Badge', icon: wingColorPaletteIcon },
|
||||
{ id: 'dialog', label: 'Dialog', icon: wingLayoutGridIcon },
|
||||
{ id: 'tabs', label: 'Tabs', icon: wingLayoutGridIcon },
|
||||
{ id: 'popup', label: 'Popup', icon: wingElevationIcon },
|
||||
{ id: 'navigation', label: 'Navigation', icon: wingTypographyIcon },
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'buttons', label: 'Buttons' },
|
||||
{ id: 'text-field', label: 'Text Field' },
|
||||
];
|
||||
|
||||
const SIDEBAR_CONFIG: Record<DesignTab, { title: string; subtitle: string; menu: MenuItem[] }> = {
|
||||
@ -58,7 +47,7 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onItemChange(item.id)}
|
||||
className="py-3 px-6 flex flex-row gap-3 items-center w-full text-left transition-colors duration-150 border-l-4"
|
||||
className="py-3 px-6 flex flex-row items-center w-full text-left transition-colors duration-150 border-l-4"
|
||||
style={{
|
||||
borderColor: isActive ? theme.textAccent : 'transparent',
|
||||
color: isActive ? theme.textAccent : theme.textMuted,
|
||||
@ -67,7 +56,6 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
<img src={item.icon} alt={item.label} className="w-5 h-5 shrink-0" />
|
||||
<span className="font-sans text-base leading-6">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
@ -82,22 +70,6 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
|
||||
boxShadow: `0px 25px 50px -12px ${theme.sidebarShadow}`,
|
||||
}}
|
||||
>
|
||||
{/* 타이틀 영역 */}
|
||||
{/* <div className="px-6 pb-8">
|
||||
<p
|
||||
className="font-sans text-xl leading-7 font-bold"
|
||||
style={{ letterSpacing: '-1px', color: theme.textPrimary }}
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
<p
|
||||
className="font-sans text-[10px] leading-[15px] font-normal uppercase"
|
||||
style={{ letterSpacing: '1px', color: theme.textAccent }}
|
||||
>
|
||||
{subtitle}
|
||||
</p>
|
||||
</div> */}
|
||||
|
||||
{/* 메뉴 네비게이션 */}
|
||||
<nav className="flex-1 flex flex-col">{menu.map(renderMenuItem)}</nav>
|
||||
</aside>
|
||||
|
||||
274
frontend/src/pages/design/FoundationsOverview.tsx
Normal file
274
frontend/src/pages/design/FoundationsOverview.tsx
Normal file
@ -0,0 +1,274 @@
|
||||
// FoundationsOverview.tsx — Foundations 탭 Overview 카드 그리드
|
||||
|
||||
import type { DesignTheme } from './designTheme';
|
||||
|
||||
// ---------- 타입 ----------
|
||||
|
||||
interface OverviewCard {
|
||||
id: string;
|
||||
label: string;
|
||||
thumbnail: (isDark: boolean) => React.ReactNode;
|
||||
}
|
||||
|
||||
// ---------- 썸네일 구현 ----------
|
||||
|
||||
const ColorThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||
// 3x3 도트 그리드: gray / pink / cyan 컬럼, 어두운 순
|
||||
const dots: string[][] = [
|
||||
['#9ca3af', '#f9a8d4', '#67e8f9'],
|
||||
['#4b5563', '#ec4899', '#06b6d4'],
|
||||
['#1f2937', '#9d174d', '#0e7490'],
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<div
|
||||
className="grid gap-3"
|
||||
style={{ gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(3, 1fr)' }}
|
||||
>
|
||||
{dots.map((row, ri) =>
|
||||
row.map((color, ci) => (
|
||||
<div
|
||||
key={`${ri}-${ci}`}
|
||||
className="rounded-full"
|
||||
style={{
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
backgroundColor: color,
|
||||
boxShadow: isDark
|
||||
? `0 0 8px ${color}55`
|
||||
: `0 1px 3px rgba(0,0,0,0.15)`,
|
||||
}}
|
||||
/>
|
||||
)),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TypographyThumbnail = ({ isDark }: { isDark: boolean }) => (
|
||||
<div className="w-full h-full flex items-center justify-center gap-1">
|
||||
<span
|
||||
style={{
|
||||
fontSize: '72px',
|
||||
lineHeight: 1,
|
||||
fontWeight: 700,
|
||||
fontFamily: 'sans-serif',
|
||||
color: isDark ? 'rgba(223,226,243,0.90)' : 'rgba(15,23,42,0.85)',
|
||||
letterSpacing: '-2px',
|
||||
}}
|
||||
>
|
||||
가
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '64px',
|
||||
lineHeight: 1,
|
||||
fontWeight: 700,
|
||||
fontFamily: 'serif',
|
||||
color: isDark ? 'rgba(76,215,246,0.80)' : 'rgba(6,182,212,0.80)',
|
||||
letterSpacing: '-1px',
|
||||
}}
|
||||
>
|
||||
a
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const RadiusThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||
const items = [
|
||||
{ radius: '0px', size: 36 },
|
||||
{ radius: '6px', size: 36 },
|
||||
{ radius: '12px', size: 36 },
|
||||
{ radius: '50%', size: 36 },
|
||||
];
|
||||
|
||||
const borderColor = isDark ? 'rgba(76,215,246,0.55)' : 'rgba(6,182,212,0.65)';
|
||||
const bgColor = isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.08)';
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center gap-4">
|
||||
{items.map(({ radius, size }) => (
|
||||
<div
|
||||
key={radius}
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: radius,
|
||||
border: `2px solid ${borderColor}`,
|
||||
backgroundColor: bgColor,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LayoutThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||
const accent = isDark ? 'rgba(76,215,246,0.18)' : 'rgba(6,182,212,0.14)';
|
||||
const accentStrong = isDark ? 'rgba(76,215,246,0.40)' : 'rgba(6,182,212,0.38)';
|
||||
const faint = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col items-center justify-center gap-2 px-8">
|
||||
{/* 헤더 바 */}
|
||||
<div
|
||||
className="w-full rounded"
|
||||
style={{ height: '14px', backgroundColor: accentStrong }}
|
||||
/>
|
||||
{/* 2열 바디 */}
|
||||
<div className="w-full flex gap-2" style={{ flex: 1, maxHeight: '52px' }}>
|
||||
<div
|
||||
className="rounded"
|
||||
style={{ width: '28%', backgroundColor: accent }}
|
||||
/>
|
||||
<div className="flex flex-col gap-1.5" style={{ flex: 1 }}>
|
||||
<div
|
||||
className="w-full rounded"
|
||||
style={{ height: '12px', backgroundColor: faint }}
|
||||
/>
|
||||
<div
|
||||
className="w-3/4 rounded"
|
||||
style={{ height: '12px', backgroundColor: faint }}
|
||||
/>
|
||||
<div
|
||||
className="w-full rounded"
|
||||
style={{ height: '12px', backgroundColor: faint }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* 푸터 바 */}
|
||||
<div
|
||||
className="w-full rounded"
|
||||
style={{ height: '10px', backgroundColor: accent }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ---------- 카드 정의 ----------
|
||||
|
||||
const OVERVIEW_CARDS: OverviewCard[] = [
|
||||
{
|
||||
id: 'color',
|
||||
label: 'Color',
|
||||
thumbnail: (isDark) => <ColorThumbnail isDark={isDark} />,
|
||||
},
|
||||
{
|
||||
id: 'typography',
|
||||
label: 'Typography',
|
||||
thumbnail: (isDark) => <TypographyThumbnail isDark={isDark} />,
|
||||
},
|
||||
{
|
||||
id: 'radius',
|
||||
label: 'Radius',
|
||||
thumbnail: (isDark) => <RadiusThumbnail isDark={isDark} />,
|
||||
},
|
||||
{
|
||||
id: 'layout',
|
||||
label: 'Layout',
|
||||
thumbnail: (isDark) => <LayoutThumbnail isDark={isDark} />,
|
||||
},
|
||||
];
|
||||
|
||||
// ---------- Props ----------
|
||||
|
||||
interface FoundationsOverviewProps {
|
||||
theme: DesignTheme;
|
||||
onNavigate: (id: string) => void;
|
||||
}
|
||||
|
||||
// ---------- 컴포넌트 ----------
|
||||
|
||||
const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) => {
|
||||
const t = theme;
|
||||
const isDark = t.mode === 'dark';
|
||||
|
||||
const cardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
|
||||
const cardBorder = isDark ? 'rgba(255,255,255,0.06)' : '#e5e5e5';
|
||||
const thumbnailBorderBottom = isDark ? 'rgba(255,255,255,0.06)' : '#e0e0e0';
|
||||
|
||||
return (
|
||||
<div className="pt-24 px-12 pb-16 max-w-5xl flex flex-col gap-12">
|
||||
|
||||
{/* ── 헤더 영역 ── */}
|
||||
<div className="flex flex-col gap-3">
|
||||
<span
|
||||
className="font-mono text-xs font-semibold uppercase"
|
||||
style={{ letterSpacing: '1.4px', color: t.textAccent }}
|
||||
>
|
||||
Foundations
|
||||
</span>
|
||||
<h1
|
||||
className="font-sans text-4xl font-bold leading-tight"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
Overview
|
||||
</h1>
|
||||
<p
|
||||
className="font-korean text-sm leading-6"
|
||||
style={{ color: t.textSecondary }}
|
||||
>
|
||||
디자인의 기반이 되는 핵심 요소 사용 기준입니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ── 3열 카드 그리드 ── */}
|
||||
<div
|
||||
className="grid gap-5"
|
||||
style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}
|
||||
>
|
||||
{OVERVIEW_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.id}
|
||||
className="rounded-lg border border-solid flex flex-col cursor-pointer transition-all duration-200"
|
||||
style={{
|
||||
backgroundColor: cardBg,
|
||||
borderColor: cardBorder,
|
||||
}}
|
||||
onClick={() => onNavigate(card.id)}
|
||||
onMouseEnter={(e) => {
|
||||
const el = e.currentTarget;
|
||||
el.style.transform = 'scale(1.025)';
|
||||
el.style.boxShadow = isDark
|
||||
? '0 8px 24px rgba(0,0,0,0.35)'
|
||||
: '0 6px 18px rgba(0,0,0,0.10)';
|
||||
el.style.borderColor = isDark
|
||||
? 'rgba(76,215,246,0.22)'
|
||||
: 'rgba(6,182,212,0.28)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const el = e.currentTarget;
|
||||
el.style.transform = 'scale(1)';
|
||||
el.style.boxShadow = 'none';
|
||||
el.style.borderColor = cardBorder;
|
||||
}}
|
||||
>
|
||||
{/* 썸네일 영역 */}
|
||||
<div
|
||||
className="h-48 rounded-t-lg overflow-hidden"
|
||||
style={{
|
||||
borderBottom: `1px solid ${thumbnailBorderBottom}`,
|
||||
}}
|
||||
>
|
||||
{card.thumbnail(isDark)}
|
||||
</div>
|
||||
|
||||
{/* 카드 라벨 */}
|
||||
<div className="px-5 py-4">
|
||||
<span
|
||||
className="font-sans text-sm font-semibold"
|
||||
style={{ color: t.textPrimary }}
|
||||
>
|
||||
{card.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FoundationsOverview;
|
||||
1546
frontend/src/pages/design/TextFieldContent.tsx
Normal file
1546
frontend/src/pages/design/TextFieldContent.tsx
Normal file
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
Load Diff
@ -15,6 +15,9 @@ import LayerPanel from './LayerPanel';
|
||||
import SensitiveLayerPanel from './SensitiveLayerPanel';
|
||||
import DispersingZonePanel from './DispersingZonePanel';
|
||||
import MonitorRealtimePanel from './MonitorRealtimePanel';
|
||||
import MonitorVesselPanel from './MonitorVesselPanel';
|
||||
import CollectHrPanel from './CollectHrPanel';
|
||||
import MonitorForecastPanel from './MonitorForecastPanel';
|
||||
import VesselMaterialsPanel from './VesselMaterialsPanel';
|
||||
|
||||
/** 기존 패널이 있는 메뉴 ID 매핑 */
|
||||
@ -36,6 +39,9 @@ const PANEL_MAP: Record<string, () => JSX.Element> = {
|
||||
'dispersant-zone': () => <DispersingZonePanel />,
|
||||
'vessel-materials': () => <VesselMaterialsPanel />,
|
||||
'monitor-realtime': () => <MonitorRealtimePanel />,
|
||||
'monitor-vessel': () => <MonitorVesselPanel />,
|
||||
'collect-hr': () => <CollectHrPanel />,
|
||||
'monitor-forecast': () => <MonitorForecastPanel />,
|
||||
};
|
||||
|
||||
export function AdminView() {
|
||||
|
||||
333
frontend/src/tabs/admin/components/CollectHrPanel.tsx
Normal file
333
frontend/src/tabs/admin/components/CollectHrPanel.tsx
Normal file
@ -0,0 +1,333 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
|
||||
// ─── 타입 ──────────────────────────────────────────────────
|
||||
|
||||
interface EtaClct {
|
||||
startDate: string;
|
||||
endDate: string;
|
||||
}
|
||||
|
||||
interface ResultClct {
|
||||
resultDate: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface HrCollectItem {
|
||||
id: string;
|
||||
rootId: string;
|
||||
ip: string;
|
||||
depth1: string;
|
||||
depth2: string;
|
||||
depth3: string;
|
||||
depth4: string | null;
|
||||
clctName: string;
|
||||
clctType: string;
|
||||
clctTypeName: string;
|
||||
trnsmtCycle: string | null;
|
||||
receiveCycle: string | null;
|
||||
targetTable: string;
|
||||
seq: number;
|
||||
estmtRqrd: string;
|
||||
activeYn: string;
|
||||
clctStartDt: string;
|
||||
clctEndDt: string;
|
||||
clctDate: string | null;
|
||||
jobName: string;
|
||||
resultClctList: ResultClct[];
|
||||
etaClctList: EtaClct[];
|
||||
}
|
||||
|
||||
// ─── Mock 데이터 ────────────────────────────────────────────
|
||||
|
||||
// TODO: 실제 API 연동 시 fetch 호출로 교체
|
||||
const MOCK_DATA: HrCollectItem[] = [
|
||||
{
|
||||
id: '100200',
|
||||
rootId: '2',
|
||||
ip: '127.0.0.1',
|
||||
depth1: '연계',
|
||||
depth2: '해양경찰청',
|
||||
depth3: '해경업무포탈시스템(KBP)',
|
||||
depth4: null,
|
||||
clctName: '사용자부서',
|
||||
clctType: '000002',
|
||||
clctTypeName: '배치',
|
||||
trnsmtCycle: null,
|
||||
receiveCycle: '0 20 4 * * *',
|
||||
targetTable: 'common.t_dept_info',
|
||||
seq: 101,
|
||||
estmtRqrd: '1',
|
||||
activeYn: 'Y',
|
||||
clctStartDt: '2024-12-16',
|
||||
clctEndDt: '9999-12-31',
|
||||
clctDate: '2024-12-16',
|
||||
jobName: 'DeptJob',
|
||||
resultClctList: [],
|
||||
etaClctList: [
|
||||
{ startDate: '2025-09-12 04:20', endDate: '2025-09-12 04:21' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '100200',
|
||||
rootId: '2',
|
||||
ip: '127.0.0.1',
|
||||
depth1: '연계',
|
||||
depth2: '해양경찰청',
|
||||
depth3: '해경업무포탈시스템(KBP)',
|
||||
depth4: null,
|
||||
clctName: '사용자계정',
|
||||
clctType: '000002',
|
||||
clctTypeName: '배치',
|
||||
trnsmtCycle: null,
|
||||
receiveCycle: '0 20 4 * 1 *',
|
||||
targetTable: 'common.t_usr',
|
||||
seq: 102,
|
||||
estmtRqrd: '5',
|
||||
activeYn: 'Y',
|
||||
clctStartDt: '2024-12-17',
|
||||
clctEndDt: '9999-12-31',
|
||||
clctDate: null,
|
||||
jobName: 'UserFlowJob',
|
||||
resultClctList: [],
|
||||
etaClctList: [],
|
||||
},
|
||||
{
|
||||
id: '100201',
|
||||
rootId: '2',
|
||||
ip: '127.0.0.1',
|
||||
depth1: '연계',
|
||||
depth2: '해양경찰청',
|
||||
depth3: '해경업무포탈시스템(KBP)',
|
||||
depth4: null,
|
||||
clctName: '사용자직위',
|
||||
clctType: '000002',
|
||||
clctTypeName: '배치',
|
||||
trnsmtCycle: null,
|
||||
receiveCycle: '0 30 4 * * *',
|
||||
targetTable: 'common.t_position_info',
|
||||
seq: 103,
|
||||
estmtRqrd: '1',
|
||||
activeYn: 'Y',
|
||||
clctStartDt: '2024-12-16',
|
||||
clctEndDt: '9999-12-31',
|
||||
clctDate: '2025-01-10',
|
||||
jobName: 'PositionJob',
|
||||
resultClctList: [{ resultDate: '2025-09-12 04:30', count: 42 }],
|
||||
etaClctList: [
|
||||
{ startDate: '2025-09-12 04:30', endDate: '2025-09-12 04:31' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '100202',
|
||||
rootId: '2',
|
||||
ip: '127.0.0.1',
|
||||
depth1: '연계',
|
||||
depth2: '해양경찰청',
|
||||
depth3: '해경업무포탈시스템(KBP)',
|
||||
depth4: null,
|
||||
clctName: '조직정보',
|
||||
clctType: '000002',
|
||||
clctTypeName: '배치',
|
||||
trnsmtCycle: null,
|
||||
receiveCycle: '0 40 4 * * *',
|
||||
targetTable: 'common.t_org_info',
|
||||
seq: 104,
|
||||
estmtRqrd: '2',
|
||||
activeYn: 'Y',
|
||||
clctStartDt: '2024-12-18',
|
||||
clctEndDt: '9999-12-31',
|
||||
clctDate: '2025-03-20',
|
||||
jobName: 'OrgJob',
|
||||
resultClctList: [{ resultDate: '2025-09-12 04:40', count: 15 }],
|
||||
etaClctList: [
|
||||
{ startDate: '2025-09-12 04:40', endDate: '2025-09-12 04:41' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '100203',
|
||||
rootId: '2',
|
||||
ip: '127.0.0.1',
|
||||
depth1: '연계',
|
||||
depth2: '해양경찰청',
|
||||
depth3: '해경업무포탈시스템(KBP)',
|
||||
depth4: null,
|
||||
clctName: '근무상태',
|
||||
clctType: '000002',
|
||||
clctTypeName: '배치',
|
||||
trnsmtCycle: null,
|
||||
receiveCycle: '0 0 5 * * *',
|
||||
targetTable: 'common.t_work_status',
|
||||
seq: 105,
|
||||
estmtRqrd: '3',
|
||||
activeYn: 'N',
|
||||
clctStartDt: '2025-01-15',
|
||||
clctEndDt: '9999-12-31',
|
||||
clctDate: null,
|
||||
jobName: 'WorkStatusJob',
|
||||
resultClctList: [],
|
||||
etaClctList: [],
|
||||
},
|
||||
];
|
||||
|
||||
function fetchHrCollectData(): Promise<HrCollectItem[]> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => resolve(MOCK_DATA), 300);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── 상태 뱃지 ─────────────────────────────────────────────
|
||||
|
||||
function getCollectStatus(item: HrCollectItem): { label: string; color: string } {
|
||||
if (item.activeYn !== 'Y') {
|
||||
return { label: '비활성', color: 'text-t3 bg-bg-2' };
|
||||
}
|
||||
if (item.etaClctList.length > 0) {
|
||||
return { label: '완료', color: 'text-emerald-400 bg-emerald-500/10' };
|
||||
}
|
||||
return { label: '대기', color: 'text-yellow-400 bg-yellow-500/10' };
|
||||
}
|
||||
|
||||
// ─── cron 표현식 → 읽기 쉬운 형태 ─────────────────────────
|
||||
|
||||
function formatCron(cron: string | null): string {
|
||||
if (!cron) return '-';
|
||||
const parts = cron.split(' ');
|
||||
if (parts.length < 6) return cron;
|
||||
const [sec, min, hour, , , ] = parts;
|
||||
return `매일 ${hour}:${min.padStart(2, '0')}:${sec.padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// ─── 테이블 ─────────────────────────────────────────────────
|
||||
|
||||
const HEADERS = ['번호', '수집항목', '기관', '시스템', '유형', '수집주기', '대상테이블', 'Job명', '활성', '수집시작일', '최근수집일', '상태'];
|
||||
|
||||
function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean }) {
|
||||
return (
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full text-xs border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-bg-2 text-t3 uppercase tracking-wide">
|
||||
{HEADERS.map((h) => (
|
||||
<th key={h} className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap">{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && rows.length === 0
|
||||
? Array.from({ length: 5 }).map((_, i) => (
|
||||
<tr key={i} className="border-b border-border-1 animate-pulse">
|
||||
{HEADERS.map((_, j) => (
|
||||
<td key={j} className="px-3 py-2">
|
||||
<div className="h-3 bg-bg-2 rounded w-14" />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
: rows.map((row, idx) => {
|
||||
const status = getCollectStatus(row);
|
||||
return (
|
||||
<tr key={`${row.seq}`} className="border-b border-border-1 hover:bg-bg-1/50">
|
||||
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
|
||||
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.clctName}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth2}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth3}</td>
|
||||
<td className="px-3 py-2 text-t2">{row.clctTypeName}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{formatCron(row.receiveCycle)}</td>
|
||||
<td className="px-3 py-2 text-t2 font-mono">{row.targetTable}</td>
|
||||
<td className="px-3 py-2 text-t2 font-mono">{row.jobName}</td>
|
||||
<td className="px-3 py-2 text-center">
|
||||
<span className={`inline-block px-1.5 py-0.5 rounded text-[11px] font-medium ${
|
||||
row.activeYn === 'Y' ? 'text-emerald-400 bg-emerald-500/10' : 'text-t3 bg-bg-2'
|
||||
}`}>
|
||||
{row.activeYn === 'Y' ? 'Y' : 'N'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctStartDt}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctDate ?? '-'}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`inline-block px-2 py-0.5 rounded text-[11px] font-medium ${status.color}`}>
|
||||
{status.label}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── 메인 패널 ──────────────────────────────────────────────
|
||||
|
||||
export default function CollectHrPanel() {
|
||||
const [rows, setRows] = useState<HrCollectItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
const data = await fetchHrCollectData();
|
||||
setRows(data);
|
||||
setLoading(false);
|
||||
setLastUpdate(new Date());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
if (rows.length === 0) {
|
||||
void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
|
||||
}
|
||||
return () => { isMounted = false; };
|
||||
}, [rows.length, fetchData]);
|
||||
|
||||
const activeCount = rows.filter((r) => r.activeYn === 'Y').length;
|
||||
const completedCount = rows.filter((r) => r.etaClctList.length > 0).length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
|
||||
<h2 className="text-sm font-semibold text-t1">인사정보 수집 현황</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
{lastUpdate && (
|
||||
<span className="text-xs text-t3">
|
||||
갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={fetchData}
|
||||
disabled={loading}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<svg
|
||||
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 상태 표시줄 */}
|
||||
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||
수집 완료 {completedCount}건
|
||||
</span>
|
||||
<span className="text-xs text-t3">
|
||||
전체 {rows.length}건 (활성: {activeCount} / 비활성: {rows.length - activeCount})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 테이블 */}
|
||||
<div className="flex-1 overflow-auto p-5">
|
||||
<HrTable rows={rows} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
273
frontend/src/tabs/admin/components/MonitorForecastPanel.tsx
Normal file
273
frontend/src/tabs/admin/components/MonitorForecastPanel.tsx
Normal file
@ -0,0 +1,273 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
getNumericalDataStatus,
|
||||
type NumericalDataStatus,
|
||||
} from '../services/monitorApi';
|
||||
|
||||
type TabId = 'all' | 'ocean' | 'koast';
|
||||
|
||||
const TABS: { id: TabId; label: string }[] = [
|
||||
{ id: 'all', label: '전체' },
|
||||
{ id: 'ocean', label: '기상·해양 모델' },
|
||||
{ id: 'koast', label: 'KOAST' },
|
||||
];
|
||||
|
||||
const OCEAN_MODELS = ['HYCOM', 'GFS', 'WW3'];
|
||||
const KOAST_MODELS = ['KOAST POS_WIND', 'KOAST POS_HYDR', 'KOAST POS_WAVE'];
|
||||
|
||||
function filterByTab(rows: NumericalDataStatus[], tab: TabId): NumericalDataStatus[] {
|
||||
if (tab === 'ocean') return rows.filter((r) => OCEAN_MODELS.includes(r.modelName));
|
||||
if (tab === 'koast') return rows.filter((r) => KOAST_MODELS.includes(r.modelName));
|
||||
return rows;
|
||||
}
|
||||
|
||||
function formatDuration(sec: number | null): string {
|
||||
if (sec == null) return '-';
|
||||
const m = Math.floor(sec / 60);
|
||||
const s = sec % 60;
|
||||
return m > 0 ? `${m}분 ${s}초` : `${s}초`;
|
||||
}
|
||||
|
||||
function formatDatetime(iso: string | null): string {
|
||||
if (!iso) return '-';
|
||||
const d = new Date(iso);
|
||||
const mm = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const dd = String(d.getDate()).padStart(2, '0');
|
||||
const hh = String(d.getHours()).padStart(2, '0');
|
||||
const min = String(d.getMinutes()).padStart(2, '0');
|
||||
return `${mm}-${dd} ${hh}:${min}`;
|
||||
}
|
||||
|
||||
function formatTime(iso: string | null): string {
|
||||
if (!iso) return '-';
|
||||
const d = new Date(iso);
|
||||
const hh = String(d.getHours()).padStart(2, '0');
|
||||
const min = String(d.getMinutes()).padStart(2, '0');
|
||||
return `${hh}:${min}`;
|
||||
}
|
||||
|
||||
function StatusCell({ row }: { row: NumericalDataStatus }) {
|
||||
if (row.lastStatus === 'COMPLETED') {
|
||||
return <span className="text-emerald-400 text-xs">정상</span>;
|
||||
}
|
||||
if (row.lastStatus === 'FAILED') {
|
||||
return (
|
||||
<span className="text-red-400 text-xs">
|
||||
오류{row.consecutiveFailures > 0 ? ` (${row.consecutiveFailures}회 연속)` : ''}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (row.lastStatus === 'STARTED') {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 text-cyan-400 text-xs">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
|
||||
실행 중
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span className="text-t3 text-xs">-</span>;
|
||||
}
|
||||
|
||||
function StatusBadge({
|
||||
loading,
|
||||
errorCount,
|
||||
total,
|
||||
}: {
|
||||
loading: boolean;
|
||||
errorCount: number;
|
||||
total: number;
|
||||
}) {
|
||||
if (loading) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-2 text-t2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
|
||||
조회 중...
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (errorCount === total && total > 0) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-red-400" />
|
||||
연계 오류
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (errorCount > 0) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
|
||||
일부 오류 ({errorCount}/{total})
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||
정상
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const TABLE_HEADERS = [
|
||||
'모델명',
|
||||
'데이터 기준일',
|
||||
'마지막 다운로드',
|
||||
'상태',
|
||||
'소요 시간',
|
||||
'다음 예정',
|
||||
];
|
||||
|
||||
function ForecastTable({
|
||||
rows,
|
||||
loading,
|
||||
}: {
|
||||
rows: NumericalDataStatus[];
|
||||
loading: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full text-xs border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-bg-2 text-t3 uppercase tracking-wide">
|
||||
{TABLE_HEADERS.map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap"
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && rows.length === 0
|
||||
? Array.from({ length: 6 }).map((_, i) => (
|
||||
<tr key={i} className="border-b border-border-1 animate-pulse">
|
||||
{TABLE_HEADERS.map((_, j) => (
|
||||
<td key={j} className="px-3 py-2">
|
||||
<div className="h-3 bg-bg-2 rounded w-16" />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
: rows.map((row) => (
|
||||
<tr key={row.jobName} className="border-b border-border-1 hover:bg-bg-1/50">
|
||||
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
|
||||
{row.modelName}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-t2">{row.lastDataDate ?? '-'}</td>
|
||||
<td className="px-3 py-2 text-t2">{formatDatetime(row.lastDownloadedAt)}</td>
|
||||
<td className="px-3 py-2">
|
||||
<StatusCell row={row} />
|
||||
</td>
|
||||
<td className="px-3 py-2 text-t2">{formatDuration(row.durationSec)}</td>
|
||||
<td className="px-3 py-2 text-t2">{formatTime(row.nextScheduledAt)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function MonitorForecastPanel() {
|
||||
const [activeTab, setActiveTab] = useState<TabId>('all');
|
||||
const [rows, setRows] = useState<NumericalDataStatus[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await getNumericalDataStatus();
|
||||
setRows(data);
|
||||
setLastUpdate(new Date());
|
||||
} catch {
|
||||
// 오류 시 기존 데이터 유지
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
const visibleRows = filterByTab(rows, activeTab);
|
||||
const errorCount = visibleRows.filter(
|
||||
(r) => r.lastStatus === 'FAILED'
|
||||
).length;
|
||||
const totalCount = visibleRows.length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
|
||||
<h2 className="text-sm font-semibold text-t1">수치예측자료 모니터링</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
{lastUpdate && (
|
||||
<span className="text-xs text-t3">
|
||||
갱신:{' '}
|
||||
{lastUpdate.toLocaleTimeString('ko-KR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => void fetchData()}
|
||||
disabled={loading}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<svg
|
||||
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||||
/>
|
||||
</svg>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 탭 */}
|
||||
<div className="flex gap-0 border-b border-border-1 shrink-0 px-5">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`px-4 py-2.5 text-xs font-medium border-b-2 transition-colors ${
|
||||
activeTab === tab.id
|
||||
? 'border-cyan-400 text-cyan-400'
|
||||
: 'border-transparent text-t3 hover:text-t2'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 상태 표시줄 */}
|
||||
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
|
||||
<StatusBadge loading={loading} errorCount={errorCount} total={totalCount} />
|
||||
{!loading && totalCount > 0 && (
|
||||
<span className="text-xs text-t3">모델 {totalCount}개</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 테이블 */}
|
||||
<div className="flex-1 overflow-auto p-5">
|
||||
<ForecastTable rows={visibleRows} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
246
frontend/src/tabs/admin/components/MonitorVesselPanel.tsx
Normal file
246
frontend/src/tabs/admin/components/MonitorVesselPanel.tsx
Normal file
@ -0,0 +1,246 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
|
||||
// TODO: 실제 API 연동 시 fetch 호출로 교체
|
||||
interface VesselMonitorRow {
|
||||
institution: string;
|
||||
institutionCode: string;
|
||||
systemName: string;
|
||||
linkInfo: string;
|
||||
storagePlace: string;
|
||||
linkMethod: string;
|
||||
collectionCycle: string;
|
||||
collectionCount: string;
|
||||
isNormal: boolean;
|
||||
lastMessageTime: string;
|
||||
}
|
||||
|
||||
/** 기관코드 → 원천기관명 매핑 */
|
||||
const INSTITUTION_NAMES: Record<string, string> = {
|
||||
BS: '부산항',
|
||||
BSN: '부산신항',
|
||||
DH: '동해안',
|
||||
DS: '대산항',
|
||||
GI: '경인항',
|
||||
GIC: '경인연안',
|
||||
GS: '군산항',
|
||||
IC: '인천항',
|
||||
JDC: '진도연안',
|
||||
JJ: '제주항',
|
||||
MP: '목포항',
|
||||
};
|
||||
|
||||
/** Mock 데이터 정의 (스크린샷 기반) */
|
||||
const MOCK_DATA: Omit<VesselMonitorRow, 'institution'>[] = [
|
||||
{ institutionCode: 'BS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '439 / 499', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'BS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 463', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'BSN', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '255 / 278', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'BSN', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 426', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'DH', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||
{ institutionCode: 'DH', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||
{ institutionCode: 'DS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:57' },
|
||||
{ institutionCode: 'DS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:56' },
|
||||
{ institutionCode: 'GI', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '120 / 136', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'GI', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 467', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'GIC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '180 / 216', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'GIC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||
{ institutionCode: 'GS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||
{ institutionCode: 'GS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||
{ institutionCode: 'IC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '149 / 176', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'IC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 503', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'JDC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '433 / 524', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'JDC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '256 / 1619', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'JJ', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '429 / 508', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'JJ', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '160 / 1592', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||
{ institutionCode: 'MP', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||
{ institutionCode: 'MP', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||
];
|
||||
|
||||
/** Mock fetch — TODO: 실제 API 연동 시 fetch 호출로 교체 */
|
||||
function fetchVesselMonitorData(): Promise<VesselMonitorRow[]> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const rows: VesselMonitorRow[] = MOCK_DATA.map((d) => ({
|
||||
...d,
|
||||
institution: INSTITUTION_NAMES[d.institutionCode] ?? d.institutionCode,
|
||||
}));
|
||||
resolve(rows);
|
||||
}, 400);
|
||||
});
|
||||
}
|
||||
|
||||
/* ── 상태 뱃지 ── */
|
||||
function StatusBadge({ loading, onCount, total }: { loading: boolean; onCount: number; total: number }) {
|
||||
if (loading) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-2 text-t2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
|
||||
조회 중...
|
||||
</span>
|
||||
);
|
||||
}
|
||||
const offCount = total - onCount;
|
||||
if (offCount === total) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-red-400" />
|
||||
전체 OFF
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (offCount > 0) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
|
||||
일부 OFF ({offCount}/{total})
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||
전체 정상
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── 연결상태 셀 ── */
|
||||
function ConnectionBadge({ isNormal, lastMessageTime }: { isNormal: boolean; lastMessageTime: string }) {
|
||||
if (isNormal) {
|
||||
return (
|
||||
<div className="flex flex-col items-start gap-0.5">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-blue-600 text-white">
|
||||
ON
|
||||
</span>
|
||||
{lastMessageTime && (
|
||||
<span className="text-[10px] text-t3">{lastMessageTime}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="flex flex-col items-start gap-0.5">
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-orange-500 text-white">
|
||||
OFF
|
||||
</span>
|
||||
{lastMessageTime && (
|
||||
<span className="text-[10px] text-t3">{lastMessageTime}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── 테이블 ── */
|
||||
const HEADERS = ['번호', '원천기관', '기관코드', '정보시스템명', '연계정보', '저장장소', '연계방식', '수집주기', '선박건수/신호건수', '연결상태'];
|
||||
|
||||
function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boolean }) {
|
||||
return (
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full text-xs border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-bg-2 text-t3 uppercase tracking-wide">
|
||||
{HEADERS.map((h) => (
|
||||
<th key={h} className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap">{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading && rows.length === 0
|
||||
? Array.from({ length: 8 }).map((_, i) => (
|
||||
<tr key={i} className="border-b border-border-1 animate-pulse">
|
||||
{HEADERS.map((_, j) => (
|
||||
<td key={j} className="px-3 py-2">
|
||||
<div className="h-3 bg-bg-2 rounded w-14" />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
: rows.map((row, idx) => (
|
||||
<tr key={`${row.institutionCode}-${row.systemName}`} className="border-b border-border-1 hover:bg-bg-1/50">
|
||||
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
|
||||
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.institution}</td>
|
||||
<td className="px-3 py-2 text-t2">{row.institutionCode}</td>
|
||||
<td className="px-3 py-2 text-t2">{row.systemName}</td>
|
||||
<td className="px-3 py-2 text-t2">{row.linkInfo}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.storagePlace}</td>
|
||||
<td className="px-3 py-2 text-t2">{row.linkMethod}</td>
|
||||
<td className="px-3 py-2 text-t2">{row.collectionCycle}</td>
|
||||
<td className="px-3 py-2 text-t2 text-center">{row.collectionCount}</td>
|
||||
<td className="px-3 py-2">
|
||||
<ConnectionBadge isNormal={row.isNormal} lastMessageTime={row.lastMessageTime} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── 메인 패널 ── */
|
||||
export default function MonitorVesselPanel() {
|
||||
const [rows, setRows] = useState<VesselMonitorRow[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
const data = await fetchVesselMonitorData();
|
||||
setRows(data);
|
||||
setLoading(false);
|
||||
setLastUpdate(new Date());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
if (rows.length === 0) {
|
||||
void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
|
||||
}
|
||||
return () => { isMounted = false; };
|
||||
}, [rows.length, fetchData]);
|
||||
|
||||
const onCount = rows.filter((r) => r.isNormal).length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
|
||||
<h2 className="text-sm font-semibold text-t1">선박위치정보 모니터링</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
{lastUpdate && (
|
||||
<span className="text-xs text-t3">
|
||||
갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={fetchData}
|
||||
disabled={loading}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<svg
|
||||
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
새로고침
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 상태 표시줄 */}
|
||||
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
|
||||
<StatusBadge loading={loading} onCount={onCount} total={rows.length} />
|
||||
<span className="text-xs text-t3">
|
||||
연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 테이블 */}
|
||||
<div className="flex-1 overflow-auto p-5">
|
||||
<VesselTable rows={rows} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -74,7 +74,6 @@ export const ADMIN_MENU: AdminMenuItem[] = [
|
||||
{ id: 'monitor-realtime', label: '실시간 관측자료' },
|
||||
{ id: 'monitor-forecast', label: '수치예측자료' },
|
||||
{ id: 'monitor-vessel', label: '선박위치정보' },
|
||||
{ id: 'monitor-hr', label: '인사' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
17
frontend/src/tabs/admin/services/monitorApi.ts
Normal file
17
frontend/src/tabs/admin/services/monitorApi.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { api } from '@common/services/api';
|
||||
|
||||
export interface NumericalDataStatus {
|
||||
modelName: string;
|
||||
jobName: string;
|
||||
lastStatus: 'COMPLETED' | 'FAILED' | 'STARTED' | 'UNKNOWN';
|
||||
lastDataDate: string | null;
|
||||
lastDownloadedAt: string | null;
|
||||
nextScheduledAt: string | null;
|
||||
durationSec: number | null;
|
||||
consecutiveFailures: number;
|
||||
}
|
||||
|
||||
export async function getNumericalDataStatus(): Promise<NumericalDataStatus[]> {
|
||||
const res = await api.get<NumericalDataStatus[]>('/monitor/numerical');
|
||||
return res.data;
|
||||
}
|
||||
@ -153,6 +153,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
|
||||
<th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">번호</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">사고명</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">사고일시</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">예측 실행</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">예측시간</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-bold text-text-3 uppercase tracking-wider">유종</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-bold text-text-3 uppercase tracking-wider">유출량</th>
|
||||
@ -167,7 +168,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
|
||||
<tbody className="divide-y divide-border">
|
||||
{currentAnalyses.map((analysis) => (
|
||||
<tr
|
||||
key={analysis.acdntSn}
|
||||
key={analysis.predRunSn ?? analysis.acdntSn}
|
||||
className="hover:bg-bg-2 transition-colors cursor-pointer group"
|
||||
>
|
||||
<td className="px-4 py-3 text-sm text-text-2 font-mono">{analysis.acdntSn}</td>
|
||||
@ -188,6 +189,7 @@ export function AnalysisListTable({ onTabChange, onSelectAnalysis }: AnalysisLis
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-text-2 font-mono">{analysis.occurredAt ? new Date(analysis.occurredAt).toLocaleString('ko-KR', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '—'}</td>
|
||||
<td className="px-4 py-3 text-sm text-text-2 font-mono">{analysis.runDtm ? new Date(analysis.runDtm).toLocaleString('ko-KR', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '—'}</td>
|
||||
<td className="px-4 py-3 text-sm text-text-2 font-mono">{analysis.duration}</td>
|
||||
<td className="px-4 py-3 text-sm text-text-2">{analysis.oilType}</td>
|
||||
<td className="px-4 py-3 text-sm text-text-1 font-mono text-right font-semibold">
|
||||
|
||||
@ -519,7 +519,7 @@ export function OilSpillView() {
|
||||
analysis.opendriftStatus === 'completed' || analysis.poseidonStatus === 'completed';
|
||||
if (hasCompletedModel) {
|
||||
try {
|
||||
const { trajectory, summary, centerPoints: cp, windDataByModel: wdByModel, hydrDataByModel: hdByModel, summaryByModel: sbModel, stepSummariesByModel: stepSbModel } = await fetchAnalysisTrajectory(analysis.acdntSn)
|
||||
const { trajectory, summary, centerPoints: cp, windDataByModel: wdByModel, hydrDataByModel: hdByModel, summaryByModel: sbModel, stepSummariesByModel: stepSbModel } = await fetchAnalysisTrajectory(analysis.acdntSn, analysis.predRunSn ?? undefined)
|
||||
if (trajectory && trajectory.length > 0) {
|
||||
setOilTrajectory(trajectory)
|
||||
if (summary) setSimulationSummary(summary)
|
||||
@ -1264,7 +1264,13 @@ export function OilSpillView() {
|
||||
{activeSubTab === 'analysis' && (
|
||||
<RightPanel
|
||||
onOpenBacktrack={handleOpenBacktrack}
|
||||
onOpenRecalc={() => setRecalcModalOpen(true)}
|
||||
onOpenRecalc={() => {
|
||||
if (!selectedAnalysis) {
|
||||
alert('선택된 사고가 없습니다.\n분석 목록에서 사고를 선택해주세요.');
|
||||
return;
|
||||
}
|
||||
setRecalcModalOpen(true);
|
||||
}}
|
||||
onOpenReport={handleOpenReport}
|
||||
detail={analysisDetail}
|
||||
summary={stepSummariesByModel[windHydrModel]?.[currentStep] ?? summaryByModel[windHydrModel] ?? simulationSummary}
|
||||
@ -1312,6 +1318,7 @@ export function OilSpillView() {
|
||||
<RecalcModal
|
||||
isOpen={recalcModalOpen}
|
||||
onClose={() => setRecalcModalOpen(false)}
|
||||
incidentName={selectedAnalysis?.acdntNm || incidentName}
|
||||
oilType={oilType}
|
||||
spillAmount={spillAmount}
|
||||
spillType={spillType}
|
||||
|
||||
@ -4,6 +4,7 @@ import type { PredictionModel } from './OilSpillView'
|
||||
interface RecalcModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
incidentName: string
|
||||
oilType: string
|
||||
spillAmount: number
|
||||
spillType: string
|
||||
@ -24,11 +25,14 @@ type RecalcPhase = 'editing' | 'running' | 'done'
|
||||
|
||||
const OIL_TYPES = ['벙커C유', '원유(중질)', '원유(경질)', '디젤유(경유)', '휘발유', '등유', '윤활유', 'HFO 380', 'HFO 180']
|
||||
const SPILL_TYPES = ['연속', '순간', '점진적']
|
||||
const PREDICTION_TIMES = [12, 24, 48, 72, 96, 120]
|
||||
const PREDICTION_TIMES = [6, 12, 24, 48, 72, 96, 120]
|
||||
const snapToValidTime = (t: number): number =>
|
||||
PREDICTION_TIMES.includes(t) ? t : (PREDICTION_TIMES.find(h => h >= t) ?? PREDICTION_TIMES[0])
|
||||
|
||||
export function RecalcModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
incidentName,
|
||||
oilType: initOilType,
|
||||
spillAmount: initSpillAmount,
|
||||
spillType: initSpillType,
|
||||
@ -43,7 +47,7 @@ export function RecalcModal({
|
||||
const [spillAmount, setSpillAmount] = useState(initSpillAmount)
|
||||
const [spillUnit, setSpillUnit] = useState<'kl' | 'ton' | 'bbl'>('kl')
|
||||
const [spillType, setSpillType] = useState(initSpillType)
|
||||
const [predictionTime, setPredictionTime] = useState(initPredictionTime)
|
||||
const [predictionTime, setPredictionTime] = useState(() => snapToValidTime(initPredictionTime))
|
||||
const [lat, setLat] = useState(initCoord.lat)
|
||||
const [lon, setLon] = useState(initCoord.lon)
|
||||
const [models, setModels] = useState<Set<PredictionModel>>(new Set(initModels))
|
||||
@ -56,7 +60,7 @@ export function RecalcModal({
|
||||
setOilType(initOilType)
|
||||
setSpillAmount(initSpillAmount)
|
||||
setSpillType(initSpillType)
|
||||
setPredictionTime(initPredictionTime)
|
||||
setPredictionTime(snapToValidTime(initPredictionTime))
|
||||
setLat(initCoord.lat)
|
||||
setLon(initCoord.lon)
|
||||
setModels(new Set(initModels))
|
||||
@ -163,7 +167,7 @@ export function RecalcModal({
|
||||
현재 분석 정보
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }} className="text-[9px]">
|
||||
<InfoItem label="사고명" value="여수 앞바다 유류오염" />
|
||||
<InfoItem label="사고명" value={incidentName} />
|
||||
<InfoItem label="유종" value={initOilType} />
|
||||
<InfoItem label="유출량" value={`${initSpillAmount} kl`} />
|
||||
<InfoItem label="예측시간" value={`${initPredictionTime}시간`} />
|
||||
@ -265,30 +269,26 @@ export function RecalcModal({
|
||||
<FieldGroup label="예측 모델 선택">
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{([
|
||||
{ model: 'KOSPS' as PredictionModel, color: '#3b82f6' },
|
||||
{ model: 'POSEIDON' as PredictionModel, color: '#22c55e' },
|
||||
{ model: 'OpenDrift' as PredictionModel, color: '#f97316' },
|
||||
]).map(({ model, color }) => (
|
||||
{ model: 'KOSPS' as PredictionModel, color: 'var(--cyan)', ready: false },
|
||||
{ model: 'POSEIDON' as PredictionModel, color: 'var(--red)', ready: true },
|
||||
{ model: 'OpenDrift' as PredictionModel, color: 'var(--blue)', ready: true },
|
||||
]).map(({ model, color, ready }) => (
|
||||
<button
|
||||
key={model}
|
||||
className={`prd-mc ${models.has(model) ? 'on' : ''}`}
|
||||
onClick={() => toggleModel(model)}
|
||||
onClick={() => {
|
||||
if (!ready) {
|
||||
alert(`${model} 모델은 현재 준비중입니다.`)
|
||||
return
|
||||
}
|
||||
toggleModel(model)
|
||||
}}
|
||||
style={{ fontSize: '11px', padding: '5px 10px' }}
|
||||
>
|
||||
<span className="prd-md" style={{ background: color }} />
|
||||
{model}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
className={`prd-mc ${models.size === 3 ? 'on' : ''}`}
|
||||
onClick={() => {
|
||||
if (models.size === 3) setModels(new Set(['KOSPS']))
|
||||
else setModels(new Set(['KOSPS', 'POSEIDON', 'OpenDrift']))
|
||||
}}
|
||||
style={{ fontSize: '11px', padding: '5px 10px' }}
|
||||
>
|
||||
앙상블
|
||||
</button>
|
||||
</div>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
|
||||
@ -63,10 +63,11 @@ export function RightPanel({
|
||||
const [insuranceExpanded, setInsuranceExpanded] = useState(false)
|
||||
|
||||
const weatheringStatus = useMemo(() => {
|
||||
if (!summary) return null;
|
||||
const zero = { surface: 0, evaporation: 0, dispersion: 0, boom: 0, beached: 0 };
|
||||
if (!summary) return zero;
|
||||
const total = summary.remainingVolume + summary.evaporationVolume
|
||||
+ summary.dispersionVolume + summary.beachedVolume + boomBlockedVolume;
|
||||
if (total <= 0) return null;
|
||||
if (total <= 0) return zero;
|
||||
const pct = (v: number) => Math.round((v / total) * 100);
|
||||
return {
|
||||
surface: pct(summary.remainingVolume),
|
||||
@ -288,17 +289,13 @@ export function RightPanel({
|
||||
{/* 유출유 풍화 상태 */}
|
||||
<Section title="유출유 풍화 상태">
|
||||
<div className="flex flex-col gap-[3px] text-[8px]">
|
||||
{weatheringStatus ? (
|
||||
<>
|
||||
<ProgressBar label="수면잔류" value={weatheringStatus.surface} color="var(--blue)" />
|
||||
<ProgressBar label="증발" value={weatheringStatus.evaporation} color="var(--cyan)" />
|
||||
<ProgressBar label="분산" value={weatheringStatus.dispersion} color="var(--green)" />
|
||||
<ProgressBar label="펜스차단" value={weatheringStatus.boom} color="var(--boom)" />
|
||||
<ProgressBar label="해안도달" value={weatheringStatus.beached} color="var(--red)" />
|
||||
</>
|
||||
) : (
|
||||
<p className="text-[9px] text-text-3 font-korean text-center py-2">시뮬레이션 실행 후 표시됩니다</p>
|
||||
)}
|
||||
<>
|
||||
<ProgressBar label="수면잔류" value={weatheringStatus.surface} color="var(--blue)" />
|
||||
<ProgressBar label="증발" value={weatheringStatus.evaporation} color="var(--cyan)" />
|
||||
<ProgressBar label="분산" value={weatheringStatus.dispersion} color="var(--green)" />
|
||||
<ProgressBar label="펜스차단" value={weatheringStatus.boom} color="var(--boom)" />
|
||||
<ProgressBar label="해안도달" value={weatheringStatus.beached} color="var(--red)" />
|
||||
</>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
|
||||
@ -19,6 +19,8 @@ export interface PredictionAnalysis {
|
||||
analyst: string;
|
||||
officeName: string;
|
||||
acdntSttsCd: string;
|
||||
predRunSn: number | null;
|
||||
runDtm: string | null;
|
||||
}
|
||||
|
||||
export interface PredictionDetail {
|
||||
@ -216,8 +218,11 @@ export interface TrajectoryResponse {
|
||||
stepSummariesByModel?: Record<string, SimulationSummary[]>;
|
||||
}
|
||||
|
||||
export const fetchAnalysisTrajectory = async (acdntSn: number): Promise<TrajectoryResponse> => {
|
||||
const response = await api.get<TrajectoryResponse>(`/prediction/analyses/${acdntSn}/trajectory`);
|
||||
export const fetchAnalysisTrajectory = async (acdntSn: number, predRunSn?: number): Promise<TrajectoryResponse> => {
|
||||
const response = await api.get<TrajectoryResponse>(
|
||||
`/prediction/analyses/${acdntSn}/trajectory`,
|
||||
predRunSn != null ? { params: { predRunSn } } : undefined,
|
||||
);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
|
||||
@ -68,7 +68,7 @@ function ReportGenerator({ onSave }: ReportGeneratorProps) {
|
||||
|
||||
const handleSave = async () => {
|
||||
const report = createEmptyReport()
|
||||
report.reportType = activeCat === 0 ? '예측보고서' : activeCat === 1 ? '종합보고서' : '초기보고서'
|
||||
report.reportType = activeCat === 0 ? '유출유 보고' : activeCat === 1 ? '종합보고서' : '초기보고서'
|
||||
report.analysisCategory = activeCat === 0 ? '유출유 확산예측' : activeCat === 1 ? 'HNS 대기확산' : '긴급구난'
|
||||
report.title = cat.reportName
|
||||
report.status = '완료'
|
||||
|
||||
@ -21,6 +21,7 @@ import {
|
||||
import type { TemplateType } from './reportTypes';
|
||||
import TemplateFormEditor from './TemplateFormEditor'
|
||||
import ReportGenerator from './ReportGenerator'
|
||||
import TemplateEditPage from './TemplateEditPage'
|
||||
|
||||
// ─── Main ReportsView ────────────────────────────────────
|
||||
export function ReportsView() {
|
||||
@ -216,8 +217,19 @@ export function ReportsView() {
|
||||
|
||||
{/* ──── 수정 ──── */}
|
||||
{view.screen === 'edit' && (
|
||||
<div className="flex-1 overflow-auto px-4 py-4">
|
||||
<OilSpillReportTemplate mode="edit" initialData={view.data} onSave={handleSave} onBack={() => { setView({ screen: 'list' }); setActiveSubTab('report-list'); refreshList() }} />
|
||||
<div className="flex-1 overflow-hidden flex flex-col">
|
||||
{view.data.reportType === '유출유 보고' ? (
|
||||
<div className="flex-1 overflow-auto px-4 py-4">
|
||||
<OilSpillReportTemplate mode="edit" initialData={view.data} onSave={handleSave} onBack={() => { setView({ screen: 'list' }); setActiveSubTab('report-list'); refreshList() }} />
|
||||
</div>
|
||||
) : (
|
||||
<TemplateEditPage
|
||||
reportType={view.data.reportType}
|
||||
initialData={view.data}
|
||||
onSave={handleSave}
|
||||
onBack={() => { setView({ screen: 'list' }); setActiveSubTab('report-list'); refreshList() }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -283,7 +295,8 @@ export function ReportsView() {
|
||||
<div className="text-center font-korean mb-0.5 text-[9px] text-text-3">문서 저장</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
const tpl = templateTypes.find(t => t.id === previewReport.reportType)
|
||||
const lookupType = previewReport.reportType === '유출유 보고' ? '예측보고서' : previewReport.reportType
|
||||
const tpl = templateTypes.find(t => t.id === lookupType)
|
||||
if (tpl) {
|
||||
const getVal = buildReportGetVal(previewReport)
|
||||
const html = generateReportHTML(tpl.label, { writeTime: previewReport.incident.writeTime, author: previewReport.author, jurisdiction: previewReport.jurisdiction }, tpl.sections, getVal)
|
||||
@ -296,18 +309,24 @@ export function ReportsView() {
|
||||
<span>📄</span> PDF 저장
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
const tpl = templateTypes.find(t => t.id === previewReport.reportType) as TemplateType | undefined
|
||||
onClick={async () => {
|
||||
const lookupType = previewReport.reportType === '유출유 보고' ? '예측보고서' : previewReport.reportType
|
||||
const tpl = templateTypes.find(t => t.id === lookupType) as TemplateType | undefined
|
||||
if (tpl) {
|
||||
const getVal = buildReportGetVal(previewReport)
|
||||
const meta = { writeTime: previewReport.incident.writeTime, author: previewReport.author, jurisdiction: previewReport.jurisdiction }
|
||||
const filename = previewReport.title || tpl.label
|
||||
exportAsHWP(tpl.label, meta, tpl.sections, getVal, filename, {
|
||||
step3: previewReport.step3MapImage || undefined,
|
||||
step6: previewReport.step6MapImage || undefined,
|
||||
sensitiveMap: previewReport.sensitiveMapImage || undefined,
|
||||
sensitivityMap: previewReport.sensitivityMapImage || undefined,
|
||||
})
|
||||
try {
|
||||
const getVal = buildReportGetVal(previewReport)
|
||||
const meta = { writeTime: previewReport.incident.writeTime, author: previewReport.author, jurisdiction: previewReport.jurisdiction }
|
||||
const filename = previewReport.title || tpl.label
|
||||
await exportAsHWP(tpl.label, meta, tpl.sections, getVal, filename, {
|
||||
step3: previewReport.step3MapImage || undefined,
|
||||
step6: previewReport.step6MapImage || undefined,
|
||||
sensitiveMap: previewReport.sensitiveMapImage || undefined,
|
||||
sensitivityMap: previewReport.sensitivityMapImage || undefined,
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('[reports] HWPX 저장 오류:', err)
|
||||
alert('HWPX 저장 중 오류가 발생했습니다.')
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="w-full flex items-center justify-center gap-1.5 font-korean text-[12px] font-bold cursor-pointer rounded-md py-[11px]"
|
||||
|
||||
396
frontend/src/tabs/reports/components/TemplateEditPage.tsx
Normal file
396
frontend/src/tabs/reports/components/TemplateEditPage.tsx
Normal file
@ -0,0 +1,396 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { type OilSpillReportData, type ReportType } from './OilSpillReportTemplate';
|
||||
import { templateTypes, type TemplateType, ANALYSIS_SEP, ANALYSIS_FIELD_ORDER } from './reportTypes';
|
||||
import { saveReport } from '../services/reportsApi';
|
||||
|
||||
interface TemplateEditPageProps {
|
||||
reportType: ReportType;
|
||||
initialData: OilSpillReportData;
|
||||
onSave: () => void;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
// ── Textarea-type keys that map to analysis field ──────────
|
||||
const ANALYSIS_KEYS = new Set([
|
||||
'initialResponse', 'futurePlan',
|
||||
'responseStatus', 'suggestions',
|
||||
'spreadSummary', 'responseDetail', 'damageReport', 'futurePlanDetail',
|
||||
'spreadAnalysis', 'analysis',
|
||||
])
|
||||
|
||||
|
||||
function getInitialValue(key: string, data: OilSpillReportData, reportType: ReportType): string {
|
||||
if (key.startsWith('incident.')) {
|
||||
const field = key.slice('incident.'.length) as keyof OilSpillReportData['incident'];
|
||||
return (data.incident as Record<string, string>)[field] ?? '';
|
||||
}
|
||||
if (key === 'author') return data.author;
|
||||
if (ANALYSIS_KEYS.has(key)) {
|
||||
const fields = ANALYSIS_FIELD_ORDER[reportType];
|
||||
if (fields) {
|
||||
const idx = fields.indexOf(key);
|
||||
if (idx < 0) return '';
|
||||
const analysis = data.analysis || '';
|
||||
if (!analysis.includes(ANALYSIS_SEP)) {
|
||||
// 레거시 데이터: 첫 번째 필드에만 배분
|
||||
return idx === 0 ? analysis : '';
|
||||
}
|
||||
const parts = analysis.split(ANALYSIS_SEP);
|
||||
return parts[idx] || '';
|
||||
}
|
||||
return data.analysis || '';
|
||||
}
|
||||
if (key.startsWith('__')) return '';
|
||||
return '';
|
||||
}
|
||||
|
||||
function buildAnalysis(reportType: ReportType, formData: Record<string, string>): string {
|
||||
const fields = ANALYSIS_FIELD_ORDER[reportType];
|
||||
if (fields) {
|
||||
return fields.map(k => formData[k] || '').join(ANALYSIS_SEP);
|
||||
}
|
||||
switch (reportType) {
|
||||
case '예측보고서':
|
||||
return formData['analysis'] || '';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
// ── Section content renderer ────────────────────────────────
|
||||
interface SectionBlockProps {
|
||||
section: TemplateType['sections'][number];
|
||||
getVal: (key: string) => string;
|
||||
setVal: (key: string, val: string) => void;
|
||||
}
|
||||
|
||||
function SectionBlock({ section, getVal, setVal }: SectionBlockProps) {
|
||||
return (
|
||||
<div style={{
|
||||
position: 'relative',
|
||||
background: 'var(--bg1)',
|
||||
padding: '28px 36px',
|
||||
marginBottom: '16px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid var(--bd)',
|
||||
}}>
|
||||
<div style={{ position: 'absolute', top: 10, right: 16, fontSize: '9px', color: 'var(--t3)', fontWeight: 600 }}>
|
||||
해양오염방제지원시스템
|
||||
</div>
|
||||
|
||||
{/* Section header */}
|
||||
<div style={{
|
||||
background: 'rgba(6,182,212,0.12)', color: 'var(--cyan)', padding: '8px 16px',
|
||||
fontSize: '13px', fontWeight: 700, marginBottom: '16px', borderRadius: '4px',
|
||||
border: '1px solid rgba(6,182,212,0.2)',
|
||||
}}>
|
||||
{section.title}
|
||||
</div>
|
||||
|
||||
{/* Fields table */}
|
||||
<table style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontSize: '11px' }}>
|
||||
<colgroup>
|
||||
<col style={{ width: '160px' }} />
|
||||
<col />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
{section.fields.map((field, fIdx) => {
|
||||
// ── Read-only auto-calculated keys ──
|
||||
if (field.key.startsWith('__')) {
|
||||
return (
|
||||
<tr key={fIdx}>
|
||||
<td
|
||||
colSpan={2}
|
||||
style={{ border: '1px solid var(--bd)', padding: '12px 14px' }}
|
||||
>
|
||||
<span style={{ color: 'var(--t3)', fontStyle: 'italic', fontSize: '11px' }}>
|
||||
{section.title} — 자동 계산 데이터 (확인 전용)
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Textarea (no label = full-width, or labeled textarea) ──
|
||||
if (field.type === 'textarea' || !field.label) {
|
||||
return (
|
||||
<tr key={fIdx}>
|
||||
{field.label && (
|
||||
<td style={{
|
||||
background: 'var(--bg3)', border: '1px solid var(--bd)',
|
||||
padding: '8px 14px', fontWeight: 600, color: 'var(--t2)',
|
||||
verticalAlign: 'top', fontSize: '11px',
|
||||
}}>
|
||||
{field.label}
|
||||
</td>
|
||||
)}
|
||||
<td
|
||||
colSpan={field.label ? 1 : 2}
|
||||
style={{ border: '1px solid var(--bd)', padding: '6px' }}
|
||||
>
|
||||
<textarea
|
||||
value={getVal(field.key)}
|
||||
onChange={e => setVal(field.key, e.target.value)}
|
||||
placeholder="내용을 입력하세요..."
|
||||
style={{
|
||||
width: '100%', minHeight: '110px',
|
||||
background: 'var(--bg0)', border: '1px solid var(--bdL)',
|
||||
borderRadius: '3px', padding: '8px 12px',
|
||||
fontSize: '12px', outline: 'none', resize: 'vertical',
|
||||
color: 'var(--t1)', fontFamily: 'inherit',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Checkbox group ──
|
||||
if (field.type === 'checkbox-group' && field.options) {
|
||||
return (
|
||||
<tr key={fIdx}>
|
||||
<td style={{
|
||||
background: 'var(--bg3)', border: '1px solid var(--bd)',
|
||||
padding: '8px 14px', fontWeight: 600, color: 'var(--t2)',
|
||||
verticalAlign: 'middle', fontSize: '11px',
|
||||
}}>
|
||||
{field.label}
|
||||
</td>
|
||||
<td style={{ border: '1px solid var(--bd)', padding: '8px 14px' }}>
|
||||
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
|
||||
{field.options.map(opt => (
|
||||
<label key={opt} style={{
|
||||
display: 'flex', alignItems: 'center', gap: '6px',
|
||||
fontSize: '11px', color: 'var(--t2)', cursor: 'pointer',
|
||||
}}>
|
||||
<input type="checkbox" style={{ accentColor: '#06b6d4' }} />
|
||||
{opt}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Default: text input ──
|
||||
return (
|
||||
<tr key={fIdx}>
|
||||
<td style={{
|
||||
background: 'var(--bg3)', border: '1px solid var(--bd)',
|
||||
padding: '8px 14px', fontWeight: 600, color: 'var(--t2)',
|
||||
verticalAlign: 'middle', fontSize: '11px',
|
||||
}}>
|
||||
{field.label}
|
||||
</td>
|
||||
<td style={{ border: '1px solid var(--bd)', padding: '5px 10px' }}>
|
||||
<input
|
||||
value={getVal(field.key)}
|
||||
onChange={e => setVal(field.key, e.target.value)}
|
||||
placeholder={`${field.label} 입력`}
|
||||
style={{
|
||||
width: '100%', background: 'transparent', border: 'none',
|
||||
fontSize: '11px', outline: 'none', color: 'var(--t1)', padding: '2px 0',
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main Component ──────────────────────────────────────────
|
||||
export default function TemplateEditPage({ reportType, initialData, onSave, onBack }: TemplateEditPageProps) {
|
||||
const template = templateTypes.find(t => t.id === reportType)!;
|
||||
const sections = template.sections;
|
||||
|
||||
const buildInitialFormData = useCallback(() => {
|
||||
const init: Record<string, string> = {};
|
||||
sections.forEach(sec => {
|
||||
sec.fields.forEach(f => {
|
||||
init[f.key] = getInitialValue(f.key, initialData, reportType);
|
||||
});
|
||||
});
|
||||
return init;
|
||||
}, [sections, initialData, reportType]);
|
||||
|
||||
const [formData, setFormData] = useState<Record<string, string>>(buildInitialFormData);
|
||||
const [title, setTitle] = useState(initialData.title || '');
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [viewMode, setViewMode] = useState<'page' | 'all'>('page');
|
||||
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setFormData(buildInitialFormData());
|
||||
setTitle(initialData.title || '');
|
||||
setCurrentPage(0);
|
||||
}, [initialData, buildInitialFormData]);
|
||||
|
||||
const getVal = (key: string) => formData[key] ?? '';
|
||||
const setVal = (key: string, val: string) => setFormData(p => ({ ...p, [key]: val }));
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
const updated: OilSpillReportData = {
|
||||
...initialData,
|
||||
title: title || formData['incident.name'] || `${reportType} ${new Date().toLocaleDateString('ko-KR')}`,
|
||||
author: formData['author'] || initialData.author,
|
||||
analysis: buildAnalysis(reportType, formData),
|
||||
incident: {
|
||||
...initialData.incident,
|
||||
name: formData['incident.name'] ?? initialData.incident.name,
|
||||
writeTime: formData['incident.writeTime'] ?? initialData.incident.writeTime,
|
||||
shipName: formData['incident.shipName'] ?? initialData.incident.shipName,
|
||||
occurTime: formData['incident.occurTime'] ?? initialData.incident.occurTime,
|
||||
location: formData['incident.location'] ?? initialData.incident.location,
|
||||
lat: formData['incident.lat'] ?? initialData.incident.lat,
|
||||
lon: formData['incident.lon'] ?? initialData.incident.lon,
|
||||
accidentType: formData['incident.accidentType'] ?? initialData.incident.accidentType,
|
||||
pollutant: formData['incident.pollutant'] ?? initialData.incident.pollutant,
|
||||
spillAmount: formData['incident.spillAmount'] ?? initialData.incident.spillAmount,
|
||||
depth: formData['incident.depth'] ?? initialData.incident.depth,
|
||||
seabed: formData['incident.seabed'] ?? initialData.incident.seabed,
|
||||
agent: formData['agent'] ?? initialData.incident.agent,
|
||||
},
|
||||
};
|
||||
try {
|
||||
await saveReport(updated);
|
||||
onSave();
|
||||
} catch (err) {
|
||||
console.error('[reports] 저장 오류:', err);
|
||||
alert('보고서 저장 중 오류가 발생했습니다.');
|
||||
}
|
||||
}, [formData, title, initialData, reportType, onSave]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden bg-bg-0">
|
||||
|
||||
{/* ── Toolbar ── */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-border bg-bg-1 shrink-0 flex-wrap gap-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="text-[12px] font-semibold text-text-2 hover:text-text-1 transition-colors whitespace-nowrap"
|
||||
>
|
||||
← 돌아가기
|
||||
</button>
|
||||
<input
|
||||
value={title}
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
placeholder="보고서 제목 입력"
|
||||
className="text-[17px] font-bold bg-bg-0 border border-[var(--bdL)] rounded px-2.5 py-1 outline-none w-[380px] max-w-[480px]"
|
||||
/>
|
||||
<span
|
||||
className="px-2.5 py-[3px] text-[10px] font-semibold rounded border whitespace-nowrap"
|
||||
style={{ background: 'rgba(251,191,36,0.15)', color: '#f59e0b', borderColor: 'rgba(251,191,36,0.3)' }}
|
||||
>
|
||||
편집 중
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setViewMode('all')}
|
||||
className="px-3.5 py-1.5 text-[11px] font-semibold rounded cursor-pointer"
|
||||
style={{
|
||||
border: viewMode === 'all' ? '1px solid var(--cyan)' : '1px solid var(--bd)',
|
||||
background: viewMode === 'all' ? 'rgba(6,182,212,0.1)' : 'var(--bg2)',
|
||||
color: viewMode === 'all' ? 'var(--cyan)' : 'var(--t3)',
|
||||
}}
|
||||
>
|
||||
전체 보기
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('page')}
|
||||
className="px-3.5 py-1.5 text-[11px] font-semibold rounded cursor-pointer"
|
||||
style={{
|
||||
border: viewMode === 'page' ? '1px solid var(--cyan)' : '1px solid var(--bd)',
|
||||
background: viewMode === 'page' ? 'rgba(6,182,212,0.1)' : 'var(--bg2)',
|
||||
color: viewMode === 'page' ? 'var(--cyan)' : 'var(--t3)',
|
||||
}}
|
||||
>
|
||||
페이지별
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="px-4 py-1.5 text-[11px] font-bold rounded cursor-pointer border border-[#22c55e] bg-[rgba(34,197,94,0.15)] text-status-green"
|
||||
>
|
||||
저장
|
||||
</button>
|
||||
<button
|
||||
onClick={() => window.print()}
|
||||
className="px-3.5 py-1.5 text-[11px] font-semibold rounded cursor-pointer border border-[var(--red)] bg-[rgba(239,68,68,0.1)] text-status-red"
|
||||
>
|
||||
인쇄 / PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Section Tabs (page mode) ── */}
|
||||
{viewMode === 'page' && (
|
||||
<div className="flex gap-1 px-5 py-2 border-b border-border bg-bg-1 flex-wrap shrink-0">
|
||||
{sections.map((sec, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setCurrentPage(i)}
|
||||
className="px-3 py-1.5 text-[11px] font-semibold rounded cursor-pointer"
|
||||
style={{
|
||||
border: currentPage === i ? '1px solid var(--cyan)' : '1px solid var(--bd)',
|
||||
background: currentPage === i ? 'rgba(6,182,212,0.15)' : 'transparent',
|
||||
color: currentPage === i ? 'var(--cyan)' : 'var(--t3)',
|
||||
}}
|
||||
>
|
||||
{sec.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Content ── */}
|
||||
<div className="flex-1 overflow-auto px-5 py-5">
|
||||
<div id="report-print-area" className="w-full">
|
||||
{viewMode === 'all' ? (
|
||||
sections.map((sec, i) => (
|
||||
<SectionBlock key={i} section={sec} getVal={getVal} setVal={setVal} />
|
||||
))
|
||||
) : (
|
||||
<div>
|
||||
<SectionBlock section={sections[currentPage]} getVal={getVal} setVal={setVal} />
|
||||
|
||||
{/* ── Pagination ── */}
|
||||
<div className="flex justify-center items-center gap-3 mt-5">
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.max(0, p - 1))}
|
||||
disabled={currentPage === 0}
|
||||
className="px-5 py-2 text-[12px] font-semibold rounded border border-border bg-bg-2 cursor-pointer"
|
||||
style={{ color: currentPage === 0 ? 'var(--t3)' : 'var(--t1)', opacity: currentPage === 0 ? 0.4 : 1 }}
|
||||
>
|
||||
이전
|
||||
</button>
|
||||
<span className="px-4 py-2 text-[12px] text-text-2">
|
||||
{currentPage + 1} / {sections.length}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.min(sections.length - 1, p + 1))}
|
||||
disabled={currentPage === sections.length - 1}
|
||||
className="px-5 py-2 text-[12px] font-semibold rounded cursor-pointer"
|
||||
style={{
|
||||
border: '1px solid var(--cyan)',
|
||||
background: 'rgba(6,182,212,0.1)',
|
||||
color: currentPage === sections.length - 1 ? 'var(--t3)' : 'var(--cyan)',
|
||||
opacity: currentPage === sections.length - 1 ? 0.4 : 1,
|
||||
}}
|
||||
>
|
||||
다음
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -640,8 +640,11 @@ function buildHwpxFromHtmlTableElement(table: Element): string {
|
||||
* <table> → hp:tbl, <p> → buildPara, 복합 구조도 처리
|
||||
*/
|
||||
function htmlContentToHwpx(html: string): string {
|
||||
// <img> 태그 제거: HWPX 이미지는 buildPicParagraph로 별도 처리됨
|
||||
// DOMParser에 대용량 base64 data URL 전달 방지
|
||||
const cleanHtml = html.replace(/<img\b[^>]*>/gi, '');
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(`<div>${html}</div>`, 'text/html');
|
||||
const doc = parser.parseFromString(`<div>${cleanHtml}</div>`, 'text/html');
|
||||
const container = doc.body.firstElementChild;
|
||||
if (!container) return buildPara('-', 0);
|
||||
|
||||
@ -891,7 +894,7 @@ export async function exportAsHWPX(
|
||||
extraManifestItems += `<opf:item id="${fileId}" href="${filePath}" media-type="${mediaType}"/>`;
|
||||
// inMemory="NO": 데이터는 ZIP 내 파일로 저장, 요소 내용은 파일 경로
|
||||
binDataListXml +=
|
||||
`<hh:binData id="${binId}" isSameDocData="0" compress="YES" inMemory="NO" ` +
|
||||
`<hh:binData id="${binId}" isSameDocData="0" compress="NO" inMemory="NO" ` +
|
||||
`doNotCompressFile="0" blockDecompress="0" limitWidth="0" limitHeight="0">${filePath}</hh:binData>`;
|
||||
binCount++;
|
||||
};
|
||||
@ -918,15 +921,15 @@ export async function exportAsHWPX(
|
||||
processImage(images.sensitivityMap, 4, 'image4');
|
||||
}
|
||||
|
||||
// header.xml: binDataList를 hh:refList 내부에 삽입 (HWPML 스펙 준수)
|
||||
// header.xml: binDataList를 hh:refList 뒤에 삽입 (HWPML 스펙 준수)
|
||||
let headerXml = HEADER_XML;
|
||||
if (binCount > 0) {
|
||||
const binDataList =
|
||||
`<hh:binDataList itemCnt="${binCount}">` +
|
||||
binDataListXml +
|
||||
'</hh:binDataList>';
|
||||
// refList 닫힘 태그 직전에 삽입해야 함 (binDataList는 refList의 자식)
|
||||
headerXml = HEADER_XML.replace('</hh:refList>', binDataList + '</hh:refList>');
|
||||
// refList 닫힘 태그 직후에 삽입 (binDataList는 head의 직접 자식)
|
||||
headerXml = HEADER_XML.replace('</hh:refList>', '</hh:refList>' + binDataList);
|
||||
}
|
||||
|
||||
// Contents
|
||||
|
||||
@ -222,6 +222,15 @@ export const templateTypes: TemplateType[] = [
|
||||
},
|
||||
]
|
||||
|
||||
// ─── 분석 필드 구분자 (다중 필드 → analysis 단일 컬럼 저장) ──────────
|
||||
export const ANALYSIS_SEP = '\n\n<<<SEP>>>\n\n';
|
||||
|
||||
export const ANALYSIS_FIELD_ORDER: Partial<Record<ReportType, string[]>> = {
|
||||
'초기보고서': ['initialResponse', 'futurePlan'],
|
||||
'지휘부 보고': ['responseStatus', 'suggestions'],
|
||||
'종합보고서': ['spreadSummary', 'responseDetail', 'damageReport', 'futurePlanDetail'],
|
||||
};
|
||||
|
||||
// ─── Report Generator types & data ────────────────────────
|
||||
export interface ReportSection {
|
||||
id: string
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { sanitizeHtml } from '@common/utils/sanitize';
|
||||
import type { OilSpillReportData } from './OilSpillReportTemplate';
|
||||
import { ANALYSIS_SEP, ANALYSIS_FIELD_ORDER } from './reportTypes';
|
||||
|
||||
// ─── Report Export Helpers ──────────────────────────────
|
||||
export function generateReportHTML(
|
||||
@ -229,6 +230,18 @@ export function buildReportGetVal(report: OilSpillReportData) {
|
||||
if (key === '__vessels') return formatVesselsTable(report.vessels)
|
||||
if (key === '__recovery') return formatRecoveryTable(report.recovery)
|
||||
if (key === '__result') return formatResultTable(report.result)
|
||||
// 분석 필드 키 처리 (ANALYSIS_FIELD_ORDER에 정의된 키들 → report.analysis에서 split)
|
||||
for (const fields of Object.values(ANALYSIS_FIELD_ORDER)) {
|
||||
if (fields && fields.includes(key)) {
|
||||
const idx = fields.indexOf(key);
|
||||
const analysis = report.analysis || '';
|
||||
if (!analysis.includes(ANALYSIS_SEP)) {
|
||||
return idx === 0 ? analysis : '';
|
||||
}
|
||||
const parts = analysis.split(ANALYSIS_SEP);
|
||||
return parts[idx] || '';
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return (report as any)[key] || ''
|
||||
}
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user