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

Merge branch 'main' into vacation-css

Browse Source
This commit is contained in:
dyhj625 2025-03-07 11:21:19 +09:00
commit f7d688bb60
9 changed files with 1206 additions and 1105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/img/mbti/est.png → public/img/mbti/estj.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

78
src/components/board/BoardProfile.vue
View File

@ -10,12 +10,8 @@
<div class="profile-detail">
<span>{{ date }}</span>
<template v-if="showDetail">
<span class="ms-2">
<i class="fa-regular fa-eye"></i> {{ views }}
</span>
<span>
<i class="bx bx-comment"></i> {{ commentNum }}
</span>
<span class="ms-2"> <i class="fa-regular fa-eye"></i> {{ views }} </span>
<span class="ms-1"> <i class="bx bx-comment"></i> {{ commentNum }} </span>
</template>
</div>
</div>
@ -29,37 +25,32 @@
</template>
<!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
<BoardRecommendBtn
v-if="isLike"
:boardId="boardId"
:comment="comment"
@updateReaction="handleUpdateReaction"
/>
<BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
</div>
</div>
</template>
<script setup>
import { computed, defineProps, defineEmits } from 'vue';
import DeleteButton from '../button/DeleteBtn.vue';
import EditButton from '../button/EditBtn.vue';
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
import { computed, defineProps, defineEmits } from 'vue';
import DeleteButton from '../button/DeleteBtn.vue';
import EditButton from '../button/EditBtn.vue';
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
// 기본 프로필 이미지 경로
const defaultProfile = "/img/icons/icon.png";
// 기본 프로필 이미지 경로
const defaultProfile = '/img/icons/icon.png';
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
const baseUrl = "http://localhost:10325/"; // API 서버 URL
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
const baseUrl = 'http://localhost:10325/'; // API 서버 URL
// Props 정의
const props = defineProps({
// Props 정의
const props = defineProps({
comment: {
type: Object,
required: false,
},
boardId: {
type: Number,
required: false
required: false,
},
commentId: {
type: Number,
@ -102,39 +93,36 @@ const props = defineProps({
isLike: {
type: Boolean,
default: false,
}
});
},
});
const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
const isDeletedComment = computed(() => {
return props.comment?.content === '삭제된 댓글입니다' &&
props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
});
const isDeletedComment = computed(() => {
return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
});
// 수정
const editClick = () => {
// 수정
const editClick = () => {
emit('editClick', { ...props.comment, unknown: props.unknown });
};
};
// 삭제
const deleteClick = () => {
// 삭제
const deleteClick = () => {
emit('deleteClick', { ...props.comment, unknown: props.unknown });
};
};
// 좋아요/싫어요 업데이트
const handleUpdateReaction = (reactionData) => {
emit("updateReaction", {
// 좋아요/싫어요 업데이트
const handleUpdateReaction = reactionData => {
emit('updateReaction', {
boardId: props.boardId,
commentId: props.comment?.commentId,
...reactionData,
});
};
};
// 프로필 이미지 경로 설정
const getProfileImage = (profilePath) => {
return profilePath && profilePath.trim()
? `${baseUrl}upload/img/profile/${profilePath}`
: defaultProfile;
// 프로필 이미지 경로 설정
const getProfileImage = profilePath => {
return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
};
</script>

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

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

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

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

8
src/components/input/FormSelect.vue
View File

@ -5,7 +5,7 @@
<span :class="isEssential ? 'link-danger' : 'none'">*</span>
</label>
<div :class="isRow ? 'col-md-10' : 'col-md-12'" class="d-flex gap-2 align-items-center">
<select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}">
<select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}" @blur="$emit('blur')">
<option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}">
{{ isCommon ? item.label : item }}
</option>
@ -91,7 +91,7 @@ const props = defineProps({
},
});
const emit = defineEmits(['update:data']);
const emit = defineEmits(['update:data', 'blur']);
const selectData = ref(props.value);
// props.value의 변경을 감지하는 watch 추가
@ -106,6 +106,10 @@ watch(() => props.data, (newData) => {
if (props.value === '0') {
selectData.value = newData[0].value;
emit('update:data', selectData.value);
if (props.isColor) {
emit('blur');
}
}
}
}, { immediate: true });

