그누보드4 게시판 스킨 내 3단계 여분필드 연동 검색 구현 방법

• 목록
• 스크랩

그누보드4 게시판 스킨 내 3단계 여분필드 연동 검색 구현 방법

그누보드 게시판 목록에서 공간을 많이 차지하는 기본 탭 형태의 카테고리 대신, 여분 필드(wr6, wr7 등)와 연동된 3단계 셀렉트 박스 검색 기능을 구현하여 효율적으로 게시물을 분류하고 검색하는 방법을 안내합니다.

그누보드 게시판 3단계 여분필드 연동 검색 폼 구현 방법

그누보드 게시판 목록에서 공간을 많이 차지하는 기존 탭 형태의 카테고리 대신, 여분 필드(wr_6, wr_7 등)를 활용한 3단계 셀렉트 박스 검색 폼과 자바스크립트 연동 로직을 구성하려면 아래 절차에 따라 파일을 생성하고 스킨을 수정해야 합니다.

1. 3단계 선택 및 검색 로직 파일 생성

• 생성 파일: config.list_select.php 파일을 생성합니다.
• 자바스크립트 연동 로직: 대분류, 중분류, 소분류(예: sojaeji 배열 및 sidochange(), gugunchange(), dongview(), gugunview(), sidoview() 함수)를 작성하여 각 셀렉트 박스 간의 연동을 처리합니다.
• 검색 실행 함수: onChangeKey() 함수를 통해 사용자가 선택한 3단계 분류 값을 조합하여 검색어(stx) 입력 필드에 담고 폼을 제출(submit)하도록 구성합니다.

2. 스킨 파일 수정 및 인클루드

• 수정 파일: 적용할 스킨의 list.skin.php
• 인클루드: 생성한 config.list_select.php 파일을 list.skin.php에 인클루드합니다.
• 검색 폼 및 쿼리 변수 설정: list.skin.php 내 검색 영역에 3개의 <select> 태그(sido, gugun, dong)를 배치하고, 검색 범위 지정을 위해 숨김 필드인 <input type=hidden name=sfl value="wr_6||wr_7">를 추가합니다.

3단계 여분필드 연동 검색을 위한 쿼리 변수 및 검색어 설정 방법

그누보드 게시판 스킨에서 3단계 여분필드를 활용한 검색 기능을 구현할 때, 선택된 셀렉트 박스의 값이 게시판 검색 결과에 올바르게 반영되도록 하려면 검색 쿼리 변수(sfl)와 검색어(stx)를 적절히 설정해야 합니다.

1. 검색 쿼리 변수(sfl) 설정

검색 범위를 특정 여분 필드로 한정하기 위해 폼 내부에 hidden 타입의 sfl 변수를 지정합니다. 예를 들어 wr_6과 wr_7 필드를 검색 대상으로 지정하려면 아래와 같이 설정합니다.

<input type="hidden" name="sfl" value="wr_6||wr_7">

만약 여분필드를 쪼개지 않고 wr_6, wr_7, wr_8을 각각 3단계 값으로 그대로 사용하는 구조라면 검색 범위를 아래와 같이 확장할 수 있습니다.

<input type="hidden" name="sfl" value="wr_6||wr_7||wr_8">

2. 자바스크립트를 이용한 검색어(stx) 조합 및 전달

3단계 셀렉트 박스에서 선택된 값(sido, gugun, dong)은 자바스크립트 함수(onChangeKey)를 통해 조합되어 검색어 변수(stx)에 입력된 뒤 폼이 제출됩니다.

• 셀렉트 박스 값이 모두 비어있을 경우 안내 창이 출력됩니다.
• gugun 값이 전체인 경우 stx에 sido 값이 대입됩니다.
• gugun과 dong이 모두 전체이거나 조합된 조건에 따라 공백으로 구분된 문자열이 document.fsearch_area.stx.value에 할당됩니다.

이후 document.fsearch_area.submit()을 통해 설정된 sfl과 stx 값이 게시판 목록 페이지로 전달되어 필터링된 검색 결과를 제공하게 됩니다.

