From 3783714c756fb794d811b82f0456928dab563174 Mon Sep 17 00:00:00 2001
From: Yu Sung <hwchon1234@gmail.com>
Date: Thu, 7 Aug 2025 16:36:45 +0900
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=EC=BA=90=EB=A6=AD=ED=84=B0=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=85=8C=EC=9D=B4=EB=B8=94=20UI?=
 =?UTF-8?q?=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 테이블 헤더 변경 (이름→캐릭터명, 설명→캐릭터 설명 등)
- 이미지 크기 100x100으로 설정
- 캐릭터 설명, 말투, 대화 스타일을 보기 버튼으로 표시
- 다이얼로그를 통해 상세 내용 표시 기능 추가
---
 src/views/Chat/CharacterList.vue | 147 +++++++++++++++++++++++++++----
 1 file changed, 128 insertions(+), 19 deletions(-)

diff --git a/src/views/Chat/CharacterList.vue b/src/views/Chat/CharacterList.vue
index e8f3c9b..ab1a9c8 100644
--- a/src/views/Chat/CharacterList.vue
+++ b/src/views/Chat/CharacterList.vue
@@ -50,16 +50,31 @@
                     이미지
                   </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">
                     관리
@@ -74,29 +89,45 @@
                   <td>{{ item.id }}</td>
                   <td align="center">
                     <v-img
-                      max-width="70"
-                      max-height="70"
+                      max-width="100"
+                      max-height="100"
                       :src="item.imageUrl"
                       class="rounded-circle"
                     />
                   </td>
                   <td>{{ item.name }}</td>
-                  <td style="max-width: 200px !important; word-break:break-all; height: auto;">
-                    <vue-show-more-text
-                      :text="item.description"
-                      :lines="3"
-                    />
+                  <td>{{ item.gender || '-' }}</td>
+                  <td>{{ calculateAge(item.birthDate) }}</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-chip
-                      :color="item.isActive ? 'green' : 'red'"
-                      text-color="white"
+                    <v-btn
                       small
+                      color="info"
+                      @click="showDetailDialog(item, 'systemPrompt')"
                     >
-                      {{ item.isActive ? '활성' : '비활성' }}
-                    </v-chip>
+                      보기
+                    </v-btn>
                   </td>
                   <td>{{ item.createdAt }}</td>
+                  <td>{{ item.updatedAt || '-' }}</td>
                   <td>
                     <v-row>
                       <v-col>
@@ -170,22 +201,49 @@
         </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-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 VueShowMoreText from 'vue-show-more-text'
 import { getCharacterList, searchCharacters, deleteCharacter as apiDeleteCharacter } from '@/api/character'
 
 export default {
   name: "CharacterList",
 
-  components: { VueShowMoreText },
-
   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,
       search_word: '',
@@ -207,6 +265,57 @@ export default {
       this.$dialog.notify.success(message)
     },
 
+    calculateAge(birthDate) {
+      if (!birthDate) return '-';
+
+      // birthDate가 YYYY-MM-DD 형식이라고 가정
+      const today = new Date();
+      const birth = new Date(birthDate);
+
+      let age = today.getFullYear() - birth.getFullYear();
+      const monthDiff = today.getMonth() - birth.getMonth();
+
+      // 생일이 아직 지나지 않았으면 나이에서 1을 뺌
+      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
+        age--;
+      }
+
+      return age;
+    },
+
+    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 'systemPrompt':
+          this.detail_title = '대화 스타일';
+          this.detail_content = item.systemPrompt || '내용이 없습니다.';
+          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');