feedback list 기능추가. 상단바 추가. 테마 적용 안됨.

2025-07-31 17:22:13 +09:00
parent b4e6a94fda
commit 3ccb0c8f8a
90 changed files with 1766 additions and 278 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -14,9 +14,12 @@

 ## Phase 2: 기능 고도화 및 안정화

- [ ] 동적 테이블에 페이지네이션, 정렬, 필터링 기능 추가
+- [x] 동적 테이블 기능 고도화 (페이지네이션, 정렬, 필터링, 날짜범위, 행 확장 등) (완료: 2025-07-31 17:20:41)
+- [x] 전역 상태 관리를 위한 Zustand 도입 (프로젝트 ID, 테마) (완료: 2025-07-31 17:20:41)
+- [x] 상단 헤더 및 네비게이션 구현 (완료: 2025-07-31 17:20:41)
+- [x] Light/Dark/System 테마 기능 구현 및 커스텀 테마 적용 (완료: 2025-07-31 17:20:41)
+- [x] TypeScript 및 빌드 오류 디버깅 및 해결 (완료: 2025-07-31 17:20:41)
 - [ ] 동적 폼에 데이터 유효성 검사 기능 추가
- [ ] 전역 상태 관리를 위한 Zustand 도입 검토
 - [ ] Biome을 이용한 코드 포맷팅 및 린트 규칙 적용 및 검사

 ## Phase 3: 인증 및 배포
@@ -24,4 +27,4 @@
 - [ ] OIDC 클라이언트 연동 및 인증 로직 구현
 - [ ] 로그인/로그아웃 및 인증 상태 관리
 - [ ] 인증이 필요한 라우트 보호 기능 적용
- [ ] Docker를 이용한 배포 환경 구축
+- [ ] Docker를 이용한 배포 환경 구축
--- a/viewer/package.json
+++ b/viewer/package.json
@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
-		"build": "tsc -b && vite build",
+		"build": "tsc --noEmit && vite build",
 		"format": "biome format --write .",
 		"lint": "biome lint --write .",
 		"preview": "vite preview",
@@ -33,6 +33,7 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.1.2",
+		"@types/node": "^24.1.0",
 		"@types/react": "^19.1.8",
 		"@types/react-dom": "^19.1.6",
 		"@vitejs/plugin-react": "^4.6.0",
--- a/viewer/pnpm-lock.yaml
+++ b/viewer/pnpm-lock.yaml
@@ -66,6 +66,9 @@ importers:
      '@biomejs/biome':
        specifier: ^2.1.2
        version: 2.1.2
+      '@types/node':
+        specifier: ^24.1.0
+        version: 24.1.0
      '@types/react':
        specifier: ^19.1.8
        version: 19.1.9
@@ -74,7 +77,7 @@ importers:
        version: 19.1.7(@types/react@19.1.9)
      '@vitejs/plugin-react':
        specifier: ^4.6.0
-        version: 4.7.0(vite@7.0.6(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))
+        version: 4.7.0(vite@7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))
      autoprefixer:
        specifier: ^10.4.21
        version: 10.4.21(postcss@8.5.6)
@@ -95,7 +98,7 @@ importers:
        version: 5.8.3
      vite:
        specifier: ^7.0.4
-        version: 7.0.6(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
+        version: 7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)

  viewer:
    dependencies:
@@ -1064,6 +1067,9 @@ packages:
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}

+  '@types/node@24.1.0':
+    resolution: {integrity: sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w==}
+
  '@types/react-dom@19.1.7':
    resolution: {integrity: sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==}
    peerDependencies:
@@ -2030,6 +2036,9 @@ packages:
    engines: {node: '>=14.17'}
    hasBin: true

+  undici-types@7.8.0:
+    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
+
  update-browserslist-db@1.1.3:
    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
    hasBin: true
@@ -2923,6 +2932,10 @@ snapshots:

  '@types/json-schema@7.0.15': {}

+  '@types/node@24.1.0':
+    dependencies:
+      undici-types: 7.8.0
+
  '@types/react-dom@19.1.7(@types/react@19.1.9)':
    dependencies:
      '@types/react': 19.1.9
@@ -3024,7 +3037,7 @@ snapshots:
      '@typescript-eslint/types': 8.38.0
      eslint-visitor-keys: 4.2.1

-  '@vitejs/plugin-react@4.7.0(vite@7.0.6(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))':
+  '@vitejs/plugin-react@4.7.0(vite@7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0))':
    dependencies:
      '@babel/core': 7.28.0
      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
@@ -3032,7 +3045,7 @@ snapshots:
      '@rolldown/pluginutils': 1.0.0-beta.27
      '@types/babel__core': 7.20.5
      react-refresh: 0.17.0
-      vite: 7.0.6(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
+      vite: 7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0)
    transitivePeerDependencies:
      - supports-color

@@ -3898,6 +3911,8 @@ snapshots:

  typescript@5.8.3: {}

+  undici-types@7.8.0: {}
+
  update-browserslist-db@1.1.3(browserslist@4.25.1):
    dependencies:
      browserslist: 4.25.1
@@ -3936,7 +3951,7 @@ snapshots:
    optionalDependencies:
      fsevents: 2.3.3

-  vite@7.0.6(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0):
+  vite@7.0.6(@types/node@24.1.0)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.8.0):
    dependencies:
      esbuild: 0.25.8
      fdir: 6.4.6(picomatch@4.0.3)
@@ -3945,6 +3960,7 @@ snapshots:
      rollup: 4.46.1
      tinyglobby: 0.2.14
    optionalDependencies:
+      '@types/node': 24.1.0
      fsevents: 2.3.3
      jiti: 2.5.1
      lightningcss: 1.30.1
--- a/viewer/src/App.d.ts
+++ b/viewer/src/App.d.ts
@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
--- a/viewer/src/App.js
+++ b/viewer/src/App.js
@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/App.tsx
+import { Routes, Route, Navigate } from "react-router-dom";
+import { MainLayout } from "@/components/MainLayout";
+import { FeedbackCreatePage } from "@/pages/FeedbackCreatePage";
+import { FeedbackListPage } from "@/pages/FeedbackListPage";
+import { FeedbackDetailPage } from "@/pages/FeedbackDetailPage";
+import { IssueViewerPage } from "@/pages/IssueViewerPage";
+import { ThemeProvider } from "./components/providers/ThemeProvider";
+function App() {
+    return (_jsx(ThemeProvider, { children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Navigate, { to: "/projects/1/channels/4/feedbacks" }) }), _jsxs(Route, { path: "/projects/:projectId/channels/:channelId/feedbacks", element: _jsx(MainLayout, {}), children: [_jsx(Route, { index: true, element: _jsx(FeedbackListPage, {}) }), _jsx(Route, { path: "new", element: _jsx(FeedbackCreatePage, {}) }), _jsx(Route, { path: ":feedbackId", element: _jsx(FeedbackDetailPage, {}) })] }), _jsx(Route, { path: "/issues/:issueId" // 이슈 ID만 받도록 단순화
+                    , element: _jsx(IssueViewerPage, {}) }), _jsx(Route, { path: "*", element: _jsx(Navigate, { to: "/" }) })] }) }));
+}
+export default App;
--- a/viewer/src/App.tsx
+++ b/viewer/src/App.tsx
@@ -1,45 +1,42 @@
 // src/App.tsx
-import { useEffect } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
 import { MainLayout } from "@/components/MainLayout";
 import { FeedbackCreatePage } from "@/pages/FeedbackCreatePage";
 import { FeedbackListPage } from "@/pages/FeedbackListPage";
 import { FeedbackDetailPage } from "@/pages/FeedbackDetailPage";
 import { IssueViewerPage } from "@/pages/IssueViewerPage";
+import { ThemeProvider } from "./components/providers/ThemeProvider";

 function App() {
-	useEffect(() => {
-		const root = window.document.documentElement;
-		root.classList.add("dark");
-	}, []);
-
 	return (
-		<Routes>
-			{/* 기본 경로 리디렉션 */}
-			<Route
-				path="/"
-				element={<Navigate to="/projects/1/channels/4/feedbacks" />}
-			/>
+		<ThemeProvider>
+			<Routes>
+				{/* 기본 경로 리디렉션 */}
+				<Route
+					path="/"
+					element={<Navigate to="/projects/1/channels/4/feedbacks" />}
+				/>

-			{/* 피드백 관련 페이지 (메인 레이아웃 사용) */}
-			<Route
-				path="/projects/:projectId/channels/:channelId/feedbacks"
-				element={<MainLayout />}
-			>
-				<Route index element={<FeedbackListPage />} />
-				<Route path="new" element={<FeedbackCreatePage />} />
-				<Route path=":feedbackId" element={<FeedbackDetailPage />} />
-			</Route>
+				{/* 피드백 관련 페이지 (메인 레이아웃 사용) */}
+				<Route
+					path="/projects/:projectId/channels/:channelId/feedbacks"
+					element={<MainLayout />}
+				>
+					<Route index element={<FeedbackListPage />} />
+					<Route path="new" element={<FeedbackCreatePage />} />
+					<Route path=":feedbackId" element={<FeedbackDetailPage />} />
+				</Route>

-			{/* 독립적인 이슈 뷰어 페이지 */}
-			<Route
-				path="/issues/:issueId" // 이슈 ID만 받도록 단순화
-				element={<IssueViewerPage />}
-			/>
+				{/* 독립적인 이슈 뷰어 페이지 */}
+				<Route
+					path="/issues/:issueId" // 이슈 ID만 받도록 단순화
+					element={<IssueViewerPage />}
+				/>

-			{/* 잘못된 접근을 위한 리디렉션 */}
-			<Route path="*" element={<Navigate to="/" />} />
-		</Routes>
+				{/* 잘못된 접근을 위한 리디렉션 */}
+				<Route path="*" element={<Navigate to="/" />} />
+			</Routes>
+		</ThemeProvider>
 	);
 }

