92 lines
3.3 KiB
JavaScript
92 lines
3.3 KiB
JavaScript
/**
|
|
* state.js
|
|
* 앱의 전역 상태 관리 및 세션 스토리지 동기화
|
|
*/
|
|
|
|
import products from '../data/index.js';
|
|
import { STATUS_META } from './config.js';
|
|
|
|
// ==========================================================================
|
|
// 1. 원본 데이터 정의
|
|
// ==========================================================================
|
|
|
|
/** 외부 파일에서 로드한 전체 상품 데이터 */
|
|
export const productsData = products;
|
|
|
|
// ==========================================================================
|
|
// 2. 앱 전역 상태 (Global State)
|
|
// ==========================================================================
|
|
|
|
export const state = {
|
|
/** 현재 페이지 번호 */
|
|
currentPage: 1,
|
|
|
|
/** 현재 선택된 카테고리 필터 (기본값: 'All') */
|
|
activeCategories: new Set(['All']),
|
|
|
|
/** 필터링이 완료되어 실제로 화면에 보여질 상품 배열 */
|
|
visibleProducts: [],
|
|
|
|
/** 검색창에 입력된 키워드 */
|
|
searchKeyword: '',
|
|
|
|
/** 화면 보기 모드 ('grid' | 'table') */
|
|
viewMode: 'grid',
|
|
|
|
tagMode: 'AND', // 태그 필터링 모드 ('AND' 또는 'OR')
|
|
|
|
/** 장바구니/내보내기 등을 위해 선택된 상품 ID 세트 (세션 스토리지 복원) */
|
|
selectedIds: new Set(JSON.parse(sessionStorage.getItem('selectedProductIds') || '[]')),
|
|
|
|
/** 현재 활성화된 태그 필터 (교집합 필터링용) */
|
|
activeTags: new Set([]),
|
|
|
|
/** * 현재 활성화된 상품 상태 필터 (판매중, 예약중 등)
|
|
* config.js의 STATUS_META 설정을 기반으로 초기값 자동 생성
|
|
*/
|
|
activeStatuses: new Set(
|
|
Object.entries(STATUS_META)
|
|
.filter(([_, meta]) => meta.isSystemVisible && meta.isDefaultActive)
|
|
.map(([status]) => status),
|
|
),
|
|
};
|
|
|
|
// ==========================================================================
|
|
// 3. 상태 영속성 관리 (Persistence)
|
|
// ==========================================================================
|
|
|
|
/**
|
|
* 선택된 상품 ID 목록을 세션 스토리지에 저장
|
|
* 체크박스 조작 등 상태가 변경될 때마다 호출하여 새로고침 시에도 데이터 유지
|
|
*/
|
|
export function saveSelection() {
|
|
const idsArray = Array.from(state.selectedIds);
|
|
sessionStorage.setItem('selectedProductIds', JSON.stringify(idsArray));
|
|
}
|
|
|
|
window.toggleViewMode = function (mode) {
|
|
// 1. 이미 해당 모드라면 실행 중단
|
|
if (state.viewMode === mode) return;
|
|
|
|
// 2. 상태 변경
|
|
state.viewMode = mode;
|
|
|
|
// 3. 버튼 UI 업데이트 (활성화된 아이콘 강조)
|
|
const gridBtn = document.getElementById('view-grid-btn'); // HTML의 그리드 아이콘 ID
|
|
const listBtn = document.getElementById('view-list-btn'); // HTML의 리스트 아이콘 ID
|
|
|
|
if (gridBtn && listBtn) {
|
|
if (mode === 'grid') {
|
|
gridBtn.classList.add('text-primary', 'dark:text-white'); // 강조색
|
|
listBtn.classList.remove('text-primary', 'dark:text-white');
|
|
listBtn.classList.add('text-slate-400'); // 비활성색
|
|
} else {
|
|
listBtn.classList.add('text-primary', 'dark:text-white');
|
|
gridBtn.classList.remove('text-primary', 'dark:text-white');
|
|
gridBtn.classList.add('text-slate-400');
|
|
}
|
|
}
|
|
|
|
// 4. 즉시 화면 다시 그리기
|
|
renderProducts(state.currentPage);
|
|
}; |