수정
This commit is contained in:
parent
d74c0ddacb
commit
19ce33e503
@ -52,29 +52,28 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Quill from 'quill';
|
||||
import 'quill/dist/quill.snow.css';
|
||||
import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
|
||||
import $api from '@api';
|
||||
import Quill from 'quill';
|
||||
import 'quill/dist/quill.snow.css';
|
||||
import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
|
||||
import $api from '@api';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
isAlert: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
initialData: {
|
||||
type: String,
|
||||
type: [String, Object],
|
||||
default: () => null,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const editor = ref(null); // 에디터 DOM 참조
|
||||
const font = ref('nanum-gothic'); // 기본 폰트
|
||||
const fontSize = ref('16px'); // 기본 폰트 크기
|
||||
const emit = defineEmits(['update:data']);
|
||||
const editor = ref(null); // 에디터 DOM 참조
|
||||
const font = ref('nanum-gothic'); // 기본 폰트
|
||||
const fontSize = ref('16px'); // 기본 폰트 크기
|
||||
const emit = defineEmits(['update:data']);
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(() => {
|
||||
// 툴바에서 선택할 수 있는 폰트 목록 설정
|
||||
const Font = Quill.import('formats/font');
|
||||
Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
|
||||
@ -111,11 +110,11 @@ onMounted(() => {
|
||||
watch([font, fontSize], () => {
|
||||
quillInstance.format('font', font.value);
|
||||
quillInstance.format('size', fontSize.value);
|
||||
|
||||
});
|
||||
|
||||
// 초기 데이터가 있을 경우, HTML 형식으로 삽입
|
||||
if (props.initialData) {
|
||||
console.log(props.initialData);
|
||||
quillInstance.setContents(JSON.parse(props.initialData));
|
||||
}
|
||||
|
||||
@ -150,7 +149,8 @@ onMounted(() => {
|
||||
formData.append('file', file);
|
||||
|
||||
// 이미지 서버에 업로드 후 URL 받기
|
||||
uploadImageToServer(formData).then(serverImageUrl => {
|
||||
uploadImageToServer(formData)
|
||||
.then(serverImageUrl => {
|
||||
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
|
||||
const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
|
||||
|
||||
@ -158,7 +158,8 @@ onMounted(() => {
|
||||
quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입
|
||||
|
||||
imageUrls.add(fullImageUrl); // 이미지 URL 추가
|
||||
}).catch(e => {
|
||||
})
|
||||
.catch(e => {
|
||||
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
|
||||
});
|
||||
}
|
||||
@ -187,12 +188,12 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
@import 'quill/dist/quill.snow.css';
|
||||
.ql-editor {
|
||||
@import 'quill/dist/quill.snow.css';
|
||||
.ql-editor {
|
||||
min-height: 300px;
|
||||
font-family: 'Nanum Gothic', sans-serif;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="col-2 btn-margin" v-if="!isDisabled">
|
||||
<PlusBtn @click="toggleInput"/>
|
||||
<PlusBtn @click="toggleInput" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -44,7 +44,12 @@
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event" :is-alert="wordContentAlert" :initialData="contentValue"/>
|
||||
<QEditor
|
||||
@update:data="content = $event"
|
||||
@update:imageUrls="imageUrls = $event"
|
||||
:is-alert="wordContentAlert"
|
||||
:initialData="contentValue"
|
||||
/>
|
||||
<div class="text-end mt-5">
|
||||
<button class="btn btn-primary" @click="saveWord">
|
||||
<i class="bx bx-check"></i>
|
||||
@ -54,87 +59,84 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, computed, ref, defineEmits } from 'vue';
|
||||
import { defineProps, computed, ref, defineEmits } from 'vue';
|
||||
|
||||
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 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';
|
||||
|
||||
const emit = defineEmits(['close','addCategory','addWord']);
|
||||
const emit = defineEmits(['close', 'addCategory', 'addWord']);
|
||||
|
||||
//용어제목
|
||||
const wordTitle = ref('');
|
||||
const addCategory = ref('');
|
||||
const content = ref('');
|
||||
const imageUrls = ref([]);
|
||||
//용어제목
|
||||
const wordTitle = ref('');
|
||||
const addCategory = ref('');
|
||||
const content = ref('');
|
||||
const imageUrls = ref([]);
|
||||
|
||||
//용어 Vaildation용
|
||||
const wordTitleAlert = ref(false);
|
||||
const wordContentAlert = ref(false);
|
||||
const addCategoryAlert = ref(false);
|
||||
//용어 Vaildation용
|
||||
const wordTitleAlert = ref(false);
|
||||
const wordContentAlert = ref(false);
|
||||
const addCategoryAlert = ref(false);
|
||||
|
||||
//선택 카테고리
|
||||
const selectCategory = ref('');
|
||||
//선택 카테고리
|
||||
const selectCategory = ref('');
|
||||
|
||||
// 제목 상태
|
||||
const computedTitle = computed(() =>
|
||||
wordTitle.value === '' ? props.titleValue : wordTitle.value
|
||||
);
|
||||
// 제목 상태
|
||||
const computedTitle = computed(() => (wordTitle.value === '' ? props.titleValue : wordTitle.value));
|
||||
|
||||
// 카테고리 상태
|
||||
const selectedCategory = computed(() =>
|
||||
selectCategory.value === '' ? props.formValue : selectCategory.value
|
||||
);
|
||||
// 카테고리 상태
|
||||
const selectedCategory = computed(() => (selectCategory.value === '' ? props.formValue : selectCategory.value));
|
||||
|
||||
// 카테고리 입력 중복 ref
|
||||
const categoryInputRef = ref(null);
|
||||
// 카테고리 입력 중복 ref
|
||||
const categoryInputRef = ref(null);
|
||||
|
||||
const props = defineProps({
|
||||
const props = defineProps({
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
default: () => [],
|
||||
},
|
||||
NumValue : {
|
||||
type: Number
|
||||
NumValue: {
|
||||
type: Number,
|
||||
},
|
||||
formValue : {
|
||||
type:[String, Number]
|
||||
formValue: {
|
||||
type: [String, Number],
|
||||
},
|
||||
titleValue : {
|
||||
type:String,
|
||||
},contentValue : {
|
||||
type:String,
|
||||
titleValue: {
|
||||
type: String,
|
||||
},
|
||||
contentValue: {
|
||||
type: String,
|
||||
},
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 카테고리 입력 창
|
||||
const showInput = ref(false);
|
||||
// 카테고리 입력 창
|
||||
const showInput = ref(false);
|
||||
|
||||
// 카테고리 입력 토글
|
||||
const toggleInput = () => {
|
||||
// 카테고리 입력 토글
|
||||
const toggleInput = () => {
|
||||
showInput.value = !showInput.value;
|
||||
};
|
||||
};
|
||||
|
||||
const onChange = (newValue) => {
|
||||
const onChange = newValue => {
|
||||
selectCategory.value = newValue.target.value;
|
||||
};
|
||||
};
|
||||
|
||||
//용어 등록
|
||||
const saveWord = () => {
|
||||
//용어 등록
|
||||
const saveWord = () => {
|
||||
//validation
|
||||
let computedTitleTrim;
|
||||
|
||||
if(computedTitle.value != undefined){
|
||||
computedTitleTrim = computedTitle.value.trim()
|
||||
if (computedTitle.value != undefined) {
|
||||
computedTitleTrim = computedTitle.value.trim();
|
||||
}
|
||||
|
||||
// 용어 체크
|
||||
if(computedTitleTrim == undefined || computedTitleTrim == ''){
|
||||
if (computedTitleTrim == undefined || computedTitleTrim == '') {
|
||||
wordTitleAlert.value = true;
|
||||
return;
|
||||
} else {
|
||||
@ -144,18 +146,15 @@ const saveWord = () => {
|
||||
// 내용 확인
|
||||
let inserts = [];
|
||||
if (inserts.length === 0 && content.value?.ops?.length > 0) {
|
||||
inserts = content.value.ops.map(op =>
|
||||
typeof op.insert === 'string' ? op.insert.trim() : op.insert
|
||||
);
|
||||
inserts = content.value.ops.map(op => (typeof op.insert === 'string' ? op.insert.trim() : op.insert));
|
||||
}
|
||||
|
||||
// 내용 체크
|
||||
if(content.value == '' || inserts.join('') === ''){
|
||||
if (content.value == '' || inserts.join('') === '') {
|
||||
wordContentAlert.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const wordData = {
|
||||
id: props.NumValue || null,
|
||||
title: computedTitle.value,
|
||||
@ -164,17 +163,16 @@ const saveWord = () => {
|
||||
};
|
||||
|
||||
emit('addWord', wordData, addCategory.value);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 카테고리 focusout 이벤트 핸들러 추가
|
||||
const handleCategoryFocusout = (value) => {
|
||||
// 카테고리 focusout 이벤트 핸들러 추가
|
||||
const handleCategoryFocusout = value => {
|
||||
const valueTrim = value.trim();
|
||||
|
||||
const existingCategory = props.dataList.find(item => item.label === valueTrim);
|
||||
|
||||
// 카테고리 입력시 공백
|
||||
if(valueTrim == ''){
|
||||
if (valueTrim == '') {
|
||||
addCategoryAlert.value = true;
|
||||
|
||||
// 공백시 강제 focus
|
||||
@ -184,9 +182,7 @@ const handleCategoryFocusout = (value) => {
|
||||
inputElement.focus();
|
||||
}
|
||||
}, 0);
|
||||
|
||||
|
||||
}else if (existingCategory) {
|
||||
} else if (existingCategory) {
|
||||
addCategoryAlert.value = true;
|
||||
|
||||
// 중복시 강제 focus
|
||||
@ -196,23 +192,20 @@ const handleCategoryFocusout = (value) => {
|
||||
inputElement.focus();
|
||||
}
|
||||
}, 0);
|
||||
|
||||
} else {
|
||||
addCategoryAlert.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dict-w {
|
||||
.dict-w {
|
||||
width: 83%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.btn-margin {
|
||||
margin-top: 2.5rem
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.btn-margin {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -10,25 +10,46 @@
|
||||
<div class="col-xl-12">
|
||||
<div class="card-body">
|
||||
<!-- 제목 입력 -->
|
||||
<FormInput
|
||||
title="제목"
|
||||
name="title"
|
||||
:is-essential="true"
|
||||
:is-alert="titleAlert"
|
||||
v-model="title"
|
||||
<FormInput title="제목" name="title" :is-essential="true" :is-alert="titleAlert" v-model="title" />
|
||||
|
||||
<!-- 첨부파일 업로드 -->
|
||||
<FormFile
|
||||
title="첨부파일"
|
||||
name="files"
|
||||
:is-alert="attachFilesAlert"
|
||||
@update:data="handleFileUpload"
|
||||
@update:isValid="isFileValid = $event"
|
||||
/>
|
||||
|
||||
<!-- 실시간 반영된 파일 개수 표시 -->
|
||||
<p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
|
||||
<p v-if="fileError" class="text-danger">{{ fileError }}</p>
|
||||
|
||||
<ul class="list-group mt-2" v-if="attachFiles.length">
|
||||
<li
|
||||
v-for="(file, index) in attachFiles"
|
||||
:key="index"
|
||||
class="list-group-item d-flex justify-content-between align-items-center"
|
||||
>
|
||||
{{ file.name }}
|
||||
<button class="close-btn" @click="removeFile(index)">✖</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 내용 입력 -->
|
||||
<div class="mb-4">
|
||||
<label for="html5-tel-input" class="col-md-2 col-form-label">
|
||||
내용
|
||||
<span class="text-red">*</span>
|
||||
<div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">
|
||||
내용을 확인해주세요.
|
||||
</div>
|
||||
<div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
|
||||
</label>
|
||||
<div class="col-md-12">
|
||||
<QEditor v-model="content" />
|
||||
<QEditor
|
||||
v-if="contentLoaded"
|
||||
@update:data="content = $event"
|
||||
@update:imageUrls="imageUrls = $event"
|
||||
:initialData="content"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -48,30 +69,30 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import QEditor from '@c/editor/QEditor.vue';
|
||||
import FormInput from '@c/input/FormInput.vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import axios from '@api';
|
||||
import QEditor from '@c/editor/QEditor.vue';
|
||||
import FormInput from '@c/input/FormInput.vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import axios from '@api';
|
||||
|
||||
// 상태 변수
|
||||
const title = ref('');
|
||||
const content = ref('');
|
||||
// 상태 변수
|
||||
const title = ref('');
|
||||
const content = ref('');
|
||||
|
||||
// 경고 상태
|
||||
const titleAlert = ref(false);
|
||||
const contentAlert = ref(false);
|
||||
// 경고 상태
|
||||
const titleAlert = ref(false);
|
||||
const contentAlert = ref(false);
|
||||
const contentLoaded = ref(false); //
|
||||
|
||||
// 라우터
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
|
||||
console.log(currentBoardId.value)
|
||||
// 게시물 데이터 로드
|
||||
const fetchBoardDetails = async () => {
|
||||
// 라우터
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
|
||||
// 게시물 데이터 로드
|
||||
const fetchBoardDetails = async () => {
|
||||
try {
|
||||
const response = await axios.get(`board/${currentBoardId.value}`);
|
||||
const data = response.data.data.boardDetail;
|
||||
const data = response.data.data;
|
||||
|
||||
if (!data) {
|
||||
console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
|
||||
@ -81,19 +102,19 @@ const fetchBoardDetails = async () => {
|
||||
// 데이터 설정
|
||||
title.value = data.title || '제목 없음';
|
||||
content.value = data.content || '내용 없음';
|
||||
|
||||
contentLoaded.value = true;
|
||||
} catch (error) {
|
||||
console.error('게시물 가져오기 오류:', error.response || error.message);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 목록 페이지로 이동
|
||||
const goList = () => {
|
||||
// 목록 페이지로 이동
|
||||
const goList = () => {
|
||||
router.push('/board');
|
||||
};
|
||||
};
|
||||
|
||||
// 게시물 수정
|
||||
const updateBoard = async () => {
|
||||
// 게시물 수정
|
||||
const updateBoard = async () => {
|
||||
// 유효성 검사
|
||||
if (!title.value) {
|
||||
titleAlert.value = true;
|
||||
@ -111,7 +132,8 @@ const updateBoard = async () => {
|
||||
// 수정 데이터 전송
|
||||
const boardData = {
|
||||
LOCBRDTTL: title.value,
|
||||
LOCBRDCON: content.value,
|
||||
LOCBRDCON: JSON.stringify(content.value),
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
};
|
||||
|
||||
await axios.put(`board/${currentBoardId.value}`, boardData);
|
||||
@ -122,21 +144,21 @@ const updateBoard = async () => {
|
||||
console.error('게시물 수정 중 오류 발생:', error);
|
||||
alert('게시물 수정에 실패했습니다.');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 컴포넌트 마운트 시 데이터 로드
|
||||
onMounted(() => {
|
||||
// 컴포넌트 마운트 시 데이터 로드
|
||||
onMounted(() => {
|
||||
if (currentBoardId.value) {
|
||||
fetchBoardDetails();
|
||||
} else {
|
||||
console.error('잘못된 게시물 ID:', currentBoardId.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.text-red {
|
||||
.text-red {
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -229,7 +229,7 @@
|
||||
const data = response.data.data;
|
||||
|
||||
profileName.value = data.author || '익명';
|
||||
|
||||
console.log(data.author);
|
||||
authorId.value = data.authorId;
|
||||
boardTitle.value = data.title || '제목 없음';
|
||||
boardContent.value = data.content || '';
|
||||
@ -569,7 +569,7 @@
|
||||
try {
|
||||
const response = await axios.post(`board/${currentBoardId.value}/password`, {
|
||||
LOCBRDPWD: password.value,
|
||||
LOCBRDSEQ: 288,
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
});
|
||||
|
||||
if (response.data.code === 200 && response.data.data === true) {
|
||||
@ -586,17 +586,18 @@
|
||||
passwordAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
if (error.response.status === 401) {
|
||||
passwordAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
} else {
|
||||
passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
|
||||
}
|
||||
} else if (error.request) {
|
||||
passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
|
||||
} else {
|
||||
passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
|
||||
}
|
||||
if (error.reponse && error.reponse.status === 401) passwordAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
// if (error.response) {
|
||||
// if (error.response.status === 401) {
|
||||
// passwordAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
// } else {
|
||||
// passwordAlert.value = error.response.data?.message || '서버 오류가 발생했습니다.';
|
||||
// }
|
||||
// } else if (error.request) {
|
||||
// passwordAlert.value = '네트워크 오류가 발생했습니다. 다시 시도해주세요.';
|
||||
// } else {
|
||||
// passwordAlert.value = '요청 중 알 수 없는 오류가 발생했습니다.';
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user