컴포넌트 가이드

컬러

POE primitive token

--color-poe-*

poe-blue-800 #083891

poe-blue-600 #2145ca

poe-blue-500 #345cf2

poe-blue-300 #cadeff

poe-blue-200 #dbe6fe

poe-blue-100 #eaf2ff

poe-blue-point #21d3ed

poe-gray-950 #10172a

poe-gray-900 #252732

poe-gray-800 #3b3e4f

poe-gray-700 #50556c

poe-gray-600 #666c8a

poe-gray-500 #8187a2

poe-gray-400 #9ea3b7

poe-gray-300 #bdc0ce

poe-gray-200 #d9dbe3

poe-gray-100 #f1f2f7

poe-gray-050 #f6f8fb

poe-gray-000 #ffffff

poe-red-050 #fcf0ee

poe-red-100 #ffcec5

poe-red-500 #f3333c

poe-green-050 #e3fae7

poe-green-100 #b8f0c2

poe-green-500 #018833

poe-orange-010 #fffdf8

poe-orange-050 #fbf5de

poe-orange-100 #ffdb8d

poe-orange-500 #e17100

poe-purple-050 #efeafd

poe-purple-100 #d6c8ff

poe-purple-500 #7f51e6

Semantic token

color-primary-100 poe-blue-100 · brand soft

color-primary-200 poe-blue-200 · brand soft hover

color-primary-300 poe-blue-300 · brand soft active

color-primary-400 blue-400 · shared brand scale

color-primary-500 poe-blue-500 · brand accent

color-primary-600 poe-blue-600 · brand strong

color-primary-700 blue-700 · shared brand scale

color-primary-800 poe-blue-800 · brand dark

color-primary-900 blue-900 · shared brand scale

color-primary-point poe-blue-point · brand point

text-color-strong poe-gray-950

text-color-base poe-gray-800

text-color-muted poe-gray-700

text-color-subtle poe-gray-500

text-color-disabled poe-gray-400

text-color-accent primary-500

text-color-danger poe-red-500

line-color poe-gray-200

surface-color poe-gray-000

surface-color-muted poe-gray-050

surface-color-sunken poe-gray-100

타이포그래피

Font family

--font-family (Pretendard) 서울시 공직자 윤리업무 시스템

--title-font-family (Elice DigitalBaeum) 서울시 공직자 윤리업무 시스템

제목

.title-wrap / .section-title / .content-title / .required-guide

섹션 제목

콘텐츠 제목

필수 입력

본문

.description / .description-muted / .required / .list-dot / .list-hyphen / .list-reference

선택한 기간에 발송된 알림 조회

보조 설명을 본문에 가깝게 두어야 할 때 글자색만 한 단계 진하게 사용.

필수 항목 표시 필수 입력

자동 선정: 4급 이상 공무원 전체 (시스템 자동 분류)
특정 부서 지정: 5~7급 대상 특정 부서 지정

자동 선정: 4급 이상 공무원 전체 (시스템 자동 분류)
특정 부서 지정: 5~7급 대상 특정 부서 지정

자동 선정: 4급 이상 공무원 전체 (시스템 자동 분류)
특정 부서 지정: 5~7급 대상 특정 부서 지정

텍스트 컬러

텍스트 컬러 유틸리티 - 예시, class, 색상 토큰
예시	class	색상 토큰
강한 텍스트	`.text-color-strong`	`--text-color-strong` (--color-gray-950)
기본 텍스트	`.text-color-base`	`--text-color-base` (--color-gray-800)
보조 텍스트	`.text-color-muted`	`--text-color-muted` (--color-gray-700)
옅은 텍스트	`.text-color-subtle`	`--text-color-subtle` (--color-gray-500)
비활성 텍스트	`.text-color-disabled`	`--text-color-disabled` (--color-gray-400)
강조 텍스트	`.text-color-accent`	`--text-color-accent` (--color-primary-500)
위험 텍스트	`.text-color-danger`	`--text-color-danger` (--color-poe-red-500)

아이콘

아이콘 목록

.icon-*

icon-login

icon-logout

icon-bin

icon-hamburger

icon-close

icon-close-menu

icon-mail

icon-excel

icon-paper

icon-register

icon-user-register

icon-calendar

icon-bad-word

icon-list

icon-frequency

icon-plus

icon-minus

icon-menu

icon-info

icon-arrow

icon-arrow-double

icon-search

icon-ellipsis

icon-employment-upload-remove

icon-employment-reupload

icon-employment-judge-arbitrary

icon-employment-judge-review

