category.html

---
layout: default
---

<link rel="stylesheet" href="{{ site.baseurl }}/css/custom/category.css">

<div class="max-w-4xl mx-auto px-4 md:px-12 py-8 md:py-12">
    {% assign default_lang = site.default_lang | default: 'ko' %}
    {% assign visible_categories_count = 0 %}
    {% for category in site.categories %}
    {% assign localized_posts_count = 0 %}
    {% for post in category[1] %}
    {% if post.lang == nil or post.lang == '' or post.lang == default_lang %}
    {% assign localized_posts_count = localized_posts_count | plus: 1 %}
    {% endif %}
    {% endfor %}
    {% if localized_posts_count > 0 %}
    {% assign visible_categories_count = visible_categories_count | plus: 1 %}
    {% endif %}
    {% endfor %}
    <div class="category-header">
        <h1>Category</h1>
        <p>현재까지 {{ visible_categories_count }}개의 주제를 다루고 있습니다.</p>
    </div>
    
    <div class="category-tags">
        {% for category in site.categories %}
        {% assign localized_posts_count = 0 %}
        {% for post in category[1] %}
        {% if post.lang == nil or post.lang == '' or post.lang == default_lang %}
        {% assign localized_posts_count = localized_posts_count | plus: 1 %}
        {% endif %}
        {% endfor %}
        {% if localized_posts_count > 0 %}
        <a href="#{{ category | first | slugify }}" class="category-tag">
            {{ category | first }}
            <span class="category-tag-count">({{ localized_posts_count }})</span>
        </a>
        {% endif %}
        {% endfor %}
    </div>
    
    <div class="category-sections">
        {% for category in site.categories %}
        {% assign localized_posts_count = 0 %}
        {% for post in category[1] %}
        {% if post.lang == nil or post.lang == '' or post.lang == default_lang %}
        {% assign localized_posts_count = localized_posts_count | plus: 1 %}
        {% endif %}
        {% endfor %}
        {% if localized_posts_count > 0 %}
        <section id="{{ category | first | slugify }}" class="category-section">
            <h2 class="category-section-title">
                {{ category | first }} ({{ localized_posts_count }})
            </h2>
            <div class="category-posts">
                {% assign sorted_posts = category[1] | sort: 'date' | reverse %}
                {% for post in sorted_posts %}
                {% if post.lang == nil or post.lang == '' or post.lang == default_lang %}
                <div class="category-post-item">
                    <a href="{{ site.baseurl }}{{ post.url }}" class="category-post-link">
                        {{ post.title }}
                    </a>
                    <time datetime="{{ post.date | date_to_xmlschema }}" class="category-post-date">
                        {{ post.date | date: "%Y년 %m월 %d일" }}
                    </time>
                </div>
                {% endif %}
                {% endfor %}
            </div>
        </section>
        {% endif %}
        {% endfor %}
    </div>
</div>

<script>
    document.querySelectorAll('.category-tag[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            const targetElement = document.getElementById(targetId);
            if (targetElement) {
                document.querySelectorAll('.category-tag').forEach(tag => {
                    tag.classList.remove('active');
                });
                
                this.classList.add('active');
                
                const headerOffset = 80;
                const elementPosition = targetElement.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                
                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    function updateActiveTag() {
        const sections = document.querySelectorAll('.category-section');
        const tags = document.querySelectorAll('.category-tag[href^="#"]');
        const headerOffset = 100;
        
        let currentSection = '';
        
        sections.forEach(section => {
            const sectionTop = section.getBoundingClientRect().top;
            const sectionId = section.getAttribute('id');
            
            if (sectionTop <= headerOffset && sectionTop >= -200) {
                currentSection = sectionId;
            }
        });
        
        tags.forEach(tag => {
            tag.classList.remove('active');
        });
        
        if (currentSection) {
            const activeTag = document.querySelector(`.category-tag[href="#${currentSection}"]`);
            if (activeTag) {
                activeTag.classList.add('active');
            }
        }
    }
    
    let scrollTimeout;
    window.addEventListener('scroll', function() {
        if (scrollTimeout) {
            clearTimeout(scrollTimeout);
        }
        scrollTimeout = setTimeout(updateActiveTag, 100);
    });
    
    updateActiveTag();

    function shuffleCategoryGroups() {
        var container = document.querySelector('.category-sections');
        var tagContainer = document.querySelector('.category-tags');
        if (!container || !tagContainer) return;

        var sections = Array.from(container.querySelectorAll('.category-section'));
        var tags = Array.from(tagContainer.querySelectorAll('.category-tag'));

        var pairs = sections.map(function(section, i) {
            return { section: section, tag: tags[i] };
        });

        for (var i = pairs.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = pairs[i];
            pairs[i] = pairs[j];
            pairs[j] = temp;
        }

        pairs.forEach(function(pair) {
            container.appendChild(pair.section);
            tagContainer.appendChild(pair.tag);
        });
    }

    shuffleCategoryGroups();
</script>