From b94aa543651f410843c93487fb36379e76c88899 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Thu, 28 Aug 2025 19:38:21 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BA=90=EB=A6=AD=ED=84=B0=20=EC=B1=97?=
 =?UTF-8?q?=EB=B4=87=20=ED=81=90=EB=A0=88=EC=9D=B4=EC=85=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/character.js                       |  59 ++-
 src/components/SideMenu.vue                |   5 +
 src/router/index.js                        |  10 +
 src/views/Chat/CharacterCuration.vue       | 341 ++++++++++++++++
 src/views/Chat/CharacterCurationDetail.vue | 429 +++++++++++++++++++++
 5 files changed, 843 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Chat/CharacterCuration.vue
 create mode 100644 src/views/Chat/CharacterCurationDetail.vue

diff --git a/src/api/character.js b/src/api/character.js
index 5e70f90..62b7829 100644
--- a/src/api/character.js
+++ b/src/api/character.js
@@ -200,6 +200,53 @@ async function updateCharacterImageOrder(characterId, imageIds) {
   return Vue.axios.put('/admin/chat/character/image/orders', { characterId, ids: imageIds })
 }
 
+// 캐릭터 큐레이션 목록
+async function getCharacterCurationList() {
+  return Vue.axios.get('/admin/chat/character/curation/list')
+}
+
+// 캐릭터 큐레이션 등록
+async function createCharacterCuration({ title, isAdult, isActive }) {
+  return Vue.axios.post('/admin/chat/character/curation/register', { title, isAdult, isActive })
+}
+
+// 캐릭터 큐레이션 수정
+// payload: { id: Long, title?, isAdult?, isActive? }
+async function updateCharacterCuration(payload) {
+  return Vue.axios.put('/admin/chat/character/curation/update', payload)
+}
+
+// 캐릭터 큐레이션 삭제
+async function deleteCharacterCuration(curationId) {
+  return Vue.axios.delete(`/admin/chat/character/curation/${curationId}`)
+}
+
+// 캐릭터 큐레이션 정렬 순서 변경
+async function updateCharacterCurationOrder(ids) {
+  return Vue.axios.put('/admin/chat/character/curation/reorder', { ids })
+}
+
+// 큐레이션에 캐릭터 등록 (다중 등록)
+// characterIds: Array<Long>
+async function addCharacterToCuration(curationId, characterIds) {
+  return Vue.axios.post(`/admin/chat/character/curation/${curationId}/characters`, { characterIds })
+}
+
+// 큐레이션에서 캐릭터 삭제
+async function removeCharacterFromCuration(curationId, characterId) {
+  return Vue.axios.delete(`/admin/chat/character/curation/${curationId}/characters/${characterId}`)
+}
+
+// 큐레이션 내 캐릭터 정렬 순서 변경
+async function updateCurationCharactersOrder(curationId, characterIds) {
+  return Vue.axios.put(`/admin/chat/character/curation/${curationId}/characters/reorder`, { characterIds })
+}
+
+// 큐레이션 캐릭터 목록 조회 (가정된 엔드포인트)
+async function getCharactersInCuration(curationId) {
+  return Vue.axios.get(`/admin/chat/character/curation/${curationId}/characters`)
+}
+
 export {
   getCharacterList,
   searchCharacters,
@@ -216,5 +263,15 @@ export {
   createCharacterImage,
   updateCharacterImage,
   deleteCharacterImage,
-  updateCharacterImageOrder
+  updateCharacterImageOrder,
+  // Character Curation
+  getCharacterCurationList,
+  createCharacterCuration,
+  updateCharacterCuration,
+  deleteCharacterCuration,
+  updateCharacterCurationOrder,
+  addCharacterToCuration,
+  removeCharacterFromCuration,
+  updateCurationCharactersOrder,
+  getCharactersInCuration
 }
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index 841a0c0..16a3ade 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -111,6 +111,11 @@ export default {
                 title: '캐릭터 리스트',
                 route: '/character',
                 items: null
+              },
+              {
+                title: '큐레이션',
+                route: '/character/curation',
+                items: null
               }
             ]
           })
diff --git a/src/router/index.js b/src/router/index.js
index 5afc84a..5cbf3a9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -280,6 +280,16 @@ const routes = [
                 name: 'CharacterImageForm',
                 component: () => import(/* webpackChunkName: "character" */ '../views/Chat/CharacterImageForm.vue')
             },
