From 4a8414a1c46233cb5117d2974ef0cd8983987b56 Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Tue, 8 Apr 2025 10:36:47 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=81=B4?=
 =?UTF-8?q?=EB=9E=98=EC=8A=A4=20=EC=B6=94=EA=B0=80=20/=20=EC=9A=A9?=
 =?UTF-8?q?=EC=96=B4=EC=A7=91=20=EC=98=81=EC=97=AD=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MainVote.vue              |  2 +-
 src/components/main/MainWordDict.vue          |  2 +-
 src/components/user/UserList.vue              |  4 ++--
 src/components/voteboard/voteCard.vue         |  2 +-
 .../voteboard/voteCompleteUserListCard.vue    |  2 +-
 .../voteboard/voteInCompleteUserListCard.vue  |  2 +-
 src/components/wordDict/DictCard.vue          | 16 +++++++++++++-
 src/views/wordDict/wordDict.vue               | 22 +++++++++----------
 8 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/components/main/MainVote.vue b/src/components/main/MainVote.vue
index e0e0161..92b42ac 100644
--- a/src/components/main/MainVote.vue
+++ b/src/components/main/MainVote.vue
@@ -25,7 +25,7 @@
                                 <div class="avatar flex-shrink-0 me-1">
                                     <img
                                         style="cursor: auto;"
-                                        class="rounded-circle user-avatar"
+                                        class="rounded-circle user-avatar object-fit-contain"
                                         :src="getProfileImage(item.localVote.MEMBERPRF)"
                                         alt="최초 작성자"
                                         :style="{ borderColor: item.localVote.usercolor }"
diff --git a/src/components/main/MainWordDict.vue b/src/components/main/MainWordDict.vue
index 112c040..8bbe877 100644
--- a/src/components/main/MainWordDict.vue
+++ b/src/components/main/MainWordDict.vue
@@ -21,7 +21,7 @@
                     <!-- 프로필 이미지 -->
                     <div class="avatar flex-shrink-0 me-2 d-flex align-items-center">
                         <img
-                            class="rounded-circle user-avatar"
+                            class="rounded-circle user-avatar object-fit-contain"
                             :src="getProfileImage(item.lastEditor.profileImage)"
                             alt="최종 작성자"
                             :style="{ borderColor: item.lastEditor.color }"
diff --git a/src/components/user/UserList.vue b/src/components/user/UserList.vue
index 3f2ed08..93280ec 100644
--- a/src/components/user/UserList.vue
+++ b/src/components/user/UserList.vue
@@ -3,7 +3,7 @@
         <li
             v-for="(user, index) in displayedUserList"
             :key="index"
-            class="avatar pull-up"
+            class="avatar pull-up "
             :class="{ 'opacity-100': isUserDisabled(user) }"
             @click.stop="showOnlyActive ? null : toggleDisable(index)"
             :style="showOnlyActive ? 'cursor: default' : ''"
@@ -14,7 +14,7 @@
             :data-bs-original-title="getTooltipTitle(user)"
         >
             <img
-                class="rounded-circle user-avatar border border-3"
+                class="rounded-circle user-avatar border border-3 object-fit-contain"
                 :class="{ 'grayscaleImg': isUserDisabled(user) }"
                 :src="`${baseUrl}upload/img/profile/${user.MEMBERPRF}`"
                 :style="`border-color: ${user.usercolor} !important;`"
diff --git a/src/components/voteboard/voteCard.vue b/src/components/voteboard/voteCard.vue
index 165a9a5..c590257 100644
--- a/src/components/voteboard/voteCard.vue
+++ b/src/components/voteboard/voteCard.vue
@@ -4,7 +4,7 @@
             <h5 class="card-title mb-1">
                 <div class="list-unstyled users-list d-flex align-items-center gap-1">
                     <img
-                    class="rounded-circle user-avatar border border-3 w-px-40 h-px-40"
+                    class="object-fit-contain rounded-circle user-avatar border border-3 w-px-40 h-px-40"
                     :src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
                     :style="`border-color: ${data.localVote.usercolor} !important;`"
                     @error="$event.target.src = '/img/icons/icon.png'"
