🔧 개발자 도구
퍼블리싱 시안과 컴포넌트 샘플을 모아둔 화면입니다. 헤더의 [DEV] 버튼으로 들어옵니다.
📐 퍼블리싱 시안 webapp/publishing/ · 새 탭으로 열림 ↗
-
1차 시안 (2026.07.24)
ppt-NN.html 전체 목록 · (2026.08.13 정정 :
index.html/left.html은 이제 모든 차수에 있다 — 1차 전용이 아님) - 2차 시안 (2026.07.29) CSS/JS/이미지는 전체본, HTML 은 신규 8종만(ppt-25·27·47·48·49-50·51-52·73-74·82). 기존 10종은 1차와 동일
-
3차 시안 (2026.08.05)
CSS/JS/이미지 전체본 + HTML 35종. 3차 변경 = util.css(
+검색영역/아코디언트리) · utill.js · common/board/layout.css. pub2026 반영완료(bg_sub_tempplaceholder만 2차 물결 유지) -
4차 시안 (2026.08.13)
최신
메인화면 시안 최초 수령(
layout_main.html+main.css/main.js/js/swiper+images/main신규) · HTML 56종(신규 21종 = ppt-61·89~93·104~112·142~151).
4차 변경 = util.css +349줄(신청서식 · 자료검색 2단 · SDC방문예약 · 교육 · 개인정보동의) · common.css(모달 스킨 개편 +.modal-footer정본 신설) · layout.css(GNB 드롭다운 구조 개편 · 로고 SVG→PNG) · board/contents.css · utill.js.
pub2026 반영완료 — 단layout.js(글자크기 수정본 유지) 와images/ex_thum/board/05.jpg(4차 파일이 JPG 가 아니라 20×20 SVG 오배달) 는 제외. -
퍼블리싱 참고사항 PDF (2차)
단계표시기(
.step-list) · 파일첨부폼(.wrap-upload-box) 사용법 — 신청서 계열 - 퍼블리싱 참고사항 PDF (3차) 검색영역 · 아코디언트리 · 절차 컴포넌트 사용법
- 퍼블리싱 개발전달문서 v1.0 (4차) 최신 4차와 함께 온 전체 개발 전달문서
-
board-page · board-button 사용가이드 v1.0 (4차)
최신
페이지네이션(
.board-page) · 하단 버튼줄(.board-button) 사용법 — 우리가 자체 정의한 페이지네이션 비활성 표시 ·.sdis-modal-btns와 대조해 볼 것
🧩 컴포넌트 샘플 /sample/*.do
-
커스텀그리드 — 단순 목록
조회 · 검색 · 페이징 · 보기개수 · 제목 클릭 (
gfn_sdisCustomGrid) - 커스텀그리드 — 인터랙티브 체크박스 선택 · 셀 값 입력 · 버튼 처리
-
데이트피커(달력)
jQuery UI datepicker + 공통설정
datepickerOption· 기간 연동 -
모달 팝업
퍼블
.wrap-modal+fnOpenModal/fnCloseModal· 구showlayer()대체 -
윈도우 팝업
fnPopup+.popuptiles표준 구조 · 모달로 갈까 창으로 갈까 판단 기준표 포함 -
페이지네이션(board-page)
신규
퍼블 4차 규격 확인용 ·
total/page를 바꿔가며 가이드 5가지 상황을 다 볼 수 있음 — 실제 화면은 총 페이지가 1~2쪽이라 도트(…)·블록이동을 못 본다 -
팝업 안 그리드(표)
신규
시안
ppt-41-42전체항목 그리드 기준 · 스크롤러는 하나 + 높이는 직접 · 머리글 고정 · 검색영역 고정 · 실제로 겪은 함정 7가지 -
레이어 팝업 🚨 되도록 사용 자제
신규
사용자가 요청하지 않았는데 화면을 가리는 UI — 화면 안 안내문 · 버튼으로 여는 모달을 먼저 검토할 것.
원칙은 관리자가 등록해 전체 사용자에게 알리는 공지(메인 팝업존) 전용.
그래도 써야 하면 :common/layerPopup.jspinclude 한 줄 + 모델 한 줄 · 파라미터cookiePrefix/todayBtn/imgUrlPrefix· 문서docs/pjw/layer-popup-guide.md