1396 lines
76 KiB
PHP
1396 lines
76 KiB
PHP
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<?php include(__DIR__ . "/_include/_head.php") ?>
|
|
<link rel="stylesheet" type="text/css" href="/edu/css/main.css" />
|
|
</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') ?>">
|
|
|
|
<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 src="<?= htmlspecialchars($profileLevelIcon, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>" alt="학습레벨" />
|
|
</i>
|
|
<?= htmlspecialchars($profileLevelLabel, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8') ?>
|
|
</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>
|
|
|
|
|
|
|
|
|
|
<!-- 컨텐츠 제안하기
|
|
<section class="suggest-section">
|
|
<h3 class="suggest-title">컨텐츠 제안하기</h3>
|
|
<div class="suggest-fields">
|
|
<input type="url" class="suggest-input suggest-url" placeholder="URL" id="suggest-url" />
|
|
<textarea class="suggest-input suggest-reason" placeholder="추천이유" rows="4" id="suggest-reason"></textarea>
|
|
</div>
|
|
<button type="button" class="btn-primary btn-full" disabled>
|
|
제안 보내기
|
|
<i class="ico-arrow"></i>
|
|
</button>
|
|
-->
|
|
<!-- 아코디언: 클릭 시 제안현황 목록 펼침/접힘 (mypage.js에서 동작) -->
|
|
<!--
|
|
<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">
|
|
<li class="consider">
|
|
<span class="suggest-date">26.03.01</span>
|
|
<span class="suggest-dots"></span>
|
|
<span class="suggest-state">검토중</span>
|
|
</li>
|
|
<li>
|
|
<span class="suggest-date">26.02.25</span>
|
|
<span class="suggest-state">게시완료</span>
|
|
</li>
|
|
<li>
|
|
<span class="suggest-date">26.01.14</span>
|
|
<span class="suggest-state">게시완료</span>
|
|
</li>
|
|
<li>
|
|
<span class="suggest-date">26.01.01</span>
|
|
<span class="suggest-state">게시완료</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
-->
|
|
|
|
|
|
<!-- 컨텐츠 제안하기 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>2026년</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">340</strong>분
|
|
</p>
|
|
<div class="gauge-bar">
|
|
<div class="gauge-fill" id="mypage-total-gauge" style="width: 63%"></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>74</em>분 (33%)</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"><span class="activity-note-num">①</span> 필수 시청: 26.01.14</p>
|
|
-->
|
|
<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">
|
|
<!-- 시청중인 콘텐츠: 진행률은 gauge-fill의 style="width: N%" 에서 조정 -->
|
|
<section class="content-section content-panel active" id="panel-watching" role="tabpanel" aria-labelledby="tab-watching" data-panel="watching">
|
|
<ul class="content-grid">
|
|
<!-- 시청중: 진행률 gauge-fill style="width: N%" -->
|
|
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_1" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_1" title="좋아요">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_01.png" alt="어색한 침묵 스몰토크" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 93%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">어색한 침묵 스몰토크</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">소통</span>
|
|
<span class="tag">협업</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_2" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_2" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_02.png" alt="한국에서 가장 유명한 회계사의 조언" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 33%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">한국에서 가장 유명한 회계사의 조언</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">소통</span>
|
|
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_3" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_3" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_03.png" alt="무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하는 법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 83%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하..</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">협업</span>
|
|
<span class="tag">웰니스</span>
|
|
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_4" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_4" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_04.png" alt="꼰대가 되지 않고 건설적인 피드백을 하는 법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 63%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">꼰대가 되지 않고 건설적인 피드백을 하는 법</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">마인드셋</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_5" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_5" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_05.png" alt="프로와 아마추어를 가르는 차이점" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 13%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">프로와 아마추어를 가르는 차이점!</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">자기개발</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_6" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_6" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_06.png" alt="트럼프 반도체 관세, 한국 기업" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 23%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag biz">비즈트렌드</span>
|
|
<strong class="item-title">트럼프 반도체 관세…한국 기업 불똥?</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">금리</span>
|
|
<span class="tag">증시</span>
|
|
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_7" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_7" title="좋아요">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_01.png" alt="어색한 침묵 스몰토크" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 93%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">어색한 침묵 스몰토크</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">소통</span>
|
|
<span class="tag">협업</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_8" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_8" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_02.png" alt="한국에서 가장 유명한 회계사의 조언" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 33%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">한국에서 가장 유명한 회계사의 조언</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">소통</span>
|
|
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_9" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_9" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_03.png" alt="무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하는 법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 83%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하..</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">협업</span>
|
|
<span class="tag">웰니스</span>
|
|
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_10" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_10" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_04.png" alt="꼰대가 되지 않고 건설적인 피드백을 하는 법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 63%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">꼰대가 되지 않고 건설적인 피드백을 하는 법</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">마인드셋</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_11" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_11" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_05.png" alt="프로와 아마추어를 가르는 차이점" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 13%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">프로와 아마추어를 가르는 차이점!</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">자기개발</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_watching_12" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_watching_12" title="저장">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_06.png" alt="트럼프 반도체 관세, 한국 기업" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 23%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag biz">비즈트렌드</span>
|
|
<strong class="item-title">트럼프 반도체 관세…한국 기업 불똥?</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">금리</span>
|
|
<span class="tag">증시</span>
|
|
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- 시청완료 콘텐츠: 100% 진행률 표시 -->
|
|
<section class="content-section content-panel" id="panel-completed" role="tabpanel" aria-labelledby="tab-completed" data-panel="completed">
|
|
<ul class="content-grid">
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_1" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_1" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_01.png" alt="어색한 침묵 스몰토크" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">어색한 침묵 스몰토크</strong>
|
|
<div class="tag-list"><span class="tag">소통</span><span class="tag">협업</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_2" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_2" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_02.png" alt="한국에서 가장 유명한 회계사의 조언" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">한국에서 가장 유명한 회계사의 조언</strong>
|
|
<div class="tag-list"><span class="tag">소통</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_3" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_3" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_03.png" alt="무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하는 법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하..</strong>
|
|
<div class="tag-list"><span class="tag">협업</span><span class="tag">웰니스</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_4" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_4" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_04.png" alt="꼰대가 되지 않고 건설적인 피드백을 하는 법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">꼰대가 되지 않고 건설적인 피드백을 하는 법</strong>
|
|
<div class="tag-list"><span class="tag">마인드셋</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_5" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_5" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_05.png" alt="프로와 아마추어를 가르는 차이점" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">프로와 아마추어를 가르는 차이점!</strong>
|
|
<div class="tag-list"><span class="tag">자기개발</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_6" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_6" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_06.png" alt="트럼프 반도체 관세, 한국 기업" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag biz">비즈트렌드</span>
|
|
<strong class="item-title">트럼프 반도체 관세…한국 기업 불똥?</strong>
|
|
<div class="tag-list"><span class="tag">금리</span><span class="tag">증시</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_7" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_7" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_01.png" alt="어색한 침묵 스몰토크" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">어색한 침묵 스몰토크</strong>
|
|
<div class="tag-list"><span class="tag">소통</span><span class="tag">협업</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_8" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_8" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_02.png" alt="한국에서 가장 유명한 회계사의 조언" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">한국에서 가장 유명한 회계사의 조언</strong>
|
|
<div class="tag-list"><span class="tag">소통</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_9" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_9" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_03.png" alt="무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하는 법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하..</strong>
|
|
<div class="tag-list"><span class="tag">협업</span><span class="tag">웰니스</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_10" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_10" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_04.png" alt="꼰대가 되지 않고 건설적인 피드백을 하는 법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">꼰대가 되지 않고 건설적인 피드백을 하는 법</strong>
|
|
<div class="tag-list"><span class="tag">마인드셋</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_11" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_11" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_05.png" alt="프로와 아마추어를 가르는 차이점" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">프로와 아마추어를 가르는 차이점!</strong>
|
|
<div class="tag-list"><span class="tag">자기개발</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--completed">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_completed_12" onclick="event.stopPropagation();"><input type="checkbox" id="like_completed_12" title="저장"></label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_06.png" alt="트럼프 반도체 관세, 한국 기업" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 100%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag biz">비즈트렌드</span>
|
|
<strong class="item-title">트럼프 반도체 관세…한국 기업 불똥?</strong>
|
|
<div class="tag-list"><span class="tag">금리</span><span class="tag">증시</span></div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- 저장한 콘텐츠: 체크된 상태로 표시 (checked) -->
|
|
<section class="content-section content-panel" id="panel-saved" role="tabpanel" aria-labelledby="tab-saved" data-panel="saved">
|
|
<ul class="content-grid">
|
|
<li class="content-card content-card--saved">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_saved_1" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_saved_1" checked title="저장 취소">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_01.png" alt="나의 무한한 가능성을 발견하는 방법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 33%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">나의 무한한 가능성을 발견하는 방법</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">마인드셋</span>
|
|
<span class="tag">자기개발</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--saved">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_saved_2" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_saved_2" checked title="저장 취소">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_02.png" alt="아무도 알려주지 않았던 일 잘하는 방법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 63%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">아무도 알려주지 않았던 일 잘하는 방법</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">협업</span>
|
|
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--saved">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_saved_3" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_saved_3" checked title="저장 취소">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_03.png" alt="정선근 교수가 알려주는 목디스크 지식" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 83%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">정선근 교수가 알려주는 목디스크 지식</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">건강</span>
|
|
<span class="tag">웰니스</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--saved">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_saved_4" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_saved_4" checked title="저장 취소">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_01.png" alt="나의 무한한 가능성을 발견하는 방법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 33%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">나의 무한한 가능성을 발견하는 방법</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">마인드셋</span>
|
|
<span class="tag">자기개발</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--saved">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_saved_5" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_saved_5" checked title="저장 취소">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_02.png" alt="아무도 알려주지 않았던 일 잘하는 방법" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 63%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag leader">리더십</span>
|
|
<strong class="item-title">아무도 알려주지 않았던 일 잘하는 방법</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">협업</span>
|
|
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="content-card content-card--saved">
|
|
<a href="#" class="card-link">
|
|
<label class="bookmark" for="like_saved_6" onclick="event.stopPropagation();">
|
|
<input type="checkbox" id="like_saved_6" checked title="저장 취소">
|
|
</label>
|
|
<div class="item-thumb">
|
|
<img src="/edu/img/video/img_thumb_03.png" alt="정선근 교수가 알려주는 목디스크 지식" />
|
|
<div class="gauge-bar rect"><div class="gauge-fill" style="width: 83%"></div></div>
|
|
</div>
|
|
<div class="item-info">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<strong class="item-title">정선근 교수가 알려주는 목디스크 지식</strong>
|
|
<div class="tag-list">
|
|
<span class="tag">건강</span>
|
|
<span class="tag">웰니스</span>
|
|
</div>
|
|
<button type="button" class="btn-remove-card" title="삭제"></button>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 한줄 소감: 사용자가 작성한 짧은 리뷰 목록 (Figma: 우측 열, 16개) -->
|
|
<section class="review-section">
|
|
<h3 class="section-title">
|
|
<i class="ico-pin-list" aria-hidden="true"></i>
|
|
한줄 소감 <span class="count">16</span>
|
|
</h3>
|
|
<ul class="review-list">
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트 > 기술과 미래</span>
|
|
<p class="review-text">무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하는 법 최재천의 관계</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 사소한 말이 관계를 살린다는 걸 느꼈습니다.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag leader">리더십 > 관계리더십</span>
|
|
<p class="review-text">회계를 조금이라도 이해하면 인생이 달라지는 이..</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 숫자가 말하는 힘을 알게 되니, 결정도 훨씬 똑똑해졌어요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag leader">리더십 > 관계리더십</span>
|
|
<p class="review-text">프로그래머는 코딩하는 사람이 아닙니다.</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 문제를 정의하고 구조화하는 사고가 진짜 실력이더라고요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트 > 경제와 사회</span>
|
|
<p class="review-text">숨겨진 가능성을 무한히 발견하는 법</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 시야를 넓히는 법보다, 시야를 바꾸는 법을 배운 느낌이..</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트 > 경제와 사회</span>
|
|
<p class="review-text">변화의 시대에 변화하지 않는게 리스크더라구..</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 실무에 바로 적용할 수 있는 인사이트를 얻었어요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트 > 기술과 미래</span>
|
|
<p class="review-text">프로와 아마추어를 가르는 차이점!</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 같은 일을 해도, 접근 방식이 다르면 결과가 완전히 달라..</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag leader">리더십 > 관계리더십</span>
|
|
<p class="review-text">회계를 조금이라도 이해하면 인생이 달라지는 이..</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 숫자가 말하는 힘을 알게 되니, 결정도 훨씬 똑똑해졌어요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag leader">리더십 > 관계리더십</span>
|
|
<p class="review-text">프로그래머는 코딩하는 사람이 아닙니다.</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 문제를 정의하고 구조화하는 사고가 진짜 실력이더라고요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트 > 경제와 사회</span>
|
|
<p class="review-text">숨겨진 가능성을 무한히 발견하는 법</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 시야를 넓히는 법보다, 시야를 바꾸는 법을 배운 느낌이..</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트 > 경제와 사회</span>
|
|
<p class="review-text">변화의 시대에 변화하지 않는게 리스크더라구..</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 실무에 바로 적용할 수 있는 인사이트를 얻었어요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트 > 기술과 미래</span>
|
|
<p class="review-text">프로와 아마추어를 가르는 차이점!</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 같은 일을 해도, 접근 방식이 다르면 결과가 완전히 달라지네요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트 > 기술과 미래</span>
|
|
<p class="review-text">무슨 말을 해야 할지 모르겠어요, 스몰토크 잘하는 법</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 사소한 말이 관계를 살린다는 걸 느꼈습니다.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag leader">리더십 > 관계리더십</span>
|
|
<p class="review-text">한국에서 가장 유명한 회계사의 조언</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 숫자가 말하는 힘을 알게 되니, 결정도 훨씬 똑똑해졌어요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag leader">리더십</span>
|
|
<p class="review-text">창의적 캠페인의 시작</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 문제를 정의하고 구조화하는 사고가 진짜 실력이더라고요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트</span>
|
|
<p class="review-text">톤은 인격체다 | 클래스-김승호의 《톤의 속성》</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 시야를 넓히는 법보다, 시야를 바꾸는 법을 배운 느낌이에요.</span>
|
|
</div>
|
|
</li>
|
|
<li class="review-item">
|
|
<div class="review-head">
|
|
<span class="category-tag insight">인사이트 > 경제와 사회</span>
|
|
<p class="review-text">변화의 시대에</p>
|
|
</div>
|
|
<div class="review-comment">
|
|
<div class="review-user">
|
|
<img src="/edu/img/insight/profile.png" alt="홍길동 프로필">
|
|
</div>
|
|
<span class="review-comment-text"><strong>홍길동</strong> 실무에 바로 적용할 수 있는 인사이트를 얻었어요.</span>
|
|
</div>
|
|
</li>
|
|
</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>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
loadMypageInit();
|
|
});
|
|
|
|
//JS 1단계 (가장 먼저)
|
|
/**
|
|
* 마이페이지 초기 데이터 로드 함수
|
|
* - 서버에서 학습활동 관련 데이터를 가져온다
|
|
* - 연도 select 및 총 학습시간을 화면에 반영한다
|
|
*/
|
|
function loadMypageInit(year = '') {
|
|
fetch('/edu/ajax/get_init_data_for_mypage.php?year=' + year)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
// 실패 시 종료
|
|
if (!data.success) return;
|
|
|
|
// 1. 연도 select 구성
|
|
renderYearSelect(data.year_list, data.selected_year);
|
|
|
|
// 2. 총 학습시간 표시
|
|
renderMyTotalMinutes(data.my_total_minutes);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//JS 2단계 (연도 select 채우기)
|
|
function renderYearSelect(yearList, selectedYear) {
|
|
const select = document.getElementById('mypage-year-select');
|
|
if (!select) return;
|
|
|
|
select.innerHTML = '';
|
|
|
|
yearList.forEach(year => {
|
|
const option = document.createElement('option');
|
|
option.value = year;
|
|
option.textContent = year + '년';
|
|
|
|
if (year == selectedYear) {
|
|
option.selected = true;
|
|
}
|
|
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
|
|
//AJAX 응답의 my_total_minutes를 #mypage-total-minutes에 넣기
|
|
/**
|
|
* 총 학습시간(분)을 화면에 표시하는 함수
|
|
* - 서버에서 받은 my_total_minutes 값을
|
|
* #mypage-total-minutes 영역에 표시한다.
|
|
* - 숫자는 천단위 콤마 포맷 적용
|
|
*/
|
|
function renderMyTotalMinutes(totalMinutes) {
|
|
// 대상 DOM 가져오기
|
|
const el = document.getElementById('mypage-total-minutes');
|
|
if (!el) return;
|
|
|
|
// 숫자 변환 및 예외 방어 (null, undefined 대비)
|
|
const value = parseInt(totalMinutes, 10) || 0;
|
|
|
|
// 화면에 출력 (예: 1,200)
|
|
el.textContent = value.toLocaleString();
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|