community.js

// Community page functionality
document.addEventListener('DOMContentLoaded', function() {
    // Sample data for similar field (IT/Tech)
    const similarFieldPosts = [
        {
            id: 101,
            company: 'TechStart Co.',
            date: '2024-02-10',
            types: ['기술적 실패', '클라우드 인프라'],
            description: 'AWS 마이그레이션 중 데이터 손실 사고. 백업 전략의 부재로 인해 중요 고객 데이터가 소실되었습니다. 복구에 72시간이 소요되었고, 고객 신뢰도가 크게 하락했습니다.',
            feedbackCount: 12,
            isNew: true
        },
        {
            id: 102,
            company: 'DevOps Solutions',
            date: '2024-02-08',
            types: ['기술적 실패', '제품 개발'],
            description: 'CI/CD 파이프라인 오류로 프로덕션에 버그가 배포된 사례입니다. 자동화된 테스트 커버리지가 부족했고, 롤백 프로세스도 명확하지 않았습니다.',
            feedbackCount: 8,
            isNew: false
        },
        {
            id: 103,
            company: 'SecureNet Inc.',
            date: '2024-02-05',
            types: ['보안', '데이터 관리'],
            description: 'SQL 인젝션 공격으로 인한 개인정보 유출 사건. 입력값 검증이 제대로 이루어지지 않았고, 보안 감사도 부족했습니다.',
            feedbackCount: 15,
            isNew: false
        },
        {
            id: 104,
            company: 'MobileApp Studio',
            date: '2024-02-03',
            types: ['제품 개발', '사용자 경험'],
            description: '앱 업데이트 후 크래시율 급증. 다양한 디바이스와 OS 버전에 대한 테스트가 부족했습니다. 사용자 이탈률이 30% 증가했습니다.',
            feedbackCount: 6,
            isNew: false
        },
        {
            id: 105,
            company: 'CloudFirst',
            date: '2024-01-30',
            types: ['기술적 실패', '비용 관리'],
            description: '클라우드 비용 폭증 사례. 리소스 모니터링과 최적화가 이루어지지 않아 예상 비용의 5배가 청구되었습니다.',
            feedbackCount: 10,
            isNew: false
        }
    ];

    // Sample data for different fields
    const differentFieldPosts = [
        {
            id: 201,
            company: 'Marketing Plus',
            date: '2024-02-12',
            types: ['마케팅 실패', '브랜딩'],
            description: '리브랜딩 실패 사례. 기존 고객층과의 커뮤니케이션 부족으로 브랜드 정체성이 혼란스러워졌고, 매출이 40% 감소했습니다.',
            feedbackCount: 9,
            isNew: true
        },
        {
            id: 202,
            company: 'Finance Corp',
            date: '2024-02-09',
            types: ['재무 실패', '투자 관리'],
            description: '고위험 투자 실패로 인한 자금난. 리스크 분산이 제대로 이루어지지 않았고, 시장 변동성을 과소평가했습니다.',
            feedbackCount: 7,
            isNew: false
        },
        {
            id: 203,
            company: 'HR Solutions',
            date: '2024-02-06',
            types: ['인사 관리', '조직 문화'],
            description: '대량 이직 사태. 직원 만족도 조사를 소홀히 했고, 경쟁사 대비 복지가 크게 부족했습니다. 3개월 간 핵심 인력의 60%가 퇴사했습니다.',
            feedbackCount: 11,
            isNew: false
        },
        {
            id: 204,
            company: 'Retail Innovations',
            date: '2024-02-04',
            types: ['운영', '재고 관리'],
            description: '재고 관리 시스템 오류로 인한 대규모 손실. 수요 예측 알고리즘의 오류로 과잉 재고가 발생했고, 유통기한 임박 상품 처리에 막대한 비용이 들었습니다.',
            feedbackCount: 5,
            isNew: false
        },
        {
            id: 205,
            company: 'Customer First',
            date: '2024-02-01',
            types: ['마케팅 실패', '고객 관리'],
            description: 'CRM 시스템 도입 실패. 직원 교육이 부족했고, 기존 시스템과의 통합도 원활하지 않았습니다. 고객 응대 시간이 2배로 증가했습니다.',
            feedbackCount: 8,
            isNew: false
        },
        {
            id: 206,
            company: 'Supply Chain Masters',
            date: '2024-01-28',
            types: ['운영', '공급망 관리'],
            description: '공급망 차질로 인한 납기 지연. 단일 공급업체에 의존한 것이 문제였고, 대체 공급망을 확보하지 못해 3개월간 생산이 중단되었습니다.',
            feedbackCount: 13,
            isNew: false
        }
    ];

    // Display posts
    displayPosts('similar', similarFieldPosts, 'all');
    displayPosts('different', differentFieldPosts, 'all');

    // Filter functionality
    const filterBtns = document.querySelectorAll('.filter-btn');
    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const section = btn.getAttribute('data-section');
            const filter = btn.getAttribute('data-filter');
            
            // Update active state for buttons in this section
            document.querySelectorAll(`[data-section="${section}"]`).forEach(b => {
                b.classList.remove('active');
            });
            btn.classList.add('active');
            
            // Filter and display posts
            const posts = section === 'similar' ? similarFieldPosts : differentFieldPosts;
            displayPosts(section, posts, filter);
        });
    });

    // Fade-in animations
    setupAnimations();
});

function displayPosts(section, posts, filter) {
    const containerId = section === 'similar' ? 'similarPosts' : 'differentPosts';
    const container = document.getElementById(containerId);
    
    // Filter posts
    let filteredPosts = posts;
    if (filter !== 'all') {
        filteredPosts = posts.filter(post => 
            post.types.some(type => type.includes(filter))
        );
    }
    
    if (filteredPosts.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <div class="empty-state-icon">🔍</div>
                <h3>게시글이 없습니다</h3>
                <p>해당 카테고리의 게시글이 아직 없습니다</p>
            </div>
        `;
        return;
    }

    container.innerHTML = filteredPosts.map(post => `
        <div class="post-card" onclick="viewCommunityPost(${post.id})">
            ${post.isNew ? '<span class="new-badge">NEW</span>' : ''}
            <div class="post-header">
                <span class="post-company">🏢 ${post.company}</span>
                <span class="post-date">${post.date}</span>
            </div>
            <div class="post-types">
                ${post.types.map(type => `<span class="post-type-tag">${type}</span>`).join('')}
            </div>
            <div class="post-description">
                ${post.description}
            </div>
            <div class="post-footer">
                <div class="post-stats">
                    <span class="post-stat">💬 ${post.feedbackCount}개</span>
                </div>
                <button class="feedback-btn" onclick="event.stopPropagation(); viewCommunityPost(${post.id})">
                    피드백 작성
                </button>
            </div>
        </div>
    `).join('');
}

function viewCommunityPost(postId) {
    // Save post ID to sessionStorage and navigate to community detail page
    sessionStorage.setItem('currentCommunityPostId', postId);
    window.location.href = 'community-detail.html';
}

function setupAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -100px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, observerOptions);

    const fadeElements = document.querySelectorAll('.fade-in');
    fadeElements.forEach(element => {
        observer.observe(element);
    });
}