6장. 테마 커스터마이징

theme 폴더 설치방법

테마폴더 설치하기

참고자료


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

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

mkdir themes
cd themes


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

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

point2u 바로가기


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

image.png

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 설치를 완료해주세요.

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 테마 : 기업이나 조직 외부에 있는 게스트 및 고객 구성원을 대상으로 하는 프론트 오피스 페이지

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

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

image.png

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

 image.png

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

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

- pro point2u 커스터마이징 방법
1. index 페이지 구성

쇼핑몰 기반의 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 메뉴 그룹
해당 파라메터를 통해 컬럼을 추가하거나 수정하여 커스터마이징할 수 있습니다.
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. 입력전 수정사항을 반드시

    host api를 이용한 회원가입 팝업 구현하기

     API23JS란?

    API23JS는 간단히 말해 게스트 사이트의 JavaScript에서 호스트 사이트의 API를 사용하기 위한 권한 키입니다.

    이번장에서 먼저 호스트 사이트에서 API23E_KEY_PAIR을 생성한 뒤, 이를 이용해 게스트 사이트에서 사용할 API23_KEY를 발급

    받는 과정과, 이후 호스트에서 하나의 API와 통신하는 방법을 설명하겠습니다.

     

    0. 우선 Api23eKeyPair를 생성하겠습니다.

    1. HOST가 될 사이트의 통합설정으로 이동합니다. (예시에서는 opticalpos)

    image.png

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

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

    image.png