Initial commit: 교육 프로젝트 배포
This commit is contained in:
송대일
@@ -0,0 +1,571 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<link rel="stylesheet" type="text/css" href="/edu/css/main.css" />
|
||||
|
||||
<style>
|
||||
/* 마이페이지 콘텐츠 카드 삭제 버튼 숨김
|
||||
- 정책상 기능은 유지하되, 화면에는 노출하지 않는다. */
|
||||
.mypage .btn-remove-card {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 마이페이지 콘텐츠 빈 상태 문구 */
|
||||
.mypage .content-empty {
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* 마이페이지 한줄소감
|
||||
- 사용자명/프로필 이미지 영역 제거 후 레이아웃 최소 보정 */
|
||||
.mypage .review-comment {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mypage .review-comment-text {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mypage .review-comment-text strong {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 한줄소감 빈 상태 문구 */
|
||||
.mypage .review-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<?php
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_01.php';
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_02.php';
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_05.php';
|
||||
?>
|
||||
<?php
|
||||
$profileData = $profileData ?? [];
|
||||
$profileBadges = $profileBadges ?? [];
|
||||
|
||||
$profileName = $profileData['name'] ?? '사용자';
|
||||
$profileRankName = $profileData['rank_name'] ?? '';
|
||||
$profileWorkingComp = $profileData['working_comp'] ?? '';
|
||||
$profileLevelLabel = $profileData['learning_level'] ?? 'Rookie';
|
||||
$profileLevelClass = $profileData['level_class'] ?? 'rookie';
|
||||
$profileLevelIcon = $profileData['level_icon'] ?? '/edu/img/ico/ico_level_rookie.svg';
|
||||
$profileTotalMinutes = (int)($profileData['total_minutes'] ?? 0);
|
||||
$profileImage = $profileData['profile_image'] ?? '/edu/img/insight/profile.png';
|
||||
|
||||
$badgeHat = $profileBadges['hat'] ?? null;
|
||||
$badgePencil = $profileBadges['pencil'] ?? null;
|
||||
$badgePick = $profileBadges['pick'] ?? null;
|
||||
?>
|
||||
<?php
|
||||
/* 제안하기 */
|
||||
$offerHistory = $offerHistory ?? [];
|
||||
$offerDefaultTypeCode = $offerDefaultTypeCode ?? 'OF10001';
|
||||
$offerDefaultStatusCode = $offerDefaultStatusCode ?? 'OF10002';
|
||||
?>
|
||||
<body>
|
||||
<!--
|
||||
========================================
|
||||
마이페이지 레이아웃 구조
|
||||
========================================
|
||||
[좌측] aside.mypage-sidebar : 프로필 + 컨텐츠 제안
|
||||
[우측] main.mypage-main : 학습 활동 + 시청/저장/소감 목록
|
||||
-->
|
||||
<div class="wrap mypage">
|
||||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||||
<div class="container">
|
||||
<div class="mypage-inner">
|
||||
<!--
|
||||
좌측 사이드바: 프로필 카드 + 컨텐츠 제안 폼
|
||||
수정 시: profile-card 내 이름, 직급, 학습레벨 등 변경
|
||||
-->
|
||||
<aside class="mypage-sidebar">
|
||||
<h2 class="mypage-title">마이페이지</h2>
|
||||
<div class="profile-area">
|
||||
<div class="profile-card">
|
||||
<div class="profile-photo-wrap">
|
||||
<div class="profile-photo">
|
||||
<!--
|
||||
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필" />
|
||||
-->
|
||||
<img src="<?= htmlspecialchars($profileImage, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($profileName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?> 프로필" />
|
||||
|
||||
</div>
|
||||
<!-- PC 전용 프로필 배지 아이콘 -->
|
||||
<!--
|
||||
<div class="profile-photo-badges" aria-hidden="true">
|
||||
<span class="badge-item badge-item-hat">
|
||||
<img src="/edu/img/mypage/ico_school.png" alt="" />
|
||||
</span>
|
||||
<span class="badge-item badge-item-pencil">
|
||||
<img src="/edu/img/mypage/ico_pencil.png" alt="" />
|
||||
</span>
|
||||
<span class="badge-item badge-item-pick">
|
||||
<img src="/edu/img/mypage/ico_pick_2.png" alt="" />
|
||||
</span>
|
||||
</div>
|
||||
-->
|
||||
<div class="profile-photo-badges" aria-hidden="true">
|
||||
<?php if (!empty($badgeHat)): ?>
|
||||
<span class="badge-item badge-item-hat">
|
||||
<img src="<?= htmlspecialchars($badgeHat['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgeHat['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($badgePencil)): ?>
|
||||
<span class="badge-item badge-item-pencil">
|
||||
<img src="<?= htmlspecialchars($badgePencil['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgePencil['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($badgePick)): ?>
|
||||
<span class="badge-item badge-item-pick">
|
||||
<img src="<?= htmlspecialchars($badgePick['img'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="<?= htmlspecialchars($badgePick['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" />
|
||||
</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!--
|
||||
<p class="profile-name">
|
||||
<em>
|
||||
<span class="ico-level">
|
||||
<img src="/edu/img/ico/ico_level_master.svg" alt="학습레벨" />
|
||||
</span>
|
||||
홍길동
|
||||
</em>
|
||||
<span>선임연구원</span>
|
||||
</p>
|
||||
<p class="profile-role">바론컨설턴트</p>
|
||||
-->
|
||||
<p class="profile-name">
|
||||
<em>
|
||||
<span class="ico-level">
|
||||
<img src="<?= htmlspecialchars($profileLevelIcon, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" alt="학습레벨" />
|
||||
</span>
|
||||
<?= htmlspecialchars($profileName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</em>
|
||||
<span><?= htmlspecialchars($profileRankName, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></span>
|
||||
</p>
|
||||
<p class="profile-role"><?= htmlspecialchars($profileWorkingComp, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?></p>
|
||||
|
||||
<!-- badge-level master일때만 클래스명 추가 -->
|
||||
<!-- <div class="badge-level master"> -->
|
||||
<div
|
||||
class="badge-level <?= htmlspecialchars($profileLevelClass, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
id="mypage-level-box"
|
||||
>
|
||||
|
||||
<span class="badge-level-title">학습레벨</span>
|
||||
<!--
|
||||
<span class="badge-level-value">
|
||||
<i class="ico-level">
|
||||
<img src="/edu/img/ico/ico_level_master.svg" alt="학습레벨" />
|
||||
</i>
|
||||
Master
|
||||
</span>
|
||||
-->
|
||||
<span class="badge-level-value">
|
||||
<i class="ico-level">
|
||||
<img
|
||||
id="mypage-level-icon"
|
||||
src="<?= htmlspecialchars($profileLevelIcon, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
alt="학습레벨"
|
||||
/>
|
||||
</i>
|
||||
<span id="mypage-level-label">
|
||||
<?= htmlspecialchars($profileLevelLabel, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="ico-info-wrap">
|
||||
<i class="ico-info" aria-describedby="level-tooltip"></i>
|
||||
<span class="ico-info-tooltip" role="tooltip" id="level-tooltip">
|
||||
<span class="ico-info-tooltip-desc">누적된 학습 시간에 따라<br>4단계의 레벨이<br>자동 설정됩니다.</span>
|
||||
<ul class="ico-info-tooltip-list">
|
||||
<li><em>Master</em><span>40시간 이상</span></li>
|
||||
<li><em>Elite</em><span>20 ~ 40시간</span></li>
|
||||
<li><em>Learner</em><span>8 ~ 20시간</span></li>
|
||||
<li><em>Rookie</em><span>0 ~ 8시간</span></li>
|
||||
</ul>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- MOBILE: 총 학습시간 버튼 (모바일에서만 표시, 클릭 시 활동 모달 오픈) -->
|
||||
<!--
|
||||
<button class="mobile-total-time-btn" type="button" id="mobileActivityBtn" aria-label="총 학습시간 상세보기">
|
||||
<span>총 학습시간 <strong>340</strong>분</span> <span class="mobile-total-time-chevron" aria-hidden="true"></span>
|
||||
</button>
|
||||
-->
|
||||
<button class="mobile-total-time-btn" type="button" id="mobileActivityBtn" aria-label="총 학습시간 상세보기">
|
||||
<span>총 학습시간 <strong id="mobile-mypage-total-minutes"><?= number_format($profileTotalMinutes) ?></strong>분</span>
|
||||
<span class="mobile-total-time-chevron" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 컨텐츠 제안하기 Start -->
|
||||
<section class="suggest-section">
|
||||
<h3 class="suggest-title">컨텐츠 제안하기</h3>
|
||||
|
||||
<form id="offerForm" method="post" action="/edu/ajax/insert_offer.php">
|
||||
<input type="hidden" name="type_code" value="<?= htmlspecialchars($offerDefaultTypeCode, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">
|
||||
<input type="hidden" name="status_code" value="<?= htmlspecialchars($offerDefaultStatusCode, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>">
|
||||
|
||||
<div class="suggest-fields">
|
||||
<input
|
||||
type="url"
|
||||
class="suggest-input suggest-url"
|
||||
placeholder="URL"
|
||||
id="suggest-url"
|
||||
name="reference_url"
|
||||
/>
|
||||
<textarea
|
||||
class="suggest-input suggest-reason"
|
||||
placeholder="추천이유"
|
||||
rows="4"
|
||||
id="suggest-reason"
|
||||
name="reason"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary btn-full" disabled>
|
||||
제안 보내기
|
||||
<i class="ico-arrow"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="suggest-status accordion">
|
||||
<button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="suggest-status-content">
|
||||
<span class="accordion-title">제안현황</span>
|
||||
<i class="ico-chevron" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
||||
<div id="suggest-status-content" class="accordion-content" hidden>
|
||||
<ul class="suggest-status-list">
|
||||
<?php if (!empty($offerHistory)): ?>
|
||||
<?php foreach ($offerHistory as $row): ?>
|
||||
<li
|
||||
class="<?= !empty($row['is_consider']) ? 'consider' : '' ?>"
|
||||
data-offer-id="<?= htmlspecialchars($row['offer_id'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
>
|
||||
<span class="suggest-date">
|
||||
<?= htmlspecialchars($row['created_at_dot'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
|
||||
<?php if (!empty($row['is_consider'])): ?>
|
||||
<span class="suggest-dots"></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<span class="suggest-state">
|
||||
<?= htmlspecialchars($row['status_name'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
||||
</span>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
<?php else: ?>
|
||||
<li>
|
||||
<span class="suggest-date">-</span>
|
||||
<span class="suggest-state">등록된 제안이 없습니다.</span>
|
||||
</li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 컨텐츠 제안하기 End -->
|
||||
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<!--
|
||||
우측 메인: 학습 활동 통계 + 시청/저장/소감 목록
|
||||
학습 시간 수정: total-time-text의 strong, gauge-fill의 width 값
|
||||
-->
|
||||
<main class="mypage-main">
|
||||
<section class="activity-section">
|
||||
<h3 class="section-title">
|
||||
<i class="ico-pin"></i>
|
||||
나의 학습 활동
|
||||
<div class="select-box">
|
||||
<label class="year-badge" style="display: none;">(2026년 기준)</label>
|
||||
<select id="mypage-year-select">
|
||||
<option>년</option>
|
||||
</select>
|
||||
</div>
|
||||
</h3>
|
||||
<div class="total-time-area">
|
||||
<div class="total-time-inner">
|
||||
<div class="total-time">
|
||||
<p class="total-time-text">
|
||||
총 학습시간 <strong id="mypage-total-minutes"></strong>분
|
||||
</p>
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" id="mypage-total-gauge" style="width:50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="total-average">전체평균 <em id="mypage-avg-minutes">0</em>분</span>
|
||||
</div>
|
||||
|
||||
<ul class="activity-list">
|
||||
<li class="activity-item gauge" data-category="CA10001">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">마이클래스</span>
|
||||
<span class="activity-value"><em></em>분 (0%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 33%"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">6개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item gauge" data-category="CA10002">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">온보딩</span>
|
||||
<span class="activity-value"><em>110</em>분 (80%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 80%"></div>
|
||||
<p class="activity-note" style="display:none;">
|
||||
<span class="activity-note-num">①</span> 필수 시청: <span class="onboarding-due-date">26.01.14</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">10개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item gauge" data-category="CA10003">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">법정교육</span>
|
||||
<span class="activity-value"><em>30</em>분 (20%)</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 20%"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">6개</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10004">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">리더십</span>
|
||||
<span class="activity-value"><em>60</em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 40%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">240분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10005">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">인사이트</span>
|
||||
<span class="activity-value"><em>43</em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 60%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">90분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="activity-item tag" data-category="CA10006">
|
||||
<div class="activity-head">
|
||||
<span class="activity-label">비즈트렌드</span>
|
||||
<span class="activity-value"><em>23</em>분</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 20%;"></div>
|
||||
</div>
|
||||
<div class="gauge-value">
|
||||
<span class="gauge-start">0</span>
|
||||
<span class="gauge-separator">·</span>
|
||||
<span class="gauge-end">80분</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="mylist-area">
|
||||
<!-- MOBILE: 2탭 네비게이션 (시청완료 <> 슬라이더 + 한줄소감) -->
|
||||
<div class="mobile-list-tab-header">
|
||||
<button class="mobile-list-tab active" type="button" id="mobileTabContent" data-mobile-tab="content" aria-selected="true">
|
||||
<span class="mobile-tab-arrow mobile-tab-prev" aria-label="이전" aria-hidden="true">‹</span>
|
||||
<span class="mobile-tab-label">시청완료</span>
|
||||
<span class="mobile-tab-arrow mobile-tab-next" aria-label="다음" aria-hidden="true">›</span>
|
||||
</button>
|
||||
<button class="mobile-list-tab" type="button" id="mobileTabReview" data-mobile-tab="review" aria-selected="false">
|
||||
<span class="ico-mobile-pencil" aria-hidden="true"></span>
|
||||
한줄 소감
|
||||
</button>
|
||||
</div>
|
||||
<!-- 콘텐츠 탭 영역 -->
|
||||
<div class="content-tab-wrap">
|
||||
<div class="content-tabs" role="tablist">
|
||||
<button type="button" class="content-tab active" role="tab" aria-selected="true" aria-controls="panel-watching" id="tab-watching" data-tab="watching">
|
||||
시청중인 콘텐츠 <span class="count">15</span>
|
||||
</button>
|
||||
<button type="button" class="content-tab" role="tab" aria-selected="false" aria-controls="panel-completed" id="tab-completed" data-tab="completed">
|
||||
시청완료 콘텐츠 <span class="count">15</span>
|
||||
</button>
|
||||
<button type="button" class="content-tab" role="tab" aria-selected="false" aria-controls="panel-saved" id="tab-saved" data-tab="saved">
|
||||
저장한 콘텐츠 <span class="count">3</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="content-panels">
|
||||
<!-- 시청중인 콘텐츠 -->
|
||||
<section class="content-section content-panel active" id="panel-watching" role="tabpanel" aria-labelledby="tab-watching" data-panel="watching">
|
||||
<ul class="content-grid" id="mypage-watching-list"></ul>
|
||||
</section>
|
||||
|
||||
<!-- 시청완료 콘텐츠 -->
|
||||
<section class="content-section content-panel" id="panel-completed" role="tabpanel" aria-labelledby="tab-completed" data-panel="completed">
|
||||
<ul class="content-grid"></ul>
|
||||
</section>
|
||||
|
||||
<!-- 저장한 콘텐츠 -->
|
||||
<section class="content-section content-panel" id="panel-saved" role="tabpanel" aria-labelledby="tab-saved" data-panel="saved">
|
||||
<ul class="content-grid"></ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 한줄 소감 -->
|
||||
<section class="review-section">
|
||||
<h3 class="section-title">
|
||||
<i class="ico-pin-list" aria-hidden="true"></i>
|
||||
한줄 소감 <span class="count" id="mypage-review-count">0</span>
|
||||
</h3>
|
||||
|
||||
<ul class="review-list" id="mypage-review-list"></ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- MOBILE: 하단 목록 카운트 + 컨텐츠 제안 바 (모바일에서만 표시) -->
|
||||
<nav class="mobile-bottom-nav" aria-label="모바일 콘텐츠 탐색">
|
||||
<button class="mobile-nav-item mobile-nav-item--suggest" type="button" id="mobileSuggestBtn">
|
||||
<span class="mobile-nav-ico mobile-nav-ico--send" aria-hidden="true"></span>
|
||||
<span class="mobile-nav-label">컨텐츠 제안하기</span>
|
||||
<span class="mobile-nav-chevron mobile-nav-chevron--right" aria-hidden="true"></span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // container -->
|
||||
|
||||
<!-- MOBILE: 학습 활동 팝업 모달 -->
|
||||
<div class="mobile-activity-modal" id="mobileActivityModal" role="dialog" aria-modal="true" aria-labelledby="mobileModalTitle" hidden>
|
||||
<div class="modal-backdrop" id="mobileActivityBackdrop"></div>
|
||||
<div class="modal-panel">
|
||||
<div class="modal-header">
|
||||
<p class="modal-title" id="mobileModalTitle">
|
||||
<span class="titile-label">총 학습시간</span> <strong>340</strong><span>분</span></p>
|
||||
<div class="modal-gauge-wrap">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" style="width: 63%"></div>
|
||||
</div>
|
||||
<span class="modal-average-badge">전체 평균</span>
|
||||
</div>
|
||||
<button class="modal-close-btn" type="button" id="mobileActivityClose" aria-label="닫기">✕</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul class="modal-activity-list">
|
||||
<li>
|
||||
<span class="modal-label">마이클래스</span>
|
||||
<span class="modal-value modal-value--green"><em>74</em>분(33%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">온보딩 <span class="modal-required"><i class="ico-info-xs" aria-hidden="true"></i> 필수 시청 <em>26.01.14</em></span></span>
|
||||
<span class="modal-value modal-value--green"><em>110</em>분(80%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">법정교육 <span class="modal-required"><i class="ico-info-xs" aria-hidden="true"></i> 필수 시청 <em>26.01.14</em></span></span>
|
||||
<span class="modal-value modal-value--green"><em>30</em>분(20%)</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">리더십</span>
|
||||
<span class="modal-value modal-value--brown"><em>60</em>분</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">인사이트</span>
|
||||
<span class="modal-value modal-value--brown"><em>43</em>분</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="modal-label">비즈트렌드</span>
|
||||
<span class="modal-value modal-value--brown"><em>23</em>분</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MOBILE: 컨텐츠 제안 바텀시트 -->
|
||||
<div class="mobile-suggest-sheet" id="mobileSuggestSheet" role="dialog" aria-modal="true" hidden>
|
||||
<div class="sheet-backdrop" id="mobileSuggestBackdrop"></div>
|
||||
<div class="sheet-panel">
|
||||
<div class="sheet-header">
|
||||
<span class="sheet-header-ico" aria-hidden="true"></span>
|
||||
<p class="sheet-title">컨텐츠 제안하기</p>
|
||||
</div>
|
||||
<div class="sheet-body">
|
||||
<div class="suggest-fields">
|
||||
<input type="url" class="suggest-input sheet-url" placeholder="URL" id="sheet-url" />
|
||||
<textarea class="suggest-input sheet-reason" placeholder="추천이유" rows="5" id="sheet-reason"></textarea>
|
||||
</div>
|
||||
<button type="button" class="btn-sheet-confirm" id="btnSheetConfirm" disabled>확인</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 마이페이지 전용 스크립트: 제안 폼 버튼 활성화, 제안현황 아코디언 -->
|
||||
<script src="/edu/js/mypage.js" defer></script>
|
||||
<!-- ERP기획 : 26.03.20 moon -->
|
||||
<script src="/edu/js/apply_page/add_mypage.js" defer></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user