@Don 님, 안녕하세요! FKB pro 테마에 대해 개인적으로 작은 수정을 하나 했습니다. 태블릿과 데스크톱에서는 오른쪽 아래에, 모바일에서는 왼쪽 아래에 채팅 플로팅 버튼을 배치했고, ‘주제 만들기’ 버튼과 동일한 효과를 적용했습니다.
제 컴포넌트 코드(CSS)는 다음과 같습니다:
/* ========================================================= */
/* 1. 메인 플로팅 버튼 (메신저/디스코드 스타일) */
/* ========================================================= */
.header-dropdown-toggle.chat-header-icon {
position: fixed !important;
bottom: 60px !important;
right: 20px !important;
z-index: 9999 !important;
/* 완벽한 치수 (원형) */
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
border-radius: 50% !important;
/* 선명한 파란색과 컬러 섀도우 */
background: #0084ff !important;
box-shadow: 0 4px 14px rgba(0, 132, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
/* 마진 정리 */
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
/* 부드러운 전환 */
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, box-shadow 0.2s ease !important;
}
/* 모바일(화면 <= 640px)에서의 특정 위치 */
@media (max-width: 640px) {
.header-dropdown-toggle.chat-header-icon {
bottom: 80px !important;
left: 20px !important; /* 오른쪽에 다시 배치하려면 right: 20px으로 변경 */
}
}
/* 호버 효과 (가벼운 확대) */
.header-dropdown-toggle.chat-header-icon:hover {
transform: scale(1.08) !important;
box-shadow: 0 6px 20px rgba(0, 132, 255, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
/* ========================================================= */
/* 2. DISCOURSE 기본 회색 배경 제거 */
/* ========================================================= */
.header-dropdown-toggle.chat-header-icon .icon,
.header-dropdown-toggle.chat-header-icon span:not(.badge-notification):not(.chat-badge):not([class*="unread"]):not([class*="count"]) {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* ========================================================= */
/* 3. 아이콘(버블) 완벽하게 중앙 정렬 */
/* ========================================================= */
.header-dropdown-toggle.chat-header-icon .d-icon,
.header-dropdown-toggle.chat-header-icon svg {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
width: 32px !important;
height: 32px !important;
color: #ffffff !important;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1)) !important;
}
/* ========================================================= */
/* 4. 알림 배지 (초록색 카운터 + 숫자 표시) */
/* ========================================================= */
.header-dropdown-toggle.chat-header-icon .badge-notification,
.header-dropdown-toggle.chat-header-icon .chat-badge,
.header-dropdown-toggle.chat-header-icon .unread-notifications,
.header-dropdown-toggle.chat-header-icon [class*="badge"],
.d-header-icons .header-dropdown-toggle.chat-header-icon .badge-notification {
position: absolute !important;
top: -4px !important;
right: -4px !important;
left: auto !important;
margin: 0 !important;
z-index: 10 !important;
/* 강제 적용된 초록색 */
background-color: #53A548 !important;
background: #53A548 !important;
color: #ffffff !important;
/* 숫자가 보이도록 강제 적용된 타이포그래피 */
font-size: 13px !important;
font-weight: bold !important;
line-height: 18px !important;
letter-spacing: normal !important;
text-indent: 0 !important;
/* 치수와 형태 */
padding: 0 6px !important;
min-width: 22px !important;
height: 22px !important;
border-radius: 50px !important;
border: 2px solid #ffffff !important;
box-sizing: border-box !important;
/* 숫자 중앙 정렬 */
display: flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
overflow: visible !important;
/* 초록색 펄스 애니메이션 (keyframes와 연결됨) */
animation: badge-pulse 2s infinite !important;
}
/* 모든 자식 요소(Discourse가 숫자를 span으로 감싸는 경우)가 표시되도록 강제 */
.header-dropdown-toggle.chat-header-icon .badge-notification *,
.header-dropdown-toggle.chat-header-icon .chat-badge *,
.header-dropdown-toggle.chat-header-icon [class*="badge"] * {
color: #ffffff !important;
background: transparent !important;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: inherit !important;
}
/* ========================================================= */
/* 5. 수정된 애니메이션 (레이더 효과 & 바운스) */
/* ========================================================= */
/* 5.1 - 빨간 배지 주위의 레이더 파동 (펄스) */
.header-dropdown-toggle.chat-header-icon .badge-notification,
.header-dropdown-toggle.chat-header-icon .chat-badge,
.header-dropdown-toggle.chat-header-icon .chat-channel-unread-indicator {
animation: badge-pulse 2s infinite !important;
transform-origin: center !important;
}
/* 5.2 - 메시지가 있을 때 파란 버튼 전체에 적용되는 바운스 효과 */
.header-dropdown-toggle.chat-header-icon:has(.badge-notification),
.header-dropdown-toggle.chat-header-icon:has(.chat-badge),
.header-dropdown-toggle.chat-header-icon:has(.chat-channel-unread-indicator) {
animation: chat-bounce 3s infinite !important;
}
/* --- KEYFRAMES 정의 (수정 금지) --- */
/* 파동 정의: 표시 버그를 피하기 위해 box-shadow만 사용 */
@keyframes badge-pulse {
0% {
box-shadow: 0 0 0 0 rgba(250, 62, 62, 0.8);
}
70% {
box-shadow: 0 0 0 10px rgba(250, 62, 62, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(250, 62, 62, 0);
}
}
/* 바운스 정의: 버튼이 3초마다 살짝 점프 */
@keyframes chat-bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-6px);
}
60% {
transform: translateY(-3px);
}
}
/* ========================================================= */
/* 6. 채널 목록 및 개인 메시지에서의 펄스 효과 */
/* ========================================================= */
/* 6.1 - 목록 컨테이너의 오버플로우 허용 */
.chat-channel-row,
.chat-channel-list-item,
.chat-drawer-container .chat-channel-unread-indicator,
.chat-channel-row .chat-channel-unread-indicator {
overflow: visible !important;
}
/* 6.2 - 표시 점의 스타일 및 마진 */
.chat-channel-row .chat-channel-unread-indicator,
.chat-channel-row .badge-notification,
.chat-channel-row .unread-indicator,
.chat-drawer-container .chat-channel-unread-indicator,
.chat-full-page .chat-channel-unread-indicator,
.chat-channel-list-item .chat-channel-unread-indicator {
animation: list-dot-pulse 1.8s infinite !important;
border-radius: 50% !important;
position: relative !important;
overflow: visible !important;
margin: 0 6px !important; /* 텍스트와 날짜에 붙지 않도록 간격 확보 */
}
/* 6.3 - 조정된 애니메이션 (최대 6px의 더 컴팩트한 파동) */
@keyframes list-dot-pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.7); /* 점의 색상에 맞춰 적응 */
}
70% {
box-shadow: 0 0 0 6px rgba(0, 132, 255, 0); /* 줄 안에 머물도록 반경 축소 */
}
100% {
box-shadow: 0 0 0 0 rgba(0, 132, 255, 0);
}
}
그리고 JS 코드는 다음과 같습니다:
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
let lastScrollTop = 0;
let isHiddenByScroll = false;
// 1. 스크롤 핸들러 (모바일에서만 활성)
window.addEventListener("scroll", () => {
const isMobile = window.innerWidth <= 640;
const floatBtn = document.querySelector('.header-dropdown-toggle.chat-header-icon');
if (!floatBtn) return;
// 컴퓨터인 경우 버튼이 항상 표시되도록 확인
if (!isMobile) {
if (isHiddenByScroll) {
floatBtn.style.setProperty('transform', 'translateY(0) scale(1)', 'important');
floatBtn.style.setProperty('opacity', '1', 'important');
isHiddenByScroll = false;
}
return;
}
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
// 아래로 스크롤하는 경우 (100px 초과 시)
if (currentScrollTop > lastScrollTop && currentScrollTop > 100) {
if (!isHiddenByScroll) {
floatBtn.style.setProperty('transform', 'translateY(100px) scale(0.8)', 'important');
floatBtn.style.setProperty('opacity', '0', 'important');
isHiddenByScroll = true;
}
}
// 위로 스크롤하는 경우
else if (currentScrollTop < lastScrollTop) {
if (isHiddenByScroll) {
floatBtn.style.setProperty('transform', 'translateY(0) scale(1)', 'important');
floatBtn.style.setProperty('opacity', '1', 'important');
isHiddenByScroll = false;
}
}
lastScrollTop = currentScrollTop <= 0 ? 0 : currentScrollTop;
}, { passive: true });
// 2. 기본 표시를 관리하기 위한 MutationObserver
const observer = new MutationObserver(() => {
const chatOpen = document.querySelector('.chat-drawer, .d-chat-floating-panel, .chat-widget, .chat-panel, .chat-out-of-container, .chat-full-page');
const isChatRoute = window.location.pathname.startsWith('/chat');
const hasFullPageClass = document.body.classList.contains('has-full-page-chat');
const isMobile = window.innerWidth <= 640;
const isTopicRoute = window.location.pathname.includes('/t/') || document.body.classList.contains('archetype-regular');
const hideOnMobileTopic = isMobile && isTopicRoute;
const floatBtn = document.querySelector('.header-dropdown-toggle.chat-header-icon');
if (floatBtn) {
if (chatOpen || isChatRoute || hasFullPageClass || hideOnMobileTopic) {
floatBtn.style.setProperty('display', 'none', 'important');
} else {
floatBtn.style.setProperty('display', 'flex', 'important');
// 모바일/데스크톱 위치의 깔끔한 관리
if (isMobile) {
floatBtn.style.setProperty('left', '10px', 'important'); // 더 이동하려면 값 변경
floatBtn.style.removeProperty('right');
} else {
floatBtn.style.setProperty('right', '20px', 'important');
floatBtn.style.removeProperty('left');
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true, attributes: true });
});