freshdesk style builder

데이빗의 cs App인 freshdesk의 스타일링을 처리합니다.

개발환경 설정하기

길고 귀찮고 복잡하고 시퀀셜합니다.
열심히 기술해 볼게요. T^T

로컬 개발환경을 설정하고, chrome devtools의 override 기능으로 로컬 테스트 환경을 만들고, 마지막으로 freshdesk 연동과 github page에 배포까지 설명합니다.

제가 미리 세팅해둔 부분인데, 참고사항으로 적어둡니다.
파일을 직접 업로드 할 수없지만 web form을 통해서 스타일링 하는 사이트는 공통으로 사용할 수 있는 방법입니다.

http://support.daybit.com/a/admin에 접속합니다.
portals를 누릅니다. 아니면 다음의 주소로 바로 접속하셔도 됩니다. http://support.daybit.com/a/admin/portal
customize portal 버튼을 클릭합니다.
layout & page 탭으로 진입합니다.
daybit 거래소 의 기본 폰트가 설정되어 있는지 확인합니다.
필드 중에 Head field가 있는데 html 구성요소 중 head 에서 사용되는 각종 정의를 불러옵니다.
이 안에 font stylesheet을 포함되었는지 확인합니다.
기본 폰트는 Roboto와 SpoqaHanSans 입니다.
이제 stylesheet 탭으로 넘어갑시다.
Include mobile friendly stylesheet에 체크되어 있는지 확인합니다.
이제 github page로 배포된 스타일시트를 불러들일 차례입니다.
아래 주소의 스타일시트 파일을 필드에 넣어줍니다.
```
@import url('https://chain-partners.github.io/daybit-cs-freshdesk-style/style.css');  
```
이제 데이빗 cs 사이트 http://support.daybit.com/ko/support/home로 이동해서 추가한 스타일시트가 잘 불러와지고 있는지 확인합시다.

저장소를 다운로드 받아 설정하고 gulp와 기본 npm plugin을 설정합니다.
로컬의 역할은 sass를 css로 변환한 후 특정 폴더로 이동시켜주고, sass 파일이 변화하면 자동으로 태스크를 반복 실행합니다.

Gulp,Sass,LiveReload,BrowserSync 플러그인을 사용합니다.

git clone [email protected]:chain-partners/daybit-cs-freshdesk-style.git  
npm install -g gulp  
npm install

여기까지 로컬의 환경설정이 끝났습니다.

이제 개발환경 실행을 해 봅시다.
터미널에서 아래의 명령을 적어주세요.

gulp

./deploy 폴더가 생성되고 style.css 파일이 생성되는게 확인되어야 합니다.

운영중인 서비스에 파일을 배포해가면서 테스트 할 수 없으니, 스타일링만이라도 개발서버 비슷하게 꾸려봅시다.

크롬 개발자도구를 엽니다.
sources 탭을 엽니다.
sources > override 탭을 열고 +select folder for overrides를 클릭합니다.
추가할 폴더를 골라야 하는데, 위에서 다운로드 받은 저장소의 root폴더로 잡아줍니다.
제 세팅을 예로 들면 이렇습니다. ~/workspace/daybit-cs-freshdesk-style/
로컬 엑세스 요청이 주소창 아래로 바로 뜹니다. 허용 눌러줍시다.
chrome devtools > source > overrides로 시선을 다시돌려서...
Enable Local Overrides에 체크되어 있는지 확인합시다.
그리고 로컬 액세스 대상 폴더도 잘 들어와 있는지 확인합시다.
여기까지 확인되었으면 source > page 탭으로 이동합니다.
embed된 static resource들이 주욱 있는데요. 우리의 css파일은 github page로 호스팅되고 있으므로 chain-partners.github.io/daybit-cs-freshdesk-style/style.css을 찾습니다.
이 스타일시트 파일 위에서 우클릭을 합니다. 연관메뉴 중에서 save for overrides를 누릅니다.
아이콘 모양이 변한걸 확인하세요.

그러면 저장소 디렉토리에 새로운 디렉토리/파일이 추가된 것을 확인하실 수 있습니다.
이제 개발을 시작하시려면 터미널에서 repo directory로 이동하신 뒤 sass 빌드명령어를 실행합니다.
```
gulp  
```