diff --git a/src/components/voteboard/voteCompleteUserListCard.vue b/src/components/voteboard/voteCompleteUserListCard.vue
index d86f576..92261b6 100644
--- a/src/components/voteboard/voteCompleteUserListCard.vue
+++ b/src/components/voteboard/voteCompleteUserListCard.vue
@@ -7,7 +7,7 @@
     :aria-label="data.MEMBERSEQ"
     :data-bs-original-title="getTooltipTitle(data)">
         <img
-            class="rounded-circle user-avatar border border-3"
+            class="rounded-circle user-avatar border border-3 object-fit-contain"
             :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
             :style="`border-color: ${data.usercolor} !important; width: 90%; height: 90%;`"
             @error="$event.target.src = '/img/icons/icon.png'"
diff --git a/src/components/voteboard/voteInCompleteUserListCard.vue b/src/components/voteboard/voteInCompleteUserListCard.vue
index 3f55d51..cc4bed4 100644
--- a/src/components/voteboard/voteInCompleteUserListCard.vue
+++ b/src/components/voteboard/voteInCompleteUserListCard.vue
@@ -7,7 +7,7 @@
     :aria-label="data.MEMBERSEQ"
     :data-bs-original-title="getTooltipTitle(data)">
         <img
-            class="rounded-circle user-avatar border border-3"
+            class="rounded-circle user-avatar border border-3 object-fit-contain"
             :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
             :style="`border-color: ${data.usercolor} !important;  width: 90%; height: 90%;`"
             @error="$event.target.src = '/img/icons/icon.png'"
diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 260f383..5ae98df 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -32,7 +32,7 @@
                 <div class="d-flex flex-wrap align-items-center me-4">
                     <div class="avatar me-2">
                     <img
-                        class="rounded-circle user-avatar"
+                        class="rounded-circle user-avatar object-fit-contain"
                         :src="getProfileImage(item.author.profileImage)"
                         alt="최초 작성자"
                         :style="{ borderColor: item.author.color }"
@@ -182,4 +182,18 @@ const toggleEdit = async () => {
 .btn.btn-primary {
     writing-mode: horizontal-tb;
 }
+.dict-content-wrap {
+    max-width: 100%;
+    overflow-x: auto;
+    word-break: break-word;
+    word-wrap: break-word;
+    white-space: normal;
+    box-sizing: border-box;
+}
+.dict-content-wrap * {
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    word-break: break-word;
+    white-space: normal !important;
+}
 </style>
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index f5775d4..257c29d 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -18,7 +18,7 @@
                 </div>
             </div>
 
-            <!-- 용어 리스트 컨텐츠 -->
+                <!-- 용어 리스트 컨텐츠 -->
             <div class="flex-grow-1">
                 <!-- 작성 -->
                 <div v-if="writeStore.isItemActive(999999)" class="ms-3 card p-5 mb-2">
@@ -29,9 +29,9 @@
                     <!-- 에러 메시지 -->
                     <div v-if="error" class="fw-bold text-danger">{{ error }}</div>
                     <!-- 단어 목록 -->
-                    <ul v-if="total > 0" class="ms-3 list-unstyled" style="overflow-x: hidden; word-wrap: break-word;">
+                    <ul v-if="total > 0"  class="ms-3 list-unstyled">
                         <DictCard
-                            class="DictCard q-editor-container"
+                            class="q-editor-container"
                             v-for="item in wordList"
                             :key="item.WRDDICSEQ"
                             :item="item"
@@ -331,15 +331,13 @@ import { useRoute } from 'vue-router';
     top: 5px;
     height: fit-content;
 }
-.DictCard {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 1rem;
-}
+
 .q-editor-container {
-    max-width: 100%; /* 영역이 넘치지 않게 */
-    overflow: auto; /* 넘치는 내용은 스크롤로 처리 */
-    word-wrap: break-word; /* 긴 단어는 자동으로 줄바꿈 */
-    white-space: normal; /* 내용이 길어지면 자동으로 줄바꿈 */
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis; /* 긴 내용이면 말줄임표 처리도 가능 */
+    word-break: break-word;
+    white-space: normal;
 }
+
 </style>