릴리스: v1.4.32 내부 이름층 topic/template 정리 마감

frontend/src/composables/useAdminFeaturedTemplates.js

@@ -0,0 +1,93 @@
+import { nextTick } from 'vue'
+import Sortable from 'sortablejs'
+
+export function useAdminFeaturedTemplates({
+  api,
+  featuredListEl,
+  featuredSortable,
+  featuredTemplateIds,
+  templates,
+  resetMessages,
+  success,
+  error,
+}) {
+  function destroyFeaturedSortable() {
+    if (featuredSortable.value) {
+      featuredSortable.value.destroy()
+      featuredSortable.value = null
+    }
+  }
+
+  async function syncFeaturedSortable() {
+    await nextTick()
+    destroyFeaturedSortable()
+    if (!featuredListEl.value) return
+
+    featuredSortable.value = Sortable.create(featuredListEl.value, {
+      animation: 160,
+      draggable: '[data-featured-id]',
+      handle: '[data-featured-handle]',
+      ghostClass: 'ghost',
+      chosenClass: 'chosen',
+      onEnd: (evt) => {
+        if (evt.oldIndex == null || evt.newIndex == null || evt.oldIndex === evt.newIndex) return
+        const nextIds = [...featuredTemplateIds.value]
+        const [moved] = nextIds.splice(evt.oldIndex, 1)
+        nextIds.splice(evt.newIndex, 0, moved)
+        featuredTemplateIds.value = nextIds
+      },
+    })
+  }
+
+  function addFeaturedTemplate(templateId) {
+    resetMessages()
+    if (!templateId || featuredTemplateIds.value.includes(templateId)) return
+    if (featuredTemplateIds.value.length >= 50) {
+      error.value = '상단 고정 템플릿은 최대 50개까지만 설정할 수 있어요.'
+      return
+    }
+    featuredTemplateIds.value = [...featuredTemplateIds.value, templateId]
+    syncFeaturedSortable()
+  }
+
+  function removeFeaturedTemplate(templateId) {
+    resetMessages()
+    featuredTemplateIds.value = featuredTemplateIds.value.filter((id) => id !== templateId)
+    syncFeaturedSortable()
+  }
+
+  function moveFeaturedTemplate(templateId, direction) {
+    const currentIndex = featuredTemplateIds.value.indexOf(templateId)
+    const nextIndex = currentIndex + direction
+    if (currentIndex < 0 || nextIndex < 0 || nextIndex >= featuredTemplateIds.value.length) return
+    const nextIds = [...featuredTemplateIds.value]
+    const [moved] = nextIds.splice(currentIndex, 1)
+    nextIds.splice(nextIndex, 0, moved)
+    featuredTemplateIds.value = nextIds
+    syncFeaturedSortable()
+  }
+
+  async function saveFeaturedOrder() {
+    resetMessages()
+    try {
+      const data = await api.updateAdminTemplateDisplayOrder({ topicIds: featuredTemplateIds.value })
+      templates.value = data.templates || []
+      featuredTemplateIds.value = templates.value
+        .filter((template) => template.displayRank != null)
+        .sort((a, b) => a.displayRank - b.displayRank)
+        .map((template) => template.id)
+      success.value = '홈 화면 템플릿 순서를 저장했어요.'
+    } catch (e) {
+      error.value = '템플릿 순서 저장에 실패했어요.'
+    }
+  }
+
+  return {
+    destroyFeaturedSortable,
+    syncFeaturedSortable,
+    addFeaturedTemplate,
+    removeFeaturedTemplate,
+    moveFeaturedTemplate,
+    saveFeaturedOrder,
+  }
+}