6장. 테마 커스터마이징

theme 폴더 설치방법
git 서버와 Standard/theme 폴더 동기화
theme 폴더 및 .env 변수 동기화
프로 테마 커스터마이징 예제
서버에 테마를 반영하는 방법
Api23KeyPair를 활용한 통신 가이드
Theme 개발시 네이밍 규칙

theme 폴더 설치방법

테마폴더 설치하기

참고자료

0. 참고자료 - Docker로 설치하기에서 모든 과정을 완료한 뒤 테마폴더를 설치해주시기 바랍니다.

1. dabory/themes 디렉토리를 생성해준 뒤 themes 디렉토리로 이동합니다.

mkdir themes
cd themes

2. 설치할 테마를 확인한뒤 다보리 깃서버에서 해당 테마 레포지토리로 이동합니다.

예제에서는 쇼핑몰 테마인 "point2u"를 설치하겠습니다.

point2u 바로가기

3. 다보리 깃서버에서 point2u 레포지토리로 이동하여 HTTP url을 복사합니다.

4. git clone을 통해 point2u 소스를 가져온뒤 point2u 디렉토리로 이동합니다.

git clone http://git.daboryhost.com:10880/dbrerp-themes/point2u.git

cd point2u

* 다보리 컴포저블에서 테마는 erp와 pro 두가지 테마가 존재합니다. 아직 테마에 대해서 숙지가 안되신 개발자께서는 아래 링크를 통해 숙지해주시고 진행해주시기 바랍니다.

- 다보리 테마폴더의 구조

5. pro 테마에서는 erp와 별개로 pro 테마 안에서 작동하는 비지니스 로직과 resources가 존재합니다.

비지니스 로직 등 보안이 필요한 소스들은 테마폴더 내에서 작동하고 공개적으로 접근이 가능한 public 디렉토리내에서는 테마 폴더

의 resources만 접근이 가능하도록 설정하겠습니다. 이를위해 프로젝트의 public/ 디렉토리의 하위 경로들을 dabory/themes와

동일한 환경으로 구축하겠습니다.

아래 경로로 이동하여 /themes/point2u/pro 디렉토리를 생성해줍니다.

cd public
mkdir -p /themes/point2u/pro

6. 생성해준 /themes/point2u/pro 경로로 이동합니다.

cd themes/point2u/pro

6. 링크를 걸어줄 타겟경로와 심볼릭 링크가 생성될 경로를 체크해야합니다.

ln -s [타겟경로] [심볼릭 링크 경로] 명령어를 통해 심볼릭 링크를 걸 수 있습니다.

아래 명령어를 입력하여 심볼릭 링크를 걸어줍니다.

ln -s ../../../../dabory/themes/point2u/pro/resources resources

만약 이 심볼릭 링크가 정상적으로 걸리지 않았다면 css 등 정적인 요소들이 깨져서 나타날 수 있습니다.

7. 여기까지 진행하셨다면 아래링크를 클릭하여 docker 설치를 완료해주세요.

docker 설치방법

git 서버와 Standard/theme 폴더 동기화

깃서버 : 테마폴더 동기화

로컬 PC에서의 스크립트 (cd php):

cd $HOME/docker-works/php/: 홈 디렉토리 아래에 있는 docker-works/php/ 경로로 이동합니다.
all-gitpp {website-alias}: all-gitpp는 사전 정의된 쉘 함수로, 웹사이트 별로 Git 저장소에서 변경 사항을 가져오고 특정 폴더로 이동하여 업데이트를 수행합니다. {website-alias}는 웹사이트의 별칭을 나타내며, 해당 웹사이트의 폴더로 이동하고 Git 동기화를 실행합니다.

서버에서의 스크립트 (cdz):

cd /home: 서버의 /home 디렉토리로 이동합니다.
all-gitpp-host {website-alias}: all-gitpp-host는 로컬 PC의 all-gitpp와 비슷한 역할을 합니다. 이 명령은 특정 웹사이트에 대한 Git 저장소 동기화 및 업데이트를 실행합니다. 이전과 마찬가지로 {website-alias}는 웹사이트의 별칭을 나타내며, 해당 웹사이트의 폴더로 이동하고 Git 동기화를 실행합니다.

