From 8e20066b87cf87b5ba2451eca04cc8e84d9e168e Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Thu, 20 Feb 2025 14:19:35 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9A=A9=EC=96=B4=EC=A7=91=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormInput.vue            |  5 ++
 src/components/input/FormSelect.vue           |  6 +-
 .../wordDict/DictAlphabetFilter.vue           |  3 +
 src/components/wordDict/DictCard.vue          | 36 ++++++++-
 src/components/wordDict/DictWrite.vue         | 27 +++++--
 src/views/wordDict/wordDict.vue               | 81 ++++++++++++++-----
 6 files changed, 128 insertions(+), 30 deletions(-)

diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue
index 731824c..904d89f 100644
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@@ -12,6 +12,7 @@
                 v-model="inputValue"
                 :maxLength="maxlength"
                 :placeholder="title"
+                :disabled="disabled"
             />
             <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
                 {{ title }}을 확인해주세요.
@@ -60,6 +61,10 @@ const props = defineProps({
         default: true,
         required: false,
     },
+    disabled: {
+        type: Boolean,
+        default: false,
+    }
 });
 
 // Emits 정의
diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue
index 04b88f6..1115ea7 100644
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@@ -5,7 +5,7 @@
             <span :class="isEssential ? 'link-danger' : 'none'">*</span>
         </label>
         <div :class="isRow ? 'col-md-10' : 'col-md-12'">
-            <select class="form-select" :id="name" v-model="selectData">
+            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled">
                 <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i">
                     {{ isCommon ? item.label : item }}
                 </option>
@@ -63,6 +63,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
         required: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false
     }
 });
 
