CtrlK
BlogDocsLog inGet started
Tessl Logo

pcb-web/pcb-dashboard-pages

PCB 대시보드 페이지 목록 및 기능 분석 문서. 각 페이지의 URL, 접근 권한, 렌더링 방식, 핵심 기능을 정리한 레퍼런스.

Quality

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

The risk profile of this skill

Overview
Eval results
Files

PCB 대시보드 페이지 목록 및 기능 분석

접근 권한 구분

구분설명
공개로그인 없이 접근 가능
일반 사용자로그인 필요 (operator 역할)
관리자admin 역할 전용
공용일반 사용자 + 관리자 모두 접근

세션 관리: 로그인 후 SESSION_DURATION_MS = 5분 타이머 시작. 만료 1분 전 경고 모달(SessionGuard) 표시 → "연장" 클릭 시 refreshSessionAction()으로 Supabase 세션 갱신 + localStorage 타이머 리셋. 미연장 시 자동 로그아웃.


공개 페이지

/login — 로그인

  • 파일: app/login/page.tsxcomponents/login/LoginForm.tsx
  • 세부 동작
    1. 이메일/비밀번호 입력 → loginAction(email, password) (Server Action)
    2. LoginRepository.login() → Supabase signInWithPassword()
    3. 성공 시: setSessionDeadline() localStorage 저장, toggleUserStore에 role/userId 저장, role에 따라 /dashboard 또는 /admin/dashboard로 이동
    4. 실패 시: 에러 메시지 인라인 표시 + sonner toast

/link — PCB 시뮬레이션 연동

  • 파일: app/link/page.tsxcomponents/link-component/LinkPageContent.tsx

  • 권한: 공개

  • 섹션별 세부 동작

    2D 히트맵 (Heatmap2DSection)

    • 10×10 격자 각 셀에 도금 두께/전류밀도 값을 색상으로 매핑 (heatMapColor 유틸)
    • 기본값: createDefault10x10ThicknessValues() 생성
    • COMSOL 결과 수신 후: simulationResponse.currentDensityGrid로 교체

    COMSOL 외부 시뮬레이션 (ExternalSimSection + useExternalSim)

    1. 파라미터 입력(platingTime, currentDensity) → POST /api/external-sim → Zod 검증 → Job 생성(jobId 반환, 202)
    2. 백그라운드에서 simulationService.run(jobId): SIM_TRACK=apiExternalApiAdapter, 기본은 ExternalWebAdapter(Playwright로 COMSOL 웹 자동화)
    3. 클라이언트가 2초 간격으로 GET /api/external-sim/[jobId]/status 폴링
    4. completedGET /api/external-sim/[jobId]/result → 히트맵 업데이트
    5. 동시 실행 한도(MAX_CONCURRENT_JOBS, 기본 2) 초과 시 429
    6. 상태 머신: idle → submitting → polling → done | error

    3D 워피지 뷰 (ThreeDLink)

    • 워피지 타입: smile / frown / twist / custom
    • custom이 아니면 createWarpageShapeValues2D(type)으로 2D 값 생성, custom이면 COMSOL 결과 사용
    • 물성 파라미터(외부 온도, 라미네이션 온도/압력, CTE, 베이킹 온도) 직접 입력 가능

    변형 프로파일 차트 (DeformationProfileChart)

    • X축 단면 / Y축 단면 2개 꺾은선 그래프

일반 사용자 페이지

/ — 루트

  • app/page.tsxredirect('/dashboard') 즉시 리다이렉트

/dashboard — 사용자 대시보드

  • 파일: app/dashboard/page.tsxcomponents/dashboard/
  • 렌더링: 서버 컴포넌트
  • SSR 단계: getLatestPositionMonitor() + alarmPositionMonitor() 병렬 실행 → sidepc_position_monitor 조회
  • 카드별 동작
    카드데이터 소스표시 내용
    PlatingStatusCardSSRA/B라인 투입 헹거 수 (count_line_a, count_line_b)
    SectionStatusCardCSR (마운트 후 병렬 fetch)5개 구간 토글 상태
    HangerStatusCardSSR헹거 위치 현황
    NotificationsCardSSR최신 알람 목록
  • SectionStatusCard: 마운트 시 5개 클라이언트 액션 병렬 호출 → PretreatHangersRepositorysidepc_pretreat_hangers. 토글 상태는 로컬 state만 (DB 반영 없음)

