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:
kimdaae328 2024-12-17 14:10:26 +09:00
parent 77f6dc4297
commit 27fb52208c
2 changed files with 41 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/board/BoardComentArea.vue
View File

@ -1,32 +1,49 @@
<template> <template>
<div class="card shadow-none border mt-6"> <div class="card shadow-none border mt-6">
<div class="card-body"> <div class="card-body">
<!-- 댓글 입력 섹션 -->
<div class="d-flex justify-content-start align-items-top"> <div class="d-flex justify-content-start align-items-top">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<div class="avatar me-4"><img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle"></div> <div class="avatar me-4">
<img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
</div>
</div> </div>
<div class="w-100"> <div class="w-100">
<textarea class="form-control" placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요.&#13;&#10;여러분의 다양한 의견을 기다립니다."></textarea> <textarea
class="form-control"
placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. 여러분의 다양한 의견을 기다립니다."
rows="3"
></textarea>
</div> </div>
</div> </div>
<!-- 옵션 및 버튼 섹션 -->
<div class="d-flex justify-content-between flex-wrap mt-4"> <div class="d-flex justify-content-between flex-wrap mt-4">
<div class="d-flex justify-content-between flex-wrap"> <div class="d-flex flex-wrap align-items-center">
<div class="d-flex align-items-center"> <!-- 익명 체크박스 -->
<div class="form-check form-check-inline mb-0"> <div class="form-check form-check-inline mb-0 me-3">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="" /> <input
<label class="form-check-label" for="inlineCheckbox1">익명</label> class="form-check-input"
</div> type="checkbox"
id="inlineCheckbox1"
v-model="isCheck"
/>
<label class="form-check-label" for="inlineCheckbox1">익명</label>
</div> </div>
<div class="d-flex align-items-center">
<div class="col-auto me-2"> <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
<span class="fw-normal">비밀번호</span> <div v-if="isCheck" class="d-flex align-items-center flex-grow-1">
</div> <span class="fw-normal me-2">비밀번호</span>
<div class="col-auto"> <input
<input type="text" class="form-control" placeholder="" /> type="password"
</div> class="form-control flex-grow-1"
placeholder="비밀번호를 입력하세요"
/>
</div> </div>
</div> </div>
<div class="d-flex text-end">
<!-- 답변 쓰기 버튼 (화면이 좁아질 때만 mt-3 적용) -->
<div class="ms-auto mt-3 mt-md-0">
<button class="btn btn-primary">답변 쓰기</button> <button class="btn btn-primary">답변 쓰기</button>
</div> </div>
</div> </div>
@ -34,12 +51,7 @@
</div> </div>
</template> </template>
<script> <script setup>
export default { import { ref } from 'vue';
const isCheck = ref(false);
}
</script> </script>
<style lang="scss" scoped>
</style>

10
src/components/board/BoardContent.vue
View File

@ -3,18 +3,18 @@
<div class="me-1"> <div class="me-1">
<h5 class="mb-0">{{ boardTitle }}</h5> <h5 class="mb-0">{{ boardTitle }}</h5>
</div> </div>
<button type="button" class="btn btn-label-secondary"> <!-- <button type="button" class="btn btn-label-secondary">
<i class="fa-solid fa-download me-2"></i> <i class="fa-solid fa-download me-2"></i>
첨부파일 첨부파일
(<span class="attachment-num">1</span>) (<span class="attachment-num">1</span>)
</button> </button> -->
<!-- <div class="d-flex align-items-centermb-2"> <div v-if="attachmentCount > 0" class="d-flex align-items-centermb-2">
<button v-if="attachmentCount > 0" type="button" class="btn btn-label-secondary"> <button type="button" class="btn btn-label-secondary">
<i class="fa-solid fa-download me-2"></i> <i class="fa-solid fa-download me-2"></i>
첨부파일 첨부파일
(<span class="attachment-num">{{ attachmentCount }}</span>) (<span class="attachment-num">{{ attachmentCount }}</span>)
</button> </button>
</div> --> </div>
</div> </div>
<hr class="my-6"> <hr class="my-6">
<div class="d-flex min-150"> <div class="d-flex min-150">