assets/const.less의 토큰과 실제 관리 화면에서 반복되는
컴포넌트를 한곳에서 확인합니다. 새 화면은 가장 가까운 기존 역할을
먼저 재사용하고, 공통 기준이 바뀌면 실제 코드와 이 문서를 함께
갱신합니다.
코발트는 주 행동과 현재 선택에 사용하고, 상태 색상은 성공·진행·오류의 의미가 있는 경우에만 사용합니다.
주 행동, 활성 상태와 핵심 강조에 사용하는 코발트 계열입니다.
#0E6DCC 주 행동과 활성 상태#0A57B2 진한 브랜드 텍스트#0A57B2 주 행동 hover#084A9B 주 행동 active#E8F4FF 선택과 정보 배경#F2FAFF 넓은 강조 배경정보 위계와 화면의 바탕을 만드는 중립 색상입니다.
#191F28 제목과 핵심 정보#4E5968 본문과 설명#8B95A1 비핵심 보조 정보#FFFFFF 기본 표면#F9FAFB 페이지 배경#F2F4F6 보조 표면#F6F7F8 조회 전용 필드#E5E8EB 기본 구분선#D1D6DB 강한 구분선결과와 주의 상태를 같은 의미로 반복하기 위한 색상입니다.
#0D9B4E 완료와 정상#E5F5ED 성공 배경#F76707 주의와 진행#FFF0E5 경고 배경#E8344E 오류와 위험 행동#FFF0F0 오류 배경#0A57B2 정보 텍스트#E8F4FF 정보 배경단일 색보다 배경·텍스트·테두리의 조합을 재사용해 화면마다 다른 톤이 생기지 않도록 합니다.
브랜드 코발트 위에는 고대비 흰색 텍스트를 사용합니다.
@primary-color + @background-primary옅은 코발트 면과 진한 코발트 텍스트로 안내를 구분합니다.
@info-bg + @info-color위험 행동에는 영향과 복구 가능 여부를 함께 설명합니다.
@error-bg + @error-color간격, 모서리, 그림자와 컨트롤 크기는 제한된 단계 안에서 선택합니다. 한 화면만을 위한 숫자를 추가하기 전에 같은 역할의 토큰을 확인합니다.
4px에서 48px까지의 공통 간격 단계
@spacing-xs@spacing-sm@spacing-md@spacing-lg@spacing-xl@spacing-2xl@spacing-3xl@spacing-4xl@spacing-5xl@spacing-6xl배지, 컨트롤과 컨테이너의 모서리 단계
@radius-xs@radius-sm@radius-md@radius-lg@radius-xl@radius-2xl@radius-round기본은 테두리로 나누고 실제 층이 필요할 때만 사용
@shadow-xs@shadow-sm@shadow-md@shadow-lg입력, 버튼과 카드의 기준 크기
@input-height@btn-height-sm@btn-height-md@btn-height-lg@card-padding@card-border-radius폼부터 넓은 업무 목록까지 사용하는 최대 너비
@container-sm@container-md@container-lg@container-xl상태 변화가 인식될 만큼만 짧게 사용하는 전환
@transition-fast@transition-base@transition-slowPretendard를 기본으로 사용합니다. 제목은 결론을 먼저 보여주고, 업무 데이터는 14px 이상과 충분한 행간으로 빠르게 읽히게 구성합니다.
Font family
Pretendard
"Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif
@management-font-display 32px / 700 / 1.2직무발명 절차를 한 흐름으로 관리합니다
@management-font-page-title 28px / 700 / 1.3발명 신고 관리
@management-font-title 24px / 700 / 1.4심의 및 권리 결정
@management-font-body 16px / 400 / 1.6발명 신고부터 심의, 보상과 증빙 기록까지 이어서 확인합니다.
@management-font-label 14px / 600 / 1.5평가 완료 · 2026.08.21 · 500,000원
@management-font-caption 12px / 600 / 1.4마지막 업데이트 10:24
현재 저장소의 공통 컴포넌트와 책임 범위입니다. 같은 업무 패턴이 여러 화면에서 반복될 때 아래 컴포넌트를 우선 사용합니다.
| Component | Responsibility | Use | Source |
|---|---|---|---|
ManagementPageLayout | 관리 화면의 제목, 설명과 본문 너비를 구성 | 관리자·기업 공통 페이지 셸 | components/ManagementPageLayout.vue |
ClientPageHeader | 페이지 제목과 상단 행동 영역을 구성 | 기업 사용자 화면 헤더 | components/ClientPageHeader.vue |
ManagementDataTable | 데스크톱 표, 모바일 목록과 빈 상태를 통합 | 업무 목록과 검색 결과 | components/ManagementDataTable.vue |
ManagementTablePagination | 페이지 범위와 행 수 선택을 제공 | 페이지 단위 목록 이동 | components/ManagementTablePagination.vue |
ManagementStatusChip | 도메인 상태를 공통 tone과 문구로 변환 | 목록·상세의 상태 표시 | components/ManagementStatusChip.vue |
ManagementSummaryCards | 핵심 집계값의 일관된 위계를 제공 | 대시보드와 목록 요약 | components/ManagementSummaryCards.vue |
ManagementLoadError | 불러오기 실패와 재시도 행동을 안내 | 비동기 조회 실패 상태 | components/ManagementLoadError.vue |
AppModal | 확인·입력·위험 작업 모달 구조를 통합 | 중단이 필요한 확인 흐름 | components/AppModal.vue |
AuthEmailPassword | 로그인, 가입과 계정 복구 폼을 제공 | 이메일·비밀번호 인증 | components/AuthEmailPassword.vue |
InventionSignatureInput | 마우스와 터치 서명 입력을 처리 | 동의·확인 서명 | components/InventionSignatureInput.vue |
InventionAmountInput | 금액 입력과 천 단위 표시를 통합 | 보상금과 비용 입력 | components/invention/AmountInput.vue |
InventionStatusChip | 발명 데이터에서 진행 상태와 상세를 계산 | 발명 신고·출원 상태 | components/invention/StatusChip.vue |
실제 프로젝트 클래스와 공통 컴포넌트를 사용한 예시입니다. hover, disabled, loading과 같은 상태는 별도 스타일이 아니라 같은 컴포넌트의 상태로 관리합니다.
.management-btn, v-btnv-text-field, v-select, v-textareaManagementStatusChip, v-alertManagementSummaryCards, ManagementDataTableAppModal목록과 비동기 화면은 정상 결과만 만들지 않습니다. 빈 화면은 다음 행동을, 로딩은 기다리는 대상을, 오류는 문제와 복구 행동을 알려야 합니다.
.management-empty-state새 신고서를 작성하면 진행 상태를 이곳에서 확인할 수 있습니다.
v-skeleton-loaderManagementLoadError네트워크 상태를 확인한 후 다시 시도해주세요.