diff --git a/src/components/wordDict/DictAlphabetFilter.vue b/src/components/wordDict/DictAlphabetFilter.vue
index c0cc2ca..feed26e 100644
--- a/src/components/wordDict/DictAlphabetFilter.vue
+++ b/src/components/wordDict/DictAlphabetFilter.vue
@@ -43,6 +43,9 @@ const selectAlphabet = (alphabet) => {
 </script>
 
 <style scoped>
+.btn {
+    min-width: 56px;
+}
 
 @media (max-width: 768px) {
     .alphabet-list {
diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 36825f5..4c2ac0b 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -13,7 +13,15 @@
         />
 
         <div v-else>
-            <div class="d-flex align-items-center">
+            <input 
+                v-if="userStore.user.role == 'ROLE_ADMIN'"
+                type="checkbox" 
+                class="form-check-input admin-chk"
+                :name="item.WRDDICSEQ" 
+                id=""
+                @change="toggleCheck($event)"
+            >
+            <div class="d-flex align-ite-center">
                 <div class="w-100 d-flex align-items-center">
                     <span class="btn btn-primary pe-none">{{ item.category }}</span>
                     <strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
@@ -34,7 +42,10 @@
                     </div>
                 </div>
             </div>
-            <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
+            <div 
+                v-if="item.author.createdAt !== item.lastEditor.updatedAt" 
+                class="d-flex justify-content-between flex-wrap gap-2 mb-2"
+            >
                 <div class="d-flex flex-wrap align-items-center mb-50">
                     <div class="avatar avatar-sm me-2">
                         <img
@@ -64,6 +75,11 @@ import EditBtn from '@/components/button/EditBtn.vue';
 import $api from '@api';
 import DictWrite from './DictWrite.vue';
 
+import { useUserInfoStore } from '@s/useUserInfoStore';
+
+// 유저 구분
+const userStore = useUserInfoStore();
+
 const toastStore = useToastStore();
 
 const { appContext } = getCurrentInstance();
@@ -87,7 +103,7 @@ const localCateList = ref([...props.cateList]);
 const selectedCategory = ref('');
 
 // cateList emit
-const emit = defineEmits(['update:cateList','refreshWordList']);
+const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']);
 
 // 글 수정 상태
 const isWriteVisible = ref(false);
@@ -171,6 +187,12 @@ const formatDate = (dateString) => new Date(dateString).toLocaleString();
 // 프로필 이미지
 const getProfileImage = (imagePath) =>
     imagePath ? `${baseUrl}upload/img/profile/${imagePath}` : '/img/avatars/default-Profile.jpg';
+
+
+// 체크 상태 변경 시 부모로 전달
+const toggleCheck = (event) => {
+    emit('updateChecked', event.target.checked, props.item.WRDDICSEQ, event.target.name);
+};
 </script>
 
 <style scoped>
@@ -185,4 +207,12 @@ const getProfileImage = (imagePath) =>
     right: 0.7rem;
     top: 1.2rem;
 }
+
+
+.admin-chk {
+    position: absolute;
+    left: -0.5rem;
+    top: -0.5rem;
+    --bs-form-check-bg: #fff;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index 65bdceb..12d057c 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -10,10 +10,11 @@
                     @update:data="selectCategory = $event"
                     @change="onChange"
                     :value="formValue"
+                    :disabled="isDisabled"
                 />
             </div>
             <div class="col-2 btn-margin">
-                <PlusBtn @click="toggleInput"/>
+                <PlusBtn v-if="userStore.user.role == 'ROLE_ADMIN'" @click="toggleInput"/>
             </div>
         </div>
         
@@ -37,6 +38,7 @@
             :is-alert="wordTitleAlert"
             :modelValue="titleValue"
             @update:modelValue="wordTitle = $event"
+            :disabled="isDisabled"
         />
     </div>
     <div>
@@ -56,6 +58,13 @@ import QEditor from '@/components/editor/QEditor.vue';
 import FormInput from '@/components/input/FormInput.vue';
 import FormSelect from '@/components/input/FormSelect.vue';
 import PlusBtn from '../button/PlusBtn.vue';
+import { useUserInfoStore } from '@s/useUserInfoStore';
+
+// 유저 구분
+const userStore = useUserInfoStore();
+
+// 유저 상태에 따른 disabled
+const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');
 
 const emit = defineEmits(['close','addCategory','addWord']);
 
@@ -73,6 +82,11 @@ const addCategoryAlert = ref(false);
 //선택 카테고리
 const selectCategory = ref('');
 
+// 제목 상태
+const computedTitle = computed(() => 
+    wordTitle.value === '' ? props.titleValue : wordTitle.value
+);
+
 // 카테고리 상태
 const selectedCategory = computed(() => 
     selectCategory.value === '' ? props.formValue : selectCategory.value
@@ -104,15 +118,18 @@ const toggleInput = () => {
     showInput.value = !showInput.value;
 };
 
+
 // 카테고리 저장
 const saveInput = () => {
     if(addCategory.value == ''){
         addCategoryAlert.value = true;
         return;
+    }else {
+        addCategoryAlert.value = false;
     }
     // console.log('입력값 저장됨!',addCategory.value);
     emit('addCategory', addCategory.value);
-    showInput.value = false;
+    // showInput.value = false;
 };
 
 const onChange = (newValue) => {
@@ -122,9 +139,9 @@ const onChange = (newValue) => {
 //용어 등록
 const saveWord = () => {
     //validation
-
+    
     // 용어 체크
-    if(wordTitle.value == ''){
+    if(computedTitle.value == '' || computedTitle.length == 0){
         wordTitleAlert.value = true;
         return;
     }
@@ -137,7 +154,7 @@ const saveWord = () => {
 
     const wordData = {
         id: props.NumValue || null,
-        title: wordTitle.value,
+        title: computedTitle.value,
         category: selectedCategory.value,
         content: content.value,
     };
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index 68a060b..d027485 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-
+        <!-- {{ userStore.user.role  == 'ROLE_ADMIN' ? '관리자' : '일반인'}} -->
         <div class="card p-5">
             <!-- 타이틀, 검색 -->
             <div class="row">
@@ -34,32 +34,37 @@
             </div>
         </div>
 
-<!-- 용어 리스트 -->
-<div class="mt-10">
-    <!-- 로딩 중일 때 -->
-    <div v-if="loading">로딩 중...</div>
+        <!-- 용어 리스트 -->
+        <div class="mt-10">
+            <!-- 로딩 중일 때 -->
+            <div v-if="loading">로딩 중...</div>
 
-    <!-- 에러 메시지 -->
-    <div v-if="error" class="error">{{ error }}</div>
+            <!-- 에러 메시지 -->
+            <div v-if="error" class="error">{{ error }}</div>
 
-    <!-- 단어 목록 -->
-    <ul v-if="total > 0" class="px-0 list-unstyled">
-        <DictCard
-            v-for="item in wordList"
-            :key="item.WRDDICSEQ"
-            :item="item"
-            :cateList="cateList"
-            @refreshWordList="getwordList"
-        />
-    </ul>
+            <!-- 단어 목록 -->
+            <ul v-if="total > 0" class="px-0 list-unstyled">
+                <DictCard
+                    v-for="item in wordList"
+                    :key="item.WRDDICSEQ"
+                    :item="item"
+                    :cateList="cateList"
+                    @refreshWordList="getwordList"
+                    @updateChecked="updateCheckedItems"
+                />
+            </ul>
 
-    <!-- 데이터가 없을 때 -->
-    <div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div>
+            <!-- 데이터가 없을 때 -->
+            <div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div>
 
-</div>
+        </div>
 
     </div>
 
+    <button v-if="isAnyChecked" class="btn btn-danger admin-del-btn">
+        <i class="bx bx-trash"></i>
+    </button>
+
 </template>
 
 <script setup>
@@ -73,6 +78,10 @@
     import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
     import commonApi from '@/common/commonApi';
     import { useToastStore } from '@s/toastStore';
+    import { useUserInfoStore } from '@s/useUserInfoStore';
+
+    // 유저 구분
+    const userStore = useUserInfoStore();
 
     const { appContext } = getCurrentInstance();
     const $common = appContext.config.globalProperties.$common;
@@ -97,6 +106,11 @@
     const selectedCategory = ref('');
     const selectCategory = ref('');
 
+    // 체크박스 체크된 갯수
+    const checkedItems = ref([]);
+    // 체크박스의 name
+    const checkedNames = ref([]); 
+
 
     //선택된 알파벳
     const selectedAlphabet = ref('');
@@ -163,7 +177,6 @@
     const addCategory = (data) =>{
         const lastCategory = cateList.value[cateList.value.length - 1];
         const newValue = lastCategory  ? lastCategory.value + 1 : 600101;
-
         axios.post('worddict/insertCategory',{
             CMNCODNAM: data
         }).then(res => {
@@ -172,6 +185,8 @@
                 const newCategory = { label: data, value: newValue };
                 cateList.value = [newCategory, ...cateList.value];
                 selectedCategory.value = newCategory.value;
+            } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
+                toastStore.onToast(res.data.message, 'e');
             }
         })
     }
@@ -190,10 +205,34 @@
         })
     };
 
+    // 체크 상태 업데이트
+    const updateCheckedItems = (checked, id, name) => {
+        if (checked) {
+            checkedItems.value.push(id);
+            checkedNames.value.push(name);
+        } else {
+            checkedItems.value = checkedItems.value.filter(item => item !== id);
+            checkedNames.value = checkedNames.value.filter(item => item !== name);
+        }
+
+        // 콘솔에 현재 체크된 name 값 출력
+        console.log("현재 체크된 name 값:", checkedNames.value);
+    };
+
+    const isAnyChecked = computed(() => checkedItems.value.length > 0);
+
 </script>
 
 <style scoped>
 
+.admin-del-btn {
+    position: fixed;
+    right: 1.5rem;
+    bottom: 1.5rem;
+    width: 3rem;
+    height: 3rem;
+}
+
 .error {
     color: red;
     font-weight: bold;