Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front
This commit is contained in:
commit
2361ea977c
122
index.html
122
index.html
@ -1,26 +1,26 @@
|
||||
<!doctype html>
|
||||
<html
|
||||
lang=""
|
||||
class="light-style layout-navbar-fixed layout-menu-fixed layout-compact"
|
||||
dir="ltr"
|
||||
data-theme="theme-default"
|
||||
data-assets-path="/"
|
||||
data-template="vertical-menu-template"
|
||||
data-style="light"
|
||||
lang=""
|
||||
class="light-style layout-navbar-fixed layout-menu-fixed layout-compact"
|
||||
dir="ltr"
|
||||
data-theme="theme-default"
|
||||
data-assets-path="/"
|
||||
data-template="vertical-menu-template"
|
||||
data-style="light"
|
||||
>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<!-- favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/img/favicon/site.webmanifest" />
|
||||
<!-- favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/img/favicon/site.webmanifest" />
|
||||
|
||||
<meta content="" name="description" />
|
||||
<meta content="" name="keywords" />
|
||||
<title>LOCALNET</title>
|
||||
<meta content="" name="description" />
|
||||
<meta content="" name="keywords" />
|
||||
<title>LOCALNET</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com/" />
|
||||
@ -32,55 +32,51 @@
|
||||
|
||||
<link rel="stylesheet" href="/css/font.css" />
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/flag-icons.css" />
|
||||
<!-- Icons -->
|
||||
<link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/flag-icons.css" />
|
||||
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/vendor/css/rtl/theme-default.css"
|
||||
class="template-customizer-theme-css"
|
||||
/>
|
||||
<link rel="stylesheet" href="/css/demo.css" />
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" />
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
|
||||
<link rel="stylesheet" href="/css/demo.css" />
|
||||
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" />
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" />
|
||||
|
||||
<!-- Helpers -->
|
||||
<script src="/vendor/js/helpers.js"></script>
|
||||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||||
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
|
||||
<script src="/vendor/js/template-customizer.js"></script>
|
||||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||||
<script src="/js/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- Helpers -->
|
||||
<script src="/vendor/js/helpers.js"></script>
|
||||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||||
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
|
||||
<!-- <script src="/vendor/js/template-customizer.js"></script> -->
|
||||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||||
<script src="/js/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<!-- Core JS -->
|
||||
<!-- build:js assets/vendor/js/core.js -->
|
||||
<script src="/vendor/libs/jquery/jquery.js"></script>
|
||||
<script src="/vendor/libs/popper/popper.js"></script>
|
||||
<script src="/vendor/js/bootstrap.js"></script>
|
||||
<script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
<script src="/vendor/libs/hammer/hammer.js"></script>
|
||||
<script src="/vendor/libs/i18n/i18n.js"></script>
|
||||
<script src="/vendor/libs/typeahead-js/typeahead.js"></script>
|
||||
<!-- <script src="/vendor/js/menu.js"></script> -->
|
||||
<!-- endbuild -->
|
||||
<!-- Core JS -->
|
||||
<!-- build:js assets/vendor/js/core.js -->
|
||||
<script src="/vendor/libs/jquery/jquery.js"></script>
|
||||
<script src="/vendor/libs/popper/popper.js"></script>
|
||||
<script src="/vendor/js/bootstrap.js"></script>
|
||||
<script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
<script src="/vendor/libs/hammer/hammer.js"></script>
|
||||
<script src="/vendor/libs/i18n/i18n.js"></script>
|
||||
<script src="/vendor/libs/typeahead-js/typeahead.js"></script>
|
||||
<!-- <script src="/vendor/js/menu.js"></script> -->
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- Vendors JS -->
|
||||
<script src="/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
<!-- Main JS -->
|
||||
<!-- <script src="/js/main.js"></script> -->
|
||||
<!-- Page JS -->
|
||||
<!-- <script src="/js/dashboards-analytics.js"></script> -->
|
||||
<!-- Vendors JS -->
|
||||
<script src="/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
<!-- Main JS -->
|
||||
<!-- <script src="/js/main.js"></script> -->
|
||||
<!-- Page JS -->
|
||||
<!-- <script src="/js/dashboards-analytics.js"></script> -->
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,98 +2,106 @@
|
||||
{
|
||||
"id": 1,
|
||||
"title": "타이틀1",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:01",
|
||||
"img": "https://picsum.photos/id/1/250/250"
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. ",
|
||||
"date": "2024.12.16 18:01",
|
||||
"img": "https://picsum.photos/id/1/250/250",
|
||||
"viewCount": 10,
|
||||
"cmtCount": 2
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "타이틀2",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:02"
|
||||
"date": "2024.12.16 18:02",
|
||||
"viewCount": 10,
|
||||
"cmtCount": 2
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "타이틀3",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:03",
|
||||
"date": "2024.12.16 18:03",
|
||||
"img": "https://picsum.photos/id/3/250/250"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "타이틀4",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:04",
|
||||
"img": "https://picsum.photos/id/4/250/250"
|
||||
"date": "2024.12.16 18:04",
|
||||
"img": "https://picsum.photos/id/4/250/250",
|
||||
"viewCount": 100,
|
||||
"cmtCount": 22
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"title": "타이틀5",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:05",
|
||||
"date": "2024.12.16 18:05",
|
||||
"img": "https://picsum.photos/id/5/250/250"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"title": "타이틀6",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:06",
|
||||
"date": "2024.12.16 18:06",
|
||||
"img": "https://picsum.photos/id/6/250/250"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"title": "타이틀7",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:07",
|
||||
"date": "2024.12.16 18:07",
|
||||
"img": "https://picsum.photos/id/7/250/250"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"title": "타이틀8",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:08",
|
||||
"date": "2024.12.16 18:08",
|
||||
"img": "https://picsum.photos/id/8/250/250"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"title": "타이틀9",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:09",
|
||||
"date": "2024.12.16 18:09",
|
||||
"img": "https://picsum.photos/id/9/250/250"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"title": "타이틀10",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:10",
|
||||
"img": "https://picsum.photos/id/10/250/250"
|
||||
"date": "2024.12.16 18:10",
|
||||
"img": "https://picsum.photos/id/10/250/250",
|
||||
"viewCount": 22,
|
||||
"cmtCount": 33
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"title": "타이틀11",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:11",
|
||||
"date": "2024.12.16 18:11",
|
||||
"img": "https://picsum.photos/id/11/250/250"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"title": "타이틀12",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:12",
|
||||
"date": "2024.12.16 18:12",
|
||||
"img": "https://picsum.photos/id/12/250/250"
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"title": "타이틀13",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:13",
|
||||
"date": "2024.12.16 18:13",
|
||||
"img": "https://picsum.photos/id/13/250/250"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"title": "타이틀14",
|
||||
"content": "헌법재판소가 윤석열 대통령 탄핵심판 사건의 첫 변론 준비 기일을 27일 오후 2시에 연다고 밝혔다. 헌재는 이번 사건의 주심 배당도 마쳤지만 비공개 원칙에 따라 공개하지 않기로 했다.이진 헌재 공보관은 16일 언론브리핑에서 “(윤 대통령 탄핵 사건을) 변론 준비 절차에 회부하고, 1차 변론 준비 기일을 27일 오후 2시로 지정했다”고 밝혔다. 이어 “변론 준비 기일에서 검찰과 경찰 등의 수사기록을 조기에 확보하기로 했다”고 덧붙였다. 헌법재판관들은 이날 오전 10시에 재판관 회의를 열고 이같은 내용을 결정했다.",
|
||||
"date": "2024-12-16 18:14",
|
||||
"date": "2024.12.16 18:14",
|
||||
"img": "https://picsum.photos/id/14/250/250"
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,27 +1,57 @@
|
||||
<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="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. 여러분의 다양한 의견을 기다립니다."></textarea>
|
||||
<textarea
|
||||
class="form-control"
|
||||
placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. 여러분의 다양한 의견을 기다립니다."
|
||||
rows="3"
|
||||
></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 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 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>
|
||||
|
||||
<!-- 답변 쓰기 버튼 (화면이 좁아질 때만 mt-3 적용) -->
|
||||
<div class="ms-auto mt-3 mt-md-0">
|
||||
<button class="btn btn-primary">답변 쓰기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const isCheck = ref(false);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -21,13 +21,13 @@
|
||||
<BoardComentArea v-if="comment" />
|
||||
</li>
|
||||
<li>
|
||||
<BoardProfile profileName=곤데리 :showDetail="false" :unknown="false"/>
|
||||
<BoardProfile :showDetail="false" :unknown="false" />
|
||||
<div class="mt-2">저도 궁금합니다.</div>
|
||||
<button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
|
||||
<BoardComentArea v-if="comment" />
|
||||
</li>
|
||||
</ul>
|
||||
<div>페이지네이션2</div>
|
||||
<Pagination/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -35,6 +35,7 @@
|
||||
import BoardProfile from './BoardProfile.vue';
|
||||
import BoardComentArea from './BoardComentArea.vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import Pagination from '../pagination/Pagination.vue';
|
||||
|
||||
const comment = ref(false);
|
||||
|
||||
|
||||
@ -1,26 +1,58 @@
|
||||
<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>
|
||||
<h5 class="mb-0">{{ boardTitle }}</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 v-if="dropdownItems.length > 0" class="btn-group">
|
||||
<button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fa-solid fa-download me-2"></i>
|
||||
첨부파일
|
||||
(<span class="attachment-num">{{ dropdownItems.length }}</span>)
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li v-for="(item, index) in dropdownItems" :key="index">
|
||||
<a class="dropdown-item" href="javascript:void(0);">
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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="text-center">
|
||||
<BoardRecommendBtn />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BoardComentArea from './BoardComentArea.vue';
|
||||
import BoardProfile from './BoardProfile.vue';
|
||||
import BoardRecommendBtn from './BoardRecommendBtn.vue';
|
||||
|
||||
defineProps({
|
||||
boardTitle : {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
boardContent: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
attachmentCount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
dropdownItems: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -32,22 +32,19 @@
|
||||
</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>
|
||||
<BoardRecommendBtn :likeClicked="true" :dislikeClicked="false"/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import BoardRecommendBtn from './BoardRecommendBtn.vue';
|
||||
|
||||
defineProps({
|
||||
profileName : {
|
||||
type: String,
|
||||
required: true,
|
||||
default: '익명',
|
||||
},
|
||||
unknown : {
|
||||
type: Boolean,
|
||||
@ -56,8 +53,10 @@ defineProps({
|
||||
showDetail : {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -68,8 +67,4 @@ defineProps({
|
||||
.ms-auto button + button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-left: 5px;
|
||||
}
|
||||
</style>
|
||||
49
src/components/board/BoardRecommendBtn.vue
Normal file
49
src/components/board/BoardRecommendBtn.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '' ">
|
||||
<i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
|
||||
</button>
|
||||
<button class="btn btn-label-danger btn-icon" :class="dislikeClicked ? 'clicked' : '' ">
|
||||
<i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
likeClicked : {
|
||||
type : Boolean,
|
||||
default : false,
|
||||
},
|
||||
dislikeClicked : {
|
||||
type : Boolean,
|
||||
default : false,
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn + .btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.btn-label-danger.clicked {
|
||||
background-color: #e6381a;
|
||||
}
|
||||
|
||||
.btn-label-danger.clicked i,
|
||||
.btn-label-danger.clicked span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-label-primary.clicked {
|
||||
background-color: #5f61e6;
|
||||
}
|
||||
|
||||
.btn-label-primary.clicked i,
|
||||
.btn-label-primary.clicked span {
|
||||
color : #fff;
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<div class="" role="button">
|
||||
<div class="card">
|
||||
<div class="d-flex">
|
||||
<div v-if="data.item.img">
|
||||
<img class="card-img card-img-left" :src="data.item.img" alt="" style="max-height: 200px; min-width: 200px" />
|
||||
<div v-if="data.item.img" class="col-3">
|
||||
<img class="card-img card-img-left" :src="data.item.img" alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<div lass="col-9">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ data.item.title }}</h5>
|
||||
<p class="card-text">
|
||||
@ -13,6 +13,7 @@
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-muted">{{ data.item.date }}</small>
|
||||
<slot name="optInfo"></slot>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<nav aria-label="Page navigation">
|
||||
<ul class="pagination pagination-rounded justify-content-center">
|
||||
<li class="page-item first">
|
||||
<!-- <li class="page-item first">
|
||||
<a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevrons-left bx-sm"></i></a>
|
||||
</li>
|
||||
<li class="page-item prev">
|
||||
</li> -->
|
||||
<!-- <li class="page-item prev">
|
||||
<a class="page-link" href="javascript:void(0);"><i class="tf-icon bx bx-chevron-left bx-sm"></i></a>
|
||||
</li>
|
||||
</li> -->
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:void(0);">1</a>
|
||||
</li>
|
||||
|
||||
@ -9,7 +9,16 @@
|
||||
</router-link>
|
||||
</div>
|
||||
<template v-for="(item, index) in list" :key="item.id">
|
||||
<board-card :item="item" />
|
||||
<board-card :item="item" @click="goDetail(item.id)">
|
||||
<template #optInfo>
|
||||
<span v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
|
||||
><i class="fa-regular fa-eye"></i> {{ item.viewCount }}</span
|
||||
>
|
||||
<span v-show="item.cmtCount" style="padding-left: 10px" class="text-muted"
|
||||
><i class="fa-regular fa-comment-dots"></i> {{ item.cmtCount }}
|
||||
</span>
|
||||
</template>
|
||||
</board-card>
|
||||
</template>
|
||||
<div class="mt-8">
|
||||
{{ list[0].title }}
|
||||
@ -24,9 +33,15 @@
|
||||
import BoardCard from '@/components/list/BoardCard.vue';
|
||||
import Pagination from '@/components/pagination/Pagination.vue';
|
||||
import SearchBar from '@/components/search/SearchBar.vue';
|
||||
import router from '@/router';
|
||||
import dummy from '@a/boardDummy.json';
|
||||
|
||||
const list = ref(dummy);
|
||||
|
||||
/** 상세로 이동 */
|
||||
const goDetail = idx => {
|
||||
router.push(`/board/get/${idx}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<BoardProfile profileName="만드레야2"/>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<BoardContent />
|
||||
<BoardContent boardTitle="제목1" boardContent="내용1" :dropdownItems="dropdownItems" />
|
||||
<BoardComentArea />
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
@ -20,11 +20,17 @@
|
||||
</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';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const dropdownItems = ref([
|
||||
{ label: '내용1'},
|
||||
{ label: '내용2'},
|
||||
{ label: '내용3'},
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user