119 lines
3.3 KiB
PHP
119 lines
3.3 KiB
PHP
<div class="guide-wrap">
|
|
<svg class="guide-svg" width="100%" height="100%">
|
|
<defs>
|
|
<mask id="guide-mask">
|
|
<rect x="0" y="0" width="100%" height="100%" fill="white" />
|
|
<path id="guide-cutout-path" fill="black" />
|
|
<path id="guide-arc-stroke-mask-path" fill="black" />
|
|
</mask>
|
|
</defs>
|
|
<rect
|
|
x="0"
|
|
y="0"
|
|
width="100%"
|
|
height="100%"
|
|
fill="rgba(0, 0, 0, 0.5)"
|
|
mask="url(#guide-mask)"
|
|
/>
|
|
<path
|
|
id="guide-stroke-path"
|
|
fill="none"
|
|
stroke="#FFF"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-dasharray="4"
|
|
/>
|
|
<path
|
|
id="guide-arc-ellipse-stroke-path"
|
|
fill="none"
|
|
stroke="#FFF"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-dasharray="4"
|
|
/>
|
|
<!-- 요소 간 연결 라인 -->
|
|
<g id="guide-element-connection-lines" stroke="#FFF" stroke-width="1" stroke-dasharray="0" fill="none" />
|
|
</svg>
|
|
|
|
<div class="guide-mask nav"></div>
|
|
</div>
|
|
|
|
<!-- JS 파일 import -->
|
|
<script src="/js/main/MultiGuide.js"></script>
|
|
<script>
|
|
// 전역 변수로 선언하여 다른 스크립트에서도 사용 가능하도록 함
|
|
window.guideTargets = window.guideTargets || [
|
|
{
|
|
selector: ".guide-mask.nav",
|
|
label: "메뉴",
|
|
description: "마이클래스 : 분기별 업데이트 되는 권장 학습\n온보딩/법정교육 : 정해진 기간 내 이수해야 하는 필수 교육\n리더십/인사이트/비즈트렌드 : 지속적으로 업데이트 되는 자율 학습",
|
|
position: "left bottom",
|
|
class:"menu"
|
|
},
|
|
{
|
|
selector: ".input-group",
|
|
label: "검색",
|
|
description: "2개 단어 이상 검색 시 띄어쓰기로 구분해 검색",
|
|
position: "left bottom",
|
|
class:"search"
|
|
},
|
|
{
|
|
selector: ".alerts",
|
|
label: "공지사항",
|
|
description: "중요한 \n공지·알림 확인",
|
|
position: "right bottom",
|
|
class:"notice"
|
|
},
|
|
{
|
|
selector: ".mypage",
|
|
label: "마이페이지",
|
|
description: "나의 학습현황·최근 시청·저장한 콘텐츠·한줄소감을 한눈에 확인",
|
|
position: "left bottom",
|
|
class:"mypage"
|
|
},
|
|
{
|
|
selector: "#gauge",
|
|
useGaugeArc: true,
|
|
gaugeSize: 832,
|
|
gaugeStrokeWidth: 31,
|
|
gaugePadding: 20,
|
|
padding: 0,
|
|
startAngle: 180,
|
|
endAngle: 360,
|
|
label: "내 학습 vs 회사 평균",
|
|
description: "내 학습 정도를 회사 평균과 한눈에 비교",
|
|
position: "top center",
|
|
class:"learning"
|
|
},
|
|
{
|
|
selector: ".keyword-area",
|
|
label: "나의 관심 키워드 + 회사추천 키워드",
|
|
description: "키워드 버튼으로 ON/OFF, 나의 관심 키워드 편집가능",
|
|
position: "left bottom",
|
|
class:"interest"
|
|
},
|
|
{
|
|
selector: "#nextBtn",
|
|
label: "컨텐츠 변경",
|
|
description: "버튼을 클릭하여 다음 컨텐츠 확인",
|
|
position: "right bottom",
|
|
class:"change"
|
|
},
|
|
// 🔥 키워드 요소 - 마스크만 (label 없음)
|
|
{
|
|
selector: ".video-card:nth-child(3) .key-badge:first-child",
|
|
padding: 4,
|
|
borderRadius: 4,
|
|
},
|
|
{
|
|
selector: ".video-card:nth-child(5) .key-badge:first-child",
|
|
padding: 4,
|
|
borderRadius: 4,
|
|
},
|
|
];
|
|
// 가이드 초기화
|
|
if (window.initMultiGuide) {
|
|
window.initMultiGuide(window.guideTargets);
|
|
}
|
|
</script> |