Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

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 }"

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 }"

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' : ''"

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'"

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'"

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'"

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>

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>