board-view-content 머지
This commit is contained in:
parent
4daab961cf
commit
024807ccda
@ -25,22 +25,17 @@
|
||||
<EditButton @click="handleEdit" />
|
||||
<DeleteButton @click="handleDelete" />
|
||||
|
||||
<div class="input-group mt-3" v-if="isPassword && unknown">
|
||||
<div class="mt-3" v-if="isPassword && unknown">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="password"
|
||||
v-model="password"
|
||||
class="form-control"
|
||||
v-model="password"
|
||||
placeholder="비밀번호 입력"
|
||||
/>
|
||||
<!-- <input
|
||||
type="password"
|
||||
class="form-control"
|
||||
placeholder="비밀번호 입력"
|
||||
:is-alert="idAlert"
|
||||
@update:data="handleIdChange"
|
||||
:value="id"
|
||||
/> -->
|
||||
<button class="btn btn-primary" type="button" @click="handlePasswordSubmit">확인</button>
|
||||
<button class="btn btn-primary" type="button" @click="handleSubmit">확인</button>
|
||||
</div>
|
||||
<span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -71,6 +66,10 @@ import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
|
||||
|
||||
// Vue Router 인스턴스
|
||||
const router = useRouter();
|
||||
const isPassword = ref(false);
|
||||
const password = ref('');
|
||||
const passwordAlert = ref(false);
|
||||
const lastClickedButton = ref('');
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
@ -112,22 +111,14 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const isPassword = ref(false);
|
||||
const password = ref('');
|
||||
const lastClickedButton = ref('');
|
||||
|
||||
const boardId = 100; //수정필요!
|
||||
|
||||
const emit = defineEmits(['togglePasswordInput']);
|
||||
|
||||
// 수정 버튼
|
||||
const handleEdit = () => {
|
||||
// router.push({ name: 'BoardEdit', params: { id: boardId } });
|
||||
|
||||
if (props.unknown) {
|
||||
togglePassword('edit');
|
||||
} else {
|
||||
router.push({ name: 'BoardEdit', params: { id: 100 } }); // 로그인한 경우 바로 편집
|
||||
router.push({ name: 'BoardEdit', params: { id: props.boardId } });
|
||||
}
|
||||
};
|
||||
|
||||
@ -136,7 +127,7 @@ const handleDelete = () => {
|
||||
if (props.unknown) {
|
||||
togglePassword('delete');
|
||||
} else {
|
||||
deletePost(); // 로그인한 경우 바로 삭제
|
||||
deletePost();
|
||||
}
|
||||
};
|
||||
|
||||
@ -151,12 +142,11 @@ const togglePassword = (button) => {
|
||||
};
|
||||
|
||||
// 비밀번호 확인
|
||||
const handlePasswordSubmit = async () => {
|
||||
isPassword.value = false;
|
||||
lastClickedButton.value = null;
|
||||
|
||||
console.log('비밀번호:', password.value);
|
||||
console.log(props.boardId)
|
||||
const handleSubmit = async () => {
|
||||
if (!password.value) {
|
||||
passwordAlert.value = '비밀번호를 입력해주세요.';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const requestData = {
|
||||
@ -164,47 +154,61 @@ const handlePasswordSubmit = async () => {
|
||||
LOCBRDSEQ: 288
|
||||
}
|
||||
|
||||
console.log(requestData)
|
||||
|
||||
const postResponse = await axios.post(`board/${props.boardId}/password`, requestData);
|
||||
|
||||
console.log('post결과:', postResponse.data)
|
||||
if (postResponse.data.code === 200) {
|
||||
if (postResponse.data.data === true) {
|
||||
isPassword.value = false;
|
||||
|
||||
// if (response.data.code === 200 && response.data.data === true) {
|
||||
// console.log("완료"); // 비밀번호가 맞으면 출력
|
||||
// } else {
|
||||
// console.log("비밀번호가 틀립니다.");
|
||||
// }
|
||||
|
||||
if (lastClickedButton.value === 'edit') {
|
||||
router.push({ name: 'BoardEdit', params: { id: props.boardId } });
|
||||
} else if (lastClickedButton.value === 'delete') {
|
||||
await deletePost();
|
||||
}
|
||||
|
||||
lastClickedButton.value = null;
|
||||
} else {
|
||||
passwordAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
}
|
||||
} else {
|
||||
passwordAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('비밀번호 확인 중 오류 발생:', error);
|
||||
// 401 오류
|
||||
if (error.response && error.response.status === 401) {
|
||||
passwordAlert.value = '비밀번호가 일치하지 않습니다.';
|
||||
} else if (error.response) {
|
||||
alert(`오류 발생: ${error.response.data.message || '서버 오류'}`);
|
||||
} else {
|
||||
alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const deletePost = async () => {
|
||||
if (confirm('정말 삭제하시겠습니까?')) {
|
||||
try {
|
||||
await axios.delete(`board/100`);
|
||||
const response = await axios.delete(`board/${props.boardId}`, {
|
||||
data: { LOCBRDSEQ: props.boardId }
|
||||
});
|
||||
|
||||
if (response.data.code === 200) {
|
||||
alert('게시물이 삭제되었습니다.');
|
||||
router.push({ name: 'BoardList' });
|
||||
} else {
|
||||
alert('삭제 실패: ' + response.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('삭제 중 오류 발생');
|
||||
if (error.response) {
|
||||
alert(`삭제 실패: ${error.response.data.message || '서버 오류'}`);
|
||||
} else {
|
||||
alert('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// const fetchBoardDetails = async () => {
|
||||
// try {
|
||||
// const response = await axios.get(`board/${props.boardId}`);
|
||||
// console.log(response.data);
|
||||
// } catch (error) {
|
||||
// console.error('게시물 데이터 불러오기 오류:', error);
|
||||
// }
|
||||
// };
|
||||
|
||||
// onMounted(() => {
|
||||
// // fetchBoardDetails();
|
||||
// });
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
92
src/components/input/FormInputBtn.vue
Normal file
92
src/components/input/FormInputBtn.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div class="input-group">
|
||||
<input
|
||||
:id="name"
|
||||
class="form-control"
|
||||
:type="type"
|
||||
v-model="inputValue"
|
||||
:maxLength="maxlength"
|
||||
:placeholder="isLabel ? '' : title"
|
||||
/>
|
||||
<button class="btn btn-primary" type="button" @click="handleSubmit">확인</button>
|
||||
</div>
|
||||
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
|
||||
{{ title }}을 확인해주세요.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '라벨',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'nameplz',
|
||||
},
|
||||
isEssential: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: 30,
|
||||
},
|
||||
isAlert: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isLabel: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Emits 정의
|
||||
const emits = defineEmits(['update:modelValue', 'submit']);
|
||||
|
||||
// 로컬 상태로 사용하기 위한 `inputValue`
|
||||
const inputValue = ref(props.modelValue);
|
||||
|
||||
// 부모로 데이터 업데이트
|
||||
watch(inputValue, (newValue) => {
|
||||
emits('update:modelValue', newValue);
|
||||
});
|
||||
|
||||
// 초기값 동기화
|
||||
watch(() => props.modelValue, (newValue) => {
|
||||
if (inputValue.value !== newValue) {
|
||||
inputValue.value = newValue;
|
||||
}
|
||||
});
|
||||
|
||||
// 버튼 클릭 시 부모로 submit 이벤트 전달
|
||||
const handleSubmit = () => {
|
||||
emits('submit', inputValue.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invalid-feedback {
|
||||
display: none;
|
||||
color: red;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user