--- a/viewer/src/components/DynamicForm.d.ts
+++ b/viewer/src/components/DynamicForm.d.ts
@@ -0,0 +1,10 @@
+import type { FeedbackField } from "@/services/feedback";
+interface DynamicFormProps {
+    fields: FeedbackField[];
+    onSubmit: (formData: Record<string, any>) => Promise<void>;
+    initialData?: Record<string, any>;
+    submitButtonText?: string;
+}
+export declare function DynamicForm({ fields, onSubmit, initialData, // 기본값으로 상수 사용
+submitButtonText, }: DynamicFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
--- a/viewer/src/components/DynamicForm.js
+++ b/viewer/src/components/DynamicForm.js
@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectTrigger, SelectValue, } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+// 컴포넌트 외부에 안정적인 참조를 가진 빈 객체 상수 선언
+const EMPTY_INITIAL_DATA = {};
+export function DynamicForm({ fields, onSubmit, initialData = EMPTY_INITIAL_DATA, // 기본값으로 상수 사용
+submitButtonText = "제출", }) {
+    const [formData, setFormData] = useState(initialData);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    useEffect(() => {
+        // initialData prop이 변경될 때만 폼 데이터를 동기화
+        setFormData(initialData);
+    }, [initialData]);
+    const handleFormChange = (fieldId, value) => {
+        setFormData((prev) => ({ ...prev, [fieldId]: value }));
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        try {
+            await onSubmit(formData);
+        }
+        catch (error) {
+            console.error("Form submission error:", error);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const renderField = (field) => {
+        const commonProps = {
+            id: field.id,
+            value: formData[field.id] ?? "",
+            disabled: field.readOnly,
+        };
+        switch (field.type) {
+            case "textarea":
+                return (_jsx(Textarea, { ...commonProps, onChange: (e) => handleFormChange(field.id, e.target.value), placeholder: field.readOnly ? "" : `${field.name}...`, rows: 5 }));
+            case "text":
+            case "number":
+                return (_jsx(Input, { ...commonProps, type: field.type, onChange: (e) => handleFormChange(field.id, e.target.value), placeholder: field.readOnly ? "" : field.name }));
+            case "select":
+                return (_jsxs(Select, { value: commonProps.value, onValueChange: (value) => handleFormChange(field.id, value), disabled: field.readOnly, children: [_jsx(SelectTrigger, { id: field.id, children: _jsx(SelectValue, { placeholder: `-- ${field.name} 선택 --` }) }), _jsx(SelectContent, {})] }));
+            default:
+                return _jsxs("p", { children: ["\uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uD544\uB4DC \uD0C0\uC785: ", field.type] });
+        }
+    };
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [fields.map((field) => (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: field.id, children: field.name }), renderField(field)] }, field.id))), _jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? "전송 중..." : submitButtonText })] }));
+}
--- a/viewer/src/components/DynamicForm.tsx
+++ b/viewer/src/components/DynamicForm.tsx
@@ -7,7 +7,6 @@ import { Label } from "@/components/ui/label";
 import {
 	Select,
 	SelectContent,
-	SelectItem,
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
--- a/viewer/src/components/DynamicTable.d.ts
+++ b/viewer/src/components/DynamicTable.d.ts
@@ -0,0 +1,9 @@
+import type { Feedback, FeedbackField } from "@/services/feedback";
+interface DynamicTableProps {
+    columns: FeedbackField[];
+    data: Feedback[];
+    projectId: string;
+    channelId: string;
+}
+export declare function DynamicTable({ columns: rawColumns, data, projectId, channelId, }: DynamicTableProps): import("react/jsx-runtime").JSX.Element;
+export default DynamicTable;
--- a/viewer/src/components/DynamicTable.js
+++ b/viewer/src/components/DynamicTable.js
@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { addDays, format } from "date-fns";
+import { ArrowUpDown, Calendar as CalendarIcon, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react";
+import { useMemo, useState, Fragment } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card, CardContent } from "@/components/ui/card";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+const DEFAULT_COLUMN_ORDER = [
+    "id",
+    "title",
+    "contents",
+    "issues",
+    "customer",
+    "updatedAt",
+];
+export function DynamicTable({ columns: rawColumns, data, projectId, channelId, }) {
+    const navigate = useNavigate();
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnVisibility, setColumnVisibility] = useState({});
+    const [expanded, setExpanded] = useState({});
+    const [globalFilter, setGlobalFilter] = useState("");
+    const [date, setDate] = useState();
+    const columns = useMemo(() => {
+        const orderedRawColumns = [...rawColumns].sort((a, b) => {
+            const indexA = DEFAULT_COLUMN_ORDER.indexOf(a.id);
+            const indexB = DEFAULT_COLUMN_ORDER.indexOf(b.id);
+            if (indexA === -1 && indexB === -1)
+                return 0;
+            if (indexA === -1)
+                return 1;
+            if (indexB === -1)
+                return -1;
+            return indexA - indexB;
+        });
+        const generatedColumns = orderedRawColumns.map((field) => ({
+            accessorKey: field.id,
+            header: ({ column }) => {
+                if (field.id === "issues") {
+                    return _jsx("div", { children: field.name });
+                }
+                return (_jsxs(Button, { variant: "ghost", onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), children: [field.name, _jsx(ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
+            },
+            cell: ({ row }) => {
+                const value = row.original[field.id];
+                switch (field.id) {
+                    case "issues": {
+                        const issues = value;
+                        if (!issues || issues.length === 0)
+                            return "N/A";
+                        return (_jsx("div", { className: "flex flex-col space-y-1", children: issues.map((issue) => (_jsx(Link, { to: `/issues/${issue.id}`, className: "text-blue-600 hover:underline", onClick: (e) => e.stopPropagation(), children: issue.name }, issue.id))) }));
+                    }
+                    case "title":
+                        return (_jsx("div", { className: "whitespace-normal break-words w-48", children: String(value ?? "N/A") }));
+                    case "contents": {
+                        const content = String(value ?? "N/A");
+                        const truncated = content.length > 50
+                            ? `${content.substring(0, 50)}...`
+                            : content;
+                        return (_jsx("div", { className: "whitespace-normal break-words w-60", children: truncated }));
+                    }
+                    case "createdAt":
+                    case "updatedAt":
+                        return String(value ?? "N/A").substring(0, 10);
+                    default:
+                        if (typeof value === "object" && value !== null) {
+                            return JSON.stringify(value);
+                        }
+                        return String(value ?? "N/A");
+                }
+            },
+        }));
+        return [
+            {
+                id: "expander",
+                header: () => null,
+                cell: ({ row }) => {
+                    return (_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => {
+                            e.stopPropagation();
+                            row.toggleExpanded();
+                        }, children: row.getIsExpanded() ? "▼" : "▶" }));
+                },
+            },
+            ...generatedColumns,
+        ];
+    }, [rawColumns]);
+    const filteredData = useMemo(() => {
+        if (!date?.from) {
+            return data;
+        }
+        const fromDate = date.from;
+        const toDate = date.to ? addDays(date.to, 1) : addDays(fromDate, 1);
+        return data.filter((item) => {
+            const itemDate = new Date(item.updatedAt);
+            return itemDate >= fromDate && itemDate < toDate;
+        });
+    }, [data, date]);
+    const table = useReactTable({
+        data: filteredData,
+        columns,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onExpandedChange: setExpanded,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        initialState: {
+            pagination: {
+                pageSize: 20,
+            },
+        },
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+            expanded,
+            globalFilter,
+        },
+        onGlobalFilterChange: setGlobalFilter,
+    });
+    const handleRowClick = (feedbackId) => {
+        navigate(`/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}`);
+    };
+    return (_jsx(Card, { children: _jsxs(CardContent, { children: [_jsxs("div", { className: "flex items-center justify-between py-4", children: [_jsx(Input, { placeholder: "\uC804\uCCB4 \uB370\uC774\uD130\uC5D0\uC11C \uAC80\uC0C9...", value: globalFilter, onChange: (event) => setGlobalFilter(event.target.value), className: "max-w-sm" }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: "date", variant: "outline", className: cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground"), children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), date?.from ? (date.to ? (_jsxs(_Fragment, { children: [format(date.from, "LLL dd, y"), " -", " ", format(date.to, "LLL dd, y")] })) : (format(date.from, "LLL dd, y"))) : (_jsx("span", { children: "\uAE30\uAC04 \uC120\uD0DD" }))] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "end", children: _jsx(Calendar, { initialFocus: true, mode: "range", defaultMonth: date?.from, selected: date, onSelect: setDate, numberOfMonths: 2 }) })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: "ml-auto", children: ["\uCEEC\uB7FC \uD45C\uC2DC ", _jsx(ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), _jsx(DropdownMenuContent, { align: "end", children: table
+                                                .getAllColumns()
+                                                .filter((column) => column.getCanHide())
+                                                .map((column) => {
+                                                return (_jsx(DropdownMenuCheckboxItem, { className: "capitalize", checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: column.id }, column.id));
+                                            }) })] })] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { style: { width: header.getSize() }, children: header.isPlaceholder
+                                            ? null
+                                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (_jsxs(Fragment, { children: [_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", onClick: () => handleRowClick(row.original.id.toString()), className: "cursor-pointer hover:bg-muted/50", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }), row.getIsExpanded() && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 1, children: _jsxs("div", { className: "p-4 bg-muted rounded-md", children: [_jsx("h4", { className: "font-bold text-lg", children: row.original.title }), _jsx("p", { className: "mt-2 whitespace-pre-wrap", children: row.original.contents })] }) }) }, `${row.id}-expanded`))] }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length + 1, className: "h-24 text-center", children: "\uD45C\uC2DC\uD560 \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) })) })] }) }), _jsxs("div", { className: "flex items-center justify-between py-4", children: [_jsxs("div", { className: "flex-1 text-sm text-muted-foreground", children: ["\uCD1D ", table.getFilteredRowModel().rows.length, "\uAC1C"] }), _jsxs("div", { className: "flex items-center space-x-6", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-sm font-medium", children: "\uD398\uC774\uC9C0 \uB2F9 \uD589 \uC218" }), _jsxs(Select, { value: `${table.getState().pagination.pageSize}`, onValueChange: (value) => {
+                                                table.setPageSize(Number(value));
+                                            }, children: [_jsx(SelectTrigger, { className: "h-8 w-[70px]", children: _jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }), _jsx(SelectContent, { side: "top", children: [20, 30, 50].map((pageSize) => (_jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize))) })] })] }), _jsxs("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [table.getPageCount(), " \uD398\uC774\uC9C0 \uC911", " ", table.getState().pagination.pageIndex + 1] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsxs(Button, { variant: "outline", className: "hidden h-8 w-8 p-0 lg:flex", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: [_jsx("span", { className: "sr-only", children: "\uCCAB \uD398\uC774\uC9C0\uB85C" }), _jsx(ChevronsLeft, { className: "h-4 w-4" })] }), _jsxs(Button, { variant: "outline", className: "h-8 w-8 p-0", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [_jsx("span", { className: "sr-only", children: "\uC774\uC804 \uD398\uC774\uC9C0\uB85C" }), _jsx(ChevronLeft, { className: "h-4 w-4" })] }), _jsxs(Button, { variant: "outline", className: "h-8 w-8 p-0", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [_jsx("span", { className: "sr-only", children: "\uB2E4\uC74C \uD398\uC774\uC9C0\uB85C" }), _jsx(ChevronRight, { className: "h-4 w-4" })] }), _jsxs(Button, { variant: "outline", className: "hidden h-8 w-8 p-0 lg:flex", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: [_jsx("span", { className: "sr-only", children: "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0\uB85C" }), _jsx(ChevronsRight, { className: "h-4 w-4" })] })] })] })] })] }) }));
+}
+export default DynamicTable;
--- a/viewer/src/components/DynamicTable.tsx
+++ b/viewer/src/components/DynamicTable.tsx
@@ -23,13 +23,13 @@ import {
 	ChevronsLeft,
 	ChevronsRight,
 } from "lucide-react";
-import { useMemo, useState } from "react";
-import { DateRange } from "react-day-picker";
+import { useMemo, useState, Fragment } from "react";
+import type { DateRange } from "react-day-picker";
 import { Link, useNavigate } from "react-router-dom";

 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
