localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'board-comment-2' of http://192.168.0.251:3000/localnet/localhost-front into board-comment-2

Browse Source
This commit is contained in:
kimdaae328 2025-02-28 16:15:23 +09:00
commit 77f248cead
6 changed files with 73 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/button/EditBtn.vue
View File

@ -1,13 +1,30 @@
<template>
<button class="btn btn-label-primary btn-icon">
<i class="bx bx-edit-alt"></i>
<button class="btn btn-label-primary btn-icon" @click="toggleText">
<i :class="buttonClass"></i>
</button>
</template>
<script>
export default {
name: 'EditButton',
methods: {
<script setup>
import { ref, defineProps } from 'vue';
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>

25
src/components/button/WriteBtn.vue
View File

@ -1,9 +1,30 @@
<template>
<button class="btn btn-label-primary btn-icon float-end">
<i class="bx bx-edit"></i>
<button class="btn btn-label-primary btn-icon float-end" @click="toggleText">
<i :class="buttonClass"></i>
</button>
</template>
<script setup>
import { ref, defineProps, defineExpose } from 'vue';
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>

2
src/components/projectlist/ProjectList.vue
View File

@ -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';

75
src/components/wordDict/DictCard.vue
View File

@ -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; /* 테두리 */
padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
border: 3px solid;
padding: 0.1px;
}
.edit-btn {

29
src/components/wordDict/DictWrite.vue
View File

@ -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

58
src/views/wordDict/wordDict.vue
View File

@ -13,8 +13,7 @@
<!-- 단어 갯수, 작성하기 -->
<div class="mt-4">
단어 : {{ total }}
<WriteButton @click="writeStore.toggleItem(999999)" />
<WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
</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 userStore = useUserInfoStore();
const writeButton = ref(null);
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,35 +160,9 @@
// 카테고리 선택
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) => {
let category = null;
@ -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');
});