analize
This commit is contained in:
root
@@ -59,6 +59,11 @@
|
||||
<BookmarkIcon :size="20" class="group-hover:scale-110 transition-transform" />
|
||||
책갈피
|
||||
</router-link>
|
||||
|
||||
<router-link to="/study" class="flex items-center gap-4 px-5 py-4 rounded-2xl hover:bg-base-300 transition-all font-bold group" active-class="bg-primary text-primary-content shadow-lg shadow-primary/20" @click="closeDrawer">
|
||||
<GraduationCapIcon :size="20" class="group-hover:scale-110 transition-transform" />
|
||||
학습요소 & 실기 생성
|
||||
</router-link>
|
||||
|
||||
<!-- Gemini Menu Link (Admin Only) -->
|
||||
<router-link v-if="authStore.isAdmin" to="/settings" class="flex items-center gap-4 px-5 py-4 rounded-2xl hover:bg-base-300 transition-all font-bold group" active-class="bg-primary text-primary-content shadow-lg shadow-primary/20" @click="closeDrawer">
|
||||
@@ -241,7 +246,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { LayoutDashboardIcon, BookOpenIcon, KeyIcon, TrophyIcon, MenuIcon, ShuffleIcon, BookmarkIcon, UsersIcon, UserIcon, UserCogIcon, LockIcon } from 'lucide-vue-next'
|
||||
import { LayoutDashboardIcon, BookOpenIcon, KeyIcon, TrophyIcon, MenuIcon, ShuffleIcon, BookmarkIcon, UsersIcon, UserIcon, UserCogIcon, LockIcon, GraduationCapIcon } from 'lucide-vue-next'
|
||||
import { useQuizStore } from './store/quiz'
|
||||
import { useAuthStore } from './store/auth'
|
||||
import { GetGeminiKeys, ChangePassword, UpdateUserApiKey } from '../bindings/changeme/quizservice'
|
||||
|
||||
@@ -55,6 +55,11 @@ const router = createRouter({
|
||||
name: 'settings',
|
||||
component: () => import('../views/SettingsView.vue')
|
||||
},
|
||||
{
|
||||
path: '/study',
|
||||
name: 'study',
|
||||
component: () => import('../views/StudyView.vue')
|
||||
},
|
||||
{
|
||||
path: '/admin/users',
|
||||
name: 'admin-users',
|
||||
|
||||
@@ -0,0 +1,710 @@
|
||||
<template>
|
||||
<div class="p-6 max-w-7xl mx-auto space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-base-content/10 pb-6">
|
||||
<div>
|
||||
<h1 class="text-3xl font-black flex items-center gap-3">
|
||||
<GraduationCapIcon :size="32" class="text-primary" />
|
||||
학습요소 & 실기 생성
|
||||
</h1>
|
||||
<p class="text-sm opacity-60 mt-1">기출문제 기반 AI 개념 분석 학습 노트를 확인하고, 새로운 실기 문제를 생성하여 자체 학습을 고도화합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TABS -->
|
||||
<div class="tabs tabs-boxed shrink-0 p-1 bg-base-300 rounded-2xl w-fit flex gap-1 overflow-x-auto max-w-full">
|
||||
<button
|
||||
@click="activeTab = 'study'"
|
||||
class="tab tab-lg rounded-xl font-bold transition-all px-6 py-3 whitespace-nowrap"
|
||||
:class="activeTab === 'study' ? 'tab-active bg-primary text-primary-content shadow-md' : 'opacity-70 hover:opacity-100'"
|
||||
>
|
||||
학습요소 조회 & 추출
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'exam'"
|
||||
class="tab tab-lg rounded-xl font-bold transition-all px-6 py-3 whitespace-nowrap"
|
||||
:class="activeTab === 'exam' ? 'tab-active bg-primary text-primary-content shadow-md' : 'opacity-70 hover:opacity-100'"
|
||||
>
|
||||
실기 문제 생성
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TAB CONTENT: STUDY ELEMENTS -->
|
||||
<div v-if="activeTab === 'study'" class="space-y-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Control Box (Category select and extraction trigger) -->
|
||||
<div class="card bg-base-200 border border-base-content/10 rounded-3xl p-6 h-fit space-y-6">
|
||||
<h3 class="text-lg font-black flex items-center gap-2">
|
||||
<SettingsIcon :size="20" class="text-primary" />
|
||||
분석 대상 설정
|
||||
</h3>
|
||||
|
||||
<div class="form-control w-full">
|
||||
<label class="label font-bold text-xs opacity-70">학습 카테고리</label>
|
||||
<select v-model="selectedCategory" @change="loadStudyElements" class="select select-bordered w-full bg-base-100">
|
||||
<option value="" disabled>카테고리를 선택하세요</option>
|
||||
<option v-for="cat in categories" :key="cat.name" :value="cat.name">
|
||||
{{ cat.name }} ({{ cat.count }}문제)
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Progress and Operations -->
|
||||
<div v-if="selectedCategory" class="space-y-4 pt-4 border-t border-base-content/5">
|
||||
<div class="flex justify-between items-center text-xs gap-2 whitespace-nowrap">
|
||||
<span class="opacity-60 font-bold">추출된 학습요소</span>
|
||||
<span class="font-black text-sm text-primary">{{ studyElements.length }} / {{ selectedCategoryCount }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Extraction Progress Bar (if running) -->
|
||||
<div v-if="isExtracting" class="space-y-2">
|
||||
<div class="flex justify-between items-center text-xs font-bold gap-2">
|
||||
<span class="text-primary truncate max-w-[70%]">{{ extractionStatus }}</span>
|
||||
<span class="whitespace-nowrap">{{ extractionProgress }}%</span>
|
||||
</div>
|
||||
<progress class="progress progress-primary w-full" :value="extractionProgress" max="100"></progress>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 pt-2">
|
||||
<button
|
||||
@click="startExtraction"
|
||||
:disabled="isExtracting || studyElements.length === selectedCategoryCount"
|
||||
class="btn btn-primary w-full font-bold"
|
||||
>
|
||||
<span v-if="isExtracting" class="loading loading-spinner loading-xs mr-2"></span>
|
||||
<SparklesIcon v-else :size="16" class="mr-2" />
|
||||
학습요소 추출하기
|
||||
</button>
|
||||
<button
|
||||
@click="printAllElements"
|
||||
:disabled="studyElements.length === 0"
|
||||
class="btn btn-outline btn-neutral w-full font-bold"
|
||||
>
|
||||
<PrinterIcon :size="16" class="mr-2" />
|
||||
전체 PDF 추출
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List & Search -->
|
||||
<div class="lg:col-span-2 space-y-4">
|
||||
<!-- Search Bar -->
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
placeholder="문제 번호 또는 텍스트로 검색..."
|
||||
class="input input-bordered w-full bg-base-200/50 rounded-2xl focus:input-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="filteredElements.length === 0" class="card bg-base-200/50 border border-dashed border-base-content/20 rounded-3xl p-12 text-center">
|
||||
<BookOpenIcon :size="48" class="mx-auto opacity-30 mb-4" />
|
||||
<h4 class="text-lg font-bold opacity-60">추출된 학습요소가 없습니다</h4>
|
||||
<p class="text-xs opacity-50 mt-1">카테고리를 선택하고 "학습요소 추출하기"를 눌러 인공지능 분석 노트를 생성하세요.</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 gap-4 max-h-[600px] overflow-y-auto pr-2">
|
||||
<div
|
||||
v-for="se in filteredElements"
|
||||
:key="se.questionId"
|
||||
@click="openModal(se)"
|
||||
class="card bg-base-200 border border-base-content/5 hover:border-primary/30 rounded-2xl p-5 cursor-pointer hover:shadow-md transition-all active:scale-[0.99] flex flex-row items-center justify-between gap-4"
|
||||
>
|
||||
<div class="space-y-1 min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2 whitespace-nowrap">
|
||||
<span class="badge badge-primary badge-sm font-bold shrink-0">문제 #{{ se.questionId }}</span>
|
||||
<span class="text-[10px] opacity-40 uppercase tracking-widest font-black truncate max-w-[120px]">{{ se.source }}</span>
|
||||
</div>
|
||||
<h4 class="text-sm font-bold text-base-content truncate pr-4">{{ se.questionText }}</h4>
|
||||
</div>
|
||||
<ChevronRightIcon :size="20" class="opacity-40 shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB CONTENT: GENERATE PRACTICAL EXAMS -->
|
||||
<div v-if="activeTab === 'exam'" class="card bg-base-200 border border-base-content/10 rounded-3xl p-8 max-w-3xl mx-auto space-y-6">
|
||||
<div class="flex items-center gap-3 border-b border-base-content/10 pb-4">
|
||||
<div class="bg-primary/10 p-2.5 rounded-2xl text-primary">
|
||||
<BookMarkedIcon :size="24" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-xl font-black">실기 문제 생성 도구</h2>
|
||||
<p class="text-xs opacity-60">기존 정보보호기사 실기 기출문제를 분석하여 유사한 서술형/단답형 문제를 직접 출제합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="form-control w-full">
|
||||
<label class="label font-bold text-xs opacity-70">생성할 문제 개수</label>
|
||||
<div class="flex items-center gap-4">
|
||||
<input
|
||||
v-model.number="examCount"
|
||||
type="range"
|
||||
min="1"
|
||||
max="15"
|
||||
class="range range-primary flex-1"
|
||||
/>
|
||||
<span class="badge badge-primary font-black text-sm px-3 py-3">{{ examCount }}개</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generation Progress Bar -->
|
||||
<div v-if="isGeneratingExams" class="space-y-2 bg-base-300/50 p-4 rounded-2xl border border-base-content/5">
|
||||
<div class="flex justify-between items-center text-xs font-bold gap-2">
|
||||
<span class="text-primary truncate max-w-[70%]">{{ examStatus }}</span>
|
||||
<span class="whitespace-nowrap">{{ examProgress }}%</span>
|
||||
</div>
|
||||
<progress class="progress progress-primary w-full" :value="examProgress" max="100"></progress>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<button
|
||||
@click="startGeneratingExams"
|
||||
:disabled="isGeneratingExams"
|
||||
class="btn btn-primary btn-lg font-bold rounded-2xl shadow-lg shadow-primary/20 whitespace-nowrap text-base"
|
||||
>
|
||||
<span v-if="isGeneratingExams" class="loading loading-spinner loading-md mr-2"></span>
|
||||
<SparklesIcon v-else :size="20" class="mr-2" />
|
||||
정보보호기사 실기(Go) 문제 출제하기
|
||||
</button>
|
||||
|
||||
<p class="text-[11px] opacity-40 text-center">
|
||||
* 생성된 실기 문제는 '정보보호기사 실기(Go)' 카테고리로 저장되며 기존 실제 자료와 명확하게 구분됩니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Success link to quiz page -->
|
||||
<div v-if="showQuizRedirect" class="bg-success/15 border border-success/30 rounded-2xl p-5 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div class="text-center sm:text-left">
|
||||
<h4 class="text-sm font-bold text-success">문제가 정상적으로 출제되었습니다!</h4>
|
||||
<p class="text-xs opacity-70 mt-0.5">지금 생성된 정보보호기사 실기(Go) 문제를 풀 수 있습니다.</p>
|
||||
</div>
|
||||
<button @click="goToQuiz" class="btn btn-success btn-sm font-bold text-success-content px-4">
|
||||
풀러 가기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DETAIL MODAL FOR STUDY ELEMENT -->
|
||||
<dialog ref="detailModal" class="modal" :class="{ 'modal-open': activeElement }">
|
||||
<div v-if="activeElement" class="modal-box max-w-4xl bg-base-200 border border-base-content/10 p-8 rounded-3xl shadow-2xl relative flex flex-col max-h-[85vh]">
|
||||
<!-- Close button -->
|
||||
<button @click="closeModal" class="btn btn-sm btn-circle btn-ghost absolute right-4 top-4">✕</button>
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between border-b border-base-content/10 pb-4 mb-4 shrink-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="badge badge-primary font-black">문제 #{{ activeElement.questionId }}</span>
|
||||
<span class="text-xs font-bold opacity-60">학습 개념 노트</span>
|
||||
</div>
|
||||
<button @click="printSingleElement(activeElement)" class="btn btn-outline btn-sm btn-neutral font-bold rounded-xl">
|
||||
<PrinterIcon :size="14" class="mr-1.5" />
|
||||
PDF/인쇄
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Question Context -->
|
||||
<div class="bg-base-300/40 border border-base-content/5 p-4 rounded-xl mb-6 text-sm shrink-0">
|
||||
<strong class="text-primary block mb-1">기출문제:</strong>
|
||||
<p class="opacity-80 line-clamp-2">{{ activeElement.questionText }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Extracted Concepts Markdown viewer -->
|
||||
<div class="flex-1 overflow-y-auto prose max-w-none text-sm leading-relaxed pr-2" v-html="renderedContent"></div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button @click="closeModal">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed, nextTick, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { GraduationCapIcon, SettingsIcon, BookOpenIcon, PrinterIcon, ChevronRightIcon, SparklesIcon, BookMarkedIcon } from 'lucide-vue-next'
|
||||
import { marked } from 'marked'
|
||||
import katex from 'katex'
|
||||
import { Events } from '@wailsio/runtime'
|
||||
import { GetCategories, GetStudyElements, ExtractStudyElementsForCategory, GenerateGoPracticalExams } from '../../bindings/changeme/quizservice'
|
||||
|
||||
interface CategoryInfo {
|
||||
name: string
|
||||
count: number
|
||||
}
|
||||
|
||||
interface StudyElement {
|
||||
questionId: number
|
||||
source: string
|
||||
questionText: string
|
||||
content: string
|
||||
category: string
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
const activeTab = ref('study')
|
||||
|
||||
// Category & Elements lists
|
||||
const categories = ref<CategoryInfo[]>([])
|
||||
const selectedCategory = ref('')
|
||||
const studyElements = ref<StudyElement[]>([])
|
||||
const searchQuery = ref('')
|
||||
|
||||
// Load lists
|
||||
const categoriesCountMap = computed(() => {
|
||||
const map: Record<string, number> = {}
|
||||
categories.value.forEach(c => {
|
||||
map[c.name] = c.count
|
||||
})
|
||||
return map
|
||||
})
|
||||
const selectedCategoryCount = computed(() => {
|
||||
return selectedCategory.value ? (categoriesCountMap.value[selectedCategory.value] || 0) : 0
|
||||
})
|
||||
|
||||
// Active dialog detail
|
||||
const activeElement = ref<StudyElement | null>(null)
|
||||
const detailModal = ref<HTMLDialogElement | null>(null)
|
||||
|
||||
// Extractions state
|
||||
const isExtracting = ref(false)
|
||||
const extractionStatus = ref('')
|
||||
const extractionProgress = ref(0)
|
||||
|
||||
// Practical Exam State
|
||||
const examCount = ref(5)
|
||||
const isGeneratingExams = ref(false)
|
||||
const examStatus = ref('')
|
||||
const examProgress = ref(0)
|
||||
const showQuizRedirect = ref(false)
|
||||
|
||||
// Custom Markdown rendering with KaTeX and Mermaid setup
|
||||
const renderer = new marked.Renderer()
|
||||
renderer.code = function({ text, lang }) {
|
||||
if (lang === 'mermaid') {
|
||||
return `<div class="mermaid">${text}</div>`
|
||||
}
|
||||
return `<pre><code class="language-${lang}">${text}</code></pre>`
|
||||
}
|
||||
marked.setOptions({ renderer })
|
||||
|
||||
function renderMarkdown(text: string): string {
|
||||
if (!text) return ''
|
||||
|
||||
// 1. Render display math $$...$$
|
||||
let processed = text.replace(/\$\$([\s\S]+?)\$\$/g, (match, math) => {
|
||||
try {
|
||||
return `<div class="math-display">${katex.renderToString(math.trim(), { displayMode: true, throwOnError: false })}</div>`
|
||||
} catch (e) {
|
||||
return match
|
||||
}
|
||||
})
|
||||
|
||||
// 2. Render inline math $...$
|
||||
processed = processed.replace(/\$([^\n]+?)\$/g, (match, math) => {
|
||||
try {
|
||||
return `<span class="math-inline">${katex.renderToString(math.trim(), { displayMode: false, throwOnError: false })}</span>`
|
||||
} catch (e) {
|
||||
return match
|
||||
}
|
||||
})
|
||||
|
||||
// 3. Render markdown
|
||||
return marked.parse(processed) as string
|
||||
}
|
||||
|
||||
const renderedContent = computed(() => {
|
||||
if (!activeElement.value) return ''
|
||||
return renderMarkdown(activeElement.value.content)
|
||||
})
|
||||
|
||||
// Search elements
|
||||
const filteredElements = computed(() => {
|
||||
if (!searchQuery.value.trim()) return studyElements.value
|
||||
const q = searchQuery.value.toLowerCase()
|
||||
return studyElements.value.filter(se =>
|
||||
se.questionId.toString().includes(q) ||
|
||||
se.questionText.toLowerCase().includes(q) ||
|
||||
se.content.toLowerCase().includes(q)
|
||||
)
|
||||
})
|
||||
|
||||
// Life Cycle
|
||||
let cancelStudyProgress: (() => void) | null = null
|
||||
let cancelStudyDone: (() => void) | null = null
|
||||
let cancelExamProgress: (() => void) | null = null
|
||||
let cancelExamDone: (() => void) | null = null
|
||||
|
||||
onMounted(async () => {
|
||||
// Load categories
|
||||
try {
|
||||
const cats = await GetCategories()
|
||||
categories.value = cats || []
|
||||
|
||||
// Select "정보보안기사" as default if it exists
|
||||
const securityCat = categories.value.find(c => c.name === '정보보안기사')
|
||||
if (securityCat) {
|
||||
selectedCategory.value = securityCat.name
|
||||
} else if (categories.value.length > 0) {
|
||||
selectedCategory.value = categories.value[0].name
|
||||
}
|
||||
|
||||
if (selectedCategory.value) {
|
||||
await loadStudyElements()
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load categories', e)
|
||||
}
|
||||
|
||||
// Inject Mermaid CDN Script dynamically for frontend rendering
|
||||
if (!document.getElementById('mermaid-script')) {
|
||||
const script = document.createElement('script')
|
||||
script.id = 'mermaid-script'
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js'
|
||||
script.onload = () => {
|
||||
// @ts-ignore
|
||||
if (window.mermaid) {
|
||||
// @ts-ignore
|
||||
window.mermaid.initialize({ startOnLoad: false, theme: 'dark' })
|
||||
}
|
||||
}
|
||||
document.head.appendChild(script)
|
||||
}
|
||||
|
||||
// Wails event listners
|
||||
cancelStudyProgress = Events.On('study:progress', (event: any) => {
|
||||
isExtracting.value = true
|
||||
const data = event.data
|
||||
extractionStatus.value = data.message
|
||||
extractionProgress.value = Math.round((data.current / data.total) * 100)
|
||||
})
|
||||
|
||||
cancelStudyDone = Events.On('study:done', (event: any) => {
|
||||
isExtracting.value = false
|
||||
extractionProgress.value = 100
|
||||
loadStudyElements()
|
||||
})
|
||||
|
||||
cancelExamProgress = Events.On('exam:progress', (event: any) => {
|
||||
isGeneratingExams.value = true
|
||||
const data = event.data
|
||||
examStatus.value = data.message
|
||||
examProgress.value = Math.round((data.current / data.total) * 100)
|
||||
})
|
||||
|
||||
cancelExamDone = Events.On('exam:done', (event: any) => {
|
||||
isGeneratingExams.value = false
|
||||
examProgress.value = 100
|
||||
showQuizRedirect.value = true
|
||||
})
|
||||
})
|
||||
|
||||
// Unsubscribe events on unmount
|
||||
const unsubscribeAll = () => {
|
||||
if (cancelStudyProgress) cancelStudyProgress()
|
||||
if (cancelStudyDone) cancelStudyDone()
|
||||
if (cancelExamProgress) cancelExamProgress()
|
||||
if (cancelExamDone) cancelExamDone()
|
||||
}
|
||||
|
||||
// Load elements
|
||||
async function loadStudyElements() {
|
||||
if (!selectedCategory.value) return
|
||||
try {
|
||||
const elements = await GetStudyElements(selectedCategory.value)
|
||||
studyElements.value = elements || []
|
||||
} catch (e) {
|
||||
console.error('Failed to load study elements', e)
|
||||
}
|
||||
}
|
||||
|
||||
// Start study element extraction
|
||||
async function startExtraction() {
|
||||
if (!selectedCategory.value || isExtracting.value) return
|
||||
isExtracting.value = true
|
||||
extractionProgress.value = 0
|
||||
extractionStatus.value = '추출 시작 중...'
|
||||
try {
|
||||
await ExtractStudyElementsForCategory(selectedCategory.value)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
isExtracting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Start descriptive exam generation
|
||||
async function startGeneratingExams() {
|
||||
if (isGeneratingExams.value) return
|
||||
isGeneratingExams.value = true
|
||||
examProgress.value = 0
|
||||
examStatus.value = '기존 기출문제 데이터 수집 중...'
|
||||
showQuizRedirect.value = false
|
||||
try {
|
||||
await GenerateGoPracticalExams(examCount.value)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
isGeneratingExams.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Detail dialog
|
||||
function openModal(se: StudyElement) {
|
||||
activeElement.value = se
|
||||
nextTick(() => {
|
||||
// Render mermaid diagrams after rendering markdown
|
||||
// @ts-ignore
|
||||
if (window.mermaid) {
|
||||
setTimeout(() => {
|
||||
// @ts-ignore
|
||||
window.mermaid.run()
|
||||
}, 100)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
activeElement.value = null
|
||||
}
|
||||
|
||||
// Print and export PDF helpers
|
||||
function printSingleElement(se: StudyElement) {
|
||||
const printWindow = window.open('', '_blank')
|
||||
if (!printWindow) return
|
||||
|
||||
const markdownHtml = renderMarkdown(se.content)
|
||||
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>학습 노하우 - 문제 #${se.questionId}</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
body {
|
||||
padding: 50px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: white;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #1e3a8a;
|
||||
border-bottom: 3px solid #1e3a8a;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.meta-box {
|
||||
background-color: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.math-display { margin: 16px 0; overflow-x: auto; text-align: center; }
|
||||
.math-inline { padding: 0 4px; }
|
||||
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; }
|
||||
.prose th, .prose td { border: 1px solid #e2e8f0; padding: 10px 14px; text-align: left; }
|
||||
.prose th { background-color: #f1f5f9; font-weight: bold; }
|
||||
.mermaid { margin: 20px 0; text-align: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="title">학습요소 개념 노트 (문제 ID: #${se.questionId})</div>
|
||||
<div class="meta-box">
|
||||
<div class="font-bold mb-1" style="color: #2563eb;">기출문제 지문:</div>
|
||||
<div class="opacity-80">${se.questionText}</div>
|
||||
</div>
|
||||
<div class="prose max-w-none">
|
||||
${markdownHtml}
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></` + `script>
|
||||
<script>
|
||||
window.mermaid.initialize({ startOnLoad: true, theme: 'default' });
|
||||
window.onload = function() {
|
||||
setTimeout(function() {
|
||||
window.print();
|
||||
window.close();
|
||||
}, 600);
|
||||
}
|
||||
</` + `script>
|
||||
</body>
|
||||
</html>
|
||||
`)
|
||||
printWindow.document.close()
|
||||
}
|
||||
|
||||
function printAllElements() {
|
||||
const printWindow = window.open('', '_blank')
|
||||
if (!printWindow) return
|
||||
|
||||
let allContentHtml = ''
|
||||
studyElements.value.forEach((se, idx) => {
|
||||
const markdownHtml = renderMarkdown(se.content)
|
||||
allContentHtml += `
|
||||
<div class="page-break-after" style="${idx > 0 ? 'page-break-before: always;' : ''}">
|
||||
<div class="title">학습요소 개념 노트 - 문제 #${se.questionId}</div>
|
||||
<div class="meta-box">
|
||||
<div class="font-bold mb-1" style="color: #2563eb;">기출문제 지문:</div>
|
||||
<div class="opacity-80">${se.questionText}</div>
|
||||
</div>
|
||||
<div class="prose max-w-none">
|
||||
${markdownHtml}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
||||
printWindow.document.write(`
|
||||
<html>
|
||||
<head>
|
||||
<title>전체 학습요소 개념 정리집 - ${selectedCategory.value}</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
body {
|
||||
padding: 50px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: white;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #1e3a8a;
|
||||
border-bottom: 3px solid #1e3a8a;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.meta-box {
|
||||
background-color: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.math-display { margin: 16px 0; overflow-x: auto; text-align: center; }
|
||||
.math-inline { padding: 0 4px; }
|
||||
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; }
|
||||
.prose th, .prose td { border: 1px solid #e2e8f0; padding: 10px 14px; text-align: left; }
|
||||
.prose th { background-color: #f1f5f9; font-weight: bold; }
|
||||
.mermaid { margin: 20px 0; text-align: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${allContentHtml}
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></` + `script>
|
||||
<script>
|
||||
window.mermaid.initialize({ startOnLoad: true, theme: 'default' });
|
||||
window.onload = function() {
|
||||
setTimeout(function() {
|
||||
window.print();
|
||||
window.close();
|
||||
}, 1000);
|
||||
}
|
||||
</` + `script>
|
||||
</body>
|
||||
</html>
|
||||
`)
|
||||
printWindow.document.close()
|
||||
}
|
||||
|
||||
// Redirect helpers
|
||||
function goToQuiz() {
|
||||
// Redirect to the newly generated questions in the "정보보호기사 실기(Go)" category
|
||||
router.push({
|
||||
name: 'quiz',
|
||||
params: {
|
||||
category: '정보보호기사 실기(Go)',
|
||||
subject: '만든 자료',
|
||||
difficulty: '실기(Go)'
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Scoped overrides if needed */
|
||||
.tab-active {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
/* KaTeX and math layout overrides */
|
||||
:deep(.math-display) {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
:deep(.math-inline) {
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
/* Markdown Table and Typography Styling */
|
||||
:deep(.prose) {
|
||||
color: var(--fallback-bc,oklch(var(--bc)/1));
|
||||
}
|
||||
:deep(.prose h1, .prose h2, .prose h3) {
|
||||
font-weight: 800;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
:deep(.prose h2) { font-size: 1.25rem; color: oklch(var(--p)); }
|
||||
:deep(.prose h3) { font-size: 1.1rem; }
|
||||
:deep(.prose p) { margin-bottom: 1rem; }
|
||||
:deep(.prose table) {
|
||||
width: 100%;
|
||||
margin: 1.5rem 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
:deep(.prose th), :deep(.prose td) {
|
||||
border: 1px solid oklch(var(--bc) / 0.1);
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
:deep(.prose th) {
|
||||
background-color: oklch(var(--b3));
|
||||
font-weight: bold;
|
||||
}
|
||||
:deep(.prose ul) {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
:deep(.prose li) {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
:deep(.prose code) {
|
||||
background-color: oklch(var(--b3));
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.375rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
:deep(.prose pre) {
|
||||
background-color: oklch(var(--b3));
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
:deep(.mermaid) {
|
||||
background-color: #1a1f2c;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
margin: 1.5rem 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user