11 KiB
11 KiB
그룹화 및 목록보기 옵션 저장 기능 가이드
📋 개요
사용자가 설정한 그룹화 컬럼과 목록보기 모드를 LocalStorage에 저장하고, 페이지를 다시 열 때 자동으로 복원하는 기능입니다.
🎯 주요 기능
-
그룹화 컬럼 선택 저장
- 사용자가 선택한 그룹화 기준(거래처, 상태 등)을 저장
- 페이지 재진입 시 자동으로 그룹화 적용
-
목록보기 모드 저장
- 펼쳐보기(expanded) 또는 목록보기(list) 모드 저장
- 페이지 재진입 시 저장된 모드로 표시
📦 필요한 컴포넌트
<!-- 필수 CSS -->
<link rel="stylesheet" href="css/userOptions.css">
<!-- 필수 스크립트 -->
<script src="js/components/userOptions.js"></script>
<script src="js/components/groupBy.js"></script>
🔧 구현 방법
1. 사용자옵션 모달 초기화
// ========== 사용자옵션 모달 초기화 ==========
function initUserOptionsModal() {
const modalHtml = createUserOptionsModal({
pageId: 'shipmentPlan', // 페이지별 고유 ID (localStorage 키로 사용)
enableGrouping: true, // 그룹화 기능 활성화
groupingColumns: [ // 그룹화 가능한 컬럼 목록
{ key: 'customer', label: '거래처' },
{ key: 'status', label: '상태' },
{ key: 'itemCode', label: '품번' },
{ key: 'material', label: '재질' },
{ key: 'shippingPlanDate', label: '출하계획일' }
],
enableFreezeColumns: false, // 틀고정 비활성화 (선택사항)
enableGridLines: false, // 그리드선 비활성화 (선택사항)
enableViewMode: false, // 보기모드 비활성화 (선택사항)
onSave: () => {
console.log('✅ 사용자 옵션 저장됨');
// 저장된 옵션 즉시 적용
restoreGroupingOptions();
}
});
document.body.insertAdjacentHTML('beforeend', modalHtml);
}
2. 저장된 옵션 복원 함수
// ========== 저장된 그룹화 옵션 복원 ==========
function restoreGroupingOptions() {
if (typeof getGroupByColumn === 'function' && typeof getGroupListView === 'function') {
const savedColumn = getGroupByColumn('shipmentPlan'); // pageId와 동일하게
const savedListView = getGroupListView('shipmentPlan');
console.log('💾 저장된 그룹화 옵션:', { savedColumn, savedListView });
// 저장된 그룹화 컬럼이 있으면 적용
if (savedColumn && groupByInstance) {
setTimeout(() => {
groupByInstance.addGrouping(savedColumn);
// 목록보기 옵션 복원
if (savedListView) {
isGroupCollapsedView = true;
const checkbox = document.getElementById('collapseGroupsCheckbox');
if (checkbox) {
checkbox.checked = true;
}
}
renderShipmentTable(); // 또는 해당 페이지의 테이블 렌더링 함수
console.log('✅ 그룹화 옵션 복원 완료');
}, 300);
}
}
}
3. 그룹 컴포넌트 초기화 시 복원 호출
function initGroupBy() {
try {
// DOM 요소 확인
const selectElement = document.getElementById('groupByField');
const tagsElement = document.getElementById('groupByTags');
if (!selectElement || !tagsElement) {
console.error('그룹화 DOM 요소를 찾을 수 없습니다.');
setTimeout(() => initGroupBy(), 200);
return;
}
groupByInstance = new GroupByComponent({
fields: {
'customer': '거래처',
'status': '상태',
'itemCode': '품번',
'material': '재질',
'shippingPlanDate': '출하계획일'
},
onGroupChange: () => {
// 그룹화 여부에 따라 목록보기 체크박스 표시/숨김
const toggleElement = document.getElementById('groupViewToggle');
if (toggleElement) {
if (groupByInstance.isGrouped()) {
toggleElement.style.display = 'flex';
} else {
toggleElement.style.display = 'none';
isGroupCollapsedView = false;
const checkbox = document.getElementById('collapseGroupsCheckbox');
if (checkbox) checkbox.checked = false;
}
}
renderShipmentTable();
},
selectId: 'groupByField',
tagsId: 'groupByTags'
});
console.log('✅ 그룹 컴포넌트 초기화 완료');
// 저장된 그룹화 옵션 복원
restoreGroupingOptions();
} catch (error) {
console.error('❌ 그룹 컴포넌트 초기화 실패:', error);
}
}
4. DOMContentLoaded 이벤트에서 초기화
document.addEventListener('DOMContentLoaded', function() {
// 검색 섹션 초기화
initSearchSection();
// 테이블 액션바 초기화
initActionBar();
// 그룹 컴포넌트 초기화 (ActionBar 이후에 초기화)
setTimeout(() => {
initGroupBy();
}, 100);
// 데이터 로드 및 렌더링
loadShipmentData();
renderShipmentTable();
// 사용자옵션 모달 초기화
initUserOptionsModal();
});
💾 저장되는 데이터 구조
LocalStorage에 다음과 같이 저장됩니다:
// 그룹화 컬럼
localStorage.setItem('shipmentPlan_groupByColumn', 'customer');
// 목록보기 여부
localStorage.setItem('shipmentPlan_groupListView', 'true');
🔑 주요 함수
userOptions.js에서 제공하는 함수
// 그룹화 컬럼 가져오기
getGroupByColumn(pageId) // 반환: string (컬럼 키)
// 목록보기 모드 가져오기
getGroupListView(pageId) // 반환: boolean
📝 HTML 구조 요구사항
테이블 액션바에 그룹화 UI 포함
leftExtraHtml: `
<select class="groupby-select" id="groupByField" onchange="window.addGroupBy && window.addGroupBy()">
<option value="">⚙️ Group by</option>
<option value="customer">거래처</option>
<option value="status">상태</option>
<option value="itemCode">품번</option>
<option value="material">재질</option>
<option value="shippingPlanDate">출하계획일</option>
</select>
<div class="groupby-tags" id="groupByTags"></div>
<label id="groupViewToggle" style="display: none; align-items: center; gap: 6px; margin-left: 12px; padding: 6px 12px; background: #f3f4f6; border-radius: 6px; cursor: pointer; font-size: 13px; user-select: none;">
<input type="checkbox" id="collapseGroupsCheckbox" onchange="toggleGroupView()" style="cursor: pointer;">
<span>📋 목록보기</span>
</label>
`
사용자옵션 버튼
<button class="btn btn-secondary" onclick="openUserOptions()">⚙️ 사용자옵션</button>
🎨 사용자 경험
저장 과정
- 사용자가 "⚙️ 사용자옵션" 버튼 클릭
- 모달에서 "기타옵션" 탭 선택
- "📊 그룹화 설정" 섹션에서:
- 그룹화 컬럼 선택 (예: 거래처)
- 보기 모드 선택 (펼쳐보기 / 목록보기)
- "💾 저장" 버튼 클릭
- 옵션이 LocalStorage에 저장되고 즉시 적용됨
복원 과정
- 페이지 로드 시
DOMContentLoaded이벤트 발생 initGroupBy()함수에서restoreGroupingOptions()호출- LocalStorage에서 저장된 옵션 읽기
- 그룹화 컬럼이 있으면 자동으로 적용
- 목록보기 모드가 true면 체크박스 체크 및 접힌 상태로 렌더링
🔍 디버깅
콘솔에서 다음과 같은 로그를 확인할 수 있습니다:
✅ 그룹 컴포넌트 초기화 완료
💾 저장된 그룹화 옵션: {savedColumn: "customer", savedListView: true}
✅ 그룹화 옵션 복원 완료
📌 다른 메뉴에 적용하기
1단계: pageId 변경
const modalHtml = createUserOptionsModal({
pageId: 'yourPageId', // 예: 'orderManagement', 'productInfo' 등
enableGrouping: true,
groupingColumns: [
// 해당 페이지의 그룹화 가능한 컬럼 정의
{ key: 'column1', label: '컬럼1' },
{ key: 'column2', label: '컬럼2' }
],
onSave: () => {
restoreGroupingOptions();
}
});
2단계: restoreGroupingOptions에서 pageId 일치시키기
function restoreGroupingOptions() {
const savedColumn = getGroupByColumn('yourPageId'); // pageId와 동일하게
const savedListView = getGroupListView('yourPageId');
// ... 복원 로직
}
3단계: groupByInstance 필드 일치시키기
groupByInstance = new GroupByComponent({
fields: {
'column1': '컬럼1',
'column2': '컬럼2'
// groupingColumns의 key와 일치해야 함
},
// ...
});
⚠️ 주의사항
-
pageId 일관성:
createUserOptionsModal의pageIdgetGroupByColumn의 인자getGroupListView의 인자- 모두 동일한 값이어야 합니다.
-
컬럼 키 일관성:
groupingColumns의keyGroupByComponent의fields키- 테이블 액션바의
<option value=""> - 모두 일치해야 합니다.
-
타이밍:
restoreGroupingOptions는groupByInstance가 생성된 후 호출- 보통 300ms 정도의 딜레이가 안전합니다.
-
전역 변수:
groupByInstance: GroupByComponent 인스턴스isGroupCollapsedView: 목록보기 모드 플래그
🚀 완성된 예시
출하계획관리 페이지(화면개발/출하계획관리.html)를 참고하세요. 완전히 구현된 예시입니다.
📚 관련 파일
화면개발/js/components/userOptions.js- 사용자옵션 컴포넌트화면개발/js/components/groupBy.js- 그룹화 컴포넌트화면개발/css/userOptions.css- 사용자옵션 스타일화면개발/출하계획관리.html- 구현 예시
📞 문의
이 기능에 대한 질문이나 문제가 있으면 AI 어시스턴트에게 문의하세요.