@@ -242,7 +242,7 @@ export function DynamicTable({

 	return (
 		<Card>
-			<CardContent className="pt-6">
+			<CardContent>
 				<div className="flex items-center justify-between py-4">
 					<Input
 						placeholder="전체 데이터에서 검색..."
@@ -336,9 +336,8 @@ export function DynamicTable({
 						<TableBody>
 							{table.getRowModel().rows?.length ? (
 								table.getRowModel().rows.map((row) => (
-									<>
+									<Fragment key={row.id}>
 										<TableRow
-											key={row.id}
 											data-state={row.getIsSelected() && "selected"}
 											onClick={() => handleRowClick(row.original.id.toString())}
 											className="cursor-pointer hover:bg-muted/50"
@@ -353,7 +352,7 @@ export function DynamicTable({
 											))}
 										</TableRow>
 										{row.getIsExpanded() && (
-											<TableRow>
+											<TableRow key={`${row.id}-expanded`}>
 												<TableCell colSpan={columns.length + 1}>
 													<div className="p-4 bg-muted rounded-md">
 														<h4 className="font-bold text-lg">
@@ -366,7 +365,7 @@ export function DynamicTable({
 												</TableCell>
 											</TableRow>
 										)}
-									</>
+									</Fragment>
 								))
 							) : (
 								<TableRow>
--- a/viewer/src/components/ErrorDisplay.d.ts
+++ b/viewer/src/components/ErrorDisplay.d.ts
@@ -0,0 +1,5 @@
+interface ErrorDisplayProps {
+    message: string;
+}
+export declare function ErrorDisplay({ message }: ErrorDisplayProps): import("react/jsx-runtime").JSX.Element;
+export {};
--- a/viewer/src/components/ErrorDisplay.js
+++ b/viewer/src/components/ErrorDisplay.js
@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ErrorDisplay({ message }) {
+    return (_jsxs("div", { className: "bg-destructive/15 text-destructive p-4 rounded-md text-center", role: "alert", children: [_jsx("p", { className: "font-semibold", children: "\uC624\uB958 \uBC1C\uC0DD" }), _jsx("p", { className: "text-sm", children: message })] }));
+}
--- a/viewer/src/components/ErrorDisplay.tsx
+++ b/viewer/src/components/ErrorDisplay.tsx
@@ -1,97 +1,15 @@
-// src/components/ErrorDisplay.tsx
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-
 interface ErrorDisplayProps {
-	errorMessage: string | null;
+	message: string;
 }

-export const ErrorDisplay = ({ errorMessage }: ErrorDisplayProps) => {
-	if (!errorMessage) return null;
-
-	const prettifyJson = (text: string) => {
-		try {
-			const obj = JSON.parse(text);
-			return JSON.stringify(obj, null, 2);
-		} catch (e) {
-			return text;
-		}
-	};
-
-	// For production or simple errors
-	if (import.meta.env.PROD || !errorMessage.startsWith("[Dev]")) {
-		return (
-			<Card className="bg-destructive/10 border-destructive/50">
-				<CardHeader>
-					<CardTitle className="text-destructive">오류가 발생했습니다</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<pre className="text-sm text-destructive-foreground bg-destructive/20 p-4 rounded-md overflow-x-auto whitespace-pre-wrap">
-						<code>{errorMessage}</code>
-					</pre>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	// For dev errors, parse and display detailed information
-	const parts = errorMessage.split(" | ");
-	const message = parts[0]?.replace("[Dev] ", "");
-	const requestUrl = parts[1]?.replace("URL: ", "");
-	const status = parts[2]?.replace("Status: ", "");
-	const bodyRaw = parts.slice(3).join(" | ").replace("Body: ", "");
-	const body = bodyRaw === "Empty" ? "Empty" : prettifyJson(bodyRaw);
-
-	// Reconstruct the final proxied URL based on environment variables
-	let proxiedUrl = "프록시 URL을 계산할 수 없습니다.";
-	if (requestUrl) {
-		try {
-			const url = new URL(requestUrl);
-			const proxyTarget = import.meta.env.VITE_API_PROXY_TARGET;
-			// This logic MUST match the proxy rewrite in `vite.config.ts`
-			const finalPath = url.pathname.replace(/^\/api/, "/_api/api");
-			proxiedUrl = `${proxyTarget}${finalPath}`;
-		} catch (e) {
-			// Ignore if URL parsing fails
-		}
-	}
-
+export function ErrorDisplay({ message }: ErrorDisplayProps) {
 	return (
-		<Card className="bg-destructive/10 border-destructive/50">
-			<CardHeader>
-				<CardTitle className="text-destructive">
-					{message || "오류가 발생했습니다"}
-				</CardTitle>
-				<CardDescription className="text-destructive/80">
-					<div className="space-y-1 mt-2 text-xs">
-						<p>
-							<span className="font-semibold w-28 inline-block">요청 상태:</span>
-							<span className="font-mono">{status}</span>
-						</p>
-						<p>
-							<span className="font-semibold w-28 inline-block">Vite 서버 URL:</span>
-							<span className="font-mono">{requestUrl}</span>
-						</p>
-						<p>
-							<span className="font-semibold w-28 inline-block">최종 API URL:</span>
-							<span className="font-mono">{proxiedUrl}</span>
-						</p>
-					</div>
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<h4 className="font-bold mb-2 text-destructive-foreground/80">
-					Response Body:
-				</h4>
-				<pre className="text-sm text-destructive-foreground bg-destructive/20 p-4 rounded-md overflow-x-auto">
-					<code>{body}</code>
-				</pre>
-			</CardContent>
-		</Card>
+		<div
+			className="bg-destructive/15 text-destructive p-4 rounded-md text-center"
+			role="alert"
+		>
+			<p className="font-semibold">오류 발생</p>
+			<p className="text-sm">{message}</p>
+		</div>
 	);
-};
+}
--- a/viewer/src/components/Header.d.ts
+++ b/viewer/src/components/Header.d.ts
@@ -0,0 +1 @@
+export declare function Header(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/components/Header.js
+++ b/viewer/src/components/Header.js
@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavLink } from "react-router-dom";
+import { ProjectSelectBox } from "./ProjectSelectBox";
+import { Separator } from "./ui/separator";
+import { ThemeSelectBox } from "./ThemeSelectBox";
+import { LanguageSelectBox } from "./LanguageSelectBox";
+import { UserProfileBox } from "./UserProfileBox";
+import { useSettingsStore } from "@/store/useSettingsStore";
+const menuItems = [
+    { name: "Landing", path: "/" },
+    { name: "Feedback", path: "/feedbacks" },
+    { name: "Issue", path: "/issues" },
+];
+export function Header() {
+    const projectId = useSettingsStore((state) => state.projectId);
+    const getFullPath = (path) => {
+        if (path === "/")
+            return `/projects/${projectId}`; // Landing 페이지 경로 예시
+        if (path.startsWith("/")) {
+            return `/projects/${projectId}/channels/4${path}`; // 채널 ID는 4로 고정
+        }
+        return path;
+    };
+    return (_jsxs("header", { className: "flex h-16 items-center border-b px-4", children: [_jsx(ProjectSelectBox, {}), _jsx(Separator, { orientation: "vertical", className: "mx-4 h-8" }), _jsx("nav", { className: "flex items-center space-x-4 lg:space-x-6 flex-1", children: menuItems.map((item) => (_jsx(NavLink, { to: getFullPath(item.path), className: ({ isActive }) => `text-sm font-medium transition-colors hover:text-primary ${!isActive ? "text-muted-foreground" : ""}`, children: item.name }, item.name))) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ThemeSelectBox, {}), _jsx(LanguageSelectBox, {}), _jsx(UserProfileBox, {})] })] }));
+}
--- a/viewer/src/components/Header.tsx
+++ b/viewer/src/components/Header.tsx
@@ -0,0 +1,52 @@
+import { NavLink } from "react-router-dom";
+import { ProjectSelectBox } from "./ProjectSelectBox";
+import { Separator } from "./ui/separator";
+import { ThemeSelectBox } from "./ThemeSelectBox";
+import { LanguageSelectBox } from "./LanguageSelectBox";
+import { UserProfileBox } from "./UserProfileBox";
+import { useSettingsStore } from "@/store/useSettingsStore";
+
+const menuItems = [
+	{ name: "Landing", path: "/" },
+	{ name: "Feedback", path: "/feedbacks" },
+	{ name: "Issue", path: "/issues" },
+];
+
+export function Header() {
+	const projectId = useSettingsStore((state) => state.projectId);
+
+	const getFullPath = (path: string) => {
+		if (path === "/") return `/projects/${projectId}`; // Landing 페이지 경로 예시
+		if (path.startsWith("/")) {
+			return `/projects/${projectId}/channels/4${path}`; // 채널 ID는 4로 고정
+		}
+		return path;
+	};
+
+	return (
+		<header className="flex h-16 items-center border-b px-4">
+			<ProjectSelectBox />
+			<Separator orientation="vertical" className="mx-4 h-8" />
+			<nav className="flex items-center space-x-4 lg:space-x-6 flex-1">
+				{menuItems.map((item) => (
+					<NavLink
+						key={item.name}
+						to={getFullPath(item.path)}
+						className={({ isActive }) =>
+							`text-sm font-medium transition-colors hover:text-primary ${
+								!isActive ? "text-muted-foreground" : ""
+							}`
+						}
+					>
+						{item.name}
+					</NavLink>
+				))}
+			</nav>
+			<div className="flex items-center gap-3">
+				<ThemeSelectBox />
+				<LanguageSelectBox />
+				<UserProfileBox />
+			</div>
+		</header>
+	);
+}
--- a/viewer/src/components/LanguageSelectBox.d.ts
+++ b/viewer/src/components/LanguageSelectBox.d.ts
@@ -0,0 +1 @@
+export declare function LanguageSelectBox(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/components/LanguageSelectBox.js
+++ b/viewer/src/components/LanguageSelectBox.js
@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Languages } from "lucide-react";
+import { Button } from "./ui/button";
+export function LanguageSelectBox() {
+    return (_jsxs(Button, { variant: "ghost", size: "icon", children: [_jsx(Languages, {}), _jsx("span", { className: "sr-only", children: "\uC5B8\uC5B4 \uBCC0\uACBD" })] }));
+}
--- a/viewer/src/components/LanguageSelectBox.tsx
+++ b/viewer/src/components/LanguageSelectBox.tsx
@@ -0,0 +1,11 @@
+import { Languages } from "lucide-react";
+import { Button } from "./ui/button";
+
+export function LanguageSelectBox() {
+	return (
+		<Button variant="ghost" size="icon">
+			<Languages />
+			<span className="sr-only">언어 변경</span>
+		</Button>
+	);
+}
--- a/viewer/src/components/MainLayout.d.ts
+++ b/viewer/src/components/MainLayout.d.ts
@@ -0,0 +1 @@
+export declare function MainLayout(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/components/MainLayout.js
+++ b/viewer/src/components/MainLayout.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/MainLayout.tsx
+import { Outlet } from "react-router-dom";
+import { Header } from "./Header";
+export function MainLayout() {
+    return (_jsxs("div", { className: "flex flex-col min-h-screen", children: [_jsx(Header, {}), _jsx("main", { className: "flex-1 p-6", children: _jsx(Outlet, {}) })] }));
+}
--- a/viewer/src/components/MainLayout.tsx
+++ b/viewer/src/components/MainLayout.tsx
@@ -1,16 +1,12 @@
 // src/components/MainLayout.tsx
-import { Link, Outlet, useParams } from "react-router-dom";
-import { Button } from "@/components/ui/button";
+import { Outlet } from "react-router-dom";
+import { Header } from "./Header";

 export function MainLayout() {
-	const { projectId, channelId } = useParams();
-
 	return (
-		<div className="container mx-auto p-4 md:p-8">
-			<header className="mb-8 flex justify-between items-center">
-				<h1 className="text-3xl font-bold tracking-tight">피드백 뷰어</h1>
-			</header>
-			<main>
+		<div className="flex flex-col min-h-screen">
+			<Header />
+			<main className="flex-1 p-6">
 				<Outlet />
 			</main>
 		</div>
--- a/viewer/src/components/ProjectSelectBox.d.ts
+++ b/viewer/src/components/ProjectSelectBox.d.ts
@@ -0,0 +1 @@
+export declare function ProjectSelectBox(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/components/ProjectSelectBox.js
+++ b/viewer/src/components/ProjectSelectBox.js
@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";
+import { getProjects } from "@/services/project";
+import { useSettingsStore } from "@/store/useSettingsStore";
+export function ProjectSelectBox() {
+    const [projects, setProjects] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const { projectId, setProjectId } = useSettingsStore();
+    useEffect(() => {
+        getProjects().then((loadedProjects) => {
+            setProjects(loadedProjects);
+            // 로드된 프로젝트 목록에 현재 ID가 없으면, 첫 번째 프로젝트로 ID를 설정
+            if (loadedProjects.length > 0 &&
+                !loadedProjects.find((p) => p.id === projectId)) {
+                setProjectId(loadedProjects[0].id);
+            }
+            setIsLoading(false);
+        });
+    }, []); // 마운트 시 한 번만 실행
+    if (isLoading) {
+        return (_jsx("div", { className: "w-[180px] h-10 bg-muted rounded-md animate-pulse" }));
+    }
+    return (_jsxs(Select, { value: projectId ?? "", onValueChange: setProjectId, children: [_jsx(SelectTrigger, { className: "w-[180px]", children: _jsx(SelectValue, { placeholder: "\uD504\uB85C\uC81D\uD2B8 \uC120\uD0DD" }) }), _jsx(SelectContent, { children: projects.map((p) => (_jsx(SelectItem, { value: p.id, children: p.name }, p.id))) })] }));
+}
--- a/viewer/src/components/ProjectSelectBox.tsx
+++ b/viewer/src/components/ProjectSelectBox.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { getProjects, type Project } from "@/services/project";
+import { useSettingsStore } from "@/store/useSettingsStore";
+
+export function ProjectSelectBox() {
+	const [projects, setProjects] = useState<Project[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
+	const { projectId, setProjectId } = useSettingsStore();
+
+	useEffect(() => {
+		getProjects().then((loadedProjects) => {
+			setProjects(loadedProjects);
+			// 로드된 프로젝트 목록에 현재 ID가 없으면, 첫 번째 프로젝트로 ID를 설정
+			if (
+				loadedProjects.length > 0 &&
+				!loadedProjects.find((p) => p.id === projectId)
+			) {
+				setProjectId(loadedProjects[0].id);
+			}
+			setIsLoading(false);
+		});
+	}, []); // 마운트 시 한 번만 실행
+
+	if (isLoading) {
+		return (
+			<div className="w-[180px] h-10 bg-muted rounded-md animate-pulse" />
+		);
+	}
+
+	return (
+		<Select value={projectId ?? ""} onValueChange={setProjectId}>
+			<SelectTrigger className="w-[180px]">
+				<SelectValue placeholder="프로젝트 선택" />
+			</SelectTrigger>
+			<SelectContent>
+				{projects.map((p) => (
+					<SelectItem key={p.id} value={p.id}>
+						{p.name}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
+}
--- a/viewer/src/components/ThemeSelectBox.d.ts
+++ b/viewer/src/components/ThemeSelectBox.d.ts
@@ -0,0 +1 @@
+export declare function ThemeSelectBox(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/components/ThemeSelectBox.js
+++ b/viewer/src/components/ThemeSelectBox.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Moon, Sun, Laptop } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu";
+import { useSettingsStore } from "@/store/useSettingsStore";
+export function ThemeSelectBox() {
+    const { setTheme } = useSettingsStore();
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", children: [_jsx(Sun, { className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }), _jsx(Moon, { className: "absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }), _jsx("span", { className: "sr-only", children: "\uD14C\uB9C8 \uBCC0\uACBD" })] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => setTheme("light"), children: [_jsx(Sun, { className: "mr-2 h-4 w-4" }), "Light"] }), _jsxs(DropdownMenuItem, { onClick: () => setTheme("dark"), children: [_jsx(Moon, { className: "mr-2 h-4 w-4" }), "Dark"] }), _jsxs(DropdownMenuItem, { onClick: () => setTheme("system"), children: [_jsx(Laptop, { className: "mr-2 h-4 w-4" }), "System"] })] })] }));
+}
--- a/viewer/src/components/ThemeSelectBox.tsx
+++ b/viewer/src/components/ThemeSelectBox.tsx
@@ -0,0 +1,39 @@
+import { Moon, Sun, Laptop } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useSettingsStore } from "@/store/useSettingsStore";
+
+export function ThemeSelectBox() {
+	const { setTheme } = useSettingsStore();
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button variant="ghost" size="icon">
+					<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+					<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+					<span className="sr-only">테마 변경</span>
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuItem onClick={() => setTheme("light")}>
+					<Sun className="mr-2 h-4 w-4" />
+					Light
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("dark")}>
+					<Moon className="mr-2 h-4 w-4" />
+					Dark
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme("system")}>
+					<Laptop className="mr-2 h-4 w-4" />
+					System
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
--- a/viewer/src/components/UserProfileBox.d.ts
+++ b/viewer/src/components/UserProfileBox.d.ts
@@ -0,0 +1 @@
+export declare function UserProfileBox(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/components/UserProfileBox.js
+++ b/viewer/src/components/UserProfileBox.js
@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircleUser } from "lucide-react";
+import { Button } from "./ui/button";
+export function UserProfileBox() {
+    return (_jsxs(Button, { variant: "ghost", size: "icon", children: [_jsx(CircleUser, {}), _jsx("span", { className: "sr-only", children: "\uC0AC\uC6A9\uC790 \uD504\uB85C\uD544" })] }));
+}
--- a/viewer/src/components/UserProfileBox.tsx
+++ b/viewer/src/components/UserProfileBox.tsx
@@ -0,0 +1,11 @@
+import { CircleUser } from "lucide-react";
+import { Button } from "./ui/button";
+
+export function UserProfileBox() {
+	return (
+		<Button variant="ghost" size="icon">
+			<CircleUser />
+			<span className="sr-only">사용자 프로필</span>
+		</Button>
+	);
+}
--- a/viewer/src/components/providers/ThemeProvider.d.ts
+++ b/viewer/src/components/providers/ThemeProvider.d.ts
@@ -0,0 +1,5 @@
+interface ThemeProviderProps {
+    children: React.ReactNode;
+}
+export declare function ThemeProvider({ children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};
--- a/viewer/src/components/providers/ThemeProvider.js
+++ b/viewer/src/components/providers/ThemeProvider.js
@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useSettingsStore } from "@/store/useSettingsStore";
+export function ThemeProvider({ children }) {
+    const theme = useSettingsStore((state) => state.theme);
+    useEffect(() => {
+        const root = window.document.documentElement;
+        root.classList.remove("light", "dark");
+        if (theme === "system") {
+            const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+                .matches
+                ? "dark"
+                : "light";
+            root.classList.add(systemTheme);
+            return;
+        }
+        root.classList.add(theme);
+    }, [theme]);
+    return _jsx(_Fragment, { children: children });
+}
--- a/viewer/src/components/providers/ThemeProvider.tsx
+++ b/viewer/src/components/providers/ThemeProvider.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import { useSettingsStore } from "@/store/useSettingsStore";
+
+interface ThemeProviderProps {
+	children: React.ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+	const theme = useSettingsStore((state) => state.theme);
+
+	useEffect(() => {
+		const root = window.document.documentElement;
+		root.classList.remove("light", "dark");
+
+		if (theme === "system") {
+			const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+				.matches
+				? "dark"
+				: "light";
+			root.classList.add(systemTheme);
+			return;
+		}
+
+		root.classList.add(theme);
+	}, [theme]);
+
+	return <>{children}</>;
+}
--- a/viewer/src/components/ui/button.d.ts
+++ b/viewer/src/components/ui/button.d.ts
@@ -0,0 +1,10 @@
+import type * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };
--- a/viewer/src/components/ui/button.js
+++ b/viewer/src/components/ui/button.js
@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };
--- a/viewer/src/components/ui/calendar.d.ts
+++ b/viewer/src/components/ui/calendar.d.ts
@@ -0,0 +1,8 @@
+import * as React from "react";
+import { DayButton, DayPicker } from "react-day-picker";
+import { Button } from "@/components/ui/button";
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): import("react/jsx-runtime").JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };
--- a/viewer/src/components/ui/calendar.js
+++ b/viewer/src/components/ui/calendar.js
@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
+import { cn } from "@/lib/utils";
+import { Button, buttonVariants } from "@/components/ui/button";
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: cn("w-fit", defaultClassNames.root),
+            months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+            month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+            nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_next),
+            month_caption: cn("flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]", defaultClassNames.month_caption),
+            dropdowns: cn("flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+            dropdown_root: cn("has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border", defaultClassNames.dropdown_root),
+            dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
+            caption_label: cn("select-none font-medium", captionLayout === "label"
+                ? "text-sm"
+                : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5", defaultClassNames.caption_label),
+            table: "w-full border-collapse",
+            weekdays: cn("flex", defaultClassNames.weekdays),
+            weekday: cn("text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal", defaultClassNames.weekday),
+            week: cn("mt-2 flex w-full", defaultClassNames.week),
+            week_number_header: cn("w-[--cell-size] select-none", defaultClassNames.week_number_header),
+            week_number: cn("text-muted-foreground select-none text-[0.8rem]", defaultClassNames.week_number),
+            day: cn("group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
+            range_start: cn("bg-accent rounded-l-md", defaultClassNames.range_start),
+            range_middle: cn("rounded-none", defaultClassNames.range_middle),
+            range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+            today: cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
+            outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+            disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+            hidden: cn("invisible", defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === "left") {
+                    return (_jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props }));
+                }
+                if (orientation === "right") {
+                    return (_jsx(ChevronRightIcon, { className: cn("size-4", className), ...props }));
+                }
+                return (_jsx(ChevronDownIcon, { className: cn("size-4", className), ...props }));
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...props }) => {
+                return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-[--cell-size] items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+}
+export { Calendar, CalendarDayButton };
--- a/viewer/src/components/ui/card.d.ts
+++ b/viewer/src/components/ui/card.d.ts
@@ -0,0 +1,9 @@
+import type * as React from "react";
+declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
--- a/viewer/src/components/ui/card.js
+++ b/viewer/src/components/ui/card.js
@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@/lib/utils";
+function Card({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("leading-none font-semibold", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-muted-foreground text-sm", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-6", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center px-6 [.border-t]:pt-6", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
--- a/viewer/src/components/ui/dropdown-menu.d.ts
+++ b/viewer/src/components/ui/dropdown-menu.d.ts
@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };
--- a/viewer/src/components/ui/dropdown-menu.js
+++ b/viewer/src/components/ui/dropdown-menu.js
@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", inset && "pl-8", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] })));
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.SubContent, { ref: ref, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", className), ...props })));
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]", className), ...props }) })));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", inset && "pl-8", className), ...props })));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), children] })));
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(DotFilledIcon, { className: "h-2 w-2 fill-current" }) }) }), children] })));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props })));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = ({ className, ...props }) => {
+    return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props }));
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };
--- a/viewer/src/components/ui/input.d.ts
+++ b/viewer/src/components/ui/input.d.ts
@@ -0,0 +1,3 @@
+import type * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): import("react/jsx-runtime").JSX.Element;
+export { Input };
--- a/viewer/src/components/ui/input.js
+++ b/viewer/src/components/ui/input.js
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@/lib/utils";
+function Input({ className, type, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className), ...props }));
+}
+export { Input };
--- a/viewer/src/components/ui/label.d.ts
+++ b/viewer/src/components/ui/label.d.ts
@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };
--- a/viewer/src/components/ui/label.js
+++ b/viewer/src/components/ui/label.js
@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn(labelVariants(), className), ...props })));
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label };
--- a/viewer/src/components/ui/popover.d.ts
+++ b/viewer/src/components/ui/popover.d.ts
@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/viewer/src/components/ui/popover.js
+++ b/viewer/src/components/ui/popover.js
@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "@/lib/utils";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]", className), ...props }) })));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/viewer/src/components/ui/select.d.ts
+++ b/viewer/src/components/ui/select.d.ts
@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
--- a/viewer/src/components/ui/select.js
+++ b/viewer/src/components/ui/select.js
@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "h-4 w-4 opacity-50" }) })] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, { className: "h-4 w-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) })));
+SelectScrollDownButton.displayName =
+    SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn("relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]", position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
+                    "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
--- a/viewer/src/components/ui/separator.d.ts
+++ b/viewer/src/components/ui/separator.d.ts
@@ -0,0 +1,4 @@
+import type * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };
--- a/viewer/src/components/ui/separator.js
+++ b/viewer/src/components/ui/separator.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/lib/utils";
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className), ...props }));
+}
+export { Separator };
--- a/viewer/src/components/ui/table.d.ts
+++ b/viewer/src/components/ui/table.d.ts
@@ -0,0 +1,10 @@
+import * as React from "react";
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
--- a/viewer/src/components/ui/table.js
+++ b/viewer/src/components/ui/table.js
@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+const Table = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props }) })));
+Table.displayName = "Table";
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("[&_tr]:border-b", className), ...props })));
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn("[&_tr:last-child]:border-0", className), ...props })));
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })));
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className), ...props })));
+TableRow.displayName = "TableRow";
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props })));
+TableHead.displayName = "TableHead";
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (_jsx("td", { ref: ref, className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props })));
+TableCell.displayName = "TableCell";
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })));
+TableCaption.displayName = "TableCaption";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
--- a/viewer/src/components/ui/textarea.d.ts
+++ b/viewer/src/components/ui/textarea.d.ts
@@ -0,0 +1,3 @@
+import type * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
+export { Textarea };
--- a/viewer/src/components/ui/textarea.js
+++ b/viewer/src/components/ui/textarea.js
@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@/lib/utils";
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className), ...props }));
+}
+export { Textarea };
--- a/viewer/src/index.css
+++ b/viewer/src/index.css
@@ -1,121 +1,74 @@
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
@tailwind base;
@tailwind components;
@tailwind utilities;