25
src/components/user/RegisterForm.vue
View File

@ -95,9 +95,11 @@
:is-color="true"
:data="colorList"
@update:data="color = $event"
@blur="checkColorDuplicate"
class="w-50"
/>
</div>
<span v-if="colorError" class="w-50 ps-1 ms-auto invalid-feedback d-block">{{ colorError }}</span>
<div class="d-flex">
<UserFormInput
@ -187,6 +189,7 @@
const phone = ref('');
const phoneError = ref('');
const color = ref(''); // 선택된 color
const colorError = ref('');
const mbti = ref(''); // 선택된 MBTI
const pwhint = ref(''); // 선택된 pwhint
@ -202,6 +205,7 @@
const addressAlert = ref(false);
const phoneAlert = ref(false);
const phoneErrorAlert = ref(false);
const colorErrorAlert = ref(false);
const toastStore = useToastStore();
@ -247,7 +251,6 @@
// 아이디 중복체크
const checkIdDuplicate = async () => {
const response = await $api.get(`/user/checkId?memberIds=${id.value}`);
if (!response.data.data) {
idErrorAlert.value = true;
idError.value = '이미 사용 중인 아이디입니다.';
@ -295,9 +298,26 @@
}
};
// 색상 중복체크
const checkColorDuplicate = async () => {
const response = await $api.get(`/user/checkColor?memberCol=${color.value}`);
if (response.data.data) {
colorErrorAlert.value = true;
colorError.value = '이미 사용 중인 색상입니다.';
} else {
colorErrorAlert.value = false;
colorError.value = '';
}
};
// 회원가입
const handleSubmit = async () => {
await checkColorDuplicate();
idAlert.value = id.value.trim() === '';
passwordAlert.value = password.value.trim() === '';
passwordcheckAlert.value = passwordcheck.value.trim() === '';
@ -317,7 +337,8 @@
}
if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value ||
passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value || phoneErrorAlert.value) {
passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value ||
addressAlert.value || phoneAlert.value || phoneErrorAlert.value || colorErrorAlert.value) {
return;
}

149
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,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>

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

@ -10,25 +10,48 @@
<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"
/>
<!-- 실시간 반영된 파일 개수 표시 -->
<div>
<p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
<p v-if="fileError" class="text-danger">{{ fileError }}</p>
<ul class="list-group mb-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, file)">✖</button>
</li>
</ul>
</div>
<!-- 내용 입력 -->
<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,52 +71,71 @@
</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 FormFile from '@c/input/FormFile.vue';
import { ref, onMounted, computed, watch } 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 maxFiles = 5;
const maxSize = 10 * 1024 * 1024;
const attachFiles = ref([]);
const fileError = ref('');
const attachFilesAlert = ref(false);
const isFileValid = ref(true);
const delFileIdx = ref([]); // 제외할 기존 첨부파일 ID
const additionalFiles = ref([]); // 새로 추가할 첨부파일
// 게시물 데이터 로드
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에서 게시물 데이터를 반환하지 않았습니다.');
return;
// 기존 첨부파일 추가
if (data.hasAttachment && data.attachments.length > 0) {
attachFiles.value = addDisplayFileName([...data.attachments]);
}
// 데이터 설정
title.value = data.title || '제목 없음';
content.value = data.content || '내용 없음';
contentLoaded.value = true;
} catch (error) {
console.error('게시물 가져오기 오류:', error.response || error.message);
}
};
};
// 목록 페이지로 이동
const goList = () => {
// 기존 첨부파일명을 노출
const addDisplayFileName = fileInfos =>
fileInfos.map(file => ({
...file,
name: `${file.originalName}.${file.extension}`,
}));
// 목록 페이지로 이동
const goList = () => {
router.push('/board');
};
};
// 게시물 수정
const updateBoard = async () => {
// 게시물 수정
const updateBoard = async () => {
// 유효성 검사
if (!title.value) {
titleAlert.value = true;
@ -111,10 +153,26 @@ 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);
if (delFileIdx.value && delFileIdx.value.length > 0) {
boardData.delFileIdx = [...delFileIdx.value];
}
const fileArray = newFileFilter(attachFiles);
const formData = new FormData();
Object.entries(boardData).forEach(([key, value]) => {
formData.append(key, value);
});
fileArray.forEach((file, idx) => {
formData.append('files', file);
});
await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
alert('게시물이 수정되었습니다.');
goList();
@ -122,21 +180,58 @@ const updateBoard = async () => {
console.error('게시물 수정 중 오류 발생:', error);
alert('게시물 수정에 실패했습니다.');
}
};
};
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
////////////////// fileSection[S] ////////////////////
const fileCount = computed(() => attachFiles.value.length);
const handleFileUpload = files => {
const validFiles = files.filter(file => file.size <= maxSize);
if (files.some(file => file.size > maxSize)) {
fileError.value = '파일 크기가 10MB를 초과할 수 없습니다.';
return;
}
if (attachFiles.value.length + validFiles.length > maxFiles) {
fileError.value = `최대 ${maxFiles}개의 파일만 업로드할 수 있습니다.`;
return;
}
fileError.value = '';
attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
};
const removeFile = (index, file) => {
if (file.id) delFileIdx.value.push(file.id);
attachFiles.value.splice(index, 1);
if (attachFiles.value.length <= maxFiles) {
fileError.value = '';
}
};
watch(attachFiles, () => {
isFileValid.value = attachFiles.value.length <= maxFiles;
});
const newFileFilter = attachFiles => {
const copyFiles = [...attachFiles.value];
return copyFiles.filter(item => !item.id);
};
////////////////// fileSection[E] ////////////////////
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
if (currentBoardId.value) {
fetchBoardDetails();
} else {
console.error('잘못된 게시물 ID:', currentBoardId.value);
}
});
});
</script>
<style>
.text-red {
.text-red {
color: red;
text-align: center;
}
}
</style>

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

