julian/sheeteasyAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

럭키시트 로드 가능, 옵션이 안불러짐

Browse Source
This commit is contained in:
sheetEasy AI Team
2025-06-21 13:58:49 +09:00
parent bc5b316f3c
commit de6b4debac
16 changed files with 4115 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/App.tsx
View File

@@ -2,8 +2,14 @@ import { useAppStore } from "./stores/useAppStore";
import { Card, CardContent } from "./components/ui/card";
import { Button } from "./components/ui/button";
import { FileUpload } from "./components/sheet/FileUpload";
import { SheetViewer } from "./components/sheet/SheetViewer";
function App() {
const { currentFile, sheets, resetApp } = useAppStore();
// 파일이 업로드되어 시트 데이터가 있는 경우와 없는 경우 구분
const hasSheetData = currentFile && sheets && sheets.length > 0;
return (
<div className="min-h-screen bg-gray-50">
{/* 헤더 */}
@@ -14,17 +20,44 @@ function App() {
<h1 className="text-2xl font-bold text-blue-600">sheetEasy AI</h1>
</div>
<div className="flex items-center space-x-4">
<span className="text-sm text-gray-600">
Excel 파일 AI 처리 도구
</span>
{hasSheetData && (
<>
<span className="text-sm text-gray-600">
{currentFile.name}
</span>
<Button
variant="outline"
size="sm"
onClick={resetApp}
className="text-gray-600 hover:text-gray-800"
>
새 파일
</Button>
</>
)}
{!hasSheetData && (
<span className="text-sm text-gray-600">
Excel 파일 AI 처리 도구
</span>
)}
</div>
</div>
</div>
</header>
{/* 메인 콘텐츠 */}
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<FileUpload />
<main className="h-[calc(100vh-4rem)]">
{hasSheetData ? (
// 파일이 업로드된 경우: SheetViewer 표시 (전체화면)
<div className="h-full">
<SheetViewer className="h-full" />
</div>
) : (
// 파일이 업로드되지 않은 경우: FileUpload 표시 (중앙 정렬)
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<FileUpload />
</div>
)}
</main>
</div>
);

516
src/components/sheet/SheetViewer.tsx Normal file
View File

@@ -0,0 +1,516 @@
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<HTMLDivElement>(null);
const luckysheetRef = useRef<any>(null);
const [isInitialized, setIsInitialized] = useState(false);
const [isConverting, setIsConverting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [isContainerReady, setIsContainerReady] = useState(false);
const [librariesLoaded, setLibrariesLoaded] = useState(false);
// 스토어에서 시트 데이터 가져오기
const { sheets, activeSheetId, currentFile, setSelectedRange } =
useAppStore();
/**
* CDN 배포판 + functionlist 직접 초기화 방식
*/
const loadLuckysheetLibrary = useCallback((): Promise<void> => {
return new Promise((resolve, reject) => {
// 이미 로드된 경우
if (
window.luckysheet &&
window.LuckyExcel &&
window.$ &&
librariesLoaded
) {
console.log("📦 모든 라이브러리가 이미 로드됨");
resolve();
return;
}
// console.log("📦 CDN 배포판 + functionlist 직접 초기화 방식...");
const loadResource = (
type: "css" | "js",
src: string,
id: string,
): Promise<void> => {
return new Promise((resourceResolve, resourceReject) => {
// 이미 로드된 리소스 체크
if (document.querySelector(`[data-luckysheet-id="${id}"]`)) {
// console.log(`📦 ${id} 이미 로드됨`);
resourceResolve();
return;
}
if (type === "css") {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = src;
link.setAttribute("data-luckysheet-id", id);
link.onload = () => {
// console.log(`✅ ${id} CSS 로드 완료`);
resourceResolve();
};
link.onerror = (error) => {
// console.error(`❌ ${id} CSS 로드 실패:`, error);
resourceReject(new Error(`${id} CSS 로드 실패`));
};
document.head.appendChild(link);
} else {
const script = document.createElement("script");
script.src = src;
script.setAttribute("data-luckysheet-id", id);
script.onload = () => {
// console.log(`✅ ${id} JS 로드 완료`);
resourceResolve();
};
script.onerror = (error) => {
// console.error(`❌ ${id} JS 로드 실패:`, error);
resourceReject(new Error(`${id} JS 로드 실패`));
};
document.head.appendChild(script);
}
});
};
// CDN 배포판 로딩 + functionlist 직접 초기화
const loadSequence = async () => {
try {
// 1. jQuery (Luckysheet 의존성)
if (!window.$) {
await loadResource(
"js",
"https://code.jquery.com/jquery-3.6.0.min.js",
"jquery",
);
}
// 2. CSS 로드 (CDN 방식 - 공식 문서 순서 준수)
await loadResource(
"css",
"https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css",
"plugins-css",
);
await loadResource(
"css",
"https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css",
"plugins-main-css",
);
await loadResource(
"css",
"https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css",
"luckysheet-css",
);
await loadResource(
"css",
"https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css",
"iconfont-css",
);
// 3. Plugin JS 먼저 로드 (functionlist 초기화 우선)
await loadResource(
"js",
"https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js",
"plugin-js",
);
// 👉 Plugin.js 로드 완료 후 바로 다음 단계로 진행
console.log("✅ Plugin.js 로드 완료");
// 4. LuckyExcel (Excel 파일 처리용 - 공식 문서 방식)
if (!window.LuckyExcel) {
await loadResource(
"js",
"https://cdn.jsdelivr.net/npm/luckyexcel/dist/luckyexcel.umd.js",
"luckyexcel",
);
}
// 5. Luckysheet 메인 (functionlist 준비 후 - 공식 문서 방식)
if (!window.luckysheet) {
await loadResource(
"js",
"https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js",
"luckysheet",
);
}
// 라이브러리 로드 후 검증
// console.log("🔍 라이브러리 로드 후 검증 중...");
// NOTE: plugin.js 가 실제 functionlist 를 채웠으므로 별도 지연 대기 불필요
// 필수 객체 검증
const validationResults = {
jquery: !!window.$,
luckyExcel: !!window.LuckyExcel,
luckysheet: !!window.luckysheet,
luckysheetCreate: !!(
window.luckysheet &&
typeof window.luckysheet.create === "function"
),
luckysheetDestroy: !!(
window.luckysheet &&
typeof window.luckysheet.destroy === "function"
),
};
// console.log("🔍 라이브러리 검증 결과:", validationResults);
if (
!validationResults.luckysheet ||
!validationResults.luckysheetCreate
) {
throw new Error(
"Luckysheet 객체가 올바르게 초기화되지 않았습니다.",
);
}
// 🚀 초기화 없이 바로 라이브러리 검증
console.log("🚀 라이브러리 로드 완료, 검증 중...");
setLibrariesLoaded(true);
// console.log("✅ CDN 배포판 + functionlist 초기화 완료");
resolve();
} catch (error) {
// console.error("❌ 라이브러리 로딩 실패:", error);
reject(error);
}
};
loadSequence();
});
}, [librariesLoaded]);
/**
* 참고 내용 기반: 올바른 데이터 구조로 Luckysheet 초기화
*/
const convertXLSXToLuckysheet = useCallback(
async (xlsxBuffer: ArrayBuffer, fileName: string) => {
if (!containerRef.current) {
console.warn("⚠️ 컨테이너가 없습니다.");
return;
}
try {
setIsConverting(true);
setError(null);
// console.log(
// "🔄 참고 내용 기반: XLSX → LuckyExcel → Luckysheet 변환 시작...",
// );
// 라이브러리 로드 확인
await loadLuckysheetLibrary();
// 기존 인스턴스 정리 (참고 내용 권장사항)
// console.log("🧹 기존 Luckysheet 인스턴스 정리...");
try {
if (
window.luckysheet &&
typeof window.luckysheet.destroy === "function"
) {
window.luckysheet.destroy();
// console.log("✅ 기존 인스턴스 destroy 완료");
}
} catch (destroyError) {
// console.warn("⚠️ destroy 중 오류 (무시됨):", destroyError);
}
// 컨테이너 초기화
if (containerRef.current) {
containerRef.current.innerHTML = "";
// console.log("✅ 컨테이너 초기화 완료");
}
luckysheetRef.current = null;
// console.log("🍀 LuckyExcel.transformExcelToLucky 호출...");
// fileProcessor에서 이미 변환된 데이터를 사용하여 직접 생성
try {
console.log("🍀 이미 변환된 시트 데이터 사용:", currentFile?.name);
// 기존 인스턴스 정리
if (
window.luckysheet &&
typeof window.luckysheet.destroy === "function"
) {
window.luckysheet.destroy();
}
// store에서 sheets 데이터를 가져와서 luckysheet 형식으로 변환
const sheets = useAppStore.getState().sheets;
const luckysheetData = sheets.map((sheet, index) => ({
name: sheet.name,
index: index.toString(),
status: 1,
order: index,
celldata: sheet.config?.data?.[0]?.celldata || [],
row: sheet.config?.data?.[0]?.row || 50,
column: sheet.config?.data?.[0]?.column || 26,
}));
window.luckysheet.create({
container: containerRef.current?.id || "luckysheet-container",
showinfobar: false,
showtoolbar: false,
data: luckysheetData,
});
console.log("🎉 Luckysheet 생성 완료!");
setIsInitialized(true);
setIsConverting(false);
setError(null);
luckysheetRef.current = window.luckysheet;
} catch (createError) {
console.error("❌ Luckysheet 생성 실패:", createError);
setError(
`Luckysheet 생성 실패: ${createError instanceof Error ? createError.message : "알 수 없는 오류"}`,
);
setIsInitialized(false);
setIsConverting(false);
}
} catch (conversionError) {
console.error("❌ 변환 프로세스 실패:", conversionError);
setError(
`변환 프로세스에 실패했습니다: ${
conversionError instanceof Error
? conversionError.message
: String(conversionError)
}`,
);
setIsConverting(false);
setIsInitialized(false);
}
},
[loadLuckysheetLibrary, setSelectedRange],
);
/**
* DOM 컨테이너 준비 상태 체크 - useLayoutEffect로 동기적 체크
*/
useLayoutEffect(() => {
// console.log("🔍 useLayoutEffect: DOM 컨테이너 체크 시작...");
if (containerRef.current) {
// console.log("✅ DOM 컨테이너 준비 완료:", containerRef.current.id);
setIsContainerReady(true);
} else {
// console.warn("⚠️ useLayoutEffect: DOM 컨테이너가 아직 준비되지 않음");
}
}, []);
/**
* DOM 컨테이너 준비 상태 재체크 (fallback)
*/
useEffect(() => {
if (!isContainerReady) {
// console.log("🔄 useEffect: DOM 컨테이너 재체크...");
const timer = setTimeout(() => {
if (containerRef.current && !isContainerReady) {
// console.log("✅ useEffect: DOM 컨테이너 지연 준비 완료");
setIsContainerReady(true);
}
}, 100);
return () => clearTimeout(timer);
}
}, [isContainerReady]);
/**
* 컴포넌트 마운트 시 초기화 - 중복 실행 방지
*/
useEffect(() => {
if (
currentFile?.xlsxBuffer &&
isContainerReady &&
containerRef.current &&
!isInitialized &&
!isConverting
) {
console.log("🔄 변환된 XLSX 감지, Luckysheet 초기화 시작...", {
fileName: currentFile.name,
bufferSize: currentFile.xlsxBuffer.byteLength,
containerId: containerRef.current.id,
});
// 중복 실행 방지를 위해 즉시 상태 변경
setIsConverting(true);
// 변환된 XLSX ArrayBuffer를 사용하여 직접 변환
convertXLSXToLuckysheet(currentFile.xlsxBuffer, currentFile.name);
} else if (currentFile && !currentFile.xlsxBuffer) {
setError("파일 변환 데이터가 없습니다. 파일을 다시 업로드해주세요.");
}
}, [
currentFile?.xlsxBuffer,
currentFile?.name,
isContainerReady,
isInitialized,
isConverting,
]);
/**
* 컴포넌트 언마운트 시 정리
*/
useEffect(() => {
return () => {
if (luckysheetRef.current && window.luckysheet) {
// console.log("🧹 컴포넌트 언마운트: Luckysheet 정리 중...");
try {
window.luckysheet.destroy();
} catch (error) {
// console.warn("⚠️ Luckysheet 정리 중 오류:", error);
}
}
};
}, []);
/**
* 윈도우 리사이즈 처리
*/
useEffect(() => {
const handleResize = () => {
if (luckysheetRef.current && window.luckysheet) {
try {
window.luckysheet.resize();
} catch (error) {
// console.warn("⚠️ Luckysheet 리사이즈 중 오류:", error);
}
}
};
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return (
<div
className={`w-full h-full min-h-[70vh] ${className || ""}`}
style={{ position: "relative" }}
>
{/* Luckysheet 컨테이너 - 항상 렌더링 */}
<div
ref={containerRef}
id="luckysheet-container"
className="w-full h-full"
style={{
minHeight: "70vh",
border: "1px solid #e5e7eb",
borderRadius: "8px",
overflow: "hidden",
}}
/>
{/* 에러 상태 오버레이 */}
{error && (
<div className="absolute inset-0 flex items-center justify-center bg-red-50 border border-red-200 rounded-lg">
<div className="text-center p-6">
<div className="text-red-600 text-lg font-semibold mb-2">
시트 로드 오류
</div>
<div className="text-red-500 text-sm mb-4">{error}</div>
<button
onClick={() => {
setError(null);
setIsInitialized(false);
setIsConverting(false);
if (currentFile?.xlsxBuffer) {
convertXLSXToLuckysheet(
currentFile.xlsxBuffer,
currentFile.name,
);
}
}}
className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
>
다시 시도
</button>
</div>
</div>
)}
{/* 로딩 상태 오버레이 */}
{!error &&
(isConverting || !isInitialized) &&
currentFile?.xlsxBuffer && (
<div className="absolute inset-0 flex items-center justify-center bg-blue-50 border border-blue-200 rounded-lg">
<div className="text-center p-6">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<div className="text-blue-600 text-lg font-semibold mb-2">
{isConverting ? "XLSX 변환 중..." : "시트 초기화 중..."}
</div>
<div className="text-blue-500 text-sm">
{isConverting
? "변환된 XLSX를 Luckysheet로 처리하고 있습니다."
: "잠시만 기다려주세요."}
</div>
</div>
</div>
)}
{/* 데이터 없음 상태 오버레이 */}
{!error && !currentFile?.xlsxBuffer && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 border border-gray-200 rounded-lg">
<div className="text-center p-6">
<div className="text-gray-500 text-lg font-semibold mb-2">
표시할 시트가 없습니다
</div>
<div className="text-gray-400 text-sm">
Excel 파일을 업로드해주세요.
</div>
</div>
</div>
)}
{/* 시트 정보 표시 (개발용) */}
{process.env.NODE_ENV === "development" && (
<div className="absolute top-2 right-2 bg-black bg-opacity-75 text-white text-xs p-2 rounded z-10">
<div>파일: {currentFile?.name}</div>
<div>
XLSX 버퍼:{" "}
{currentFile?.xlsxBuffer
? `${currentFile.xlsxBuffer.byteLength} bytes`
: "없음"}
</div>
<div>변환 중: {isConverting ? "예" : "아니오"}</div>
<div>초기화: {isInitialized ? "완료" : "대기"}</div>
<div>컨테이너 준비: {isContainerReady ? "완료" : "대기"}</div>
</div>
)}
</div>
);
}

838
src/components/sheet/SheetViewer.tsx.bak Normal file
View File

@@ -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<HTMLDivElement>(null);
const luckysheetRef = useRef<any>(null);
const [isInitialized, setIsInitialized] = useState(false);
const [isConverting, setIsConverting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [isContainerReady, setIsContainerReady] = useState(false);
const [librariesLoaded, setLibrariesLoaded] = useState(false);
// 스토어에서 시트 데이터 가져오기
const { sheets, activeSheetId, currentFile, setSelectedRange } =
useAppStore();
/**
* CDN 배포판 + functionlist 직접 초기화 방식
*/
const loadLuckysheetLibrary = useCallback((): Promise<void> => {
return new Promise((resolve, reject) => {
// 이미 로드된 경우
if (
window.luckysheet &&
window.LuckyExcel &&
window.$ &&
librariesLoaded
) {
console.log("📦 모든 라이브러리가 이미 로드됨");
resolve();
return;
}
// console.log("📦 CDN 배포판 + functionlist 직접 초기화 방식...");
const loadResource = (
type: "css" | "js",
src: string,
id: string,
): Promise<void> => {
return new Promise((resourceResolve, resourceReject) => {
// 이미 로드된 리소스 체크
if (document.querySelector(`[data-luckysheet-id="${id}"]`)) {
// console.log(`📦 ${id} 이미 로드됨`);
resourceResolve();
return;
}
if (type === "css") {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = src;
link.setAttribute("data-luckysheet-id", id);
link.onload = () => {
// console.log(`✅ ${id} CSS 로드 완료`);
resourceResolve();
};
link.onerror = (error) => {
// console.error(`❌ ${id} CSS 로드 실패:`, error);
resourceReject(new Error(`${id} CSS 로드 실패`));
};
document.head.appendChild(link);
} else {
const script = document.createElement("script");
script.src = src;
script.setAttribute("data-luckysheet-id", id);
script.onload = () => {
// console.log(`✅ ${id} JS 로드 완료`);
resourceResolve();
};
script.onerror = (error) => {
// console.error(`❌ ${id} JS 로드 실패:`, error);
resourceReject(new Error(`${id} JS 로드 실패`));
};
document.head.appendChild(script);
}
});
};
// CDN 배포판 로딩 + functionlist 직접 초기화
const loadSequence = async () => {
try {
// 1. jQuery (Luckysheet 의존성)
if (!window.$) {
await loadResource(
"js",
"https://code.jquery.com/jquery-3.6.0.min.js",
"jquery",
);
}
// 2. CSS 로드 (빌드된 파일들)
await loadResource(
"css",
"/luckysheet/dist/plugins/css/pluginsCss.css",
"plugins-css",
);
await loadResource(
"css",
"/luckysheet/dist/plugins/plugins.css",
"plugins-main-css",
);
await loadResource(
"css",
"/luckysheet/dist/css/luckysheet.css",
"luckysheet-css",
);
await loadResource(
"css",
"/luckysheet/dist/assets/iconfont/iconfont.css",
"iconfont-css",
);
// 3. Plugin JS 먼저 로드 (functionlist 초기화 우선)
await loadResource(
"js",
"/luckysheet/dist/plugins/js/plugin.js",
"plugin-js",
);
// 👉 plugin.js 로드 후 실제 functionlist 가 채워졌는지 polling 으로 확인 (최대 3초)
const waitForFunctionlistReady = (
timeout = 3000,
interval = 50,
): Promise<void> => {
return new Promise((res, rej) => {
let waited = 0;
const timer = setInterval(() => {
if (window.Store?.functionlist?.length) {
clearInterval(timer);
res();
} else if ((waited += interval) >= timeout) {
clearInterval(timer);
rej(new Error("functionlist 초기화 시간 초과"));
}
}, interval);
});
};
await waitForFunctionlistReady();
// 4. LuckyExcel (Excel 파일 처리용)
if (!window.LuckyExcel) {
await loadResource(
"js",
"/luckysheet/dist/luckyexcel.umd.js",
"luckyexcel",
);
}
// 5. Luckysheet 메인 (functionlist 준비 후)
if (!window.luckysheet) {
await loadResource(
"js",
"/luckysheet/dist/luckysheet.umd.js",
"luckysheet",
);
}
// 라이브러리 로드 후 검증
// console.log("🔍 라이브러리 로드 후 검증 중...");
// NOTE: plugin.js 가 실제 functionlist 를 채웠으므로 별도 지연 대기 불필요
// 필수 객체 검증
const validationResults = {
jquery: !!window.$,
luckyExcel: !!window.LuckyExcel,
luckysheet: !!window.luckysheet,
luckysheetCreate: !!(
window.luckysheet &&
typeof window.luckysheet.create === "function"
),
luckysheetDestroy: !!(
window.luckysheet &&
typeof window.luckysheet.destroy === "function"
),
};
// console.log("🔍 라이브러리 검증 결과:", validationResults);
if (
!validationResults.luckysheet ||
!validationResults.luckysheetCreate
) {
throw new Error(
"Luckysheet 객체가 올바르게 초기화되지 않았습니다.",
);
}
// 🔧 강력한 functionlist 초기화 (메모리 해결책 적용)
// console.log("🔧 강력한 functionlist 및 모든 필수 객체 초기화 중...");
try {
// 1. Store 객체 강제 생성
if (!window.Store) {
window.Store = {};
}
// 2. functionlist 다중 레벨 초기화
if (!window.Store.functionlist) {
window.Store.functionlist = [];
}
// 3. luckysheet_function 다중 레벨 초기화
if (!window.luckysheet_function) {
window.luckysheet_function = {};
}
if (!window.Store.luckysheet_function) {
window.Store.luckysheet_function = {};
}
// 4. Luckysheet 내부에서 사용하는 추가 functionlist 객체들 초기화
if (window.luckysheet && !window.luckysheet.functionlist) {
window.luckysheet.functionlist = [];
}
// 5. 글로벌 functionlist 초기화 (다양한 참조 경로 대응)
if (!window.functionlist) {
window.functionlist = [];
}
// 6. Store 내부 구조 완전 초기화
if (!window.Store.config) {
window.Store.config = {};
}
if (!window.Store.luckysheetfile) {
window.Store.luckysheetfile = [];
}
if (!window.Store.currentSheetIndex) {
window.Store.currentSheetIndex = 0;
}
// 7. Luckysheet 모듈별 초기화 확인
if (window.luckysheet) {
// 함수 관련 모듈 초기화
if (!window.luckysheet.formula) {
window.luckysheet.formula = {};
}
if (!window.luckysheet.formulaCache) {
window.luckysheet.formulaCache = {};
}
if (!window.luckysheet.formulaObjects) {
window.luckysheet.formulaObjects = {};
}
}
// console.log("✅ 강력한 functionlist 및 모든 필수 객체 초기화 완료");
} catch (functionError) {
// console.warn(
// "⚠️ 강력한 functionlist 초기화 중 오류 (무시됨):",
// functionError,
// );
}
setLibrariesLoaded(true);
// console.log("✅ CDN 배포판 + functionlist 초기화 완료");
resolve();
} catch (error) {
// console.error("❌ 라이브러리 로딩 실패:", error);
reject(error);
}
};
loadSequence();
});
}, [librariesLoaded]);
/**
* 참고 내용 기반: 올바른 데이터 구조로 Luckysheet 초기화
*/
const convertXLSXToLuckysheet = useCallback(
async (xlsxBuffer: ArrayBuffer, fileName: string) => {
if (!containerRef.current) {
console.warn("⚠️ 컨테이너가 없습니다.");
return;
}
try {
setIsConverting(true);
setError(null);
// console.log(
// "🔄 참고 내용 기반: XLSX → LuckyExcel → Luckysheet 변환 시작...",
// );
// 라이브러리 로드 확인
await loadLuckysheetLibrary();
// 기존 인스턴스 정리 (참고 내용 권장사항)
// console.log("🧹 기존 Luckysheet 인스턴스 정리...");
try {
if (
window.luckysheet &&
typeof window.luckysheet.destroy === "function"
) {
window.luckysheet.destroy();
// console.log("✅ 기존 인스턴스 destroy 완료");
}
} catch (destroyError) {
// console.warn("⚠️ destroy 중 오류 (무시됨):", destroyError);
}
// 컨테이너 초기화
if (containerRef.current) {
containerRef.current.innerHTML = "";
// console.log("✅ 컨테이너 초기화 완료");
}
luckysheetRef.current = null;
// console.log("🍀 LuckyExcel.transformExcelToLucky 호출...");
// LuckyExcel 변환 (참고 내용의 블로그 포스트 방식)
window.LuckyExcel.transformExcelToLucky(
xlsxBuffer,
// 성공 콜백 - 변환 완료 후에만 Luckysheet 초기화
(exportJson: any, luckysheetfile: any) => {
try {
// console.log("✅ LuckyExcel 변환 완료:", {
// hasExportJson: !!exportJson,
// hasSheets: !!exportJson?.sheets,
// sheetsCount: exportJson?.sheets?.length || 0,
// sheetsStructure:
// exportJson?.sheets?.map((sheet: any, index: number) => ({
// index,
// name: sheet?.name,
// hasData: !!sheet?.data,
// dataLength: Array.isArray(sheet?.data)
// ? sheet.data.length
// : 0,
// })) || [],
// });
// 공식 LuckyExcel 방식: 기본 검증만 수행 (과도한 변환 방지)
if (
!exportJson ||
!exportJson.sheets ||
!Array.isArray(exportJson.sheets)
) {
throw new Error(
"LuckyExcel 변환 결과가 유효하지 않습니다: sheets 배열이 없음",
);
}
if (exportJson.sheets.length === 0) {
throw new Error("변환된 시트가 없습니다.");
}
// console.log("✅ LuckyExcel 변환 결과 검증 완료:", {
// sheetsCount: exportJson.sheets.length,
// hasInfo: !!exportJson.info,
// infoName: exportJson.info?.name,
// infoCreator: exportJson.info?.creator,
// });
// console.log(
// "🎯 functionlist 초기화 완료: Luckysheet 초기화 시작...",
// );
// 메모리 해결책: 최종 완전한 functionlist 및 모든 Luckysheet 내부 객체 초기화
try {
// Level 1: Store 객체 완전 초기화
if (!window.Store) window.Store = {};
if (!window.Store.functionlist) window.Store.functionlist = [];
if (!window.Store.luckysheet_function)
window.Store.luckysheet_function = {};
if (!window.Store.config) window.Store.config = {};
if (!window.Store.luckysheetfile)
window.Store.luckysheetfile = [];
// Level 2: 글로벌 function 객체들 완전 초기화
if (!window.luckysheet_function)
window.luckysheet_function = {};
if (!window.functionlist) window.functionlist = [];
// Level 3: Luckysheet 내부 깊은 레벨 초기화
if (window.luckysheet) {
// 함수 관련 깊은 객체들
if (!window.luckysheet.functionlist)
window.luckysheet.functionlist = [];
if (!window.luckysheet.formula)
window.luckysheet.formula = {};
if (!window.luckysheet.formulaCache)
window.luckysheet.formulaCache = {};
if (!window.luckysheet.formulaObjects)
window.luckysheet.formulaObjects = {};
// Store 레퍼런스 초기화
if (!window.luckysheet.Store)
window.luckysheet.Store = window.Store;
if (!window.luckysheet.luckysheetfile)
window.luckysheet.luckysheetfile = [];
// 내부 모듈들 초기화
if (!window.luckysheet.menuButton)
window.luckysheet.menuButton = {};
if (!window.luckysheet.server) window.luckysheet.server = {};
if (!window.luckysheet.selection)
window.luckysheet.selection = {};
}
// Level 4: 추가적인 깊은 레벨 객체들 (Luckysheet 내부에서 사용할 수 있는)
if (!window.luckysheetConfigsetting)
window.luckysheetConfigsetting = {};
if (!window.luckysheetPostil) window.luckysheetPostil = {};
if (!window.Store.visibledatarow)
window.Store.visibledatarow = [];
if (!window.Store.visibledatacolumn)
window.Store.visibledatacolumn = [];
if (!window.Store.defaultcollen)
window.Store.defaultcollen = 73;
if (!window.Store.defaultrowlen)
window.Store.defaultrowlen = 19;
console.log("✅ 완전한 Luckysheet 내부 객체 초기화 완료");
// 극한의 방법: Luckysheet 내부 코드 직접 패치 (임시)
if (
window.luckysheet &&
typeof window.luckysheet.create === "function"
) {
// Luckysheet 내부에서 사용하는 모든 가능한 functionlist 경로 강제 생성
const originalCreate = window.luckysheet.create;
window.luckysheet.create = function (options: any) {
try {
// 생성 직전 모든 functionlist 경로 재검증
if (!window.Store) window.Store = {};
if (!window.Store.functionlist)
window.Store.functionlist = [];
if (!this.functionlist) this.functionlist = [];
if (!this.Store) this.Store = window.Store;
if (!this.Store.functionlist)
this.Store.functionlist = [];
// 원본 함수 호출
return originalCreate.call(this, options);
} catch (error) {
console.error(
"Luckysheet create 패치된 함수에서 오류:",
error,
);
throw error;
}
};
console.log("🔧 Luckysheet.create 함수 패치 완료");
}
} catch (finalInitError) {
console.warn(
"⚠️ 완전한 functionlist 초기화 중 오류:",
finalInitError,
);
}
// 공식 LuckyExcel 방식: exportJson.sheets를 직접 사용
const luckysheetOptions = {
container: containerRef.current?.id || "luckysheet-container",
title: exportJson.info?.name || fileName || "Sheet Easy AI",
lang: "ko",
data: exportJson.sheets, // 공식 방식: LuckyExcel 결과를 직접 사용
// userInfo도 공식 예시대로 설정
userInfo: exportJson.info?.creator || "Sheet Easy AI User",
// UI 설정 (모든 기능 활성화)
showinfobar: false,
showtoolbar: true, // 툴바 활성화
showsheetbar: true,
showstatisticBar: false,
showConfigWindowResize: true,
// 편집 기능 활성화
allowCopy: true,
allowEdit: true,
enableAddRow: true, // 행/열 추가 활성화
enableAddCol: true,
// 함수 기능 활성화
allowUpdate: true,
enableAddBackTop: true,
showFormulaBar: true, // 수식바 활성화
// 이벤트 핸들러 (모든 기능)
hook: {
cellClick: (cell: any, position: any, sheetFile: any) => {
// console.log("🖱️ 셀 클릭:", { cell, position, sheetFile });
if (
position &&
typeof position.r === "number" &&
typeof position.c === "number"
) {
setSelectedRange({
range: {
startRow: position.r,
startCol: position.c,
endRow: position.r,
endCol: position.c,
},
sheetId: sheetFile?.index || "0",
});
}
},
sheetActivate: (
index: number,
isPivotInitial: boolean,
isInitialLoad: boolean,
) => {
// console.log("📋 시트 활성화:", {
// index,
// isPivotInitial,
// isInitialLoad,
// });
if (exportJson.sheets[index]) {
useAppStore.getState().setActiveSheetId(`sheet_${index}`);
}
},
updated: (operate: any) => {
// console.log("🔄 시트 업데이트:", operate);
},
},
};
// === 상세 디버깅 정보 ===
console.log("=== LuckyExcel → Luckysheet 디버깅 정보 ===");
console.log("📋 exportJson 구조:", {
hasExportJson: !!exportJson,
hasInfo: !!exportJson?.info,
hasSheets: !!exportJson?.sheets,
sheetsCount: exportJson?.sheets?.length,
infoKeys: Object.keys(exportJson?.info || {}),
firstSheetKeys: Object.keys(exportJson?.sheets?.[0] || {}),
});
console.log("🔧 Functionlist 상태 상세 검사:", {
windowStore: !!window.Store,
storeFunctionlist: !!window.Store?.functionlist,
storeFunctionlistLength: window.Store?.functionlist?.length,
luckysheetFunction: !!window.luckysheet_function,
globalFunctionlist: !!window.functionlist,
globalFunctionlistLength: window.functionlist?.length,
luckysheetStoreFunctionlist:
!!window.luckysheet?.Store?.functionlist,
luckysheetOwnFunctionlist: !!window.luckysheet?.functionlist,
allWindowKeys: Object.keys(window).filter((key) =>
key.includes("function"),
),
allStoreKeys: Object.keys(window.Store || {}),
allLuckysheetKeys: Object.keys(window.luckysheet || {}).slice(
0,
10,
),
});
console.log("🎯 Luckysheet 객체:", {
hasLuckysheet: !!window.luckysheet,
hasCreate: typeof window.luckysheet?.create === "function",
methodsCount: Object.keys(window.luckysheet || {}).length,
});
console.log("=== 디버깅 정보 끝 ===");
// Luckysheet 생성
window.luckysheet.create(luckysheetOptions);
luckysheetRef.current = window.luckysheet;
setIsInitialized(true);
setIsConverting(false);
// console.log(
// "✅ functionlist 초기화 완료: Luckysheet 초기화 완료!",
// );
} catch (initError) {
console.error("❌ Luckysheet 초기화 실패:", initError);
setError(
`시트 초기화에 실패했습니다: ${
initError instanceof Error
? initError.message
: String(initError)
}`,
);
setIsInitialized(false);
setIsConverting(false);
}
},
// 오류 콜백
(error: any) => {
console.error("❌ LuckyExcel 변환 실패:", error);
setError(
`XLSX 변환에 실패했습니다: ${
error instanceof Error ? error.message : String(error)
}`,
);
setIsConverting(false);
setIsInitialized(false);
},
);
} catch (conversionError) {
console.error("❌ 변환 프로세스 실패:", conversionError);
setError(
`변환 프로세스에 실패했습니다: ${
conversionError instanceof Error
? conversionError.message
: String(conversionError)
}`,
);
setIsConverting(false);
setIsInitialized(false);
}
},
[loadLuckysheetLibrary, setSelectedRange],
);
/**
* DOM 컨테이너 준비 상태 체크 - useLayoutEffect로 동기적 체크
*/
useLayoutEffect(() => {
// console.log("🔍 useLayoutEffect: DOM 컨테이너 체크 시작...");
if (containerRef.current) {
// console.log("✅ DOM 컨테이너 준비 완료:", containerRef.current.id);
setIsContainerReady(true);
} else {
// console.warn("⚠️ useLayoutEffect: DOM 컨테이너가 아직 준비되지 않음");
}
}, []);
/**
* DOM 컨테이너 준비 상태 재체크 (fallback)
*/
useEffect(() => {
if (!isContainerReady) {
// console.log("🔄 useEffect: DOM 컨테이너 재체크...");
const timer = setTimeout(() => {
if (containerRef.current && !isContainerReady) {
// console.log("✅ useEffect: DOM 컨테이너 지연 준비 완료");
setIsContainerReady(true);
}
}, 100);
return () => clearTimeout(timer);
}
}, [isContainerReady]);
/**
* 컴포넌트 마운트 시 초기화 - 블로그 포스트 방식 적용
*/
useEffect(() => {
// console.log("🔍 useEffect 실행 조건 체크:", {
// hasCurrentFile: !!currentFile,
// hasXlsxBuffer: !!currentFile?.xlsxBuffer,
// hasContainer: !!containerRef.current,
// isContainerReady,
// currentFileName: currentFile?.name,
// bufferSize: currentFile?.xlsxBuffer?.byteLength,
// });
if (currentFile?.xlsxBuffer && isContainerReady && containerRef.current) {
// console.log("🔄 변환된 XLSX 감지, LuckyExcel → Luckysheet 시작...", {
// fileName: currentFile.name,
// bufferSize: currentFile.xlsxBuffer.byteLength,
// containerId: containerRef.current.id,
// });
// 변환된 XLSX ArrayBuffer를 사용하여 직접 변환 (블로그 포스트 방식)
convertXLSXToLuckysheet(currentFile.xlsxBuffer, currentFile.name);
} else if (currentFile && !currentFile.xlsxBuffer) {
// console.warn(
// "⚠️ currentFile은 있지만 xlsxBuffer가 없습니다:",
// currentFile,
// );
setError("파일 변환 데이터가 없습니다. 파일을 다시 업로드해주세요.");
} else if (!currentFile) {
// console.log("ℹ️ currentFile이 없습니다. 파일을 업로드해주세요.");
} else if (currentFile?.xlsxBuffer && !isContainerReady) {
// console.log("⏳ DOM 컨테이너 준비 대기 중...");
}
}, [
currentFile?.xlsxBuffer,
currentFile?.name,
isContainerReady,
convertXLSXToLuckysheet,
]);
/**
* 컴포넌트 언마운트 시 정리
*/
useEffect(() => {
return () => {
if (luckysheetRef.current && window.luckysheet) {
// console.log("🧹 컴포넌트 언마운트: Luckysheet 정리 중...");
try {
window.luckysheet.destroy();
} catch (error) {
// console.warn("⚠️ Luckysheet 정리 중 오류:", error);
}
}
};
}, []);
/**
* 윈도우 리사이즈 처리
*/
useEffect(() => {
const handleResize = () => {
if (luckysheetRef.current && window.luckysheet) {
try {
window.luckysheet.resize();
} catch (error) {
// console.warn("⚠️ Luckysheet 리사이즈 중 오류:", error);
}
}
};
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return (
<div
className={`w-full h-full min-h-[70vh] ${className || ""}`}
style={{ position: "relative" }}
>
{/* Luckysheet 컨테이너 - 항상 렌더링 */}
<div
ref={containerRef}
id="luckysheet-container"
className="w-full h-full"
style={{
minHeight: "70vh",
border: "1px solid #e5e7eb",
borderRadius: "8px",
overflow: "hidden",
}}
/>
{/* 에러 상태 오버레이 */}
{error && (
<div className="absolute inset-0 flex items-center justify-center bg-red-50 border border-red-200 rounded-lg">
<div className="text-center p-6">
<div className="text-red-600 text-lg font-semibold mb-2">
시트 로드 오류
</div>
<div className="text-red-500 text-sm mb-4">{error}</div>
<button
onClick={() => {
setError(null);
setIsInitialized(false);
setIsConverting(false);
if (currentFile?.xlsxBuffer) {
convertXLSXToLuckysheet(
currentFile.xlsxBuffer,
currentFile.name,
);
}
}}
className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
>
다시 시도
</button>
</div>
</div>
)}
{/* 로딩 상태 오버레이 */}
{!error &&
(isConverting || !isInitialized) &&
currentFile?.xlsxBuffer && (
<div className="absolute inset-0 flex items-center justify-center bg-blue-50 border border-blue-200 rounded-lg">
<div className="text-center p-6">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
<div className="text-blue-600 text-lg font-semibold mb-2">
{isConverting ? "XLSX 변환 중..." : "시트 초기화 중..."}
</div>
<div className="text-blue-500 text-sm">
{isConverting
? "변환된 XLSX를 Luckysheet로 처리하고 있습니다."
: "잠시만 기다려주세요."}
</div>
</div>
</div>
)}
{/* 데이터 없음 상태 오버레이 */}
{!error && !currentFile?.xlsxBuffer && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-50 border border-gray-200 rounded-lg">
<div className="text-center p-6">
<div className="text-gray-500 text-lg font-semibold mb-2">
표시할 시트가 없습니다
</div>
<div className="text-gray-400 text-sm">
Excel 파일을 업로드해주세요.
</div>
</div>
</div>
)}
{/* 시트 정보 표시 (개발용) */}
{process.env.NODE_ENV === "development" && (
<div className="absolute top-2 right-2 bg-black bg-opacity-75 text-white text-xs p-2 rounded z-10">
<div>파일: {currentFile?.name}</div>
<div>
XLSX 버퍼:{" "}
{currentFile?.xlsxBuffer
? `${currentFile.xlsxBuffer.byteLength} bytes`
: "없음"}
</div>
<div>변환 중: {isConverting ? "예" : "아니오"}</div>
<div>초기화: {isInitialized ? "완료" : "대기"}</div>
<div>컨테이너 준비: {isContainerReady ? "완료" : "대기"}</div>
</div>
)}
</div>
);
}

402
src/components/sheet/__tests__/SheetViewer.test.tsx Normal file
View File

@@ -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(<SheetViewer />);
expect(screen.getByText("표시할 시트가 없습니다")).toBeInTheDocument();
expect(
screen.getByText("Excel 파일을 업로드해주세요."),
).toBeInTheDocument();
});
it("시트 데이터가 있을 때 로딩 상태를 표시한다", () => {
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
render(<SheetViewer />);
expect(screen.getByText("시트 로딩 중...")).toBeInTheDocument();
expect(screen.getByText("잠시만 기다려주세요.")).toBeInTheDocument();
});
it("Luckysheet 컨테이너가 올바르게 렌더링된다", () => {
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
render(<SheetViewer />);
const container = document.getElementById("luckysheet-container");
expect(container).toBeInTheDocument();
expect(container).toHaveClass("w-full", "h-full");
});
});
describe("Luckysheet 초기화", () => {
it("시트 데이터가 변경되면 Luckysheet를 초기화한다", async () => {
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
render(<SheetViewer />);
await waitFor(() => {
expect(mockLuckysheet.create).toHaveBeenCalled();
});
// create 호출 시 전달된 설정 확인
const createCall = mockLuckysheet.create.mock.calls[0];
expect(createCall).toBeDefined();
const config = createCall[0];
expect(config.container).toBe("luckysheet-container");
expect(config.title).toBe("test.xlsx");
expect(config.lang).toBe("ko");
expect(config.data).toHaveLength(1);
});
it("기존 Luckysheet 인스턴스가 있으면 제거한다", async () => {
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
const { rerender } = render(<SheetViewer />);
await waitFor(() => {
expect(mockLuckysheet.create).toHaveBeenCalledTimes(1);
});
// 시트 데이터 변경
const newSheetData: SheetData[] = [
{
...mockSheetData[0],
name: "NewSheet",
},
];
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: newSheetData,
currentFile: { name: "new.xlsx", size: 1000, uploadedAt: new Date() },
});
rerender(<SheetViewer />);
await waitFor(() => {
expect(mockLuckysheet.destroy).toHaveBeenCalled();
expect(mockLuckysheet.create).toHaveBeenCalledTimes(2);
});
});
});
describe("에러 처리", () => {
it("Luckysheet 초기화 실패 시 에러 메시지를 표시한다", async () => {
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
// Luckysheet.create에서 에러 발생 시뮬레이션
mockLuckysheet.create.mockImplementation(() => {
throw new Error("Luckysheet 초기화 실패");
});
render(<SheetViewer />);
await waitFor(() => {
expect(screen.getByText("시트 로드 오류")).toBeInTheDocument();
expect(
screen.getByText(/시트 초기화에 실패했습니다/),
).toBeInTheDocument();
});
// 다시 시도 버튼 확인
const retryButton = screen.getByRole("button", { name: "다시 시도" });
expect(retryButton).toBeInTheDocument();
});
it("다시 시도 버튼을 클릭하면 초기화를 재시도한다", async () => {
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
// 첫 번째 시도에서 실패
mockLuckysheet.create.mockImplementationOnce(() => {
throw new Error("첫 번째 실패");
});
render(<SheetViewer />);
await waitFor(() => {
expect(screen.getByText("시트 로드 오류")).toBeInTheDocument();
});
// 두 번째 시도에서 성공하도록 설정
mockLuckysheet.create.mockImplementationOnce(() => {
// 성공
});
const retryButton = screen.getByRole("button", { name: "다시 시도" });
retryButton.click();
await waitFor(() => {
expect(mockLuckysheet.create).toHaveBeenCalledTimes(2);
});
});
});
describe("이벤트 핸들링", () => {
it("셀 클릭 시 선택된 범위를 스토어에 저장한다", async () => {
const mockSetSelectedRange = vi.fn();
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
setSelectedRange: mockSetSelectedRange,
});
render(<SheetViewer />);
await waitFor(() => {
expect(mockLuckysheet.create).toHaveBeenCalled();
});
// create 호출 시 전달된 hook 확인
const createCall = mockLuckysheet.create.mock.calls[0];
const config = createCall[0];
// cellClick 핸들러 시뮬레이션
const cellClickHandler = config.hook.cellClick;
expect(cellClickHandler).toBeDefined();
const mockCell = {};
const mockPosition = { r: 1, c: 2 };
const mockSheetFile = { index: "0" };
cellClickHandler(mockCell, mockPosition, mockSheetFile);
expect(mockSetSelectedRange).toHaveBeenCalledWith({
range: {
startRow: 1,
startCol: 2,
endRow: 1,
endCol: 2,
},
sheetId: "0",
});
});
it("시트 활성화 시 활성 시트 ID를 업데이트한다", async () => {
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
// setActiveSheetId를 spy로 설정
const setActiveSheetIdSpy = vi.fn();
useAppStore.getState = vi.fn().mockReturnValue({
setActiveSheetId: setActiveSheetIdSpy,
});
render(<SheetViewer />);
await waitFor(() => {
expect(mockLuckysheet.create).toHaveBeenCalled();
});
// create 호출 시 전달된 hook 확인
const createCall = mockLuckysheet.create.mock.calls[0];
const config = createCall[0];
// sheetActivate 핸들러 시뮬레이션
const sheetActivateHandler = config.hook.sheetActivate;
expect(sheetActivateHandler).toBeDefined();
sheetActivateHandler(0, false, false);
expect(setActiveSheetIdSpy).toHaveBeenCalledWith("sheet_0");
});
});
describe("컴포넌트 생명주기", () => {
it("컴포넌트 언마운트 시 Luckysheet를 정리한다", async () => {
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
const { unmount } = render(<SheetViewer />);
await waitFor(() => {
expect(mockLuckysheet.create).toHaveBeenCalled();
});
unmount();
expect(mockLuckysheet.destroy).toHaveBeenCalled();
});
it("윈도우 리사이즈 시 Luckysheet 리사이즈를 호출한다", async () => {
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
render(<SheetViewer />);
await waitFor(() => {
expect(mockLuckysheet.create).toHaveBeenCalled();
});
// 윈도우 리사이즈 이벤트 시뮬레이션
window.dispatchEvent(new Event("resize"));
expect(mockLuckysheet.resize).toHaveBeenCalled();
});
});
describe("개발 모드 정보", () => {
it("개발 모드에서 시트 정보를 표시한다", () => {
const originalEnv = process.env.NODE_ENV;
process.env.NODE_ENV = "development";
mockUseAppStore.mockReturnValue({
...defaultStoreState,
sheets: mockSheetData,
activeSheetId: "sheet_0",
currentFile: { name: "test.xlsx", size: 1000, uploadedAt: new Date() },
});
render(<SheetViewer />);
expect(screen.getByText("시트 개수: 1")).toBeInTheDocument();
expect(screen.getByText("활성 시트: sheet_0")).toBeInTheDocument();
process.env.NODE_ENV = originalEnv;
});
});
});

