포도소프트웨어 솔루션 가이드

소개

이 가이드는 포도솔루션 관리자 작업시 실제 퍼블리싱과 개발 업무에 적용할 수 있도록 돕기 위해 제작되었습니다. 모든 사용자에게 최적의 경험을 제공하기 위한 필수 요소들을 소개합니다.

kendo ui 버전에 따라 다른 점은 kendo 가이드에서 확인해주세요.

Script

필수 스크립트들과 상황에 따라 불러오는 스크립트가 있습니다. 가이드의 기준은 2025년 04월 02일 ”런웨이”를 기준으로 제작되었습니다.

필수 스크립트 :

jquery 최신 버전. 무조건 최상위에 불러와야 한다.
yepnope을 쓰기 위한 라이브러리
kendo ui 자주 사용하는거 따로 모아서 빌드 한 js
2025버전에서 splitter가 기존과 많이 달라 그 전버전을 불러와야 한다.
kendo ui 2025버전 라이센스 반드시 필요!!
kendo ui 한글
kendo ui 메세지 한글
포도에서 kendo ui component util 만들어진것.
관리자 메뉴 js
관리자 용 제이쿼리 모음

Css

관리자에서 사용하는 css 입니다. 가이드의 기준은 2025년 04월 02일 ”런웨이”를 기준으로 제작되었습니다.

Css :

kendo ui 2025버전 메인 테마로, 우선 이걸 입혀서 기본 레이아웃을 잡아줍니다.
초기화 css
관리자 용 root css
사용자/관리자 공통 유틸 css
사용자/관리자 공통 kendo custom css
관리자 공통 common css
관리자 스타일 css

머리말

SCSS

util.css / util.scss
1. util.css 만 전처리기 scss로 작업이 되어있기에, 수정을 하고자 하시면 sass를 우선 설치합니다.
2. sass를 설치하기 위해선 nodo.js기반의 패키지 관리자 npm을 사용하여 할 수 있습니다.
3. 터미널에서 명령어 npm install -g sass
4. css 폴더로 이동하여 컴파일 하여 css를 생성합니다. 그 css를 불러오면 됩니다.
5. sass -util.scss util.css
6. scss파일이 변경될때마다 자동으로 컴파일 하고자 하신다면 sass --warch util.scss:util.css 명령어를 사용하시면 자동 컴파일이 됩니다.

info

vines2 프로젝트 2024.04, valuemark 프로젝트 2024.07 기준입니다.
class명과 마크업을 준수해 주시길 바랍니다.
적용 예정이며, 이렇게 바뀔 예정입니다. 그걸 위한 정리단계입니다.
custom, style 을 제외한 모든 class 앞에 pd- 를 붙입니다.

빌드 방법

Html Include

Node.js 가 필요합니다.

# npm 초기화
npm init -y

# gulp 설치
npm install gulp --save-dev

# gulp-file-include 설치
npm install gulp-file-include --save-dev

project/
│
├── src/
│   ├── admin/
│       ├── header.html
│       └── index.html
├── admin/
│   └── code/
├── gulpfile-admin.js
└── package.json

src/ 폴더: 소스 파일을 저장하는 폴더
admin/ 폴더: 빌드된 파일이 생성되는 폴더
gulpfile-admin.js gulp admin 설정 파일
code 코드를 볼 수 있게 만들어놓은 code 파일들 폴더

src/index.html
gulp-file-include를 사용하여 header.html 인클루드

gulpfile-admin.js 설정

const gulp = require('gulp');
const fileInclude = require('gulp-file-include');

// prettier 모듈을 동적으로 import
// HTML 파일 병합 작업
async function fileIncludeTask() {
    const prettier = (await import('gulp-prettier')).default;

    return gulp.src(['src/admin/*.html', '!src/partials/**']) // header.html 제외
        .pipe(fileInclude({
            prefix: '@@', // 인클루드 명령어의 접두사 설정
            basepath: '@file' // 인클루드 파일의 경로 설정
        }))
        .pipe(prettier({ // HTML 코드 포맷팅 설정
            parser: 'html', // HTML 파서 사용
            tabWidth: 4, // 들여쓰기 크기 (2칸)
            useTabs: false, // 탭 대신 스페이스 사용
            singleQuote: true, // 속성값을 single quote로 사용
            htmlWhitespaceSensitivity: 'ignore', // 공백 민감도 무시
            endOfLine: 'auto', // 운영체제에 맞는 줄바꿈 설정
            printWidth: 200 // 줄 바꿈 할 폭 길이
        }))
        .pipe(gulp.dest('admin')); // 병합된 파일을 admin 폴더에 저장
}

// 기본 작업 설정
exports.default = gulp.series(fileIncludeTask);

원래라면 gulp 으로만 실행 가능하지만, 분류마다 따로 선언해줘야 되서 package.json에 따로 설정해준다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "admin": "gulp --gulpfile gulpfile-admin.js",
    "html": "gulp --gulpfile gulpfile-html.js",
    "podo": "gulp --gulpfile gulpfile-podosw.js"
  },

이러면 npm run admin 으로 실행된다.

gulp 에러 발생 시 최신버전 설치

# 기존 gulp 전역 설치 버전 제거
npm uninstall -g gulp

# 기존 gulp와 관련된 로컬 패키지 제거
npm uninstall gulp --save-dev

# gulp 최신 버전 전역 설치
npm install -g gulp-cli

# gulp 최신 버전 로컬 설치
npm install gulp --save-dev

Gulp 코드 포맷팅 설정

# Prettier는 코드 스타일을 일관되게 유지해주는 코드 포맷터입니다.
npm install --save-dev prettier gulp-prettier

# ESLint는 코드의 품질과 스타일을 점검해주는 도구로, 포맷팅도 가능합니다.
npm install --save-dev eslint gulp-eslint

관리자 필수
css/스크립트

/css/kendo/2022.1.119/kendo.common.min.css kendo common css 입니다. 기본적인 형태를 잡혀주기에 필요합니다.
css/admin/root_admin.css 관리자용 변수모음
css/util.css 공통 유틸 요소들이 있으며 수정하지 마세요.
css/admin/common.css 관리자용 common 입니다.
css/admin/admin.css 여기서 추가/수정 하시면 됩니다.
/js/jquery/3.4.1/jquery-3.4.1.js 제이쿼리 js
/js/yepnope/1.5.4/yepnope.js kendo를 사용할려면 yepnope
/js/kendo/2022.1.119/kendo.web.min.js kendo 차트가 없을 시 사용하며,
/js/kendo/2022.1.119/kendo.all.min.js kendo 차트가 있을 시 이것을 불러옵니다.
/js/kendo/2022.1.119/cultures/kendo.culture.ko-KR.min.js kendo 한글변환을 위한 script
/js/kendo.extension/kendo.ko_KR.js kendo 한글변환을 위한 script
/js/podo.ui/page/kendoComponentUtil.js kendo componentUtil을 사용하기위한 script
/js/common/top-menu.js 탑 메뉴
/js/admin/gnb.js 관리자 메뉴
/js/admin/operator.js 관리자 화면 불러오기
/js/common/common.js 공통
/js/common/common.models.js 포도 시스템
/js/podo.ui/podo.ui.core.js 포도 시스템
/js/podo.ui/podo.ui.core.min.js 포도 시스템