게시판 리스트에서 회원가입 유도

비회원이 게시판 리스트에 접근할 경우 로그인 해야 글쓰기가 가능하다고 위에 빨간색으로 강조하는 코드입니다. 많이 부족하지만 도움이 됐으면 좋겠네요~ 아래 코드를 추가하고 싶으신 위치에 그대로 추가하시면 됩니다.

    <?php if (!isset($is_member) || !$is_member) { ?>

        <?php if (!isset($_COOKIE['hide_notice_banner']) || $_COOKIE['hide_notice_banner'] != '1') { ?>

            <div id="notice-banner" style="background-color: #ff6666; color: white; padding: 15px 20px; border-radius: 15px; text-align: center; margin: 20px auto; position: relative; max-width: 100%;">

                잠시만요! 로그인 후 글쓰기를 하실 수 있습니다!

                <button id="close-banner" style="position: absolute; top: 10px; right: 10px; background: transparent; border: none; color: white; font-size: 16px; cursor: pointer;">&times;</button>

            </div>

            <script>

                document.getElementById('close-banner').addEventListener('click', function() {

                    document.getElementById('notice-banner').style.display = 'none';

                    // 쿠키 설정: 24시간 후에 만료

                    var date = new Date();

                    date.setTime(date.getTime() + (24 * 60 * 60 * 1000)); // 24시간

                    var expires = "; expires=" + date.toUTCString();

                    document.cookie = "hide_notice_banner=1" + expires + "; path=/";

                });

            </script>

            <style>

                /* 반응형 스타일 */

                #notice-banner {

                    max-width: 100%;

                    box-sizing: border-box;

                    font-size: 16px;

                }

                #notice-banner button {

                    font-size: 20px;

                }

                @media (max-width: 768px) {

                    #notice-banner {

                        font-size: 14px;

                        padding: 10px 15px;

                        max-width: 95%; /* 태블릿 크기에서 배너의 최대 너비를 95%로 조정 */

                    }

                    #notice-banner button {

                        font-size: 18px;

                        top: 5px;

                        right: 5px;

                    }

                }

                @media (max-width: 480px) {

                    #notice-banner {

                        font-size: 12px;

                        padding: 8px 10px;

                        max-width: 90%; /* 모바일 크기에서 배너의 최대 너비를 90%로 조정 */

                    }

                    #notice-banner button {

                        font-size: 16px;

                    }

                }

            </style>

        <?php } ?>

    <?php } ?>