-@theme inline {
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
-	--color-background: var(--background);
-	--color-foreground: var(--foreground);
-	--color-card: var(--card);
-	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
-	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
-	--color-muted: var(--muted);
-	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
-	--color-destructive: var(--destructive);
-	--color-border: var(--border);
-	--color-input: var(--input);
-	--color-ring: var(--ring);
-	--color-chart-1: var(--chart-1);
-	--color-chart-2: var(--chart-2);
-	--color-chart-3: var(--chart-3);
-	--color-chart-4: var(--chart-4);
-	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-}
+@layer base {
+	:root {
+		--radius: 0.625rem;
+		/* Laracon Light Theme */
+		--background: oklch(0.98 0.01 240); /* Very light gray */
+		--foreground: oklch(0.2 0.02 240); /* Dark gray */
+		--card: oklch(1 0 0); /* White */
+		--card-foreground: oklch(0.2 0.02 240);
+		--popover: oklch(1 0 0);
+		--popover-foreground: oklch(0.2 0.02 240);
+		--primary: oklch(0.65 0.22 25); /* Laracon Red-Orange */
+		--primary-foreground: oklch(0.98 0.01 240);
+		--secondary: oklch(0.94 0.02 240);
+		--secondary-foreground: oklch(0.2 0.02 240);
+		--muted: oklch(0.94 0.02 240);
+		--muted-foreground: oklch(0.5 0.02 240);
+		--accent: oklch(0.96 0.02 240);
+		--accent-foreground: oklch(0.2 0.02 240);
+		--destructive: oklch(0.65 0.22 25);
+		--border: oklch(0.9 0.02 240);
+		--input: oklch(0.9 0.02 240);
+		--ring: oklch(0.65 0.22 25);
+		--sidebar: oklch(0.98 0.01 240);
+		--sidebar-foreground: oklch(0.2 0.02 240);
+		--sidebar-primary: oklch(0.65 0.22 25);
+		--sidebar-primary-foreground: oklch(0.98 0.01 240);
+		--sidebar-accent: oklch(0.94 0.02 240);
+		--sidebar-accent-foreground: oklch(0.2 0.02 240);
+		--sidebar-border: oklch(0.9 0.02 240);
+		--sidebar-ring: oklch(0.65 0.22 25);
+	}

-:root {
-	--radius: 0.625rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
-	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.145 0 0);
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
-	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.646 0.222 41.116);
-	--chart-2: oklch(0.6 0.118 184.704);
-	--chart-3: oklch(0.398 0.07 227.392);
-	--chart-4: oklch(0.828 0.189 84.429);
-	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.145 0 0);
-	--sidebar-primary: oklch(0.205 0 0);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.97 0 0);
-	--sidebar-accent-foreground: oklch(0.205 0 0);
-	--sidebar-border: oklch(0.922 0 0);
-	--sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-	--background: oklch(0.22 0.03 265); /* Dracula Background */
-	--foreground: oklch(0.97 0.01 265); /* Dracula Foreground */
-	--card: oklch(0.31 0.04 265); /* Dracula Current Line */
-	--card-foreground: oklch(0.97 0.01 265); /* Dracula Foreground */
-	--popover: oklch(0.31 0.04 265); /* Dracula Current Line - Opaque */
-	--popover-foreground: oklch(0.97 0.01 265); /* Dracula Foreground */
-	--primary: oklch(0.7 0.15 290); /* Dracula Purple */
-	--primary-foreground: oklch(0.22 0.03 265); /* Dracula Background for contrast */
-	--secondary: oklch(0.45 0.1 265); /* Dracula Comment */
-	--secondary-foreground: oklch(0.97 0.01 265); /* Dracula Foreground */
-	--muted: oklch(0.31 0.04 265);
-	--muted-foreground: oklch(0.65 0.05 265);
-	--accent: oklch(0.8 0.15 320); /* Dracula Pink */
-	--accent-foreground: oklch(0.22 0.03 265);
-	--destructive: oklch(0.65 0.2 15); /* Dracula Red */
-	--border: oklch(0.45 0.1 265 / 0.5); /* Dracula Comment with transparency */
-	--input: oklch(0.45 0.1 265 / 0.5); /* Dracula Comment with transparency */
-	--ring: oklch(0.7 0.15 290); /* Dracula Purple */
-	--chart-1: oklch(0.85 0.15 180); /* Dracula Cyan */
-	--chart-2: oklch(0.8 0.2 130); /* Dracula Green */
-	--chart-3: oklch(0.8 0.15 80); /* Dracula Orange */
-	--chart-4: oklch(0.8 0.15 320); /* Dracula Pink */
-	--chart-5: oklch(0.9 0.1 90); /* Dracula Yellow */
-	--sidebar: oklch(0.22 0.03 265);
-	--sidebar-foreground: oklch(0.97 0.01 265);
-	--sidebar-primary: oklch(0.7 0.15 290);
-	--sidebar-primary-foreground: oklch(0.22 0.03 265);
-	--sidebar-accent: oklch(0.31 0.04 265);
-	--sidebar-accent-foreground: oklch(0.97 0.01 265);
-	--sidebar-border: oklch(0.45 0.1 265 / 0.5);
-	--sidebar-ring: oklch(0.7 0.15 290);
+	.dark {
+		/* Custom Dark Theme based on user's CSS */
+		--background: oklch(0.15 0.02 240); /* Very dark blue-gray */
+		--foreground: oklch(0.95 0.01 240); /* Light gray */
+		--card: oklch(0.2 0.02 240);
+		--card-foreground: oklch(0.95 0.01 240);
+		--popover: oklch(0.2 0.02 240);
+		--popover-foreground: oklch(0.95 0.01 240);
+		--primary: oklch(0.6 0.11 220); /* Vivid Blue from user's CSS */
+		--primary-foreground: oklch(0.98 0.01 240);
+		--secondary: oklch(0.3 0.02 240);
+		--secondary-foreground: oklch(0.95 0.01 240);
+		--muted: oklch(0.3 0.02 240);
+		--muted-foreground: oklch(0.6 0.02 240);
+		--accent: oklch(0.4 0.05 230);
+		--accent-foreground: oklch(0.95 0.01 240);
+		--destructive: oklch(0.65 0.2 15); /* Red */
+		--border: oklch(0.3 0.02 240);
+		--input: oklch(0.3 0.02 240);
+		--ring: oklch(0.6 0.11 220);
+		--sidebar: oklch(0.15 0.02 240);
+		--sidebar-foreground: oklch(0.95 0.01 240);
+		--sidebar-primary: oklch(0.6 0.11 220);
+		--sidebar-primary-foreground: oklch(0.98 0.01 240);
+		--sidebar-accent: oklch(0.3 0.02 240);
+		--sidebar-accent-foreground: oklch(0.95 0.01 240);
+		--sidebar-border: oklch(0.3 0.02 240);
+		--sidebar-ring: oklch(0.6 0.11 220);
+	}
 }

