Merge branch 'main' into board-comment-2

src/components/button/EditBtn.vue

@@ -1,13 +1,30 @@
 <template>
-    <button class="btn btn-label-primary btn-icon">
+    <button class="btn btn-label-primary btn-icon" @click="toggleText">
-      <i class="bx bx-edit-alt"></i>
+      <i :class="buttonClass"></i>
     </button>
 </template>
 
-<script>
+<script setup>
-export default {
+import { ref, defineProps } from 'vue';
-    name: 'EditButton',
+
-    methods: {
+const props = defineProps({
-      },
+  isToggleEnabled: {
-    };
+      type: Boolean,
+      default: false,
+  },
+});
+
+const buttonClass = ref("bx bx-edit-alt");
+
+const toggleText = () => {
+  if (props.isToggleEnabled) {
+    buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
+  }
+};
+
+const resetButton = () => {
+    buttonClass.value = "bx bx-edit-alt";
+};
+
+defineExpose({ resetButton });
 </script>

src/components/button/WriteBtn.vue

@@ -1,9 +1,30 @@
 <template>
-    <button class="btn btn-label-primary btn-icon float-end">
+    <button class="btn btn-label-primary btn-icon float-end" @click="toggleText">
-        <i class="bx bx-edit"></i>
+        <i :class="buttonClass"></i>
     </button>
 </template>
 
 <script setup>
+import { ref, defineProps, defineExpose } from 'vue';
 
