Initial commit: 교육 프로젝트 배포
This commit is contained in:
송대일
+637
@@ -0,0 +1,637 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/../bbs/auth.php';
|
||||
edu_require_login();
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<?php include(__DIR__ . "/_include/_head.php") ?>
|
||||
<link rel="stylesheet" type="text/css" href="/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>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
function PG_set_suggest_detail(el) {
|
||||
// 1. 데이터 가져오기 (li 태그의 data- 속성들)
|
||||
const v_date = el.dataset.offerDate || '';
|
||||
const v_reason = el.dataset.offerReason || '';
|
||||
const v_return = el.dataset.offerReturn || '';
|
||||
|
||||
// 2. 기본 데이터 채워넣기
|
||||
document.getElementById('suggestDetailHeading').textContent = v_date;
|
||||
document.getElementById('suggestDetailReason').textContent = v_reason;
|
||||
|
||||
// 3. v_return 값 존재 여부에 따른 '게시 불가 사유' 영역 제어
|
||||
const bodySection = document.querySelector('.suggest-detail-body');
|
||||
const rejectField = document.getElementById('suggestDetailReject');
|
||||
|
||||
if (v_return && v_return.trim() !== '') {
|
||||
// 값이 존재할 때
|
||||
rejectField.textContent = v_return;
|
||||
bodySection.style.display = 'block';
|
||||
} else {
|
||||
// 값이 없을 때 (초기화 및 숨김)
|
||||
rejectField.textContent = '';
|
||||
bodySection.style.display = 'none';
|
||||
}
|
||||
|
||||
// 4. 모달 보이게 하기
|
||||
const modal = document.getElementById('suggestDetailModal');
|
||||
modal.hidden = false;
|
||||
}
|
||||
|
||||
//방법 1: 독립적인 함수로 만들기 (가장 추천)
|
||||
function closeSuggestDetail() {
|
||||
const modal = document.getElementById('suggestDetailModal');
|
||||
modal.hidden = true;
|
||||
|
||||
// 데이터 초기화 (필요시)
|
||||
document.getElementById('suggestDetailHeading').textContent = '';
|
||||
document.getElementById('suggestDetailReason').textContent = '';
|
||||
document.getElementById('suggestDetailReject').textContent = '';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<?php
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_01.php';//개인정보
|
||||
require_once __DIR__ . '/../bbs/mypage_init_data_02.php';//제안하기 초기정보
|
||||
?>
|
||||
<?php
|
||||
$profileData = $profileData ?? [];
|
||||
$profileBadges = $profileBadges ?? [];
|
||||
|
||||
$profileName = $profileData['name'] ?? '사용자';
|
||||
$profileRankName = $profileData['rank_name'] ?? '';
|
||||
$profileWorkingComp = $profileData['working_comp'] ?? '';
|
||||
$profileBelongCompCd = $profileData['belong_comp_code'] ?? '';//소속회사 코드
|
||||
$profileBelongComp = $profileData['belong_comp_name'] ?? '';//소속회사 명
|
||||
$profileLevelLabel = $profileData['learning_level'] ?? 'Rookie';
|
||||
$profileLevelClass = $profileData['level_class'] ?? 'rookie';
|
||||
$profileLevelIcon = $profileData['level_icon'] ?? '/img/ico/ico_level_rookie.svg';
|
||||
$profileTotalMinutes = (int) ($profileData['total_minutes'] ?? 0);
|
||||
$profileImage = $profileData['profile_image'] ?? '/img/ico/ico_user.svg';
|
||||
|
||||
$badgeHat = $profileBadges['hat'] ?? null;
|
||||
$badgePencil = $profileBadges['pencil'] ?? null;
|
||||
$badgePick = $profileBadges['pick'] ?? null;
|
||||
?>
|
||||
<?php
|
||||
/* 제안하기 */
|
||||
$offerHistory = $offerHistory ?? [];
|
||||
$offerDefaultTypeCode = $offerDefaultTypeCode ?? 'OF10001';
|
||||
$offerDefaultStatusCode = $offerDefaultStatusCode ?? 'OF10001';
|
||||
?>
|
||||
|
||||
<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" id="profile-upload-trigger" style="cursor:pointer;"
|
||||
title="이미지를 클릭하시면 프로필사진 변경이 가능합니다">
|
||||
<div class="profile-photo-inner">
|
||||
<img id="profile-image" src="<?= $profileImage ?>">
|
||||
</div>
|
||||
<span class="ico-photo">
|
||||
<img src="/img/ico/ico_camera.svg" alt="카메라" />
|
||||
</span>
|
||||
</div>
|
||||
<input type="file" id="profile-file-input" accept="image/png, image/jpeg" style="display:none;">
|
||||
|
||||
<!-- PC 전용 프로필 배지 아이콘 -->
|
||||
<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="<?= 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($profileBelongComp, 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 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
|
||||
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="/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 style="cursor: pointer;" title="클릭 시 상세결과를 볼 수 있습니다." onclick="PG_set_suggest_detail(this);"
|
||||
data-offer-date="<?= htmlspecialchars($row['created_at_dot'] ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
data-offer-reason="<?= htmlspecialchars($row['reason'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
data-offer-return="<?= htmlspecialchars($row['reason_return'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>"
|
||||
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>
|
||||
|
||||
<!-- 제안 상세 레이어 -->
|
||||
<div class="suggest-detail-modal" id="suggestDetailModal" role="dialog" aria-modal="true"
|
||||
aria-labelledby="suggestDetailHeading" hidden>
|
||||
<div class="suggest-detail-panel">
|
||||
<div class="suggest-detail-header">
|
||||
<div class="suggest-detail-title">
|
||||
<p class="suggest-detail-heading" id="suggestDetailHeading"></p>
|
||||
<button onclick="closeSuggestDetail();" type="button" class="suggest-detail-close"
|
||||
id="suggestDetailClose" aria-label="닫기">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<dl class="suggest-detail-meta">
|
||||
<!-- <dt><span id="suggestDetailDate" class="suggest-detail-date"></span>추천 이유</dt> -->
|
||||
<dd><span id="suggestDetailDate" class=""></span><b>추천이유</b></dd>
|
||||
<dd id="suggestDetailReason"></dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="suggest-detail-body">
|
||||
<p class="suggest-detail-body-title" style="color:#cf6800;">게시불가 사유</p>
|
||||
<p class="suggest-detail-reject" id="suggestDetailReject"></p>
|
||||
</div>
|
||||
</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;"></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">개</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></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">개</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></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">개</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></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">분</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></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">분</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></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">분</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"></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"></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"></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" id="mypage-completed-list"></ul>
|
||||
</section>
|
||||
<!-- 저장한 콘텐츠 -->
|
||||
<section class="content-section content-panel" id="panel-saved" role="tabpanel"
|
||||
aria-labelledby="tab-saved" data-panel="saved">
|
||||
<ul class="content-grid" id="mypage-saved-list"></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="/js/learning/config.js" defer></script>
|
||||
<script src="/js/learning/markers.js" defer></script>
|
||||
<script src="/js/learning/modal.js" defer></script>
|
||||
<script src="/js/bridges/learning-modal-bridge.js" defer></script>
|
||||
<script>
|
||||
window.puzzleConfig = {
|
||||
...(window.puzzleConfig || {}),
|
||||
COMPLETION_MODE: 'COMPLETED',
|
||||
CURRENT_MEMBER_ID: <?php echo json_encode((string) ($_SESSION['member_id'] ?? ''), JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP); ?>,
|
||||
};
|
||||
</script>
|
||||
<script src="/js/puzzle-onboarding.js" defer></script>
|
||||
<script src="/js/bridges/onboarding-modal-bridge.js" defer></script>
|
||||
<script src="/js/main/Videomodalmanager.js" defer></script>
|
||||
<script src="/js/mypage.js" defer></script>
|
||||
<!-- ERP기획 : 26.03.20 moon -->
|
||||
<script src="/js/apply_page/add_mypage.js?v=321321" defer></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user