API 데이터 호출 및 트리 생성 로직

$(document).ready(function() {
    
    // [함수] 재귀적으로 트리를 생성 (기존과 동일)
    function createTree(data) {
        let html = "";
        data.forEach(item => {
            if (item.type === "folder") {
                html += `<li>
                            <div class="folder">📂 ${item.name}</div>
                            <ul>${createTree(item.children)}</ul>
                         </li>`;
            } else {
                html += `<li class="file">📄 ${item.name}</li>`;
            }
        });
        return html;
    }

    // [서버 통신] API를 통해 데이터 가져오기
    function loadTreeData() {
        $.ajax({
            url: 'https://api.example.com/tree-data', // 실제 API 주소
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                // 1. 트리 생성 및 삽입
                const treeHtml = createTree(data);
                $('#main-tree').html(treeHtml);
                
                // 2. 생성 직후 초기 상태 설정 (전체 열기)
                $('.folder').addClass('active').next('ul').show();
            },
            error: function(xhr, status, error) {
                console.error("데이터 로드 실패:", error);
                $('#main-tree').html('<li style="color:red;">데이터를 불러오는 중 오류가 발생했습니다.</li>');
            }
        });
    }

    // 페이지 로드 시 호출
    loadTreeData();

    // ... 이후 이벤트 리스너(클릭, 검색 등)는 동일하게 유지 ...
});

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.