feat: 파일프로세서 개선 - 안정적인 Excel 파일 처리
- 이전 잘 작동하던 코드 로직을 현재 프로세서에 적용 - LuckyExcel 우선 시도 + SheetJS Fallback 패턴 도입 - CSV, XLS, XLSX 모든 형식에 대한 안정적 처리 - 한글 시트명 정규화 및 워크북 구조 검증 강화 - 복잡한 SheetJS 옵션 단순화로 안정성 향상 - 에러 발생 시 빈 시트 생성으로 앱 중단 방지 - 테스트 환경 및 Cursor 규칙 업데이트 Technical improvements: - convertSheetJSToLuckyExcel 함수로 안정적 데이터 변환 - UTF-8 codepage 설정으로 한글 지원 강화 - validateWorkbook 함수로 방어적 프로그래밍 적용
This commit is contained in:
sheetEasy AI Team
141
src/App.tsx
141
src/App.tsx
@@ -1,140 +1,31 @@
|
||||
import { useAppStore } from "./stores/useAppStore";
|
||||
import { Card, CardContent } from "./components/ui/card";
|
||||
import { Button } from "./components/ui/button";
|
||||
import { FileUpload } from "./components/sheet/FileUpload";
|
||||
|
||||
function App() {
|
||||
const { isLoading, loadingMessage, currentFile } = useAppStore();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* 상단 바 */}
|
||||
<header className="border-b bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
|
||||
<div className="container flex h-16 items-center px-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<h1 className="text-2xl font-bold text-primary">sheetEasy AI</h1>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto flex items-center space-x-4">
|
||||
{currentFile && (
|
||||
<Button variant="outline" size="sm">
|
||||
다운로드
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" size="sm">
|
||||
히스토리
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon">
|
||||
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
|
||||
<span className="text-sm font-medium">계정</span>
|
||||
</div>
|
||||
</Button>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* 헤더 */}
|
||||
<header className="bg-white shadow-sm border-b">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex items-center">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 메인 콘텐츠 */}
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
{!currentFile ? (
|
||||
/* 파일 업로드 영역 */
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<Card className="w-full max-w-2xl">
|
||||
<CardContent className="p-12">
|
||||
<div className="text-center">
|
||||
<div className="mb-8">
|
||||
<div className="mx-auto h-24 w-24 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="h-12 w-12 text-primary"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold mb-2">
|
||||
Excel 파일을 업로드하세요
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
.xlsx, .xls 파일을 드래그 앤 드롭하거나 클릭하여 업로드
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-12 hover:border-primary/50 transition-colors cursor-pointer">
|
||||
<p className="text-muted-foreground">
|
||||
파일을 여기에 드롭하거나 클릭하여 선택
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Button>파일 선택</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
/* 시트 뷰어 영역 */
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">{currentFile.name}</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
업로드됨: {currentFile.uploadedAt.toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 시트 렌더링 영역 */}
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="h-96 bg-white border rounded-lg flex items-center justify-center">
|
||||
<p className="text-muted-foreground">
|
||||
Luckysheet 시트가 여기에 렌더링됩니다
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<FileUpload />
|
||||
</main>
|
||||
|
||||
{/* 프롬프트 입력 (하단 고정) */}
|
||||
{currentFile && (
|
||||
<div className="fixed bottom-4 left-1/2 -translate-x-1/2 w-full max-w-2xl px-4">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="AI에게 명령을 입력하세요... (예: A열의 모든 빈 셀을 0으로 채워줘)"
|
||||
className="flex-1 px-3 py-2 border border-input rounded-md bg-background text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
/>
|
||||
<Button>실행</Button>
|
||||
<Button variant="outline">히스토리</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 로딩 오버레이 */}
|
||||
{isLoading && (
|
||||
<div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="animate-spin rounded-full h-6 w-6 border-2 border-primary border-t-transparent"></div>
|
||||
<p className="text-sm">{loadingMessage || "처리 중..."}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user