@layer base {
 	* {
-		@apply border-border outline-ring/50;
+		@apply border-border;
+		outline-color: oklch(var(--ring) / 0.5);
 	}
 	body {
 		@apply bg-background text-foreground;
--- a/viewer/src/lib/utils.d.ts
+++ b/viewer/src/lib/utils.d.ts
@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
--- a/viewer/src/lib/utils.js
+++ b/viewer/src/lib/utils.js
@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
--- a/viewer/src/main.d.ts
+++ b/viewer/src/main.d.ts
@@ -0,0 +1 @@
+import "./index.css";
--- a/viewer/src/main.js
+++ b/viewer/src/main.js
@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App.tsx";
+import "./index.css";
+createRoot(document.getElementById("root")).render(_jsx(StrictMode, { children: _jsx(BrowserRouter, { children: _jsx(App, {}) }) }));
--- a/viewer/src/pages/FeedbackCreatePage.d.ts
+++ b/viewer/src/pages/FeedbackCreatePage.d.ts
@@ -0,0 +1 @@
+export declare function FeedbackCreatePage(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/pages/FeedbackCreatePage.js
+++ b/viewer/src/pages/FeedbackCreatePage.js
@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { DynamicForm } from "@/components/DynamicForm";
+import { getFeedbackFields, createFeedback } from "@/services/feedback";
+import { ErrorDisplay } from "@/components/ErrorDisplay";
+import { Separator } from "@/components/ui/separator";
+export function FeedbackCreatePage() {
+    const navigate = useNavigate();
+    const [fields, setFields] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [submitMessage, setSubmitMessage] = useState(null);
+    // TODO: projectId와 channelId는 URL 파라미터나 컨텍스트에서 가져와야 합니다.
+    const projectId = "1";
+    const channelId = "4";
+    useEffect(() => {
+        const fetchFields = async () => {
+            try {
+                setLoading(true);
+                const fieldsData = await getFeedbackFields(projectId, channelId);
+                // 사용자에게 보여주지 않을 필드 목록
+                const hiddenFields = ["id", "createdAt", "updatedAt", "issues"];
+                const processedFields = fieldsData
+                    .filter((field) => !hiddenFields.includes(field.id))
+                    .map((field) => {
+                    // 'contents' 필드를 항상 textarea로 처리
+                    if (field.id === "contents") {
+                        return { ...field, type: "textarea" };
+                    }
+                    return field;
+                });
+                setFields(processedFields);
+            }
+            catch (err) {
+                if (err instanceof Error) {
+                    setError(err.message);
+                }
+                else {
+                    setError("알 수 없는 오류가 발생했습니다.");
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchFields();
+    }, [projectId, channelId]);
+    const handleSubmit = async (formData) => {
+        try {
+            setError(null);
+            setSubmitMessage(null);
+            const requestData = {
+                ...formData,
+                issueNames: [],
+            };
+            await createFeedback(projectId, channelId, requestData);
+            setSubmitMessage("피드백이 성공적으로 등록되었습니다! 곧 목록으로 돌아갑니다.");
+            // 2초 후 목록 페이지로 이동
+            setTimeout(() => {
+                navigate(`/projects/${projectId}/channels/${channelId}/feedbacks`);
+            }, 2000);
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                setError(err.message);
+            }
+            else {
+                setError("피드백 등록 중 알 수 없는 오류가 발생했습니다.");
+            }
+            throw err;
+        }
+    };
+    if (loading) {
+        return _jsx("div", { children: "\uD3FC\uC744 \uBD88\uB7EC\uC624\uB294 \uC911..." });
+    }
+    return (_jsxs("div", { className: "container mx-auto p-4", children: [_jsxs("div", { className: "space-y-2 mb-6", children: [_jsx("h1", { className: "text-2xl font-bold", children: "\uD53C\uB4DC\uBC31 \uC791\uC131" }), _jsx("p", { className: "text-muted-foreground", children: "\uC544\uB798 \uD3FC\uC744 \uC791\uC131\uD558\uC5EC \uD53C\uB4DC\uBC31\uC744 \uC81C\uCD9C\uD574\uC8FC\uC138\uC694." })] }), _jsx(Separator, {}), _jsxs("div", { className: "mt-6", children: [_jsx(DynamicForm, { fields: fields, onSubmit: handleSubmit }), error && _jsx(ErrorDisplay, { message: error }), submitMessage && (_jsx("div", { className: "mt-4 p-3 bg-green-100 text-green-800 rounded-md", children: submitMessage }))] })] }));
+}
--- a/viewer/src/pages/FeedbackDetailPage.d.ts
+++ b/viewer/src/pages/FeedbackDetailPage.d.ts
@@ -0,0 +1 @@
+export declare function FeedbackDetailPage(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/pages/FeedbackDetailPage.js
+++ b/viewer/src/pages/FeedbackDetailPage.js
@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { DynamicForm } from "@/components/DynamicForm";
+import { getFeedbackFields, getFeedbackById, updateFeedback, } from "@/services/feedback";
+import { ErrorDisplay } from "@/components/ErrorDisplay";
+import { Separator } from "@/components/ui/separator";
+export function FeedbackDetailPage() {
+    const { projectId, channelId, feedbackId } = useParams();
+    const navigate = useNavigate();
+    const [fields, setFields] = useState([]);
+    const [feedback, setFeedback] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    const initialData = useMemo(() => feedback ?? {}, [feedback]);
+    useEffect(() => {
+        const fetchData = async () => {
+            if (!projectId || !channelId || !feedbackId)
+                return;
+            try {
+                setLoading(true);
+                const [fieldsData, feedbackData] = await Promise.all([
+                    getFeedbackFields(projectId, channelId),
+                    getFeedbackById(projectId, channelId, feedbackId),
+                ]);
+                // 폼에서 숨길 필드 목록
+                const hiddenFields = ["id", "createdAt", "updatedAt", "issues", "screenshot"];
+                const processedFields = fieldsData
+                    .filter((field) => !hiddenFields.includes(field.id))
+                    .map((field) => {
+                    // 'contents' 필드는 항상 textarea로
+                    if (field.id === "contents") {
+                        return { ...field, type: "textarea" };
+                    }
+                    // 'customer' 필드는 읽기 전용으로
+                    if (field.id === "customer") {
+                        return { ...field, readOnly: true };
+                    }
+                    return field;
+                });
+                setFields(processedFields);
+                setFeedback(feedbackData);
+            }
+            catch (err) {
+                if (err instanceof Error) {
+                    setError(err.message);
+                }
+                else {
+                    setError("데이터를 불러오는 중 알 수 없는 오류가 발생했습니다.");
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, [projectId, channelId, feedbackId]);
+    const handleSubmit = async (formData) => {
+        if (!projectId || !channelId || !feedbackId)
+            return;
+        try {
+            setError(null);
+            setSuccessMessage(null);
+            // API에 전송할 데이터 정제 (수정 가능한 필드만 포함)
+            const dataToUpdate = {};
+            fields.forEach(field => {
+                if (!field.readOnly && formData[field.id] !== undefined) {
+                    dataToUpdate[field.id] = formData[field.id];
+                }
+            });
+            console.log("Updating with data:", dataToUpdate); // [Debug]
+            await updateFeedback(projectId, channelId, feedbackId, dataToUpdate);
+            setSuccessMessage("피드백이 성공적으로 수정되었습니다! 곧 목록으로 돌아갑니다.");
+            setTimeout(() => {
+                navigate(`/projects/${projectId}/channels/${channelId}/feedbacks`);
+            }, 2000);
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                setError(err.message);
+            }
+            else {
+                setError("피드백 수정 중 알 수 없는 오류가 발생했습니다.");
+            }
+            throw err;
+        }
+    };
+    if (loading) {
+        return _jsx("div", { children: "\uB85C\uB529 \uC911..." });
+    }
+    if (error) {
+        return _jsx(ErrorDisplay, { message: error });
+    }
+    return (_jsxs("div", { className: "container mx-auto p-4", children: [_jsxs("div", { className: "space-y-2 mb-6", children: [_jsx("h1", { className: "text-2xl font-bold", children: "\uD53C\uB4DC\uBC31 \uC0C1\uC138 \uBC0F \uC218\uC815" }), _jsx("p", { className: "text-muted-foreground", children: "\uD53C\uB4DC\uBC31 \uB0B4\uC6A9\uC744 \uD655\uC778\uD558\uACE0 \uC218\uC815\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] }), _jsx(Separator, {}), _jsxs("div", { className: "mt-6", children: [_jsxs("div", { className: "flex justify-between items-center mb-4 p-3 bg-slate-50 rounded-md", children: [_jsxs("span", { className: "text-sm font-medium text-slate-600", children: ["ID: ", feedback?.id] }), _jsxs("span", { className: "text-sm text-slate-500", children: ["\uC0DD\uC131\uC77C: ", feedback?.createdAt ? new Date(feedback.createdAt).toLocaleString("ko-KR") : 'N/A'] })] }), _jsx(DynamicForm, { fields: fields, initialData: initialData, onSubmit: handleSubmit, submitButtonText: "\uC218\uC815\uD558\uAE30" }), successMessage && (_jsx("div", { className: "mt-4 p-3 bg-green-100 text-green-800 rounded-md", children: successMessage }))] })] }));
+}
--- a/viewer/src/pages/FeedbackListPage.d.ts
+++ b/viewer/src/pages/FeedbackListPage.d.ts
@@ -0,0 +1 @@
+export declare function FeedbackListPage(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/pages/FeedbackListPage.js
+++ b/viewer/src/pages/FeedbackListPage.js
@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { DynamicTable } from "@/components/DynamicTable";
+import { getFeedbacks, getFeedbackFields } from "@/services/feedback";
+import { ErrorDisplay } from "@/components/ErrorDisplay";
+import { Button } from "@/components/ui/button";
+export function FeedbackListPage() {
+    const [fields, setFields] = useState([]);
+    const [feedbacks, setFeedbacks] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // TODO: projectId와 channelId는 URL 파라미터나 컨텍스트에서 가져와야 합니다.
+    const projectId = "1";
+    const channelId = "4";
+    useEffect(() => {
+        const fetchFieldsAndFeedbacks = async () => {
+            try {
+                setLoading(true);
+                const fieldsData = await getFeedbackFields(projectId, channelId);
+                setFields(fieldsData);
+                try {
+                    const feedbacksData = await getFeedbacks(projectId, channelId);
+                    setFeedbacks(feedbacksData);
+                }
+                catch (feedbackError) {
+                    console.error("Failed to fetch feedbacks:", feedbackError);
+                    setError("피드백 목록을 불러오는 데 실패했습니다.");
+                }
+            }
+            catch (fieldsError) {
+                if (fieldsError instanceof Error) {
+                    setError(fieldsError.message);
+                }
+                else {
+                    setError("테이블 구조를 불러오는 데 실패했습니다.");
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchFieldsAndFeedbacks();
+    }, [projectId, channelId]);
+    if (loading) {
+        return _jsx("div", { children: "\uB85C\uB529 \uC911..." });
+    }
+    return (_jsxs("div", { className: "container mx-auto p-4", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h1", { className: "text-2xl font-bold", children: "\uD53C\uB4DC\uBC31 \uBAA9\uB85D" }), _jsx(Button, { asChild: true, children: _jsx(Link, { to: "new", children: "\uC0C8 \uD53C\uB4DC\uBC31 \uC791\uC131" }) })] }), error && _jsx(ErrorDisplay, { message: error }), _jsx(DynamicTable, { columns: fields, data: feedbacks, projectId: projectId, channelId: channelId })] }));
+}
--- a/viewer/src/pages/IssueViewerPage.d.ts
+++ b/viewer/src/pages/IssueViewerPage.d.ts
@@ -0,0 +1 @@
+export declare function IssueViewerPage(): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/pages/IssueViewerPage.js
+++ b/viewer/src/pages/IssueViewerPage.js
@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/pages/IssueViewerPage.tsx
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { getIssues } from "@/services/issue";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ErrorDisplay } from "@/components/ErrorDisplay";
+// 테이블 헤더 정의
+const issueTableHeaders = [
+    { key: "title", label: "Title" },
+    { key: "feedbackCount", label: "Feedback Count" },
+    { key: "description", label: "Description" },
+    { key: "status", label: "Status" },
+    { key: "createdAt", label: "Created" },
+    { key: "updatedAt", label: "Updated" },
+    { key: "category", label: "Category" },
+];
+export function IssueViewerPage() {
+    const { projectId } = useParams();
+    const [issues, setIssues] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!projectId)
+            return;
+        setLoading(true);
+        setError(null);
+        getIssues(projectId)
+            .then(setIssues)
+            .catch((err) => setError(err.message))
+            .finally(() => setLoading(false));
+    }, [projectId]);
+    return (_jsxs("div", { className: "container mx-auto p-4 md:p-8", children: [_jsxs("header", { className: "mb-8", children: [_jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "\uC774\uC288 \uBDF0\uC5B4" }), _jsxs("p", { className: "text-muted-foreground mt-1", children: ["\uD504\uB85C\uC81D\uD2B8: ", projectId] })] }), error && _jsx(ErrorDisplay, { message: error }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "\uC774\uC288 \uBAA9\uB85D" }) }), _jsxs(CardContent, { children: [loading && _jsx("p", { className: "text-center", children: "\uB85C\uB529 \uC911..." }), !loading && (_jsx("div", { className: "border rounded-md", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: issueTableHeaders.map((header) => (_jsx(TableHead, { children: header.label }, header.key))) }) }), _jsx(TableBody, { children: issues.length > 0 ? (issues.map((issue) => (_jsx(TableRow, { children: issueTableHeaders.map((header) => (_jsx(TableCell, { children: String(issue[header.key] ?? "") }, `${issue.id}-${header.key}`))) }, issue.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: issueTableHeaders.length, className: "h-24 text-center", children: "\uD45C\uC2DC\uD560 \uC774\uC288\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) })) })] }) }))] })] })] }));
+}
--- a/viewer/src/pages/IssueViewerPage.tsx
+++ b/viewer/src/pages/IssueViewerPage.tsx
@@ -50,7 +50,7 @@ export function IssueViewerPage() {
 				</p>
 			</header>

-			{error && <ErrorDisplay errorMessage={error} />}
+			{error && <ErrorDisplay message={error} />}

 			<Card>
 				<CardHeader>
--- a/viewer/src/services/error.d.ts
+++ b/viewer/src/services/error.d.ts
@@ -0,0 +1,6 @@
+/**
+ * API 요청 실패 시 공통으로 사용할 에러 처리 함수
+ * @param message 프로덕션 환경에서 보여줄 기본 에러 메시지
+ * @param response fetch API의 응답 객체
+ */
+export declare const handleApiError: (message: string, response: Response) => Promise<never>;
--- a/viewer/src/services/error.js
+++ b/viewer/src/services/error.js
@@ -0,0 +1,13 @@
+// src/services/error.ts
+/**
+ * API 요청 실패 시 공통으로 사용할 에러 처리 함수
+ * @param message 프로덕션 환경에서 보여줄 기본 에러 메시지
+ * @param response fetch API의 응답 객체
+ */
+export const handleApiError = async (message, response) => {
+    if (import.meta.env.DEV) {
+        const errorBody = await response.text();
+        throw new Error(`[Dev] ${message} | URL: ${response.url} | Status: ${response.status} ${response.statusText} | Body: ${errorBody || "Empty"}`);
+    }
+    throw new Error(message);
+};
--- a/viewer/src/services/feedback.d.ts
+++ b/viewer/src/services/feedback.d.ts
@@ -0,0 +1,43 @@
+export interface Feedback {
+    id: string;
+    content: string;
+    [key: string]: any;
+}
+export interface Issue {
+    id: string;
+    name: string;
+}
+export interface FeedbackField {
+    id: string;
+    name: string;
+    type: "text" | "textarea" | "number" | "select";
+    readOnly?: boolean;
+}
+export interface CreateFeedbackRequest {
+    issueNames: string[];
+    [key: string]: any;
+}
+/**
+ * 특정 채널의 피드백 목록을 조회합니다.
+ */
+export declare const getFeedbacks: (projectId: string, channelId: string) => Promise<Feedback[]>;
+/**
+ * 특정 채널의 동적 폼 필드 스키마를 조회합니다.
+ */
+export declare const getFeedbackFields: (projectId: string, channelId: string) => Promise<FeedbackField[]>;
+/**
+ * 특정 채널에 새로운 피드백을 생성합니다.
+ */
+export declare const createFeedback: (projectId: string, channelId: string, feedbackData: CreateFeedbackRequest) => Promise<Feedback>;
+/**
+ * 프로젝트의 이슈를 검색합니다.
+ */
+export declare const searchIssues: (projectId: string, query: string) => Promise<Issue[]>;
+/**
+ * 특정 ID의 피드백 상세 정보를 조회합니다.
+ */
+export declare const getFeedbackById: (projectId: string, channelId: string, feedbackId: string) => Promise<Feedback>;
+/**
+ * 특정 피드백을 수정합니다.
+ */
+export declare const updateFeedback: (projectId: string, channelId: string, feedbackId: string, feedbackData: Partial<CreateFeedbackRequest>) => Promise<Feedback>;
--- a/viewer/src/services/feedback.js
+++ b/viewer/src/services/feedback.js
@@ -0,0 +1,114 @@
+// src/services/feedback.ts
+import { handleApiError } from "./error";
+// --- API 함수 ---
+const getFeedbacksSearchApiUrl = (projectId, channelId) => `/api/v2/projects/${projectId}/channels/${channelId}/feedbacks/search`;
+const getFeedbackFieldsApiUrl = (projectId, channelId) => `/api/projects/${projectId}/channels/${channelId}/fields`;
+const getIssuesApiUrl = (projectId) => `/api/projects/${projectId}/issues/search`;
+/**
+ * 특정 채널의 피드백 목록을 조회합니다.
+ */
+export const getFeedbacks = async (projectId, channelId) => {
+    const url = getFeedbacksSearchApiUrl(projectId, channelId);
+    const response = await fetch(url, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({}),
+    });
+    if (!response.ok) {
+        await handleApiError("피드백 목록을 불러오는 데 실패했습니다.", response);
+    }
+    const result = await response.json();
+    return result.items || [];
+};
+/**
+ * 특정 채널의 동적 폼 필드 스키마를 조회합니다.
+ */
+export const getFeedbackFields = async (projectId, channelId) => {
+    const url = getFeedbackFieldsApiUrl(projectId, channelId);
+    const response = await fetch(url);
+    if (!response.ok) {
+        await handleApiError("피드백 필드 정보를 불러오는 데 실패했습니다.", response);
+    }
+    const apiFields = await response.json();
+    if (!Array.isArray(apiFields)) {
+        console.error("Error: Fields API response is not an array.", apiFields);
+        return [];
+    }
+    return apiFields
+        .filter((field) => field.status === "ACTIVE")
+        .map((field) => ({
+        id: field.key,
+        name: field.name,
+        type: field.format,
+    }));
+};
+/**
+ * 특정 채널에 새로운 피드백을 생성합니다.
+ */
+export const createFeedback = async (projectId, channelId, feedbackData) => {
+    const url = `/api/projects/${projectId}/channels/${channelId}/feedbacks`;
+    const response = await fetch(url, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(feedbackData),
+    });
+    if (!response.ok) {
+        await handleApiError("피드백 생성에 실패했습니다.", response);
+    }
+    return response.json();
+};
+/**
+ * 프로젝트의 이슈를 검색합니다.
+ */
+export const searchIssues = async (projectId, query) => {
+    const url = getIssuesApiUrl(projectId);
+    const response = await fetch(url, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            query: { name: query },
+            limit: 10,
+            page: 1,
+            sort: { createdAt: "ASC" },
+        }),
+    });
+    if (!response.ok) {
+        await handleApiError("이슈 검색에 실패했습니다.", response);
+    }
+    const result = await response.json();
+    return result.items || [];
+};
+/**
+ * 특정 ID의 피드백 상세 정보를 조회합니다.
+ */
+export const getFeedbackById = async (projectId, channelId, feedbackId) => {
+    const url = `/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}`;
+    const response = await fetch(url);
+    if (!response.ok) {
+        await handleApiError("피드백 상세 정보를 불러오는 데 실패했습니다.", response);
+    }
+    return response.json();
+};
+/**
+ * 특정 피드백을 수정합니다.
+ */
+export const updateFeedback = async (projectId, channelId, feedbackId, feedbackData) => {
+    const url = `/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}`;
+    const response = await fetch(url, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(feedbackData),
+    });
+    if (!response.ok) {
+        await handleApiError("피드백 수정에 실패했습니다.", response);
+    }
+    return response.json();
+};
--- a/viewer/src/services/issue.d.ts
+++ b/viewer/src/services/issue.d.ts
@@ -0,0 +1,17 @@
+export interface Issue {
+    id: string;
+    title: string;
+    feedbackCount: number;
+    description: string;
+    status: string;
+    createdAt: string;
+    updatedAt: string;
+    category: string;
+    [key: string]: any;
+}
+/**
+ * 특정 프로젝트의 모든 이슈를 검색합니다.
+ * @param projectId 프로젝트 ID
+ * @returns 이슈 목록 Promise
+ */
+export declare const getIssues: (projectId: string) => Promise<Issue[]>;
--- a/viewer/src/services/issue.js
+++ b/viewer/src/services/issue.js
@@ -0,0 +1,24 @@
+// src/services/issue.ts
+import { handleApiError } from "./error";
+/**
+ * 특정 프로젝트의 모든 이슈를 검색합니다.
+ * @param projectId 프로젝트 ID
+ * @returns 이슈 목록 Promise
+ */
+export const getIssues = async (projectId) => {
+    const url = `/api/projects/${projectId}/issues/search`;
+    // body를 비워서 보내면 모든 이슈를 가져오는 것으로 가정합니다.
+    // 실제 API 명세에 따라 수정이 필요할 수 있습니다.
+    const response = await fetch(url, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({}),
+    });
+    if (!response.ok) {
+        await handleApiError("이슈 목록을 불러오는 데 실패했습니다.", response);
+    }
+    const result = await response.json();
+    return result.items || [];
+};
--- a/viewer/src/services/project.d.ts
+++ b/viewer/src/services/project.d.ts
@@ -0,0 +1,22 @@
+export interface Project {
+    id: string;
+    name: string;
+    description: string;
+    timezone: {
+        countryCode: string;
+        name: string;
+        offset: string;
+    };
+    createdAt: string;
+    updatedAt: string;
+}
+/**
+ * 모든 접근 가능한 프로젝트 목록을 가져옵니다.
+ * 현재는 ID가 1인 프로젝트 하나만 가져오도록 구현되어 있습니다.
+ */
+export declare const getProjects: () => Promise<Project[]>;
+/**
+ * 특정 ID를 가진 프로젝트의 상세 정보를 가져옵니다.
+ * @param id - 조회할 프로젝트의 ID
+ */
+export declare const getProjectById: (id: string) => Promise<Project | undefined>;
--- a/viewer/src/services/project.js
+++ b/viewer/src/services/project.js
@@ -0,0 +1,38 @@
+const API_BASE_URL = "/api";
+/**
+ * 모든 접근 가능한 프로젝트 목록을 가져옵니다.
+ * 현재는 ID가 1인 프로젝트 하나만 가져오도록 구현되어 있습니다.
+ */
+export const getProjects = async () => {
+    try {
+        const project = await getProjectById("1");
+        return project ? [project] : [];
+    }
+    catch (error) {
+        console.error("Failed to fetch projects:", error);
+        return [];
+    }
+};
+/**
+ * 특정 ID를 가진 프로젝트의 상세 정보를 가져옵니다.
+ * @param id - 조회할 프로젝트의 ID
+ */
+export const getProjectById = async (id) => {
+    try {
+        // 'project' -> 'projects'로 수정
+        const response = await fetch(`${API_BASE_URL}/projects/${id}`);
+        if (!response.ok) {
+            throw new Error(`API call failed with status: ${response.status}`);
+        }
+        const data = await response.json();
+        // API 응답(id: number)을 내부 모델(id: string)로 변환
+        return {
+            ...data,
+            id: data.id.toString(),
+        };
+    }
+    catch (error) {
+        console.error(`Failed to fetch project with id ${id}:`, error);
+        return undefined;
+    }
+};
--- a/viewer/src/services/project.ts
+++ b/viewer/src/services/project.ts
@@ -0,0 +1,68 @@
+export interface Project {
+	id: string; // 애플리케이션 내에서는 string 타입으로 일관성 유지
+	name: string;
+	description: string;
+	timezone: {
+		countryCode: string;
+		name: string;
+		offset: string;
+	};
+	createdAt: string;
+	updatedAt: string;
+}
+
+// API 응답의 id는 number 타입이므로, 파싱을 위한 별도 인터페이스 정의
+interface ProjectApiResponse {
+	id: number;
+	name: string;
+	description: string;
+	timezone: {
+		countryCode: string;
+		name: string;
+		offset: string;
+	};
+	createdAt: string;
+	updatedAt: string;
+}
+
+const API_BASE_URL = "/api";
+
+/**
+ * 모든 접근 가능한 프로젝트 목록을 가져옵니다.
+ * 현재는 ID가 1인 프로젝트 하나만 가져오도록 구현되어 있습니다.
+ */
+export const getProjects = async (): Promise<Project[]> => {
+	try {
+		const project = await getProjectById("1");
+		return project ? [project] : [];
+	} catch (error) {
+		console.error("Failed to fetch projects:", error);
+		return [];
+	}
+};
+
+/**
+ * 특정 ID를 가진 프로젝트의 상세 정보를 가져옵니다.
+ * @param id - 조회할 프로젝트의 ID
+ */
+export const getProjectById = async (
+	id: string,
+): Promise<Project | undefined> => {
+	try {
+		// 'project' -> 'projects'로 수정
+		const response = await fetch(`${API_BASE_URL}/projects/${id}`);
+		if (!response.ok) {
+			throw new Error(`API call failed with status: ${response.status}`);
+		}
+		const data: ProjectApiResponse = await response.json();
+
+		// API 응답(id: number)을 내부 모델(id: string)로 변환
+		return {
+			...data,
+			id: data.id.toString(),
+		};
+	} catch (error) {
+		console.error(`Failed to fetch project with id ${id}:`, error);
+		return undefined;
+	}
+};
--- a/viewer/src/store/useSettingsStore.d.ts
+++ b/viewer/src/store/useSettingsStore.d.ts
@@ -0,0 +1,19 @@
+type Theme = "light" | "dark" | "system";
+interface SettingsState {
+    projectId: string | null;
+    theme: Theme;
+    setProjectId: (projectId: string) => void;
+    setTheme: (theme: Theme) => void;
+}
+export declare const useSettingsStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<SettingsState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<SettingsState, SettingsState>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: SettingsState) => void) => () => void;
+        onFinishHydration: (fn: (state: SettingsState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<SettingsState, SettingsState>>;
+    };
+}>;
+export {};
--- a/viewer/src/store/useSettingsStore.js
+++ b/viewer/src/store/useSettingsStore.js
@@ -0,0 +1,10 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+export const useSettingsStore = create()(persist((set) => ({
+    projectId: "1", // 기본 프로젝트 ID를 1로 설정
+    theme: "system",
+    setProjectId: (projectId) => set({ projectId }),
+    setTheme: (theme) => set({ theme }),
+}), {
+    name: "settings-storage", // localStorage에 저장될 이름
+}));
--- a/viewer/src/store/useSettingsStore.ts
+++ b/viewer/src/store/useSettingsStore.ts
@@ -0,0 +1,25 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+type Theme = "light" | "dark" | "system";
+
+interface SettingsState {
+	projectId: string | null;
+	theme: Theme;
+	setProjectId: (projectId: string) => void;
+	setTheme: (theme: Theme) => void;
+}
+
+export const useSettingsStore = create<SettingsState>()(
+	persist(
+		(set) => ({
+			projectId: "1", // 기본 프로젝트 ID를 1로 설정
+			theme: "system",
+			setProjectId: (projectId) => set({ projectId }),
+			setTheme: (theme) => set({ theme }),
+		}),
+		{
+			name: "settings-storage", // localStorage에 저장될 이름
+		},
+	),
+);
--- a/viewer/tailwind.config.ts
+++ b/viewer/tailwind.config.ts
@@ -19,38 +19,38 @@ const config: Config = {
 		},
 		extend: {
 			colors: {
-				border: "hsl(var(--border))",
-				input: "hsl(var(--input))",
-				ring: "hsl(var(--ring))",
-				background: "hsl(var(--background))",
-				foreground: "hsl(var(--foreground))",
+				border: "oklch(var(--border))",
+				input: "oklch(var(--input))",
+				ring: "oklch(var(--ring))",
+				background: "oklch(var(--background))",
+				foreground: "oklch(var(--foreground))",
 				primary: {
-					DEFAULT: "hsl(var(--primary))",
-					foreground: "hsl(var(--primary-foreground))",
+					DEFAULT: "oklch(var(--primary))",
+					foreground: "oklch(var(--primary-foreground))",
 				},
 				secondary: {
-					DEFAULT: "hsl(var(--secondary))",
-					foreground: "hsl(var(--secondary-foreground))",
+					DEFAULT: "oklch(var(--secondary))",
+					foreground: "oklch(var(--secondary-foreground))",
 				},
 				destructive: {
-					DEFAULT: "hsl(var(--destructive))",
-					foreground: "hsl(var(--destructive-foreground))",
+					DEFAULT: "oklch(var(--destructive))",
+					foreground: "oklch(var(--destructive-foreground))",
 				},
 				muted: {
-					DEFAULT: "hsl(var(--muted))",
-					foreground: "hsl(var(--muted-foreground))",
+					DEFAULT: "oklch(var(--muted))",
+					foreground: "oklch(var(--muted-foreground))",
 				},
 				accent: {
-					DEFAULT: "hsl(var(--accent))",
-					foreground: "hsl(var(--accent-foreground))",
+					DEFAULT: "oklch(var(--accent))",
+					foreground: "oklch(var(--accent-foreground))",
 				},
 				popover: {
 					DEFAULT: "oklch(var(--popover))",
 					foreground: "oklch(var(--popover-foreground))",
 				},
 				card: {
-					DEFAULT: "hsl(var(--card))",
-					foreground: "hsl(var(--card-foreground))",
+					DEFAULT: "oklch(var(--card))",
+					foreground: "oklch(var(--card-foreground))",
 				},
 			},
 			borderRadius: {
@@ -77,4 +77,4 @@ const config: Config = {
 	plugins: [tailwindcssAnimate],
 };

-export default config;
+export default config;
--- a/viewer/tsconfig.json
+++ b/viewer/tsconfig.json
@@ -27,6 +27,5 @@
      ]
    }
  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"]
 }
--- a/viewer/tsconfig.node.json
+++ b/viewer/tsconfig.node.json
@@ -1,5 +1,6 @@
 {
 	"compilerOptions": {
+		"composite": true,
 		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 		"target": "ES2023",
 		"lib": ["ES2023"],
--- a/viewer/tsconfig.tsbuildinfo
+++ b/viewer/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/DynamicForm.tsx","./src/components/DynamicTable.tsx","./src/components/ErrorDisplay.tsx","./src/components/Header.tsx","./src/components/LanguageSelectBox.tsx","./src/components/MainLayout.tsx","./src/components/ProjectSelectBox.tsx","./src/components/ThemeSelectBox.tsx","./src/components/UserProfileBox.tsx","./src/components/providers/ThemeProvider.tsx","./src/components/ui/button.tsx","./src/components/ui/calendar.tsx","./src/components/ui/card.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/popover.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/table.tsx","./src/components/ui/textarea.tsx","./src/lib/utils.ts","./src/pages/FeedbackCreatePage.tsx","./src/pages/FeedbackDetailPage.tsx","./src/pages/FeedbackListPage.tsx","./src/pages/IssueViewerPage.tsx","./src/services/error.ts","./src/services/feedback.ts","./src/services/issue.ts","./src/services/project.ts","./src/store/useSettingsStore.ts"],"version":"5.8.3"}
--- a/viewer/vite.config.d.ts
+++ b/viewer/vite.config.d.ts
@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfigFnObject;
+export default _default;
--- a/viewer/vite.config.js
+++ b/viewer/vite.config.js
@@ -0,0 +1,36 @@
+import path from "path";
+import react from "@vitejs/plugin-react";
+import { defineConfig, loadEnv } from "vite";
+import tailwindcss from "tailwindcss";
+import autoprefixer from "autoprefixer";
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd(), "");
+    return {
+        plugins: [react()],
+        css: {
+            postcss: {
+                plugins: [tailwindcss, autoprefixer],
+            },
+        },
+        resolve: {
+            alias: {
+                "@": path.resolve(__dirname, "./src"),
+            },
+        },
+        server: {
+            proxy: {
+                // 나머지 /api 경로 처리
+                "/api": {
+                    target: env.VITE_API_PROXY_TARGET,
+                    changeOrigin: true,
+                    configure: (proxy, _options) => {
+                        proxy.on("proxyReq", (proxyReq, _req, _res) => {
+                            proxyReq.setHeader("X-Api-Key", env.VITE_API_KEY);
+                            proxyReq.removeHeader("cookie");
+                        });
+                    }
+                }
+            }
+        }
+    };
+});
				`@@ -0,0 +1 @@`
				`export declare function Header(): import("react/jsx-runtime").JSX.Element;`
				`@@ -0,0 +1 @@`
				`export declare function LanguageSelectBox(): import("react/jsx-runtime").JSX.Element;`
				`@@ -0,0 +1 @@`
				`export declare function MainLayout(): import("react/jsx-runtime").JSX.Element;`
				`@@ -0,0 +1 @@`
				`export declare function ProjectSelectBox(): import("react/jsx-runtime").JSX.Element;`
				`@@ -0,0 +1 @@`
				`export declare function ThemeSelectBox(): import("react/jsx-runtime").JSX.Element;`
				`@@ -0,0 +1 @@`
				`export declare function UserProfileBox(): import("react/jsx-runtime").JSX.Element;`
				`@@ -0,0 +1 @@`
				`export declare function FeedbackCreatePage(): import("react/jsx-runtime").JSX.Element;`
				`@@ -0,0 +1 @@`
				`export declare function FeedbackDetailPage(): import("react/jsx-runtime").JSX.Element;`
				`@@ -0,0 +1 @@`
				`export declare function FeedbackListPage(): import("react/jsx-runtime").JSX.Element;`
				`@@ -0,0 +1 @@`
				`export declare function IssueViewerPage(): import("react/jsx-runtime").JSX.Element;`