3단계 여분필드 연동 검색 구현 시 데이터 유지보수성 보완 방안

그누보드 게시판 스킨에서 자바스크립트 배열이나 외부 파일(sojaeji.js)을 활용해 3단계 분류 검색을 구현할 때, 분류 데이터를 수동으로 모두 작성해야 하는 유지보수성 한계가 발생합니다.

구조적 한계와 특징

• 수동 작성 필요: 대분류, 중분류, 소분류에 해당하는 데이터와 연동 관계를 자바스크립트 배열에 직접 일일이 입력해야 하므로 분류 항목이 늘어나거나 변경될 때 코드를 직접 수정해야 합니다.
• 데이터 분산: 스킨 내부 파일이나 별도의 .js 파일에 하드코딩되므로 데이터베이스와 연동되지 않아 관리 포인트가 늘어납니다.

보완 및 관리 방안

• DB 연동 구조로 전환 검토: PHP와 데이터베이스(DB) 테이블을 활용하여 분류 데이터를 동적으로 불러오고 반복문으로 옵션을 생성하는 구조로 변경하면 수동 입력의 번거로움을 줄일 수 있습니다.
• 구조 커스터마이징: 특정 행정 구역 스크립트 기반 방식은 우편번호가 아닌 다른 필드로 확장하거나 항목을 대량 관리할 때 수정 범위가 넓어지므로, 사용하려는 여분필드(wr_6, wr_7 등)의 체계에 맞춰 데이터 배열 생성 로직을 간소화해야 합니다.

모바일 반응형 디자인에서 3단계 SELECT 박스 스타일 확인

모바일 환경이나 반응형 디자인을 적용할 때는 화면 크기에 따라 셀렉트 박스가 레이아웃을 벗어나지 않고 유연하게 표시되는지 확인해야 합니다. 특히 기본 스타일이 적용된 상태에서 스마트폰 화면의 가로 폭에 맞춰 크기가 조절되는지, 텍스트가 잘리지 않는지 점검하는 것이 좋습니다.

상황별 판단 및 행동 가이드

내 상황	선택 기준	다음 행동
게시판 목록의 탭 카테고리가 공간을 많이 차지함	3단계 셀렉트 박스 UI로 변경	config.list_select.php 파일을 생성하여 자바스크립트 연동 로직을 작성하고 list.skin.php에 인클루드
여분 필드(wr6, wr7 등)를 검색 범위로 활용하고자 함	검색 쿼리 변수(sfl) 설정	list.skin.php 내 검색 폼에 <input type="hidden" name="sfl" value="wr_6||wr_7"> 추가 및 자바스크립트 onChangeKey 함수로 검색어(stx) 조합
기존 탭 방식 대신 SELECT 박스 UI를 적용하고자 함	get_category_option 함수 활용	list.skin.php의 카테고리 출력부를 <select> 태그로 변경하고 onchange 이벤트에 location 이동 로직 적용

실전 FAQ

Q. 데이터 분류명을 수동으로 모두 작성해야 하나요?

• 예외: 자바스크립트 배열 기반 방식은 분류 항목이 늘어날 때마다 코드를 직접 수정해야 하는 유지보수성 문제가 있습니다.
• 대안: 분류 데이터가 많거나 변경이 잦다면, 데이터베이스(DB) 테이블을 활용하여 PHP로 옵션을 동적으로 생성하는 구조로 전환하는 것이 효율적입니다.

Q. 모바일 반응형 디자인에서 SELECT 박스가 깨져 보입니다.

• 대안: 모바일 환경에서는 셀렉트 박스가 화면 가로 폭을 넘지 않도록 CSS에서 width: 100% 등의 속성을 적용하고, 레이아웃이 유연하게 대응하는지 확인해야 합니다.

참고자료

기타 참고자료

• sir.kr — 다중검색할 수 있게 하고 싶어요 - SIR - 개발자 커뮤니티
• sir.kr — 게시판 여분필드 값을 내용에 넣기 - SIR - 개발자 커뮤니티
• gnustudy.com — 게시판 목록 카테고리 SELECT 형태로 변경 - 게시판스킨강좌, 그누보드5강좌