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

Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

Browse Source
This commit is contained in:
ckx6954 2024-12-17 10:16:32 +09:00
commit 91ff743872
5 changed files with 51 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/board/BoardComentArea.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>

12
src/components/Comment.vue → src/components/board/BoardComment.vue
View File

@ -1,17 +1,21 @@
<template>
<ul class="list-unstyled">
<li>
<Profile profileName=곤데리 :showDetail="false" />
<BoardProfile profileName=곤데리 :showDetail="false" />
<div>저도 궁금합니다.</div>
<ul class="list-unstyled twoDepth">
<li>
<Profile profileName=곤데리2 :showDetail="false" />
<BoardProfile profileName=곤데리2 :showDetail="false" />
<div>저도 궁금합니다.</div>
</li>
</ul>
</li>
<li>
<Profile profileName=곤데리 :showDetail="false" />
<BoardProfile profileName=곤데리 :showDetail="false" />
<div>저도 궁금합니다.</div>
</li>
<li>
<BoardProfile profileName=곤데리 :showDetail="false" :unknown="false"/>
<div>저도 궁금합니다.</div>
</li>
</ul>
@ -20,7 +24,7 @@
<script setup>
import Profile from './Profile.vue';
import BoardProfile from './BoardProfile.vue';
</script>

17
src/components/BoardDetail.vue → src/components/board/BoardContent.vue
View File

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

28
src/components/Profile.vue → src/components/board/BoardProfile.vue
View File

@ -8,7 +8,7 @@
<h6 class="mb-0">{{ profileName }}</h6>
<div class="profile-detail">
<span>2024.12.10 10:46</span>
<template v-if="showDetail">
<template v-if="showDetail">
<span>
<i class="fa-regular fa-eye"></i> 1
</span>
@ -23,12 +23,22 @@
</div>
</div>
<div class="ms-auto">
<button class="btn btn-label-primary btn-icon">
<i class="fa-regular fa-thumbs-up"></i>
</button>
<button class="btn btn-label-primary btn-icon">
<i class="fa-regular fa-thumbs-down"></i>
</button>
<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">
<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>
</div>
</template>
@ -58,4 +68,8 @@ defineProps({
.ms-auto button + button {
margin-left: 5px;
}
.num {
margin-left: 5px;
}
</style>

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

@ -1,17 +1,16 @@
<template>
<div class="container-xxl flex-grow-1 container-p-y">
<div class="row">
<BoardDetail />
<Comment />
<BoardContent />
<BoardComment />
</div>
</div>
</template>
<script setup>
import Profile from '@/components/Profile.vue';
import Comment from '@/components/Comment.vue';
import BoardDetail from '@/components/BoardDetail.vue';
import BoardComment from '@/components/board/BoardComment.vue';
import BoardContent from '@/components/board/BoardContent.vue';
</script>