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 13:13:34 +09:00
parent 6fb4f9ea77
commit eebe08452e
3 changed files with 80 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,8 +9,26 @@
<textarea class="form-control" placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요.&#13;&#10;여러분의 다양한 의견을 기다립니다."></textarea>
</div>
</div>
<div class="text-end">
<button class="btn btn-primary mt-4">답변 쓰기</button>
<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>
<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>
</div>
<div class="d-flex text-end">
<button class="btn btn-primary">답변 쓰기</button>
</div>
</div>
</div>
</div>

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

@ -1,30 +1,77 @@
<template>
<div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
<div class="me-1">
<h5 class="mb-0">리액트 강의 추천좀</h5>
</div>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center mb-2">
<div class="badge bg-lighter rounded d-flex align-items-center">
<img src="/img/icons/misc/pdf.png" alt="img" width="15" class="me-2">
<span class="h6 mb-0 text-body">invoices.pdf</span>
</div>
</div>
<h5 class="mb-0">{{ boardTitle }}</h5>
</div>
<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">
<i class="fa-solid fa-download me-2"></i>
첨부파일
(<span class="attachment-num">{{ attachmentCount }}</span>)
</button>
</div> -->
</div>
<hr class="my-6">
<div class="d-flex min-150">
<p class="mb-0">현재 뷰 사용중인데 리액트 공부가 해보고 싶습니다. 강의 추천해주십쇼! 리액트 1도 모릅니다.</p>
<p class="mb-0">{{ boardContent }}</p>
</div>
<div class="ms-auto text-end">
<template v-if="showDetail">
<button class="btn btn-label-primary btn-icon">
<i class='bx bx-edit-alt'></i>
</button>
<button class="btn btn-label-primary btn-icon ms-1">
<i class='bx bx-trash' ></i>
</button>
</template>
<template v-else>
<button class="btn btn-label-primary btn-icon">
<i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
</button>
<button class="btn btn-label-danger btn-icon">
<i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
</button>
</template>
</div>
</template>
<script setup>
import BoardComentArea from './BoardComentArea.vue';
import BoardProfile from './BoardProfile.vue';
defineProps({
boardTitle : {
type: String,
required: true,
},
boardContent: {
type: String,
required: true,
},
attachmentCount: {
type: Number,
default: 0,
},
showDetail: {
type: Boolean,
default: false,
}
});
</script>
<style scoped>
.min-150 {
min-height: 150px !important;
}
.ms-auto button + button {
margin-left: 5px;
}
.num {
margin-left: 5px;
}
</style>

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

@ -7,7 +7,7 @@
<BoardProfile profileName="만드레야2"/>
</div>
<div class="card-body">
<BoardContent />
<BoardContent boardTitle="제목1" boardContent="내용1" />
<BoardComentArea />
</div>
<div class="card-footer">
@ -20,7 +20,6 @@
</template>
<script setup>
import BoardComentArea from '@/components/board/BoardComentArea.vue';
import BoardComment from '@/components/board/BoardComment.vue';
import BoardContent from '@/components/board/BoardContent.vue';