# 6장. 테마 커스터마이징



# 테마 설치하기

> ## 테마 설치하기

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

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/zXhimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/zXhimage.png)

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

```bash
cd dabory
```

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

```sh
mkdir themes
```

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

```sh
cd themes
```

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

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

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

```sh
cd ../../public
```

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

```bash
mkdir -p /themes/point2u/pro
```

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

```bash
cd themes/eyemsg/pro
```

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

ln -s \[<span style="color: rgb(224, 62, 45);">타겟경로</span>\] \[<span style="color: rgb(53, 152, 219);">심볼릭 링크 경로</span>\] 명령어를 통해 심볼릭 링크를 걸 수 있습니다.

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

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

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

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

### 깃서버 : 테마폴더 동기화

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

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

</div>**서버에서의 스크립트 (`cdz`):**

<div id="bkmrk-cd-%2Fhome%3A-%EC%9D%B4-%EB%AA%85%EB%A0%B9%EC%9D%80-%EC%84%9C%EB%B2%84%EC%9D%98-">1. `cd /home`: 서버의 `/home` 디렉토리로 이동합니다.
2. `all-gitpp-host {website-alias}`: `all-gitpp-host`는 로컬 PC의 `all-gitpp`와 비슷한 역할을 합니다. 이 명령은 특정 웹사이트에 대한 Git 저장소 동기화 및 업데이트를 실행합니다. 이전과 마찬가지로 `{website-alias}`는 웹사이트의 별칭을 나타내며, 해당 웹사이트의 폴더로 이동하고 Git 동기화를 실행합니다.

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

# theme 폴더 및 .env 변수 동기화

### Theme 폴더 : .env 변수 동기화

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

<div id="bkmrk-.env%ED%8C%8C%EC%9D%BC%EC%9D%98-dbr_theme%2C-p"><div>.env파일의 DBR_THEME, PRO_THEME 변수에 적용할 테마 폴더의 이름과 동일한 값을 넣어줍니다.</div></div>  
(변수 이름과 테마 폴더 이름을 변수 값으로 동기화해야 합니다.)

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

# 프로 테마 커스터마이징하기

> ## 테마 개발시 pro 커스터마이징하기

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

dcdemo가 설치되어 있지 않다면 [프론트엔드 설치하기](https://manual.dabory.com/books/quick-start/page/docker) 예제를 통해 설치를 완료해주세요.

---

<p class="callout info"> pro의 구조</p>

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

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/ZsWimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/ZsWimage.png)

> ## 예제1

[![image.png](https://manual.dabory.com/uploads/images/gallery/2025-02/scaled-1680-/G6yimage.png)](https://manual.dabory.com/uploads/images/gallery/2025-02/G6yimage.png)

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

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

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

> ## 수정사항 서버에 배포하기

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

2\. 서버 로그인

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

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

# Api23KeyPair를 활용한 통신 가이드

####  **API23JS란?**

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

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

- ##### **HOST**: `opticalpos`
- ##### **GUEST**: `eyemsg`

####  **HOST 설정방법**

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

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/YQLimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/YQLimage.png)

<span style="color: rgb(241, 196, 15);">\* 사이트별로 메뉴명이 상이할 수 있습니다.</span>

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

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/V23image.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/V23image.png)

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

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/9edimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/9edimage.png)

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

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/kdBimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/kdBimage.png)

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

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

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/aXtimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/aXtimage.png)