icon-employment-judge-normal

크기

.icon / .icon-sm / .icon-md / .icon-lg

기본 · 20px

.icon-sm · 14px

.icon-md · 20px

.icon-lg · 44px

방향

.icon-arrow-* / .icon-arrow-double-*

버튼

기본 버튼

.btn / .btn-primary / .btn-secondary / .btn-tertiary

행동 우선순위 구분에 사용하는 기본 단위.

.btn: 모든 버튼에 필수, 단독 사용 가능
.btn-primary: 화면·모달의 대표 행동
.btn-secondary: 함께 사용하는 대안 행동
.btn-tertiary: 보조 행동
disabled: 행동·색상과 관계없이 동일한 모습 사용

버튼 크기

.btn-lg / .btn-sm

프리셋 버튼

.btn-cancel / .btn-delete

반복되는 행동 조합을 단일 preset class로 제공.

.btn-cancel: 취소 행동 전용 preset
.btn-delete: 삭제 행동 전용 danger preset
색상 class: preset과 함께 사용하지 않음

버튼 예시

.btn + 행동 → 색 → 형태 · 크기

기본 버튼에 색상·크기·형태를 더해 만드는 조합.

행동 의미가 분명한 경우: semantic 이름 사용
의미 없이 색상만 필요한 경우: palette 이름 사용
같은 행의 semantic·palette 이름: 동일한 색상 사용

색을 더한 버튼 조합 - 의미 이름, 팔레트 이름, 기본, 보조
의미 이름	팔레트 이름	기본	보조
`.btn-color-accent`	`.btn-color-blue`
`.btn-color-neutral`	`.btn-color-gray`
`.btn-color-success`	`.btn-color-green`
`.btn-color-warning`	`.btn-color-orange`
`.btn-color-danger`	`.btn-color-red`

알약형 버튼

.btn.btn-pill + .btn-pill-dark / .btn-pill-accent / .btn-pill-muted + .btn-sm / .btn-xsm

기본 크기: 크기 modifier 없이 md 사용
너비: md·sm·xsm 모두 콘텐츠 너비 사용
Dark 아이콘 전용 .btn-sm: 정사각형 사용
Mobile 크기: md 40px, sm 30px, xsm 유지
고정 크기 버튼: 전용 preset 사용
Semantic preset과 같은 색상: .btn-primary·.btn-tertiary 사용

알약형 버튼 색상별 크기
색상	기본 md (h48)	.btn-sm (h40)	.btn-xsm (h30)
dark
accent
muted
neutral (tertiary)
primary

등록 버튼

.btn.btn-pill.btn-pill-accent.btn-register + .btn-sm

최상위 메뉴 등록: 48px 전용 preset 사용
하위 메뉴 등록: .btn-sm을 더한 40px 전용 preset 사용
PC·Mobile: 동일한 버튼 크기와 15px 글자 사용

최상위 메뉴 등록 하위 메뉴 등록

액션 버튼

.btn-action.btn-action-*

사용 위치: 테이블 셀·페이지 하단·패널 목록
아이콘 전용: .btn-icon-only과 aria-label 함께 사용

액션 버튼 종류
class	예시
`.btn-action-approve`
`.btn-action-enable`
`.btn-action-reject`
`.btn-action`
`.btn-action-delete`
`.btn-action-delete.btn-icon-only`
아이콘 없음

정사각 아이콘 버튼

.btn-square

높이: 폼 컨트롤과 동일
사용 위치: 반복 행의 추가·삭제

버튼 그룹

.btn-group / .start / .center / .end / .btn-group-info

버튼만 나열: 가운데 배치
위치 구분: .start·.center·.end 사용
좁은 화면: 위치별 한 줄 배치
테이블 셀: 가로 배치 유지
페이지 하단: .page-actions 함께 사용

태그 · 상태

상태 텍스트

.status-text.status-*

승인 반려 승인대기 진행중 해당 없음

폼

기본 입력 구조와 대표 상태 확인. 입력 유형과 상태 예시: 입력 서식 샘플 참고.

기본 필드

.field / .form-label / .form-group / .form-message-group

필수 입력, 보조 버튼과 검증 결과를 함께 제공하는 기본 필드 사용.

이메일

사용 가능한 이메일

폼 메시지 상태

.form-message-group / .form-message.is-success / .is-error / .is-info / .is-warning

성공·오류·정보·주의 상태별 색상과 아이콘 구분 사용.

사용 가능한 이메일

사용 불가능한 이메일

업무용 이메일 주소 사용

이메일 주소 재확인 필요

