<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 30px;
}
.search-box {
display: flex;
margin-bottom: 20px;
}
#search-input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-size: 16px;
}
#search-btn {
padding: 10px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background-color 0.3s;
}
#search-btn:hover {
background-color: #2980b9;
}
.help-nav {
display: flex;
margin-bottom: 20px;
}
.help-categories {
width: 250px;
border-right: 1px solid #ddd;
padding-right: 15px;
}
.category {
cursor: pointer;
padding: 8px 10px;
border-radius: 4px;
transition: background-color 0.3s;
}
.category:hover {
background-color: #f0f0f0;
}
.category.active {
background-color: #e6f2ff;
color: #3498db;
font-weight: bold;
}
.help-content {
flex: 1;
padding-left: 20px;
}
.topic {
display: none;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
margin-bottom: 15px;
}
.topic h3 {
color: #2c3e50;
margin-bottom: 10px;
}
.topic.active {
display: block;
}
#search-results {
display: none;
}
.result-item {
cursor: pointer;
padding: 10px;
border-radius: 4px;
transition: background-color 0.3s;
margin-bottom: 10px;
}
.result-item:hover {
background-color: #f0f0f0;
}
.highlight {
background-color: #ffff99;
font-weight: bold;
}
.back-btn {
display: none;
padding: 8px 15px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-bottom: 15px;
}
.back-btn:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<div class="container">
<h1>도움말 시스템</h1>
<div class="search-box">
<input type="text" id="search-input" placeholder="도움말 검색...">
<button id="search-btn"><i class="fas fa-search"></i> 검색</button>
</div>
<button class="back-btn" id="back-to-help">도움말 목록으로 돌아가기</button>
<div id="search-results">
<h2>검색 결과</h2>
<div id="results-list"></div>
</div>
<div class="help-nav" id="help-content">
<div class="help-categories">
<h2>카테고리</h2>
<div class="category active" data-category="getting-started">시작하기</div>
<div class="category" data-category="account">계정 관리</div>
<div class="category" data-category="features">주요 기능</div>
<div class="category" data-category="troubleshooting">문제 해결</div>
</div>
<div class="help-content">
<!-- 시작하기 카테고리 -->
<div class="topic active" data-category="getting-started" id="intro">
<h3>프로그램 소개</h3>
<p>이 프로그램은 사용자가 쉽게 작업을 수행할 수 있도록 설계되었습니다. 주요 기능과 인터페이스에 대한 설명을 제공합니다.</p>
</div>
<div class="topic" data-category="getting-started" id="installation">
<h3>설치 방법</h3>
<p>프로그램을 설치하기 위한 단계별 지침을 제공합니다.</p>
<ol>
<li>웹사이트에서 설치 파일을 다운로드합니다.</li>
<li>다운로드한 파일을 실행합니다.</li>
<li>설치 마법사의 지시를 따릅니다.</li>
<li>설치가 완료되면 프로그램을 실행합니다.</li>
</ol>
</div>
<!-- 계정 관리 카테고리 -->
<div class="topic" data-category="account" id="create-account">
<h3>계정 생성</h3>
<p>새 계정을 만들기 위한 절차를 설명합니다.</p>
</div>
<div class="topic" data-category="account" id="login">
<h3>로그인</h3>
<p>프로그램에 로그인하는 방법을 설명합니다.</p>
</div>
<div class="topic" data-category="account" id="password">
<h3>비밀번호 재설정</h3>
<p>비밀번호를 잊어버렸을 때 재설정하는 방법을 안내합니다.</p>
</div>
<!-- 주요 기능 카테고리 -->
<div class="topic" data-category="features" id="feature1">
<h3>기능 1: 데이터 관리</h3>
<p>데이터를 효율적으로 관리하는 방법을 설명합니다.</p>
</div>
<div class="topic" data-category="features" id="feature2">
<h3>기능 2: 보고서 생성</h3>
<p>다양한 보고서를 생성하고 내보내는 방법을 안내합니다.</p>
</div>
<!-- 문제 해결 카테고리 -->
<div class="topic" data-category="troubleshooting" id="error-codes">
<h3>오류 코드 해석</h3>
<p>일반적인 오류 코드와 해결 방법을 제공합니다.</p>
</div>
<div class="topic" data-category="troubleshooting" id="connection">
<h3>연결 문제</h3>
<p>네트워크 연결 문제를 해결하는 방법을 안내합니다.</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 카테고리 클릭 이벤트
$('.category').click(function() {
// 활성화된 카테고리 변경
$('.category').removeClass('active');
$(this).addClass('active');
// 선택된 카테고리의 토픽만 보이게 설정
var category = $(this).data('category');
$('.topic').hide();
$('.topic[data-category="' + category + '"]').first().show();
});
// 검색 기능
$('#search-btn').click(performSearch);
$('#search-input').keypress(function(e) {
if(e.which == 13) { // Enter key
performSearch();
}
});
// 뒤로가기 버튼
$('#back-to-help').click(function() {
$('#search-results').hide();
$('#help-content').show();
$(this).hide();
});
function performSearch() {
var query = $('#search-input').val().toLowerCase();
if(query.trim() === '') return;
var results = [];
// 모든 토픽에서 검색
$('.topic').each(function() {
var topicTitle = $(this).find('h3').text();
var topicContent = $(this).text();
var topicId = $(this).attr('id');
if(topicTitle.toLowerCase().includes(query) ||
topicContent.toLowerCase().includes(query)) {
results.push({
id: topicId,
title: topicTitle,
content: $(this).find('p').first().text(),
category: $(this).data('category')
});
}
});
// 검색 결과 표시
displaySearchResults(results, query);
}
function displaySearchResults(results, query) {
var resultsList = $('#results-list');
resultsList.empty();
if(results.length === 0) {
resultsList.append('<p>검색 결과가 없습니다.</p>');
} else {
$.each(results, function(i, result) {
var resultItem = $('<div class="result-item" data-id="' + result.id + '" data-category="' + result.category + '">' +
'<h3>' + highlightText(result.title, query) + '</h3>' +
'<p>' + highlightText(result.content, query) + '</p>' +
'</div>');
resultsList.append(resultItem);
});
// 검색 결과 항목 클릭 이벤트
$('.result-item').click(function() {
var id = $(this).data('id');
var category = $(this).data('category');
// 해당 카테고리 활성화
$('.category').removeClass('active');
$('.category[data-category="' + category + '"]').addClass('active');
// 해당 토픽 보이기
$('.topic').hide();
$('#' + id).show();
// 검색 결과 숨기기, 도움말 내용 보이기
$('#search-results').hide();
$('#help-content').show();
});
}
// 도움말 내용 숨기고 검색 결과 표시
$('#help-content').hide();
$('#search-results').show();
$('#back-to-help').show();
}
function highlightText(text, query) {
if (!query) return text;
var regex = new RegExp('(' + query + ')', 'gi');
return text.replace(regex, '<span class="highlight">$1</span>');
}
});
</script>
</body>
</html>