6\. [링크](https://opticalpos.daboryhost.com/dabory/myapp/list-type/type1?bpa=eyJtZW51X25hbWUiOiJBUEkyMy1BcHAiLCJtZW51X2NvZGUiOiI2MDAwMDAiLCJkaXNhYmxlX2xfbWVudSI6IjAiLCJlbmFibGVfcl9tZW51IjoiMCIsInBlcm1pc3Npb24iOnsiaXNfbXltZW51IjoiMCIsImlzX2xpc3QiOiIxIiwiaXNfcmVhZCI6IjEiLCJpc19jcmVhdGUiOiIxIiwiaXNfdXBkYXRlIjoiMSIsImlzX2RlbGV0ZSI6IjEiLCJpc19uZXd0YWIiOiIwIn0sInBhZ2VfdXJpIjoiXC9kYWJvcnlcL215YXBwXC9saXN0LXR5cGVcL3R5cGUxIiwicGFyYV9uYW1lIjoiXC9saXN0XC9saXN0LXR5cGUxXC9hcGkyMy1hcHAtaW5wdXQiLCJ0aGVtZV9kaXIiOiIiLCJtYWluX2FwcF9pZCI6MCwiZ3Vlc3RfYXBwX2lkIjowLCJjdXN0b21fdmFyIjoiIn0=)를 클릭하여 myapp API23-Apps로 이동합니다.

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

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/iW2image.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/iW2image.png)

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

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/Sclimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/Sclimage.png)

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

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

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

9\. Generate New Api23 Keys 버튼을 클릭하여<span style="color: rgb(224, 62, 45);"> Api23Key</span>를 <span style="color: rgb(224, 62, 45);">생성</span>후 <span style="color: rgb(224, 62, 45);">값을 복사하여 메모장에 붙여넣습니다.</span> (추후 HOST Api를 사용하기 위해서 필요합니다.)

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

####  **GUEST 설정방법**

1\. <span style="color: rgb(224, 62, 45);"> **HOST 생성방법**</span> 3번에서 생성해준 <span style="color: rgb(224, 62, 45);">API23eKeyPair</span> 값을 HOST와 동일하게 GUEST의 프로젝트 <span style="color: rgb(224, 62, 45);">.env</span> 파일에도 동일하게 넣어주겠습니다.

<span style="color: rgb(241, 196, 15);">\* 'api23key'키가 아니라 'API23eKeyPair'키를 넣어야합니다.</span>

