템플릿 slug 구조와 빈 DB 초기화를 정리

frontend/src/views/HomeView.vue

@@ -21,7 +21,7 @@ const templates = computed(() => {
     .filter((item) => item.id !== 'freeform')
     .filter((item) => {
       if (!query.value) return true
-      const haystack = `${item.name || ''} ${item.id || ''}`.toLowerCase()
+      const haystack = `${item.name || ''} ${item.slug || ''}`.toLowerCase()
       return haystack.includes(query.value)
     })
 
@@ -49,8 +49,8 @@ async function loadTemplates() {
 onMounted(loadTemplates)
 watch(() => auth.user?.id, loadTemplates)
 
-function openTopic(templateId) {
-  router.push(topicPath(templateId))
+function openTopic(template) {
+  router.push(topicPath(template?.slug || template?.id || ''))
 }
 
 async function toggleFavorite(template, event) {
@@ -99,14 +99,14 @@ function templateThumbUrl(template) {
       >
         <SvgIcon class="libraryCard__favoriteIcon" :src="kidStarIcon" :size="18" />
       </button>
-      <button class="libraryCard__main" type="button" @click="openTopic(template.id)">
+      <button class="libraryCard__main" type="button" @click="openTopic(template)">
         <div class="libraryCard__thumbWrap">
         <img v-if="templateThumbUrl(template)" class="libraryCard__thumb" :src="templateThumbUrl(template)" :alt="template.name" draggable="false" />
         <div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
       </div>
         <div class="libraryCard__body">
           <div class="libraryCard__title">{{ template.name }}</div>
-          <div class="libraryCard__meta">{{ template.id }}</div>
+          <div class="libraryCard__meta">{{ template.slug || template.id }}</div>
         </div>
       </button>
     </article>