해시태그 입력 및 검색 기능 추가하기

2024-11-04 22:04 조회 877 댓글 1

01. style.css 파일 수정

687번째 반응형 처리 주석 부분을 찾은 후

/* 반응형 처리 { */
@media all and (max-width:1024px) {
    .board_pc {display: none;}
    .rb_bbs_wrap .rb_bbs_for_info {float:none; width: auto; position: absolute; top:39px; right:-5px; padding-right: 0px; z-index: 97;}
    .rb_bbs_for_info1_num {display: none;}

바로 위에 아래 코드 삽입

.wr_tag {display: flex; gap:5px; margin-top: 5px; margin-bottom: 10px;}
.wr_tag a {font-size: 13px; color:#999; border:1px solid #ddd; padding: 4px 8px; border-radius: 25px;}
.wr_tag span {font-size: 13px; color:#999; border:1px solid #ddd; padding: 4px 8px; border-radius: 25px;}
.wr_tag a:hover {border-color:#25282B; color:#25282B;}

02. list_skin.php

첫 번째 3번쨰 줄 찾은 후

<?php
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);

아래 소스코드 삽입

function get_board_sfl_select_options2($sfl){
    global $is_admin;
    $str = '';

    $str .= '<option value="wr_subject" '.get_selected($sfl, 'wr_subject').'>제목</option>';
    $str .= '<option value="wr_content" '.get_selected($sfl, 'wr_content', true).'>내용</option>';
    $str .= '<option value="wr_subject||wr_content" '.get_selected($sfl, 'wr_subject||wr_content').'>제목+내용</option>';
    $str .= '<option value="wr_tag" '.get_selected($sfl, 'wr_tag', true).'>태그</option>';
    
    return run_replace('get_board_sfl_select_options2', $str, $sfl);
}

두 번째 아래 div 부분을 찾은 후

<div class="rb_bbs_wrap" id="scroll_container" style="width:<?php echo $width; ?>">

아래 소스코드 삽입

<?php if($sfl == "wr_tag" && $stx) { ?>
<div class="wr_tag">
    <span>태그검색 #<?php echo $stx; ?></span>
</div>
<?php } ?>

03. view.skin.php

59번째에서 62번째 사이

<h2><?php echo get_text($view['wr_subject']);?></h2>

아래 소스코드 삽입

    <?php if(isset($view['wr_tag']) && $view['wr_tag']) { ?>
    <div class="wr_tag">
        <?php echo view_tags($view['wr_tag'], $bo_table); ?>
    </div>
    <?php } ?>

04. write.skin.php

첫번째 5번째 줄 아래의 소스코드를 찾은 후

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css?ver='.G5_TIME_YMDHIS.'">', 0);

아래 소스코드로 대체

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);

// tag 테이블 추가
if(!sql_query(" DESCRIBE rb_tag ", false)) {
    sql_query(" CREATE TABLE IF NOT EXISTS `rb_tag` (
                  `bo_table` VARCHAR(20) NOT NULL DEFAULT '',
                  `wr_id` INT(11) NOT NULL DEFAULT '0',
                  `tag` VARCHAR(100) NOT NULL DEFAULT '',
				  `created_at` TIMESTAMP NULL DEFAULT NULL,
                  PRIMARY KEY (`bo_table`, `wr_id`, `tag`)
                ) ENGINE=MyISAM DEFAULT CHARSET=utf8 ", true);

}

$columns_to_add = [
    'wr_tag' => 'varchar(255) NOT NULL DEFAULT '''
];

foreach ($columns_to_add as $column => $attributes) {
    // 컬럼이 있는지 확인
    $column_check = sql_query("SHOW COLUMNS FROM {$write_table} LIKE '{$column}'", false);
    if (!sql_num_rows($column_check)) {
        // 컬럼 추가
        sql_query("ALTER TABLE {$write_table} ADD {$column} {$attributes}", true);
    }
}


$tags = get_tags($bo_table);
$js_array = json_encode($tags, JSON_UNESCAPED_UNICODE);
?>

<script src="<?php echo $board_skin_url ?>/tag/tag.js"></script>
<link href="<?php echo $board_skin_url ?>/tag/tag.css" rel="stylesheet" type="text/css" />

두번쨰, 아래 소스코드를 찾은 후

    <?php
        $option = '';
        $option_hidden = '';

바로 위에, 아래 소스코드 추가

    <!-- 태그 { -->
    <style>
        .tag_inp_wrap .tagify {border-radius: 10px; font-size: 13px; padding: 5px;}
        .tag_inp_wrap .tagify--focus {border-color: #25282B !important;}
        .tagify__tag>div>[contenteditable] {margin: 0px;padding: 2px;}
        .tagify__tag>div>* {transition: .0s ease,.0s color}
        .tagify {--placeholder-color-focus: rgba(0, 0, 0, .5);}
    </style>
    <div class="rb_inp_wrap tag_inp_wrap">
        <input type="text" name="wr_tag" value="<?php echo isset($write['wr_tag']) ? $write['wr_tag'] : ''; ?>" id="wr_tag" class="" placeholder="태그 입력후 엔터">
    </div>
    <!-- } -->

세번째, 맨 아래 </script>를 찾아 그 밑에 아래 소스코드 추가

	<script>
	$(function() {
			// JSON 형식으로 변환하여 JavaScript로 전달
			const all_tags = <?php echo $js_array; ?>;


			// all_tags가 배열인지 확인
			const tags = Array.isArray(all_tags) ? all_tags.map((a) => a.tag) : [];


			const input = document.querySelector('input[name=wr_tag]');
			const tagify = new Tagify(input, {
				/*
				whitelist: tags,
				
				dropdown: {
					position: "input",
					enabled: 0
				},
				*/
			});
		});
	</script>

05. write_update.skin.php

아래 소스코드를 찾은 후

 @include_once(G5_PATH.'/rb/rb.lib/ajax.upload_write_update.php'); //

아래 소스코드 추가

    $sql = "delete from rb_tag where bo_table = '$bo_table' and wr_id = '$wr_id' ";
    sql_query($sql);

    // 입력된 태그를 배열로 변환
    $tags = tagify_json_to_array($_POST['wr_tag']);
    $tag_arr = [];

    foreach ($tags as $tag) {
        // 태그 값을 안전하게 처리
        $tag_safe = addslashes($tag);
        $sql = "INSERT INTO rb_tag (bo_table, wr_id, tag, created_at)
                VALUES ('$bo_table', '$wr_id', '$tag_safe', '" . G5_TIME_YMDHIS . "')";
        sql_query($sql);
        $tag_arr[] = $tag_safe;
    }

    // wr_tag 필드 업데이트
    $wr_tag_value = implode(',', $tag_arr);
    $wr_tag_value_safe = addslashes($wr_tag_value);
    $sql = "UPDATE {$write_table}
            SET wr_tag = '$wr_tag_value_safe'
            WHERE wr_id = '$wr_id'";
    sql_query($sql);

게시판 스킨으로 접근하면 rb_tag 테이블과 게시판 테이블에 wr_tag컬럼이 생성 됩니다.

rb_tag 테이블은 태그를 사용하는 게시판 스킨에서 입력되는 모든 태그를 저장 합니다. tagify.js 가 포함되어있으며, write_skin.php 파일의 하단부 에서 tagify.js 의 옵션을 사용할 수 있습니다.