[![image.png](https://manual.dabory.com/uploads/images/gallery/2024-11/scaled-1680-/JzEimage.png)](https://manual.dabory.com/uploads/images/gallery/2024-11/JzEimage.png)

2\. 편집기를 열고 <span style="color: #e03e2d;">**GUEST**</span> 사이트의 FrontEnd(dbrerp)에서 HOST의 API를 사용하려는 view 페이지로 이동합니다.

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

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

<div id="bkmrk-%EC%9C%84-script%EC%9D%98-src-%EC%86%8D%EC%84%B1%EC%97%90%EC%84%9C-d">위 script의 src 속성에서 dabory.data-linker.js에 ServerUrl에 HOST 사이트인 opticalpos url을 넣고 api23Key에 <span style="color: rgb(224, 62, 45);">**HOST 생성방법**</span> 9번에서 생성해준 <span style="color: rgb(224, 62, 45);">Api23Key</span>를 파라미터로 넣습니다.</div><div id="bkmrk--9"></div><div id="bkmrk-%2A-dabory.data-linker"><span style="color: rgb(241, 196, 15);">\* dabory.data-linker.js는 GUEST에서 HOST와 통신할 수 있도록 구현된 함수를 모아둔 파일입니다.</span></div><div id="bkmrk--10"></div><div id="bkmrk--11"></div>####  **dabory.data-linker.js 사용방법**

<div id="bkmrk--12"></div>```javascript
<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>
```

<div id="bkmrk-1%EB%B2%88-%EC%A4%84-%3A">1번 줄 :</div><div id="bkmrk---dabory.data-linker">- `dabory.data-linker.js` 스크립트를 로드합니다. 이 스크립트는 `serverUrl`과 `api23Key` 파라미터를 통해 API 호출을 처리할 서버와 인증 키를 설정합니다.</div><div id="bkmrk--13"></div>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명에 언더바(\_) 사용하기**

<table border="1" class="align-center" id="bkmrk-%EA%B8%B0%EC%A1%B4%EB%B0%A9%EC%8B%9D-%E2%9C%85%EB%B3%80%EA%B2%BD%EB%B0%A9%EC%8B%9D-%EB%B6%84%EB%A5%98-compos" style="border-collapse: collapse; width: 100%; border-width: 3px; border-style: groove; height: 194.016px;"><colgroup><col style="width: 33.3333%;"></col><col style="width: 33.3333%;"></col><col style="width: 33.3333%;"></col></colgroup><tbody><tr style="height: 66.8281px;"><td style="height: 66.8281px; border-width: 3px;">##### <span style="color: rgb(224, 62, 45);">**기존방식**</span>

</td><td style="height: 66.8281px; border-width: 3px;">##### <span style="color: rgb(53, 152, 219);">**✅변경방식**</span>

</td><td style="height: 66.8281px; border-width: 3px;">##### **분류**

</td></tr><tr style="height: 31.7969px;"><td style="height: 31.7969px; border-width: 3px;">composable</td><td style="height: 31.7969px; border-width: 3px;"><span style="color: rgb(53, 152, 219);">✅ compos\_able</span></td><td style="height: 31.7969px; border-width: 3px;">theme</td></tr><tr style="height: 31.7969px;"><td style="height: 31.7969px; border-width: 3px;">myaccount</td><td style="height: 31.7969px; border-width: 3px;"><span style="color: rgb(53, 152, 219);">✅ my\_account</span></td><td style="height: 31.7969px; border-width: 3px;">theme</td></tr><tr style="height: 31.7969px;"><td style="height: 31.7969px; border-width: 3px;">composable\_db</td><td style="height: 31.7969px; border-width: 3px;"><span style="color: rgb(53, 152, 219);">✅ compos\_able\_db</span></td><td style="height: 31.7969px; border-width: 3px;">db</td></tr><tr style="height: 31.7969px;"><td style="height: 31.7969px; border-width: 3px;">myaccount\_db</td><td style="height: 31.7969px; border-width: 3px;"><span style="color: rgb(53, 152, 219);">✅ my\_account\_db</span></td><td style="height: 31.7969px; border-width: 3px;">db</td></tr></tbody></table>

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

<table border="1" class="align-center" id="bkmrk-%EA%B8%B0%EC%A1%B4%EB%B0%A9%EC%8B%9D-%E2%9C%85-%EB%B3%80%EA%B2%BD%EB%B0%A9%EC%8B%9D-%EB%B6%84%EB%A5%98-compo" style="border-collapse: collapse; width: 100%; border-width: 3px; border-style: groove; height: 194.016px;"><colgroup><col style="width: 33.3333%;"></col><col style="width: 33.3333%;"></col><col style="width: 33.3333%;"></col></colgroup><tbody><tr style="height: 66.8281px;"><td style="height: 66.8281px; border-width: 3px;">##### <span style="color: rgb(224, 62, 45);">**기존방식**</span>

</td><td style="height: 66.8281px; border-width: 3px;">##### <span style="color: rgb(53, 152, 219);">**✅ 변경방식**</span>

</td><td style="height: 66.8281px; border-width: 3px;">##### **분류**

</td></tr><tr style="height: 31.7969px;"><td style="height: 31.7969px; border-width: 3px;">composable.com</td><td style="height: 31.7969px; border-width: 3px;"><span style="color: rgb(53, 152, 219);">✅ compos\_able.com</span></td><td style="height: 31.7969px; border-width: 3px;">domain</td></tr><tr style="height: 31.7969px;"><td style="height: 31.7969px; border-width: 3px;">myaccount.com</td><td style="height: 31.7969px; border-width: 3px;"><span style="color: rgb(53, 152, 219);">✅ my\_account.com</span></td><td style="height: 31.7969px; border-width: 3px;">domain</td></tr></tbody></table>