/debriefing — 디브리핑 (일반 사용자)

  • 파일: app/debriefing/page.tsxcomponents/defriefing/
  • 검색 흐름
    1. 마운트 시 getSettingLotOptions()sidepc_setting_lot distinct unit + recipe_id 목록
    2. 호기 선택 → 레시피 필터링 → 레시피 선택 → getSettingLotIdsByRecipeId() → lot_id 목록
    3. LOT 1/2 선택 후 검색: getDebriefingLots() + getDebriefingChartData() + getDebriefingUnloadHist() 병렬 조회
  • 페이지네이션: total1 + total2 합산 기준, rows1 소진 후 rows2로 연속 (서버에서 range 계산)
  • 그래프: 전압/전류/처리시간/온도 지표 선택, ssr: false dynamic import, lot1=파란색·lot2=빨간색

/debriefing-error — 디브리핑 오류

  • 파일: app/debriefing-error/page.tsx
  • getDebriefingErrorByDateRange(startDate, endDate, recipeId?)UnloadHistRepository.getByDateRange() → 오류 상태 행 표시

/recipe-setting — 레시피 현황

  • 파일: app/recipe-setting/page.tsx
  • 권한: 공용
  • 동작
    1. getSettingLotOptions() → 호기/레시피 드롭다운 로드
    2. 레시피 선택 → getSettingLotWithRecipe(recipeId): SettingLotRepository + SettingRecipeRepository 병렬 조회 (sidepc_setting_lot.recipe_idsidepc_setting_recipe.RecipeID 조인)
    3. RecipeInfoCard: 기판 크기(H×W), 기판 면적(전/후), 수량(제품/전단미/후단미/합계/제외)
    4. RecipeDashboard: 정류기 1~10번의 전류밀도(den)/효율(asp)/전류(cur) × 전면/후면 값 테이블

/notifications — 알림

  • 파일: app/notifications/page.tsx
  • 마운트 시 getAlarmTablesForNotifications() (service role — RLS 우회)
  • 3개 테이블 병렬 조회 (각 최대 1000건, event_time 내림차순): loader_alarm, main_alarm, unloader_alarm
  • 읽음/안읽음 상태는 클라이언트 state로만 관리

3D 모니터링 페이지 (공용)

app/(3d)/layout.tsxFactorySimV2 Canvas가 고정 마운트. 페이지 전환 시 Canvas 재생성 없이 useCanvasStore 뷰 모드(mainView / detailView)만 교체.

/monitoring — 공장 3D 모니터링

  • 파일: app/(3d)/monitoring/page.tsxcomponents/3d-engine/FactorySimV2.tsx
  • 마운트 시 switchToMainView() → 전체 공장 라인 렌더링
  • Zone별 장비(Traverser/Slider/Lifter/Pusher 등) FSM 상태 시각화
  • 행거 실시간 위치: sys.signals 이벤트로 좌표 업데이트
  • 장비 클릭 시 /detail/[nodeId]로 라우팅

/detail/[nodeId] — 노드 상세

  • 파일: app/(3d)/detail/[nodeId]/page.tsx
  • use(params)로 nodeId 추출 → nameMapper(nodeId)로 표시명 변환 (정규식 처리)
  • 마운트 시 switchToDetailView(nodeId) → 해당 노드로 카메라 포커스
  • NodeDetailHeader + NodeDetailTable: 노드 이름 및 실시간 데이터 테이블

관리자 전용 페이지

