256 lines
10 KiB
HTML
256 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>학습센터</title>
|
|
<link rel="stylesheet" href="/public/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<aside class="left-nav">
|
|
<div class="logo">DW</div>
|
|
<a href="#" class="nav-item">채팅</a>
|
|
<a href="#" class="nav-item">AI</a>
|
|
<a href="/" class="nav-item active">학습센터</a>
|
|
<a href="#" class="nav-item">과제신청</a>
|
|
<a href="#" class="nav-item">성공사례</a>
|
|
</aside>
|
|
|
|
<div class="content-area">
|
|
<header class="topbar">
|
|
<h1>학습센터</h1>
|
|
<a class="top-action-link" href="#register">강의 등록하기</a>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<section class="hero panel">
|
|
<h2>최신 컨텐츠로 학습하고, 바로 업무에 적용하세요.</h2>
|
|
<p>유튜브 링크 또는 PPT를 등록한 뒤, 목록에서 클릭하여 강의를 시청할 수 있습니다.</p>
|
|
</section>
|
|
|
|
<section class="panel filter-panel">
|
|
<h2>강의 검색/필터</h2>
|
|
<form action="/" method="get" class="filter-grid">
|
|
<label>
|
|
검색어
|
|
<input type="text" name="q" value="" placeholder="제목" />
|
|
</label>
|
|
<label>
|
|
타입
|
|
<select name="type">
|
|
<option value="all" selected>전체</option>
|
|
<option value="youtube" >YouTube</option>
|
|
<option value="ppt" >PPT</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
태그
|
|
<select name="tag">
|
|
<option value="">전체</option>
|
|
|
|
</select>
|
|
</label>
|
|
|
|
<input type="hidden" name="admin" value="1" />
|
|
<input type="hidden" name="token" value="test-token" />
|
|
|
|
<div class="filter-actions">
|
|
<button type="submit">필터 적용</button>
|
|
<a class="link-muted" href="/">초기화</a>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="panel admin-panel">
|
|
<h2>관리자 모드</h2>
|
|
|
|
|
|
<p class="admin-ok">관리자 모드 활성화됨</p>
|
|
<div class="queue-status">
|
|
<span>큐: <b>1</b></span>
|
|
<span>워커: <b>작동중</b></span>
|
|
<span>실패 재시도 최대: <b>2</b></span>
|
|
</div>
|
|
<div class="queue-status">
|
|
<span>PPT 썸네일 - 준비완료 <b>0</b></span>
|
|
<span>처리중 <b>0</b></span>
|
|
<span>대기 <b>0</b></span>
|
|
<span>실패 <b>2</b></span>
|
|
</div>
|
|
|
|
<form action="/" method="get" class="admin-inline">
|
|
<input type="hidden" name="q" value="" />
|
|
<input type="hidden" name="type" value="all" />
|
|
<input type="hidden" name="tag" value="" />
|
|
<input type="hidden" name="page" value="1" />
|
|
<input type="hidden" name="admin" value="1" />
|
|
<input type="password" name="token" placeholder="관리자 토큰" />
|
|
<button type="submit">관리자 활성화</button>
|
|
</form>
|
|
|
|
<form action="/thumbnails/retry-failed" method="post" class="admin-inline">
|
|
<input type="hidden" name="token" value="test-token" />
|
|
<input type="hidden" name="returnTo" value="?admin=1&token=test-token" />
|
|
<button type="submit" class="ghost">실패 썸네일 일괄 재시도</button>
|
|
</form>
|
|
|
|
</section>
|
|
|
|
<section id="register" class="panel">
|
|
<h2>유튜브 강의 등록</h2>
|
|
<form action="/lectures/youtube" method="post" class="form-grid">
|
|
<label>
|
|
제목
|
|
<input type="text" name="title" required />
|
|
</label>
|
|
<label>
|
|
유튜브 링크
|
|
<input type="url" name="youtubeUrl" placeholder="https://www.youtube.com/watch?v=..." required />
|
|
</label>
|
|
<label class="full">
|
|
설명
|
|
<textarea name="description" rows="3" placeholder="강의 설명"></textarea>
|
|
</label>
|
|
<label class="full">
|
|
태그 (쉼표 구분)
|
|
<input type="text" name="tags" placeholder="예: AI에이전트, 바이브코딩" />
|
|
</label>
|
|
<button type="submit">유튜브 강의 등록</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>PowerPoint 강의 등록</h2>
|
|
<form action="/lectures/ppt" method="post" enctype="multipart/form-data" class="form-grid">
|
|
<label>
|
|
제목
|
|
<input type="text" name="title" required />
|
|
</label>
|
|
<label>
|
|
PPT 파일(.pptx)
|
|
<input type="file" name="pptFile" accept=".pptx" required />
|
|
</label>
|
|
<label class="full">
|
|
설명
|
|
<textarea name="description" rows="3" placeholder="강의 설명"></textarea>
|
|
</label>
|
|
<label class="full">
|
|
태그 (쉼표 구분)
|
|
<input type="text" name="tags" placeholder="예: 프롬프트, 생성형AI" />
|
|
</label>
|
|
<button type="submit">강의 등록</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<div class="section-head">
|
|
<h2>등록된 강의</h2>
|
|
<span class="count-chip">총 2건</span>
|
|
</div>
|
|
|
|
|
|
<div class="lecture-grid">
|
|
|
|
<article class="lecture-card">
|
|
<a class="lecture-link" href="/lectures/51ee515c-fff0-4156-97ac-09ec0b412345">
|
|
<div class="thumb ppt">
|
|
|
|
|
|
<span class="thumb-fallback">썸네일 failed</span>
|
|
|
|
<span class="thumb-kicker">PPT 프리뷰</span>
|
|
<strong>제목 없음</strong>
|
|
<small>1장</small>
|
|
|
|
</div>
|
|
<div class="badge ppt">
|
|
PPT
|
|
</div>
|
|
<h3>생성형AI, LLM, 에이전틱 AI 이해하기</h3>
|
|
<p>초기 샘플 PPT 강의</p>
|
|
<div class="tag-row">
|
|
|
|
</div>
|
|
<small>2026. 3. 14. AM 11:23:13</small>
|
|
</a>
|
|
|
|
<form action="/lectures/51ee515c-fff0-4156-97ac-09ec0b412345/delete" method="post" class="delete-form">
|
|
<input type="hidden" name="token" value="test-token" />
|
|
<input type="hidden" name="returnTo" value="?admin=1&token=test-token" />
|
|
<button type="submit" class="danger">삭제</button>
|
|
</form>
|
|
|
|
<div class="thumb-state-row">
|
|
<span class="state-chip failed">
|
|
failed
|
|
</span>
|
|
|
|
<small class="error-text">썸네일 생성 도구 실행 실패 또는 미설치</small>
|
|
|
|
</div>
|
|
<form action="/lectures/51ee515c-fff0-4156-97ac-09ec0b412345/thumbnail/regenerate" method="post" class="delete-form">
|
|
<input type="hidden" name="token" value="test-token" />
|
|
<input type="hidden" name="returnTo" value="?admin=1&token=test-token" />
|
|
<button type="submit" class="ghost">썸네일 재생성</button>
|
|
</form>
|
|
|
|
|
|
</article>
|
|
|
|
<article class="lecture-card">
|
|
<a class="lecture-link" href="/lectures/4a937c1e-98cb-402f-abd4-497120212974">
|
|
<div class="thumb ppt">
|
|
|
|
|
|
<span class="thumb-fallback">썸네일 failed</span>
|
|
|
|
<span class="thumb-kicker">PPT 프리뷰</span>
|
|
<strong>제목 없음</strong>
|
|
<small>12장</small>
|
|
|
|
</div>
|
|
<div class="badge ppt">
|
|
PPT
|
|
</div>
|
|
<h3>claude cowork 가이드</h3>
|
|
<p>초기 샘플 PPT 강의</p>
|
|
<div class="tag-row">
|
|
|
|
</div>
|
|
<small>2026. 3. 14. AM 11:23:13</small>
|
|
</a>
|
|
|
|
<form action="/lectures/4a937c1e-98cb-402f-abd4-497120212974/delete" method="post" class="delete-form">
|
|
<input type="hidden" name="token" value="test-token" />
|
|
<input type="hidden" name="returnTo" value="?admin=1&token=test-token" />
|
|
<button type="submit" class="danger">삭제</button>
|
|
</form>
|
|
|
|
<div class="thumb-state-row">
|
|
<span class="state-chip failed">
|
|
failed
|
|
</span>
|
|
|
|
<small class="error-text">썸네일 생성 도구 실행 실패 또는 미설치</small>
|
|
|
|
</div>
|
|
<form action="/lectures/4a937c1e-98cb-402f-abd4-497120212974/thumbnail/regenerate" method="post" class="delete-form">
|
|
<input type="hidden" name="token" value="test-token" />
|
|
<input type="hidden" name="returnTo" value="?admin=1&token=test-token" />
|
|
<button type="submit" class="ghost">썸네일 재생성</button>
|
|
</form>
|
|
|
|
|
|
</article>
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|