feat(shell): PublicShell에 카카오 1:1 상담 플로팅 버튼 추가

DashboardShell 사이드바 분기에서 mypage 전용으로만 노출되던 카카오 버튼을
모든 공개 페이지(메인/서비스/외주/사주/결제/legal/mypage 등)에서 노출되도록 이동.
DashboardShell 쪽 원본은 Task 6에서 사이드바 분기 제거와 함께 자연 삭제 예정.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-28 03:52:10 +09:00
parent 22fe05b4d8
commit 11bbd00d88

View File

@@ -115,6 +115,58 @@ export default function PublicShell({ children }: { children: React.ReactNode })
</div> </div>
</footer> </footer>
</main> </main>
{/* 카카오 오픈채팅 플로팅 버튼 */}
<a
href="https://open.kakao.com/o/s9stoNvb"
target="_blank"
rel="noopener noreferrer"
className="kakao-float-btn"
aria-label="카카오 오픈채팅 상담"
title="카카오 오픈채팅으로 1:1 상담"
>
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 3C6.477 3 2 6.589 2 11c0 2.713 1.574 5.117 4 6.663V21l3.5-2.1A11.5 11.5 0 0 0 12 19c5.523 0 10-3.589 10-8s-4.477-8-10-8z"/>
</svg>
<span className="kakao-float-label">1:1 </span>
</a>
<style>{`
.kakao-float-btn {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 50;
display: flex;
align-items: center;
gap: 8px;
background: #FEE500;
color: #3A1D1D;
padding: 12px 18px;
border-radius: 100px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
box-shadow: 0 4px 20px rgba(254,229,0,0.4), 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
white-space: nowrap;
}
.kakao-float-btn:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 8px 28px rgba(254,229,0,0.5), 0 4px 12px rgba(0,0,0,0.15);
}
.kakao-float-btn:active {
transform: translateY(-1px) scale(0.98);
}
@media (max-width: 640px) {
.kakao-float-btn {
bottom: 20px;
right: 16px;
padding: 10px 14px;
font-size: 13px;
}
}
`}</style>
</> </>
); );
} }