Update index.html

index.html

@@ -13,24 +13,32 @@
             --border-color: #e0ddd5;
         }
 
-        body { font-family: 'Pretendard', sans-serif; background-color: var(--bg-color); color: var(--primary-color); margin: 0; line-height: 1.6; }
+        body { font-family: 'Pretendard', sans-serif; background-color: var(--bg-color); color: var(--primary-color); margin: 0; padding: 0; line-height: 1.6; }
         nav { position: sticky; top: 0; background: rgba(249, 247, 242, 0.9); backdrop-filter: blur(10px); padding: 15px; text-align: center; border-bottom: 1px solid var(--border-color); z-index: 100; }
         nav a { margin: 0 15px; text-decoration: none; color: var(--primary-color); font-weight: 600; cursor: pointer; }
         header { text-align: center; padding: 40px 20px; }
         h1 { font-weight: 300; letter-spacing: 8px; color: var(--accent-color); margin: 0; }
 
-        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
+        .container { max-width: 1000px; margin: 0 auto; padding: 0 20px 100px; }
         section { display: none; }
-        section.active { display: block; }
+        section.active { display: block; animation: fadeIn 0.5s; }
 
-        /* 사전 스타일 */
-        .search-box { width: 100%; padding: 15px 25px; border: 1px solid var(--border-color); border-radius: 30px; font-size: 1rem; margin-bottom: 25px; box-sizing: border-box; outline: none; box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+        /* 필터 버튼 스타일 */
+        .filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 25px; }
+        .filter-btn { background: var(--card-bg); border: 1px solid var(--border-color); padding: 8px 16px; cursor: pointer; border-radius: 20px; font-size: 0.85rem; transition: 0.2s; }
+        .filter-btn.active { background: var(--accent-color); color: white; border-color: var(--accent-color); }
+
+        /* 검색 및 테이블 스타일 */
+        .search-box { width: 100%; padding: 15px 25px; border: 1px solid var(--border-color); border-radius: 30px; font-size: 1rem; margin-bottom: 20px; box-sizing: border-box; outline: none; }
         .table-wrapper { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
         table { width: 100%; border-collapse: collapse; }
         th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #eee; }
-        th { background: #f1eee6; color: #777; font-size: 0.9rem; }
-        .word-cell { font-weight: bold; color: var(--accent-color); width: 25%; }
-        .variation-row { background: #faf9f6; font-size: 0.95rem; }
+        th { background: #f1eee6; color: #777; font-size: 0.9rem; font-weight: 500; }
+        .word-cell { font-weight: bold; color: var(--accent-color); width: 30%; }
+        .path-cell { font-size: 0.75rem; color: #ccc; width: 20%; }
+        .variation-row { background: #faf9f6; }
 
         .card { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
     </style>
@@ -44,19 +52,24 @@
 
 <header>
     <h1>HUIUCL</h1>
-    <div style="color:#999; font-size:0.8rem; margin-top:5px;">SYSTEM ARCHIVE v2.0</div>
+    <div style="color:#999; font-size:0.8rem; margin-top:5px;">v2.0 Revision - Database</div>
 </header>
 
 <div class="container">
     <section id="dictionary" class="active">
-        <input type="text" id="searchInput" class="search-box" placeholder="단어, 뜻, 파생어를 입력하세요..." oninput="renderTable()">
+        <input type="text" id="searchInput" class="search-box" placeholder="단어, 뜻, 파생어 검색..." oninput="renderTable()">
+        
+        <div class="filter-container" id="categoryButtons">
+            <button class="filter-btn active" onclick="filterCategory('모두', this)">모두 보기</button>
+        </div>
+
         <div class="table-wrapper">
             <table>
                 <thead>
                     <tr>
                         <th>단어</th>
-                        <th>의미 (KO)</th>
-                        <th>Meaning (EN)</th>
+                        <th>의미</th>
+                        <th>분류</th>
                     </tr>
                 </thead>
                 <tbody id="dictBody"></tbody>
@@ -66,99 +79,131 @@
 
     <section id="grammar">
         <div class="card" id="grammarBox">
-            <h2>Grammar Settings</h2>
+            <h2>Grammar & Phonology</h2>
             <div id="settingsContent">데이터를 불러오는 중...</div>
         </div>
     </section>
 </div>
 
 <script>
-    let rawData = {};
+    let conlangData = {};
+    let currentCategory = '모두';
 
     function showSection(id) {
         document.querySelectorAll('section').forEach(s => s.classList.remove('active'));
         document.getElementById(id).classList.add('active');
     }
 
-    // JSON 로드
     window.onload = () => {
         fetch('Huiucl.json')
             .then(res => res.json())
             .then(data => {
-                rawData = data;
+                conlangData = data;
+                initFilterButtons();
                 renderTable();
                 renderGrammar();
             })
             .catch(err => {
-                document.getElementById('dictBody').innerHTML = '<tr><td colspan="3" style="text-align:center; padding:50px;">JSON 파일을 찾을 수 없습니다. (Huiucl.json 확인)</td></tr>';
+                console.error(err);
+                document.getElementById('dictBody').innerHTML = '<tr><td colspan="3">데이터 로드 실패 (Huiucl.json 파일을 확인하세요)</td></tr>';
             });
     };
 
+    // 상단 품사/카테고리 버튼 생성
+    function initFilterButtons() {
+        const btnContainer = document.getElementById('categoryButtons');
+        // JSON의 최상위 키들을 버튼으로 만듦 (Settings 제외)
+        Object.keys(conlangData).forEach(key => {
+            if (key === "Settings") return;
+            const btn = document.createElement('button');
+            btn.className = 'filter-btn';
+            btn.innerText = key;
+            btn.onclick = (e) => filterCategory(key, e.target);
+            btnContainer.appendChild(btn);
+        });
+    }
+
+    function filterCategory(cat, btn) {
+        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentCategory = cat;
+        renderTable();
+    }
+
     function renderTable() {
         const query = document.getElementById('searchInput').value.toLowerCase();
         const body = document.getElementById('dictBody');
         body.innerHTML = '';
 
-        // 재귀적으로 단어 데이터를 찾는 함수
-        function findEntries(obj) {
-            for (let key in obj) {
-                const item = obj[key];
+        const categories = currentCategory === '모두' 
+            ? Object.keys(conlangData).filter(k => k !== "Settings") 
+            : [currentCategory];
+
+        categories.forEach(cat => {
+            traverse(conlangData[cat], cat, query);
+        });
+    }
+
+    // 데이터를 깊게 탐색하며 단어를 추출하는 함수
+    function traverse(obj, path, query) {
+        for (let key in obj) {
+            const item = obj[key];
+            
+            // 1. 일반 단어 구조 (meaning_ko / 뜻 필드 존재 시)
+            if (item && typeof item === 'object' && (item.meaning_ko || item.뜻)) {
+                const kor = item.meaning_ko || item.뜻;
+                const eng = item.meaning_en || '';
                 
-                // 단어 엔트리 조건: meaning_ko 필드가 있을 때
-                if (item && typeof item === 'object' && item.meaning_ko) {
-                    const word = key;
-                    const kor = item.meaning_ko;
-                    const eng = item.meaning_en || '';
-
-                    // 검색 조건 대조
-                    if (word.toLowerCase().includes(query) || kor.includes(query) || eng.toLowerCase().includes(query)) {
-                        appendRow(word, kor, eng, false);
-                    }
+                if (key.toLowerCase().includes(query) || kor.toLowerCase().includes(query)) {
+                    appendRow(key, kor, path, false);
+                }
 
-                    // 파생어(derivations) 순회
-                    if (item.derivations) {
-                        for (let dKey in item.derivations) {
-                            const dMean = item.derivations[dKey];
-                            if (dKey.toLowerCase().includes(query) || dMean.toLowerCase().includes(query)) {
-                                appendRow(dKey, dMean, '-', true);
-                            }
+                // 파생어 처리 (derivations 키 확인)
+                if (item.derivations) {
+                    for (let dKey in item.derivations) {
+                        const dMean = item.derivations[dKey];
+                        if (dKey.toLowerCase().includes(query) || dMean.toLowerCase().includes(query)) {
+                            appendRow(dKey, dMean, path, true);
                         }
                     }
-                } else if (item && typeof item === 'object' && key !== "Settings") {
-                    // 더 깊은 계층이 있다면 다시 탐색
-                    findEntries(item);
                 }
+            } 
+            // 2. 특수 단어 (조사, 접속사 등 - 단순 키-값 쌍인 경우)
+            else if (typeof item === 'string') {
+                if (key.toLowerCase().includes(query) || item.toLowerCase().includes(query)) {
+                    appendRow(key, item, path, false);
+                }
+            }
+            // 3. 하위 카테고리가 더 있는 경우 (재귀 탐색)
+            else if (item && typeof item === 'object') {
+                traverse(item, path + " > " + key, query);
             }
         }
-
-        findEntries(rawData);
     }
 
-    function appendRow(word, kor, eng, isSub) {
+    function appendRow(word, meaning, path, isSub) {
         const body = document.getElementById('dictBody');
         const row = body.insertRow();
         if (isSub) row.className = 'variation-row';
         
         row.innerHTML = `
             <td class="word-cell">${isSub ? '└ ' : ''}${word}</td>
-            <td>${kor}</td>
-            <td style="color:#aaa; font-size:0.85rem;">${eng}</td>
+            <td>${meaning}</td>
+            <td class="path-cell">${path}</td>
         `;
     }
 
     function renderGrammar() {
         const target = document.getElementById('settingsContent');
-        if (!rawData.Settings) {
-            target.innerHTML = "설정 데이터가 없습니다.";
-            return;
-        }
-        const s = rawData.Settings;
+        if (!conlangData.Settings) return;
+        const s = conlangData.Settings;
         target.innerHTML = `
             <h3>Phonology</h3>
-            <p>Vowels: ${Object.keys(s.Phonology.Vowels).join(', ')}</p>
-            <p>Consonants: ${Object.keys(s.Phonology.Consonants).join(', ')}</p>
+            <p><strong>Vowels:</strong> ${Object.keys(s.Phonology.Vowels).join(', ')}</p>
+            <p><strong>Consonants:</strong> ${Object.keys(s.Phonology.Consonants).join(', ')}</p>
+            <hr>
             <h3>Syntax</h3>
-            <p>Order: ${s.Syntax.Word_Order.join(', ')}</p>
+            <p><strong>Word Order:</strong> ${s.Syntax.Word_Order.join(' / ')}</p>
             <p>${s.Syntax.Imperative["2"]}</p>
         `;
     }