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

수정

Browse Source
This commit is contained in:
nevermoregb 2025-03-06 15:09:36 +09:00
parent d74c0ddacb
commit 19ce33e503
4 changed files with 385 additions and 368 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

253
src/components/editor/QEditor.vue
View File

@ -52,147 +52,148 @@
</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({
isAlert: {
type: Boolean,
default: false,
},
initialData: {
type: String,
default: () => null,
},
});
const editor = ref(null); // 에디터 DOM 참조
const font = ref('nanum-gothic'); // 기본 폰트
const fontSize = ref('16px'); // 기본 폰트 크기
const emit = defineEmits(['update:data']);
onMounted(() => {
// 툴바에서 선택할 수 있는 폰트 목록 설정
const Font = Quill.import('formats/font');
Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
Quill.register(Font, true);
// 툴바에서 선택할 수 있는 폰트 크기 목록 설정
const Size = Quill.import('attributors/style/size');
Size.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px', '48px'];
Quill.register(Size, true);
// Quill 에디터 인스턴스 생성
const quillInstance = new Quill(editor.value, {
theme: 'snow',
placeholder: '내용을 입력해주세요...',
modules: {
toolbar: {
container: '#toolbar',
},
syntax: true,
const props = defineProps({
isAlert: {
type: Boolean,
default: false,
},
initialData: {
type: [String, Object],
default: () => null,
},
});
// 폰트와 폰트 크기 설정
quillInstance.format('font', font.value);
quillInstance.format('size', fontSize.value);
const editor = ref(null); // 에디터 DOM 참조
const font = ref('nanum-gothic'); // 기본 폰트
const fontSize = ref('16px'); // 기본 폰트 크기
const emit = defineEmits(['update:data']);
// 텍스트가 변경될 때마다 부모 컴포넌트로 변경된 내용 전달
quillInstance.on('text-change', () => {
const delta = quillInstance.getContents(); // Delta 포맷으로 내용 가져오기
emit('update:data', delta);
});
onMounted(() => {
// 툴바에서 선택할 수 있는 폰트 목록 설정
const Font = Quill.import('formats/font');
Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
Quill.register(Font, true);
// 폰트나 폰트 크기가 변경될 때 에디터 스타일 업데이트
watch([font, fontSize], () => {
// 툴바에서 선택할 수 있는 폰트 크기 목록 설정
const Size = Quill.import('attributors/style/size');
Size.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px', '48px'];
Quill.register(Size, true);
// Quill 에디터 인스턴스 생성
const quillInstance = new Quill(editor.value, {
theme: 'snow',
placeholder: '내용을 입력해주세요...',
modules: {
toolbar: {
container: '#toolbar',
},
syntax: true,
},
});
// 폰트와 폰트 크기 설정
quillInstance.format('font', font.value);
quillInstance.format('size', fontSize.value);
});
// 초기 데이터가 있을 경우, HTML 형식으로 삽입
if (props.initialData) {
quillInstance.setContents(JSON.parse(props.initialData));
}
// 이미지 업로드 기능 처리
let imageUrls = new Set(); // 업로드된 이미지 URL을 추적
quillInstance.getModule('toolbar').addHandler('image', () => {
selectLocalImage(); // 이미지 버튼 클릭 시 로컬 이미지 선택
});
// 에디터의 텍스트가 변경될 때마다 이미지 처리
quillInstance.on('text-change', (delta, oldDelta, source) => {
emit('update:data', quillInstance.getContents());
delta.ops.forEach(op => {
if (op.insert && typeof op.insert === 'object' && op.insert.image) {
const imageUrl = op.insert.image; // 이미지 URL 추출
imageUrls.add(imageUrl); // URL 추가
} else if (op.delete) {
checkForDeletedImages(); // 삭제된 이미지 확인
}
// 텍스트가 변경될 때마다 부모 컴포넌트로 변경된 내용 전달
quillInstance.on('text-change', () => {
const delta = quillInstance.getContents(); // Delta 포맷으로 내용 가져오기
emit('update:data', delta);
});
});
// 로컬 이미지 파일 선택
async function selectLocalImage() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click(); // 파일 선택 다이얼로그 열기
input.onchange = () => {
const file = input.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
// 이미지 서버에 업로드 후 URL 받기
uploadImageToServer(formData).then(serverImageUrl => {
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
// 폰트나 폰트 크기가 변경될 때 에디터 스타일 업데이트
watch([font, fontSize], () => {
quillInstance.format('font', font.value);
quillInstance.format('size', fontSize.value);
});
const range = quillInstance.getSelection();
quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입
imageUrls.add(fullImageUrl); // 이미지 URL 추가
}).catch(e => {
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
});
}
};
}
// 이미지 서버 업로드
async function uploadImageToServer(formData) {
try {
const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
const imageUrl = response.data.data;
return imageUrl; // 서버에서 받은 이미지 URL 반환
} catch (error) {
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
throw error;
// 초기 데이터가 있을 경우, HTML 형식으로 삽입
if (props.initialData) {
console.log(props.initialData);
quillInstance.setContents(JSON.parse(props.initialData));
}
}
// 삭제된 이미지 확인
function checkForDeletedImages() {
const editorImages = document.querySelectorAll('#editor img');
const currentImages = new Set(Array.from(editorImages).map(img => img.src)); // 현재 에디터에 있는 이미지들
imageUrls.forEach(url => {
if (!currentImages.has(url)) {
imageUrls.delete(url);
}
// 이미지 업로드 기능 처리
let imageUrls = new Set(); // 업로드된 이미지 URL을 추적
quillInstance.getModule('toolbar').addHandler('image', () => {
selectLocalImage(); // 이미지 버튼 클릭 시 로컬 이미지 선택
});
}
});
// 에디터의 텍스트가 변경될 때마다 이미지 처리
quillInstance.on('text-change', (delta, oldDelta, source) => {
emit('update:data', quillInstance.getContents());
delta.ops.forEach(op => {
if (op.insert && typeof op.insert === 'object' && op.insert.image) {
const imageUrl = op.insert.image; // 이미지 URL 추출
imageUrls.add(imageUrl); // URL 추가
} else if (op.delete) {
checkForDeletedImages(); // 삭제된 이미지 확인
}
});
});
// 로컬 이미지 파일 선택
async function selectLocalImage() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click(); // 파일 선택 다이얼로그 열기
input.onchange = () => {
const file = input.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
// 이미지 서버에 업로드 후 URL 받기
uploadImageToServer(formData)
.then(serverImageUrl => {
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
const range = quillInstance.getSelection();
quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입
imageUrls.add(fullImageUrl); // 이미지 URL 추가
})
.catch(e => {
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
});
}
};
}
// 이미지 서버 업로드
async function uploadImageToServer(formData) {
try {
const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
const imageUrl = response.data.data;
return imageUrl; // 서버에서 받은 이미지 URL 반환
} catch (error) {
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
throw error;
}
}
// 삭제된 이미지 확인
function checkForDeletedImages() {
const editorImages = document.querySelectorAll('#editor img');
const currentImages = new Set(Array.from(editorImages).map(img => img.src)); // 현재 에디터에 있는 이미지들
imageUrls.forEach(url => {
if (!currentImages.has(url)) {
imageUrls.delete(url);
}
});
}
});
</script>
<style>
@import 'quill/dist/quill.snow.css';
.ql-editor {
min-height: 300px;
font-family: 'Nanum Gothic', sans-serif;
}
@import 'quill/dist/quill.snow.css';
.ql-editor {
min-height: 300px;
font-family: 'Nanum Gothic', sans-serif;
}
</style>

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

@ -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,165 +59,153 @@
</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({
dataList: {
type: Array,
default: () => []
},
NumValue : {
type: Number
},
formValue : {
type:[String, Number]
},
titleValue : {
type:String,
},contentValue : {
type:String,
},
isDisabled: {
type: Boolean,
default: false
}
});
const props = defineProps({
dataList: {
type: Array,
default: () => [],
},
NumValue: {
type: Number,
},
formValue: {
type: [String, Number],
},
titleValue: {
type: String,
},
contentValue: {
type: String,
},
isDisabled: {
type: Boolean,
default: false,
},
});
// 카테고리 입력 창
const showInput = ref(false);
// 카테고리 입력 창
const showInput = ref(false);
// 카테고리 입력 토글
const toggleInput = () => {
showInput.value = !showInput.value;
};
const onChange = (newValue) => {
selectCategory.value = newValue.target.value;
};
//용어 등록
const saveWord = () => {
//validation
let computedTitleTrim;
if(computedTitle.value != undefined){
computedTitleTrim = computedTitle.value.trim()
}
// 용어 체크
if(computedTitleTrim == undefined || computedTitleTrim == ''){
wordTitleAlert.value = true;
return;
} else {
wordTitleAlert.value = false;
}
// 내용 확인
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
);
}
// 내용 체크
if(content.value == '' || inserts.join('') === ''){
wordContentAlert.value = true;
return;
}
const wordData = {
id: props.NumValue || null,
title: computedTitle.value,
category: selectedCategory.value,
content: content.value,
// 카테고리 입력 토글
const toggleInput = () => {
showInput.value = !showInput.value;
};
emit('addWord', wordData, addCategory.value);
}
const onChange = newValue => {
selectCategory.value = newValue.target.value;
};
//용어 등록
const saveWord = () => {
//validation
let computedTitleTrim;
// 카테고리 focusout 이벤트 핸들러 추가
const handleCategoryFocusout = (value) => {
const valueTrim = value.trim();
if (computedTitle.value != undefined) {
computedTitleTrim = computedTitle.value.trim();
}
const existingCategory = props.dataList.find(item => item.label === valueTrim);
// 용어 체크
if (computedTitleTrim == undefined || computedTitleTrim == '') {
wordTitleAlert.value = true;
return;
} else {
wordTitleAlert.value = false;
}
// 카테고리 입력시 공백
if(valueTrim == ''){
addCategoryAlert.value = true;
// 내용 확인
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));
}
// 공백시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
// 내용 체크
if (content.value == '' || inserts.join('') === '') {
wordContentAlert.value = true;
return;
}
const wordData = {
id: props.NumValue || null,
title: computedTitle.value,
category: selectedCategory.value,
content: content.value,
};
}else if (existingCategory) {
addCategoryAlert.value = true;
emit('addWord', wordData, addCategory.value);
};
// 중복시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
// 카테고리 focusout 이벤트 핸들러 추가
const handleCategoryFocusout = value => {
const valueTrim = value.trim();
} else {
addCategoryAlert.value = false;
}
};
const existingCategory = props.dataList.find(item => item.label === valueTrim);
// 카테고리 입력시 공백
if (valueTrim == '') {
addCategoryAlert.value = true;
// 공백시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
} else if (existingCategory) {
addCategoryAlert.value = true;
// 중복시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
} else {
addCategoryAlert.value = false;
}
};
</script>
<style scoped>
.dict-w {
width: 83%;
}
@media (max-width: 768px) {
.btn-margin {
margin-top: 2.5rem
.dict-w {
width: 83%;
}
@media (max-width: 768px) {
.btn-margin {
margin-top: 2.5rem;
}
}
}
</style>

196
src/views/board/BoardEdit.vue
View File

@ -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,95 +69,96 @@
</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 () => {
try {
const response = await axios.get(`board/${currentBoardId.value}`);
const data = response.data.data.boardDetail;
// 라우터
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;
if (!data) {
console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
if (!data) {
console.error('API에서 게시물 데이터를 반환하지 않았습니다.');
return;
}
// 데이터 설정
title.value = data.title || '제목 없음';
content.value = data.content || '내용 없음';
contentLoaded.value = true;
} catch (error) {
console.error('게시물 가져오기 오류:', error.response || error.message);
}
};
// 목록 페이지로 이동
const goList = () => {
router.push('/board');
};
// 게시물 수정
const updateBoard = async () => {
// 유효성 검사
if (!title.value) {
titleAlert.value = true;
return;
}
titleAlert.value = false;
// 데이터 설정
title.value = data.title || '제목 없음';
content.value = data.content || '내용 없음';
if (!content.value) {
contentAlert.value = true;
return;
}
contentAlert.value = false;
} catch (error) {
console.error('게시물 가져오기 오류:', error.response || error.message);
}
};
try {
// 수정 데이터 전송
const boardData = {
LOCBRDTTL: title.value,
LOCBRDCON: JSON.stringify(content.value),
LOCBRDSEQ: currentBoardId.value,
};
// 목록 페이지로 이동
const goList = () => {
router.push('/board');
};
await axios.put(`board/${currentBoardId.value}`, boardData);
// 게시물 수정
const updateBoard = async () => {
// 유효성 검사
if (!title.value) {
titleAlert.value = true;
return;
}
titleAlert.value = false;
alert('게시물이 수정되었습니다.');
goList();
} catch (error) {
console.error('게시물 수정 중 오류 발생:', error);
alert('게시물 수정에 실패했습니다.');
}
};
if (!content.value) {
contentAlert.value = true;
return;
}
contentAlert.value = false;
try {
// 수정 데이터 전송
const boardData = {
LOCBRDTTL: title.value,
LOCBRDCON: content.value,
};
await axios.put(`board/${currentBoardId.value}`, boardData);
alert('게시물이 수정되었습니다.');
goList();
} catch (error) {
console.error('게시물 수정 중 오류 발생:', error);
alert('게시물 수정에 실패했습니다.');
}
};
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
if (currentBoardId.value) {
fetchBoardDetails();
} else {
console.error('잘못된 게시물 ID:', currentBoardId.value);
}
});
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
if (currentBoardId.value) {
fetchBoardDetails();
} else {
console.error('잘못된 게시물 ID:', currentBoardId.value);
}
});
</script>
<style>
.text-red {
color: red;
text-align: center;
}
.text-red {
color: red;
text-align: center;
}
</style>

27
src/views/board/BoardView.vue
View File

@ -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 = '요청 중 알 수 없는 오류가 발생했습니다.';
// }
}
};