GNB 내 노출할 메뉴 및 로고, GNB 내 유저 메뉴 속 노출 메뉴, 글로벌 설정(GDS API 사용여부, 언어 설정 등),
가입/로그인 시 팝업 여부 등 GNB에서 제공하는 다양한 옵션을 설정 할 수 있습니다.
GNB 옵션 내역은 Release 노트 에서 확인 하실 수 있습니다.
1) 옵션 설명
이름 (Lv. 1) | 이름 (Lv. 2) | 이름 (Lv. 3) | 필수 여부 | 기본값 | 지원 옵션 | 설명 |
wrapper | O | ".wrapper" | id 혹은 class로 지정 가능 | GNB가 삽입될 컨테이너 DOM요소 지정 | ||
isResponsive | X | FALSE | true, false | 반응형 GNB 사용여부(6.x.x 버전이상부터 사용가능) | ||
isMobile | X | FALSE | true, false | 모바일 GNB 사용여부
- 모바일 페이지(미반응형)을 위한 옵션 | ||
skin | X | "gnb-default" | "gnb-default" // 기본 버전
"gnb-default-fixed" // 상단고정
"gnb-dark-theme" //다크 버전
"gnb-dark-mix" // 다크 + 팝업 흰색 버전
"gnb-dark-mini" // 다크 + 미니 버전
"gnb-dark-mix-mini" // 다크 + 팝업 흰색 + 미니 버전
"gnb-default-mini" // 미니버전
"gnb-mobile-timeline" // 모바일버전 타임라인을위한 스킨 (isMobile이 true 상태에서 정상동작)
"{String}" // 커스텀 클래스 | GNB에 삽입될 스킨
추가적으로 커스텀 클래스를 이용해 CSS 적용가능
옵션 값 입력 시 오타 혹은 커스텀 클래스일 경우 기본적으로 "기본버전"이 적용됨 | ||
logArea | O | "stove" | "stove", "cp", 외부 공홈의 경우 {game_id} | 로그 수집을 위한 로그 영역을 지정합니다
- 외부 공홈의 경우 사용하고 있는 game_id를 문자열로 입력(센추리라면 "CAOA") | ||
stoveLogo | use | X | TRUE | true, false | 스토브 로고 노출 여부
(True 사용 권장) | |
url | X | "" | 자유로운 URL 지정가능 | 스토브 로그 클릭이 이동될 URL 지정 | ||
serviceLogo | X | "" | HTML형태의 string | 스토브 로그 우측에 서비스로고 추가
- xs 사이즈에서 스토브로고 미니사이즈 사용 (기존 isMiniSizeStoveLogo로 나오던 아이콘) | ||
widget | notification | X | TRUE | true, false | 알림 노출 여부 | |
slogan | X | TRUE | true, false | slogan 영역 노출 여부
- GNB 공통 설정(menu-setting.json)에 slogan이 활성화되어 있고 slogan 옵션이 true일 때 영역이 최종적으로 노출 | ||
languageSelect | X | TRUE | true, false | 언어 선택 노출 여부 | ||
gameListAndService | X | TRUE | true, false | 게임 및 서비스 노출여부 | ||
totalMenu | X | TRUE | true, false | 전체메뉴 노출 여부 | ||
twoDepthMenu | X | FALSE | true, false | |||
customArea | template | X | "" | HTML형태의 string | 커스텀 서비스 영역에 대체로 들어갈 템플릿 | |
EventHandler | X | "" | 함수(콜백함수로 실행됨) | 커스텀 영역에 템플릿에 적용될 함수 | ||
userMenu | myProfile | X | true | true, false | 유저메뉴 내에 프로필영역 노출여부 | |
myCash | X | true | true, false | 유저메뉴 내에 캐시영역 노출여부 | ||
note | X | true | true, false | 유저메뉴 내에 알림 영역 노출여부 | ||
myInfo | X | true | true, false | 유저메뉴 -> 서비스 목록 내에 내정보 노출여부 | ||
userGameInfo | X | TRUE | true, false | 유저메뉴 -> 서비스 목록 내에 게임정보 노출여부 | ||
timeline | X | TRUE | true, false | 유저메뉴 -> 서비스 목록 내에 타임라인 노출여부 | ||
message | X | TRUE | true, false | 유저메뉴 -> 서비스 목록 내에 쪽지 노출여부 | ||
coupon | X | TRUE | true, false | 유저메뉴 -> 서비스 목록 내에 쿠폰 노출여부 | ||
userPresentList | X | TRUE | true, false | 유저메뉴 -> 서비스 목록 내에 선물내역 노출여부 | ||
secuSetting | X | TRUE | true, false | 유저메뉴 -> 서비스 목록 내에 보안설정 노출여부 | ||
customerCenter | X | TRUE | true, false | 유저메뉴 -> 서비스 목록 내에 고객센터 노출여부 | ||
reportCenter | X | TRUE | true, false | 유저메뉴 -> 서비스 목록 내에 신고센터 노출여부 | ||
logout | X | TRUE | true, false | 유저메뉴 -> 서비스 목록 내에 로그아웃 노출여부 | ||
customArea | template | X | "" | HTML형태의 string | 유저 커스텀 영역에 들어갈 템플릿 | |
eventHandler | X | "" | 함수(콜백함수로 실행됨) | 유저 커스텀 영역에 템플릿에 적용될 함수 | ||
global | userGds | X | TRUE | true, false
*해당 값을 flase, 그리고 LOCALE 쿠키가 없는 경우 GNB 언어는 한국어로 설정됩니다.
*해당 값이 true, 그리고 LOCALE 쿠키가 없는 경우 GNB 언어는 브라우저 언어로 설정됩니다. | ||
languageCoverages | X | ['de', 'en', 'es', 'fr', 'pt', ', 'zh-cn', 'zh-tw', 'ja', 'ko', 'th', 'it'] | ['de', 'en', 'es', 'fr', 'pt', 'zh-cn', 'zh-tw', 'ja', 'ko', 'vi, 'th', 'id', 'it'] | 글로벌 언어 사용 여부 (GDS API 사용)
de: 독일어
en: 영어
es: 스페인어
fr: 프랑스어
pt: 포르투갈
zh-tw: 중국(대만)
ja: 일본
ko: 대한민국
vi: 베트남
th: 태국
id: 인도네
시아
it: 이탈리아
GDS의 미설정된 locale값이 들어올시 디폴트언어(영어)로 표기 | ||
defaultSelectedLanguage | X | 'en' | GDS 정책에 따름 | languageCoverages에 지정되지 않은 locale의 경우 표기될 언어 지정 | ||
onChangeLanguage | X | 'en' | 함수(콜백함수로 실행됨) | - 옵션 미설정 시 : 언어 변경 후 페이지 새로고침
- 옵션 설정 시 : 언어 변경 후 기본동작인 새로고침 되지 않고 옵션에 설정한 콜백함수 동작
- 콜백함수 예시
function changeLanguage(locale) { console.log(locale); } | ||
defaultLocale | nation | X | 한국기준 | GDS 정책에 따름 | "ISO 3166-1"에 따른 국가코드 | |
timezone | X | 한국기준 | GDS 정책에 따름 | timezone 정보 | ||
utc_offset | X | 한국기준 | GDS 정책에 따름 | timezone utc offset 정보 | ||
loginMethod | redirectCurrentPage | O | fasle | true, false | 로그인 및 로그아웃시 이전페이지로 리다이렉트 | |
true 설정시 현재 페이지로 이동 | ||||||
target | X | "" | "new" | "new"로 지정시 로그인 화면 새탭 열림 | ||
params | redirect_url | X | - | 자유롭게 지정 가능 | 로그인 및 로그아웃시 지정된 URL로 리다이렉트 | |
inflow_path | 서비스별 상이 | - | 자유롭게 지정 가능 | 로그인 채널 또는 서비스(로그인페이지 유입경로)
담당 PM에게 문의 | ||
game_no | 서비스별 상이 | - | 자유롭게 지정 가능 | 게임 식별자
담당 기술PM에게 문의 | ||
login_url | 서비스별 상이 | - | 자유롭게 지정 가능 | 로그인 클릭시 이동되는 도메인 설정
미 지정시 한국 멤버쉽 도메인 적용 | ||
show_play_button | 서비스별 상이 | Y | "Y", "N" | 게임 시작 동선 여부(회원 가입 시 클라이언트 실행 버튼 노출 여부) |
2) 옵션 스키마
<html>
<head>
<script charset="utf-8" src="https://static-new.onstove.com/sh-6.3.50/cp-header.js"></script>
</head>
<body>
<div> 본문 입력.</div>
<script>
var options = {
wrapper: '.wrapper',// id 혹은 class로 지정 가능isResponsive: false,// true, false : 반응형 GNB 사용여부(6.x.x 버전이상부터 사용가능)skin: 'gnb-default',// : GNB에 삽입될 스킨 기존 제공하던 디폴트, 다크, 미니, 다크 + 미니 *추가적으로 커스텀 클래스를 이용해 CSS 적용가능// "gnb-default", // 기본 버전// "gnb-default-fixed" // 상단고정// "gnb-dark-theme", // 다크 버전// "gnb-dark-mix" // 다크 + 팝업 흰색 버전// "gnb- dark-mini // 다크 + 미니 버전// "gnb-dark-mix-mini" // 다크 + 팝업 흰색 + 미니 버전// "gnb-default-mini" // 미니버전// "{String}" // 커스텀 클래스logArea: 'stove',// "stove", "cp", {game_id} : 로그 수집을 위한 로그 영역을 지정합니다. 외부 공홈의 경우 사용하고 있는 game_id를 문자열로 입력(센추리: CAOA)stoveLogo: {
use: true,// true, false : 스토브 로고 노출 여부url: '',// 자유로운 URL 지정가능 : 스토브 로그 클릭이 이동될 URL 지정
},
serviceLogo: '',// HTML형태의 string : 스토브 로그 우측에 서비스로고 추가 예시 - <h2><a href="..."><img src="..."></a></h2>widget: {
// gameList: true,twoDepthMenu: false// true, false : XS 구간에서 스토브게임, 스토어 메뉴를 하단(2depth)에 노출 여부 결정 (false일 경우 메뉴 미노출처리 됨)slogan: true,// ture, false : slogan 영역 노출 여부notification: true,// true, false : 알림 노출 여부gameListAndService: true,// true, false : 게임 및 서비스 노출여부totalMenu: true,// true, false : 전체메뉴 노출 여부languageSelect: true// true, false : 전체메뉴 > 언어설정 노출 여부customArea: {
template: '',// HTML형태의 string : 커스텀 서비스 영역에 대체로 들어갈 템플릿eventHandler: '',// 함수(콜백함수로 실행됨) : 커스텀 영역에 템플릿에 적용될 함수
},
},
userMenu: {
myProfile: true,// true, false : 유저메뉴 내에 프로필영역 노출여부myCash: true,// true, false : 유저메뉴 내에 캐시영역 노출여부note: true,// true, false : 유저메뉴 내에 알림 영역 노출여부myInfo: true,// true, false : 유저메뉴 내에 내정보 노출여부userGameInfo: true,// true, false : 유저메뉴 내에 게임정보 노출여부timeline: false,// true, false : 유저메뉴 내에 타임라인 노출여부message: false,// true, false : 유저메뉴 내에 쪽지 노출여부coupon: false,// true, false : 유저메뉴 내에 쿠폰함 노출여부userPresentList: false,// true, false : 유저메뉴 내에 선물내역 노출여부secuSetting: false,// true, false : 유저메뉴 내에 보안설정 노출여부customerCenter: true,// true, false : 유저메뉴 내에 고객센터 노출여부reportCenter: true,// true, false : 유저메뉴 내에 신고센트 노출여부logout: true,// true, false : 유저메뉴 내에 로그아웃 노출여부customArea: {
template: '',// HTML형태의 string : 유저 커스텀 영역에 들어갈 템플릿eventHandler: '',// 함수(콜백함수로 실행됨) : 유저 커스텀 영역에 템플릿에 적용될 함수
},
},
global: {
useGds: true,// true, false : GDS (글로벌) API 사용 여부languageCoverages: ['de', 'en', 'es', 'fr', 'pt', 'zh-cn', 'zh-tw', 'ja', 'ko', 'th', 'it'],// ['de', 'en', 'es', 'fr', 'pt', 'zh-tw', 'ja', 'ko', 'th'] : GDS의 미설정된 locale값이 들어올시 디폴트언어(영어)로 표기// 글로벌 언어 사용 여부 (GDS API 사용)// de: 독일어// en: 영어// es: 스페인어// fr: 프랑스어// pt: 포르투갈// zh-tw: 중국(대만)// ja: 일본// ko: 대한민국// vi: 베트남// th: 태국// id: 인도네시아// it: 이탈리아defaultSelectedLanguage: 'en',// GDS 정책에 따름 : languageCoverages에 지정되지 않은 locale의 경우 표기될 언어 지정onChangeLanguage: null,// 함수(콜백함수로 실행됨) : 언어선택 이후 내부동작 이외에 별도의 기능을 실행을 원할경우 함수(선택된 언어는 인자로 받음)
},
defaultLocale: {
nation: undefined,// GDS 정책에 따름 : 'ISO 3166-1'에 따른 국가코드timezone: undefined,// GDS 정책에 따름 : timezone 정보utc_offset: undefined,// GDS 정책에 따름 : timezone utc offset 정보
},
loginMethod: {
redirectCurrentPage: false,// true, false : 로그인 및 로그아웃시 이전페이지로 리다이렉트(true 설정시 현재 페이지로 이동)target: '',// 'new' : 'new'로 지정시 로그인 화면 새탭 열림params: {
redirect_url : null,// 자유롭게 지정 가능 : 로그인 및 로그아웃시 지정된 URL로 리다이렉트
inflow_path : null,// 자유롭게 지정 가능 : 로그인 채널 또는 서비스(로그인페이지 유입경로)
game_no : null,// 자유롭게 지정 가능 : 게임 식별자
login_url : '',// 자유롭게 지정 가능 : 로그인 클릭시 이동되는 도메인 설정, 미지정시 한국 멤버쉽 도메인 적용
show_play_button : 'Y',// 자유롭게 지정 가능 : 게임 시작 동선 여부(회원 가입 시 클라이언트 실행 버튼 노출 여부)
},
windowTitle: undefined,
option: undefined,
}
};
document.addEventListener('DOMContentLoaded', () => {
new window.cp.Header(options).render();
});
</script>
</body>
</html>
HTML
복사
