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

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

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