/admin/dashboard — 관리자 대시보드 (로그인 후 기본 진입점)

  • 파일: app/admin/dashboard/page.tsx
  • 렌더링: 서버 컴포넌트
  • SSR: getNotices()AdminDashboardService.getNotices() → 공지사항 조회
  • 카드: SubstrateOutputCard / ProductionChart(dynamic) / OperationTimeChart(dynamic) / NoticeTable + NoticeModal(detail·edit 뷰)

/admin/lot-search — LOT 검색 (공용 — 일반 사용자도 접근 가능)

  • 파일: app/admin/lot-search/page.tsx
  • 자동완성: searchLotIds(keyword)sidepc_setting_lot 부분 일치 검색 → 중복 제거
  • 검색: getLotsByLotId(lotId) → 전체 매칭 LOT DataTable
  • 엑셀 다운로드: 조회 데이터 → XLSX 변환
  • 엑셀 업로드: CSV/XLSX 파싱 → 컬럼 매핑 → sidepc_setting_lot insert

/admin/lot-compare-search — LOT 비교 검색

  • 파일: app/admin/lot-compare-search/page.tsx
  • URL ?lotId= 쿼리 파라미터로 초기 LOT ID 주입 (useSearchParams)
  • 좌측 테이블(LeftTableData): 레시피 기준 — 레시피 ID / 제품·전단미·후단미·합계 수량
  • 우측 테이블(RightTableData): 실적 기준 — 투입·재외·배출·합계
  • 공통 TablePagination, 각 테이블 독립 엑셀 다운로드

/admin/debriefing — 관리자 디브리핑

  • 파일: app/admin/debriefing/page.tsxcomponents/admin-debrefing/
  • Header 필터: 기간 프리셋(1시간/1일/1주/1개월/3개월/6개월) + 직접 날짜 입력, 호기·레시피·LOT ID 1/2
  • Contents: DebriefingSearchParams 기반 언로드 이력 조회 및 테이블 표시, 인쇄 지원

/admin/hardware-status — 데이터레이크 연결

  • 파일: app/admin/hardware-status/page.tsx
  • 렌더링: force-dynamic SSR
  • SSR: getSystemStatus()(os 모듈) + getDatalakeSelectorValue()(파일시스템) 병렬 실행
  • 클라이언트 5초 폴링: GET /api/system → CPU/메모리 갱신
  • 카드: SystemInfoCard(OS/호스트명/코어/아키텍처) / CpuCard / MemoryCard / UptimeCard / DatalakeConnectionCard / ServiceStatusCard(Node-RED, COMSOL 등 서비스 상태 배지)

/admin/server-status — 서버 상태

  • 파일: app/admin/server-status/page.tsx
  • CPU·메모리·응답시간 실시간 Recharts LineChart / AreaChart
  • ReferenceLine으로 경고(70%)/위험(90%) 임계치 표시
  • Badge로 현재 상태(정상·경고·위험) 표시, 로딩 시 Skeleton

/admin/table-manager — 데이터 관리

  • 파일: app/admin/table-manager/page.tsxcomponents/data-manage/
  • 섹션: 디브리핑(dbrf 포함) / 전체(dbrf 제외) 분리 표시
  • 카드별 동작:
    카드동작
    FullBackupCard전체 테이블 → CSV → ZIP 다운로드
    BackupDownloadCard개별 테이블 CSV 다운로드
    ZipUploadCardZIP 업로드 → ZipPreviewModal 미리보기 → DB 복원
    CsvUploadCardCSV 업로드 → 컬럼 매핑 → DB insert
    DeleteOldDataCard기준 날짜 이전 데이터 삭제
  • API: POST /api/table-manager

/admin/system-controll — 시스템 제어

  • 파일: app/admin/system-controll/page.tsx
  • 개발 중 (빈 페이지)

에러 / 특수 라우트

URL파일설명
/* (404)app/not-found.tsx존재하지 않는 경로 처리
/* (500)app/error.tsx런타임 에러 바운더리
Workspace
pcb-web
Visibility
Public
Created
Last updated
Publish Source
CLI
Badge
pcb-web/pcb-dashboard-pages badge