diff --git a/.gitignore b/.gitignore
index d5b69c2..b6d3e56 100644
--- a/.gitignore
+++ b/.gitignore
@@ -218,4 +218,7 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
+.kiro/
+.junie/
+
 # End of https://www.toptal.com/developers/gitignore/api/webstorm,visualstudiocode,vuejs,macos,windows
diff --git a/src/api/character.js b/src/api/character.js
new file mode 100644
index 0000000..62b7829
--- /dev/null
+++ b/src/api/character.js
@@ -0,0 +1,277 @@
+import Vue from 'vue';
+
+// 캐릭터 리스트
+async function getCharacterList(page = 1, size = 20) {
+  return Vue.axios.get('/admin/chat/character/list', {
+    params: { page: page - 1, size }
+  })
+}
+
+// 캐릭터 검색
+async function searchCharacters(searchTerm, page = 1, size = 20) {
+  return Vue.axios.get('/admin/chat/banner/search-character', {
+    params: { searchTerm, page: page - 1, size }
+  })
+}
+
+// 캐릭터 상세 조회
+async function getCharacter(id) {
+  return Vue.axios.get(`/admin/chat/character/${id}`)
+}
+
+// 내부 헬퍼: 빈 문자열을 null로 변환
+function toNullIfBlank(value) {
+  if (typeof value === 'string') {
+    return value.trim() === '' ? null : value;
+  }
+  return value === '' ? null : value;
+}
+
+// 캐릭터 등록
+async function createCharacter(characterData) {
+  const formData = new FormData()
+
+  // 이미지만 FormData에 추가
+  if (characterData.image) formData.append('image', characterData.image)
+
+  // 나머지 데이터는 JSON 문자열로 변환하여 request 필드에 추가
+  const requestData = {
+    name: toNullIfBlank(characterData.name),
+    systemPrompt: toNullIfBlank(characterData.systemPrompt),
+    description: toNullIfBlank(characterData.description),
+    age: toNullIfBlank(characterData.age),
+    gender: toNullIfBlank(characterData.gender),
+    mbti: toNullIfBlank(characterData.mbti),
+    characterType: toNullIfBlank(characterData.type),
+    originalTitle: toNullIfBlank(characterData.originalTitle),
+    originalLink: toNullIfBlank(characterData.originalLink),
+    speechPattern: toNullIfBlank(characterData.speechPattern),
+    speechStyle: toNullIfBlank(characterData.speechStyle),
+    appearance: toNullIfBlank(characterData.appearance),
+    tags: characterData.tags || [],
+    hobbies: characterData.hobbies || [],
+    values: characterData.values || [],
+    goals: characterData.goals || [],
+    relationships: characterData.relationships || [],
+    personalities: characterData.personalities || [],
+    backgrounds: characterData.backgrounds || [],
+    memories: characterData.memories || []
+  }
+
+  formData.append('request', JSON.stringify(requestData))
+
+  return Vue.axios.post('/admin/chat/character/register', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 캐릭터 수정
+async function updateCharacter(characterData, image = null) {
+  const formData = new FormData()
+
+  // 이미지가 있는 경우에만 FormData에 추가
+  if (image) formData.append('image', image)
+
+  // 변경된 데이터만 JSON 문자열로 변환하여 request 필드에 추가 ('' -> null 변환)
+  // characterData는 이미 변경된 필드만 포함하고 있음
+  const processed = {}
+  Object.keys(characterData).forEach(key => {
+    const value = characterData[key]
+    if (typeof value === 'string' || value === '') {
+      processed[key] = toNullIfBlank(value)
+    } else {
+      processed[key] = value
+    }
+  })
+  formData.append('request', JSON.stringify(processed))
+
+  return Vue.axios.put(`/admin/chat/character/update`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 캐릭터 배너 리스트 조회
+async function getCharacterBannerList(page = 1, size = 20) {
+  return Vue.axios.get('/admin/chat/banner/list', {
+    params: { page: page - 1, size }
+  })
+}
+
+// 캐릭터 배너 등록
+async function createCharacterBanner(bannerData) {
+  const formData = new FormData()
+
+  // 이미지 FormData에 추가
+  if (bannerData.image) formData.append('image', bannerData.image)
+
+  // 캐릭터 ID를 JSON 문자열로 변환하여 request 필드에 추가
+  const requestData = {
+    characterId: bannerData.characterId
+  }
+
+  formData.append('request', JSON.stringify(requestData))
+
+  return Vue.axios.post('/admin/chat/banner/register', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 캐릭터 배너 수정
+async function updateCharacterBanner(bannerData) {
+  const formData = new FormData()
+
+  // 이미지가 있는 경우에만 FormData에 추가
+  if (bannerData.image) formData.append('image', bannerData.image)
+
+  // 캐릭터 ID와 배너 ID를 JSON 문자열로 변환하여 request 필드에 추가
+  const requestData = {
+    characterId: bannerData.characterId,
+    bannerId: bannerData.bannerId
+  }
+
+  formData.append('request', JSON.stringify(requestData))
+
+  return Vue.axios.put('/admin/chat/banner/update', formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 캐릭터 배너 삭제
+async function deleteCharacterBanner(bannerId) {
+  return Vue.axios.delete(`/admin/chat/banner/${bannerId}`)
+}
+
+// 캐릭터 배너 순서 변경
+async function updateCharacterBannerOrder(bannerIds) {
+  return Vue.axios.put('/admin/chat/banner/orders', {ids: bannerIds})
+}
+
+// 캐릭터 이미지 리스트
+async function getCharacterImageList(characterId, page = 1, size = 20) {
+  return Vue.axios.get('/admin/chat/character/image/list', {
+    params: { characterId, page: page - 1, size }
+  })
+}
+
+// 캐릭터 이미지 상세
+async function getCharacterImage(imageId) {
+  return Vue.axios.get(`/admin/chat/character/image/${imageId}`)
+}
+
+// 캐릭터 이미지 등록
+async function createCharacterImage(imageData) {
+  const formData = new FormData()
+  if (imageData.image) formData.append('image', imageData.image)
+  const requestData = {
+    characterId: imageData.characterId,
+    imagePriceCan: imageData.imagePriceCan,
+    messagePriceCan: imageData.messagePriceCan,
+    isAdult: imageData.isAdult,
+    triggers: imageData.triggers || []
+  }
+  formData.append('request', JSON.stringify(requestData))
+  return Vue.axios.post('/admin/chat/character/image/register', formData, {
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}
+
+// 캐릭터 이미지 수정 (트리거만 수정)
+async function updateCharacterImage(imageData) {
+  const imageId = imageData.imageId
+  const payload = { triggers: imageData.triggers || [] }
+  return Vue.axios.put(`/admin/chat/character/image/${imageId}/triggers`, payload)
+}
+
+// 캐릭터 이미지 삭제
+async function deleteCharacterImage(imageId) {
+  return Vue.axios.delete(`/admin/chat/character/image/${imageId}`)
+}
+
+// 캐릭터 이미지 순서 변경
+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,
+  getCharacter,
+  createCharacter,
+  updateCharacter,
+  getCharacterBannerList,
+  createCharacterBanner,
+  updateCharacterBanner,
+  deleteCharacterBanner,
+  updateCharacterBannerOrder,
+  getCharacterImageList,
+  getCharacterImage,
+  createCharacterImage,
+  updateCharacterImage,
+  deleteCharacterImage,
+  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 8fa647a..16a3ade 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -43,6 +43,7 @@
           >
             <v-list-item
               :to="childItem.route"
+              :exact="childItem.route === '/character'"
               active-class="blue white--text"
             >
               <v-list-item-title>{{ childItem.title }}</v-list-item-title>
@@ -95,6 +96,29 @@ export default {
         let res = await api.getMenus();
         if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
           this.items = res.data.data
+
+          // 캐릭터 챗봇 메뉴 추가
+          this.items.push({
+            title: '캐릭터 챗봇',
+            route: null,
+            items: [
+              {
+                title: '배너 등록',
+                route: '/character/banner',
+                items: null
+              },
+              {
+                title: '캐릭터 리스트',
+                route: '/character',
+                items: null
+              },
+              {
+                title: '큐레이션',
+                route: '/character/curation',
+                items: null
+              }
+            ]
+          })
         } else {
           this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
           this.logout();
diff --git a/src/router/index.js b/src/router/index.js
index 4b2f7fa..5cbf3a9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -255,6 +255,41 @@ const routes = [
                 name: 'MarketingAdStatisticsView',
                 component: () => import(/* webpackChunkName: "marketing" */ '../views/Marketing/MarketingAdStatisticsView.vue')
             },
+            {
+                path: '/character',
+                name: 'CharacterList',
+                component: () => import(/* webpackChunkName: "character" */ '../views/Chat/CharacterList.vue')
+            },
+            {
+                path: '/character/form',
+                name: 'CharacterForm',
+                component: () => import(/* webpackChunkName: "character" */ '../views/Chat/CharacterForm.vue')
+            },
+            {
+                path: '/character/banner',
+                name: 'CharacterBanner',
+                component: () => import(/* webpackChunkName: "character" */ '../views/Chat/CharacterBanner.vue')
+            },
+            {
+                path: '/character/images',
+                name: 'CharacterImageList',
+                component: () => import(/* webpackChunkName: "character" */ '../views/Chat/CharacterImageList.vue')
+            },
+            {
+                path: '/character/images/form',
+                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/Can/CanCharge.vue b/src/views/Can/CanCharge.vue
index 49ce3df..c46bc0e 100644
--- a/src/views/Can/CanCharge.vue
+++ b/src/views/Can/CanCharge.vue
@@ -60,7 +60,7 @@
             <v-card-text>
               지급할 캔 수: {{ can }} 캔
             </v-card-text>
-            <v-card-actions v-show="!isLoading">
+            <v-card-actions v-show="!is_loading">
               <v-spacer />
               <v-btn
                 color="blue darken-1"
@@ -95,7 +95,7 @@ export default {
   data() {
     return {
       show_confirm: false,
-      isLoading: false,
+      is_loading: false,
       account_id: '',
       method: '',
       can: ''
@@ -124,7 +124,7 @@ export default {
         return this.notifyError('캔은 숫자만 넣을 수 있습니다.')
       }
 
-      if (!this.isLoading) {
+      if (!this.is_loading) {
         this.show_confirm = true
       }
     },
@@ -134,8 +134,8 @@ export default {
     },
 
     async submit() {
-      if (!this.isLoading) {
-        this.isLoading = true
+      if (!this.is_loading) {
+        this.is_loading = true
 
         try {
           this.show_confirm = false
diff --git a/src/views/Chat/CharacterBanner.vue b/src/views/Chat/CharacterBanner.vue
new file mode 100644
index 0000000..5b6f93c
--- /dev/null
+++ b/src/views/Chat/CharacterBanner.vue
@@ -0,0 +1,583 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="goBack"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-spacer />
+      <v-toolbar-title>캐릭터 배너 관리</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <v-row>
+        <v-col cols="4">
+          <v-btn
+            color="primary"
+            dark
+            @click="showAddDialog"
+          >
+            배너 추가
+          </v-btn>
+        </v-col>
+        <v-spacer />
+      </v-row>
+
+      <!-- 로딩 표시 -->
+      <v-row v-if="isLoading && banners.length === 0">
+        <v-col class="text-center">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+            size="64"
+          />
+        </v-col>
+      </v-row>
+
+      <!-- 배너 그리드 -->
+      <v-row>
+        <draggable
+          v-model="banners"
+          class="row"
+          style="width: 100%"
+          :options="{ animation: 150 }"
+          @end="onDragEnd"
+        >
+          <v-col
+            v-for="banner in banners"
+            :key="banner.id"
+            cols="12"
+            sm="6"
+            md="4"
+            lg="3"
+            class="banner-item"
+          >
+            <v-card
+              class="mx-auto"
+              max-width="300"
+            >
+              <v-img
+                :src="banner.imageUrl"
+                height="200"
+                contain
+              />
+              <v-card-text class="text-center">
+                <div>{{ banner.characterName }}</div>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer />
+                <v-btn
+                  small
+                  color="primary"
+                  @click="showEditDialog(banner)"
+                >
+                  수정
+                </v-btn>
+                <v-btn
+                  small
+                  color="error"
+                  @click="confirmDelete(banner)"
+                >
+                  삭제
+                </v-btn>
+                <v-spacer />
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </draggable>
+      </v-row>
+
+      <!-- 데이터가 없을 때 표시 -->
+      <v-row v-if="!isLoading && banners.length === 0">
+        <v-col class="text-center">
+          <p>등록된 배너가 없습니다.</p>
+        </v-col>
+      </v-row>
+
+      <!-- 무한 스크롤 로딩 -->
+      <v-row v-if="isLoading && banners.length > 0">
+        <v-col class="text-center">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+    <!-- 배너 추가/수정 다이얼로그 -->
+    <v-dialog
+      v-model="showDialog"
+      max-width="600px"
+      persistent
+    >
+      <v-card>
+        <v-card-title>
+          <span class="headline">{{ isEdit ? '배너 수정' : '배너 추가' }}</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col cols="12">
+                <v-file-input
+                  v-model="bannerForm.image"
+                  label="배너 이미지"
+                  accept="image/*"
+                  prepend-icon="mdi-camera"
+                  show-size
+                  truncate-length="15"
+                  :rules="imageRules"
+                  outlined
+                />
+              </v-col>
+            </v-row>
+            <v-row v-if="previewImage || (isEdit && bannerForm.imageUrl)">
+              <v-col
+                cols="12"
+                class="text-center"
+              >
+                <v-img
+                  :src="previewImage || bannerForm.imageUrl"
+                  max-height="200"
+                  contain
+                />
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="searchKeyword"
+                  label="캐릭터 검색"
+                  outlined
+                  @keyup.enter="searchCharacter"
+                />
+              </v-col>
+            </v-row>
+            <v-row v-if="searchResults.length > 0">
+              <v-col cols="12">
+                <v-list>
+                  <v-list-item
+                    v-for="character in searchResults"
+                    :key="character.id"
+                    @click="selectCharacter(character)"
+                  >
+                    <v-list-item-avatar>
+                      <v-img :src="character.imageUrl" />
+                    </v-list-item-avatar>
+                    <v-list-item-content>
+                      <v-list-item-title>{{ character.name }}</v-list-item-title>
+                    </v-list-item-content>
+                  </v-list-item>
+                </v-list>
+              </v-col>
+            </v-row>
+            <v-row v-if="searchPerformed && searchResults.length === 0">
+              <v-col cols="12">
+                <v-alert
+                  type="info"
+                  outlined
+                >
+                  검색결과가 없습니다.
+                </v-alert>
+              </v-col>
+            </v-row>
+            <v-row v-if="selectedCharacter">
+              <v-col cols="12">
+                <v-alert
+                  type="info"
+                  outlined
+                >
+                  <v-row align="center">
+                    <v-col cols="auto">
+                      <v-avatar size="50">
+                        <v-img :src="selectedCharacter.imageUrl" />
+                      </v-avatar>
+                    </v-col>
+                    <v-col>
+                      <div class="font-weight-medium">
+                        선택된 캐릭터: {{ selectedCharacter.name }}
+                      </div>
+                    </v-col>
+                  </v-row>
+                </v-alert>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="closeDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            :disabled="!isFormValid || isSubmitting"
+            :loading="isSubmitting"
+            @click="saveBanner"
+          >
+            저장
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 삭제 확인 다이얼로그 -->
+    <v-dialog
+      v-model="showDeleteDialog"
+      max-width="400"
+    >
+      <v-card>
+        <v-card-title class="headline">
+          배너 삭제
+        </v-card-title>
+        <v-card-text>
+          삭제 할까요?
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="showDeleteDialog = false"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="red darken-1"
+            text
+            :loading="isSubmitting"
+            @click="deleteBanner"
+          >
+            삭제
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getCharacterBannerList,
+  createCharacterBanner,
+  updateCharacterBanner,
+  deleteCharacterBanner,
+  updateCharacterBannerOrder,
+  searchCharacters
+} from '@/api/character';
+import draggable from 'vuedraggable';
+
+export default {
+  name: 'CharacterBanner',
+
+  components: {
+    draggable
+  },
+
+  data() {
+    return {
+      isLoading: false,
+      isSubmitting: false,
+      banners: [],
+      page: 1,
+      hasMoreItems: true,
+      showDialog: false,
+      showDeleteDialog: false,
+      isEdit: false,
+      selectedBanner: null,
+      selectedCharacter: null,
+      searchKeyword: '',
+      searchResults: [],
+      searchPerformed: false,
+      previewImage: null,
+      bannerForm: {
+        image: null,
+        imageUrl: '',
+        characterId: null,
+        bannerId: null
+      },
+      imageRules: [
+        v => !!v || this.isEdit || '이미지를 선택하세요'
+      ]
+    };
+  },
+
+  computed: {
+    isFormValid() {
+      return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedCharacter;
+    }
+  },
+
+  watch: {
+    'bannerForm.image': {
+      handler(newImage) {
+        if (newImage) {
+          this.createImagePreview(newImage);
+        } else {
+          this.previewImage = null;
+        }
+      }
+    }
+  },
+
+  mounted() {
+    this.loadBanners();
+    window.addEventListener('scroll', this.handleScroll);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll);
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message);
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message);
+    },
+
+    goBack() {
+      this.$router.push('/character');
+    },
+
+    async loadBanners() {
+      if (this.isLoading || !this.hasMoreItems) return;
+
+      this.isLoading = true;
+
+      try {
+        const response = await getCharacterBannerList(this.page);
+
+        if (response && response.status === 200 && response.data && response.data.success === true) {
+          const data = response.data.data;
+          const newBanners = data.content || [];
+          this.banners = [...this.banners, ...newBanners];
+
+          // 더 불러올 데이터가 있는지 확인
+          this.hasMoreItems = newBanners.length > 0;
+          this.page++;
+        } else {
+          this.notifyError('배너 목록을 불러오는데 실패했습니다.');
+        }
+      } catch (error) {
+        this.notifyError('배너 목록을 불러오는데 실패했습니다.');
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    handleScroll() {
+      const scrollPosition = window.innerHeight + window.scrollY;
+      const documentHeight = document.documentElement.offsetHeight;
+
+      // 스크롤이 페이지 하단에 도달하면 추가 데이터 로드
+      if (scrollPosition >= documentHeight - 200 && !this.isLoading && this.hasMoreItems) {
+        this.loadBanners();
+      }
+    },
+
+    showAddDialog() {
+      this.isEdit = false;
+      this.selectedCharacter = null;
+      this.bannerForm = {
+        image: null,
+        imageUrl: '',
+        characterId: null,
+        bannerId: null
+      };
+      this.previewImage = null;
+      this.searchKeyword = '';
+      this.searchResults = [];
+      this.searchPerformed = false;
+      this.showDialog = true;
+    },
+
+    showEditDialog(banner) {
+      this.isEdit = true;
+      this.selectedBanner = banner;
+      this.selectedCharacter = {
+        id: banner.characterId,
+        name: banner.characterName,
+        imageUrl: banner.characterImageUrl
+      };
+      this.bannerForm = {
+        image: null,
+        imageUrl: banner.imageUrl,
+        characterId: banner.characterId,
+        bannerId: banner.id
+      };
+      this.previewImage = null;
+      this.searchKeyword = '';
+      this.searchResults = [];
+      this.searchPerformed = false;
+      this.showDialog = true;
+    },
+
+    closeDialog() {
+      this.showDialog = false;
+      this.selectedCharacter = null;
+      this.bannerForm = {
+        image: null,
+        imageUrl: '',
+        characterId: null,
+        bannerId: null
+      };
+      this.previewImage = null;
+      this.searchKeyword = '';
+      this.searchResults = [];
+      this.searchPerformed = false;
+    },
+
+    confirmDelete(banner) {
+      this.selectedBanner = banner;
+      this.showDeleteDialog = true;
+    },
+
+    createImagePreview(file) {
+      if (!file) return;
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.previewImage = e.target.result;
+      };
+      reader.readAsDataURL(file);
+    },
+
+    async searchCharacter() {
+      if (!this.searchKeyword || this.searchKeyword.length < 2) {
+        this.notifyError('검색어를 2글자 이상 입력하세요.');
+        return;
+      }
+
+      try {
+        const response = await searchCharacters(this.searchKeyword);
+
+        if (response && response.status === 200 && response.data && response.data.success === true) {
+          const data = response.data.data;
+          this.searchResults = data.content || [];
+          this.searchPerformed = true;
+        }
+      } catch (error) {
+        console.error('캐릭터 검색 오류:', error);
+        this.notifyError('캐릭터 검색에 실패했습니다.');
+      }
+    },
+
+    selectCharacter(character) {
+      this.selectedCharacter = character;
+      this.bannerForm.characterId = character.id;
+      this.searchResults = [];
+    },
+
+    async saveBanner() {
+      if (!this.isFormValid || this.isSubmitting) return;
+
+      this.isSubmitting = true;
+
+      try {
+        if (this.isEdit) {
+          // 배너 수정
+          const response = await updateCharacterBanner({
+            image: this.bannerForm.image,
+            characterId: this.selectedCharacter.id,
+            bannerId: this.bannerForm.bannerId
+          });
+          if (response && response.status === 200 && response.data && response.data.success === true) {
+            this.notifySuccess('배너가 수정되었습니다.');
+          } else {
+            this.notifyError('배너 수정을 실패했습니다.');
+          }
+        } else {
+          // 배너 추가
+          const response = await createCharacterBanner({
+            image: this.bannerForm.image,
+            characterId: this.selectedCharacter.id
+          });
+          if (response && response.status === 200 && response.data && response.data.success === true) {
+            this.notifySuccess('배너가 추가되었습니다.');
+            // 다이얼로그 닫고 배너 목록 새로고침
+            this.closeDialog();
+            this.refreshBanners();
+          } else {
+            this.notifyError('배너 추가를 실패했습니다.');
+          }
+        }
+      } catch (error) {
+        console.error('배너 저장 오류:', error);
+        this.notifyError('배너 저장에 실패했습니다.');
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+
+    async deleteBanner() {
+      if (!this.selectedBanner || this.isSubmitting) return;
+
+      this.isSubmitting = true;
+
+      try {
+        const response = await deleteCharacterBanner(this.selectedBanner.id);
+        if (response && response.status === 200 && response.data && response.data.success === true) {
+          this.notifySuccess('배너가 삭제되었습니다.');
+          this.showDeleteDialog = false;
+          this.refreshBanners();
+        } else {
+          this.notifyError('배너 삭제에 실패했습니다.');
+        }
+      } catch (error) {
+        console.error('배너 삭제 오류:', error);
+        this.notifyError('배너 삭제에 실패했습니다.');
+      } finally {
+        this.isSubmitting = false;
+      }
+    },
+
+    refreshBanners() {
+      // 배너 목록 초기화 후 다시 로드
+      this.banners = [];
+      this.page = 1;
+      this.hasMoreItems = true;
+      this.loadBanners();
+    },
+
+    async onDragEnd() {
+      // 드래그 앤 드롭으로 순서 변경 후 API 호출
+      try {
+        const bannerIds = this.banners.map(banner => banner.id);
+        const response = await updateCharacterBannerOrder(bannerIds);
+        if (response && response.status === 200 && response.data && response.data.success === true) {
+          this.notifySuccess('배너 순서가 변경되었습니다.');
+        } else {
+          this.notifyError('배너 순서 변경에 실패했습니다.');
+        }
+      } catch (error) {
+        console.error('배너 순서 변경 오류:', error);
+        this.notifyError('배너 순서 변경에 실패했습니다.');
+        // 실패 시 목록 새로고침
+        this.refreshBanners();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.banner-item {
+  transition: all 0.3s;
+}
+
+.banner-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+</style>
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>
diff --git a/src/views/Chat/CharacterForm.vue b/src/views/Chat/CharacterForm.vue
new file mode 100644
index 0000000..42abbd0
--- /dev/null
+++ b/src/views/Chat/CharacterForm.vue
@@ -0,0 +1,1822 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="goBack"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-spacer />
+      <v-toolbar-title>{{ isEdit ? '캐릭터 수정' : '캐릭터 등록' }}</v-toolbar-title>
+      <v-spacer />
+      <v-btn small outlined color="primary" @click="exportToJson">JSON 다운로드</v-btn>
+      <input ref="importInput" type="file" accept="application/json,.json" style="display:none" @change="onImportFileChange" />
+      <v-btn small color="primary" class="ml-2" @click="$refs.importInput.click()">JSON 업로드</v-btn>
+    </v-toolbar>
+
+    <v-container>
+      <v-card class="pa-4">
+        <v-form
+          ref="form"
+          v-model="isFormValid"
+        >
+          <v-card-text>
+            <!-- 이미지 -->
+            <v-row>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-file-input
+                  v-model="character.image"
+                  label="캐릭터 이미지"
+                  accept="image/*"
+                  prepend-icon="mdi-camera"
+                  show-size
+                  truncate-length="15"
+                  outlined
+                  dense
+                  :class="{ 'required-asterisk': !isEdit }"
+                  :rules="imageRules"
+                />
+              </v-col>
+
+              <v-col
+                v-if="previewImage || character.imageUrl"
+                cols="12"
+                md="6"
+              >
+                <div class="text-center">
+                  <v-avatar size="150">
+                    <v-img
+                      :src="previewImage || character.imageUrl"
+                      alt="캐릭터 이미지"
+                      contain
+                    />
+                  </v-avatar>
+                </div>
+              </v-col>
+            </v-row>
+
+            <!-- 캐릭터명 -->
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="character.name"
+                  label="캐릭터명"
+                  :rules="nameRules"
+                  class="required-asterisk"
+                  required
+                  outlined
+                  dense
+                />
+              </v-col>
+            </v-row>
+
+            <!-- 캐릭터 한 줄 소개 -->
+            <v-row>
+              <v-col cols="12">
+                <v-text-field
+                  v-model="character.description"
+                  label="캐릭터 한 줄 소개"
+                  :rules="descriptionRules"
+                  class="required-asterisk"
+                  required
+                  outlined
+                  dense
+                />
+              </v-col>
+            </v-row>
+
+            <!-- 성별 -->
+            <v-row>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-select
+                  v-model="character.gender"
+                  :items="genderOptions"
+                  label="성별"
+                  outlined
+                  dense
+                />
+              </v-col>
+
+              <!-- 나이 -->
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-text-field
+                  v-model="character.age"
+                  label="나이"
+                  type="number"
+                  min="0"
+                  outlined
+                  dense
+                  class="required-asterisk"
+                  :rules="ageRules"
+                  @input="validateNumberInput"
+                />
+              </v-col>
+            </v-row>
+
+            <!-- MBTI & 캐릭터 유형 -->
+            <v-row>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-select
+                  v-model="character.mbti"
+                  :items="mbtiOptions"
+                  label="MBTI"
+                  outlined
+                  dense
+                />
+              </v-col>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-select
+                  v-model="character.characterType"
+                  :items="typeOptions"
+                  label="캐릭터 유형"
+                  outlined
+                  dense
+                />
+              </v-col>
+            </v-row>
+
+            <!-- 태그 - 입력 후 띄어쓰기 할 때마다 Chip 형태로 변경 -->
+            <v-row>
+              <v-col cols="12">
+                <v-combobox
+                  v-model="tags"
+                  label="태그"
+                  multiple
+                  chips
+                  small-chips
+                  deletable-chips
+                  outlined
+                  dense
+                  :rules="tagRules"
+                  @keydown.space.prevent="addTag"
+                >
+                  <template v-slot:selection="{ attrs, item, select, selected }">
+                    <v-chip
+                      v-bind="attrs"
+                      :input-value="selected"
+                      close
+                      @click="select"
+                      @click:close="removeTag(item)"
+                    >
+                      {{ item }}
+                    </v-chip>
+                  </template>
+                </v-combobox>
+                <div
+                  class="caption grey--text text--darken-1 custom-caption"
+                >
+                  태그를 입력하고 엔터를 누르면 추가됩니다. (50자 이내, 최대 20개)
+                </div>
+              </v-col>
+            </v-row>
+
+            <!-- 원작 정보 -->
+            <v-row>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-text-field
+                  v-model="character.originalTitle"
+                  label="원작명"
+                  outlined
+                  dense
+                />
+              </v-col>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-text-field
+                  v-model="character.originalLink"
+                  label="원작링크"
+                  outlined
+                  dense
+                />
+              </v-col>
+            </v-row>
+
+            <!-- 긴 텍스트 섹션 -->
+            <v-row>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <h3 class="mb-4">
+                  상세 정보
+                </h3>
+              </v-col>
+            </v-row>
+
+
+            <!-- 말투/특징적 표현 -->
+            <v-row>
+              <v-col cols="12">
+                <v-textarea
+                  v-model="character.speechPattern"
+                  label="말투/특징적 표현 (최대 1000자)"
+                  outlined
+                  auto-grow
+                  rows="4"
+                  counter="1000"
+                  :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
+                />
+              </v-col>
+            </v-row>
+
+            <!-- 대화 스타일 -->
+            <v-row>
+              <v-col cols="12">
+                <v-textarea
+                  v-model="character.speechStyle"
+                  label="대화 스타일 (최대 1000자)"
+                  outlined
+                  auto-grow
+                  rows="4"
+                  counter="1000"
+                  :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
+                />
+              </v-col>
+            </v-row>
+
+            <!-- 외모 설명 -->
+            <v-row>
+              <v-col cols="12">
+                <v-textarea
+                  v-model="character.appearance"
+                  label="외모 설명 (최대 1000자)"
+                  outlined
+                  auto-grow
+                  rows="5"
+                  counter="1000"
+                  :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
+                />
+              </v-col>
+            </v-row>
+
+            <!-- 시스템 프롬프트 -->
+            <v-row>
+              <v-col cols="12">
+                <v-textarea
+                  v-model="character.systemPrompt"
+                  label="시스템 프롬프트"
+                  outlined
+                  auto-grow
+                  rows="4"
+                  :class="{ 'required-asterisk': !isEdit }"
+                  :rules="systemPromptRules"
+                />
+                <div
+                  class="caption grey--text text--darken-1 mt-1 custom-caption"
+                >
+                  캐릭터의 행동 방식과 제약사항을 정의하는 시스템 프롬프트입니다.
+                </div>
+              </v-col>
+            </v-row>
+
+
+            <!-- 취미 목록 -->
+            <v-row>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <h3 class="mb-2">
+                  취미 목록
+                </h3>
+
+                <v-row>
+                  <v-col cols="12">
+                    <v-row>
+                      <v-col cols="11">
+                        <v-text-field
+                          v-model="newHobby"
+                          label="새 취미 추가 (최대 100자)"
+                          outlined
+                          dense
+                          counter="100"
+                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
+                          @keyup.enter="addHobby"
+                        />
+                      </v-col>
+                      <v-col cols="1">
+                        <v-btn
+                          color="primary"
+                          class="mt-1"
+                          block
+                          :disabled="!newHobby.trim() || hobbies.length >= 10"
+                          @click="addHobby"
+                        >
+                          추가
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+
+                <v-card
+                  outlined
+                  class="memory-container"
+                >
+                  <v-list
+                    v-if="hobbies.length > 0"
+                    class="memory-list"
+                  >
+                    <v-list-item
+                      v-for="(hobby, index) in hobbies"
+                      :key="index"
+                      class="memory-item"
+                    >
+                      <v-list-item-content>
+                        <v-list-item-title class="memory-text">
+                          {{ hobby }}
+                        </v-list-item-title>
+                      </v-list-item-content>
+                      <v-list-item-action>
+                        <v-btn
+                          small
+                          color="error"
+                          class="delete-btn"
+                          @click="removeHobby(index)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-list-item-action>
+                    </v-list-item>
+                  </v-list>
+                  <v-card-text
+                    v-else
+                    class="text-center grey--text"
+                  >
+                    취미가 없습니다. 위 입력창에서 취미를 추가해주세요. (최대 10개)
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <!-- 가치관 목록 -->
+            <v-row>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <h3 class="mb-2">
+                  가치관 목록
+                </h3>
+
+                <v-row>
+                  <v-col cols="12">
+                    <v-row>
+                      <v-col cols="11">
+                        <v-text-field
+                          v-model="newValue"
+                          label="새 가치관 추가 (최대 100자)"
+                          outlined
+                          dense
+                          counter="100"
+                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
+                          @keyup.enter="addValue"
+                        />
+                      </v-col>
+                      <v-col cols="1">
+                        <v-btn
+                          color="primary"
+                          class="mt-1"
+                          block
+                          :disabled="!newValue.trim() || values.length >= 10"
+                          @click="addValue"
+                        >
+                          추가
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+
+                <v-card
+                  outlined
+                  class="memory-container"
+                >
+                  <v-list
+                    v-if="values.length > 0"
+                    class="memory-list"
+                  >
+                    <v-list-item
+                      v-for="(value, index) in values"
+                      :key="index"
+                      class="memory-item"
+                    >
+                      <v-list-item-content>
+                        <v-list-item-title class="memory-text">
+                          {{ value }}
+                        </v-list-item-title>
+                      </v-list-item-content>
+                      <v-list-item-action>
+                        <v-btn
+                          small
+                          color="error"
+                          class="delete-btn"
+                          @click="removeValue(index)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-list-item-action>
+                    </v-list-item>
+                  </v-list>
+                  <v-card-text
+                    v-else
+                    class="text-center grey--text"
+                  >
+                    가치관이 없습니다. 위 입력창에서 가치관을 추가해주세요. (최대 10개)
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <!-- 목표 -->
+            <v-row>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <h3 class="mb-2">
+                  목표
+                </h3>
+
+                <v-row>
+                  <v-col cols="12">
+                    <v-row>
+                      <v-col cols="11">
+                        <v-text-field
+                          v-model="newGoal"
+                          label="새 목표 추가 (최대 200자)"
+                          outlined
+                          dense
+                          counter="200"
+                          :rules="[v => v.length <= 200 || '최대 200자까지 입력 가능합니다']"
+                          @keyup.enter="addGoal"
+                        />
+                      </v-col>
+                      <v-col cols="1">
+                        <v-btn
+                          color="primary"
+                          class="mt-1"
+                          block
+                          :disabled="!newGoal.trim() || goals.length >= 10"
+                          @click="addGoal"
+                        >
+                          추가
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+
+                <v-card
+                  outlined
+                  class="memory-container"
+                >
+                  <v-list
+                    v-if="goals.length > 0"
+                    class="memory-list"
+                  >
+                    <v-list-item
+                      v-for="(goal, index) in goals"
+                      :key="index"
+                      class="memory-item"
+                    >
+                      <v-list-item-content>
+                        <v-list-item-title class="memory-text">
+                          {{ goal }}
+                        </v-list-item-title>
+                      </v-list-item-content>
+                      <v-list-item-action>
+                        <v-btn
+                          small
+                          color="error"
+                          class="delete-btn"
+                          @click="removeGoal(index)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-list-item-action>
+                    </v-list-item>
+                  </v-list>
+                  <v-card-text
+                    v-else
+                    class="text-center grey--text"
+                  >
+                    목표가 없습니다. 위 입력창에서 목표를 추가해주세요. (최대 10개)
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+
+            <!-- 세계관 (배경이야기) -->
+            <v-row>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <h3 class="mb-2">
+                  세계관 (배경이야기)
+                </h3>
+
+                <v-row>
+                  <v-col cols="12">
+                    <v-row>
+                      <v-col cols="5">
+                        <v-text-field
+                          v-model="newBackgroundTopic"
+                          label="주제 (최대 100자)"
+                          outlined
+                          dense
+                          counter="100"
+                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
+                          @keyup.enter="addBackground"
+                        />
+                      </v-col>
+                      <v-col cols="6">
+                        <v-textarea
+                          v-model="newBackgroundDescription"
+                          label="배경 설명 (최대 1000자)"
+                          outlined
+                          dense
+                          auto-grow
+                          rows="2"
+                          counter="1000"
+                          :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
+                        />
+                      </v-col>
+                      <v-col cols="1">
+                        <v-btn
+                          color="primary"
+                          class="mt-1"
+                          block
+                          :disabled="!newBackgroundTopic.trim() || !newBackgroundDescription.trim() || backgrounds.length >= 10"
+                          @click="addBackground"
+                        >
+                          추가
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+
+                <v-card
+                  outlined
+                  class="memory-container"
+                >
+                  <v-list
+                    v-if="backgrounds.length > 0"
+                    class="memory-list"
+                  >
+                    <v-list-item
+                      v-for="(background, index) in backgrounds"
+                      :key="index"
+                      class="memory-item"
+                    >
+                      <v-list-item-content>
+                        <v-list-item-title class="memory-text font-weight-bold">
+                          {{ background.topic }}
+                        </v-list-item-title>
+                        <v-list-item-subtitle class="memory-text mt-1">
+                          {{ background.description }}
+                        </v-list-item-subtitle>
+                      </v-list-item-content>
+                      <v-list-item-action>
+                        <v-btn
+                          small
+                          color="error"
+                          class="delete-btn"
+                          @click="removeBackground(index)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-list-item-action>
+                    </v-list-item>
+                  </v-list>
+                  <v-card-text
+                    v-else
+                    class="text-center grey--text"
+                  >
+                    세계관 정보가 없습니다. 위 입력창에서 세계관 정보를 추가해주세요. (최대 10개)
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <!-- 성격 특성 -->
+            <v-row>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <h3 class="mb-2">
+                  성격 특성
+                </h3>
+
+                <v-row>
+                  <v-col cols="12">
+                    <v-row>
+                      <v-col cols="5">
+                        <v-text-field
+                          v-model="newPersonalityTrait"
+                          label="특성 제목 (최대 100자)"
+                          outlined
+                          dense
+                          counter="100"
+                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
+                          @keyup.enter="addPersonality"
+                        />
+                      </v-col>
+                      <v-col cols="6">
+                        <v-textarea
+                          v-model="newPersonalityDescription"
+                          label="특성 설명 (최대 500자)"
+                          outlined
+                          dense
+                          auto-grow
+                          rows="2"
+                          counter="500"
+                          :rules="[v => v.length <= 500 || '최대 500자까지 입력 가능합니다']"
+                        />
+                      </v-col>
+                      <v-col cols="1">
+                        <v-btn
+                          color="primary"
+                          class="mt-1"
+                          block
+                          :disabled="!newPersonalityTrait.trim() || !newPersonalityDescription.trim() || personalities.length >= 10"
+                          @click="addPersonality"
+                        >
+                          추가
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+
+                <v-card
+                  outlined
+                  class="memory-container"
+                >
+                  <v-list
+                    v-if="personalities.length > 0"
+                    class="memory-list"
+                  >
+                    <v-list-item
+                      v-for="(personality, index) in personalities"
+                      :key="index"
+                      class="memory-item"
+                    >
+                      <v-list-item-content>
+                        <v-list-item-title class="memory-text font-weight-bold">
+                          {{ personality.trait }}
+                        </v-list-item-title>
+                        <v-list-item-subtitle class="memory-text mt-1">
+                          {{ personality.description }}
+                        </v-list-item-subtitle>
+                      </v-list-item-content>
+                      <v-list-item-action>
+                        <v-btn
+                          small
+                          color="error"
+                          class="delete-btn"
+                          @click="removePersonality(index)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-list-item-action>
+                    </v-list-item>
+                  </v-list>
+                  <v-card-text
+                    v-else
+                    class="text-center grey--text"
+                  >
+                    성격 특성이 없습니다. 위 입력창에서 성격 특성을 추가해주세요. (최대 10개)
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <!-- 기억/메모리 -->
+            <v-row>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <h3 class="mb-2">
+                  기억/메모리
+                </h3>
+
+                <v-row>
+                  <v-col cols="12">
+                    <v-row>
+                      <v-col cols="4">
+                        <v-text-field
+                          v-model="newMemoryTitle"
+                          label="제목 (최대 100자)"
+                          outlined
+                          dense
+                          counter="100"
+                          :rules="[v => v.length <= 100 || '최대 100자까지 입력 가능합니다']"
+                        />
+                      </v-col>
+                      <v-col cols="4">
+                        <v-textarea
+                          v-model="newMemoryContent"
+                          label="기억 내용 (최대 1000자)"
+                          outlined
+                          dense
+                          auto-grow
+                          rows="2"
+                          counter="1000"
+                          :rules="[v => v.length <= 1000 || '최대 1000자까지 입력 가능합니다']"
+                        />
+                      </v-col>
+                      <v-col cols="3">
+                        <v-text-field
+                          v-model="newMemoryEmotion"
+                          label="감정 (최대 50자)"
+                          outlined
+                          dense
+                          counter="50"
+                          :rules="[v => v.length <= 50 || '최대 50자까지 입력 가능합니다']"
+                          @keyup.enter="addMemory"
+                        />
+                      </v-col>
+                      <v-col cols="1">
+                        <v-btn
+                          color="primary"
+                          class="mt-1"
+                          block
+                          :disabled="!newMemoryTitle.trim() || !newMemoryContent.trim() || memories.length >= 20"
+                          @click="addMemory"
+                        >
+                          추가
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+
+                <v-card
+                  outlined
+                  class="memory-container"
+                >
+                  <v-list
+                    v-if="memories.length > 0"
+                    class="memory-list"
+                  >
+                    <v-list-item
+                      v-for="(memory, index) in memories"
+                      :key="index"
+                      class="memory-item"
+                    >
+                      <v-list-item-content>
+                        <v-list-item-title class="memory-text font-weight-bold">
+                          {{ memory.title }}
+                        </v-list-item-title>
+                        <v-list-item-subtitle class="memory-text mt-1">
+                          {{ memory.content }}
+                        </v-list-item-subtitle>
+                        <v-list-item-subtitle
+                          v-if="memory.emotion"
+                          class="memory-text mt-1 font-italic"
+                        >
+                          감정: {{ memory.emotion }}
+                        </v-list-item-subtitle>
+                      </v-list-item-content>
+                      <v-list-item-action>
+                        <v-btn
+                          small
+                          color="error"
+                          class="delete-btn"
+                          @click="removeMemory(index)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-list-item-action>
+                    </v-list-item>
+                  </v-list>
+                  <v-card-text
+                    v-else
+                    class="text-center grey--text"
+                  >
+                    기억이 없습니다. 위 입력창에서 기억을 추가해주세요. (최대 20개)
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <!-- 인물 관계 -->
+            <v-row>
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <h3 class="mb-2">
+                  인물 관계
+                </h3>
+
+                <v-row>
+                  <v-col cols="12">
+                    <!-- 1행: 상대방 이름, 관계명 -->
+                    <v-row>
+                      <v-col cols="4">
+                        <v-text-field
+                          v-model="newRelationship.personName"
+                          label="상대방 이름 (최대 10자)"
+                          outlined
+                          dense
+                          counter="10"
+                        />
+                      </v-col>
+                      <v-col cols="8">
+                        <v-text-field
+                          v-model="newRelationship.relationshipName"
+                          label="관계명 (어머니, 아버지, 친구 등) (최대 20자)"
+                          outlined
+                          dense
+                          counter="20"
+                        />
+                      </v-col>
+                    </v-row>
+
+                    <!-- 2행: 관계 타입, 현재 상태, 중요도 -->
+                    <v-row>
+                      <v-col cols="5">
+                        <v-text-field
+                          v-model="newRelationship.relationshipType"
+                          label="관계 타입 (가족, 친구, 동료, 연인, 기타 등) (최대 10자)"
+                          outlined
+                          dense
+                          counter="10"
+                        />
+                      </v-col>
+                      <v-col cols="5">
+                        <v-text-field
+                          v-model="newRelationship.currentStatus"
+                          label="현재 상태 (생존, 사망, 불명 등) (최대 10자)"
+                          outlined
+                          dense
+                          counter="10"
+                        />
+                      </v-col>
+                      <v-col cols="2">
+                        <v-text-field
+                          v-model.number="newRelationship.importance"
+                          label="중요도 (1~10)"
+                          outlined
+                          dense
+                          type="number"
+                          min="1"
+                          max="10"
+                        />
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
+
+                <v-row>
+                  <v-col cols="11">
+                    <v-textarea
+                      v-model="newRelationship.description"
+                      label="관계 설명 (최대 500자)"
+                      outlined
+                      dense
+                      auto-grow
+                      rows="2"
+                      counter="500"
+                      :rules="relationshipDescriptionRules"
+                      @keyup.enter="addRelationship"
+                    />
+                  </v-col>
+                  <v-col cols="1">
+                    <v-btn
+                      color="primary"
+                      class="mt-1"
+                      block
+                      :disabled="!newRelationship.personName || !newRelationship.relationshipName || !newRelationship.relationshipType || !newRelationship.currentStatus || !newRelationship.importance || relationships.length >= 10"
+                      @click="addRelationship"
+                    >
+                      추가
+                    </v-btn>
+                  </v-col>
+                </v-row>
+
+                <v-card
+                  outlined
+                  class="memory-container"
+                >
+                  <v-list
+                    v-if="relationships.length > 0"
+                    class="memory-list"
+                  >
+                    <v-list-item
+                      v-for="(relationship, index) in relationships"
+                      :key="index"
+                      class="memory-item"
+                    >
+                      <v-list-item-content>
+                        <v-list-item-title class="memory-text font-weight-bold">
+                          {{ relationship.personName }} - {{ relationship.relationshipName }}
+                        </v-list-item-title>
+                        <v-list-item-subtitle class="memory-text mt-1">
+                          타입: {{ relationship.relationshipType }} | 상태: {{ relationship.currentStatus }} | 중요도: {{ relationship.importance }}
+                        </v-list-item-subtitle>
+                        <v-list-item-subtitle
+                          v-if="relationship.description"
+                          class="memory-text mt-1"
+                        >
+                          {{ relationship.description }}
+                        </v-list-item-subtitle>
+                      </v-list-item-content>
+                      <v-list-item-action>
+                        <v-btn
+                          small
+                          color="error"
+                          class="delete-btn"
+                          @click="removeRelationship(index)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-list-item-action>
+                    </v-list-item>
+                  </v-list>
+                  <v-card-text
+                    v-else
+                    class="text-center grey--text"
+                  >
+                    인물 관계가 없습니다. 위 입력창에서 인물 관계를 추가해주세요. (최대 10개)
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <!-- 활성화 상태 -->
+            <v-row v-show="isEdit">
+              <v-col cols="12">
+                <v-divider class="my-4" />
+                <v-switch
+                  v-model="character.isActive"
+                  label="캐릭터 활성화"
+                  color="primary"
+                  hide-details
+                  class="mt-2"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
+
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="error"
+              text
+              :disabled="isLoading"
+              @click="goBack"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              color="primary"
+              :loading="isLoading"
+              :disabled="isSaveDisabled"
+              @click="saveCharacter"
+            >
+              {{ isEdit ? '수정' : '저장' }}
+            </v-btn>
+          </v-card-actions>
+        </v-form>
+      </v-card>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import {getCharacter, createCharacter, updateCharacter} from '@/api/character';
+
+export default {
+  name: "CharacterForm",
+
+  data() {
+    return {
+      isLoading: false,
+      isFormValid: false,
+      isEdit: false,
+      previewImage: null,
+      newMemoryTitle: '',
+      newMemoryContent: '',
+      newMemoryEmotion: '',
+      newRelationship: {
+        personName: '',
+        relationshipName: '',
+        description: '',
+        importance: null,
+        relationshipType: '',
+        currentStatus: ''
+      },
+      newHobby: '',
+      newValue: '',
+      newGoal: '',
+      newPersonalityTrait: '',
+      newPersonalityDescription: '',
+      newBackgroundTopic: '',
+      newBackgroundDescription: '',
+      tags: [],
+      memories: [],
+      relationships: [],
+      hobbies: [],
+      values: [],
+      goals: [],
+      personalities: [],
+      backgrounds: [],
+      originalCharacter: null, // 원본 캐릭터 데이터 저장용
+      character: {
+        id: null,
+        name: '',
+        description: '',
+        image: null,
+        imageUrl: '',
+        isActive: true,
+        gender: '',
+        age: '',
+        mbti: '',
+        characterType: '',
+        originalTitle: '',
+        originalLink: '',
+        speechPattern: '',
+        speechStyle: '',
+        appearance: '',
+        systemPrompt: '',
+        tags: [],
+        memories: [],
+        relationships: [],
+        hobbies: [],
+        values: [],
+        goals: [],
+        personalities: [],
+        backgrounds: []
+      },
+      ageRules: [
+        v => !!v || '나이를 입력하세요',
+        v => (v && !isNaN(v) && parseInt(v) >= 0) || '유효한 나이를 입력하세요'
+      ],
+      tagRules: [
+        v => v.length <= 20 || '태그는 최대 20개까지 등록 가능합니다'
+      ],
+      nameRules: [
+        v => !!v || '이름을 입력하세요',
+        v => (v && v.trim().length > 0) || '이름을 입력하세요'
+      ],
+      descriptionRules: [
+        v => !!v || '한 줄 소개를 입력하세요',
+        v => (v && v.trim().length > 0) || '한 줄 소개를 입력하세요'
+      ],
+      imageRules: [
+        v => (this.isEdit ? true : (!!v || '이미지를 선택하세요'))
+      ],
+      genderOptions: ['남성', '여성', '기타'],
+      mbtiOptions: [
+        'INTJ', 'INTP', 'ENTJ', 'ENTP',
+        'INFJ', 'INFP', 'ENFJ', 'ENFP',
+        'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ',
+        'ISTP', 'ISFP', 'ESTP', 'ESFP'
+      ],
+      typeOptions: ['Clone', 'Character'],
+      systemPromptRules: [
+        v => (this.isEdit ? true : (!!v && v.trim().length > 0) || '시스템 프롬프트를 입력하세요')
+      ],
+      // 인물 관계 옵션 및 검증 규칙
+      relationshipTypeOptions: ['가족', '친구', '동료', '연인', '기타'],
+      relationshipStatusOptions: ['생존', '사망', '불명'],
+      personNameRules: [
+        v => (v === '' || v != null) || '상대방 이름을 입력하세요',
+        v => (!v || (typeof v === 'string' && v.length <= 10)) || '최대 10자까지 입력 가능합니다',
+        v => (!!v && v.trim().length > 0) || '상대방 이름을 입력하세요'
+      ],
+      relationshipNameRules: [
+        v => (!!v && v.trim().length > 0) || '관계명을 입력하세요',
+        v => (typeof v === 'string' && v.length <= 20) || '최대 20자까지 입력 가능합니다'
+      ],
+      relationshipDescriptionRules: [
+        v => (!v || (typeof v === 'string' && v.length <= 500)) || '최대 500자까지 입력 가능합니다'
+      ],
+      relationshipImportanceRules: [
+        v => (v !== null && v !== '' && !isNaN(v)) || '중요도를 입력하세요',
+        v => (parseInt(v) >= 1 && parseInt(v) <= 10) || '1~10 사이 숫자만 입력 가능합니다'
+      ],
+      relationshipTypeRules: [
+        v => (!!v && v.trim().length > 0) || '관계 타입을 입력하세요',
+        v => (typeof v === 'string' && v.length <= 10) || '최대 10자까지 입력 가능합니다'
+      ],
+      relationshipStatusRules: [
+        v => (!!v && v.trim().length > 0) || '현재 상태를 입력하세요',
+        v => (typeof v === 'string' && v.length <= 10) || '최대 10자까지 입력 가능합니다'
+      ]
+    }
+  },
+
+  computed: {
+    isSaveDisabled() {
+      if (this.isLoading) return true;
+      // 등록(create) 모드에서는 폼 유효성으로 판단
+      if (!this.isEdit) {
+        return !this.isFormValid;
+      }
+
+      // 수정(edit) 모드에서는 변경 사항이 있는지만 판단(필수값 유효성과 무관)
+      const changed = this.getChangedFields();
+      const hasNonIdField = Object.keys(changed || {}).some(k => k !== 'id');
+      const imageChanged = !!this.character.image; // 새 이미지 선택 여부
+      return !(hasNonIdField || imageChanged);
+    }
+  },
+
+  watch: {
+    'character.image': {
+      handler(newImage) {
+        if (newImage) {
+          this.createImagePreview(newImage);
+        } else {
+          this.previewImage = null;
+        }
+      }
+    }
+  },
+
+  created() {
+    // 수정 모드인지 확인
+    if (this.$route.query.id) {
+      this.isEdit = true;
+      this.loadCharacter(this.$route.query.id);
+    }
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message);
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message);
+    },
+
+    goBack() {
+      this.$router.push('/character');
+    },
+
+    validateNumberInput() {
+      // 숫자만 입력 가능하도록 처리
+      if (this.character.age && isNaN(this.character.age)) {
+        this.character.age = this.character.age.replace(/[^0-9]/g, '');
+      }
+    },
+
+    createImagePreview(file) {
+      if (!file) return;
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.previewImage = e.target.result;
+      };
+      reader.readAsDataURL(file);
+    },
+
+    addTag() {
+      const lastTag = this.tags[this.tags.length - 1];
+      if (lastTag && typeof lastTag === 'string' && lastTag.trim()) {
+        // 띄어쓰기 제거 및 50자 제한
+        let processedTag = lastTag.trim().replace(/\s+/g, '');
+        if (processedTag.length > 50) {
+          processedTag = processedTag.substring(0, 50);
+        }
+
+        // 태그 개수 제한 (20개)
+        if (this.tags.length <= 20) {
+          this.tags.splice(this.tags.length - 1, 1, processedTag);
+          this.$nextTick(() => {
+            this.tags.push('');
+          });
+        } else {
+          this.notifyError('태그는 최대 20개까지 등록 가능합니다.');
+        }
+      }
+    },
+
+    removeTag(item) {
+      this.tags.splice(this.tags.indexOf(item), 1);
+    },
+
+    addMemory() {
+      if (this.newMemoryTitle.trim() && this.newMemoryContent.trim()) {
+        if (this.memories.length >= 20) {
+          this.notifyError('기억은 최대 20개까지 등록 가능합니다.');
+          return;
+        }
+
+        // 글자수 제한 적용
+        let title = this.newMemoryTitle.trim();
+        let content = this.newMemoryContent.trim();
+        let emotion = this.newMemoryEmotion.trim();
+
+        if (title.length > 100) {
+          title = title.substring(0, 100);
+        }
+
+        if (content.length > 1000) {
+          content = content.substring(0, 1000);
+        }
+
+        if (emotion.length > 50) {
+          emotion = emotion.substring(0, 50);
+        }
+
+        // 새 기억 객체 생성 및 추가
+        this.memories.unshift({
+          title,
+          content,
+          emotion
+        });
+
+        // 입력 필드 초기화
+        this.newMemoryTitle = '';
+        this.newMemoryContent = '';
+        this.newMemoryEmotion = '';
+      }
+    },
+
+    removeMemory(index) {
+      this.memories.splice(index, 1);
+    },
+
+    addRelationship() {
+      const r = this.newRelationship;
+      // 필수값 검사
+      if (!r.personName || !r.relationshipName || !r.relationshipType || !r.currentStatus || r.importance === null || r.importance === '') {
+        this.notifyError('상대방 이름, 관계명, 관계 타입, 현재 상태, 중요도를 모두 입력하세요.');
+        return;
+      }
+
+      if (this.relationships.length >= 10) {
+        this.notifyError('인물 관계는 최대 10개까지 등록 가능합니다.');
+        return;
+      }
+
+      // 길이 제한 적용
+      let personName = r.personName.trim().substring(0, 10);
+      let relationshipName = r.relationshipName.trim().substring(0, 20);
+      let description = (r.description || '').trim().substring(0, 500);
+
+      // 중요도 범위 보정
+      let importance = parseInt(r.importance);
+      if (isNaN(importance)) importance = 1;
+      importance = Math.max(1, Math.min(10, importance));
+
+      // 타입/상태 길이 제한 적용
+      let relationshipType = (r.relationshipType || '').trim().substring(0, 10);
+      let currentStatus = (r.currentStatus || '').trim().substring(0, 10);
+
+      const relationshipObj = {
+        personName,
+        relationshipName,
+        description,
+        importance,
+        relationshipType,
+        currentStatus
+      };
+
+      this.relationships.unshift(relationshipObj);
+
+      // 입력 필드 초기화
+      this.newRelationship = {
+        personName: '',
+        relationshipName: '',
+        description: '',
+        importance: null,
+        relationshipType: '',
+        currentStatus: ''
+      };
+    },
+
+    removeRelationship(index) {
+      this.relationships.splice(index, 1);
+    },
+
+    addHobby() {
+      if (this.newHobby.trim()) {
+        if (this.hobbies.length >= 10) {
+          this.notifyError('취미는 최대 10개까지 등록 가능합니다.');
+          return;
+        }
+
+        if (this.newHobby.length > 100) {
+          this.newHobby = this.newHobby.substring(0, 100);
+        }
+
+        this.hobbies.unshift(this.newHobby.trim());
+        this.newHobby = '';
+      }
+    },
+
+    removeHobby(index) {
+      this.hobbies.splice(index, 1);
+    },
+
+    addValue() {
+      if (this.newValue.trim()) {
+        if (this.values.length >= 10) {
+          this.notifyError('가치관은 최대 10개까지 등록 가능합니다.');
+          return;
+        }
+
+        if (this.newValue.length > 100) {
+          this.newValue = this.newValue.substring(0, 100);
+        }
+
+        this.values.unshift(this.newValue.trim());
+        this.newValue = '';
+      }
+    },
+
+    removeValue(index) {
+      this.values.splice(index, 1);
+    },
+
+    addGoal() {
+      if (this.newGoal.trim()) {
+        if (this.goals.length >= 10) {
+          this.notifyError('목표는 최대 10개까지 등록 가능합니다.');
+          return;
+        }
+
+        if (this.newGoal.length > 200) {
+          this.newGoal = this.newGoal.substring(0, 200);
+        }
+
+        this.goals.unshift(this.newGoal.trim());
+        this.newGoal = '';
+      }
+    },
+
+    removeGoal(index) {
+      this.goals.splice(index, 1);
+    },
+
+    addPersonality() {
+      if (this.newPersonalityTrait.trim() && this.newPersonalityDescription.trim()) {
+        if (this.personalities.length >= 10) {
+          this.notifyError('성격 특성은 최대 10개까지 등록 가능합니다.');
+          return;
+        }
+
+        // 글자수 제한 적용
+        let trait = this.newPersonalityTrait.trim();
+        let description = this.newPersonalityDescription.trim();
+
+        if (trait.length > 100) {
+          trait = trait.substring(0, 100);
+        }
+
+        if (description.length > 500) {
+          description = description.substring(0, 500);
+        }
+
+        // 새 성격 특성 객체 생성 및 추가
+        this.personalities.unshift({
+          trait,
+          description
+        });
+
+        // 입력 필드 초기화
+        this.newPersonalityTrait = '';
+        this.newPersonalityDescription = '';
+      }
+    },
+
+    removePersonality(index) {
+      this.personalities.splice(index, 1);
+    },
+
+    addBackground() {
+      if (this.newBackgroundTopic.trim() && this.newBackgroundDescription.trim()) {
+        if (this.backgrounds.length >= 10) {
+          this.notifyError('세계관 정보는 최대 10개까지 등록 가능합니다.');
+          return;
+        }
+
+        // 글자수 제한 적용
+        let topic = this.newBackgroundTopic.trim();
+        let description = this.newBackgroundDescription.trim();
+
+        if (topic.length > 100) {
+          topic = topic.substring(0, 100);
+        }
+
+        if (description.length > 1000) {
+          description = description.substring(0, 1000);
+        }
+
+        // 새 세계관 객체 생성 및 추가
+        this.backgrounds.unshift({
+          topic,
+          description
+        });
+
+        // 입력 필드 초기화
+        this.newBackgroundTopic = '';
+        this.newBackgroundDescription = '';
+      }
+    },
+
+    removeBackground(index) {
+      this.backgrounds.splice(index, 1);
+    },
+
+    // 공백과 null을 동일하게 취급하는 비교 함수
+    areEqualConsideringBlankNull(a, b) {
+      const a1 = (a === null || a === undefined) ? '' : a;
+      const b1 = (b === null || b === undefined) ? '' : b;
+      return a1 === b1;
+    },
+
+    // 로드된 캐릭터 데이터에서 null을 빈 문자열로 변환 (UI 표시용)
+    normalizeCharacterData(data) {
+      const result = { ...data };
+      const simpleFields = [
+        'name', 'systemPrompt', 'description', 'age', 'gender', 'mbti',
+        'characterType', 'originalTitle', 'originalLink', 'speechPattern',
+        'speechStyle', 'appearance', 'imageUrl'
+      ];
+      simpleFields.forEach(f => {
+        if (result[f] == null) result[f] = '';
+      });
+      return result;
+    },
+
+    // 변경된 필드만 추출하는 함수
+    getChangedFields() {
+      if (!this.originalCharacter || !this.isEdit) {
+        // 신규 등록인 경우 또는 원본 데이터가 없는 경우 전체 데이터 반환
+        return {
+          name: this.character.name,
+          systemPrompt: this.character.systemPrompt,
+          description: this.character.description,
+          age: this.character.age,
+          gender: this.character.gender,
+          mbti: this.character.mbti,
+          characterType: this.character.characterType,
+          originalTitle: this.character.originalTitle,
+          originalLink: this.character.originalLink,
+          speechPattern: this.character.speechPattern,
+          speechStyle: this.character.speechStyle,
+          appearance: this.character.appearance,
+          tags: this.character.tags || [],
+          hobbies: this.character.hobbies || [],
+          values: this.character.values || [],
+          goals: this.character.goals || [],
+          relationships: this.character.relationships || [],
+          personalities: this.character.personalities || [],
+          backgrounds: this.character.backgrounds || [],
+          memories: this.character.memories || [],
+          isActive: this.character.isActive
+        };
+      }
+
+      // 변경된 필드만 포함하는 객체
+      const changedFields = {
+        id: this.character.id // ID는 항상 포함
+      };
+
+      // 기본 필드 비교
+      const simpleFields = [
+        'name', 'description', 'age', 'gender', 'mbti', 'characterType', 'originalTitle', 'originalLink',
+        'speechPattern', 'speechStyle', 'isActive'
+      ];
+
+      simpleFields.forEach(field => {
+        if (!this.areEqualConsideringBlankNull(this.character[field], this.originalCharacter[field])) {
+          changedFields[field] = this.character[field];
+        }
+      });
+
+      if (!this.areEqualConsideringBlankNull(this.character.systemPrompt, this.originalCharacter.systemPrompt)) {
+        changedFields.systemPrompt = this.character.systemPrompt;
+      }
+
+      if (!this.areEqualConsideringBlankNull(this.character.appearance, this.originalCharacter.appearance)) {
+        changedFields.appearance = this.character.appearance;
+      }
+
+      // 배열 필드 비교 (깊은 비교)
+      const arrayFields = [
+        'tags', 'hobbies', 'values', 'goals'
+      ];
+
+      arrayFields.forEach(field => {
+        const original = this.originalCharacter[field] || [];
+        const current = this.character[field] || [];
+
+        // 길이가 다르거나 내용이 다른 경우
+        if (original.length !== current.length ||
+            JSON.stringify(original) !== JSON.stringify(current)) {
+          changedFields[field] = current;
+        }
+      });
+
+      // 복잡한 객체 배열 비교
+      const objectArrayFields = [
+        'personalities', 'backgrounds', 'memories', 'relationships'
+      ];
+
+      objectArrayFields.forEach(field => {
+        const original = this.originalCharacter[field] || [];
+        const current = this.character[field] || [];
+
+        // 길이가 다르거나 내용이 다른 경우
+        if (original.length !== current.length ||
+            JSON.stringify(original) !== JSON.stringify(current)) {
+          changedFields[field] = current;
+        }
+      });
+
+      return changedFields;
+    },
+
+    async loadCharacter(id) {
+      this.isLoading = true;
+      try {
+        const response = await getCharacter(id);
+
+        // API 응답에서 캐릭터 정보 설정
+        if (response && response.status === 200 && response.data.success === true) {
+          const data = response.data.data;
+
+          // 원본 데이터 저장 (깊은 복사)
+          this.originalCharacter = JSON.parse(JSON.stringify(data));
+
+          // 기본 데이터 설정 (null 값을 UI 표시를 위해 빈 문자열로 변환)
+          const normalized = this.normalizeCharacterData(data);
+          this.character = {
+            ...this.character, // 기본 구조 유지
+            ...normalized,  // API 응답 데이터(정규화)로 덮어쓰기
+            image: null        // 파일 입력은 초기화
+          };
+
+          // 태그, 메모리, 인물관계, 취미, 가치관, 목표, 성격 특성, 세계관 설정
+          this.tags = data.tags || [];
+          this.memories = data.memories || [];
+          this.relationships = data.relationships || [];
+          this.hobbies = data.hobbies || [];
+          this.values = data.values || [];
+          this.goals = data.goals || [];
+          this.personalities = data.personalities || [];
+          this.backgrounds = data.backgrounds || [];
+        } else {
+          this.notifyError('캐릭터 정보를 불러올 수 없습니다.');
+        }
+      } catch (e) {
+        console.error('캐릭터 정보 로드 오류:', e);
+        this.notifyError('캐릭터 정보를 불러오는데 실패했습니다.');
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    async saveCharacter() {
+      // 등록(create) 모드에서만 필수값 유효성 검사를 강제
+      if (!this.isEdit && !this.isFormValid) {
+        this.notifyError("필수 항목을 모두 입력하세요");
+        return;
+      }
+
+      if (this.isLoading) return;
+
+      this.isLoading = true;
+
+      try {
+        // 태그, 메모리, 인물관계, 취미, 가치관, 목표, 성격 특성, 세계관 데이터 설정
+        this.character.tags = this.tags.filter(tag => tag && typeof tag === 'string' && tag.trim());
+        this.character.memories = [...this.memories];
+        this.character.relationships = [...this.relationships];
+        this.character.hobbies = [...this.hobbies];
+        this.character.values = [...this.values];
+        this.character.goals = [...this.goals];
+        this.character.personalities = [...this.personalities];
+        this.character.backgrounds = [...this.backgrounds];
+
+        let response;
+
+        if (this.isEdit) {
+          // 수정 시 변경된 필드만 전송
+          const changedData = this.getChangedFields();
+          // 인물관계는 삭제를 포함해 항상 서버와 동기화를 보장하기 위해 항상 포함
+          changedData.relationships = this.character.relationships || [];
+          response = await updateCharacter(changedData, this.character.image);
+        } else {
+          // 신규 등록 시 ID 필드를 제외한 데이터 전송
+          const characterWithoutId = { ...this.character };
+          delete characterWithoutId.id;
+          response = await createCharacter(characterWithoutId);
+        }
+
+        if (response && response.status === 200 && response.data && response.data.success === true) {
+            this.notifySuccess(this.isEdit ? '캐릭터가 수정되었습니다.' : '캐릭터가 등록되었습니다.');
+            this.goBack();
+        } else {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
+        }
+      } catch (e) {
+        console.error('캐릭터 저장 오류:', e);
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    // ===== JSON 내보내기/가져오기 =====
+    buildSerializablePayload() {
+      const c = {
+        ...this.character,
+        tags: this.tags.filter(t => t && typeof t === 'string' && t.trim()),
+        hobbies: [...this.hobbies],
+        values: [...this.values],
+        goals: [...this.goals],
+        relationships: [...this.relationships],
+        personalities: [...this.personalities],
+        backgrounds: [...this.backgrounds],
+        memories: [...this.memories]
+      };
+
+      // 이미지 및 상태 관련 필드 제외
+      delete c.image;
+      delete c.imageUrl;
+      delete c.isActive;
+
+      return {
+        version: 1,
+        ...c
+      };
+    },
+
+    exportToJson() {
+      try {
+        const payload = this.buildSerializablePayload();
+        const json = JSON.stringify(payload, null, 2);
+        const blob = new Blob([json], { type: 'application/json;charset=utf-8' });
+
+        const filenameBase = (this.character.name || 'character').replace(/\s+/g, '_');
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `${filenameBase}.character.json`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(link.href);
+        this.notifySuccess('JSON 파일로 내보냈습니다.');
+      } catch (e) {
+        console.error(e);
+        this.notifyError('내보내기 중 오류가 발생했습니다.');
+      }
+    },
+
+    onImportFileChange(e) {
+      const file = e.target.files && e.target.files[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = () => {
+        try {
+          const text = reader.result;
+          const data = JSON.parse(text);
+          this.applyImportedData(data);
+          this.notifySuccess('JSON 데이터를 불러왔습니다.');
+        } catch (err) {
+          console.error(err);
+          this.notifyError('유효한 JSON 파일이 아닙니다.');
+        } finally {
+          // 동일 파일 재업로드 허용
+          e.target.value = '';
+        }
+      };
+      reader.readAsText(file, 'utf-8');
+    },
+
+    applyImportedData(data) {
+      // 1) 버전/형식 검증
+      if (!data || (data.version !== 1 && data.version !== undefined)) {
+        throw new Error('지원되지 않는 파일 버전입니다.');
+      }
+
+      // 2) 안전한 추출(helper)
+      const arr = (v) => Array.isArray(v) ? v : [];
+      const str = (v) => (v == null ? '' : String(v));
+
+      // 3) 이미지 및 상태 관련 필드 강제 제거 (파일 포맷 요구사항)
+      if (data) {
+        delete data.image;
+        delete data.imageUrl;
+        delete data.isActive;
+      }
+
+      // 4) 기본 필드 주입
+      const patch = {
+        name: str(data.name),
+        description: str(data.description),
+        systemPrompt: str(data.systemPrompt),
+        age: str(data.age),
+        gender: str(data.gender),
+        mbti: str(data.mbti),
+        characterType: str(data.characterType),
+        originalTitle: str(data.originalTitle),
+        originalLink: str(data.originalLink),
+        speechPattern: str(data.speechPattern),
+        speechStyle: str(data.speechStyle),
+        appearance: str(data.appearance)
+      };
+
+      // 5) 배열 필드 주입 + 간단 검증/정제
+      const sanitizeString = (s, max) => String(s || '').trim().substring(0, max);
+
+      this.tags = arr(data.tags).map(t => sanitizeString(t, 50)).slice(0, 20);
+      this.hobbies = arr(data.hobbies).map(h => sanitizeString(h, 100)).slice(0, 10);
+      this.values = arr(data.values).map(v => sanitizeString(v, 100)).slice(0, 10);
+      this.goals = arr(data.goals).map(g => sanitizeString(g, 200)).slice(0, 10);
+
+      this.memories = arr(data.memories).map(m => ({
+        title: sanitizeString(m.title, 100),
+        content: sanitizeString(m.content, 1000),
+        emotion: sanitizeString(m.emotion, 50)
+      })).slice(0, 20);
+
+      this.relationships = arr(data.relationships).map(r => ({
+        personName: sanitizeString(r.personName, 10),
+        relationshipName: sanitizeString(r.relationshipName, 20),
+        description: sanitizeString(r.description, 500),
+        importance: Math.max(1, Math.min(10, parseInt(r.importance || 1))),
+        relationshipType: sanitizeString(r.relationshipType, 10),
+        currentStatus: sanitizeString(r.currentStatus, 10)
+      })).slice(0, 10);
+
+      this.personalities = arr(data.personalities).map(p => ({
+        trait: sanitizeString(p.trait, 100),
+        description: sanitizeString(p.description, 500)
+      })).slice(0, 10);
+
+      this.backgrounds = arr(data.backgrounds).map(b => ({
+        topic: sanitizeString(b.topic, 100),
+        description: sanitizeString(b.description, 1000)
+      })).slice(0, 10);
+
+      // 6) character에 반영 (image는 반드시 null 유지)
+      this.character = {
+        ...this.character,
+        ...patch,
+        image: null
+      };
+    }
+  }
+}
+</script>
+
+<style scoped>
+.v-card {
+  border-radius: 8px;
+}
+
+.memory-container {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.memory-list {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.memory-item {
+  background-color: #f5f5f5;
+  margin-bottom: 4px;
+  border-radius: 4px;
+}
+
+.memory-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.delete-btn {
+  font-size: 12px;
+}
+
+.custom-caption {
+  font-size: 16px !important;
+}
+
+.required-asterisk >>> .v-label::after {
+  content: ' *';
+  color: #ff5252;
+}
+</style>
diff --git a/src/views/Chat/CharacterImageForm.vue b/src/views/Chat/CharacterImageForm.vue
new file mode 100644
index 0000000..dbf3594
--- /dev/null
+++ b/src/views/Chat/CharacterImageForm.vue
@@ -0,0 +1,306 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="goBack"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-spacer />
+      <v-toolbar-title>{{ isEdit ? '이미지 수정' : '이미지 등록' }}</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <v-card class="pa-4">
+        <v-form
+          ref="form"
+          v-model="isFormValid"
+        >
+          <v-card-text>
+            <v-row>
+              <v-col
+                v-show="!isEdit"
+                cols="12"
+                md="6"
+              >
+                <v-file-input
+                  v-if="!isEdit"
+                  v-model="form.image"
+                  label="이미지 (800x1000 비율 권장)"
+                  accept="image/*"
+                  prepend-icon="mdi-camera"
+                  show-size
+                  truncate-length="15"
+                  outlined
+                  dense
+                  :rules="imageRules"
+                />
+              </v-col>
+              <v-col
+                v-if="previewImage || form.imageUrl"
+                cols="12"
+                :md="isEdit ? 12 : 6"
+              >
+                <div class="text-center">
+                  <v-img
+                    :src="previewImage || form.imageUrl"
+                    max-height="240"
+                    :aspect-ratio="0.8"
+                    contain
+                  />
+                </div>
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-text-field
+                  v-model.number="form.soloPurchasePriceCan"
+                  label="이미지 단독 구매 가격(캔)"
+                  type="number"
+                  min="0"
+                  outlined
+                  dense
+                  :disabled="isEdit"
+                />
+              </v-col>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-text-field
+                  v-model.number="form.messagePurchasePriceCan"
+                  label="메시지에서 구매 가격(캔)"
+                  type="number"
+                  min="0"
+                  outlined
+                  dense
+                  :disabled="isEdit"
+                />
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col
+                cols="12"
+                md="6"
+              >
+                <v-switch
+                  v-model="form.adult"
+                  label="성인 이미지 여부"
+                  inset
+                  :disabled="isEdit"
+                />
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-col cols="12">
+                <v-combobox
+                  v-model="triggers"
+                  label="트리거 단어 입력"
+                  multiple
+                  chips
+                  small-chips
+                  deletable-chips
+                  outlined
+                  dense
+                  :rules="triggerRules"
+                  @keydown.space.prevent="addTrigger"
+                >
+                  <template v-slot:selection="{ attrs, item, select, selected }">
+                    <v-chip
+                      v-bind="attrs"
+                      :input-value="selected"
+                      close
+                      @click="select"
+                      @click:close="removeTrigger(item)"
+                    >
+                      {{ item }}
+                    </v-chip>
+                  </template>
+                </v-combobox>
+                <div class="caption grey--text text--darken-1">
+                  트리거를 입력하고 엔터를 누르면 추가됩니다. (20자 이내, 최소 3개, 최대 10개)
+                </div>
+              </v-col>
+            </v-row>
+          </v-card-text>
+
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              text
+              color="blue darken-1"
+              @click="goBack"
+            >
+              취소
+            </v-btn>
+            <v-btn
+              text
+              color="blue darken-1"
+              :disabled="!canSubmit || isSubmitting"
+              :loading="isSubmitting"
+              @click="save"
+            >
+              저장
+            </v-btn>
+          </v-card-actions>
+        </v-form>
+      </v-card>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import { createCharacterImage, updateCharacterImage, getCharacterImage } from '@/api/character'
+
+export default {
+  name: 'CharacterImageForm',
+  data() {
+    return {
+      isEdit: !!this.$route.query.imageId,
+      isSubmitting: false,
+      isFormValid: false,
+      characterId: Number(this.$route.query.characterId),
+      imageId: this.$route.query.imageId ? Number(this.$route.query.imageId) : null,
+      form: {
+        image: null,
+        imageUrl: '',
+        soloPurchasePriceCan: null,
+        messagePurchasePriceCan: null,
+        adult: false
+      },
+      previewImage: null,
+      triggers: [],
+      triggerRules: [
+        v => (v && v.length >= 3 && v.length <= 10) || '트리거는 최소 3개, 최대 10개까지 등록 가능합니다'
+      ],
+      imageRules: [
+        v => !!v || '이미지를 선택하세요'
+      ]
+    }
+  },
+  computed: {
+    canSubmit() {
+      const triggersValid = this.triggers && this.triggers.length >= 3 && this.triggers.length <= 10
+      if (this.isEdit) return triggersValid
+      return !!this.form.image && triggersValid
+    }
+  },
+  watch: {
+    'form.image'(newVal) {
+      if (!this.isEdit) {
+        if (newVal) this.createImagePreview(newVal)
+        else this.previewImage = null
+      }
+    }
+  },
+  created() {
+    if (!this.characterId) {
+      this.notifyError('캐릭터 ID가 없습니다.')
+      this.goBack();
+      return
+    }
+    if (this.isEdit && this.imageId) {
+      this.loadDetail()
+    }
+  },
+  methods: {
+    notifyError(m) { this.$dialog.notify.error(m) },
+    notifySuccess(m) { this.$dialog.notify.success(m) },
+    goBack() {
+      this.$router.push({ path: '/character/images', query: { characterId: this.characterId, name: this.$route.query.name || '' } })
+    },
+    createImagePreview(file) {
+      const reader = new FileReader()
+      reader.onload = e => { this.previewImage = e.target.result }
+      reader.readAsDataURL(file)
+    },
+    addTrigger(e) {
+      const value = (e.target.value || '').trim()
+      if (!value) return
+      if (value.length > 20) {
+        this.notifyError('트리거는 20자 이내여야 합니다.')
+        return
+      }
+      if (this.triggers.length >= 10) {
+        this.notifyError('트리거는 최대 10개까지 등록 가능합니다.')
+        return
+      }
+      if (!this.triggers.includes(value)) this.triggers.push(value)
+      e.target.value = ''
+    },
+    removeTrigger(item) {
+      this.triggers = this.triggers.filter(t => t !== item)
+    },
+    async loadDetail() {
+      try {
+        const resp = await getCharacterImage(this.imageId)
+        if (resp && resp.status === 200 && resp.data && resp.data.success === true) {
+          const d = resp.data.data
+          // 수정 시 트리거만 노출하며 나머지는 비활성화
+          this.form.imageUrl = d.imageUrl
+          this.form.soloPurchasePriceCan = d.imagePriceCan
+          this.form.messagePurchasePriceCan = d.messagePriceCan
+          this.form.adult = d.isAdult
+          this.triggers = d.triggers || []
+        } else {
+          this.notifyError('이미지 정보를 불러오지 못했습니다.')
+        }
+      } catch (e) {
+        console.error('이미지 상세 오류:', e)
+        this.notifyError('이미지 정보를 불러오지 못했습니다.')
+      }
+    },
+    async save() {
+      if (this.isSubmitting) return
+      // 트리거 개수 검증: 최소 3개, 최대 10개
+      if (!this.triggers || this.triggers.length < 3 || this.triggers.length > 10) {
+        this.notifyError('트리거는 최소 3개, 최대 10개여야 합니다.')
+        return
+      }
+      this.isSubmitting = true
+      try {
+        if (this.isEdit) {
+          const resp = await updateCharacterImage({ imageId: this.imageId, triggers: this.triggers })
+          if (resp && resp.status === 200 && resp.data && resp.data.success === true) {
+            this.notifySuccess('수정되었습니다.')
+            this.goBack()
+          } else {
+            this.notifyError('수정에 실패했습니다.')
+          }
+        } else {
+          const resp = await createCharacterImage({
+            characterId: this.characterId,
+            image: this.form.image,
+            imagePriceCan: this.form.soloPurchasePriceCan,
+            messagePriceCan: this.form.messagePurchasePriceCan,
+            isAdult: this.form.adult,
+            triggers: this.triggers
+          })
+          if (resp && resp.status === 200 && resp.data && resp.data.success === true) {
+            this.notifySuccess('등록되었습니다.')
+            this.goBack()
+          } else {
+            this.notifyError('등록에 실패했습니다.')
+          }
+        }
+      } catch (e) {
+        console.error('이미지 저장 오류:', e)
+        this.notifyError('작업 중 오류가 발생했습니다.')
+      } finally {
+        this.isSubmitting = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Chat/CharacterImageList.vue b/src/views/Chat/CharacterImageList.vue
new file mode 100644
index 0000000..e579afe
--- /dev/null
+++ b/src/views/Chat/CharacterImageList.vue
@@ -0,0 +1,325 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-btn
+        icon
+        @click="goBack"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <v-spacer />
+      <v-toolbar-title>캐릭터 이미지 관리</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <v-container>
+      <v-row class="align-center mb-4">
+        <v-col
+          cols="12"
+          md="6"
+        >
+          <div class="subtitle-1">
+            캐릭터: {{ characterName || characterId }}
+          </div>
+        </v-col>
+        <v-col
+          cols="12"
+          md="6"
+          class="text-right"
+        >
+          <v-btn
+            color="primary"
+            dark
+            @click="goToAdd"
+          >
+            이미지 추가
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <!-- 로딩 -->
+      <v-row v-if="isLoading && images.length === 0">
+        <v-col class="text-center">
+          <v-progress-circular
+            indeterminate
+            color="primary"
+            size="48"
+          />
+        </v-col>
+      </v-row>
+
+      <!-- 목록 -->
+      <draggable
+        v-if="images.length > 0"
+        v-model="images"
+        class="image-grid"
+        :options="{ animation: 150 }"
+        @end="onDragEnd"
+      >
+        <div
+          v-for="img in images"
+          :key="img.id"
+          class="image-card"
+        >
+          <v-card>
+            <div class="image-wrapper">
+              <v-img
+                :src="img.imageUrl"
+                :aspect-ratio="0.8"
+                contain
+              />
+              <div
+                v-if="img.isAdult"
+                class="ribbon"
+              >
+                성인
+              </div>
+            </div>
+            <v-card-text class="pt-2">
+              <div class="price-row d-flex align-center">
+                <div class="price-label">
+                  단독 :
+                </div>
+                <div class="price-value">
+                  {{ img.imagePriceCan }} 캔
+                </div>
+              </div>
+              <div class="price-row d-flex align-center">
+                <div class="price-label">
+                  메시지 :
+                </div>
+                <div class="price-value">
+                  {{ img.messagePriceCan }} 캔
+                </div>
+              </div>
+              <div class="mt-2">
+                <v-chip
+                  v-for="(t, i) in (img.triggers || [])"
+                  :key="i"
+                  small
+                  class="ma-1"
+                  color="primary"
+                  text-color="white"
+                >
+                  {{ t }}
+                </v-chip>
+              </div>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                small
+                color="primary"
+                @click="goToEdit(img)"
+              >
+                수정
+              </v-btn>
+              <v-btn
+                small
+                color="error"
+                @click="confirmDelete(img)"
+              >
+                삭제
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </div>
+      </draggable>
+
+      <!-- 데이터 없음 -->
+      <v-row v-if="!isLoading && images.length === 0">
+        <v-col class="text-center grey--text">
+          등록된 이미지가 없습니다.
+        </v-col>
+      </v-row>
+
+      <!-- 삭제 확인 다이얼로그 -->
+      <v-dialog
+        v-model="showDeleteDialog"
+        max-width="400"
+      >
+        <v-card>
+          <v-card-title class="headline">
+            이미지 삭제
+          </v-card-title>
+          <v-card-text>삭제하시겠습니까?</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="deleteImage"
+            >
+              삭제
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-container>
+  </div>
+</template>
+
+<script>
+import { getCharacterImageList, deleteCharacterImage, updateCharacterImageOrder } from '@/api/character'
+import draggable from 'vuedraggable'
+
+export default {
+  name: 'CharacterImageList',
+  components: { draggable },
+  data() {
+    return {
+      isLoading: false,
+      isSubmitting: false,
+      images: [],
+      characterId: null,
+      characterName: this.$route.query.name || '',
+      showDeleteDialog: false,
+      selectedImage: null
+    }
+  },
+  created() {
+    this.characterId = Number(this.$route.query.characterId)
+    if (!this.characterId) {
+      this.notifyError('캐릭터 ID가 없습니다.');
+      this.goBack()
+      return
+    }
+    this.loadImages()
+  },
+  methods: {
+    notifyError(message) { this.$dialog.notify.error(message) },
+    notifySuccess(message) { this.$dialog.notify.success(message) },
+    goBack() { this.$router.push('/character') },
+    async loadImages() {
+      this.isLoading = true
+      try {
+        const resp = await getCharacterImageList(this.characterId, 1, 20)
+        if (resp && resp.status === 200 && resp.data && resp.data.success === true) {
+          const data = resp.data.data
+          this.images = (data.content || data || [])
+        } else {
+          this.notifyError('이미지 목록을 불러오지 못했습니다.')
+        }
+      } catch (e) {
+        console.error('이미지 목록 오류:', e)
+        this.notifyError('이미지 목록 조회 중 오류가 발생했습니다.')
+      } finally {
+        this.isLoading = false
+      }
+    },
+    goToAdd() {
+      this.$router.push({ path: '/character/images/form', query: { characterId: this.characterId, name: this.characterName } })
+    },
+    goToEdit(img) {
+      this.$router.push({ path: '/character/images/form', query: { characterId: this.characterId, imageId: img.id, name: this.characterName } })
+    },
+    confirmDelete(img) {
+      this.selectedImage = img
+      this.showDeleteDialog = true
+    },
+    async deleteImage() {
+      if (!this.selectedImage || this.isSubmitting) return
+      this.isSubmitting = true
+      try {
+        const resp = await deleteCharacterImage(this.selectedImage.id)
+        if (resp && resp.status === 200 && resp.data && resp.data.success === true) {
+          this.notifySuccess('삭제되었습니다.')
+          this.showDeleteDialog = false
+          await this.loadImages()
+        } else {
+          this.notifyError('삭제에 실패했습니다.')
+        }
+      } catch (e) {
+        console.error('이미지 삭제 오류:', e)
+        this.notifyError('삭제 중 오류가 발생했습니다.')
+      } finally {
+        this.isSubmitting = false
+      }
+    },
+    async onDragEnd() {
+      try {
+        const ids = this.images.map(img => img.id)
+        const resp = await updateCharacterImageOrder(this.characterId, ids)
+        if (resp && resp.status === 200 && resp.data && resp.data.success === true) {
+          this.notifySuccess('이미지 순서가 변경되었습니다.')
+        } else {
+          this.notifyError('이미지 순서 변경에 실패했습니다.')
+          await this.loadImages()
+        }
+      } catch (e) {
+        console.error('이미지 순서 변경 오류:', e)
+        this.notifyError('이미지 순서 변경에 실패했습니다.')
+        await this.loadImages()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 16px;
+}
+.image-card {
+  width: 100%;
+}
+@media (max-width: 1264px) {
+  .image-grid { grid-template-columns: repeat(4, 1fr); }
+}
+@media (max-width: 960px) {
+  .image-grid { grid-template-columns: repeat(3, 1fr); }
+}
+@media (max-width: 600px) {
+  .image-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* Image wrapper for overlays */
+.image-wrapper {
+  position: relative;
+}
+
+/* Ribbon style for adult indicator */
+.ribbon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  background: #e53935; /* red darken-1 */
+  color: #fff;
+  padding: 6px 20px;
+  font-weight: 500;
+  font-size: 14px;
+  text-transform: none;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+  pointer-events: none;
+}
+
+/* Price rows styling */
+.price-row {
+  font-size: 16px;
+  line-height: 1.6;
+  margin-bottom: 4px;
+}
+.price-label {
+  width: 72px; /* 긴 쪽 기준으로 라벨 고정폭 */
+  text-align: left;
+  color: rgba(0,0,0,0.6);
+  font-weight: 700;
+}
+.price-value {
+  flex: 1;
+  font-weight: 700;
+  color: rgba(0,0,0,0.87);
+  text-align: left;
+}
+</style>
diff --git a/src/views/Chat/CharacterList.vue b/src/views/Chat/CharacterList.vue
new file mode 100644
index 0000000..31f872d
--- /dev/null
+++ b/src/views/Chat/CharacterList.vue
@@ -0,0 +1,406 @@
+<template>
+  <div>
+    <v-toolbar dark>
+      <v-spacer />
+      <v-toolbar-title>캐릭터 리스트</v-toolbar-title>
+      <v-spacer />
+    </v-toolbar>
+
+    <br>
+
+    <v-container>
+      <v-row>
+        <v-col cols="4">
+          <v-btn
+            color="primary"
+            dark
+            @click="showAddDialog"
+          >
+            캐릭터 추가
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-simple-table class="elevation-10">
+            <template>
+              <thead>
+                <tr>
+                  <th class="text-center">
+                    ID
+                  </th>
+                  <th class="text-center">
+                    이미지
+                  </th>
+                  <th class="text-center">
+                    캐릭터명
+                  </th>
+                  <th class="text-center">
+                    성별
+                  </th>
+                  <th class="text-center">
+                    나이
+                  </th>
+                  <th class="text-center">
+                    캐릭터 설명
+                  </th>
+                  <th class="text-center">
+                    MBTI
+                  </th>
+                  <th class="text-center">
+                    말투
+                  </th>
+                  <th class="text-center">
+                    대화 스타일
+                  </th>
+                  <th class="text-center">
+                    태그
+                  </th>
+                  <th class="text-center">
+                    등록일
+                  </th>
+                  <th class="text-center">
+                    수정일
+                  </th>
+                  <th class="text-center">
+                    관리
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="item in characters"
+                  :key="item.id"
+                >
+                  <td>{{ item.id }}</td>
+                  <td align="center">
+                    <v-img
+                      max-width="100"
+                      max-height="100"
+                      :src="item.imageUrl"
+                      class="rounded-circle"
+                    />
+                  </td>
+                  <td>{{ item.name }}</td>
+                  <td>{{ item.gender || '-' }}</td>
+                  <td>{{ item.age || '-' }}</td>
+                  <td>
+                    <v-btn
+                      small
+                      color="info"
+                      @click="showDetailDialog(item, 'description')"
+                    >
+                      보기
+                    </v-btn>
+                  </td>
+                  <td>{{ item.mbti || '-' }}</td>
+                  <td>
+                    <v-btn
+                      small
+                      color="info"
+                      @click="showDetailDialog(item, 'speechPattern')"
+                    >
+                      보기
+                    </v-btn>
+                  </td>
+                  <td>
+                    <v-btn
+                      small
+                      color="info"
+                      @click="showDetailDialog(item, 'speechStyle')"
+                    >
+                      보기
+                    </v-btn>
+                  </td>
+                  <td>
+                    <div v-if="item.tags && item.tags.length > 0">
+                      <v-chip
+                        v-for="(tag, index) in item.tags"
+                        :key="index"
+                        small
+                        class="ma-1"
+                        color="primary"
+                        text-color="white"
+                      >
+                        {{ tag }}
+                      </v-chip>
+                    </div>
+                    <span v-else>-</span>
+                  </td>
+                  <td>{{ item.createdAt }}</td>
+                  <td>{{ item.updatedAt || '-' }}</td>
+                  <td>
+                    <v-row>
+                      <v-col>
+                        <v-btn
+                          small
+                          color="primary"
+                          :disabled="is_loading"
+                          @click="showEditDialog(item)"
+                        >
+                          수정
+                        </v-btn>
+                      </v-col>
+                      <v-col>
+                        <v-btn
+                          small
+                          color="info"
+                          :disabled="is_loading"
+                          @click="goToImageList(item)"
+                        >
+                          이미지
+                        </v-btn>
+                      </v-col>
+                      <v-col>
+                        <v-btn
+                          small
+                          color="error"
+                          :disabled="is_loading"
+                          @click="deleteConfirm(item)"
+                        >
+                          삭제
+                        </v-btn>
+                      </v-col>
+                    </v-row>
+                  </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+
+
+    <!-- 삭제 확인 다이얼로그 -->
+    <v-dialog
+      v-model="show_delete_confirm_dialog"
+      max-width="400px"
+      persistent
+    >
+      <v-card>
+        <v-card-text />
+        <v-card-text>
+          "{{ selected_character.name }}"을(를) 삭제하시겠습니까?
+        </v-card-text>
+        <v-card-actions v-show="!is_loading">
+          <v-spacer />
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="closeDeleteDialog"
+          >
+            취소
+          </v-btn>
+          <v-btn
+            color="red darken-1"
+            text
+            @click="deleteCharacter"
+          >
+            확인
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <!-- 상세 내용 다이얼로그 -->
+    <v-dialog
+      v-model="show_detail_dialog"
+      max-width="600px"
+    >
+      <v-card>
+        <v-card-title>
+          {{ detail_title }}
+        </v-card-title>
+        <v-divider />
+        <v-card-text class="pt-4">
+          <div style="white-space: pre-wrap;">
+            {{ detail_content }}
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="primary"
+            text
+            @click="closeDetailDialog"
+          >
+            닫기
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import { getCharacterList, updateCharacter } from '@/api/character'
+
+export default {
+  name: "CharacterList",
+
+  data() {
+    return {
+      is_loading: false,
+      show_delete_confirm_dialog: false,
+      show_detail_dialog: false,
+      detail_type: '',
+      detail_content: '',
+      detail_title: '',
+      page: 1,
+      total_page: 0,
+      characters: [],
+      selected_character: {}
+    }
+  },
+
+  async created() {
+    await this.getCharacters()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+
+    showDetailDialog(item, type) {
+      this.selected_character = item;
+      this.detail_type = type;
+
+      // 타입에 따라 제목과 내용 설정
+      switch(type) {
+        case 'description':
+          this.detail_title = '캐릭터 설명';
+          this.detail_content = item.description || '내용이 없습니다.';
+          break;
+        case 'speechPattern':
+          this.detail_title = '말투';
+          this.detail_content = item.speechPattern || '내용이 없습니다.';
+          break;
+        case 'speechStyle':
+          this.detail_title = '대화 스타일';
+          this.detail_content = item.speechStyle || '내용이 없습니다.';
+          break;
+        default:
+          this.detail_title = '';
+          this.detail_content = '';
+      }
+
+      this.show_detail_dialog = true;
+    },
+
+    closeDetailDialog() {
+      this.show_detail_dialog = false;
+      this.detail_type = '';
+      this.detail_content = '';
+      this.detail_title = '';
+    },
+
+    showAddDialog() {
+      // 페이지로 이동
+      this.$router.push('/character/form');
+    },
+
+    goToImageList(item) {
+      this.$router.push({
+        path: '/character/images',
+        query: { characterId: item.id, name: item.name }
+      })
+    },
+
+    showEditDialog(item) {
+      // 페이지로 이동하면서 id 전달
+      this.$router.push({
+        path: '/character/form',
+        query: { id: item.id }
+      });
+    },
+
+
+    deleteConfirm(item) {
+      this.selected_character = item
+      this.show_delete_confirm_dialog = true
+    },
+
+    closeDeleteDialog() {
+      this.show_delete_confirm_dialog = false
+      this.selected_character = {}
+    },
+
+
+    async deleteCharacter() {
+      if (this.is_loading) return;
+      this.is_loading = true
+
+      try {
+        // 삭제 대신 isActive를 false로 설정하여 비활성화
+        const updateData = {
+          id: this.selected_character.id,
+          isActive: false
+        };
+        await updateCharacter(updateData);
+        this.closeDeleteDialog();
+        this.notifySuccess('삭제되었습니다.');
+        await this.getCharacters();
+      } catch (e) {
+        console.error('캐릭터 삭제 오류:', e);
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
+      } finally {
+        this.is_loading = false;
+      }
+    },
+
+    async next() {
+      await this.getCharacters()
+    },
+
+    async getCharacters() {
+      this.is_loading = true
+      try {
+        const response = await getCharacterList(this.page);
+
+        if (response && response.status === 200) {
+          if (response.data.success === true) {
+            const data = response.data.data;
+            this.characters = data.content || [];
+
+            const total_page = Math.ceil((data.totalCount || 0) / 20);
+            this.total_page = total_page <= 0 ? 1 : total_page;
+          } else {
+            this.notifyError('응답 데이터가 없습니다.');
+          }
+        } else {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
+        }
+      } catch (e) {
+        console.error('캐릭터 목록 조회 오류:', e);
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
+      } finally {
+        this.is_loading = false;
+      }
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.v-data-table {
+  width: 100%;
+}
+</style>