Fix: VIP 카테고리 모두보기 토글 - display 속성으로 즉시 반영

- PHP에서 비활성 카테고리도 항상 렌더링하도록 continue 제거
- input과 label 모두에 inactive-cat 클래스 추가
- JavaScript에서 .inactive-cat 요소의 display를 토글하여 즉시 반영
This commit is contained in:
2026-02-20 15:52:36 +09:00
parent f1fce78661
commit d2bcdd0dc9

View File

@ -37,14 +37,12 @@ $table = "{$fg['vip_list_table']} AS a LEFT JOIN {$fg['vip_category_table']} AS
$group_name = getVipCatName();
$show_all = isset($_REQUEST['show_all_cat']) ? true : false;
foreach ($group_name as $row) { // VIP구분 가지고 와서 뿌려주기
// 비활성 카테고리 숨김
if ($row['gr_used'] == 0 && !$show_all) continue;
$inactive_class = ($row['gr_used'] == 0) ? ' inactive-cat' : '';
$display_style = ($row['gr_used'] == 0 && !$show_all) ? 'display: none;' : '';
$display_style = ($row['gr_used'] == 0) ? 'display: none;' : '';
?>
<input type="radio" name="search_group" id="search_group_<?=$row['gr_id']?>" class="btn-check" value="<?=$row['gr_id']?>" <?php if ($search_group === $row['gr_id']) echo "checked" ?>>
<input type="radio" name="search_group" id="search_group_<?=$row['gr_id']?>" class="btn-check<?=$inactive_class?>" value="<?=$row['gr_id']?>" <?php if ($search_group === $row['gr_id']) echo "checked" ?> style="<?=$display_style?>">
<label class="btn btn-outline-primary category-label<?=$inactive_class?>" for="search_group_<?=$row['gr_id']?>" style="<?=($row['gr_used'] == 0) ? 'opacity: 0.5;' : ''?><?=$display_style?>"><?=$row['gr_name']?></label>
<?php } ?>
<?php } // endforeach ?>
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="toggleShowAllCat()" data-show-all="<?=($show_all) ? 'true' : 'false'?>">
<?=($show_all) ? '활성만 보기' : '모두보기'?>
</button>
@ -376,12 +374,10 @@ $table = "{$fg['vip_list_table']} AS a LEFT JOIN {$fg['vip_category_table']} AS
const btn = event.target;
const showAll = !btn.getAttribute('data-show-all') || btn.getAttribute('data-show-all') === 'false';
// UI 즉시 업데이트
const categoryLabels = document.querySelectorAll('.category-label');
categoryLabels.forEach(label => {
if (label.classList.contains('inactive-cat')) {
label.style.display = showAll ? 'inline-block' : 'none';
}
// 비활성 카테고리 input과 label 토글
const inactiveElements = document.querySelectorAll('.inactive-cat');
inactiveElements.forEach(elem => {
elem.style.display = showAll ? 'inline-block' : 'none';
});
// 버튼 텍스트 업데이트