[refactor] apply code reviews

src/components/custom/widget/ModelSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseWidgetLayout>
     <template #leftPanel>
-      <LeftSidePanel :nav-items="temp_navigation">
+      <LeftSidePanel v-model="selectedNavItem" :nav-items="temp_navigation">
         <template #header-icon>
           <i-lucide:puzzle class="text-neutral" />
         </template>
@@ -26,13 +26,14 @@
 </template>
 
 <script setup lang="ts">
-import { provide, ref } from 'vue'
+import { provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { NavGroupData, NavItemData } from '@/types/custom_components/navTypes'
 import { OnCloseKey } from '@/types/custom_components/widgetTypes'
 
 import BaseWidgetLayout from './layout/BaseWidgetLayout.vue'
+import LeftSidePanel from './panel/LeftSidePanel.vue'
 import RightSidePanel from './panel/RightSidePanel.vue'
 
 const { t } = useI18n()
@@ -61,4 +62,10 @@ const temp_navigation = ref<(NavItemData | NavGroupData)[]>([
     ]
   }
 ])
+
+const selectedNavItem = ref<string | null>('installed')
+
+watch(selectedNavItem, (newValue) => {
+  console.log('Selected navigation item changed:', newValue)
+})
 </script>

src/components/custom/widget/nav/NavItem.vue

@@ -6,6 +6,8 @@
         ? 'bg-neutral-100 dark-theme:bg-neutral-600 text-neutral'
         : 'text-neutral hover:bg-neutral-50 hover:dark-theme:bg-neutral-700'
     "
+    role="button"
+    @click="onClick"
   >
     <i-lucide:folder class="text-xs text-neutral" />
     <span>
@@ -15,7 +17,8 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
+const { active, onClick } = defineProps<{
   active?: boolean
+  onClick: () => void
 }>()
 </script>

src/components/custom/widget/panel/LeftSidePanel.vue

@@ -34,16 +34,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed } from 'vue'
 
 import { NavGroupData, NavItemData } from '@/types/custom_components/navTypes'
 
 import NavItem from '../nav/NavItem.vue'
 import NavTitle from '../nav/NavTitle.vue'
 import PanelHeader from './PanelHeader.vue'
 
-const { navItems = [] } = defineProps<{
-  navItems: (NavItemData | NavGroupData)[]
+const { navItems = [], modelValue } = defineProps<{
+  navItems?: (NavItemData | NavGroupData)[]
+  modelValue?: string | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
 }>()
 
 const getFirstItemId = () => {
@@ -60,8 +65,11 @@ const getFirstItemId = () => {
     return firstEntry.id
   }
 
-  return null // 해당하는 아이템이 없는 경우
+  return null
 }
 
-const activeItem = ref(getFirstItemId())
+const activeItem = computed({
+  get: () => modelValue ?? getFirstItemId(),
+  set: (value: string | null) => emit('update:modelValue', value)
+})
 </script>

src/components/custom/widget/panel/RightSidePanel.vue

@@ -3,5 +3,3 @@
     <slot></slot>
   </div>
 </template>
-
-<script setup lang="ts"></script>

src/stores/dialogStore.ts

@@ -29,7 +29,7 @@ interface CustomDialogComponentProps {
   closeOnEscape?: boolean
   dismissableMask?: boolean
   unstyled?: boolean
-  headless?: true
+  headless?: boolean
 }
 
 export type DialogComponentProps = InstanceType<typeof GlobalDialog>['$props'] &