9
src/stores/useAppStore.ts
View File

@@ -18,6 +18,7 @@ interface AppState {
name: string;
size: number;
uploadedAt: Date;
xlsxBuffer?: ArrayBuffer; // 변환된 XLSX ArrayBuffer
} | null;
sheets: SheetData[];
activeSheetId: string | null;
@@ -41,7 +42,12 @@ interface AppState {
setAuthenticated: (authenticated: boolean) => void;
setCurrentFile: (
file: { name: string; size: number; uploadedAt: Date } | null,
file: {
name: string;
size: number;
uploadedAt: Date;
xlsxBuffer?: ArrayBuffer;
} | null,
) => void;
setSheets: (sheets: SheetData[]) => void;
setActiveSheetId: (sheetId: string | null) => void;
@@ -126,6 +132,7 @@ export const useAppStore = create<AppState>()(
name: result.fileName || "Unknown",
size: result.fileSize || 0,
uploadedAt: new Date(),
xlsxBuffer: result.xlsxBuffer,
},
sheets: result.data,
activeSheetId: result.data[0]?.id || null,

3
src/types/sheet.ts
View File

@@ -5,6 +5,7 @@ export interface SheetData {
name: string;
data: any[][]; // Luckysheet 데이터 형식
config?: LuckysheetConfig;
xlsxBuffer?: ArrayBuffer; // 변환된 XLSX ArrayBuffer
}
export interface LuckysheetConfig {
@@ -30,6 +31,8 @@ export interface FileUploadResult {
error?: string;
fileName?: string;
fileSize?: number;
file?: File;
xlsxBuffer?: ArrayBuffer; // 변환된 XLSX ArrayBuffer
}
export interface ExportOptions {

368
src/utils/fileProcessor.ts
View File

@@ -419,7 +419,9 @@ function convertSheetJSToLuckyExcel(workbook: any): SheetData[] {
/**
* SheetJS로 파일을 읽고 XLSX로 변환한 뒤 LuckyExcel로 처리
*/
async function processFileWithSheetJSToXLSX(file: File): Promise<SheetData[]> {
async function processFileWithSheetJSToXLSX(
file: File,
): Promise<{ sheets: SheetData[]; xlsxBuffer: ArrayBuffer }> {
console.log("📊 SheetJS → XLSX → LuckyExcel 파이프라인 시작...");
const arrayBuffer = await file.arrayBuffer();
@@ -632,194 +634,206 @@ async function processFileWithSheetJSToXLSX(file: File): Promise<SheetData[]> {
console.log("🚀 LuckyExcel 호출 시작...");
// Promise를 사용한 LuckyExcel 처리
return new Promise<SheetData[]>((resolve, reject) => {
try {
// LuckyExcel API는 (arrayBuffer, successCallback, errorCallback) 형태로 호출
// 공식 문서: LuckyExcel.transformExcelToLucky(file, successCallback, errorCallback)
(LuckyExcel as any).transformExcelToLucky(
xlsxArrayBuffer,
// 성공 콜백 함수 (두 번째 매개변수)
(exportJson: any, luckysheetfile: any) => {
try {
console.log("🍀 =================================");
console.log("🍀 LuckyExcel 변환 결과 상세 정보:");
console.log("🍀 =================================");
console.log("🍀 원본 파일명:", xlsxFileName);
console.log("🍀 exportJson 존재:", !!exportJson);
console.log("🍀 exportJson 타입:", typeof exportJson);
return new Promise<{ sheets: SheetData[]; xlsxBuffer: ArrayBuffer }>(
(resolve, reject) => {
try {
// LuckyExcel API는 (arrayBuffer, successCallback, errorCallback) 형태로 호출
// 공식 문서: LuckyExcel.transformExcelToLucky(file, successCallback, errorCallback)
(LuckyExcel as any).transformExcelToLucky(
xlsxArrayBuffer,
// 성공 콜백 함수 (두 번째 매개변수)
(exportJson: any, luckysheetfile: any) => {
try {
console.log("🍀 =================================");
console.log("🍀 LuckyExcel 변환 결과 상세 정보:");
console.log("🍀 =================================");
console.log("🍀 원본 파일명:", xlsxFileName);
console.log("🍀 exportJson 존재:", !!exportJson);
console.log("🍀 exportJson 타입:", typeof exportJson);
if (exportJson) {
console.log("🍀 exportJson 전체 구조:", exportJson);
console.log("🍀 exportJson.sheets 존재:", !!exportJson.sheets);
console.log(
"🍀 exportJson.sheets 타입:",
typeof exportJson.sheets,
);
console.log(
"🍀 exportJson.sheets 배열 여부:",
Array.isArray(exportJson.sheets),
);
console.log("🍀 시트 개수:", exportJson?.sheets?.length || 0);
if (exportJson) {
console.log("🍀 exportJson 전체 구조:", exportJson);
console.log("🍀 exportJson.sheets 존재:", !!exportJson.sheets);
console.log(
"🍀 exportJson.sheets 타입:",
typeof exportJson.sheets,
);
console.log(
"🍀 exportJson.sheets 배열 여부:",
Array.isArray(exportJson.sheets),
);
console.log("🍀 시트 개수:", exportJson?.sheets?.length || 0);
if (exportJson.sheets && Array.isArray(exportJson.sheets)) {
exportJson.sheets.forEach((sheet: any, index: number) => {
console.log(`🍀 시트 ${index + 1}:`, {
name: sheet.name,
row: sheet.row,
column: sheet.column,
celldata길이: sheet.celldata?.length || 0,
키목록: Object.keys(sheet),
if (exportJson.sheets && Array.isArray(exportJson.sheets)) {
exportJson.sheets.forEach((sheet: any, index: number) => {
console.log(`🍀 시트 ${index + 1}:`, {
name: sheet.name,
row: sheet.row,
column: sheet.column,
celldata길이: sheet.celldata?.length || 0,
키목록: Object.keys(sheet),
});
});
}
}
console.log("🍀 luckysheetfile 존재:", !!luckysheetfile);
console.log("🍀 luckysheetfile 타입:", typeof luckysheetfile);
if (luckysheetfile) {
console.log("🍀 luckysheetfile 구조:", luckysheetfile);
}
console.log("🍀 =================================");
console.log("🔍 LuckyExcel 변환 결과:", {
hasExportJson: !!exportJson,
hasSheets: !!exportJson?.sheets,
sheetsCount: exportJson?.sheets?.length || 0,
});
// 데이터 유효성 검사
if (
!exportJson ||
!exportJson.sheets ||
!Array.isArray(exportJson.sheets) ||
exportJson.sheets.length === 0
) {
console.warn(
"⚠️ LuckyExcel 결과가 유효하지 않습니다. SheetJS 방식으로 대체 처리합니다.",
);
// LuckyExcel 실패 시 SheetJS 데이터를 직접 변환
const fallbackSheets = convertSheetJSToLuckyExcel(workbook);
resolve({
sheets: fallbackSheets,
xlsxBuffer: xlsxArrayBuffer,
});
return;
}
// LuckyExcel 변환이 성공한 경우 - SheetData 형식으로 변환
const sheets: SheetData[] = exportJson.sheets.map(
(luckySheet: any, index: number) => {
const sheetName = luckySheet.name || `Sheet${index + 1}`;
const maxRow = luckySheet.row || 0;
const maxCol = luckySheet.column || 0;
// 2D 배열 초기화
const data: any[][] = [];
for (let r = 0; r < maxRow; r++) {
data[r] = new Array(maxCol).fill("");
}
// celldata에서 데이터 추출
if (
luckySheet.celldata &&
Array.isArray(luckySheet.celldata)
) {
luckySheet.celldata.forEach((cell: any) => {
if (
cell &&
typeof cell.r === "number" &&
typeof cell.c === "number"
) {
const row = cell.r;
const col = cell.c;
if (row < maxRow && col < maxCol && cell.v) {
const cellValue = cell.v.v || cell.v.m || "";
data[row][col] = String(cellValue).trim();
}
}
});
}
// 빈 데이터 처리
if (data.length === 0) {
data.push([""]);
}
return {
id: `sheet_${index}`,
name: sheetName,
data: data,
xlsxBuffer: xlsxArrayBuffer, // 변환된 XLSX ArrayBuffer 포함
config: {
container: `luckysheet_${index}`,
title: sheetName,
lang: "ko",
data: [
{
name: sheetName,
index: index.toString(),
celldata: luckySheet.celldata || [],
status: 1,
order: index,
row: maxRow,
column: maxCol,
},
],
options: {
showtoolbar: true,
showinfobar: false,
showsheetbar: true,
showstatisticBar: false,
allowCopy: true,
allowEdit: true,
enableAddRow: true,
enableAddCol: true,
},
},
};
},
);
console.log("✅ LuckyExcel 처리 성공:", sheets.length, "개 시트");
resolve({ sheets, xlsxBuffer: xlsxArrayBuffer });
} catch (processError) {
console.error("❌ LuckyExcel 후처리 중 오류:", processError);
// LuckyExcel 후처리 실패 시 SheetJS 방식으로 대체
try {
console.log("🔄 SheetJS 방식으로 대체 처리...");
const fallbackSheets = convertSheetJSToLuckyExcel(workbook);
resolve({
sheets: fallbackSheets,
xlsxBuffer: xlsxArrayBuffer,
});
} catch (fallbackError) {
console.error("❌ SheetJS 대체 처리도 실패:", fallbackError);
reject(fallbackError);
}
}
},
// 오류 콜백 함수 (세 번째 매개변수)
(error: any) => {
console.error("❌ LuckyExcel 변환 오류:", error);
console.log("🍀 luckysheetfile 존재:", !!luckysheetfile);
console.log("🍀 luckysheetfile 타입:", typeof luckysheetfile);
if (luckysheetfile) {
console.log("🍀 luckysheetfile 구조:", luckysheetfile);
}
console.log("🍀 =================================");
console.log("🔍 LuckyExcel 변환 결과:", {
hasExportJson: !!exportJson,
hasSheets: !!exportJson?.sheets,
sheetsCount: exportJson?.sheets?.length || 0,
});
// 데이터 유효성 검사
if (
!exportJson ||
!exportJson.sheets ||
!Array.isArray(exportJson.sheets) ||
exportJson.sheets.length === 0
) {
console.warn(
"⚠️ LuckyExcel 결과가 유효하지 않습니다. SheetJS 방식으로 대체 처리합니다.",
);
// LuckyExcel 실패 시 SheetJS 데이터를 직접 변환
const fallbackSheets = convertSheetJSToLuckyExcel(workbook);
resolve(fallbackSheets);
return;
}
// LuckyExcel 변환이 성공한 경우 - SheetData 형식으로 변환
const sheets: SheetData[] = exportJson.sheets.map(
(luckySheet: any, index: number) => {
const sheetName = luckySheet.name || `Sheet${index + 1}`;
const maxRow = luckySheet.row || 0;
const maxCol = luckySheet.column || 0;
// 2D 배열 초기화
const data: any[][] = [];
for (let r = 0; r < maxRow; r++) {
data[r] = new Array(maxCol).fill("");
}
// celldata에서 데이터 추출
if (luckySheet.celldata && Array.isArray(luckySheet.celldata)) {
luckySheet.celldata.forEach((cell: any) => {
if (
cell &&
typeof cell.r === "number" &&
typeof cell.c === "number"
) {
const row = cell.r;
const col = cell.c;
if (row < maxRow && col < maxCol && cell.v) {
const cellValue = cell.v.v || cell.v.m || "";
data[row][col] = String(cellValue).trim();
}
}
});
}
// 빈 데이터 처리
if (data.length === 0) {
data.push([""]);
}
return {
id: `sheet_${index}`,
name: sheetName,
data: data,
config: {
container: `luckysheet_${index}`,
title: sheetName,
lang: "ko",
data: [
{
name: sheetName,
index: index.toString(),
celldata: luckySheet.celldata || [],
status: 1,
order: index,
row: maxRow,
column: maxCol,
},
],
options: {
showtoolbar: true,
showinfobar: false,
showsheetbar: true,
showstatisticBar: false,
allowCopy: true,
allowEdit: true,
enableAddRow: true,
enableAddCol: true,
},
},
};
},
);
console.log("✅ LuckyExcel 처리 성공:", sheets.length, "개 시트");
resolve(sheets);
} catch (processError) {
console.error("❌ LuckyExcel 후처리 중 오류:", processError);
// LuckyExcel 후처리 실패 시 SheetJS 방식으로 대체
// LuckyExcel 오류 시 SheetJS 방식으로 대체
try {
console.log("🔄 SheetJS 방식으로 대체 처리...");
const fallbackSheets = convertSheetJSToLuckyExcel(workbook);
resolve(fallbackSheets);
resolve({ sheets: fallbackSheets, xlsxBuffer: xlsxArrayBuffer });
} catch (fallbackError) {
console.error("❌ SheetJS 대체 처리도 실패:", fallbackError);
reject(fallbackError);
}
}
},
// 오류 콜백 함수 (세 번째 매개변수)
(error: any) => {
console.error("❌ LuckyExcel 변환 오류:", error);
},
);
} catch (luckyError) {
console.error("❌ LuckyExcel 호출 중 오류:", luckyError);
// LuckyExcel 오류 시 SheetJS 방식으로 대체
try {
console.log("🔄 SheetJS 방식으로 대체 처리...");
const fallbackSheets = convertSheetJSToLuckyExcel(workbook);
resolve(fallbackSheets);
} catch (fallbackError) {
console.error("❌ SheetJS 대체 처리도 실패:", fallbackError);
reject(fallbackError);
}
},
);
} catch (luckyError) {
console.error("❌ LuckyExcel 호출 중 오류:", luckyError);
// LuckyExcel 호출 실패 시 SheetJS 방식으로 대체
try {
console.log("🔄 SheetJS 방식으로 대체 처리...");
const fallbackSheets = convertSheetJSToLuckyExcel(workbook);
resolve(fallbackSheets);
} catch (fallbackError) {
console.error("❌ SheetJS 대체 처리도 실패:", fallbackError);
reject(fallbackError);
// LuckyExcel 호출 실패 시 SheetJS 방식으로 대체
try {
console.log("🔄 SheetJS 방식으로 대체 처리...");
const fallbackSheets = convertSheetJSToLuckyExcel(workbook);
resolve({ sheets: fallbackSheets, xlsxBuffer: xlsxArrayBuffer });
} catch (fallbackError) {
console.error("❌ SheetJS 대체 처리도 실패:", fallbackError);
reject(fallbackError);
}
}
}
});
},
);
}
/**
@@ -837,6 +851,7 @@ export async function processExcelFile(file: File): Promise<FileUploadResult> {
error: errorMessage,
fileName: file.name,
fileSize: file.size,
file: file,
};
}
@@ -853,6 +868,7 @@ export async function processExcelFile(file: File): Promise<FileUploadResult> {
"지원되지 않는 파일 형식입니다. .csv, .xls, .xlsx 파일을 사용해주세요.",
fileName: file.name,
fileSize: file.size,
file: file,
};
}
@@ -861,7 +877,7 @@ export async function processExcelFile(file: File): Promise<FileUploadResult> {
);
// 통합된 처리 방식: SheetJS → XLSX → LuckyExcel
const sheets = await processFileWithSheetJSToXLSX(file);
const { sheets, xlsxBuffer } = await processFileWithSheetJSToXLSX(file);
if (!sheets || sheets.length === 0) {
return {
@@ -869,6 +885,7 @@ export async function processExcelFile(file: File): Promise<FileUploadResult> {
error: "파일에서 유효한 시트를 찾을 수 없습니다.",
fileName: file.name,
fileSize: file.size,
file: file,
};
}
@@ -879,6 +896,8 @@ export async function processExcelFile(file: File): Promise<FileUploadResult> {
data: sheets,
fileName: file.name,
fileSize: file.size,
file: file,
xlsxBuffer,
};
} catch (error) {
console.error("❌ 파일 처리 중 오류 발생:", error);
@@ -912,6 +931,7 @@ export async function processExcelFile(file: File): Promise<FileUploadResult> {
error: errorMessage,
fileName: file.name,
fileSize: file.size,
file: file,
};
}
}

1
src/utils/luckysheetApi.ts Normal file
View File

@@ -0,0 +1 @@

120
src/vite-env.d.ts vendored
View File

@@ -61,3 +61,123 @@ declare module "luckyexcel" {
LuckyExcelResult,
};
}
/**
* Luckysheet 타입 선언
*/
declare module "luckysheet" {
interface LuckysheetConfig {
container?: string;
title?: string;
lang?: string;
data?: any[];
myFolderUrl?: string;
plugins?: string[];
fontList?: Array<{
fontFamily: string;
name: string;
}>;
options?: {
showtoolbar?: boolean;
showinfobar?: boolean;
showsheetbar?: boolean;
showstatisticBar?: boolean;
allowCopy?: boolean;
allowEdit?: boolean;
enableAddRow?: boolean;
enableAddCol?: boolean;
sheetRightClickConfig?: {
delete?: boolean;
copy?: boolean;
rename?: boolean;
color?: boolean;
hide?: boolean;
move?: boolean;
};
cellRightClickConfig?: {
copy?: boolean;
copyAs?: boolean;
paste?: boolean;
insertRow?: boolean;
insertColumn?: boolean;
deleteRow?: boolean;
deleteColumn?: boolean;
deleteCell?: boolean;
hideRow?: boolean;
hideColumn?: boolean;
rowHeight?: boolean;
columnWidth?: boolean;
clear?: boolean;
matrix?: boolean;
sort?: boolean;
filter?: boolean;
chart?: boolean;
image?: boolean;
link?: boolean;
data?: boolean;
cellFormat?: boolean;
};
};
hook?: {
cellMousedown?: (cell: any, postion: any, sheetFile: any) => void;
cellClick?: (cell: any, postion: any, sheetFile: any) => void;
sheetActivate?: (
index: number,
isPivotInitial: boolean,
isInitialLoad: boolean,
) => void;
updated?: (operate: any) => void;
};
}
interface LuckysheetAPI {
create: (config: LuckysheetConfig) => void;
destroy: () => void;
refreshFormula: () => void;
setSheetData: (data: any[]) => void;
getAllSheets: () => any[];
getSheet: (index?: number) => any;
setActiveSheet: (index: number) => void;
getCellValue: (r: number, c: number, data?: any) => any;
setCellValue: (r: number, c: number, d: any, isRefresh?: boolean) => void;
getRange: () => any[];
setRange: (range: any[]) => void;
scroll: (settings: { scrollLeft?: number; scrollTop?: number }) => void;
resize: () => void;
undo: () => void;
redo: () => void;
copy: () => void;
paste: () => void;
cut: () => void;
insertRow: (index?: number) => void;
insertColumn: (index?: number) => void;
deleteRow: (start: number, end?: number) => void;
deleteColumn: (start: number, end?: number) => void;
hideRow: (rowIndexes: number[]) => void;
showRow: (rowIndexes: number[]) => void;
hideColumn: (columnIndexes: number[]) => void;
showColumn: (columnIndexes: number[]) => void;
setRowHeight: (rowInfo: { [key: number]: number }) => void;
setColumnWidth: (columnInfo: { [key: number]: number }) => void;
getRowHeight: (rowIndexes: number[]) => { [key: number]: number };
getColumnWidth: (columnIndexes: number[]) => { [key: number]: number };
setWorkbookName: (name: string) => void;
getWorkbookName: () => string;
exitEditMode: () => void;
enterEditMode: (cell?: any) => void;
updateCell: (r: number, c: number, value: any) => void;
refreshCanvas: () => void;
}
const luckysheet: LuckysheetAPI;
export = luckysheet;
}
/**
* Luckysheet 전역 변수 타입 선언
*/
declare global {
interface Window {
luckysheet: any;
}
}