xlsx 파일 주입 완료
This commit is contained in:
sheetEasy AI Team
326
.cursor/rules/univer-initialization.mdc
Normal file
326
.cursor/rules/univer-initialization.mdc
Normal file
@@ -0,0 +1,326 @@
|
||||
---
|
||||
description:
|
||||
globs:
|
||||
alwaysApply: false
|
||||
---
|
||||
# Univer CE 초기화 및 인스턴스 관리 규칙
|
||||
|
||||
## **핵심 원칙**
|
||||
- **단일 인스턴스**: 컴포넌트당 하나의 Univer 인스턴스만 유지
|
||||
- **중복 방지**: 플러그인 등록과 초기화 중복 실행 방지
|
||||
- **적절한 정리**: 메모리 누수 방지를 위한 dispose 패턴
|
||||
|
||||
## **초기화 패턴**
|
||||
|
||||
### ✅ DO: 안전한 초기화
|
||||
```typescript
|
||||
// 인스턴스 존재 확인 후 초기화
|
||||
useEffect(() => {
|
||||
if (!univerRef.current) {
|
||||
initializeUniver();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 처리 중 상태 확인으로 중복 방지
|
||||
const processFile = useCallback(async (file: File) => {
|
||||
if (isProcessing) {
|
||||
console.log("이미 파일 처리 중입니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsProcessing(true);
|
||||
// ... 파일 처리 로직
|
||||
}, [isProcessing]);
|
||||
```
|
||||
|
||||
### ❌ DON'T: 중복 초기화 유발
|
||||
```typescript
|
||||
// 조건 없는 초기화 (중복 실행 위험)
|
||||
useEffect(() => {
|
||||
initializeUniver(); // 매번 실행됨
|
||||
}, []);
|
||||
|
||||
// 상태 확인 없는 처리
|
||||
const processFile = useCallback(async (file: File) => {
|
||||
// isProcessing 확인 없이 바로 실행
|
||||
setIsProcessing(true);
|
||||
}, []);
|
||||
```
|
||||
|
||||
## **인스턴스 관리**
|
||||
|
||||
### ✅ DO: 적절한 dispose 패턴
|
||||
```typescript
|
||||
// 새 인스턴스 생성 전 기존 인스턴스 정리
|
||||
if (univerRef.current) {
|
||||
univerRef.current.dispose();
|
||||
univerRef.current = null;
|
||||
}
|
||||
|
||||
// 컴포넌트 언마운트 시 정리
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (univerRef.current) {
|
||||
univerRef.current.dispose();
|
||||
univerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
```
|
||||
|
||||
### ❌ DON'T: 메모리 누수 위험
|
||||
```typescript
|
||||
// dispose 없이 새 인스턴스 생성
|
||||
univerRef.current = univer.createUnit(UnitType.UNIVER_SHEET, workbook);
|
||||
|
||||
// 정리 로직 없는 컴포넌트
|
||||
// useEffect cleanup 누락
|
||||
```
|
||||
|
||||
## **파일 처리 최적화**
|
||||
|
||||
### ✅ DO: 중복 처리 방지
|
||||
```typescript
|
||||
// 파일 입력 초기화로 재선택 가능
|
||||
finally {
|
||||
if (event.target) {
|
||||
event.target.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
// 의존성 배열에 상태 포함
|
||||
const processFile = useCallback(async (file: File) => {
|
||||
// ... 로직
|
||||
}, [isProcessing]);
|
||||
```
|
||||
|
||||
## **REDI 중복 로드 방지**
|
||||
|
||||
### ✅ DO: 라이브러리 중복 확인
|
||||
```typescript
|
||||
// 개발 환경에서 REDI 중복 로드 경고 모니터링
|
||||
// 동일한 라이브러리 버전 사용 확인
|
||||
// 번들링 시 중복 제거 설정
|
||||
```
|
||||
|
||||
### ❌ DON'T: 무시하면 안 되는 경고
|
||||
```typescript
|
||||
// REDI 중복 로드 경고 무시
|
||||
// 서로 다른 버전의 동일 라이브러리 사용
|
||||
// 번들 중복 제거 설정 누락
|
||||
```
|
||||
|
||||
## **디버깅 및 로깅**
|
||||
|
||||
### ✅ DO: 의미있는 로그
|
||||
```typescript
|
||||
console.log("초기화할 워크북 데이터:", workbookData);
|
||||
console.log("Univer 인스턴스 생성 완료");
|
||||
console.log("플러그인 등록 완료");
|
||||
```
|
||||
|
||||
### ❌ DON'T: 과도한 로깅
|
||||
```typescript
|
||||
// 매 렌더링마다 로그 출력
|
||||
// 민감한 데이터 로깅
|
||||
// 프로덕션 환경 디버그 로그 유지
|
||||
```
|
||||
|
||||
## **성능 최적화**
|
||||
|
||||
- **useCallback**: 이벤트 핸들러 메모이제이션
|
||||
- **의존성 최적화**: 필요한 의존성만 포함
|
||||
- **조건부 실행**: 불필요한 재실행 방지
|
||||
- **메모리 관리**: 적절한 dispose와 cleanup
|
||||
|
||||
이 규칙을 따르면 Univer CE가 안정적으로 작동하고 메모리 누수 없이 파일 처리가 가능합니다.
|
||||
|
||||
# Univer CE REDI 중복 로드 오류 완전 방지 규칙
|
||||
|
||||
## **문제 원인**
|
||||
- Univer CE의 REDI 시스템에서 "Identifier already exists" 오류는 동일한 서비스가 중복으로 등록될 때 발생
|
||||
- 컴포넌트 재마운트, HMR(Hot Module Reload), 또는 동시 초기화 시도로 인한 중복 인스턴스 생성
|
||||
- 브라우저 캐시에 잔존하는 이전 REDI 등록 정보
|
||||
|
||||
## **필수 해결 패턴**
|
||||
|
||||
### **1. 전역 인스턴스 관리자 패턴 사용**
|
||||
```typescript
|
||||
// ✅ DO: 모듈 레벨에서 단일 인스턴스 보장
|
||||
let globalUniver: Univer | null = null;
|
||||
let globalInitializing = false;
|
||||
let globalDisposing = false;
|
||||
|
||||
const UniverseManager = {
|
||||
async createInstance(container: HTMLElement): Promise<Univer> {
|
||||
if (globalUniver) return globalUniver;
|
||||
|
||||
if (globalInitializing) {
|
||||
// 초기화 완료까지 대기
|
||||
while (globalInitializing) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
}
|
||||
if (globalUniver) return globalUniver;
|
||||
}
|
||||
|
||||
globalInitializing = true;
|
||||
try {
|
||||
// Univer 인스턴스 생성 로직
|
||||
globalUniver = new Univer({...});
|
||||
return globalUniver;
|
||||
} finally {
|
||||
globalInitializing = false;
|
||||
}
|
||||
},
|
||||
|
||||
getInstance(): Univer | null {
|
||||
return globalUniver;
|
||||
}
|
||||
};
|
||||
|
||||
// ❌ DON'T: 컴포넌트마다 개별 인스턴스 생성
|
||||
const MyComponent = () => {
|
||||
const [univer, setUniver] = useState<Univer | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const newUniver = new Univer({...}); // 중복 생성 위험
|
||||
setUniver(newUniver);
|
||||
}, []);
|
||||
};
|
||||
```
|
||||
|
||||
### **2. 상태 기반 중복 초기화 방지**
|
||||
```typescript
|
||||
// ✅ DO: 강화된 상태 확인으로 중복 실행 완전 차단
|
||||
const processFile = useCallback(async (file: File) => {
|
||||
if (
|
||||
isProcessing ||
|
||||
UniverseManager.isInitializing() ||
|
||||
UniverseManager.isDisposing()
|
||||
) {
|
||||
console.log("처리 중이거나 상태 변경 중입니다.");
|
||||
return; // 중복 실행 차단
|
||||
}
|
||||
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
// 파일 처리 로직
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
}, [isProcessing]); // 의존성 배열에 상태 포함
|
||||
|
||||
// ❌ DON'T: 간단한 상태 확인만으로는 불충분
|
||||
const processFile = useCallback(async (file: File) => {
|
||||
if (isProcessing) return; // 다른 상태는 확인하지 않음
|
||||
}, []);
|
||||
```
|
||||
|
||||
### **3. 컴포넌트 마운트 시 기존 인스턴스 재사용**
|
||||
```typescript
|
||||
// ✅ DO: 기존 전역 인스턴스 우선 재사용
|
||||
useEffect(() => {
|
||||
const existingUniver = UniverseManager.getInstance();
|
||||
if (existingUniver && !UniverseManager.isInitializing()) {
|
||||
setIsInitialized(true);
|
||||
return; // 재사용으로 중복 초기화 방지
|
||||
}
|
||||
|
||||
if (containerRef.current && !UniverseManager.isInitializing()) {
|
||||
initializeUniver();
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ❌ DON'T: 매번 새로운 초기화 시도
|
||||
useEffect(() => {
|
||||
initializeUniver(); // 기존 인스턴스 무시하고 새로 생성
|
||||
}, []);
|
||||
```
|
||||
|
||||
### **4. 디버깅을 위한 전역 상태 제공**
|
||||
```typescript
|
||||
// ✅ DO: 전역 디버그 객체로 상태 추적 가능
|
||||
if (typeof window !== "undefined") {
|
||||
(window as any).__UNIVER_DEBUG__ = {
|
||||
getGlobalUniver: () => globalUniver,
|
||||
getGlobalInitializing: () => globalInitializing,
|
||||
clearGlobalState: () => {
|
||||
globalUniver = null;
|
||||
globalInitializing = false;
|
||||
globalDisposing = false;
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### **5. 기존 워크북 정리 시 API 호환성 처리**
|
||||
```typescript
|
||||
// ✅ DO: try-catch로 API 버전 차이 대응
|
||||
try {
|
||||
const existingUnits =
|
||||
(univer as any).getUnitsForType?.(UniverInstanceType.UNIVER_SHEET) || [];
|
||||
for (const unit of existingUnits) {
|
||||
(univer as any).disposeUnit?.(unit.getUnitId());
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("기존 워크북 정리 시 오류 (무시 가능):", error);
|
||||
}
|
||||
|
||||
// ❌ DON'T: API 호환성 고려하지 않은 직접 호출
|
||||
univer.getUnitsForType(UniverInstanceType.UNIVER_SHEET); // 버전에 따라 실패 가능
|
||||
```
|
||||
|
||||
## **브라우저 캐시 완전 삭제**
|
||||
|
||||
### **개발 환경에서 REDI 오류 발생 시 필수 작업**
|
||||
```bash
|
||||
# ✅ DO: 브라우저 캐시 완전 삭제
|
||||
rm -rf node_modules/.vite && rm -rf dist
|
||||
|
||||
# 추가적으로 브라우저에서:
|
||||
# - 강제 새로고침 (Ctrl+Shift+R 또는 Cmd+Shift+R)
|
||||
# - 개발자 도구 > Application > Storage > Clear storage
|
||||
```
|
||||
|
||||
## **오류 패턴 및 해결책**
|
||||
|
||||
### **"Identifier already exists" 오류**
|
||||
- **원인**: REDI 시스템에서 동일한 식별자의 서비스가 중복 등록
|
||||
- **해결**: 전역 인스턴스 관리자 패턴으로 단일 인스턴스 보장
|
||||
|
||||
### **컴포넌트 재마운트 시 중복 초기화**
|
||||
- **원인**: useEffect가 매번 새로운 초기화 시도
|
||||
- **해결**: 기존 전역 인스턴스 존재 확인 후 재사용
|
||||
|
||||
### **HMR 환경에서 상태 불안정**
|
||||
- **원인**: 모듈 재로드 시 전역 상태 초기화
|
||||
- **해결**: 브라우저 캐시 삭제 + window 객체 기반 상태 추적
|
||||
|
||||
## **성능 최적화**
|
||||
|
||||
### **초기화 대기 로직**
|
||||
```typescript
|
||||
// ✅ DO: Promise 기반 비동기 대기
|
||||
while (globalInitializing) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
||||
}
|
||||
|
||||
// ❌ DON'T: 동기 대기나 긴 interval
|
||||
setInterval(() => { /* 체크 로직 */ }, 1000); // 너무 느림
|
||||
```
|
||||
|
||||
### **메모리 누수 방지**
|
||||
```typescript
|
||||
// ✅ DO: 컴포넌트 언마운트 시 상태만 정리
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
setIsInitialized(false);
|
||||
// 전역 인스턴스는 앱 종료 시에만 정리
|
||||
};
|
||||
}, []);
|
||||
```
|
||||
|
||||
## **참고사항**
|
||||
- 이 패턴은 Univer CE의 REDI 아키텍처 특성상 필수적임
|
||||
- 전역 인스턴스 관리로 브라우저 재로드 없이 안정적 운용 가능
|
||||
- 개발 환경에서 오류 발생 시 반드시 캐시 삭제 후 재시작
|
||||
915
package-lock.json
generated
915
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -35,6 +35,7 @@
|
||||
"@univerjs/sheets-ui": "^0.8.2",
|
||||
"@univerjs/ui": "^0.8.2",
|
||||
"@univerjs/uniscript": "^0.8.2",
|
||||
"@zwight/luckyexcel": "^1.1.6",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"file-saver": "^2.0.5",
|
||||
|
||||
@@ -13,6 +13,7 @@ import { UniverSheetsNumfmtPlugin } from "@univerjs/sheets-numfmt";
|
||||
import { UniverSheetsNumfmtUIPlugin } from "@univerjs/sheets-numfmt-ui";
|
||||
import { UniverUIPlugin } from "@univerjs/ui";
|
||||
import { cn } from "../../lib/utils";
|
||||
import LuckyExcel from "@zwight/luckyexcel";
|
||||
|
||||
// 언어팩 import
|
||||
import DesignEnUS from "@univerjs/design/locale/en-US";
|
||||
@@ -31,40 +32,101 @@ import "@univerjs/sheets-ui/lib/index.css";
|
||||
import "@univerjs/sheets-formula-ui/lib/index.css";
|
||||
import "@univerjs/sheets-numfmt-ui/lib/index.css";
|
||||
|
||||
// 전역 고유 키 생성
|
||||
const GLOBAL_UNIVER_KEY = "__GLOBAL_UNIVER_INSTANCE__";
|
||||
const GLOBAL_STATE_KEY = "__GLOBAL_UNIVER_STATE__";
|
||||
|
||||
// 전역 상태 인터페이스
|
||||
interface GlobalUniverState {
|
||||
instance: Univer | null;
|
||||
isInitializing: boolean;
|
||||
isDisposing: boolean;
|
||||
initializationPromise: Promise<Univer> | null;
|
||||
lastContainerId: string | null;
|
||||
}
|
||||
|
||||
// Window 객체에 전역 상태 확장
|
||||
declare global {
|
||||
interface Window {
|
||||
[GLOBAL_UNIVER_KEY]: Univer | null;
|
||||
[GLOBAL_STATE_KEY]: GlobalUniverState;
|
||||
__UNIVER_DEBUG__: {
|
||||
getGlobalUniver: () => Univer | null;
|
||||
getGlobalState: () => GlobalUniverState;
|
||||
clearGlobalState: () => void;
|
||||
forceReset: () => void;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 전역 상태 초기화 함수
|
||||
const initializeGlobalState = (): GlobalUniverState => {
|
||||
if (!window[GLOBAL_STATE_KEY]) {
|
||||
window[GLOBAL_STATE_KEY] = {
|
||||
instance: null,
|
||||
isInitializing: false,
|
||||
isDisposing: false,
|
||||
initializationPromise: null,
|
||||
lastContainerId: null,
|
||||
};
|
||||
}
|
||||
return window[GLOBAL_STATE_KEY];
|
||||
};
|
||||
|
||||
// 전역 상태 가져오기
|
||||
const getGlobalState = (): GlobalUniverState => {
|
||||
return window[GLOBAL_STATE_KEY] || initializeGlobalState();
|
||||
};
|
||||
|
||||
/**
|
||||
* Univer CE + 파일 업로드 오버레이
|
||||
* - Univer CE는 항상 렌더링 (기본 레이어)
|
||||
* - 오버레이로 파일 업로드 UI 표시
|
||||
* - disposeUnit()으로 메모리 관리
|
||||
* Window 객체 기반 강화된 전역 Univer 관리자
|
||||
* 모듈 재로드와 HMR에도 안전하게 작동
|
||||
*/
|
||||
const TestSheetViewer: React.FC = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const univerRef = useRef<Univer | null>(null);
|
||||
const initializingRef = useRef<boolean>(false);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const UniverseManager = {
|
||||
// 전역 인스턴스 생성 (완전 단일 인스턴스 보장)
|
||||
async createInstance(container: HTMLElement): Promise<Univer> {
|
||||
const state = getGlobalState();
|
||||
const containerId = container.id || `container-${Date.now()}`;
|
||||
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const [showUploadOverlay, setShowUploadOverlay] = useState(true); // 초기에는 오버레이 표시
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [currentFile, setCurrentFile] = useState<File | null>(null);
|
||||
console.log(`🚀 Univer 인스턴스 생성 요청 - Container: ${containerId}`);
|
||||
|
||||
// Univer 초기화 - 공식 문서 패턴 따라서
|
||||
useEffect(() => {
|
||||
if (
|
||||
!containerRef.current ||
|
||||
isInitialized ||
|
||||
univerRef.current ||
|
||||
initializingRef.current
|
||||
)
|
||||
return;
|
||||
// 이미 존재하는 인스턴스가 있고 같은 컨테이너면 재사용
|
||||
if (state.instance && state.lastContainerId === containerId) {
|
||||
console.log("✅ 기존 전역 Univer 인스턴스 재사용");
|
||||
return state.instance;
|
||||
}
|
||||
|
||||
const initializeUniver = async () => {
|
||||
// 초기화가 진행 중이면 대기
|
||||
if (state.isInitializing && state.initializationPromise) {
|
||||
console.log("⏳ 기존 초기화 프로세스 대기 중...");
|
||||
return state.initializationPromise;
|
||||
}
|
||||
|
||||
// 새로운 초기화 시작
|
||||
state.isInitializing = true;
|
||||
console.log("🔄 새로운 Univer 인스턴스 생성 시작");
|
||||
|
||||
// 기존 인스턴스 정리
|
||||
if (state.instance) {
|
||||
try {
|
||||
initializingRef.current = true;
|
||||
console.log("🚀 Univer CE 초기화 시작");
|
||||
console.log("🗑️ 기존 인스턴스 정리 중...");
|
||||
await state.instance.dispose();
|
||||
state.instance = null;
|
||||
window[GLOBAL_UNIVER_KEY] = null;
|
||||
} catch (error) {
|
||||
console.warn("⚠️ 기존 인스턴스 정리 중 오류:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 1. Univer 인스턴스 생성
|
||||
// 초기화 Promise 생성
|
||||
state.initializationPromise = (async () => {
|
||||
try {
|
||||
// 컨테이너 ID 설정
|
||||
if (!container.id) {
|
||||
container.id = containerId;
|
||||
}
|
||||
|
||||
console.log("🛠️ Univer 인스턴스 생성 중...");
|
||||
const univer = new Univer({
|
||||
theme: defaultTheme,
|
||||
locale: LocaleType.EN_US,
|
||||
@@ -81,232 +143,427 @@ const TestSheetViewer: React.FC = () => {
|
||||
},
|
||||
});
|
||||
|
||||
// 2. 필수 플러그인 등록 (공식 문서 순서)
|
||||
// 플러그인 등록 순서 (중요: Core → UI → Sheets → Docs → Formula → NumFmt)
|
||||
console.log("🔌 플러그인 등록 중...");
|
||||
univer.registerPlugin(UniverRenderEnginePlugin);
|
||||
univer.registerPlugin(UniverFormulaEnginePlugin);
|
||||
|
||||
univer.registerPlugin(UniverUIPlugin, {
|
||||
container: containerRef.current!,
|
||||
});
|
||||
|
||||
univer.registerPlugin(UniverDocsPlugin);
|
||||
univer.registerPlugin(UniverDocsUIPlugin);
|
||||
|
||||
univer.registerPlugin(UniverUIPlugin, { container });
|
||||
univer.registerPlugin(UniverSheetsPlugin);
|
||||
univer.registerPlugin(UniverSheetsUIPlugin);
|
||||
univer.registerPlugin(UniverDocsPlugin);
|
||||
univer.registerPlugin(UniverDocsUIPlugin);
|
||||
univer.registerPlugin(UniverSheetsFormulaPlugin);
|
||||
univer.registerPlugin(UniverSheetsFormulaUIPlugin);
|
||||
univer.registerPlugin(UniverSheetsNumfmtPlugin);
|
||||
univer.registerPlugin(UniverSheetsNumfmtUIPlugin);
|
||||
|
||||
// 3. 기본 워크북 생성
|
||||
univer.createUnit(UniverInstanceType.UNIVER_SHEET, {
|
||||
id: "default-workbook",
|
||||
name: "New Workbook",
|
||||
sheetOrder: ["sheet1"],
|
||||
sheets: {
|
||||
sheet1: {
|
||||
id: "sheet1",
|
||||
name: "Sheet1",
|
||||
cellData: {
|
||||
0: {
|
||||
0: { v: "Ready for Excel Import" },
|
||||
1: { v: "파일을 업로드하세요" },
|
||||
},
|
||||
},
|
||||
rowCount: 100,
|
||||
columnCount: 26,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 전역 상태 업데이트
|
||||
state.instance = univer;
|
||||
state.lastContainerId = containerId;
|
||||
window[GLOBAL_UNIVER_KEY] = univer;
|
||||
|
||||
univerRef.current = univer;
|
||||
setIsInitialized(true);
|
||||
|
||||
console.log("✅ Univer CE 초기화 완료");
|
||||
console.log("✅ Univer 인스턴스 생성 완료");
|
||||
return univer;
|
||||
} catch (error) {
|
||||
console.error("❌ Univer CE 초기화 실패:", error);
|
||||
initializingRef.current = false;
|
||||
console.error("❌ Univer 인스턴스 생성 실패:", error);
|
||||
throw error;
|
||||
} finally {
|
||||
state.isInitializing = false;
|
||||
state.initializationPromise = null;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
initializeUniver();
|
||||
}, []);
|
||||
return state.initializationPromise;
|
||||
},
|
||||
|
||||
// 컴포넌트 언마운트 시 정리
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
try {
|
||||
if (univerRef.current) {
|
||||
univerRef.current.dispose();
|
||||
univerRef.current = null;
|
||||
}
|
||||
initializingRef.current = false;
|
||||
} catch (error) {
|
||||
console.error("❌ Univer dispose 오류:", error);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
// 전역 인스턴스 정리
|
||||
async disposeInstance(): Promise<void> {
|
||||
const state = getGlobalState();
|
||||
|
||||
// 파일 처리 로직
|
||||
const handleFileProcessing = useCallback(async (file: File) => {
|
||||
if (!univerRef.current) return;
|
||||
if (state.isDisposing) {
|
||||
console.log("🔄 이미 dispose 진행 중...");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsProcessing(true);
|
||||
console.log("📁 파일 처리 시작:", file.name);
|
||||
if (!state.instance) {
|
||||
console.log("ℹ️ 정리할 인스턴스가 없음");
|
||||
return;
|
||||
}
|
||||
|
||||
state.isDisposing = true;
|
||||
|
||||
try {
|
||||
// 파일을 ArrayBuffer로 읽기
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const fileSize = (arrayBuffer.byteLength / 1024).toFixed(2);
|
||||
console.log("🗑️ 전역 Univer 인스턴스 dispose 시작");
|
||||
await state.instance.dispose();
|
||||
state.instance = null;
|
||||
state.lastContainerId = null;
|
||||
window[GLOBAL_UNIVER_KEY] = null;
|
||||
console.log("✅ 전역 Univer 인스턴스 dispose 완료");
|
||||
} catch (error) {
|
||||
console.error("❌ dispose 실패:", error);
|
||||
} finally {
|
||||
state.isDisposing = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 기존 워크북 제거 (메모리 관리)
|
||||
// 현재 인스턴스 반환
|
||||
getInstance(): Univer | null {
|
||||
const state = getGlobalState();
|
||||
return state.instance || window[GLOBAL_UNIVER_KEY] || null;
|
||||
},
|
||||
|
||||
// 상태 확인 메서드들
|
||||
isInitializing(): boolean {
|
||||
return getGlobalState().isInitializing || false;
|
||||
},
|
||||
|
||||
isDisposing(): boolean {
|
||||
return getGlobalState().isDisposing || false;
|
||||
},
|
||||
|
||||
// 강제 리셋 (디버깅용)
|
||||
forceReset(): void {
|
||||
const state = getGlobalState();
|
||||
if (state.instance) {
|
||||
try {
|
||||
// TODO: 실제 disposeUnit API 확인 후 구현
|
||||
// univerRef.current.disposeUnit('default-workbook');
|
||||
console.log("🗑️ 기존 워크북 정리 완료");
|
||||
state.instance.dispose();
|
||||
} catch (error) {
|
||||
console.warn("⚠️ 기존 워크북 정리 실패:", error);
|
||||
console.warn("강제 리셋 중 dispose 오류:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 새 워크북 생성 (실제 Excel 파싱은 추후 구현)
|
||||
const newWorkbook = {
|
||||
state.instance = null;
|
||||
state.isInitializing = false;
|
||||
state.isDisposing = false;
|
||||
state.initializationPromise = null;
|
||||
state.lastContainerId = null;
|
||||
window[GLOBAL_UNIVER_KEY] = null;
|
||||
|
||||
console.log("🔄 전역 Univer 상태 강제 리셋 완료");
|
||||
},
|
||||
};
|
||||
|
||||
// 전역 디버그 객체 설정
|
||||
if (typeof window !== "undefined") {
|
||||
// 전역 상태 초기화
|
||||
initializeGlobalState();
|
||||
|
||||
// 디버그 객체 설정
|
||||
window.__UNIVER_DEBUG__ = {
|
||||
getGlobalUniver: () => UniverseManager.getInstance(),
|
||||
getGlobalState: () => getGlobalState(),
|
||||
clearGlobalState: () => {
|
||||
const state = getGlobalState();
|
||||
Object.assign(state, {
|
||||
instance: null,
|
||||
isInitializing: false,
|
||||
isDisposing: false,
|
||||
initializationPromise: null,
|
||||
lastContainerId: null,
|
||||
});
|
||||
window[GLOBAL_UNIVER_KEY] = null;
|
||||
console.log("🧹 전역 상태 정리 완료");
|
||||
},
|
||||
forceReset: () => UniverseManager.forceReset(),
|
||||
};
|
||||
|
||||
console.log("🐛 디버그 객체 설정 완료: window.__UNIVER_DEBUG__");
|
||||
}
|
||||
|
||||
/**
|
||||
* Univer CE + 파일 업로드 오버레이
|
||||
* Window 객체 기반 완전한 단일 인스턴스 관리
|
||||
*/
|
||||
const TestSheetViewer: React.FC = () => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const mountedRef = useRef<boolean>(false);
|
||||
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const [showUploadOverlay, setShowUploadOverlay] = useState(true);
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [currentFile, setCurrentFile] = useState<File | null>(null);
|
||||
|
||||
// Univer 초기화 함수
|
||||
const initializeUniver = useCallback(async (workbookData?: any) => {
|
||||
if (!containerRef.current || !mountedRef.current) {
|
||||
console.error("❌ 컨테이너가 준비되지 않았습니다!");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log("🚀 Univer 초기화 시작");
|
||||
|
||||
// 전역 인스턴스 생성 또는 재사용
|
||||
const univer = await UniverseManager.createInstance(containerRef.current);
|
||||
|
||||
// 기본 워크북 데이터
|
||||
const defaultWorkbook = {
|
||||
id: `workbook-${Date.now()}`,
|
||||
name: file.name,
|
||||
sheetOrder: ["imported-sheet"],
|
||||
locale: LocaleType.EN_US,
|
||||
name: "Sample Workbook",
|
||||
sheetOrder: ["sheet-01"],
|
||||
sheets: {
|
||||
"imported-sheet": {
|
||||
id: "imported-sheet",
|
||||
name: "Imported Data",
|
||||
cellData: {
|
||||
0: {
|
||||
0: { v: "파일명" },
|
||||
1: { v: file.name },
|
||||
},
|
||||
1: {
|
||||
0: { v: "파일 크기" },
|
||||
1: { v: `${fileSize} KB` },
|
||||
},
|
||||
2: {
|
||||
0: { v: "업로드 시간" },
|
||||
1: { v: new Date().toLocaleString() },
|
||||
},
|
||||
4: {
|
||||
0: { v: "상태" },
|
||||
1: { v: "업로드 완료 - 실제 Excel 파싱은 추후 구현" },
|
||||
},
|
||||
},
|
||||
"sheet-01": {
|
||||
type: 0,
|
||||
id: "sheet-01",
|
||||
name: "Sheet1",
|
||||
tabColor: "",
|
||||
hidden: 0,
|
||||
rowCount: 100,
|
||||
columnCount: 26,
|
||||
columnCount: 20,
|
||||
zoomRatio: 1,
|
||||
scrollTop: 0,
|
||||
scrollLeft: 0,
|
||||
defaultColumnWidth: 93,
|
||||
defaultRowHeight: 27,
|
||||
cellData: {},
|
||||
rowData: {},
|
||||
columnData: {},
|
||||
showGridlines: 1,
|
||||
rowHeader: { width: 46, hidden: 0 },
|
||||
columnHeader: { height: 20, hidden: 0 },
|
||||
selections: ["A1"],
|
||||
rightToLeft: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
univerRef.current.createUnit(
|
||||
const workbookToUse = workbookData || defaultWorkbook;
|
||||
|
||||
// 기존 워크북 정리 (API 호환성 고려)
|
||||
try {
|
||||
const existingUnits =
|
||||
(univer as any).getUnitsForType?.(UniverInstanceType.UNIVER_SHEET) ||
|
||||
[];
|
||||
for (const unit of existingUnits) {
|
||||
(univer as any).disposeUnit?.(unit.getUnitId());
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("ℹ️ 기존 워크북 정리 시 오류 (무시 가능):", error);
|
||||
}
|
||||
|
||||
// 새 워크북 생성
|
||||
const workbook = univer.createUnit(
|
||||
UniverInstanceType.UNIVER_SHEET,
|
||||
newWorkbook,
|
||||
workbookToUse,
|
||||
);
|
||||
|
||||
setCurrentFile(file);
|
||||
setShowUploadOverlay(false); // 오버레이 숨기기
|
||||
|
||||
console.log("✅ 파일 처리 완료");
|
||||
console.log("✅ 워크북 생성 완료:", workbook?.getUnitId());
|
||||
setIsInitialized(true);
|
||||
} catch (error) {
|
||||
console.error("❌ 파일 처리 실패:", error);
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
console.error("❌ Univer 초기화 실패:", error);
|
||||
setIsInitialized(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 파일 선택 처리
|
||||
const handleFileSelection = useCallback(
|
||||
async (files: FileList) => {
|
||||
if (files.length === 0) return;
|
||||
|
||||
const file = files[0];
|
||||
|
||||
// 파일 타입 검증
|
||||
if (!file.name.match(/\.(xlsx|xls)$/i)) {
|
||||
alert("Excel 파일(.xlsx, .xls)만 업로드 가능합니다.");
|
||||
// 파일 처리 함수
|
||||
const processFile = useCallback(
|
||||
async (file: File) => {
|
||||
// 강화된 상태 확인으로 중복 실행 완전 차단
|
||||
if (
|
||||
isProcessing ||
|
||||
UniverseManager.isInitializing() ||
|
||||
UniverseManager.isDisposing()
|
||||
) {
|
||||
console.log("⏸️ 처리 중이거나 상태 변경 중입니다. 현재 상태:", {
|
||||
isProcessing,
|
||||
isInitializing: UniverseManager.isInitializing(),
|
||||
isDisposing: UniverseManager.isDisposing(),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 파일 크기 검증 (50MB)
|
||||
if (file.size > 50 * 1024 * 1024) {
|
||||
alert("파일 크기는 50MB를 초과할 수 없습니다.");
|
||||
return;
|
||||
if (!file.name.toLowerCase().endsWith(".xlsx")) {
|
||||
throw new Error("XLSX 파일만 지원됩니다.");
|
||||
}
|
||||
|
||||
await handleFileProcessing(file);
|
||||
setIsProcessing(true);
|
||||
console.log("📁 파일 처리 시작:", file.name);
|
||||
|
||||
try {
|
||||
// LuckyExcel을 사용하여 Excel 파일을 Univer 데이터로 변환
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
LuckyExcel.transformExcelToUniver(
|
||||
file,
|
||||
async (exportJson: any) => {
|
||||
try {
|
||||
console.log("📊 LuckyExcel 변환 완료:", exportJson);
|
||||
|
||||
// 변환된 데이터로 워크북 업데이트
|
||||
if (exportJson && typeof exportJson === "object") {
|
||||
await initializeUniver(exportJson);
|
||||
} else {
|
||||
console.warn(
|
||||
"⚠️ 변환된 데이터가 유효하지 않음, 기본 워크북 사용",
|
||||
);
|
||||
await initializeUniver();
|
||||
}
|
||||
|
||||
setCurrentFile(file);
|
||||
setShowUploadOverlay(false);
|
||||
resolve();
|
||||
} catch (error) {
|
||||
console.error("❌ 워크북 업데이트 오류:", error);
|
||||
try {
|
||||
await initializeUniver();
|
||||
setCurrentFile(file);
|
||||
setShowUploadOverlay(false);
|
||||
resolve();
|
||||
} catch (fallbackError) {
|
||||
reject(fallbackError);
|
||||
}
|
||||
}
|
||||
},
|
||||
(error: any) => {
|
||||
console.error("❌ LuckyExcel 변환 오류:", error);
|
||||
reject(new Error("파일 변환 중 오류가 발생했습니다."));
|
||||
},
|
||||
);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("❌ 파일 처리 오류:", error);
|
||||
throw error;
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
console.log("✅ 파일 처리 완료");
|
||||
}
|
||||
},
|
||||
[handleFileProcessing],
|
||||
[isProcessing, initializeUniver],
|
||||
);
|
||||
|
||||
// 파일 입력 변경 처리
|
||||
const handleFileInputChange = useCallback(
|
||||
async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
await processFile(file);
|
||||
} catch (error) {
|
||||
console.error("❌ 파일 처리 오류:", error);
|
||||
alert(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "파일 처리 중 오류가 발생했습니다.",
|
||||
);
|
||||
} finally {
|
||||
// 파일 입력 초기화로 중복 실행 방지
|
||||
if (event.target) {
|
||||
event.target.value = "";
|
||||
}
|
||||
}
|
||||
},
|
||||
[processFile],
|
||||
);
|
||||
|
||||
// 파일 피커 클릭
|
||||
const handleFilePickerClick = useCallback(() => {
|
||||
if (isProcessing || UniverseManager.isInitializing()) return;
|
||||
fileInputRef.current?.click();
|
||||
}, [isProcessing]);
|
||||
|
||||
// 새 업로드 처리
|
||||
const handleNewUpload = useCallback(() => {
|
||||
if (isProcessing || UniverseManager.isInitializing()) return;
|
||||
setShowUploadOverlay(true);
|
||||
setCurrentFile(null);
|
||||
}, [isProcessing]);
|
||||
|
||||
// 드래그 앤 드롭 이벤트 핸들러
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
}, []);
|
||||
|
||||
const handleDragEnter = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {
|
||||
setIsDragOver(true);
|
||||
}
|
||||
setIsDragOver(true);
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragOver(false);
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
async (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragOver(false);
|
||||
|
||||
if (isProcessing) return;
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
if (files && files.length > 0) {
|
||||
await handleFileSelection(files);
|
||||
if (files.length === 0) return;
|
||||
|
||||
const file = files[0];
|
||||
|
||||
if (!file.name.toLowerCase().endsWith(".xlsx")) {
|
||||
alert("XLSX 파일만 업로드 가능합니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > 50 * 1024 * 1024) {
|
||||
alert("파일 크기는 50MB를 초과할 수 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await processFile(file);
|
||||
} catch (error) {
|
||||
console.error("❌ 파일 처리 오류:", error);
|
||||
alert(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "파일 처리 중 오류가 발생했습니다.",
|
||||
);
|
||||
}
|
||||
},
|
||||
[handleFileSelection, isProcessing],
|
||||
[processFile],
|
||||
);
|
||||
|
||||
// 파일 선택 버튼 클릭
|
||||
const handleFilePickerClick = useCallback(() => {
|
||||
if (isProcessing || !fileInputRef.current) return;
|
||||
fileInputRef.current.click();
|
||||
}, [isProcessing]);
|
||||
// 컴포넌트 마운트 시 초기화
|
||||
useEffect(() => {
|
||||
mountedRef.current = true;
|
||||
console.log("🎯 컴포넌트 마운트됨");
|
||||
|
||||
// 파일 입력 변경
|
||||
const handleFileInputChange = useCallback(
|
||||
async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (files && files.length > 0) {
|
||||
await handleFileSelection(files);
|
||||
// 기존 전역 인스턴스 확인 및 재사용
|
||||
const existingUniver = UniverseManager.getInstance();
|
||||
if (existingUniver && !UniverseManager.isInitializing()) {
|
||||
console.log("♻️ 기존 전역 Univer 인스턴스 재사용");
|
||||
setIsInitialized(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 컨테이너 준비 후 초기화
|
||||
const initTimer = setTimeout(() => {
|
||||
if (containerRef.current && !UniverseManager.isInitializing()) {
|
||||
console.log("🚀 컴포넌트 마운트 시 Univer 초기화");
|
||||
initializeUniver();
|
||||
}
|
||||
e.target.value = "";
|
||||
},
|
||||
[handleFileSelection],
|
||||
);
|
||||
}, 100); // 짧은 지연으로 DOM 완전 준비 보장
|
||||
|
||||
// 새 파일 업로드 (오버레이 다시 표시)
|
||||
const handleNewUpload = useCallback(() => {
|
||||
setShowUploadOverlay(true);
|
||||
setCurrentFile(null);
|
||||
return () => {
|
||||
clearTimeout(initTimer);
|
||||
mountedRef.current = false;
|
||||
console.log("👋 컴포넌트 언마운트됨");
|
||||
};
|
||||
}, [initializeUniver]);
|
||||
|
||||
// 컴포넌트 언마운트 시 정리 (전역 인스턴스는 유지)
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
// 전역 인스턴스는 앱 종료 시에만 정리
|
||||
// 여기서는 로컬 상태만 초기화
|
||||
setIsInitialized(false);
|
||||
console.log("🧹 로컬 상태 정리 완료");
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="w-full h-screen flex flex-col relative">
|
||||
{/* 헤더 */}
|
||||
<div className="bg-white border-b p-4 flex-shrink-0 relative z-10">
|
||||
<h1 className="text-xl font-bold">🧪 Univer CE + 파일 업로드</h1>
|
||||
<h1 className="text-xl font-bold">
|
||||
🧪 Univer CE + 파일 업로드 (Window 기반 관리)
|
||||
</h1>
|
||||
<div className="mt-2 flex items-center gap-4">
|
||||
<span
|
||||
className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
||||
@@ -331,6 +588,12 @@ const TestSheetViewer: React.FC = () => {
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 디버그 정보 */}
|
||||
<div className="text-xs text-gray-500">
|
||||
전역 인스턴스: {UniverseManager.getInstance() ? "✅" : "❌"} |
|
||||
초기화 중: {UniverseManager.isInitializing() ? "⏳" : "❌"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -352,7 +615,7 @@ const TestSheetViewer: React.FC = () => {
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "00px", // 헤더 높이만큼 아래로 (헤더는 약 80px)
|
||||
top: "0px", // 헤더 높이만큼 아래로 (헤더는 약 80px)
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
@@ -383,7 +646,13 @@ const TestSheetViewer: React.FC = () => {
|
||||
className="max-w-2xl w-full"
|
||||
style={{ transform: "scale(0.8)" }}
|
||||
>
|
||||
<div className="bg-white rounded-lg shadow-xl border p-8 md:p-12">
|
||||
<div
|
||||
className="bg-white rounded-lg shadow-xl border p-8 md:p-12"
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
||||
}}
|
||||
>
|
||||
<div className="text-center">
|
||||
{/* 아이콘 및 제목 */}
|
||||
<div className="mb-8">
|
||||
@@ -442,7 +711,7 @@ const TestSheetViewer: React.FC = () => {
|
||||
) : (
|
||||
<>
|
||||
<span className="font-medium text-gray-900">
|
||||
.xlsx, .xls
|
||||
.xlsx
|
||||
</span>{" "}
|
||||
파일을 드래그 앤 드롭하거나 클릭하여 업로드
|
||||
</>
|
||||
@@ -490,7 +759,7 @@ const TestSheetViewer: React.FC = () => {
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".xlsx,.xls"
|
||||
accept=".xlsx"
|
||||
onChange={handleFileInputChange}
|
||||
className="hidden"
|
||||
disabled={isProcessing}
|
||||
@@ -498,8 +767,12 @@ const TestSheetViewer: React.FC = () => {
|
||||
|
||||
{/* 지원 형식 안내 */}
|
||||
<div className="mt-6 text-xs text-gray-500">
|
||||
<p>지원 형식: Excel (.xlsx, .xls)</p>
|
||||
<p>지원 형식: Excel (.xlsx)</p>
|
||||
<p>최대 파일 크기: 50MB</p>
|
||||
<p className="mt-2 text-blue-600">
|
||||
💡 브라우저 콘솔에서 window.__UNIVER_DEBUG__ 로 디버깅
|
||||
가능
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
1290
src/utils/fileProcessor.ts
Normal file
1290
src/utils/fileProcessor.ts
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
||||
|
||||
@@ -16,13 +16,18 @@ export default defineConfig({
|
||||
stream: "stream-browserify",
|
||||
buffer: "buffer",
|
||||
},
|
||||
// 중복 모듈 해결을 위한 dedupe 설정
|
||||
dedupe: ["@wendellhu/redi"],
|
||||
},
|
||||
|
||||
// 의존성 최적화 설정
|
||||
optimizeDeps: {
|
||||
exclude: [
|
||||
// 중복 로딩 방지를 위해 redi와 univer 관련 제외
|
||||
include: [
|
||||
// REDI 중복 로드 방지를 위해 명시적으로 포함
|
||||
"@wendellhu/redi",
|
||||
],
|
||||
exclude: [
|
||||
// Univer 관련 모듈만 제외
|
||||
"@univerjs/core",
|
||||
"@univerjs/design",
|
||||
"@univerjs/ui",
|
||||
@@ -46,6 +51,8 @@ export default defineConfig({
|
||||
external: [],
|
||||
output: {
|
||||
manualChunks: {
|
||||
// REDI를 별도 청크로 분리하여 중복 방지
|
||||
redi: ["@wendellhu/redi"],
|
||||
// Univer 관련 라이브러리를 별도 청크로 분리
|
||||
"univer-core": [
|
||||
"@univerjs/core",
|
||||
|
||||
Reference in New Issue
Block a user