6장. 테마 커스터마이징

테마 설치하기

테마 설치하기

1. 설치할 테마를 확인한뒤 다보리 깃서버에서 해당 테마 레포지토리로 이동하여 HTTP url을 복사합니다.

image.png

2. dbrerp 소스에서 dabory 디렉토리로 이동합니다.

cd dabory

3. themes 디렉토리를 생성합니다.

mkdir themes

4. 생성한 themes 디렉토리로 이동합니다.

cd themes

5. 복사했던 깃레포지토리의 HTTP url를 git clone 합니다.

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

6. dbrerp 소스의 루트 디렉토리에 위치한 public 경로로 이동합니다.

cd ../../public

7.  /themes/eyemsg/pro 디렉토리를 생성합니다.

mkdir -p /themes/point2u/pro

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

cd themes/eyemsg/pro

9. public/themes/eyemsg/pro 경로 안에 dabory/themes/eyemsg/pro 경로의 resources의 심볼릭 링크를 걸어줘야 합니다.

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

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

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

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

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

깃서버 : 테마폴더 동기화

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

  1. cd $HOME/docker-works/php/: 홈 디렉토리 아래에 있는 docker-works/php/ 경로로 이동합니다. 

  2. all-gitpp {website-alias}: all-gitpp는 사전 정의된 쉘 함수로, 웹사이트 별로 Git 저장소에서 변경 사항을 가져오고 특정 폴더로 이동하여 업데이트를 수행합니다. {website-alias}는 웹사이트의 별칭을 나타내며, 해당 웹사이트의 폴더로 이동하고 Git 동기화를 실행합니다.

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

  1. cd /home: 서버의 /home 디렉토리로 이동합니다. 

  2. 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 커스터마이징하기

다보리 컴포저블의 기본 쇼핑몰 테마인 dcdemo의 pro 페이지를 커스터마이징하는 예제입니다.

dcdemo가 설치되어 있지 않다면 프론트엔드 설치하기 예제를 통해 설치를 완료해주세요.



 pro의 구조

pro 디렉토리는 다음과 같이 구성되어있습니다. 커스터마이징시 app, para, resources, routes에서 모든 커스터마이징이 이뤄집니다.

image.png

예제1

image.png

위 이미지처럼 item-details 페이지에서 상품구분, 상품명, 상품 가격, 옵션 등의 데이터들을 출력하고 있습니다. 

예제1에서는 item-details 페이지에서 출력하고 있는 데이터를 변경하여 원하는 데이터로 바꿔서 출력하겠습니다.




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

수정사항 서버에 배포하기

1. 수정사항을 git repo에 piush합니다.

2. 서버 로그인

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

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


Api23KeyPair를 활용한 통신 가이드


 

 API23JS란?

API23JSGUEST 사이트의 JavaScript에서 HOST 사이트의 API를 사용하기 위한 권한 키입니다. 여기서 HOST는 데이터를 요청받아 처리하고 반환하는 부모 사이트이며,
GUEST는 데이터를 요청하는 자식 사이트라고 하겠습니다.
예를 들어 예시에서는 아래와 같이 정해놓고 진행하겠습니다.

 HOST 설정방법

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

image.png

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

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

image.png

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

image.png

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

image.png

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

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

image.png

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

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

image.png

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

image.png

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'키를 넣어야합니다.

image.png

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 스크립트를 로드합니다. 이 스크립트는 serverUrlapi23Key 파라미터를 통해 API 호출을 처리할 서버와 인증 키를 설정합니다.

5번줄 :

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

Theme 개발시 네이밍 규칙

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

 🔎문제사항

테마나 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