이러한 스크립트들은 특정 작업을 자동화하여 개발자가 코드 변경 사항을 효율적으로 동기화하고 관리할 수 있도록 도와줍니다. 로컬 PC에서는 개발 환경을 관리하고, 서버에서는 실제 배포된 웹사이트를 관리하는 데 사용될 수 있습니다.

theme 폴더 및 .env 변수 동기화

Theme 폴더 : .env 변수 동기화

프로젝트 루트 경로에서 .env파일로 이동합니다.

.env파일의 DBR_THEME, PRO_THEME 변수에 적용할 테마 폴더의 이름과 동일한 값을 넣어줍니다.

(변수 이름과 테마 폴더 이름을 변수 값으로 동기화해야 합니다.)

현재는 DBR_THEME로 통합되어 DBR_THEME 변수로만 운영되고 있습니다.

프로 테마 커스터마이징 예제

pro 테마 : 기업이나 조직 외부에 있는 게스트 및 고객 구성원을 대상으로 하는 프론트 오피스 페이지

다보리 컴포저블에서 가장 기준이 되는 pro 테마에는 point2u가 있습니다.

프로 테마 커스터마이징 예제

point2u를 초기 적용했을 경우 ui, db에 일부 데이터가 없기 때문에 위와 같이 기본 데이터들만 보여집니다

현재 커스터마이징된 https://p2u.daboryhost.com/

point2u는 상품을 등록하고 판매할 수 있으며 결제, 장바구니 등의 기능으로 커스터마이징한 쇼핑몰 기반의 pro 테마입니다.

- pro point2u 커스터마이징 방법

쇼핑몰 기반의 pro 테마 특성상 best 상품, 주간 best 상품, 이벤트 페이지, 할인 페이지 이미지 및 링크 등 다양한 데이터들을 index 페이지에 구성할 수 있습니다.

