-
- 로그인후 이용해주세요.
팁과노하우
네이버 카페처럼 메인화면에서 글쓰기버튼 추가
메인화면에 글쓰기 버튼 추가해서 누르면 나의 레벨에서 글쓸수 있는 게시판 목록이 나타나고 목록에서
게시판을 선택하여 해당글쓰기로 이동하는 방법입니다
여기서 글쓰기버튼을 클릭하면?
이렇게 우측에 나의 레벨에서 작성할수 있는 게시판이 나열됩니다
여기서 작성하고 싶은 게시판을 선택하면?
해당 게시판의 글쓰기로 이동이 됩니다
<style>
/* 플로팅 글쓰기 버튼 */
#floating-write-btn {
position: fixed;
bottom: 15px; /* 필요시 조정 */
right: 30px; /* 필요시 조정 */
z-index: 2000;
}
#floating-write-btn button {
width: 60px;
height: 60px;
border: none;
border-radius: 50%;
background-color: #4d33b2; /* 버튼 배경색 */
color: #fff;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
/* 버튼 호버시 효과 */
#floating-write-btn button:hover {
background-color: #ff5f1f;
transition: background-color 0.2s;
}
/* 모달 배경 */
#board-select-modal {
display: none; /* 기본 숨김 */
position: fixed;
z-index: 99999;
left: 0; top: 0;
width: 100%; height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
/* 모달 컨텐츠 박스 */
#board-select-modal .modal-content {
background-color: #1c1c1e;
color: #fff;
margin: 80px auto; /* 수직 가운데정렬 (상단 간격) */
max-width: 320px; /* 모달 너비 (원하시면 늘리세요) */
border-radius: 8px;
padding: 20px;
position: relative;
}
/* 모달 닫기(X) 버튼 */
#board-select-modal .close-modal {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}
/* 모달 제목 */
#board-select-modal h2 {
margin: 0 0 15px;
font-size: 18px;
text-align: center;
color: #ffd674; /* 원하는 색상 */
}
/* 목록 초기화 */
#board-list {
list-style: none;
padding: 0;
margin: 0;
}
/* 그룹 아이템(접히는 상단) */
.group-item {
margin-bottom: 10px;
}
/* 그룹 제목 영역 */
.group-title {
background-color: #2c2c2e;
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
position: relative;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
.group-title:hover {
background-color: #3a3a3c;
}
/* 그룹 제목 왼쪽 */
.group-title-text {
font-weight: bold;
}
/* 펼치기/접기 화살표 (오른쪽) */
.group-title .arrow {
font-size: 12px;
margin-left: 5px;
transition: transform 0.2s;
}
.group-title.open .arrow {
transform: rotate(180deg);
}
/* 하위 게시판 목록(초기 숨김) */
.board-sublist {
list-style: none;
margin: 0;
margin-top: 6px;
padding: 0;
display: none; /* 처음에는 숨김 */
}
/* 하위 게시판 항목 */
.board-sublist li {
margin-bottom: 6px;
}
.board-sublist li a {
display: block;
background: #4d33b2;
padding: 8px 12px;
border-radius: 4px;
color: #fff;
text-decoration: none;
font-size: 13px;
transition: background-color 0.2s;
}
.board-sublist li a:hover {
background-color: #444;
}
</style>
<!-- 플로팅 글쓰기 버튼 -->
<div id="floating-write-btn">
<button type="button" title="글쓰기">
<!-- 연필 모양 아이콘 (FontAwesome 등에서 추출한 SVG 예시) -->
<svg aria-hidden="true" focusable="false" width="22" height="22"
viewBox="0 0 512 512" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path d="M497.94 74.17l-60.11-60.1a48 48 0 0 0-67.88 0L15.49 368.52a24 24 0 0 0-6.08 10.87L.15 460.32a24 24 0 0 0 28.83 28.84l81-9.26a24 24 0 0 0 10.86-6.07l354.47-354.4a48 48 0 0 0 .63-67.26zm-386 330.93l-50.72 5.8 5.79-50.66L345.94 80.44l44.9 44.9zm359.64-359.59l-31.92 31.88-44.9-44.9 31.89-31.88a16 16 0 0 1 22.63 0l22.34 22.34a16 16 0 0 1 .02 22.56z"/>
</svg>
</button>
</div>
<!-- 모달창 -->
<div id="board-select-modal">
<div class="modal-content">
<span class="close-modal">×</span>
<h2>게시판 선택</h2>
<ul id="board-list">
<?php
// 로그인/권한 확인
if (!$is_member) {
// 비회원이면 안내
echo '<li><a href="'.G5_BBS_URL.'/login.php">로그인 후 이용가능합니다.</a></li>';
} else {
// 그룹 + 게시판 목록을 가져와서 "내 레벨로 쓰기 가능한 게시판"만 분류
$sql = "
SELECT b.bo_table, b.bo_subject, b.bo_write_level, b.gr_id, g.gr_subject
FROM {$g5['board_table']} b
LEFT JOIN {$g5['group_table']} g ON (b.gr_id = g.gr_id)
WHERE b.bo_use_search = '1'
ORDER BY b.gr_id ASC, b.bo_table ASC
";
$result = sql_query($sql);
// 그룹별로 묶을 배열
$grouped_boards = array();
// 데이터 반복
while($row = sql_fetch_array($result)) {
// 내 레벨로 쓰기가 가능한지?
if ((int)$member['mb_level'] >= (int)$row['bo_write_level']) {
$gr_id = $row['gr_id'];
// 그룹 이름이 없으면 기본 그룹명 처리
$group_name = $row['gr_subject'] ? $row['gr_subject'] : '기본그룹';
if (!isset($grouped_boards[$gr_id])) {
$grouped_boards[$gr_id] = array(
'group_name' => $group_name,
'boards' => array()
);
}
// 보드 정보 푸시
$grouped_boards[$gr_id]['boards'][] = array(
'bo_table' => $row['bo_table'],
'bo_subject' => $row['bo_subject']
);
}
}
// 만약 작성가능한 게시판이 전혀 없다면 안내
if (empty($grouped_boards)) {
echo '<li><a href="javascript:void(0)">작성 가능한 게시판이 없습니다.</a></li>';
} else {
// 그룹별로 출력
foreach($grouped_boards as $gr_id => $grp) {
// 그룹 제목
echo '<li class="group-item">';
echo ' <div class="group-title" onclick="toggleGroup('group-'.$gr_id.'', this)">';
echo ' <span class="group-title-text">'.get_text($grp['group_name']).'</span>';
echo ' <span class="arrow">▼</span>';
echo ' </div>';
// 하위 게시판 목록
echo ' <ul id="group-'.$gr_id.'" class="board-sublist">';
foreach($grp['boards'] as $bd) {
$write_url = get_pretty_url($bd['bo_table'], 'write');
echo '<li><a href="'.$write_url.'">'.get_text($bd['bo_subject']).'</a></li>';
}
echo ' </ul>';
echo '</li>';
}
}
}
?>
</ul>
</div>
</div>
<script>
// (1) 플로팅 버튼 / 모달창 DOM
const floatingWriteBtn = document.getElementById("floating-write-btn");
const boardSelectModal = document.getElementById("board-select-modal");
const closeModalBtn = document.querySelector("#board-select-modal .close-modal");
// (2) 버튼 클릭 -> 모달 열기
if (floatingWriteBtn) {
floatingWriteBtn.addEventListener("click", function() {
if (boardSelectModal) {
boardSelectModal.style.display = "block";
}
});
}
// (3) 닫기(X) 버튼 클릭 -> 모달 닫기
if (closeModalBtn) {
closeModalBtn.addEventListener("click", function() {
if (boardSelectModal) {
boardSelectModal.style.display = "none";
}
});
}
// (4) 모달 배경 클릭 -> 모달 닫기
window.addEventListener("click", function(event) {
if (event.target === boardSelectModal) {
boardSelectModal.style.display = "none";
}
});
/* 그룹 토글 함수 */
function toggleGroup(groupId, titleElem) {
const sublist = document.getElementById(groupId);
if (!sublist) return;
// 펼침/접힘
if (sublist.style.display === 'none' || sublist.style.display === '') {
sublist.style.display = 'block';
// 화살표 회전 효과를 위해 .open 클래스 토글
if (titleElem) titleElem.classList.add('open');
} else {
sublist.style.display = 'none';
if (titleElem) titleElem.classList.remove('open');
}
}
</script>
- 이전글아래로 당겨서 새로고침하기2025.03.01
- 다음글목록 사이에 텍스트 광고 혹은 배너 광고 넣기2025.02.26
댓글목록
구매 신청
신청 이후 담당자가 개별연락 드리고 있습니다.
입금자명과 실제 입금자가 동일한 경우 자동처리 됩니다.
결제예정 금액 : 0 (VAT별도)
하나은행(KOEXKRSE) : 258-910104-00407 / 김은정(인덱스)
