디스커션 경로 검색 기능 추가

web_src/js/components/DiscussionTree.vue

@@ -2,19 +2,24 @@
 import DiscussionTreeItem from './DiscussionTreeItem.vue';
 import {discussionTreeStore} from '../modules/stores.js';
 import {setFileFolding} from '../features/file-fold.js';
+import {debounce} from 'lodash'; 
 
 export default {
   components: {DiscussionTreeItem},
   data: () => {
     return {
-      store: discussionTreeStore()
+      localSearchInput: '', 
+      store: discussionTreeStore(), 
     };
   },
   computed: {
     fileTree() {
       const result = [];
       for (const file of this.store.files) {
         // Split file into directories
+        const filterEnabled = this.store.searchInput.length !== 0; 
+
+        if (filterEnabled && !file.Name.includes(this.store.searchInput)) continue;
         const names = file.Name.split('/');
         let index = 0;
         let parent = null;
@@ -99,13 +104,19 @@ export default {
       }
     },
   },
+  watch: {
+    localSearchInput: debounce(function (value) {
+      this.store.searchInput = value; 
+    }, 33);
+  }
 };
 </script>
 <template>
 
 <div class="discussion-file-tree-items" >
   <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
-  <DiscussionTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
+  <input type="text" v-model="localSearchInput" placeholder="원하는 경로를 검색해보세요"  class="search-input">
+  <DiscussionTreeItem v-for="item in fileTree" :key="item.name" :item="item" />
 </div>
 
 </template>
@@ -116,4 +127,16 @@ export default {
   gap: 1px;
   margin-right: .5rem;
 }
+
+.search-input {
+  border: 1px solid #d0d7de; 
+  border-radius: 5px; 
+  width: 100%; 
+  padding: 5px; 
+  margin-bottom: 6px; 
+}
+
+.search-input::placeholder {
+  font-size: 12px;
+}
 </style>

web_src/js/components/DiscussionTreeItem.vue

@@ -29,9 +29,9 @@ export default {
   </a>
   <div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
     <!-- directory -->
-    <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
     <SvgIcon class="text primary" name="octicon-file-directory-fill"/>
     <span class="gt-ellipsis">{{ item.name }}</span>
+    <SvgIcon  name='octicon-chevron-down' v-show="!collapsed"/>
   </div>
 
   <div v-if="item.children?.length" v-show="!collapsed" class="sub-items">
@@ -52,10 +52,6 @@ a, a:hover {
   border-left: 1px solid var(--color-secondary);
 }
 
-.sub-items .item-file {
-  padding-left: 18px;
-}
-
 .item-file.selected {
   color: var(--color-text);
   background: var(--color-active);

web_src/js/modules/stores.js

@@ -117,6 +117,7 @@ export function discussionTreeStore() {
       selectedItem: null, 
       contents: [], 
       checkedItems: [], 
+      searchInput: ''
     });
     window.config.pageData.discussionTreeInfo = discussionTreeStoreReactive;
   }