xit-app
/
IBMS_NEW
21
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

단속 > 단속 등록&열람: 구조지수 VO 추가, 검색/전체 조회 기능 구현 및 등록 팝업에 구조지수 드롭다운 적용

Browse Source
dev
박성영 4 months ago
parent 1de56b1839
commit eba65ef64a
3 changed files with 470 additions and 255 deletions
Show Stats Download Patch File Download Diff File

256
src/main/webapp/WEB-INF/views/crdn/crndRegistAndView/crdnActInfo/crdnActInfoRegistPopup.jsp
Unescape Escape View File

@ -70,13 +70,8 @@
<tr>
<th class="th">구조지수</th>
<td>
<div class="strct-idx-dropdown-container">
<input type="text" id="strctIdxNm" name="strctIdxNm" class="input" style="width: 200px;" placeholder="구조명을 입력하거나 선택하세요" autocomplete="off" value="${data.strctIdxCdNm}"/>
<input type="hidden" id="strctIdxCd" name="strctIdxCd" value="${data.strctIdxCd}"/>
<div id="strctIdxDropdown" class="strct-idx-dropdown">
<!-- 드롭다운 목록이 여기에 동적으로 생성됩니다 -->
</div>
</div>
<input type="text" id="strctIdxNm" name="strctIdxNm" class="input" style="width: 200px;" placeholder="구조명을 입력하거나 선택하세요" autocomplete="off" value="${data.strctIdxCdNm}"/>
<input type="hidden" id="strctIdxCd" name="strctIdxCd" value="${data.strctIdxCd}"/>
</td>
<th class="th">용도지수</th>
<td>
@ -152,222 +147,65 @@
}
});
// 구조지수 드롭다운 초기화
// 구조지수 드롭다운 초기화 (XIT 공통 컴포넌트 사용)
initStrctIdxDropdown();
console.log('불법행위정보 팝업이 초기화되었습니다. 모드:', mode);
});
// 구조지수 드롭다운 관련 변수
var strctIdxData = []; // 전체 구조지수 데이터
var filteredStrctIdxData = []; // 필터링된 구조지수 데이터
var selectedIndex = -1; // 현재 선택된 항목 인덱스
var isDropdownOpen = false; // 드롭다운 열림 상태
// 구조지수 드롭다운 인스턴스
var strctIdxDropdown;
/**
* 구조지수 드롭다운 초기화
* 중요한 로직 주석: 전체 구조지수 데이터를 로드하고 이벤트를 바인딩한다.
* 중요한 로직 주석: XIT 공통 드롭다운 컴포넌트를 사용하여 구조지수 선택 기능을 구현한다.
*/
function initStrctIdxDropdown() {
// 전체 구조지수 데이터 로드
$.ajax({
url: '<c:url value="/crdn/crndRegistAndView/crdnActInfo/getAllStrctIdx.ajax"/>',
type: 'POST',
success: function(response) {
if (response.success) {
strctIdxData = response.data;
filteredStrctIdxData = strctIdxData;
} else {
console.error('구조지수 데이터를 가져오는데 실패했습니다.');
strctIdxDropdown = new XitDropdown({
inputSelector: '#strctIdxNm',
hiddenSelector: '#strctIdxCd',
dataUrl: '<c:url value="/crdn/crndRegistAndView/crdnActInfo/getAllStrctIdx.ajax"/>',
width: '500px',
maxHeight: '300px',
valueField: 'strctIdxCd',
textField: 'strctNm',
searchField: 'strctNm',
placeholder: '구조명을 입력하거나 선택하세요',
noResultsText: '검색 결과가 없습니다',
cssClass: 'strct-idx-dropdown',
displayFields: [
{
name: 'strctIdx',
label: '구조지수',
formatter: function(value) {
return value ? parseFloat(value).toFixed(2) : '-';
}
},
{
name: 'rdvlrtCnYrCnt',
label: '잔가율연수',
formatter: function(value) {
return value ? parseFloat(value).toFixed(0) : '-';
}
},
{
name: 'lastYrRdvlrt',
label: '최종연도잔가율',
formatter: function(value) {
return value ? parseFloat(value).toFixed(2) : '-';
}
},
{
name: 'dprt',
label: '감가상각률',
formatter: function(value) {
return value ? parseFloat(value).toFixed(2) : '-';
}
}
},
error: function() {
console.error('구조지수 데이터 로드 중 오류가 발생했습니다.');
}
});
// 이벤트 바인딩
bindStrctIdxEvents();
}
/**
* 구조지수 드롭다운 이벤트 바인딩
* 중요한 로직 주석: input 필드의 클릭, 키보드 이벤트 등을 처리한다.
*/
function bindStrctIdxEvents() {
var $input = $('#strctIdxNm');
var $dropdown = $('#strctIdxDropdown');
// input 클릭 시 드롭다운 열기
$input.on('click', function() {
showStrctIdxDropdown();
});
// input 포커스 시 드롭다운 열기
$input.on('focus', function() {
showStrctIdxDropdown();
});
// input 키보드 입력 시 실시간 필터링
$input.on('input', function() {
filterStrctIdxData($(this).val());
showStrctIdxDropdown();
selectedIndex = -1;
});
// 키보드 네비게이션
$input.on('keydown', function(e) {
if (!isDropdownOpen) return;
switch (e.keyCode) {
case 38: // 위 화살표
e.preventDefault();
navigateDropdown(-1);
break;
case 40: // 아래 화살표
e.preventDefault();
navigateDropdown(1);
break;
case 13: // 엔터
e.preventDefault();
selectCurrentItem();
break;
case 27: // ESC
hideStrctIdxDropdown();
break;
}
});
// 문서 클릭 시 드롭다운 닫기
$(document).on('click', function(e) {
if (!$(e.target).closest('.strct-idx-dropdown-container').length) {
hideStrctIdxDropdown();
}
});
}
/**
* 구조지수 데이터 필터링
* 중요한 로직 주석: 입력된 텍스트를 기준으로 구조명을 필터링한다.
*/
function filterStrctIdxData(searchTerm) {
var term = searchTerm.trim().toLowerCase();
if (term === '') {
filteredStrctIdxData = strctIdxData;
} else {
filteredStrctIdxData = strctIdxData.filter(function(item) {
return item.strctNm && item.strctNm.toLowerCase().indexOf(term) > -1;
});
}
}
/**
* 구조지수 드롭다운 표시
* 중요한 로직 주석: 필터링된 데이터를 기반으로 드롭다운 리스트를 생성하고 표시한다.
*/
function showStrctIdxDropdown() {
var $dropdown = $('#strctIdxDropdown');
var html = '';
if (filteredStrctIdxData.length === 0) {
html = '<div class="strct-idx-item no-results">검색 결과가 없습니다.</div>';
} else {
filteredStrctIdxData.forEach(function(item, index) {
var strctIdx = item.strctIdx ? parseFloat(item.strctIdx).toFixed(2) : '-';
var rdvlrtCnYrCnt = item.rdvlrtCnYrCnt ? parseFloat(item.rdvlrtCnYrCnt).toFixed(0) : '-';
var lastYrRdvlrt = item.lastYrRdvlrt ? parseFloat(item.lastYrRdvlrt).toFixed(2) : '-';
var dprt = item.dprt ? parseFloat(item.dprt).toFixed(2) : '-';
html += '<div class="strct-idx-item" data-index="' + index + '" data-code="' + item.strctIdxCd + '" data-name="' + item.strctNm + '">';
html += ' <div class="strct-idx-main">' + item.strctNm + '</div>';
html += ' <div class="strct-idx-details">';
html += ' <span class="strct-idx-value">구조지수: ' + strctIdx + '</span>';
html += ' <span class="strct-idx-value">잔가율연수: ' + rdvlrtCnYrCnt + '</span>';
html += ' <span class="strct-idx-value">최종연도잔가율: ' + lastYrRdvlrt + '</span>';
html += ' <span class="strct-idx-value">감가상각률: ' + dprt + '</span>';
html += ' </div>';
html += '</div>';
});
}
$dropdown.html(html);
$dropdown.show();
isDropdownOpen = true;
// 마우스 클릭 이벤트 바인딩
$dropdown.find('.strct-idx-item').on('click', function() {
if (!$(this).hasClass('no-results')) {
var index = parseInt($(this).attr('data-index'));
selectDropdownItem(index);
}
]
});
}
/**
* 구조지수 드롭다운 숨기기
*/
function hideStrctIdxDropdown() {
$('#strctIdxDropdown').hide();
isDropdownOpen = false;
selectedIndex = -1;
}
/**
* 드롭다운 네비게이션
* 중요한 로직 주석: 화살표 키로 드롭다운 항목들을 네비게이션한다.
*/
function navigateDropdown(direction) {
var $items = $('#strctIdxDropdown .strct-idx-item:not(.no-results)');
if ($items.length === 0) return;
// 이전 선택 항목 하이라이트 제거
$items.removeClass('selected');
// 새로운 인덱스 계산
selectedIndex += direction;
if (selectedIndex < 0) selectedIndex = $items.length - 1;
if (selectedIndex >= $items.length) selectedIndex = 0;
// 새로운 항목 하이라이트
$items.eq(selectedIndex).addClass('selected');
// 스크롤 조정
var $dropdown = $('#strctIdxDropdown');
var $selectedItem = $items.eq(selectedIndex);
var dropdownHeight = $dropdown.height();
var itemHeight = $selectedItem.outerHeight();
var scrollTop = $dropdown.scrollTop();
var itemTop = $selectedItem.position().top + scrollTop;
if (itemTop < scrollTop) {
$dropdown.scrollTop(itemTop);
} else if (itemTop + itemHeight > scrollTop + dropdownHeight) {
$dropdown.scrollTop(itemTop + itemHeight - dropdownHeight);
}
}
/**
* 현재 선택된 항목 선택
*/
function selectCurrentItem() {
if (selectedIndex >= 0 && selectedIndex < filteredStrctIdxData.length) {
selectDropdownItem(selectedIndex);
}
}
/**
* 드롭다운 항목 선택
* 중요한 로직 주석: 선택된 구조지수를 input 필드에 설정하고 드롭다운을 닫는다.
*/
function selectDropdownItem(index) {
var selectedItem = filteredStrctIdxData[index];
if (selectedItem) {
$('#strctIdxNm').val(selectedItem.strctNm);
$('#strctIdxCd').val(selectedItem.strctIdxCd);
hideStrctIdxDropdown();
}
}
/**
* 불법행위정보 저장 함수
* 중요한 로직 주석: validation 체크 후 mode에 따라 등록/수정 API를 호출한다.

352
src/main/webapp/resources/xit/common_util.js
Unescape Escape View File

@ -751,3 +751,355 @@ function closeChildPopupsAndSelf(childPopups) {
return childPopups;
}
/**
* XIT 공통 드롭다운 컴포넌트
* 중요한 로직 주석: 재사용 가능한 드롭다운 컴포넌트로 여러 페이지에서 사용할 수 있다.
*/
function XitDropdown(options) {
// 기본 옵션 설정
this.options = $.extend({
inputSelector: null, // input 필드 셀렉터 (필수)
hiddenSelector: null, // hidden 필드 셀렉터 (필수)
dataUrl: null, // 데이터 조회 URL (필수)
width: 'auto', // 드롭다운 넓이
maxHeight: '300px', // 드롭다운 최대 높이
displayFields: [], // 표시할 필드 배열
valueField: 'id', // 값 필드명
textField: 'name', // 텍스트 필드명
searchField: 'name', // 검색 대상 필드명
placeholder: '검색어를 입력하세요', // placeholder 텍스트
noResultsText: '검색 결과가 없습니다', // 검색 결과 없음 텍스트
cssClass: 'xit-dropdown', // CSS 클래스명
disabled: false // 비활성화 여부
}, options);
// 필수 옵션 검증
if (!this.options.inputSelector || !this.options.hiddenSelector || !this.options.dataUrl) {
throw new Error('XitDropdown: inputSelector, hiddenSelector, dataUrl은 필수입니다.');
}
this.$input = $(this.options.inputSelector);
this.$hidden = $(this.options.hiddenSelector);
this.data = [];
this.filteredData = [];
this.selectedIndex = -1;
this.isOpen = false;
this.dropdownId = 'xit-dropdown-' + Date.now() + Math.random().toString(36).substr(2, 9);
this.init();
}
/**
* XitDropdown 프로토타입 메소드들
*/
XitDropdown.prototype = {
/**
* 드롭다운 초기화
* 중요한 로직 주석: DOM 구조를 생성하고 데이터를 로드한 후 이벤트를 바인딩한다.
*/
init: function() {
this.createDropdownElement();
this.loadData();
this.bindEvents();
// 비활성화 상태 설정
if (this.options.disabled) {
this.$input.prop('disabled', true);
}
},
/**
* 드롭다운 DOM 엘리먼트 생성
* 중요한 로직 주석: input 필드 다음에 드롭다운 컨테이너를 추가한다.
*/
createDropdownElement: function() {
var containerClass = this.options.cssClass + '-container';
var dropdownClass = this.options.cssClass;
// 이미 컨테이너가 있다면 제거
this.$input.closest('.' + containerClass).find('.' + dropdownClass).remove();
// 컨테이너가 없다면 생성
if (!this.$input.parent().hasClass(containerClass)) {
this.$input.wrap('<div class="' + containerClass + '" style="position: relative; display: inline-block;"></div>');
}
// 드롭다운 엘리먼트 생성
var $dropdown = $('<div>')
.attr('id', this.dropdownId)
.addClass(dropdownClass)
.css({
'position': 'absolute',
'top': '100%',
'left': '0',
'right': '0',
'background': 'white',
'border': '1px solid #ccc',
'border-top': 'none',
'border-radius': '0 0 4px 4px',
'box-shadow': '0 2px 8px rgba(0, 0, 0, 0.1)',
'z-index': '1000',
'display': 'none',
'max-height': this.options.maxHeight,
'overflow-y': 'auto',
'width': this.options.width
});
this.$input.parent().append($dropdown);
this.$dropdown = $dropdown;
},
/**
* 데이터 로드
* 중요한 로직 주석: AJAX로 서버에서 데이터를 가져온다.
*/
loadData: function() {
var self = this;
$.ajax({
url: this.options.dataUrl,
type: 'POST',
success: function(response) {
if (response && response.success) {
self.data = response.data || [];
self.filteredData = self.data;
} else {
console.error('XitDropdown: 데이터 로드 실패', response);
}
},
error: function() {
console.error('XitDropdown: 데이터 로드 중 오류 발생');
}
});
},
/**
* 이벤트 바인딩
* 중요한 로직 주석: input 필드와 드롭다운의 각종 이벤트를 처리한다.
*/
bindEvents: function() {
var self = this;
// input 클릭 시 드롭다운 열기
this.$input.on('click.xitdropdown', function(e) {
e.stopPropagation();
if (!self.options.disabled) {
self.showDropdown();
}
});
// input 포커스 시 드롭다운 열기
this.$input.on('focus.xitdropdown', function() {
if (!self.options.disabled) {
self.showDropdown();
}
});
// input 키보드 입력 시 실시간 필터링
this.$input.on('input.xitdropdown', function() {
if (!self.options.disabled) {
self.filterData($(this).val());
self.showDropdown();
self.selectedIndex = -1;
}
});
// 키보드 네비게이션
this.$input.on('keydown.xitdropdown', function(e) {
if (!self.isOpen || self.options.disabled) return;
switch (e.keyCode) {
case 38: // 위 화살표
e.preventDefault();
self.navigateDropdown(-1);
break;
case 40: // 아래 화살표
e.preventDefault();
self.navigateDropdown(1);
break;
case 13: // 엔터
e.preventDefault();
self.selectCurrentItem();
break;
case 27: // ESC
self.hideDropdown();
break;
}
});
// 문서 클릭 시 드롭다운 닫기
$(document).on('click.xitdropdown-' + this.dropdownId, function(e) {
if (!$(e.target).closest('.' + self.options.cssClass + '-container').length) {
self.hideDropdown();
}
});
},
/**
* 데이터 필터링
* 중요한 로직 주석: 검색어에 따라 데이터를 필터링한다.
*/
filterData: function(searchTerm) {
var term = searchTerm.trim().toLowerCase();
var searchField = this.options.searchField;
if (term === '') {
this.filteredData = this.data;
} else {
this.filteredData = this.data.filter(function(item) {
return item[searchField] && item[searchField].toString().toLowerCase().indexOf(term) > -1;
});
}
},
/**
* 드롭다운 표시
* 중요한 로직 주석: 필터링된 데이터를 기반으로 드롭다운을 생성하고 표시한다.
*/
showDropdown: function() {
var html = '';
var self = this;
if (this.filteredData.length === 0) {
html = '<div class="' + this.options.cssClass + '-item no-results" style="padding: 10px 12px; color: #666; font-style: italic; text-align: center; cursor: default;">' + this.options.noResultsText + '</div>';
} else {
this.filteredData.forEach(function(item, index) {
html += '<div class="' + self.options.cssClass + '-item" data-index="' + index + '" data-value="' + item[self.options.valueField] + '" style="padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background-color 0.2s;">';
html += ' <div class="' + self.options.cssClass + '-main" style="font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px;">' + item[self.options.textField] + '</div>';
if (self.options.displayFields.length > 0) {
html += ' <div class="' + self.options.cssClass + '-details" style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px;">';
self.options.displayFields.forEach(function(field) {
if (item[field.name] !== undefined) {
var value = field.formatter ? field.formatter(item[field.name]) : item[field.name];
html += ' <span class="' + self.options.cssClass + '-value" style="color: #666; background-color: #f8f9fa; padding: 2px 6px; border-radius: 3px; font-size: 11px;">' + field.label + ': ' + value + '</span>';
}
});
html += ' </div>';
}
html += '</div>';
});
}
this.$dropdown.html(html);
this.$dropdown.show();
this.isOpen = true;
// 클릭 이벤트 바인딩
this.$dropdown.find('.' + this.options.cssClass + '-item:not(.no-results)').on('click', function() {
var index = parseInt($(this).attr('data-index'));
self.selectItem(index);
});
// hover 효과 추가
this.$dropdown.find('.' + this.options.cssClass + '-item:not(.no-results)').hover(
function() {
$(this).css('background-color', '#f8f9fa');
},
function() {
if (!$(this).hasClass('selected')) {
$(this).css('background-color', '');
}
}
);
},
/**
* 드롭다운 숨기기
*/
hideDropdown: function() {
this.$dropdown.hide();
this.isOpen = false;
this.selectedIndex = -1;
},
/**
* 드롭다운 네비게이션
* 중요한 로직 주석: 화살표 키로 드롭다운 항목들을 네비게이션한다.
*/
navigateDropdown: function(direction) {
var $items = this.$dropdown.find('.' + this.options.cssClass + '-item:not(.no-results)');
if ($items.length === 0) return;
// 이전 선택 항목 하이라이트 제거
$items.removeClass('selected').css('background-color', '');
// 새로운 인덱스 계산
this.selectedIndex += direction;
if (this.selectedIndex < 0) this.selectedIndex = $items.length - 1;
if (this.selectedIndex >= $items.length) this.selectedIndex = 0;
// 새로운 항목 하이라이트
var $selectedItem = $items.eq(this.selectedIndex);
$selectedItem.addClass('selected').css('background-color', '#e3f2fd');
// 스크롤 조정
var dropdownHeight = this.$dropdown.height();
var itemHeight = $selectedItem.outerHeight();
var scrollTop = this.$dropdown.scrollTop();
var itemTop = $selectedItem.position().top + scrollTop;
if (itemTop < scrollTop) {
this.$dropdown.scrollTop(itemTop);
} else if (itemTop + itemHeight > scrollTop + dropdownHeight) {
this.$dropdown.scrollTop(itemTop + itemHeight - dropdownHeight);
}
},
/**
* 현재 선택된 항목 선택
*/
selectCurrentItem: function() {
if (this.selectedIndex >= 0 && this.selectedIndex < this.filteredData.length) {
this.selectItem(this.selectedIndex);
}
},
/**
* 항목 선택
* 중요한 로직 주석: 선택된 항목의 값을 input과 hidden 필드에 설정한다.
*/
selectItem: function(index) {
if (index >= 0 && index < this.filteredData.length) {
var selectedItem = this.filteredData[index];
this.$input.val(selectedItem[this.options.textField]);
this.$hidden.val(selectedItem[this.options.valueField]);
this.hideDropdown();
// 선택 이벤트 발생
if (this.options.onSelect && typeof this.options.onSelect === 'function') {
this.options.onSelect(selectedItem);
}
}
},
/**
* 드롭다운 비활성화/활성화
*/
setDisabled: function(disabled) {
this.options.disabled = disabled;
this.$input.prop('disabled', disabled);
if (disabled) {
this.hideDropdown();
}
},
/**
* 드롭다운 파괴
*/
destroy: function() {
// 이벤트 제거
this.$input.off('.xitdropdown');
$(document).off('.xitdropdown-' + this.dropdownId);
// DOM 제거
this.$dropdown.remove();
// 컨테이너가 빈 경우 원래 상태로 복원
var $container = this.$input.parent();
if ($container.hasClass(this.options.cssClass + '-container') && $container.children().length === 1) {
this.$input.unwrap();
}
}
};

117
src/main/webapp/resources/xit/xit-common.css
Unescape Escape View File

@ -1617,40 +1617,16 @@ select[data-auto-color="true"] option[data-color] {
color: #333;
}
/* Autocomplete styles */
.autocomplete-container {
position: relative;
}
.autocomplete-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
border: 1px solid #ddd;
border-top: none;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
z-index: 1000;
}
.autocomplete-item {
padding: 8px 12px;
cursor: pointer;
}
.autocomplete-item:hover {
background-color: #f0f0f0;
}
/* ===== 구조지수 드롭다운 스타일 ===== */
.strct-idx-dropdown-container {
/* ===== XIT 공통 드롭다운 컴포넌트 스타일 ===== */
/* 컨테이너 스타일 */
.xit-dropdown-container {
position: relative;
display: inline-block;
}
.strct-idx-dropdown {
/* 드롭다운 기본 스타일 */
.xit-dropdown {
position: absolute;
top: 100%;
left: 0;
@ -1666,52 +1642,55 @@ select[data-auto-color="true"] option[data-color] {
overflow-y: auto;
}
.strct-idx-item {
/* 드롭다운 아이템 스타일 */
.xit-dropdown-item {
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid #f5f5f5;
transition: background-color 0.2s;
}
.strct-idx-item:last-child {
.xit-dropdown-item:last-child {
border-bottom: none;
}
.strct-idx-item:hover {
.xit-dropdown-item:hover {
background-color: #f8f9fa;
}
.strct-idx-item.selected {
.xit-dropdown-item.selected {
background-color: #e3f2fd;
color: #1976d2;
}
.strct-idx-item.no-results {
.xit-dropdown-item.no-results {
color: #666;
font-style: italic;
text-align: center;
cursor: default;
}
.strct-idx-item.no-results:hover {
.xit-dropdown-item.no-results:hover {
background-color: transparent;
}
.strct-idx-main {
/* 아이템 메인 텍스트 */
.xit-dropdown-main {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.strct-idx-details {
/* 아이템 상세 정보 */
.xit-dropdown-details {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 12px;
}
.strct-idx-value {
.xit-dropdown-value {
color: #666;
background-color: #f8f9fa;
padding: 2px 6px;
@ -1719,41 +1698,87 @@ select[data-auto-color="true"] option[data-color] {
font-size: 11px;
}
.strct-idx-item:hover .strct-idx-value {
.xit-dropdown-item:hover .xit-dropdown-value {
background-color: #e9ecef;
}
.strct-idx-item.selected .strct-idx-value {
.xit-dropdown-item.selected .xit-dropdown-value {
background-color: #bbdefb;
color: #1565c0;
}
/* 드롭다운 스크롤바 스타일 */
.strct-idx-dropdown::-webkit-scrollbar {
.xit-dropdown::-webkit-scrollbar {
width: 8px;
}
.strct-idx-dropdown::-webkit-scrollbar-track {
.xit-dropdown::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.strct-idx-dropdown::-webkit-scrollbar-thumb {
.xit-dropdown::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.strct-idx-dropdown::-webkit-scrollbar-thumb:hover {
.xit-dropdown::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
/* input 필드 포커스 시 드롭다운과 연결된 스타일 */
.strct-idx-dropdown-container .input:focus {
.xit-dropdown-container .input:focus {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.strct-idx-dropdown-container .input:focus + input + .strct-idx-dropdown {
.xit-dropdown-container .input:focus + input + .xit-dropdown {
border-top: 1px solid #007bff;
}
/* ===== 드롭다운 넓이 조절 클래스 ===== */
/* 작은 사이즈 (200px) */
.xit-dropdown-sm {
width: 200px;
}
.xit-dropdown-sm .xit-dropdown {
width: 200px;
}
/* 중간 사이즈 (300px) */
.xit-dropdown-md {
width: 300px;
}
.xit-dropdown-md .xit-dropdown {
width: 300px;
}
/* 큰 사이즈 (400px) */
.xit-dropdown-lg {
width: 400px;
}
.xit-dropdown-lg .xit-dropdown {
width: 400px;
}
/* 전체 넓이 사용 */
.xit-dropdown-full {
width: 100%;
}
.xit-dropdown-full .xit-dropdown {
width: 100%;
}
/* 커스텀 넓이를 위한 CSS 변수 지원 */
.xit-dropdown-custom {
width: var(--dropdown-width, 250px);
}
.xit-dropdown-custom .xit-dropdown {
width: var(--dropdown-width, 250px);
}

Write Preview
Loading…
Cancel
Save