"Book": [

{

"QueryVars": {

"QueryName": "pro/widget-taxo",

"SimpleFilter": "",

"IsntPagination": true

"PageVars": {

"Limit": 100000

}

{

"QueryVars": {

"QueryName": "pro:shop/item-taxo",

"SimpleFilter": "",

"SubSimpleFilter": "image_type = 'thumb'",

"IsntPagination": true

"PageVars": {

"Limit": 100000

}

{

"QueryVars": {

"QueryName": "pro:shop/item-taxo",

"SimpleFilter": "",

"SubSimpleFilter": "image_type = 'middle'",

"IsntPagination": true

"PageVars": {

"Limit": 100000

}

{

"QueryVars": {

"QueryName": "pro:shop/item-badge-gallery",

"SimpleFilter": "bad.lang_type = 'ko'",

"IsntPagination": true

"ListType1Vars": {

"OrderBy": "pro.seq_no asc"

"PageVars": {

"Limit": 100000

}

{

"QueryVars": {

"QueryName": "post/banner-input",

"SimpleFilter": "(mx.post_type_id = 8 and mx.status = '0') and (DATE_FORMAT(now(), '%Y-%m-%d') BETWEEN mx.pc6 AND mx.pc7)",

"IsntPagination": true

"ListType1Vars": {

"OrderBy": "mx.pc3 asc"

"PageVars": {

"Limit": 100000

}

]

/list-type1/home-book 파라메터를 통해

1. widget-taxo

2. item-taxo(thumb)

3. item-taxo(middle)

4. item-badge-gallery

5. banner-input

위 5개의 파라메터를 호출하여 쿼리를 호출합니다.

이 5개의 파라메터에 연결되어 있는 테이블에서 아이템, 위젯, 배너 등의 데이터와 이미지 url 등을 불러오고

해당 데이터를 index 페이지에서 사용할 수 있습니다. 모든 요소들을 db에서 불러오고 있기 때문에

때문에 해당되는 app별로 컨셉에 맞게 테이블 데이터를 채워줍니다.

component : views.shop.item-gallery

2. item 메뉴 그룹

point2u/list-type1-book url로 쿼리를 요청하여 메뉴정보를 불러올 수 있습니다. 판매 item의 고유식별 code인 igroup_code를 키값으로 하여 메뉴정보를 불러오고 igroup_code는 부모 - 자식과 같은 계층 구조로 적용되어있습니다.

해당 파라메터를 통해 컬럼을 추가하거나 수정하여 커스터마이징할 수 있습니다.

component : views.index

3. 아이템 상세보기

point2u/item-details-book url로 쿼리를 요청하여 특정 아이템 정보를 불러오고 상세페이지를 구성할 수 있습니다. 아이템 리뷰정보와 아이템 세부정보 그리고 해당 아이템의 메뉴정보를 불러와서 item-detail 페이지에서 사용할 수 있습니다.

/item-details/{id}로 아이템 상세 페이지에 접근이 가능합니다.

component : views.shop.item-details

수정중...

[테마폴더 설치방법 보기]

서버에 테마를 반영하는 방법

참고자료

- ussh를 통한 서버 접근방법

테마를 수정하고 깃서버에 push했다면 실서버에 수정사항을 반영해야합니다.

아래와 같은 방법으로 서버에 반영할 수 있습니다.

1. 서버 로그인

2. 아래와 같이 명령어를 입력합니다.

cd /home
all-gitpp-dbrerp 서버계정명

3. 입력전 수정사항을 반드시

Api23KeyPair를 활용한 통신 가이드

API23JS란?

API23JS는 GUEST 사이트의 JavaScript에서 HOST 사이트의 API를 사용하기 위한 권한 키입니다. 여기서 HOST는 데이터를 요청받아 처리하고 반환하는 부모 사이트이며,
GUEST는 데이터를 요청하는 자식 사이트라고 하겠습니다.

예를 들어 예시에서는 아래와 같이 정해놓고 진행하겠습니다.

HOST: opticalpos
GUEST: eyemsg

HOST 설정방법

1. HOST가 될 사이트의 통합설정으로 이동합니다.

* 사이트별로 메뉴명이 상이할 수 있습니다.

2. Api23 KeyPair Encrypted 메뉴를 클릭합니다.

3. ①, ②를 순서대로 클릭하여 Api23eKeyPair를 생성합니다.

4. 편집기를 실행하여 HOST(예시에서는 opticalpos)의 .env파일로 이동합니다.

4-1. 혹은 command에서 vi 편집기를 통해 .env 파일을 열어줍니다.

5. env파일에 API23E_KEY_PAIR 변수안에 Api23 KeyPair Encrypted 메뉴에서 생성한 Api23eKeyPair 값을 추가해줍니다.

6. 링크를 클릭하여 myapp API23-Apps로 이동합니다.

7. 아래와 같이 차례대로 버튼을 클릭합니다.

8. 아래와 같이 SSO App의 Api23 Keys를 생성할 수 있는 모달창이 열립니다.

App Type : App의 타입을 지정합니다. js를 통해 함수를 사용하여 통신할 것 이기 때문에 js로 하겠습니다.

Sort : 앱의 종료에 대해서 선택합니다. CRM을 기준하로 하기 때문에 표준 CRM인 KingkongCrm을 선택하겠습니다.

OriginUrl : geust로 사용할 url을 입력합니다.

9. Generate New Api23 Keys 버튼을 클릭하여 Api23Key를 생성후 값을 복사하여 메모장에 붙여넣습니다. (추후 HOST Api를 사용하기 위해서 필요합니다.)

10. Save 버튼을 통하여 입력한 값들을 반드시 저장합니다.

GUEST 설정방법

1. HOST 생성방법 3번에서 생성해준 API23eKeyPair 값을 HOST와 동일하게 GUEST의 프로젝트 .env 파일에도 동일하게 넣어주겠습니다.

* 'api23key'키가 아니라 'API23eKeyPair'키를 넣어야합니다.

2. 편집기를 열고 GUEST 사이트의 FrontEnd(dbrerp)에서 HOST의 API를 사용하려는 view 페이지로 이동합니다.

예시에서는 eyemsg의 right.blade.php 파일에 아래와 같이 script를 추가하겠습니다.

<script src="/js/dabory.data-linker.js?serverUrl=https://opticalpos.daboryhost.com&api23Key=Nx4QebHKTssjDuP0AKude0IMZWnak0O0hb1SJ5C3PCUuPK0oRxAVAclS5/I6Zs4cO1Czr8DDrR2LNw/uJpwmzibLTYvsH54ThO5lVLs8ifHllF0fenDeHGL1R6Tuv+KJMQGQGt//HhRLrNKRyrXsx2wN1ZSUtPrpkvEQLC+DE/O0xPxYqBXqM80EaRJ+K1qrTQFkVKMwcTEv"></script>

위 script의 src 속성에서 dabory.data-linker.js에 ServerUrl에 HOST 사이트인 opticalpos url을 넣고 api23Key에 HOST 생성방법 9번에서 생성해준 Api23Key를 파라미터로 넣습니다.

* dabory.data-linker.js는 GUEST에서 HOST와 통신할 수 있도록 구현된 함수를 모아둔 파일입니다.

dabory.data-linker.js 사용방법

<script src="/js/dabory.data-linker.js?serverUrl=https://opticalpos.daboryhost.com&api23Key=Nx4QebHKTssjDuP0AKude0IMZWnak0O0hb1SJ5C3PCUuPK0oRxAVAclS5/I6Zs4cO1Czr8DDrR2LNw/uJpwmzibLTYvsH54ThO5lVLs8ifHllF0fenDeHGL1R6Tuv+KJMQGQGt//HhRLrNKRyrXsx2wN1ZSUtPrpkvEQLC+DE/O0xPxYqBXqM80EaRJ+K1qrTQFkVKMwcTEv"></script>
    <script>
        $('#open-signup-popup').on('click', function () {
            if (! window.passwdPolicy) {
                $.fn.dataLinker.api23Js('setup-get', {
                    'SetupCode': 'passwd-policy',
                    'BrandCode': 'member'
                }, function (response) {
                    window.passwdPolicy = response
                    $('#policy-desc-em').text(window.passwdPolicy['PolicyDesc'])
                    // console.log(window.passwdPolicy)
                    $('#join').modal('show');
                })
            } else {
                $('#join').modal('show');
            }
        });
    </script>

1번 줄 :

- dabory.data-linker.js 스크립트를 로드합니다. 이 스크립트는 serverUrl과 api23Key 파라미터를 통해 API 호출을 처리할 서버와 인증 키를 설정합니다.

5번줄 :

window.passwdPolicy가 존재하는지 확인후 없을 경우 dabory.data-linker.js에서 제공하는 api23Js 메서드를 사용해 setup-get HOST의 API를 호출합니다.
호출 시, 요청 데이터(SetupCode와 BrandCode)를 GUEST로 전송하여 API에서 필요한 비밀번호 정책 정보를 가져옵니다.

이렇게 API23JS는 HOST와 GUEST간의 안전한 데이터 통신을 가능하게 합니다.

HOST는 API23E_KEY_PAIR를 생성하고 API23_KEY를 발급하여 GUEST에게 제공합니다.
GUEST는 API23_KEY를 사용해 HOST API를 호출하여 필요한 데이터를 가져옵니다.
이를 통해 HOST의 API 데이터를 GUEST 사이트에서 효율적으로 사용할 수 있습니다.

Theme 개발시 네이밍 규칙

테마/계정/DB 복사 시 중복 단어로 인한 오류 방지를 위한 네이밍 규칙

🔎문제사항

테마나 DB를 복사할 때, 폴더명과 내부 콘텐츠의 텍스트가 함께 일괄 변경되면서 예상치 못한 문제가 발생할 수 있습니다.

예를들어

예를 들어, 기존 composable 테마를 복사해 **새로운 테마인 myaccount**로 변경하는 경우,
편집기에서 composable이라는 단어를 전체 검색 후 변경하게 되면 폴더명뿐 아니라 내부 콘텐츠의 모든 composable 텍스트가 **myaccount**로 바뀌어버립니다.
이와 비슷한 문제가 DB 복사 시에도 발생할 수 있습니다. DB 사용자 이름(composable_db)이 포함된 특정 값들이 일괄 변경되면서 Definer나 테이블 내 데이터까지 변경되어 원치 않는 데이터 수정이 일어날 수 있습니다.
따라서 이러한 문제를 방지하고, 다른 테마나 DB로 복사 작업을 보다 편리하게 수행하기 위해 아래와 같은 네이밍 규칙을 제안합니다.

🛠 해결방안

1️⃣테마명, 계정명, DB명에 언더바(_) 사용하기

기존방식	✅변경방식	분류
composable	✅ compos_able	theme
myaccount	✅ my_account	theme
composable_db	✅ compos_able_db	db
myaccount_db	✅ my_account_db	db

2️⃣도메인(URL) 생성 시 하이픈(-) 사용하기

기존방식	✅ 변경방식	분류
composable.com	✅ compos_able.com	domain
myaccount.com	✅ my_account.com	domain

6장. 테마 커스터마이징

theme 폴더 설치방법

테마폴더 설치하기

git 서버와 Standard/theme 폴더 동기화

깃서버 : 테마폴더 동기화

theme 폴더 및 .env 변수 동기화

Theme 폴더 : .env 변수 동기화

프로 테마 커스터마이징 예제

프로 테마 커스터마이징 예제

- pro point2u 커스터마이징 방법

1. index 페이지 구성

2. item 메뉴 그룹

3. 아이템 상세보기

서버에 테마를 반영하는 방법

Api23KeyPair를 활용한 통신 가이드

API23JS란?

API23JS는 GUEST 사이트의 JavaScript에서 HOST 사이트의 API를 사용하기 위한 권한 키입니다. 여기서 HOST는 데이터를 요청받아 처리하고 반환하는 부모 사이트이며,
GUEST는 데이터를 요청하는 자식 사이트라고 하겠습니다.

예를 들어 예시에서는 아래와 같이 정해놓고 진행하겠습니다.

HOST: `opticalpos`

GUEST: `eyemsg`

HOST 설정방법

GUEST 설정방법

dabory.data-linker.js 사용방법

Theme 개발시 네이밍 규칙

테마/계정/DB 복사 시 중복 단어로 인한 오류 방지를 위한 네이밍 규칙

🔎문제사항

🛠 해결방안

1️⃣테마명, 계정명, DB명에 언더바(_) 사용하기

기존방식

✅변경방식

분류

2️⃣도메인(URL) 생성 시 하이픈(-) 사용하기

기존방식

✅ 변경방식

분류

6장. 테마 커스터마이징

theme 폴더 설치방법

테마폴더 설치하기

git 서버와 Standard/theme 폴더 동기화

깃서버 : 테마폴더 동기화

theme 폴더 및 .env 변수 동기화

Theme 폴더 : .env 변수 동기화

프로 테마 커스터마이징 예제

프로 테마 커스터마이징 예제

- pro point2u 커스터마이징 방법

1. index 페이지 구성

2. item 메뉴 그룹

3. 아이템 상세보기

서버에 테마를 반영하는 방법

Api23KeyPair를 활용한 통신 가이드

API23JS란?

API23JS는 GUEST 사이트의 JavaScript에서 HOST 사이트의 API를 사용하기 위한 권한 키입니다. 여기서 HOST는 데이터를 요청받아 처리하고 반환하는 부모 사이트이며,GUEST는 데이터를 요청하는 자식 사이트라고 하겠습니다.

예를 들어 예시에서는 아래와 같이 정해놓고 진행하겠습니다.

HOST: opticalpos

GUEST: eyemsg

HOST 설정방법

GUEST 설정방법

dabory.data-linker.js 사용방법

Theme 개발시 네이밍 규칙

테마/계정/DB 복사 시 중복 단어로 인한 오류 방지를 위한 네이밍 규칙

🔎문제사항

🛠 해결방안

1️⃣테마명, 계정명, DB명에 언더바(_) 사용하기

기존방식

✅변경방식

분류

2️⃣도메인(URL) 생성 시 하이픈(-) 사용하기

기존방식

✅ 변경방식

분류

API23JS는 GUEST 사이트의 JavaScript에서 HOST 사이트의 API를 사용하기 위한 권한 키입니다. 여기서 HOST는 데이터를 요청받아 처리하고 반환하는 부모 사이트이며,
GUEST는 데이터를 요청하는 자식 사이트라고 하겠습니다.

HOST: `opticalpos`

GUEST: `eyemsg`