@ -18,6 +18,21 @@
@editClick="editClick"
@deleteClick="deleteClick"
/>
<!-- 비밀번호 입력창 (익명일 경우) -->
<div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
<div class="input-group">
<input
type="password"
class="form-control"
v-model="password"
placeholder="비밀번호 입력"
@input="password = password.replace(/\s/g, '')"
/>
<button class="btn btn-primary" @click="submitPassword">확인</button>
</div>
<span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
</div>
</div>
</div>
@ -31,17 +46,18 @@
<!-- 첨부파일 다운로드 버튼 -->
<div v-if="attachments.length" class="btn-group">
<button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<button
type="button"
class="btn btn-label-secondary dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<i class="fa-solid fa-download me-2"></i>
첨부파일 ({{ attachments.length }}개)
</button>
<ul class="dropdown-menu">
<li v-for="(attachment, index) in attachments" :key="index">
<a
class="dropdown-item"
href="#"
@click.prevent="downloadFile(attachment)"
>
<a class="dropdown-item" href="#" @click.prevent="downloadFile(attachment)">
{{ attachment.originalName }}.{{ attachment.extension }}
</a>
</li>
@ -50,7 +66,7 @@
</div>
<!-- HTML 콘텐츠 렌더링 -->
<div class="board-content text-body" style="line-height: 1.6;" v-html="$common.contentToHtml(boardContent)"></div>
<div class="board-content text-body" style="line-height: 1.6" v-html="$common.contentToHtml(boardContent)"></div>
<!-- 좋아요 버튼 -->
<div class="row justify-content-center my-10">
@ -97,11 +113,7 @@
@submitEdit="handleSubmitEdit"
@update:password="updatePassword"
/>
<Pagination
v-if="pagination.pages"
v-bind="pagination"
@update:currentPage="handlePageChange"
/>
<Pagination v-if="pagination.pages" v-bind="pagination" @update:currentPage="handlePageChange" />
</div>
</div>
</div>
@ -110,58 +122,58 @@
</template>
<script setup>
import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
import BoardProfile from '@c/board/BoardProfile.vue';
import BoardCommentList from '@c/board/BoardCommentList.vue';
import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
import Pagination from '@c/pagination/Pagination.vue';
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserInfoStore } from '@/stores/useUserInfoStore';
import axios from '@api';
import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
import BoardProfile from '@c/board/BoardProfile.vue';
import BoardCommentList from '@c/board/BoardCommentList.vue';
import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
import Pagination from '@c/pagination/Pagination.vue';
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserInfoStore } from '@/stores/useUserInfoStore';
import axios from '@api';
// 게시물 데이터 상태
const profileName = ref('');
const boardTitle = ref('제목 없음');
const boardContent = ref('');
const date = ref('');
const views = ref(0);
const likes = ref(0);
const dislikes = ref(0);
const likeClicked = ref(false);
const dislikeClicked = ref(false);
const commentNum = ref(0);
const attachment = ref(false);
const comments = ref([]);
// 게시물 데이터 상태
const profileName = ref('');
const boardTitle = ref('제목 없음');
const boardContent = ref('');
const date = ref('');
const views = ref(0);
const likes = ref(0);
const dislikes = ref(0);
const likeClicked = ref(false);
const dislikeClicked = ref(false);
const commentNum = ref(0);
const attachment = ref(false);
const comments = ref([]);
const route = useRoute();
const router = useRouter();
const userStore = useUserInfoStore();
const currentBoardId = ref(Number(route.params.id));
const unknown = computed(() => profileName.value === '익명');
const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
const authorId = ref(''); // 작성자 id
const route = useRoute();
const router = useRouter();
const userStore = useUserInfoStore();
const currentBoardId = ref(Number(route.params.id));
const unknown = computed(() => profileName.value === '익명');
const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
const authorId = ref(''); // 작성자 id
const isAuthor = computed(() => currentUserId.value === authorId.value);
const commentsWithAuthStatus = computed(() => {
const isAuthor = computed(() => currentUserId.value === authorId.value);
const commentsWithAuthStatus = computed(() => {
const updatedComments = comments.value.map(comment => ({
...comment,
isCommentAuthor: comment.authorId === currentUserId.value,
children: comment.children.map(reply => ({
...reply,
isCommentAuthor: reply.authorId === currentUserId.value,
}))
})),
}));
return updatedComments;
});
});
const attachments = ref([]);
// 첨부파일 다운로드 URL 생성
const downloadFile = async (attachment) => {
const attachments = ref([]);
// 첨부파일 다운로드 URL 생성
const downloadFile = async attachment => {
try {
const response = await axios.get(`board/download`, {
params: { path: attachment.path },
responseType: 'blob'
responseType: 'blob',
});
// Blob에서 파일 다운로드 링크 생성
@ -177,27 +189,25 @@ const downloadFile = async (attachment) => {
console.error('파일 다운로드 오류:', error);
alert('파일 다운로드 중 오류가 발생했습니다.');
}
};
};
const password = ref('');
const passwordAlert = ref('');
const passwordCommentAlert = ref('');
const isPassword = ref(false);
const isCommentPassword = ref(false);
const currentPasswordCommentId = ref(null);
const lastClickedButton = ref('');
const lastCommentClickedButton = ref('');
const isEditTextarea = ref(false);
const isDeleted = ref(true);
const commentAlert = ref('');
const password = ref('');
const passwordAlert = ref("");
const passwordCommentAlert = ref("");
const isPassword = ref(false);
const isCommentPassword = ref(false);
const currentPasswordCommentId = ref(null);
const lastClickedButton = ref("");
const lastCommentClickedButton = ref("");
const isEditTextarea = ref(false);
const isDeleted = ref(true);
const commentAlert = ref('');
const updatePassword = (newPassword) => {
const updatePassword = newPassword => {
password.value = newPassword;
};
};
const pagination = ref({
const pagination = ref({
currentPage: 1,
pages: 1,
prePage: 0,
@ -209,19 +219,17 @@ const pagination = ref({
navigatePages: 10,
navigatepageNums: [1],
navigateFirstPage: 1,
navigateLastPage: 1
});
navigateLastPage: 1,
});
// 게시물 상세 데이터 불러오기
const fetchBoardDetails = async () => {
// 게시물 상세 데이터 불러오기
const fetchBoardDetails = async () => {
try {
const response = await axios.get(`board/${currentBoardId.value}`);
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 || '';
@ -232,20 +240,19 @@ const fetchBoardDetails = async () => {
attachment.value = data.hasAttachment || null;
commentNum.value = data.commentCount || 0;
attachments.value = data.attachments || [];
} catch (error) {
alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
}
};
};
// 좋아요, 싫어요
const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
// 좋아요, 싫어요
const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
try {
await axios.post(`/board/${boardId}/${commentId}/reaction`, {
LOCBRDSEQ: boardId, // 게시글 id
LOCCMTSEQ: commentId, //댓글 id
LOCGOBGOD: isLike ? 'T' : 'F',
LOCGOBBAD: isDislike ? 'T' : 'F'
LOCGOBBAD: isDislike ? 'T' : 'F',
});
const response = await axios.get(`board/${boardId}`);
@ -256,15 +263,13 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
likeClicked.value = isLike;
dislikeClicked.value = isDislike;
} catch (error) {
alert('오류가 발생했습니다.');
}
};
};
// 대댓글 좋아요
const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
// 대댓글 좋아요
const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
try {
@ -272,25 +277,24 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
LOCBRDSEQ: boardId, // 게시글 ID
LOCCMTSEQ: commentId, // 댓글 ID
LOCGOBGOD: isLike ? 'T' : 'F',
LOCGOBBAD: isDislike ? 'T' : 'F'
LOCGOBBAD: isDislike ? 'T' : 'F',
});
await fetchComments();
} catch (error) {
alert('오류가 발생했습니다.');
}
};
};
// 댓글 목록 조회
const fetchComments = async (page = 1) => {
// 댓글 목록 조회
const fetchComments = async (page = 1) => {
try {
// 댓글
const response = await axios.get(`board/${currentBoardId.value}/comments`, {
params: {
LOCBRDSEQ: currentBoardId.value,
page
}
page,
},
});
const commentsList = response.data.data.list.map(comment => ({
commentId: comment.LOCCMTSEQ, // 댓글 ID
@ -307,7 +311,6 @@ const fetchComments = async (page = 1) => {
createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
children: [], // 대댓글을 담을 배열
updateAtRaw: comment.LOCCMTUDT,
}));
commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
@ -316,7 +319,7 @@ const fetchComments = async (page = 1) => {
if (!comment.commentId) continue;
const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
params: { LOCCMTPNT: comment.commentId }
params: { LOCCMTPNT: comment.commentId },
});
if (replyResponse.data.data) {
@ -326,13 +329,13 @@ const fetchComments = async (page = 1) => {
commentId: reply.LOCCMTSEQ,
boardId: reply.LOCBRDSEQ,
parentId: reply.LOCCMTPNT, // 부모 댓글 ID
content: reply.LOCCMTRPY || "내용 없음",
content: reply.LOCCMTRPY || '내용 없음',
createdAtRaw: new Date(reply.LOCCMTRDT),
createdAt: formattedDate(reply.LOCCMTRDT),
likeCount: reply.likeCount || 0,
dislikeCount: reply.dislikeCount || 0,
likeClicked: false,
dislikeClicked: false
dislikeClicked: false,
}));
} else {
comment.children = []; // 대댓글이 없으면 빈 배열로 초기화
@ -355,32 +358,30 @@ const fetchComments = async (page = 1) => {
navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록
navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
navigateLastPage: response.data.data.navigateLastPage, // 페이지네이션에서 마지막 페이지 번호
};
} catch (error) {
alert('오류가 발생했습니다.');
}
};
};
// 댓글 작성
const handleCommentSubmit = async (data) => {
// 댓글 작성
const handleCommentSubmit = async data => {
if (!data) {
return;
}
const { comment, password, isCheck } = data;
if (!comment || comment.trim() === "") {
if (!comment || comment.trim() === '') {
commentAlert.value = '댓글을 입력해주세요.';
return;
} else {
commentAlert.value = '';
}
if (unknown.value && isCheck && (!password || password.trim() === "")) {
passwordAlert.value = "비밀번호를 입력해야 합니다.";
if (unknown.value && isCheck && (!password || password.trim() === '')) {
passwordAlert.value = '비밀번호를 입력해야 합니다.';
return;
}
@ -390,7 +391,7 @@ const handleCommentSubmit = async (data) => {
LOCCMTRPY: comment,
LOCCMTPWD: isCheck ? password : '',
LOCCMTPNT: 1,
LOCBRDTYP: isCheck ? "300102" : null
LOCBRDTYP: isCheck ? '300102' : null,
});
if (response.status === 200) {
@ -398,22 +399,22 @@ const handleCommentSubmit = async (data) => {
commentAlert.value = '';
await fetchComments();
} else {
alert("댓글 작성을 실패했습니다.")
alert('댓글 작성을 실패했습니다.');
}
} catch (error) {
alert("오류가 발생했습니다.")
alert('오류가 발생했습니다.');
}
};
};
// 대댓글 추가
const handleCommentReply = async (reply) => {
// 대댓글 추가
const handleCommentReply = async reply => {
try {
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
LOCBRDSEQ: currentBoardId.value,
LOCCMTRPY: reply.comment,
LOCCMTPWD: reply.password || null,
LOCCMTPNT: reply.parentId,
LOCBRDTYP: reply.isCheck ? "300102" : null
LOCBRDTYP: reply.isCheck ? '300102' : null,
});
if (response.status === 200) {
@ -425,33 +426,33 @@ const handleCommentReply = async (reply) => {
}
} catch (error) {
if (error.response) {
alert("오류가 발생했습니다.");
alert('오류가 발생했습니다.');
}
alert("오류가 발생했습니다.");
alert('오류가 발생했습니다.');
}
}
};
// 게시글 수정 버튼 클릭
const editClick = (unknown) => {
// 게시글 수정 버튼 클릭
const editClick = unknown => {
const isUnknown = unknown?.unknown ?? false;
if (isUnknown) {
togglePassword("edit");
togglePassword('edit');
} else {
router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
}
};
};
// 게시글 삭제 버튼 클릭
const deleteClick = (unknown) => {
// 게시글 삭제 버튼 클릭
const deleteClick = unknown => {
if (unknown) {
togglePassword("delete");
togglePassword('delete');
} else {
deletePost();
}
};
};
const findCommentById = (commentId, commentsList) => {
const findCommentById = (commentId, commentsList) => {
for (const comment of commentsList) {
if (comment.commentId === commentId) {
return comment; // 부모 댓글일 경우
@ -462,10 +463,10 @@ const findCommentById = (commentId, commentsList) => {
}
}
return null;
};
};
// 댓글 수정(대댓글 포함)
const editComment = (comment) => {
// 댓글 수정(대댓글 포함)
const editComment = comment => {
password.value = '';
passwordCommentAlert.value = '';
currentPasswordCommentId.value = null;
@ -477,7 +478,7 @@ const editComment = (comment) => {
}
const isMyComment = comment.authorId === currentUserId.value;
const isAnonymous = comment.author === "익명";
const isAnonymous = comment.author === '익명';
if (isMyComment) {
if (targetComment.isEditTextarea) {
@ -501,25 +502,25 @@ const editComment = (comment) => {
// 비밀번호 입력
targetComment.isEditTextarea = false;
toggleCommentPassword(comment, "edit");
toggleCommentPassword(comment, 'edit');
}
} else {
alert("수정이 불가능합니다");
alert('수정이 불가능합니다');
}
}
};
// 모든 댓글의 수정 창 닫기
const closeAllEditTextareas = () => {
// 모든 댓글의 수정 창 닫기
const closeAllEditTextareas = () => {
comments.value.forEach(comment => {
comment.isEditTextarea = false;
comment.children.forEach(reply => {
reply.isEditTextarea = false;
});
});
};
};
// 댓글 삭제 버튼 클릭
const deleteComment = async (comment) => {
// 댓글 삭제 버튼 클릭
const deleteComment = async comment => {
const isMyComment = comment.authorId === currentUserId.value;
if (unknown.value && !isMyComment) {
@ -527,15 +528,15 @@ const deleteComment = async (comment) => {
comment.isEditTextarea = false;
comment.isCommentPassword = true;
} else {
toggleCommentPassword(comment, "delete");
toggleCommentPassword(comment, 'delete');
}
} else {
deleteReplyComment(comment);
}
};
};
// 익명 댓글 비밀번호 창 토글
const toggleCommentPassword = (comment, button) => {
// 익명 댓글 비밀번호 창 토글
const toggleCommentPassword = (comment, button) => {
if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
currentPasswordCommentId.value = null; // 비밀번호 창 닫기
password.value = '';
@ -547,62 +548,63 @@ const toggleCommentPassword = (comment, button) => {
}
lastCommentClickedButton.value = button;
};
};
const togglePassword = (button) => {
const togglePassword = button => {
if (lastClickedButton.value === button) {
isPassword.value = !isPassword.value;
} else {
isPassword.value = true;
}
lastClickedButton.value = button;
};
};
// 게시글 비밀번호 제출
const submitPassword = async () => {
// 게시글 비밀번호 제출
const submitPassword = async () => {
if (!password.value.trim()) {
passwordAlert.value = "비밀번호를 입력해주세요.";
passwordAlert.value = '비밀번호를 입력해주세요.';
return;
}
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) {
password.value = '';
isPassword.value = false;
if (lastClickedButton.value === "edit") {
router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
} else if (lastClickedButton.value === "delete") {
if (lastClickedButton.value === 'edit') {
router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
} else if (lastClickedButton.value === 'delete') {
await deletePost();
}
lastClickedButton.value = null;
} else {
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
passwordAlert.value = '비밀번호가 일치하지 않습니다.';
}
} catch (error) {
if (error.response) {
if (error.response.status === 401) {
passwordAlert.value = "비밀번호가 일치하지 않습니다.";
} else {
passwordAlert.value = error.response.data?.message || "서버 오류가 발생했습니다.";
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 = '요청 중 알 수 없는 오류가 발생했습니다.';
// }
}
} else if (error.request) {
passwordAlert.value = "네트워크 오류가 발생했습니다. 다시 시도해주세요.";
} else {
passwordAlert.value = "요청 중 알 수 없는 오류가 발생했습니다.";
}
}
};
};
// 댓글 (비밀번호 확인 후)
const submitCommentPassword = async (comment, password) => {
// 댓글 (비밀번호 확인 후)
const submitCommentPassword = async (comment, password) => {
if (!password) {
passwordCommentAlert.value = "비밀번호를 입력해주세요.";
passwordCommentAlert.value = '비밀번호를 입력해주세요.';
return;
}
@ -615,68 +617,66 @@ const submitCommentPassword = async (comment, password) => {
});
if (response.data.code === 200 && response.data.data === true) {
passwordCommentAlert.value = "";
passwordCommentAlert.value = '';
comment.isCommentPassword = false;
// 수정
if (lastCommentClickedButton.value === "edit") {
if (lastCommentClickedButton.value === 'edit') {
if (targetComment) {
// 다른 모든 댓글의 수정 창 닫기
closeAllEditTextareas();
targetComment.isEditTextarea = true;
passwordCommentAlert.value = "";
passwordCommentAlert.value = '';
currentPasswordCommentId.value = null;
} else {
alert("수정 취소를 실패했습니다.");
alert('수정 취소를 실패했습니다.');
}
//삭제
} else if (lastCommentClickedButton.value === "delete") {
passwordCommentAlert.value = "";
} else if (lastCommentClickedButton.value === 'delete') {
passwordCommentAlert.value = '';
deleteReplyComment(comment)
deleteReplyComment(comment);
}
lastCommentClickedButton.value = null;
} else {
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다.";
passwordCommentAlert.value = '비밀번호가 일치하지 않습니다.';
}
} catch (error) {
if (error.response?.status === 401) {
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
passwordCommentAlert.value = '비밀번호가 일치하지 않습니다';
}
passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
passwordCommentAlert.value = '비밀번호가 일치하지 않습니다';
}
};
};
// 게시글 삭제
const deletePost = async () => {
if (confirm("정말 삭제하시겠습니까?")) {
// 게시글 삭제
const deletePost = async () => {
if (confirm('정말 삭제하시겠습니까?')) {
try {
const response = await axios.delete(`board/${currentBoardId.value}`, {
data: { LOCBRDSEQ: currentBoardId.value }
data: { LOCBRDSEQ: currentBoardId.value },
});
if (response.data.code === 200) {
alert("게시물이 삭제되었습니다.");
router.push({ name: "BoardList" });
alert('게시물이 삭제되었습니다.');
router.push({ name: 'BoardList' });
} else {
alert("삭제 실패: " + response.data.message);
alert('삭제 실패: ' + response.data.message);
}
} catch (error) {
if (error.response) {
alert(`삭제 실패: ${error.response.data.message || "서버 오류"}`);
alert(`삭제 실패: ${error.response.data.message || '서버 오류'}`);
} else {
alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
}
}
}
};
};
// 댓글 삭제 (대댓글 포함)
const deleteReplyComment = async (comment) => {
if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
// 댓글 삭제 (대댓글 포함)
const deleteReplyComment = async comment => {
if (!confirm('정말 이 댓글을 삭제하시겠습니까?')) return;
const targetComment = findCommentById(comment.commentId, comments.value);
@ -684,7 +684,7 @@ const deleteReplyComment = async (comment) => {
try {
const response = await axios.delete(`board/comment/${comment.commentId}`, {
data: { LOCCMTSEQ: comment.commentId }
data: { LOCCMTSEQ: comment.commentId },
});
if (response.data.code === 200) {
@ -693,64 +693,63 @@ const deleteReplyComment = async (comment) => {
if (targetComment) {
// console.log('타겟',targetComment)
// ✅ 댓글 내용만 "삭제된 댓글입니다."로 변경하고, 구조는 유지
targetComment.content = "댓글이 삭제되었습니다.";
targetComment.author = "알 수 없음"; // 익명 처리
targetComment.content = '댓글이 삭제되었습니다.';
targetComment.author = '알 수 없음'; // 익명 처리
targetComment.isDeleted = true; // ✅ 삭제 상태를 추가
}
} else {
alert("댓글 삭제에 실패했습니다.");
alert('댓글 삭제에 실패했습니다.');
}
} catch (error) {
alert("댓글 삭제 중 오류가 발생했습니다.");
alert('댓글 삭제 중 오류가 발생했습니다.');
}
};
};
// 댓글 수정 확인
const handleSubmitEdit = async (comment, editedContent) => {
// 댓글 수정 확인
const handleSubmitEdit = async (comment, editedContent) => {
try {
const response = await axios.put(`board/comment/${comment.commentId}`, {
LOCCMTSEQ: comment.commentId,
LOCCMTRPY: editedContent
LOCCMTRPY: editedContent,
});
if (response.status === 200) {
const targetComment = findCommentById(comment.commentId, comments.value);
if (targetComment) {
targetComment.content = editedContent; // 댓글 내용 업데이트
targetComment.isEditTextarea = false; // 수정 모드 닫기
} else {
alert("수정할 댓글을 찾을 수 없습니다.");
alert('수정할 댓글을 찾을 수 없습니다.');
}
} else {
alert("댓글 수정 실패했습니다.");
alert('댓글 수정 실패했습니다.');
}
} catch (error) {
alert("댓글 수정 중 오류 발생했습니다.");
alert('댓글 수정 중 오류 발생했습니다.');
}
};
};
// 댓글 수정 취소 (대댓글 포함)
const handleCancelEdit = (comment) => {
// 댓글 수정 취소 (대댓글 포함)
const handleCancelEdit = comment => {
const targetComment = findCommentById(comment.commentId, comments.value);
if (targetComment) {
targetComment.isEditTextarea = false;
} else {
alert("수정 취소를 실패했습니다.");
alert('수정 취소를 실패했습니다.');
}
};
};
// 페이지 변경
const handlePageChange = (page) => {
// 페이지 변경
const handlePageChange = page => {
if (page !== pagination.value.currentPage) {
pagination.value.currentPage = page;
fetchComments(page);
}
};
};
// 댓글 삭제 (대댓글 포함)
const handleCommentDeleted = (deletedCommentId) => {
// 댓글 삭제 (대댓글 포함)
const handleCommentDeleted = deletedCommentId => {
// 댓글 삭제
const parentIndex = comments.value.findIndex(comment => comment.commentId === deletedCommentId);
@ -767,20 +766,20 @@ const handleCommentDeleted = (deletedCommentId) => {
return;
}
}
};
};
// 날짜
const formattedDate = (dateString) => {
if (!dateString) return "날짜 없음";
// 날짜
const formattedDate = dateString => {
if (!dateString) return '날짜 없음';
const dateObj = new Date(dateString);
return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
};
};
const formattedBoardDate = computed(() => formattedDate(date.value));
const formattedBoardDate = computed(() => formattedDate(date.value));
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
fetchBoardDetails()
fetchComments()
});
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
fetchBoardDetails();
fetchComments();
});
</script>