관리자 페이지 UI 초안
This commit is contained in:
@@ -1,5 +1,3 @@
|
|||||||
version: "3.9"
|
|
||||||
|
|
||||||
services:
|
services:
|
||||||
app:
|
app:
|
||||||
build:
|
build:
|
||||||
@@ -29,7 +27,7 @@ services:
|
|||||||
- db_data:/var/lib/mysql
|
- db_data:/var/lib/mysql
|
||||||
- ../docker/mysql/initdb:/docker-entrypoint-initdb.d
|
- ../docker/mysql/initdb:/docker-entrypoint-initdb.d
|
||||||
ports:
|
ports:
|
||||||
- "3306:3306"
|
- "3307:3306"
|
||||||
|
|
||||||
volumes:
|
volumes:
|
||||||
db_data:
|
db_data:
|
||||||
104
src/index.php
104
src/index.php
@@ -4,50 +4,110 @@ $base = __DIR__;
|
|||||||
|
|
||||||
// Load DB connection if present (bbs/db_conn.php contains DB info)
|
// Load DB connection if present (bbs/db_conn.php contains DB info)
|
||||||
if (file_exists($base . '/bbs/db_conn.php')) {
|
if (file_exists($base . '/bbs/db_conn.php')) {
|
||||||
require_once $base . '/bbs/db_conn.php';
|
require_once $base . '/bbs/db_conn.php';
|
||||||
} elseif (file_exists($base . '/db_conn.php')) {
|
} elseif (file_exists($base . '/db_conn.php')) {
|
||||||
require_once $base . '/db_conn.php';
|
require_once $base . '/db_conn.php';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Serve skin/index.php as the intro page if it exists
|
// Serve skin/index.php as the intro page if it exists
|
||||||
$skin = $base . '/skin/index.php';
|
$skin = $base . '/skin/index.php';
|
||||||
if (file_exists($skin)) {
|
if (file_exists($skin)) {
|
||||||
if (session_status() === PHP_SESSION_NONE) {
|
if (session_status() === PHP_SESSION_NONE) {
|
||||||
@session_start();
|
@session_start();
|
||||||
}
|
}
|
||||||
require $skin;
|
require $skin;
|
||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Try alternate locations (compat)
|
// Try alternate locations (compat)
|
||||||
$alt = $base . '/hmac_edu/index.php';
|
$alt = $base . '/hmac_edu/index.php';
|
||||||
if (file_exists($alt)) {
|
if (file_exists($alt)) {
|
||||||
require $alt;
|
require $alt;
|
||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fallback diagnostic page
|
// Fallback diagnostic page
|
||||||
$dirs = [];
|
$dirs = [];
|
||||||
foreach (scandir($base) as $d) {
|
foreach (scandir($base) as $d) {
|
||||||
if ($d === '.' || $d === '..') continue;
|
if ($d === '.' || $d === '..') continue;
|
||||||
if (is_dir($base . '/' . $d)) $dirs[] = $d;
|
if (is_dir($base . '/' . $d)) $dirs[] = $d;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- [추가된 부분] 도커 DB 연결 및 데이터 조회 테스트 로직 ---
|
||||||
|
$dbStatus = "";
|
||||||
|
$usersData = [];
|
||||||
|
try {
|
||||||
|
// ⚠️ TODO: 아래 유저명과 비밀번호를 .env 파일과 동일하게 맞춰주세요!
|
||||||
|
$dsn = "mysql:host=db;dbname=appdb;charset=utf8mb4";
|
||||||
|
$dbUser = "app"; // 또는 설정하신 유저명
|
||||||
|
$dbPass = "secret"; // .env에 설정한 비밀번호
|
||||||
|
|
||||||
|
$pdo = new PDO($dsn, $dbUser, $dbPass);
|
||||||
|
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
|
||||||
|
$dbStatus = "<span style='color: green;'>✅ DB 연결 성공! (도커 내부 통신 정상)</span>";
|
||||||
|
|
||||||
|
// 아까 만든 users 테이블에서 데이터 가져오기
|
||||||
|
$stmt = $pdo->query("SELECT * FROM users");
|
||||||
|
$usersData = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
$dbStatus = "<span style='color: red;'>❌ DB 연결 실패: " . htmlspecialchars($e->getMessage()) . "</span>";
|
||||||
|
}
|
||||||
|
// -------------------------------------------------------------
|
||||||
?><!DOCTYPE html>
|
?><!DOCTYPE html>
|
||||||
<html lang="ko">
|
<html lang="ko">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>hmac_edu - Missing Intro</title>
|
<title>hmac_edu - Missing Intro</title>
|
||||||
<style>body{font-family:Arial,Helvetica,sans-serif;padding:20px}</style>
|
<style>
|
||||||
|
body{font-family:Arial,Helvetica,sans-serif;padding:20px}
|
||||||
|
/* 추가된 DB 테스트용 CSS */
|
||||||
|
.test-box { border: 1px solid #ccc; padding: 15px; margin-top: 20px; border-radius: 5px; background: #f9f9f9; }
|
||||||
|
table { border-collapse: collapse; width: 100%; margin-top: 10px; background: #fff; }
|
||||||
|
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
|
||||||
|
th { background-color: #eee; }
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Intro 페이지를 찾을 수 없습니다</h1>
|
<h1>Intro 페이지를 찾을 수 없습니다</h1>
|
||||||
<p>현재 `skin/index.php` 파일이 프로젝트의 `src` 폴더에 없습니다.</p>
|
<p>현재 `skin/index.php` 파일이 프로젝트의 `src` 폴더에 없습니다.</p>
|
||||||
<p>호스트에 업로드된 디렉터리 목록:</p>
|
|
||||||
<ul>
|
<div class="test-box">
|
||||||
<?php foreach ($dirs as $d): ?>
|
<h2>🐳 도커 DB 연결 테스트</h2>
|
||||||
<li><?php echo htmlspecialchars($d); ?></li>
|
<p><?php echo $dbStatus; ?></p>
|
||||||
<?php endforeach; ?>
|
|
||||||
</ul>
|
<?php if (!empty($usersData)): ?>
|
||||||
|
<h3>`users` 테이블 데이터:</h3>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>ID</th>
|
||||||
|
<th>Username</th>
|
||||||
|
<th>Email</th>
|
||||||
|
<th>Created At</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<?php foreach ($usersData as $row): ?>
|
||||||
|
<tr>
|
||||||
|
<td><?php echo htmlspecialchars($row['id'] ?? ''); ?></td>
|
||||||
|
<td><?php echo htmlspecialchars($row['username'] ?? ''); ?></td>
|
||||||
|
<td><?php echo htmlspecialchars($row['email'] ?? ''); ?></td>
|
||||||
|
<td><?php echo htmlspecialchars($row['created_at'] ?? ''); ?></td>
|
||||||
|
</tr>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<?php else: ?>
|
||||||
|
<p>테이블에 데이터가 없거나 조회할 수 없습니다. (초기 데이터가 비어있을 수 있습니다)</p>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<p style="margin-top:30px;">호스트에 업로드된 디렉터리 목록:</p>
|
||||||
|
<ul>
|
||||||
|
<?php foreach ($dirs as $d): ?>
|
||||||
|
<li><?php echo htmlspecialchars($d); ?></li>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</ul>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
206
src/skin/adm_index.php
Normal file
206
src/skin/adm_index.php
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>배움터 LMS 관리자 모드</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
|
||||||
|
body { font-family: 'Noto Sans KR', sans-serif; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-[#f8fafc]">
|
||||||
|
|
||||||
|
<nav class="sticky top-0 z-50 w-full bg-[#1e293b] text-white shadow-md">
|
||||||
|
<div class="max-w-[1600px] mx-auto px-6 h-16 flex items-center justify-between">
|
||||||
|
<div class="flex items-center space-x-8">
|
||||||
|
<h1 class="text-xl font-bold flex items-center tracking-tight">
|
||||||
|
<span class="bg-white text-[#1e293b] p-1 rounded mr-2"><i class="fa-solid fa-graduation-cap"></i></span>
|
||||||
|
배움터 <span class="ml-2 text-sm font-light opacity-80 italic">LMS 관리자</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="hidden md:flex items-center space-x-1">
|
||||||
|
<a href="#" class="px-4 py-5 border-b-4 border-blue-400 bg-white/10 flex items-center text-sm font-medium">
|
||||||
|
<i class="fa-solid fa-chart-pie mr-2"></i>전체학습현황
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-4 py-5 border-b-4 border-transparent hover:bg-white/5 flex items-center text-sm font-medium transition">
|
||||||
|
<i class="fa-solid fa-users-gear mr-2"></i>학습자관리
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-4 py-5 border-b-4 border-transparent hover:bg-white/5 flex items-center text-sm font-medium transition">
|
||||||
|
<i class="fa-solid fa-scale-balanced mr-2"></i>법정의무교육
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-4 py-5 border-b-4 border-transparent hover:bg-white/5 flex items-center text-sm font-medium transition">
|
||||||
|
<i class="fa-solid fa-cloud-arrow-up mr-2"></i>콘텐츠 입력
|
||||||
|
</a>
|
||||||
|
<a href="#" class="px-4 py-5 border-b-4 border-transparent hover:bg-white/5 flex items-center text-sm font-medium transition">
|
||||||
|
<i class="fa-solid fa-sliders mr-2"></i>설정
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<div class="text-right hidden sm:block">
|
||||||
|
<p class="text-xs opacity-70">권역: 바른컨설턴트</p>
|
||||||
|
<p class="text-sm font-bold">관리자ID: <span class="text-blue-300">B24064</span></p>
|
||||||
|
</div>
|
||||||
|
<button class="bg-white/10 hover:bg-white/20 p-2 rounded-full transition">
|
||||||
|
<i class="fa-solid fa-right-from-bracket"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main class="max-w-[1600px] mx-auto p-6">
|
||||||
|
|
||||||
|
<header class="flex flex-col md:flex-row justify-between items-end md:items-center mb-6 gap-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-2xl font-bold text-gray-800 flex items-center">
|
||||||
|
전체학습현황
|
||||||
|
<span class="ml-4 text-xs font-normal px-2 py-1 bg-gray-200 rounded text-gray-600">전체 학습자 수: 74명</span>
|
||||||
|
</h2>
|
||||||
|
<p class="text-sm text-gray-400 mt-1 italic leading-relaxed">법정의무교육 기간: 2025.11.01 ~ 2025.12.15</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<div class="flex bg-gray-200 p-1 rounded-md">
|
||||||
|
<button class="px-3 py-1 text-sm rounded bg-white shadow-sm text-gray-700">2025년</button>
|
||||||
|
<button class="px-3 py-1 text-sm text-gray-500 hover:text-gray-800 transition">2026년</button>
|
||||||
|
</div>
|
||||||
|
<button class="px-4 py-2 bg-[#2563eb] text-white rounded-md text-sm font-bold flex items-center hover:bg-blue-700 transition shadow-lg">
|
||||||
|
<i class="fa-solid fa-file-invoice mr-2"></i>교육결과보고서
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||||
|
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
|
||||||
|
<h3 class="font-bold text-gray-800 mb-6 flex items-center justify-between">
|
||||||
|
법인별 학습인원 현황
|
||||||
|
<i class="fa-solid fa-ellipsis-vertical text-gray-300"></i>
|
||||||
|
</h3>
|
||||||
|
<div class="h-44 flex items-end justify-between px-2 space-x-3">
|
||||||
|
<div class="w-full bg-slate-100 rounded-t relative group">
|
||||||
|
<div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 85%;"></div>
|
||||||
|
<span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">한맥</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-slate-100 rounded-t relative group">
|
||||||
|
<div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 45%;"></div>
|
||||||
|
<span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">삼안</span>
|
||||||
|
</div>
|
||||||
|
<div class="w-full bg-slate-100 rounded-t relative group">
|
||||||
|
<div class="absolute bottom-0 w-full bg-teal-600 rounded-t transition-all duration-500 group-hover:bg-teal-500" style="height: 25%;"></div>
|
||||||
|
<span class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-gray-400">바른</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
|
||||||
|
<div class="flex justify-between items-center mb-6">
|
||||||
|
<h3 class="font-bold text-gray-800 italic underline decoration-blue-200 decoration-4">법인별 통계</h3>
|
||||||
|
<select class="text-xs bg-gray-50 border border-gray-100 rounded p-1">
|
||||||
|
<option>평균학습</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex justify-between items-center pb-2 border-b border-gray-50">
|
||||||
|
<span class="text-sm font-medium text-gray-600">한맥기술</span><span class="text-sm font-bold text-blue-600">15.2회</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center pb-2 border-b border-gray-50">
|
||||||
|
<span class="text-sm font-medium text-gray-600">삼안</span><span class="text-sm font-bold text-blue-600">12.8회</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center pb-2 border-b border-gray-50">
|
||||||
|
<span class="text-sm font-medium text-gray-600">장현산업</span><span class="text-sm font-bold text-blue-600">18.5회</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-sm font-medium text-gray-600">GAIA</span><span class="text-sm font-bold text-blue-600">14.1회</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white p-6 rounded-xl border border-gray-200 shadow-sm relative overflow-hidden">
|
||||||
|
<h3 class="font-bold text-gray-800 mb-6">법인별 접속 추이</h3>
|
||||||
|
<div class="h-40 flex items-center justify-center">
|
||||||
|
<svg class="w-full h-full" viewBox="0 0 200 80">
|
||||||
|
<path d="M0,60 L40,50 L80,55 L120,30 L160,40 L200,35" fill="none" stroke="#0d9488" stroke-width="2" />
|
||||||
|
<circle cx="40" cy="50" r="3" fill="#0d9488" />
|
||||||
|
<circle cx="120" cy="30" r="3" fill="#0d9488" />
|
||||||
|
<circle cx="200" cy="35" r="3" fill="#0d9488" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
|
<div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||||
|
<div class="p-6 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
|
||||||
|
<h3 class="font-bold text-gray-800 flex items-center italic">
|
||||||
|
<i class="fa-solid fa-play-circle text-blue-500 mr-2"></i>가장 많이 본 영상
|
||||||
|
</h3>
|
||||||
|
<select class="text-xs bg-white border border-gray-200 rounded p-1"><option>인사이트</option></select>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 space-y-6">
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-bold text-sm leading-tight">실리콘밸리 PM이 말해주는 AI 시대 PM 생존법</h4>
|
||||||
|
<p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,245회</span> | 완료율: <span class="text-blue-500 font-bold">92%</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start space-x-4">
|
||||||
|
<div class="w-24 h-14 bg-slate-200 rounded flex-shrink-0"></div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-bold text-sm leading-tight">AI와 함께 진화하는 법 : AI 일잘러의 비밀</h4>
|
||||||
|
<p class="text-[11px] text-gray-400 mt-1">시청수: <span class="text-gray-700 font-bold">1,127회</span> | 완료율: <span class="text-blue-500 font-bold">88%</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-50 italic">
|
||||||
|
<i class="fa-solid fa-comment-dots mr-2"></i>한줄 소감문 보기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||||
|
<div class="p-6 border-b border-gray-50 flex justify-between items-center bg-gray-50/50">
|
||||||
|
<h3 class="font-bold text-gray-800 flex items-center italic">
|
||||||
|
<i class="fa-solid fa-award text-teal-600 mr-2"></i>배움터 학습 랭킹
|
||||||
|
</h3>
|
||||||
|
<select class="text-xs bg-white border border-gray-200 rounded p-1"><option>전체</option></select>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<table class="w-full text-sm">
|
||||||
|
<tbody>
|
||||||
|
<tr class="hover:bg-gray-50 transition">
|
||||||
|
<td class="p-3 font-bold text-blue-600">1</td>
|
||||||
|
<td class="p-3">
|
||||||
|
<p class="font-bold">홍길동</p>
|
||||||
|
<p class="text-[10px] text-gray-400">한맥기술 본부장</p>
|
||||||
|
</td>
|
||||||
|
<td class="p-3 text-right">
|
||||||
|
<span class="font-bold mr-2">52시간</span>
|
||||||
|
<span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-gray-50 transition border-t border-gray-50">
|
||||||
|
<td class="p-3 font-bold text-gray-400">2</td>
|
||||||
|
<td class="p-3">
|
||||||
|
<p class="font-bold">김철수</p>
|
||||||
|
<p class="text-[10px] text-gray-400">삼안 전략기획팀</p>
|
||||||
|
</td>
|
||||||
|
<td class="p-3 text-right">
|
||||||
|
<span class="font-bold mr-2">48시간</span>
|
||||||
|
<span class="px-2 py-0.5 bg-purple-100 text-purple-600 text-[10px] rounded font-bold">Master</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-3 bg-slate-50 text-xs text-gray-400 font-medium hover:bg-slate-100 border-t border-gray-50 italic">
|
||||||
|
<i class="fa-solid fa-thumbs-up mr-2"></i>추천 영상 보기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
src/skin/index.php
Normal file
11
src/skin/index.php
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>한맥가족사 배움터</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>🎉 메인 스킨 화면에 성공적으로 들어왔습니다!</h1>
|
||||||
|
<p>여기가 진짜 사용자가 보게 될 첫 화면(skin)입니다.</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user