-</script>
+const props = defineProps({
+    isToggleEnabled: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const buttonClass = ref("bx bx-edit");
+
+const toggleText = () => {
+    if (props.isToggleEnabled) {
+        buttonClass.value = buttonClass.value === "bx bx-edit" ? "bx bx-x" : "bx bx-edit";
+    }
+};
+
+const resetButton = () => {
+    buttonClass.value = "bx bx-edit";
+};
+
+defineExpose({ resetButton });
+</script>

src/components/projectlist/ProjectList.vue

@@ -101,7 +101,7 @@
     import { computed, ref, watch, onMounted, inject } from 'vue';
     import SearchBar from '@c/search/SearchBar.vue';
     import ProjectCard from '@c/list/ProjectCard.vue';
-    import CategoryBtn from '@c/category/CategoryBtn.vue';
+    import CategoryBtn from '@/components/category/CategoryBtn.vue';
     import WriteBtn from '@c/button/WriteBtn.vue';
     import CenterModal from '@c/modal/CenterModal.vue';
     import FormSelect from '@c/input/FormSelect.vue';

src/components/wordDict/DictCard.vue

@@ -18,7 +18,6 @@
                 type="checkbox" 
                 class="form-check-input admin-chk"
                 :name="item.WRDDICSEQ" 
-                id=""
                 @change="toggleCheck($event)"
             >
             <div class="d-flex align-ite-center">
@@ -66,7 +65,7 @@
         </div>
 
         <div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
-            <EditBtn @click="writeStore.toggleItem(item.WRDDICSEQ)" />
+            <EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"/>
         </div>
     </li>
 </template>
@@ -74,7 +73,7 @@
 <script setup>
 import axios from "@api";
 import { useToastStore } from '@s/toastStore';
-import { ref, toRefs, getCurrentInstance, } from 'vue';
+import { getCurrentInstance, ref } from 'vue';
 import EditBtn from '@/components/button/EditBtn.vue';
 import $api from '@api';
 import DictWrite from './DictWrite.vue';
@@ -82,6 +81,7 @@ import { useUserInfoStore } from '@s/useUserInfoStore';
 import { useWriteVisibleStore } from '@s/writeVisible';
 
 const writeStore = useWriteVisibleStore();
+const writeButton = ref(null);
 
 // 유저 구분
 const userStore = useUserInfoStore();
@@ -103,68 +103,12 @@ const props = defineProps({
     }
 });
 
-// 카테고리
-// const localCateList = ref([...props.cateList]);
-// 선택 카테고리
-// const selectedCategory = ref('');
-
 // cateList emit
 const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']);
 
-// 글 수정 상태
-// const isWriteVisible = ref(false);
-
-
-// 글 수정 toggle
-// const toggleWriteVisible = () => {
-//     isWriteVisible.value = !isWriteVisible.value;
-// };
-
-//카테고리 등록 수정
-// const addCategory = (data) => {
-//     try {
-//         const lastCategory = localCateList.value.length > 0 
-//             ? localCateList.value[localCateList.value.length - 1] 
-//             : null;
-//         const newValue = lastCategory ? lastCategory.value + 1 : 600101;
-
-//         // // console.log('lastCategory', lastCategory);
-//         // // console.log('newValue', newValue);
-
-//         axios.post('worddict/insertCategory', {
-//             CMNCODNAM: data
-//         }).then(res => {
-//             if(res.data.data === 1){
-//                 toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
-//                 const newCategory = { label: data, value: newValue };
-//                 localCateList.value = [newCategory, ...localCateList.value];
-//                 selectedCategory.value = newCategory.value;
-
-//                 // // console.log('newCategory', newCategory);
-//                 // // console.log('localCateList.value', localCateList.value);
-//                 // // console.log('selectedCategory.value', selectedCategory.value);
-                
-//                 // // 부모에게 전달
-//                 emit('update:cateList', localCateList.value);
-//             } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
-//                 toastStore.onToast(res.data.message, 'e');
-//             }
-//         }).catch(err => {
-//             console.error('카테고리 추가 중 오류:', err);
-//         });
-//     } catch (err) {
-//         console.error('카테고리 추가 함수 오류:', err);
-//     }
-// }
-
 
 // 용어집 수정
 const editWord = (data) => {
-    // console.log('📌 수정할 데이터:', data);
-    // console.log('📌 수정할 데이터:', data.id);
-    // console.log('📌 수정할 데이터:', data.category);
-    // console.log('📌 수정할 데이터:', data.title);
-    // console.log('📌 수정할 데이터:', $common.deltaAsJson(data.content));
 
     if (!data.id) {
         console.error('❌ 수정할 데이터의 ID가 없습니다.');
@@ -181,8 +125,10 @@ const editWord = (data) => {
     .then((res) => {
         if (res.data.data === 1) {
             toastStore.onToast('✅ 용어가 수정되었습니다.', 's');
-            // isWriteVisible.value = false;
             writeStore.closeAll();
+            if (writeButton.value) {
+                writeButton.value.resetButton();
+            }
             emit('refreshWordList');
         } else {
             console.warn('⚠️ 서버 응답이 예상과 다릅니다:', res.data);
@@ -216,10 +162,13 @@ const toggleCheck = (event) => {
 </script>
 
 <style scoped>
-/* 동그란 테두리 설정 */
+.avatar {
+    cursor: default;
+}
+
 .user-avatar {
-    border: 3px solid; /* 테두리 */
+    border: 3px solid;
-    padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
+    padding: 0.1px;
 }
 
 .edit-btn {

src/components/wordDict/DictWrite.vue

@@ -29,11 +29,6 @@
                     @focusout="handleCategoryFocusout(addCategory)"
                 />
             </div>
-            <!-- <div class="col-2 btn-margin">
-                <button class="btn btn-primary btn-icon" @click="saveInput">
-                    <i class="bx bx-check"></i>
-                </button>
-            </div> -->
         </div>
     </div>
     <div class="dict-w">
@@ -65,14 +60,6 @@ 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 { clearConfig } from 'dompurify';
-// import { useUserInfoStore } from '@s/useUserInfoStore';
-
-// 유저 구분
-// const userStore = useUserInfoStore();
-
-// 유저 상태에 따른 disabled
-// const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');
 
 const emit = defineEmits(['close','addCategory','addWord']);
 
@@ -133,20 +120,6 @@ 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;
-// };
-
 const onChange = (newValue) => {
     selectCategory.value = newValue.target.value;
 };
@@ -199,11 +172,9 @@ const handleCategoryFocusout = (value) => {
     const valueTrim = value.trim();
 
     const existingCategory = props.dataList.find(item => item.label === valueTrim);
-    // console.log('existingCategory', existingCategory);
     
     // 카테고리 입력시 공백
     if(valueTrim == ''){
-        //alert('공백 ㄴㄴ');
         addCategoryAlert.value = true;
         
         // 공백시 강제 focus

src/views/wordDict/wordDict.vue

@@ -13,8 +13,7 @@
 
             <!-- 단어 갯수, 작성하기 -->
             <div class="mt-4">
-                단어 : {{ total }}
+                <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
-                <WriteButton @click="writeStore.toggleItem(999999)" />
             </div>
 
             <!-- ㄱ ㄴ ㄷ ㄹ -->
@@ -67,7 +66,7 @@
 </template>
 
 <script setup>
-    import { ref, watchEffect, computed, onMounted, getCurrentInstance, toRaw } from 'vue';
+    import { ref, computed, onMounted, getCurrentInstance, toRaw } from 'vue';
     import axios from '@api';
     import SearchBar from '@c/search/SearchBar.vue';
     import WriteButton from '@c/button/WriteBtn.vue';
@@ -77,14 +76,11 @@
     import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
     import commonApi from '@/common/commonApi';
     import { useToastStore } from '@s/toastStore';
-    import { useUserInfoStore } from '@s/useUserInfoStore';
     import { useWriteVisibleStore } from '@s/writeVisible';
 
     // 작성창 구분
     const writeStore = useWriteVisibleStore();
-
+    const writeButton = ref(null);
-    // 유저 구분
-    // const userStore = useUserInfoStore();
 
     const { appContext } = getCurrentInstance();
     const $common = appContext.config.globalProperties.$common;
@@ -107,7 +103,6 @@
     });
 
     const selectedCategory = ref('');
-    const selectCategory = ref('');
 
     // 체크박스 체크된 갯수
     const checkedItems = ref([]);
@@ -121,9 +116,6 @@
     // 검색
     const searchText = ref('');
 
-    // 작성
-    // const isWriteVisible = ref(false);
-
     // 데이터 로드
     onMounted(() => {
         getwordList();
@@ -168,34 +160,8 @@
     // 카테고리 선택
     const handleSelectedCategoryChange = (category) => {
         selectedCategory.value = category;
-        getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value)
+        getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
     }
-
-    // 작성 toggle
-    // const toggleWriteForm = () => {
-    //     isWriteVisible.value = !isWriteVisible.value;
-    // };
-
-    //카테고리 등록
-    // const addCategory = (data) =>{
-        // const lastCategory = cateList.value[cateList.value.length - 1];
-        // const newValue = lastCategory  ? lastCategory.value + 1 : 600101;
-        // const newCategory = { label: data, value: newValue };
-        //         cateList.value = [newCategory, ...cateList.value];
-        //         selectedCategory.value = newCategory.value;
-        //// axios.post('worddict/insertCategory',{
-        ////     CMNCODNAM: data
-        //// }).then(res => {
-        ////     if(res.data.data == '1'){
-        ////         toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
-        ////         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');
-        ////     }
-        //// })
-    // }
     
     // 용어집 등록
     const addWord = (wordData, data) => {
@@ -208,9 +174,9 @@
             category = existingCategory.label == '' ? wordData.category : existingCategory.value;
         } else {
             //카테고리 없을시 카테고리 와 용어 둘다 저장
-            // console.log('카테고리 없음');
             const lastCategory = cateList.value[cateList.value.length - 1];
             category = lastCategory ? lastCategory.value + 1 : 600101;
+            
         }
         sendWordRequest(category, wordData, data, !existingCategory);
     };
@@ -227,8 +193,10 @@
             axios.post('worddict/insertWord', payload).then(res => {
                 if (res.data.status === 'OK') {
                     toastStore.onToast('용어가 등록 되었습니다.', 's');
-                    // isWriteVisible.value = false;
                     writeStore.closeAll();
+                    if (writeButton.value) {
+                        writeButton.value.resetButton();
+                    }
                     getwordList();
                     const newCategory = { label: data, value: category };
                     cateList.value = [newCategory, ...cateList.value];
@@ -238,8 +206,10 @@
             axios.post('worddict/insertWord', payload).then(res => {
                 if (res.data.status === 'OK') {
                     toastStore.onToast('용어가 등록 되었습니다.', 's');
-                    // isWriteVisible.value = false;
                     writeStore.closeAll();
+                    if (writeButton.value) {
+                        writeButton.value.resetButton();
+                    }
                     getwordList();
                 }
             });
@@ -256,16 +226,12 @@
             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);
 
     // 용어집 삭제
     const deleteCheckedItems = () => {
-        // console.log("현재 체크된 name 값:", Object.values(checkedNames.value));
 
         axios.patch('worddict/deleteword', {
             idList: Object.values(checkedNames.value)
@@ -273,7 +239,6 @@
         .then(res => {
             if (res.data.status == 'OK') {
                 toastStore.onToast('용어 삭제가 완료되었습니다.', 's');
-                // isWriteVisible.value = false;
                 writeStore.closeAll();
                 getwordList();
 
@@ -283,7 +248,6 @@
             }
         })
         .catch(error => {
-            // console.error('삭제 요청 중 오류 발생:', error);
             toastStore.onToast('오류가 발생했습니다. 다시 시도해주세요.', 'e');
         });