63 lines
2.6 KiB
Vue
63 lines
2.6 KiB
Vue
<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>
|
|
<!-- 텍스트박스 -->
|
|
<div class="w-100">
|
|
<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 flex-wrap align-items-center">
|
|
<!-- 익명 체크박스 (익명게시판일 경우에만)-->
|
|
<div class="form-check form-check-inline mb-0 me-4">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="inlineCheckbox1"
|
|
v-model="isCheck"
|
|
/>
|
|
<label class="form-check-label" for="inlineCheckbox1">익명</label>
|
|
</div>
|
|
|
|
<!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
|
|
<div v-if="isCheck" class="d-flex align-items-center flex-grow-1">
|
|
<label class="form-label mb-0 me-3" for="basic-default-password">비밀번호</label>
|
|
<input
|
|
type="password"
|
|
id="basic-default-password"
|
|
class="form-control flex-grow-1"
|
|
placeholder=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 답변 쓰기 버튼 -->
|
|
<div class="ms-auto mt-3 mt-md-0">
|
|
<button class="btn btn-primary">
|
|
<i class="icon-base bx bx-check"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
const isCheck = ref(false);
|
|
</script>
|