+            {
+                path: '/character/curation',
+                name: 'CharacterCuration',
+                component: () => import(/* webpackChunkName: "character" */ '../views/Chat/CharacterCuration.vue')
+            },
+            {
+                path: '/character/curation/detail',
+                name: 'CharacterCurationDetail',
+                component: () => import(/* webpackChunkName: "character" */ '../views/Chat/CharacterCurationDetail.vue')
+            },
         ]
     },
     {
diff --git a/src/views/Chat/CharacterCuration.vue b/src/views/Chat/CharacterCuration.vue
new file mode 100644
index 0000000..d5e3240
--- /dev/null
+++ b/src/views/Chat/CharacterCuration.vue
@@ -0,0 +1,341 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>캐릭터 큐레이션</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <v-row class="mb-4">
+        <v-col
+          cols="12"
+          sm="4"
+        >
+          <v-btn
+            color="primary"
+            dark
+            @click="showWriteDialog"
+          >
+            큐레이션 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col>
+          <v-data-table
+            :headers="headers"
+            :items="curations"
+            :loading="isLoading"
+            item-key="id"
+            class="elevation-1"
+            hide-default-footer
+            disable-pagination
+          >
+            <template v-slot:body="props">
+              <draggable
+                v-model="props.items"
+                tag="tbody"
+                @end="onDragEnd(props.items)"
+              >
+                <tr
+                  v-for="item in props.items"
+                  :key="item.id"
+                >
+                  <td @click="goDetail(item)">
+                    {{ item.title }}
+                  </td>
+                  <td @click="goDetail(item)">
+                    <h3 v-if="item.isAdult">
+                      O
+                    </h3>
+                    <h3 v-else>
+                      X
+                    </h3>
+                  </td>
+                  <td>
+                    <v-row>
+                      <v-col class="text-center">
+                        <v-btn
+                          small
+                          color="primary"
+                          :disabled="isLoading"
+                          @click="showModifyDialog(item)"
+                        >
+                          수정
+                        </v-btn>
+                      </v-col>
+                      <v-col class="text-center">
+                        <v-btn
+                          small
+                          color="error"
+                          :disabled="isLoading"
+                          @click="confirmDelete(item)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </td>
+                </tr>
+              </draggable>
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- 등록/수정 다이얼로그 -->
+    <v-dialog
+      v-model="showDialog"
+      max-width="600px"
+      persistent
+    >
+      <v-card>
+        <v-card-title>
+          <span class="headline">{{ isModify ? '큐레이션 수정' : '큐레이션 등록' }}</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="form.title"
+                  label="제목"
+                  outlined
+                  required
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <v-checkbox
+                  v-model="form.isAdult"
+                  label="19금"
+                />
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            color="blue darken-1"
+            @click="closeDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            text
+            color="blue darken-1"
+            :loading="isSubmitting"
+            :disabled="!isFormValid || isSubmitting"
+            @click="saveCuration"
+          >
+            저장
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 삭제 확인 다이얼로그 -->
+    <v-dialog
+      v-model="showDeleteDialog"
+      max-width="400px"
+    >
+      <v-card>
+        <v-card-title class="headline">
+          큐레이션 삭제
+        </v-card-title>
+        <v-card-text>"{{ selectedCuration && selectedCuration.title }}"을(를) 삭제하시겠습니까?</v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            color="blue darken-1"
+            @click="showDeleteDialog = false"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            text
+            color="red darken-1"
+            :loading="isSubmitting"
+            @click="deleteCuration"
+          >
+            삭제
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+import {
+  getCharacterCurationList,
+  createCharacterCuration,
+  updateCharacterCuration,
+  deleteCharacterCuration,
+  updateCharacterCurationOrder
+} from '@/api/character';
+
+export default {
+  name: 'CharacterCuration',
+  components: { draggable },
+  data() {
+    return {
+      isLoading: false,
+      isSubmitting: false,
+      curations: [],
+      headers: [
+        { text: '제목', align: 'center', sortable: false, value: 'title' },
+        { text: '19금', align: 'center', sortable: false, value: 'isAdult' },
+        { text: '관리', align: 'center', sortable: false, value: 'management' }
+      ],
+      showDialog: false,
+      isModify: false,
+      form: { id: null, title: '', isAdult: false },
+      selectedCuration: null,
+      showDeleteDialog: false
+    };
+  },
+  computed: {
+    isFormValid() {
+      return this.form.title && this.form.title.trim().length > 0;
+    }
+  },
+  async created() {
+    await this.loadCurations();
+  },
+  methods: {
+    notifyError(message) { this.$dialog.notify.error(message); },
+    notifySuccess(message) { this.$dialog.notify.success(message); },
+
+    async loadCurations() {
+      this.isLoading = true;
+      try {
+        const res = await getCharacterCurationList();
+        if (res.status === 200 && res.data && res.data.success === true) {
+          this.curations = res.data.data || [];
+        } else {
+          this.notifyError(res.data.message || '목록을 불러오지 못했습니다.');
+        }
+      } catch (e) {
+        this.notifyError('목록을 불러오지 못했습니다.');
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    onDragEnd(items) {
+      const ids = items.map(i => i.id);
+      this.updateOrders(ids);
+    },
+
+    async updateOrders(ids) {
+      try {
+        const res = await updateCharacterCurationOrder(ids);
+        if (res.status === 200 && res.data && res.data.success === true) {
+          this.notifySuccess('순서가 변경되었습니다.');
+        } else {
+          this.notifyError(res.data.message || '순서 변경에 실패했습니다.');
+        }
+      } catch (e) {
+        this.notifyError('순서 변경에 실패했습니다.');
+      }
+    },
+
+    goDetail(item) {
+      this.$router.push({
+        name: 'CharacterCurationDetail',
+        params: { curationId: item.id, title: item.title, isAdult: item.isAdult }
+      });
+    },
+
+    showWriteDialog() {
+      this.isModify = false;
+      this.form = { id: null, title: '', isAdult: false };
+      this.showDialog = true;
+    },
+
+    showModifyDialog(item) {
+      this.isModify = true;
+      this.form = { id: item.id, title: item.title, isAdult: item.isAdult };
+      this.showDialog = true;
+    },
+
+    closeDialog() {
+      this.showDialog = false;
+      this.form = { id: null, title: '', isAdult: false };
+    },
+
+    async saveCuration() {
+      if (this.isSubmitting || !this.isFormValid) return;
+      this.isSubmitting = true;
+      try {
+        if (this.isModify) {
+          const payload = { id: this.form.id };
+          if (this.form.title) payload.title = this.form.title;
+          payload.isAdult = this.form.isAdult;
+          const res = await updateCharacterCuration(payload);
+          if (res.status === 200 && res.data && res.data.success === true) {
+            this.notifySuccess('수정되었습니다.');
+            this.closeDialog();
+            await this.loadCurations();
+          } else {
+            this.notifyError(res.data.message || '수정에 실패했습니다.');
+          }
+        } else {
+          const res = await createCharacterCuration({
+            title: this.form.title,
+            isAdult: this.form.isAdult,
+            isActive: true
+          });
+          if (res.status === 200 && res.data && res.data.success === true) {
+            this.notifySuccess('등록되었습니다.');
+            this.closeDialog();
+            await this.loadCurations();
+          } else {
+            this.notifyError(res.data.message || '등록에 실패했습니다.');
+          }
+        }
+      } catch (e) {
+        this.notifyError('저장 중 오류가 발생했습니다.');
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+
+    confirmDelete(item) {
+      this.selectedCuration = item;
+      this.showDeleteDialog = true;
+    },
+
+    async deleteCuration() {
+      if (!this.selectedCuration) return;
+      this.isSubmitting = true;
+      try {
+        const res = await deleteCharacterCuration(this.selectedCuration.id);
+        if (res.status === 200 && res.data && res.data.success === true) {
+          this.notifySuccess('삭제되었습니다.');
+          this.showDeleteDialog = false;
+          await this.loadCurations();
+        } else {
+          this.notifyError(res.data.message || '삭제에 실패했습니다.');
+        }
+      } catch (e) {
+        this.notifyError('삭제에 실패했습니다.');
+      } finally {
+        this.isSubmitting = false;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Chat/CharacterCurationDetail.vue b/src/views/Chat/CharacterCurationDetail.vue
new file mode 100644
index 0000000..e010038
--- /dev/null
+++ b/src/views/Chat/CharacterCurationDetail.vue
@@ -0,0 +1,429 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="goBack"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-spacer />
+      <v-toolbar-title>{{ title }}</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <v-row class="mb-2">
+        <v-col
+          cols="4"
+          class="text-right"
+        >
+          19금 :
+        </v-col>
+        <v-col cols="8">
+          {{ isAdult ? 'O' : 'X' }}
+        </v-col>
+      </v-row>
+
+      <v-row class="mb-4">
+        <v-col
+          cols="12"
+          sm="4"
+        >
+          <v-btn
+            color="primary"
+            dark
+            @click="openAddDialog"
+          >
+            캐릭터 등록
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <draggable
+          v-model="characters"
+          class="row"
+          style="width: 100%"
+          :options="{ animation: 150 }"
+          @end="onDragEnd"
+        >
+          <v-col
+            v-for="ch in characters"
+            :key="ch.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
+            class="mb-4"
+          >
+            <v-card>
+              <v-img
+                :src="ch.imageUrl"
+                height="200"
+                contain
+              />
+              <v-card-text class="text-center">
+                {{ ch.name }}
+              </v-card-text>
+              <v-card-text class="text-center">
+                {{ ch.description }}
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  small
+                  color="error"
+                  @click="confirmRemove(ch)"
+                >
+                  삭제
+                </v-btn>
+                <v-spacer />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </draggable>
+      </v-row>
+
+      <v-row v-if="isLoading && characters.length === 0">
+        <v-col class="text-center">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+            size="48"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row v-if="!isLoading && characters.length === 0">
+        <v-col class="text-center">
+          등록된 캐릭터가 없습니다.
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- 등록 다이얼로그 -->
+    <v-dialog
+      v-model="showAddDialog"
+      max-width="700px"
+      persistent
+    >
+      <v-card>
+        <v-card-title>캐릭터 등록</v-card-title>
+        <v-card-text>
+          <v-text-field
+            v-model="searchWord"
+            label="캐릭터 검색"
+            outlined
+            @keyup.enter="search"
+          />
+          <v-btn
+            color="primary"
+            small
+            class="mb-2"
+            @click="search"
+          >
+            검색
+          </v-btn>
+
+          <v-row v-if="searchResults.length > 0 || addList.length > 0">
+            <v-col>
+              검색결과
+              <v-simple-table>
+                <template v-slot:default>
+                  <thead>
+                    <tr>
+                      <th class="text-center">
+                        이름
+                      </th>
+                      <th />
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="item in searchResults"
+                      :key="item.id"
+                    >
+                      <td>{{ item.name }}</td>
+                      <td>
+                        <v-btn
+                          small
+                          color="primary"
+                          @click="addItem(item)"
+                        >
+                          추가
+                        </v-btn>
+                      </td>
+                    </tr>
+                  </tbody>
+                </template>
+              </v-simple-table>
+            </v-col>
+            <v-col v-if="addList.length > 0">
+              추가할 캐릭터
+              <v-simple-table>
+                <template>
+                  <thead>
+                    <tr>
+                      <th class="text-center">
+                        이름
+                      </th>
+                      <th />
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="item in addList"
+                      :key="item.id"
+                    >
+                      <td>{{ item.name }}</td>
+                      <td>
+                        <v-btn
+                          small
+                          color="error"
+                          @click="removeItem(item)"
+                        >
+                          제거
+                        </v-btn>
+                      </td>
+                    </tr>
+                  </tbody>
+                </template>
+              </v-simple-table>
+            </v-col>
+          </v-row>
+
+          <v-alert
+            v-else-if="searchPerformed"
+            type="info"
+            outlined
+          >
+            검색결과가 없습니다.
+          </v-alert>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            color="blue darken-1"
+            @click="closeAddDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            text
+            color="blue darken-1"
+            :disabled="addList.length === 0 || isSubmitting"
+            :loading="isSubmitting"
+            @click="addItemInCuration"
+          >
+            추가
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 삭제 확인 다이얼로그 -->
+    <v-dialog
+      v-model="showDeleteDialog"
+      max-width="420px"
+    >
+      <v-card>
+        <v-card-title class="headline">
+          캐릭터 삭제
+        </v-card-title>
+        <v-card-text>"{{ targetCharacter && targetCharacter.name }}"을(를) 큐레이션에서 삭제할까요?</v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            text
+            color="blue darken-1"
+            @click="showDeleteDialog = false"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            text
+            color="red darken-1"
+            :loading="isSubmitting"
+            @click="removeTarget"
+          >
+            삭제
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+import {
+  getCharactersInCuration,
+  addCharacterToCuration,
+  removeCharacterFromCuration,
+  updateCurationCharactersOrder,
+  searchCharacters
+} from '@/api/character';
+
+export default {
+  name: 'CharacterCurationDetail',
+  components: { draggable },
+  data() {
+    return {
+      isLoading: false,
+      isSubmitting: false,
+      curationId: null,
+      title: '',
+      isAdult: false,
+      characters: [],
+      showAddDialog: false,
+      showDeleteDialog: false,
+      targetCharacter: null,
+      searchWord: '',
+      searchResults: [],
+      searchPerformed: false,
+      addList: []
+    };
+  },
+  async created() {
+    this.curationId = this.$route.params.curationId;
+    this.title = this.$route.params.title;
+    this.isAdult = this.$route.params.isAdult;
+    await this.loadCharacters();
+  },
+  methods: {
+    notifyError(message) { this.$dialog.notify.error(message); },
+    notifySuccess(message) { this.$dialog.notify.success(message); },
+
+    goBack() { this.$router.push({ name: 'CharacterCuration' }); },
+
+    async loadCharacters() {
+      this.isLoading = true;
+      try {
+        const res = await getCharactersInCuration(this.curationId);
+        if (res.status === 200 && res.data && res.data.success === true) {
+          this.characters = res.data.data || [];
+        } else {
+          this.notifyError(res.data.message || '캐릭터 목록을 불러오지 못했습니다.');
+        }
+      } catch (e) {
+        this.notifyError('캐릭터 목록을 불러오지 못했습니다.');
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    openAddDialog() {
+      this.showAddDialog = true;
+      this.searchWord = '';
+      this.searchResults = [];
+      this.addList = [];
+      this.searchPerformed = false;
+    },
+    closeAddDialog() {
+      this.showAddDialog = false;
+      this.searchWord = '';
+      this.searchResults = [];
+      this.addList = [];
+      this.searchPerformed = false;
+    },
+
+    async search() {
+      if (!this.searchWord || this.searchWord.length < 2) {
+        this.notifyError('검색어를 2글자 이상 입력하세요.');
+        return;
+        }
+      try {
+        const res = await searchCharacters(this.searchWord);
+        if (res.status === 200 && res.data && res.data.success === true) {
+          const data = res.data.data;
+          const list = data.content || [];
+          const existingIds = new Set(this.characters.map(c => c.id));
+          const pendingIds = new Set(this.addList.map(c => c.id));
+          this.searchResults = list.filter(item => !existingIds.has(item.id) && !pendingIds.has(item.id));
+          this.searchPerformed = true;
+        } else {
+          this.notifyError(res.data.message || '검색에 실패했습니다.');
+        }
+      } catch (e) {
+        this.notifyError('검색에 실패했습니다.');
+      }
+    },
+
+    addItem(item) {
+      // 검색결과에서 제거하고 추가 목록에 삽입 (중복 방지)
+      if (!this.addList.find(t => t.id === item.id)) {
+        this.addList.push(item);
+      }
+      this.searchResults = this.searchResults.filter(t => t.id !== item.id);
+    },
+
+    removeItem(item) {
+      this.addList = this.addList.filter(t => t.id !== item.id);
+      // 제거 시 검색결과에 다시 추가
+      if (!this.searchResults.find(t => t.id === item.id)) {
+        this.searchResults.push(item);
+      }
+    },
+
+    async addItemInCuration() {
+      if (!this.addList || this.addList.length === 0) return;
+      this.isSubmitting = true;
+      try {
+        const ids = this.addList.map(i => i.id);
+        const res = await addCharacterToCuration(this.curationId, ids);
+        if (res.status === 200 && res.data && res.data.success === true) {
+          this.notifySuccess(`${this.addList.length}명 추가되었습니다.`);
+          this.closeAddDialog();
+          await this.loadCharacters();
+        } else {
+          this.notifyError((res.data && res.data.message) || '추가에 실패했습니다.');
+        }
+      } catch (e) {
+        this.notifyError('추가에 실패했습니다.');
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+
+    confirmRemove(item) { this.targetCharacter = item; this.showDeleteDialog = true; },
+
+    async removeTarget() {
+      if (!this.targetCharacter) return;
+      this.isSubmitting = true;
+      try {
+        const res = await removeCharacterFromCuration(this.curationId, this.targetCharacter.id);
+        if (res.status === 200 && res.data && res.data.success === true) {
+          this.notifySuccess('삭제되었습니다.');
+          this.showDeleteDialog = false;
+          await this.loadCharacters();
+        } else {
+          this.notifyError(res.data.message || '삭제에 실패했습니다.');
+        }
+      } catch (e) {
+        this.notifyError('삭제에 실패했습니다.');
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+
+    async onDragEnd() {
+      try {
+        const ids = this.characters.map(c => c.id);
+        const res = await updateCurationCharactersOrder(this.curationId, ids);
+        if (res.status === 200 && res.data && res.data.success === true) {
+          this.notifySuccess('순서가 변경되었습니다.');
+        } else {
+          this.notifyError(res.data.message || '순서 변경에 실패했습니다.');
+        }
+      } catch (e) {
+        this.notifyError('순서 변경에 실패했습니다.');
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>