대표 입력 서식

.textfield / .select / .form-minmax

글자 수 표시

maxlength / data-text-counter / data-text-counter-target

최대 입력 글자 수 지정과 현재·최대 글자 수 표시 연결.

내용 /

체크박스 · 라디오

.check-group / .check-label / .check

선택 미선택 비활성

사용 미사용

검색

.search-form / .search-fields / .search-actions

목록 상단 기본 검색 예시. 메뉴별 항목 조합과 모달 검색 예시: 검색 영역 샘플 참고.

테이블

기본 목록 테이블 예시. 열 너비·긴 텍스트·데이터 없음 상태 예시: 테이블 샘플 참고.

테이블 인포

.table-info / .start / .end / .total / .per-page

목록 상단의 전체 건수, 출력 수와 작업 버튼 배치.

총 2524건

출력수

목록 테이블

.table-wrap / .table / .cell-num / .cell-title / .cell-wrap / .align-start

목록 테이블 기본 예시
No.	아이디	소속부서	상태	관리
1	honghoho90	청렴담당관 청렴윤리팀 장문 소속부서명 말줄임 예시	승인대기
2	sarangdungy	감사담당관 조사팀	승인

페이지네이션

기본

.pagination / .pagination-link / .btn-first / .btn-prev / .btn-next / .btn-last / .pagination-ellipsis

상태

이동 가능: a.pagination-link 사용
이동 불가: span.pagination-link[aria-disabled="true"] 사용
현재 페이지: aria-current="page" 사용
Mobile: 처음·마지막 이동 항목 숨김

박스

.box / .box-muted / .box-outline / .box-form / .box-section / .divider / .box-divider

등록·수정 등 입력 중심 화면의 바깥 영역: .box.box-form 사용
입력 구조와 상태 예시: 입력 서식 샘플 참고

기본 박스

Muted 박스

Outline 박스

인포 박스

.info-box / .info-box-accent

자동 선정: 4급 이상 공무원 전체
특정 부서 지정: 5~7급 대상 특정 부서 지정

부서 내 일부 인원만 대상: '구성원 일부' 선택

강조가 필요한 안내 문구

탭

기본 탭

.tablist / .tab

사용 범위: 현재 문서 안의 콘텐츠 전환
항목이 많은 경우: 가로 스크롤 사용

탭 1 콘텐츠

탭 2 콘텐츠

탭 3 콘텐츠

동적 콘텐츠 연동

feui:tabchanged / FEUI.tabs.update(selector)

탭 변경 확인: feui:tabchanged 이벤트의 선택 탭과 패널 사용
패널 콘텐츠 교체 후 연결 갱신: FEUI.tabs.update('#tablistId') 실행
다른 페이지로 이동: 탭 대신 링크와 aria-current="page" 사용

모달

열기 · 닫기

data-modal-target / .modal-close / FEUI.dialog.open(name) / FEUI.dialog.close(name)

버튼·링크로 열기: data-modal-target에 대상 모달 이름 지정
모달 내부에서 닫기: 닫기 버튼에 .modal-close 사용
스크립트로 열기·닫기: FEUI.dialog.open('name')·FEUI.dialog.close('name') 사용

기본 알럿

.modal-alert / alert-notice / alert-confirm

선택지가 없는 안내·결과 확인: 확인 버튼 하나의 alert-notice 사용
저장·발송·처리 전 진행 확인: 취소·확인 버튼의 alert-confirm 사용
완료·경고·오류 알럿 예시: 화면 목록의 모달/알럿 참고

모달 크기

.modal-size-sm ~ .modal-size-xxlg

전체 화면: .modal-size-full 사용
Mobile 전체 화면: .modal-mobile-size-full 사용

모달 크기 단계
class	콘텐츠 너비
`.modal-size-sm`	400px
`.modal-size-md`	560px
`.modal-size-lg`	720px
`.modal-size-xlg`	880px
`.modal-size-xxlg`	1040px

로딩

기본 로딩 레이어

FEUI.loadingLayer.open() / FEUI.loadingLayer.close()

처리 시작: open() 호출
완료·실패: close() 호출
기본 표시 영역: 열린 모달 또는 전체 화면
미리보기: 3초 후 자동 종료

AI 분석 로딩 레이어

FEUI.loadingLayerAi.open() / FEUI.loadingLayerAi.close()

임의취업 일제조사 관리의 AI 기업명 분석 진행 안내
처리 시작: open() 호출
완료·실패: close() 호출
표시 영역: 전체 화면
미리보기: 3초 후 자동 종료

컬러