diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue index 0cbb4a7..62e3134 100644 --- a/src/components/input/FormInput.vue +++ b/src/components/input/FormInput.vue @@ -14,10 +14,15 @@ :placeholder="title" :disabled="disabled" :min="min" + @focusout="$emit('focusout', modelValue)" />
{{ title }}을 확인해주세요.
+ +
+ 카테고리 중복입니다. +
@@ -57,6 +62,10 @@ const props = defineProps({ type: Boolean, default: false, }, + isCateAlert : { + type :Boolean, + default: false, + }, isLabel : { type: Boolean, default: true, @@ -73,7 +82,7 @@ const props = defineProps({ }); // Emits 정의 -const emits = defineEmits(['update:modelValue']); +const emits = defineEmits(['update:modelValue', 'focusout']); // 로컬 상태로 사용하기 위한 `inputValue` const inputValue = ref(props.modelValue); diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue index b4bf68f..91efd33 100644 --- a/src/components/wordDict/DictCard.vue +++ b/src/components/wordDict/DictCard.vue @@ -4,12 +4,12 @@ v-if="isWriteVisible" @close="isWriteVisible = false" :dataList="cateList" - @addCategory="addCategory" @addWord="editWord" :NumValue="item.WRDDICSEQ" :formValue="item.WRDDICCAT" :titleValue="item.WRDDICTTL" :contentValue="item.WRDDICCON" + :isDisabled="userStore.user.role !== 'ROLE_ADMIN'" />
@@ -38,7 +38,7 @@ :style="{ borderColor: item.author.color}"/>
-

{{ formatDate(item.author.createdAt) }}

+

{{ formattedDate(item.author.createdAt) }}

@@ -55,13 +55,13 @@ :style="{ borderColor: item.lastEditor.color}"/>
-

{{ formatDate(item.lastEditor.updatedAt) }}

+

{{ formattedDate(item.lastEditor.updatedAt) }}

-
+
@@ -74,6 +74,7 @@ import { ref, toRefs, getCurrentInstance, } from 'vue'; import EditBtn from '@/components/button/EditBtn.vue'; import $api from '@api'; import DictWrite from './DictWrite.vue'; +import { formattedDate } from "@/common/formattedDate"; import { useUserInfoStore } from '@s/useUserInfoStore'; @@ -98,9 +99,9 @@ const props = defineProps({ }); // 카테고리 -const localCateList = ref([...props.cateList]); +// const localCateList = ref([...props.cateList]); // 선택 카테고리 -const selectedCategory = ref(''); +// const selectedCategory = ref(''); // cateList emit const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']); @@ -115,41 +116,41 @@ const toggleWriteVisible = () => { }; //카테고리 등록 수정 -const addCategory = (data) => { - try { - const lastCategory = localCateList.value.length > 0 - ? localCateList.value[localCateList.value.length - 1] - : null; - const newValue = lastCategory ? lastCategory.value + 1 : 600101; +// 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); +// // // 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; +// 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); +// // // 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); - } -} +// // // 부모에게 전달 +// 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); +// } +// } // 용어집 수정 @@ -191,7 +192,7 @@ const editWord = (data) => { const baseUrl = $api.defaults.baseURL.replace(/api\/$/, ''); // 날짜 포맷 -const formatDate = (dateString) => new Date(dateString).toLocaleString(); +// const formatDate = (dateString) => new Date(dateString).toLocaleString(); // 프로필 이미지 const defaultProfile = "/img/icons/icon.png"; diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue index 2de9ee1..d952edc 100644 --- a/src/components/wordDict/DictWrite.vue +++ b/src/components/wordDict/DictWrite.vue @@ -13,20 +13,27 @@ :disabled="isDisabled" />
-
- +
+
- +
- +
-
+
@@ -58,13 +65,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'; +// import { useUserInfoStore } from '@s/useUserInfoStore'; // 유저 구분 -const userStore = useUserInfoStore(); +// const userStore = useUserInfoStore(); // 유저 상태에 따른 disabled -const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN'); +// const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN'); const emit = defineEmits(['close','addCategory','addWord']); @@ -83,15 +90,18 @@ const addCategoryAlert = ref(false); const selectCategory = ref(''); // 제목 상태 -const computedTitle = computed(() => +const computedTitle = computed(() => wordTitle.value === '' ? props.titleValue : wordTitle.value ); // 카테고리 상태 -const selectedCategory = computed(() => +const selectedCategory = computed(() => selectCategory.value === '' ? props.formValue : selectCategory.value ); +// 카테고리 입력 중복 ref +const categoryInputRef = ref(null); + const props = defineProps({ dataList: { type: Array, @@ -106,7 +116,11 @@ const props = defineProps({ titleValue : { type:String, },contentValue : { - type:String + type:String, + }, + isDisabled: { + type: Boolean, + default: false } }); @@ -120,17 +134,17 @@ const toggleInput = () => { // 카테고리 저장 -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 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; @@ -138,18 +152,12 @@ const onChange = (newValue) => { //용어 등록 const saveWord = () => { - - // if(addCategory.value == ''){ - // addCategoryAlert.value = true; - // return; - // }else { - // addCategoryAlert.value = false; - // } - //validation - + console.log('computedTitle.value', computedTitle.value); + + // 용어 체크 - if(computedTitle.value == '' || computedTitle.length == 0){ + if(computedTitle.value == undefined){ wordTitleAlert.value = true; return; } @@ -166,8 +174,35 @@ const saveWord = () => { category: selectedCategory.value, content: content.value, }; - emit('addWord', wordData ,addCategory.value ); + + emit('addWord', wordData, addCategory.value); +} + + +// 카테고리 focusout 이벤트 핸들러 추가 +const handleCategoryFocusout = (value) => { + + const existingCategory = props.dataList.find(item => item.label === value); + // console.log('existingCategory', existingCategory); + + if (existingCategory) { + // console.log('이미 존재하는 카테고리입니다:', value); + addCategoryAlert.value = true; + + // 중복시 강제 focus + setTimeout(() => { + const inputElement = categoryInputRef.value?.$el?.querySelector('input'); + if (inputElement) { + inputElement.focus(); + } + }, 0); + + } else { + addCategoryAlert.value = false; + } }; + + + \ No newline at end of file diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue index 3942ee7..3d71174 100644 --- a/src/views/wordDict/wordDict.vue +++ b/src/views/wordDict/wordDict.vue @@ -1,6 +1,5 @@