feat: 프로젝트 초기 설정 완료 - Vite + React + TypeScript, TailwindCSS + ShadCN UI, Zustand, 기본 타입 및 컴포넌트 구현

src/App.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import { useAppStore } from "./stores/useAppStore";
+import { Card, CardContent } from "./components/ui/card";
+import { Button } from "./components/ui/button";
+
+function App() {
+  const { isLoading, loadingMessage, currentFile, isAuthenticated } =
+    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>
+        </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>
+
+      {/* 프롬프트 입력 (하단 고정) */}
+      {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>
+  );
+}
+
+export default App;