+
+ ) : (
+ // 파일이 업로드되지 않은 경우: FileUpload 표시 (중앙 정렬)
+
+
+ )}
+ {/* Luckysheet 컨테이너 - 항상 렌더링 */}
+
+
+ {/* 에러 상태 오버레이 */}
+ {error && (
+
+ );
+}
diff --git a/src/components/sheet/SheetViewer.tsx.bak b/src/components/sheet/SheetViewer.tsx.bak
new file mode 100644
index 0000000..8dfe67c
--- /dev/null
+++ b/src/components/sheet/SheetViewer.tsx.bak
@@ -0,0 +1,838 @@
+import React, {
+ useEffect,
+ useLayoutEffect,
+ useRef,
+ useCallback,
+ useState,
+} from "react";
+import { useAppStore } from "../../stores/useAppStore";
+import type { SheetData } from "../../types/sheet";
+
+// Window 타입 확장
+declare global {
+ interface Window {
+ luckysheet: any;
+ LuckyExcel: any;
+ $: any; // jQuery
+ Store: any; // Luckysheet Store
+ luckysheet_function: any; // Luckysheet function list
+ functionlist: any[]; // 글로벌 functionlist
+ luckysheetConfigsetting: any; // Luckysheet 설정 객체
+ luckysheetPostil: any; // Luckysheet 포스틸 객체
+ }
+}
+
+interface SheetViewerProps {
+ className?: string;
+}
+
+/**
+ * Luckysheet 시트 뷰어 컴포넌트
+ * - 참고 내용 기반: 완전한 라이브러리 로딩 순서 적용
+ * - functionlist 오류 방지를 위한 완전한 초기화
+ * - 필수 플러그인과 CSS 포함
+ */
+export function SheetViewer({ className }: SheetViewerProps) {
+ const containerRef = useRef
+
+ )}
+
+ {/* 로딩 상태 오버레이 */}
+ {!error &&
+ (isConverting || !isInitialized) &&
+ currentFile?.xlsxBuffer && (
+
+
+
+ 시트 로드 오류
+
+ {error}
+
+
+
+ )}
+
+ {/* 데이터 없음 상태 오버레이 */}
+ {!error && !currentFile?.xlsxBuffer && (
+
+
+
+
+ {isConverting ? "XLSX 변환 중..." : "시트 초기화 중..."}
+
+
+ {isConverting
+ ? "변환된 XLSX를 Luckysheet로 처리하고 있습니다."
+ : "잠시만 기다려주세요."}
+
+
+
+ )}
+
+ {/* 시트 정보 표시 (개발용) */}
+ {process.env.NODE_ENV === "development" && (
+
+
+
+ 표시할 시트가 없습니다
+
+
+ Excel 파일을 업로드해주세요.
+
+
+
+ )}
+ 파일: {currentFile?.name}
+
+ XLSX 버퍼:{" "}
+ {currentFile?.xlsxBuffer
+ ? `${currentFile.xlsxBuffer.byteLength} bytes`
+ : "없음"}
+
+ 변환 중: {isConverting ? "예" : "아니오"}
+ 초기화: {isInitialized ? "완료" : "대기"}
+ 컨테이너 준비: {isContainerReady ? "완료" : "대기"}
+
+ {/* Luckysheet 컨테이너 - 항상 렌더링 */}
+
+
+ {/* 에러 상태 오버레이 */}
+ {error && (
+
+ );
+}
diff --git a/src/components/sheet/__tests__/SheetViewer.test.tsx b/src/components/sheet/__tests__/SheetViewer.test.tsx
new file mode 100644
index 0000000..e58719c
--- /dev/null
+++ b/src/components/sheet/__tests__/SheetViewer.test.tsx
@@ -0,0 +1,402 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
+import { SheetViewer } from "../SheetViewer";
+import { useAppStore } from "../../../stores/useAppStore";
+import type { SheetData } from "../../../types/sheet";
+
+// Mock dependencies
+vi.mock("../../../stores/useAppStore");
+
+// Luckysheet 모킹
+const mockLuckysheet = {
+ create: vi.fn(),
+ destroy: vi.fn(),
+ resize: vi.fn(),
+ getSheet: vi.fn(),
+ getAllSheets: vi.fn(),
+ setActiveSheet: vi.fn(),
+};
+
+// Window.luckysheet 모킹
+Object.defineProperty(window, "luckysheet", {
+ value: mockLuckysheet,
+ writable: true,
+});
+
+// useAppStore 모킹 타입
+const mockUseAppStore = vi.mocked(useAppStore);
+
+// 기본 스토어 상태
+const defaultStoreState = {
+ sheets: [],
+ activeSheetId: null,
+ currentFile: null,
+ setSelectedRange: vi.fn(),
+ isLoading: false,
+ error: null,
+ setLoading: vi.fn(),
+ setError: vi.fn(),
+ uploadFile: vi.fn(),
+ clearFileUploadErrors: vi.fn(),
+ resetApp: vi.fn(),
+};
+
+// 테스트용 시트 데이터
+const mockSheetData: SheetData[] = [
+ {
+ id: "sheet_0",
+ name: "Sheet1",
+ data: [
+ ["A1", "B1", "C1"],
+ ["A2", "B2", "C2"],
+ ],
+ config: {
+ container: "luckysheet_0",
+ title: "Sheet1",
+ lang: "ko",
+ data: [
+ {
+ name: "Sheet1",
+ index: "0",
+ celldata: [
+ {
+ r: 0,
+ c: 0,
+ v: { v: "A1", m: "A1", ct: { fa: "General", t: "g" } },
+ },
+ {
+ r: 0,
+ c: 1,
+ v: { v: "B1", m: "B1", ct: { fa: "General", t: "g" } },
+ },
+ ],
+ status: 1,
+ order: 0,
+ row: 2,
+ column: 3,
+ },
+ ],
+ options: {
+ showtoolbar: true,
+ showinfobar: false,
+ showsheetbar: true,
+ showstatisticBar: false,
+ allowCopy: true,
+ allowEdit: true,
+ enableAddRow: true,
+ enableAddCol: true,
+ },
+ },
+ },
+];
+
+describe("SheetViewer", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mockUseAppStore.mockReturnValue(defaultStoreState);
+ });
+
+ afterEach(() => {
+ // DOM 정리
+ document.head.innerHTML = "";
+ });
+
+ describe("초기 렌더링", () => {
+ it("시트 데이터가 없을 때 적절한 메시지를 표시한다", () => {
+ mockUseAppStore.mockReturnValue({
+ ...defaultStoreState,
+ sheets: [],
+ });
+
+ render(
+
+ )}
+
+ {/* 로딩 상태 오버레이 */}
+ {!error &&
+ (isConverting || !isInitialized) &&
+ currentFile?.xlsxBuffer && (
+
+
+
+ 시트 로드 오류
+
+ {error}
+
+
+
+ )}
+
+ {/* 데이터 없음 상태 오버레이 */}
+ {!error && !currentFile?.xlsxBuffer && (
+
+
+
+
+ {isConverting ? "XLSX 변환 중..." : "시트 초기화 중..."}
+
+
+ {isConverting
+ ? "변환된 XLSX를 Luckysheet로 처리하고 있습니다."
+ : "잠시만 기다려주세요."}
+
+
+
+ )}
+
+ {/* 시트 정보 표시 (개발용) */}
+ {process.env.NODE_ENV === "development" && (
+
+
+
+ 표시할 시트가 없습니다
+
+
+ Excel 파일을 업로드해주세요.
+
+
+
+ )}
+ 파일: {currentFile?.name}
+
+ XLSX 버퍼:{" "}
+ {currentFile?.xlsxBuffer
+ ? `${currentFile.xlsxBuffer.byteLength} bytes`
+ : "없음"}
+
+ 변환 중: {isConverting ? "예" : "아니오"}
+ 초기화: {isInitialized ? "완료" : "대기"}
+ 컨테이너 준비: {isContainerReady ? "완료" : "대기"}
+