관심기능 게사판 추가 > ai_qa

(1) 단계: 테이블추가
[code]
CREATE TABLE `g5_user_interest` (
    `ui_id` INT AUTO_INCREMENT PRIMARY KEY,
    `mb_id` VARCHAR(20) NOT NULL,
    `bo_table` VARCHAR(20) NOT NULL,
    `bo_subject` VARCHAR(255) NOT NULL, -- 게시판 제목 필드 추가
    UNIQUE KEY `unique_interest` (`mb_id`, `bo_table`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;



CREATE TABLE `g5_user_interest` (
    `ui_id` INT AUTO_INCREMENT PRIMARY KEY,
    `mb_id` VARCHAR(20) NOT NULL,
    `bo_table` VARCHAR(20) NOT NULL,
    `bo_subject` VARCHAR(255) NOT NULL, -- 게시판 제목 필드 추가
    `select_wr_id` INT, -- 선택한 게시물 ID 필드 추가
    UNIQUE KEY `unique_interest` (`mb_id`, `bo_table`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
[/code]

(2)단계: 버튼클릭시 관심게시판 저장,삭제ajax
<?php
// ajax.php

include_once('./_common.php'); // 데이터베이스 연결 확인

if ($mode == 'toggle_interest') { // 관심 게시판 추가/제거 모드
    $mb_id = $member['mb_id'];
    $bo_table = $_POST['bo_table'];

    // 게시판 제목을 가져오기
    $sql_subject = "SELECT bo_subject FROM g5_board WHERE bo_table = '$bo_table'";
    $result_subject = sql_query($sql_subject);

    if ($result_subject === false) {
        die('쿼리 실행 오류: ' . mysql_error());
    }

    $row_subject = sql_fetch_array($result_subject);
    $bo_subject = $row_subject['bo_subject'];

    if (!$bo_subject) {
        die('게시판 제목을 찾을 수 없습니다.');
    }

    // 관심 게시판 등록 또는 제거 로직
    $sql = "SELECT * FROM g5_user_interest WHERE mb_id = '$mb_id' AND bo_table = '$bo_table'";
    $result = sql_query($sql);

    if (sql_num_rows($result) > 0) {
        // 관심 게시판 제거
        sql_query("DELETE FROM g5_user_interest WHERE mb_id = '$mb_id' AND bo_table = '$bo_table'");
        echo 'removed';
    } else {
        // 관심 게시판 등록
        $insert_query = "INSERT INTO g5_user_interest (mb_id, bo_table, bo_subject) VALUES ('$mb_id', '$bo_table', '$bo_subject')";
        if (sql_query($insert_query)) {
            echo 'added';
        } else {
            echo 'Error: ' . mysql_error(); // 오류 메시지 출력
        }
    }
}
?>
(3) 단계: 게시판 상단에 관심게시판 저장,삭제버튼 추가(토글스위치)
<style>
 .interest-toggle {
    display: flex;
    align-items: center;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-left: 10px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px; /* 둥근 모서리 */
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%; /* 둥근 버튼 */
}

/* 체크박스가 체크되었을 때 슬라이더 스타일 변경 */
input:checked + .slider {
    background-color: #2196F3; /* 체크 시 배경색 */
}

input:checked + .slider:before {
    transform: translateX(26px); /* 체크 시 버튼 이동 */
}
</style>
<div class="interest-toggle">
    <span class="interest-label">
        <?php
        // 현재 사용자가 이미 관심 게시판에 등록했는지 확인
        $mb_id = $member['mb_id'];
        $sql = "SELECT * FROM g5_user_interest WHERE mb_id = '$mb_id' AND bo_table = '$bo_table'";
        $result = sql_query($sql);

        if (sql_num_rows($result) > 0) {
            echo '관심 게시판 등록'; // 등록된 경우
            $is_registered = true;
        } else {
            echo '관심 게시판 제거'; // 등록되지 않은 경우
            $is_registered = false;
        }
        ?>
    </span>
    <label class="toggle-switch">
        <input type="checkbox" class="interest-checkbox" <?php echo $is_registered ? 'checked' : ''; ?> data-bo-table="<?php echo $bo_table; ?>">
        <span class="slider"></span>
    </label>
</div>
(4) 단계 : 게시판 하단에 버튼 클릭시에 실행될 자바스크립트 추가
<script>
$(document).ready(function() {
    $('.interest-checkbox').change(function() {
        const boardTable = $(this).data('bo-table');
        const isChecked = $(this).is(':checked');

        // AJAX 요청으로 서버에 등록 상태 변경
        $.ajax({
            url: '../theme/basic_fav/fav_ajax.php',
            type: 'POST',
            data: {
                mode: 'toggle_interest',
                bo_table: boardTable
            },
            success: function(response) {
                if (response === 'added') {
                    console.log('관심 게시판에 등록되었습니다.');
                } else if (response === 'removed') {
                    console.log('관심 게시판에서 제거되었습니다.');
                } else {
                    console.error('오류 발생:', response);
                }
            },
            error: function(error) {
                console.error('AJAX 요청 중 오류 발생:', error);
            }
        });
    });
});

</script>

(5단계) 관심게시판이 출력될 사이드 영역게 출력코드 추가

<style>
  .sidebar {
    padding: 20px;
    background-color: #f0f8ff; /* 사이드바 배경색 (예: 파스텔톤) */
    border: 1px solid #ddd; /* 테두리 */
    border-radius: 5px; /* 모서리 둥글게 */
}

.interest-container {
    display: flex; /* Flexbox 사용 */
    flex-wrap: wrap; /* 줄 바꿈 허용 */
    gap: 10px; /* 태그 간격 */
}

.interest-tag {
    display: inline-block; /* 블록 형식 */
    padding: 10px 15px; /* 패딩 */
    color: white; /* 글자색 */
    text-decoration: none; /* 밑줄 제거 */
    border-radius: 5px; /* 둥근 모서리 */
    transition: background-color 0.3s; /* 배경색 변화 애니메이션 */
}

.interest-tag:hover {
    opacity: 0.8; /* 마우스 오버 시 투명도 변화 */
}

.interest-tag.active {
    background-color: #3b5998; /* 현재 보고 있는 게시판 색상 (예: 구분되는 색) */
}
</style>
<!------관심게시판---{--->
        <div class="sidebar">
            <h2>관심 게시판</h2>
            <div class="interest-container">
                <?php

            // 관심 게시판을 가져오는 SQL 쿼리
            $sql_interest_boards = "SELECT bo_table, bo_subject FROM g5_user_interest WHERE mb_id = '$member[mb_id]'"; // 예시 쿼리
            $result_interest_boards = sql_query($sql_interest_boards);

            // 현재 게시판이 정의되지 않은 경우 기본값 설정
            $current_bo_table = isset($current_bo_table) ? $current_bo_table : '';

            while ($row_interest = sql_fetch_array($result_interest_boards)) {
                $bo_table = htmlspecialchars($row_interest['bo_table']);
                $bo_subject = htmlspecialchars($row_interest['bo_subject']);
             
                // 현재 게시판 확인
                $active_class = ($current_bo_table == $bo_table) ? 'active' : '';
             
                // 랜덤 색상 생성
                $random_color = sprintf('#%06X', mt_rand(0, 0xFFFFFF));

                echo "<a href='{$bo_table}.php' class='interest-tag {$active_class}' style='background-color: {$random_color};'>{$bo_subject}</a>";
            }
            ?>
            </div>
        </div>
        <!-----관심게시판--}-->