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

게시판 view 수정

Browse Source
This commit is contained in:
kimdaae328 2024-12-17 10:32:18 +09:00
parent c56acf60f8
commit 6d0b078bc6
3 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -1,38 +1,26 @@
<template>
<div class="col">
<div class="card">
<div class="card-header">
<BoardProfile profileName="만드레야2" />
</div>
<div class="card-body">
<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>
</div>
</div>
<hr class="my-6">
<div class="d-flex min-150">
<p class="mb-0">현재 뷰 사용중인데 리액트 공부가 해보고 싶습니다. 강의 추천해주십쇼! 리액트 1도 모릅니다.</p>
</div>
<div class="mb-4 text-end">
<button class="btn btn-primary my-4">답변 쓰기</button>
<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>
</div>
</div>
<hr class="my-6">
<div class="d-flex min-150">
<p class="mb-0">현재 뷰 사용중인데 리액트 공부가 해보고 싶습니다. 강의 추천해주십쇼! 리액트 1도 모릅니다.</p>
</div>
</template>
<script setup>
import BoardProfile from './BoardProfile.vue';
import BoardComentArea from './BoardComentArea.vue';
import BoardProfile from './BoardProfile.vue';
</script>
<style scoped>

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

@ -1,16 +1,30 @@
<template>
<div class="container-xxl flex-grow-1 container-p-y">
<div class="row">
<BoardContent />
<BoardComment />
<div class="col">
<div class="card">
<div class="card-header">
<BoardProfile profileName="만드레야2"/>
</div>
<div class="card-body">
<BoardContent />
<BoardComentArea />
</div>
<div class="card-footer">
<BoardComment />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import BoardComentArea from '@/components/board/BoardComentArea.vue';
import BoardComment from '@/components/board/BoardComment.vue';
import BoardContent from '@/components/board/BoardContent.vue';
import BoardProfile from '@/components/board/BoardProfile.vue';
</script>