diff --git a/ApiTestManager/src/APITester.js b/ApiTestManager/src/APITester.js index d94c9d8..5fa01b3 100644 --- a/ApiTestManager/src/APITester.js +++ b/ApiTestManager/src/APITester.js @@ -90,36 +90,48 @@ class APITester { collectionTemplate(collection, index) { return ` -
  • -
    +
  • +
    - - + +
    -
    +
      - ${collection.apis.map((api, apiIndex) => this.collectionApiTemplate(api, apiIndex, collection.id)).join('')} + ${collection.apis.map((api, apiIndex) => + this.collectionApiTemplate(api, apiIndex, collection.id) + ).join('')}
    -
    • - `; + `; } collectionApiTemplate(api, apiIndex, collectionId) { return ` -
  • - ${api.name} -
    - - -
    -
    • - `; +
  • + ${api.name} +
    + + +
    +
    • `; } init(servers) { @@ -133,6 +145,7 @@ class APITester { this.serverManager = new ServerManager(this.servers); this.bindEvents(); this.loadCollections(); + } bindEvents() { @@ -163,11 +176,59 @@ class APITester { $(document).on('change', '.request_headers input', this.handleUIUpdate.bind(this)); $(document).on('change', '.api_request_info select, .api_request_info input', this.handleUIUpdate.bind(this)); $(document).on('change', '.api_request_info select', this.handleUpdateServer.bind(this)); + $('#api_search').on('input', this.handleSearch.bind(this)); window.addEventListener('resize', this.resizeEditor.bind(this)); } + handleSearch(event) { + + const searchTerm = (event !== undefined)? event.target.value.toLowerCase() : ''; + console.log("검색어:", searchTerm); + + this.collections.forEach(collection => { + const collectionMatches = collection.name.toLowerCase().includes(searchTerm); + console.log(`컬렉션 "${collection.name}" 검색어 매칭 여부: ${collectionMatches}`); + + if (searchTerm === '') { + // 검색어가 없으면 모든 컬렉션과 API를 표시 + collection.show = true; + collection.apis.forEach(api => { + api.show = true; + }); + console.log(`검색어가 없으므로 컬렉션 "${collection.name}"과 모든 API를 표시합니다.`); + } else if (collectionMatches) { + // 컬렉션명이 검색어와 매칭되면 모두 표시 + collection.show = true; + collection.apis.forEach(api => { + api.show = true; + }); + console.log(`컬렉션 "${collection.name}"이(가) 검색어와 매칭되어 모든 API를 표시합니다.`); + } else { + // 컬렉션명이 매칭되지 않을 경우, 하위 API만 체크 + let anyApiMatches = false; + collection.apis.forEach(api => { + if (api.name.toLowerCase().includes(searchTerm)) { + api.show = true; + anyApiMatches = true; + console.log(`컬렉션 "${collection.name}"의 API "${api.name}"가 검색어와 매칭됩니다.`); + } else { + api.show = false; + console.log(`컬렉션 "${collection.name}"의 API "${api.name}"는 검색어와 매칭되지 않습니다.`); + } + }); + // 하위 API 중 하나라도 매칭되면 컬렉션도 보여야 함 + collection.show = anyApiMatches; + console.log(`컬렉션 "${collection.name}" 자체는 매칭되지 않지만, 하위 API 매칭 여부: ${anyApiMatches}`); + } + }); + + // 무한 루프 방지를 위해 AJAX 호출 없이 바로 렌더링 + this.renderCollections(); + } + + resizeEditor() { //FIXME: 창 크기 변경시 자동으로 editor 크기가 조정되지 않아서, 0으로 강제 변경후 다시 layout() 호출 @@ -531,11 +592,13 @@ class APITester { } renderCollections() { - let select = $('#modal_collection'); - let sidemenu = $(this.collectionTarget); - select.empty(); - sidemenu.empty(); + const sidemenu = $(this.collectionTarget); + const select = $('#modal_collection'); + sidemenu.empty(); + select.empty(); + + // 컬렉션과 API 렌더링 (이미 handleSearch에서 show 플래그가 설정되어 있다고 가정) for (let i = 0; i < this.collections.length; i++) { sidemenu.append(this.renderCollection(this.collections[i], i)); let option = $('