내비게이션, 테마 적용

2025-07-31 19:06:58 +09:00
parent 3ccb0c8f8a
commit 211689e889
19 changed files with 641 additions and 1460 deletions
--- a/GEMINI.md
+++ b/GEMINI.md
@@ -37,20 +37,23 @@
  - 피드백 CRUD 페이지
  - 기본 라우팅 설정

-### Phase 2: 기능 고도화 및 안정화
+### Phase 2: 기능 고도화 및 안정화 (진행 중)

 - **목표**: 사용자 경험을 개선하고 코드 품질을 향상시킵니다.
- **주요 작업**:
-  - **동적 테이블 개선**: 페이지네이션, 열 정렬, 데이터 필터링 기능을 추가하여 대량의 데이터를 효율적으로 탐색할 수 있도록 합니다.
-  - **동적 폼 개선**: Zod와 같은 라이브러리를 활용하여 스키마 기반의 동적 데이터 유효성 검사를 구현합니다.
-  - **상태 관리 도입**: 컴포넌트 간의 복잡한 상태 공유 및 비동기 데이터 관리를 위해 Zustand를 도입하여 전역 상태 관리를 구현합니다.
-  - **코드 품질 관리**: Biome을 프로젝트에 통합하여 코드 포맷팅과 린트 검사를 자동화하고, 일관된 코드 스타일을 유지합니다.
+- **완료된 작업**:
+  - **동적 테이블 개선**: 페이지네이션, 열 정렬, 데이터 필터링, 날짜 범위 선택, 행 확장 등 고급 기능 추가
+  - **상태 관리 도입**: Zustand를 활용하여 프로젝트 ID, 테마 등 전역 상태 관리 시스템 구축
+  - **UI 개선**: 상단 헤더, 네비게이션 메뉴, Light/Dark/System 테마 전환 기능 구현
+- **진행할 작업**:
+  - **테마 커스터마이징**: Dracula 테마를 다크 모드에 적용하고, 기본 테마를 라이트 모드로 설정
+  - **동적 폼 개선**: Zod와 같은 라이브러리를 활용하여 스키마 기반의 동적 데이터 유효성 검사 구현
+  - **코드 품질 관리**: Biome을 프로젝트에 통합하여 코드 포맷팅과 린트 검사를 자동화하고, 일관된 코드 스타일 유지

-### Phase 3: 인증 및 배포
+### Phase 3: 인증 및 배포 (예정)

 - **목표**: OIDC 기반의 안정적인 인증 시스템을 구축하고, Docker를 통해 배포 환경을 마련합니다.
 - **주요 작업**:
-  - **OIDC 연동**: OIDC 클라이언트 라이브러리를 설치하고, 로그인/로그아웃 및 토큰 관리 로직을 구현합니다.
-  - **인증 상태 관리**: 사용자의 로그인 상태를 전역으로 관리하고, 인증 상태에 따라 UI가 동적으로 변경되도록 합니다.
-  - **라우트 보호**: 인증이 필요한 페이지에 접근 제어(Route Guard)를 적용하여 비인가 사용자의 접근을 차단합니다.
-  - **컨테이너화**: Dockerfile을 작성하고 Docker Compose를 설정하여 개발 및 프로덕션 환경을 컨테이너 기반으로 구축합니다.
+  - **OIDC 연동**: OIDC 클라이언트 라이브러리를 설치하고, 로그인/로그아웃 및 토큰 관리 로직 구현
+  - **인증 상태 관리**: 사용자의 로그인 상태를 전역으로 관리하고, 인증 상태에 따라 UI가 동적으로 변경되도록 설정
+  - **라우트 보호**: 인증이 필요한 페이지에 접근 제어(Route Guard)를 적용하여 비인가 사용자의 접근 차단
+  - **컨테이너화**: Dockerfile을 작성하고 Docker Compose를 설정하여 개발 및 프로덕션 환경을 컨테이너 기반으로 구축
--- a/viewer/.env.example
+++ b/viewer/.env.example
@@ -5,4 +5,7 @@
 VITE_API_PROXY_TARGET=http://localhost:3030

 # API 키
-VITE_API_KEY=your_api_key_here
+VITE_API_KEY=your_api_key_here
+
+# 기본 채널 ID
+VITE_DEFAULT_CHANNEL_ID=4
--- a/viewer/package.json
+++ b/viewer/package.json
@@ -24,25 +24,25 @@
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
 		"lucide-react": "^0.533.0",
-		"react": "^19.1.0",
+		"react": "^19.1.1",
 		"react-day-picker": "^9.8.1",
-		"react-dom": "^19.1.0",
+		"react-dom": "^19.1.1",
 		"react-router-dom": "^7.7.1",
 		"tailwind-merge": "^3.3.1",
-		"zustand": "^5.0.6"
+		"zustand": "^5.0.7"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.1.2",
+		"@biomejs/biome": "^2.1.3",
 		"@types/node": "^24.1.0",
-		"@types/react": "^19.1.8",
-		"@types/react-dom": "^19.1.6",
-		"@vitejs/plugin-react": "^4.6.0",
+		"@types/react": "^19.1.9",
+		"@types/react-dom": "^19.1.7",
+		"@vitejs/plugin-react": "^4.7.0",
 		"autoprefixer": "^10.4.21",
 		"postcss": "^8.5.6",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
 		"tw-animate-css": "^1.3.6",
 		"typescript": "~5.8.3",
-		"vite": "^7.0.4"
+		"vite": "^7.0.6"
 	}
 }
--- a/viewer/pnpm-lock.yaml
+++ b/viewer/pnpm-lock.yaml
--- a/viewer/src/App.tsx
+++ b/viewer/src/App.tsx
@@ -1,42 +1,50 @@
 // src/App.tsx
-import { Routes, Route, Navigate } from "react-router-dom";
+import { Routes, Route, Navigate, Outlet } 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() {
+	const defaultProjectId = import.meta.env.VITE_DEFAULT_PROJECT_ID || "1";
+	const defaultChannelId = import.meta.env.VITE_DEFAULT_CHANNEL_ID || "4";
+
 	return (
-		<ThemeProvider>
-			<Routes>
-				{/* 기본 경로 리디렉션 */}
+		<Routes>
+			{/* 기본 경로 리디렉션 */}
+			<Route
+				path="/"
+				element={
+					<Navigate
+						to={`/projects/${defaultProjectId}/channels/${defaultChannelId}/feedbacks`}
+					/>
+				}
+			/>
+
+			{/* 프로젝트 기반 레이아웃 */}
+			<Route path="/projects/:projectId" element={<MainLayout />}>
 				<Route
-					path="/"
-					element={<Navigate to="/projects/1/channels/4/feedbacks" />}
+					path="channels/:channelId/feedbacks"
+					element={<FeedbackListPage />}
+				/>
+				<Route
+					path="channels/:channelId/feedbacks/new"
+					element={<FeedbackCreatePage />}
+				/>
+				<Route
+					path="channels/:channelId/feedbacks/:feedbackId"
+					element={<FeedbackDetailPage />}
 				/>

-				{/* 피드백 관련 페이지 (메인 레이아웃 사용) */}
-				<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" element={<IssueViewerPage />} />
+				{/* 여기에 이슈 상세 페이지 라우트 추가 예정 */}
+			</Route>

-				{/* 독립적인 이슈 뷰어 페이지 */}
-				<Route
-					path="/issues/:issueId" // 이슈 ID만 받도록 단순화
-					element={<IssueViewerPage />}
-				/>
-
-				{/* 잘못된 접근을 위한 리디렉션 */}
-				<Route path="*" element={<Navigate to="/" />} />
-			</Routes>
-		</ThemeProvider>
+			{/* 잘못된 접근을 위한 리디렉션 */}
+			<Route path="*" element={<Navigate to="/" />} />
+		</Routes>
 	);
 }

--- a/viewer/src/components/Header.js
+++ b/viewer/src/components/Header.js
@@ -6,20 +6,25 @@ import { ThemeSelectBox } from "./ThemeSelectBox";
 import { LanguageSelectBox } from "./LanguageSelectBox";
 import { UserProfileBox } from "./UserProfileBox";
 import { useSettingsStore } from "@/store/useSettingsStore";
+
 const menuItems = [
-    { name: "Landing", path: "/" },
+    { name: "Home", path: "/" },
    { name: "Feedback", path: "/feedbacks" },
    { name: "Issue", path: "/issues" },
 ];
 export function Header() {
    const projectId = useSettingsStore((state) => state.projectId);
+    const channelId = useSettingsStore((state) => state.channelId);
    const getFullPath = (path) => {
        if (path === "/")
-            return `/projects/${projectId}`; // Landing 페이지 경로 예시
-        if (path.startsWith("/")) {
-            return `/projects/${projectId}/channels/4${path}`; // 채널 ID는 4로 고정
+            return `/`; // Landing 페이지 경로 예시
+        if (path.startsWith("/feedbacks")) {
+            return `/projects/${projectId}/channels/${channelId}${path}`;
+        }
+        if (path.startsWith("/issues")){
+            return `/projects/${projectId}${path}`;
        }
        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, {})] })] }));
+    return (_jsxs("header", { className: "flex h-16 items-center border-b px-4", children: [_jsx(ProjectSelectBox, { className: "mr-4"}), _jsx("nav", { className: "flex items-center space-x-4 lg:space-x-6 flex-1 ml-8", 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
@@ -1,52 +1,65 @@
 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" },
+	{ name: "Feedback", path: "/feedbacks", type: "feedback" },
+	{ name: "Issue", path: "/issues", type: "issue" },
 ];

 export function Header() {
-	const projectId = useSettingsStore((state) => state.projectId);
+	const { projectId, channelId } = useSettingsStore();

-	const getFullPath = (path: string) => {
-		if (path === "/") return `/projects/${projectId}`; // Landing 페이지 경로 예시
-		if (path.startsWith("/")) {
-			return `/projects/${projectId}/channels/4${path}`; // 채널 ID는 4로 고정
+	const getPath = (type: string, basePath: string) => {
+		if (type === "issue") {
+			return `/projects/${projectId}${basePath}`;
 		}
-		return path;
+		return `/projects/${projectId}/channels/${channelId}${basePath}`;
 	};

+	const homePath = `/projects/${projectId}`;
+
 	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">
+		<header className="flex h-16 items-center justify-between border-b px-6">
+			<div className="flex items-center gap-6">
+				<NavLink
+					to={homePath}
+					end
+					className={({ isActive }) =>
+						`text-lg font-bold transition-colors hover:text-primary ${
+							isActive ? "text-primary" : "text-muted-foreground"
+						}`
+					}
+				>
+					Home
+				</NavLink>
+				<ProjectSelectBox />
+				<nav className="ml-8 flex items-center space-x-4 lg:space-x-6">
+					{menuItems.map((item) => (
+						<NavLink
+							key={item.name}
+							to={getPath(item.type, item.path)}
+							className={({ isActive }) =>
+								`text-base transition-colors hover:text-primary ${
+									isActive
+										? "font-bold text-primary"
+										: "font-medium text-muted-foreground"
+								}`
+							}
+						>
+							{item.name}
+						</NavLink>
+					))}
+				</nav>
+			</div>
+			<div className="flex items-center gap-4">
 				<ThemeSelectBox />
 				<LanguageSelectBox />
 				<UserProfileBox />
 			</div>
 		</header>
 	);
-}
+}
--- a/viewer/src/components/ProjectSelectBox.tsx
+++ b/viewer/src/components/ProjectSelectBox.tsx
@@ -36,7 +36,7 @@ export function ProjectSelectBox() {

 	return (
 		<Select value={projectId ?? ""} onValueChange={setProjectId}>
-			<SelectTrigger className="w-[180px]">
+			<SelectTrigger className="w-[180px] border-none shadow-none focus:ring-0">
 				<SelectValue placeholder="프로젝트 선택" />
 			</SelectTrigger>
 			<SelectContent>
--- a/viewer/src/hooks/useSyncChannelId.ts
+++ b/viewer/src/hooks/useSyncChannelId.ts
@@ -0,0 +1,22 @@
+// src/hooks/useSyncChannelId.ts
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { useSettingsStore } from "@/store/useSettingsStore";
+
+/**
+ * URL의 `channelId` 파라미터를 감지하여 전역 상태와 동기화하는 커스텀 훅입니다.
+ * 이 훅은 `channelId`가 URL에 존재하는 페이지 컴포넌트에서 사용해야 합니다.
+ */
+export function useSyncChannelId() {
+	const { channelId } = useParams<{ channelId: string }>();
+	const setChannelId = useSettingsStore.getState().setChannelId;
+
+	useEffect(() => {
+		// URL 파라미터에 channelId가 존재하고 유효한 경우에만 전역 상태를 업데이트합니다.
+		// channelId가 없는 페이지(ex: /issues)에서는 이 조건이 false가 되어
+		// 기존의 유효한 channelId 값을 덮어쓰지 않습니다.
+		if (channelId) {
+			setChannelId(channelId);
+		}
+	}, [channelId]);
+}
--- a/viewer/src/index.css
+++ b/viewer/src/index.css
@@ -4,73 +4,179 @@

@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);
+		/* Light theme based on user's request */
+		--background: 207 100% 98%; /* #f6fbff */
+		--foreground: 240 10% 3.9%; /* Near black */
+		--card: 0 0% 100%; /* White */
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+		--primary: 197 100% 36%; /* #0082b5 */
+		--primary-foreground: 0 0% 98%; /* Light text for primary */
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 210 40% 96.1%; /* #f0f2f5 */
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%; /* #e4e4e7 */
+		--input: 240 5.9% 90%;
+		--ring: 197 100% 36%;
+		--radius: 0.5rem;
 	}

 	.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);
+		/* Descope Theme */
+		--background: 240 0% 40%; /* #666 */
+		--foreground: 0 0% 100%; /* #fff */
+		--card: 0 0% 0%; /* #000 */
+		--card-foreground: 0 0% 100%; /* #fff */
+		--popover: 0 0% 0%; /* #000 */
+		--popover-foreground: 0 0% 100%; /* #fff */
+		--primary: 217 100% 48%; /* #006af5 */
+		--primary-foreground: 0 0% 100%; /* #fff */
+		--secondary: 0 0% 100%; /* #fff */
+		--secondary-foreground: 0 0% 0%; /* #000 */
+		--muted: 240 0% 40%; /* #666 */
+		--muted-foreground: 0 0% 60%; /* #999 */
+		--accent: 217 100% 48%; /* #006af5 */
+		--accent-foreground: 0 0% 100%; /* #fff */
+		--destructive: 348 100% 49%; /* #fb3c00 */
+		--destructive-foreground: 0 0% 100%; /* #fff */
+		--border: 0 0% 60%; /* #999 */
+		--input: 0 0% 60%; /* #999 */
+		--ring: 217 100% 48%; /* #006af5 */
 	}
 }

@layer base {
 	* {
 		@apply border-border;
-		outline-color: oklch(var(--ring) / 0.5);
 	}
 	body {
 		@apply bg-background text-foreground;
 	}
 }
+
+/* User's custom styles */
+#root,
+body,
+html {
+	align-items: center;
+	display: flex;
+	height: 100vh;
+	justify-content: center;
+	width: 100vw;
+}
+.app {
+	height: 100%;
+	justify-content: center;
+	text-align: center;
+	width: 100%;
+}
+.app,
+.app-content {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+.app-content {
+	margin-top: 150px;
+}
+.descope-base-container {
+	border-radius: 15px;
+	box-shadow: 0 1px 50px 0 #b2b2b280;
+}
+.descope-login-container {
+	max-width: 400px;
+}
+.descope-wide-container {
+	margin: 20px auto;
+	max-height: 90vh;
+	max-width: 800px;
+	overflow-y: auto;
+	width: auto;
+}
+.welcome-title {
+	color: #0082b5;
+	font-size: 48px;
+	font-weight: 700;
+	line-height: 128%;
+}
+.example-title,
+.welcome-title {
+	font-family: JetBrains Mono;
+	font-style: normal;
+	letter-spacing: 0.6px;
+	margin-bottom: 0;
+}
+.example-title {
+	font-size: 20px;
+}
+.example {
+	align-items: center;
+	background-color: #f6fbff;
+	border: 2px solid #0082b5;
+	border-radius: 100px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	min-width: 350px;
+	padding: 16px 32px;
+	word-break: break-all;
+}
+.copy-icon {
+	height: 100%;
+	margin-left: 6px;
+}
+.text-body {
+	display: inline-block;
+	font-size: 20px;
+}
+h1 {
+	font-size: 32px;
+	font-weight: 800;
+	line-height: 128%;
+	margin: 0;
+}
+p {
+	display: flex;
+	font-family: Barlow;
+	font-style: normal;
+	font-weight: 400;
+	letter-spacing: 0.6px;
+	line-height: 160%;
+	margin-top: 8px;
+	text-align: center;
+}
+@media only screen and (max-width: 600px) {
+	.app-content {
+		width: 90%;
+	}
+	.descope-container {
+		margin-left: 16px;
+		margin-right: 16px;
+	}
+	.example {
+		min-width: fit-content;
+	}
+}
+@media only screen and (min-width: 600px) {
+	.app-content {
+		width: 80%;
+	}
+	.example {
+		min-width: fit-content;
+	}
+}
+@media only screen and (min-width: 768px) {
+	.app-content {
+		width: 55%;
+	}
+	.example {
+		min-width: 350px;
+	}
+}
--- a/viewer/src/main.tsx
+++ b/viewer/src/main.tsx
@@ -2,12 +2,15 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App.tsx";
+import { ThemeProvider } from "./components/providers/ThemeProvider.tsx";
 import "./index.css";

 createRoot(document.getElementById("root")!).render(
 	<StrictMode>
 		<BrowserRouter>
-			<App />
+			<ThemeProvider>
+				<App />
+			</ThemeProvider>
 		</BrowserRouter>
 	</StrictMode>,
-);
+);
--- a/viewer/src/pages/FeedbackCreatePage.tsx
+++ b/viewer/src/pages/FeedbackCreatePage.tsx
@@ -1,106 +1,98 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { useSettingsStore } from "@/store/useSettingsStore";
+import { useSyncChannelId } from "@/hooks/useSyncChannelId";
 import { DynamicForm } from "@/components/DynamicForm";
-import { getFeedbackFields, createFeedback } from "@/services/feedback";
-import type { FeedbackField, CreateFeedbackRequest } from "@/services/feedback";
+import {
+	getFeedbackSchema,
+	createFeedback,
+	type FeedbackSchema,
+	type CreateFeedbackRequest,
+} from "@/services/feedback";
 import { ErrorDisplay } from "@/components/ErrorDisplay";
 import { Separator } from "@/components/ui/separator";

 export function FeedbackCreatePage() {
+	useSyncChannelId();
 	const navigate = useNavigate();
-	const [fields, setFields] = useState<FeedbackField[]>([]);
+	const { projectId, channelId } = useSettingsStore();
+
+	const [schema, setSchema] = useState<FeedbackSchema | null>(null);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [error, setError] = useState<string | null>(null);
 	const [submitMessage, setSubmitMessage] = useState<string | null>(null);

-	// TODO: projectId와 channelId는 URL 파라미터나 컨텍스트에서 가져와야 합니다.
-	const projectId = "1";
-	const channelId = "4";
-
 	useEffect(() => {
-		const fetchFields = async () => {
+		if (!projectId || !channelId) return;
+
+		const fetchSchema = 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" as const };
-						}
-						return field;
-					});
-
-				setFields(processedFields);
+				const schemaData = await getFeedbackSchema(projectId, channelId);
+				setSchema(schemaData);
 			} catch (err) {
-				if (err instanceof Error) {
-					setError(err.message);
-				} else {
-					setError("알 수 없는 오류가 발생했습니다.");
-				}
+				setError(err instanceof Error ? err.message : "폼을 불러오는 데 실패했습니다.");
 			} finally {
 				setLoading(false);
 			}
 		};

-		fetchFields();
+		fetchSchema();
 	}, [projectId, channelId]);

 	const handleSubmit = async (formData: Record<string, any>) => {
+		if (!projectId || !channelId) return;
+
 		try {
 			setError(null);
 			setSubmitMessage(null);

 			const requestData: CreateFeedbackRequest = {
 				...formData,
-				issueNames: [],
+				issueNames: [], // 이슈 이름은 현재 UI에서 받지 않으므로 빈 배열로 설정
 			};

 			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;
+			setError(err instanceof Error ? err.message : "피드백 등록 중 오류가 발생했습니다.");
+			throw err; // DynamicForm이 오류 상태를 인지하도록 re-throw
 		}
 	};

 	if (loading) {
-		return <div>폼을 불러오는 중...</div>;
+		return <div className="text-center py-10">폼을 불러오는 중...</div>;
+	}
+
+	if (error) {
+		return <ErrorDisplay message={error} />;
 	}

 	return (
-		<div className="container mx-auto p-4">
-			<div className="space-y-2 mb-6">
+		<div className="space-y-4">
+			<div className="space-y-2">
 				<h1 className="text-2xl font-bold">피드백 작성</h1>
 				<p className="text-muted-foreground">
 					아래 폼을 작성하여 피드백을 제출해주세요.
 				</p>
 			</div>
 			<Separator />
-			<div className="mt-6">
-				<DynamicForm fields={fields} onSubmit={handleSubmit} />
-				{error && <ErrorDisplay message={error} />}
-				{submitMessage && (
-					<div className="mt-4 p-3 bg-green-100 text-green-800 rounded-md">
-						{submitMessage}
-					</div>
-				)}
-			</div>
+			{schema && (
+				<DynamicForm
+					schema={schema}
+					onSubmit={handleSubmit}
+					submitButtonText="제출하기"
+				/>
+			)}
+			{submitMessage && (
+				<div className="mt-4 p-3 bg-green-100 text-green-800 rounded-md">
+					{submitMessage}
+				</div>
+			)}
 		</div>
 	);
 }
--- a/viewer/src/pages/FeedbackDetailPage.tsx
+++ b/viewer/src/pages/FeedbackDetailPage.tsx
@@ -1,16 +1,19 @@
 import { useState, useEffect, useMemo } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { DynamicForm } from "@/components/DynamicForm";
+import { useSyncChannelId } from "@/hooks/useSyncChannelId";
 import {
-	getFeedbackFields,
+	getFeedbackSchema,
 	getFeedbackById,
 	updateFeedback,
+	type Feedback,
+	type FeedbackSchema,
 } from "@/services/feedback";
-import type { Feedback, FeedbackField } from "@/services/feedback";
 import { ErrorDisplay } from "@/components/ErrorDisplay";
 import { Separator } from "@/components/ui/separator";

 export function FeedbackDetailPage() {
+	useSyncChannelId();
 	const { projectId, channelId, feedbackId } = useParams<{
 		projectId: string;
 		channelId: string;
--- a/viewer/src/pages/FeedbackListPage.tsx
+++ b/viewer/src/pages/FeedbackListPage.tsx
@@ -1,68 +1,74 @@
 import { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { useSettingsStore } from "@/store/useSettingsStore";
+import { useSyncChannelId } from "@/hooks/useSyncChannelId";
 import { DynamicTable } from "@/components/DynamicTable";
-import { getFeedbacks, getFeedbackFields } from "@/services/feedback";
-import type { Feedback, FeedbackField } from "@/services/feedback";
+import {
+	getFeedbacks,
+	getFeedbackSchema,
+	type Feedback,
+	type FeedbackSchema,
+} from "@/services/feedback";
 import { ErrorDisplay } from "@/components/ErrorDisplay";
 import { Button } from "@/components/ui/button";

 export function FeedbackListPage() {
-	const [fields, setFields] = useState<FeedbackField[]>([]);
+	useSyncChannelId(); // URL의 channelId를 전역 상태와 동기화
+	const { projectId, channelId } = useSettingsStore();
+	const navigate = useNavigate();
+
+	const [schema, setSchema] = useState<FeedbackSchema | null>(null);
 	const [feedbacks, setFeedbacks] = useState<Feedback[]>([]);
 	const [loading, setLoading] = useState<boolean>(true);
 	const [error, setError] = useState<string | null>(null);

-	// TODO: projectId와 channelId는 URL 파라미터나 컨텍스트에서 가져와야 합니다.
-	const projectId = "1";
-	const channelId = "4";
-
 	useEffect(() => {
-		const fetchFieldsAndFeedbacks = async () => {
+		if (!projectId || !channelId) return;
+
+		const fetchSchemaAndFeedbacks = async () => {
 			try {
 				setLoading(true);
-				const fieldsData = await getFeedbackFields(projectId, channelId);
-				setFields(fieldsData);
+				setError(null);

-				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("테이블 구조를 불러오는 데 실패했습니다.");
-				}
+				const schemaData = await getFeedbackSchema(projectId, channelId);
+				setSchema(schemaData);
+
+				const feedbacksData = await getFeedbacks(projectId, channelId);
+				setFeedbacks(feedbacksData);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : "데이터 로딩에 실패했습니다.");
 			} finally {
 				setLoading(false);
 			}
 		};

-		fetchFieldsAndFeedbacks();
+		fetchSchemaAndFeedbacks();
 	}, [projectId, channelId]);

+	const handleRowClick = (row: Feedback) => {
+		navigate(`/projects/${projectId}/channels/${channelId}/feedbacks/${row.id}`);
+	};
+
 	if (loading) {
-		return <div>로딩 중...</div>;
+		return <div className="text-center py-10">로딩 중...</div>;
 	}

 	return (
-		<div className="container mx-auto p-4">
-			<div className="flex justify-between items-center mb-4">
+		<div className="space-y-4">
+			<div className="flex justify-between items-center">
 				<h1 className="text-2xl font-bold">피드백 목록</h1>
 				<Button asChild>
 					<Link to="new">새 피드백 작성</Link>
 				</Button>
 			</div>
 			{error && <ErrorDisplay message={error} />}
-			<DynamicTable
-				columns={fields}
-				data={feedbacks}
-				projectId={projectId}
-				channelId={channelId}
-			/>
+			{schema && (
+				<DynamicTable
+					schema={schema}
+					data={feedbacks}
+					onRowClick={handleRowClick}
+				/>
+			)}
 		</div>
 	);
 }
--- a/viewer/src/pages/IssueViewerPage.tsx
+++ b/viewer/src/pages/IssueViewerPage.tsx
@@ -41,60 +41,53 @@ export function IssueViewerPage() {
 			.finally(() => setLoading(false));
 	}, [projectId]);

+	if (error) {
+		return <ErrorDisplay message={error} />;
+	}
+
 	return (
-		<div className="container mx-auto p-4 md:p-8">
-			<header className="mb-8">
-				<h1 className="text-3xl font-bold tracking-tight">이슈 뷰어</h1>
-				<p className="text-muted-foreground mt-1">
-					프로젝트: {projectId}
-				</p>
-			</header>
-
-			{error && <ErrorDisplay message={error} />}
-
-			<Card>
-				<CardHeader>
-					<CardTitle>이슈 목록</CardTitle>
-				</CardHeader>
-				<CardContent>
-					{loading && <p className="text-center">로딩 중...</p>}
-					{!loading && (
-						<div className="border rounded-md">
-							<Table>
-								<TableHeader>
-									<TableRow>
-										{issueTableHeaders.map((header) => (
-											<TableHead key={header.key}>{header.label}</TableHead>
-										))}
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{issues.length > 0 ? (
-										issues.map((issue) => (
-											<TableRow key={issue.id}>
-												{issueTableHeaders.map((header) => (
-													<TableCell key={`${issue.id}-${header.key}`}>
-														{String(issue[header.key] ?? "")}
-													</TableCell>
-												))}
-											</TableRow>
-										))
-									) : (
-										<TableRow>
-											<TableCell
-												colSpan={issueTableHeaders.length}
-												className="h-24 text-center"
-											>
-												표시할 이슈가 없습니다.
-											</TableCell>
+		<Card>
+			<CardHeader>
+				<CardTitle>이슈 목록</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{loading && <p className="text-center">로딩 중...</p>}
+				{!loading && (
+					<div className="border rounded-md">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									{issueTableHeaders.map((header) => (
+										<TableHead key={header.key}>{header.label}</TableHead>
+									))}
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{issues.length > 0 ? (
+									issues.map((issue) => (
+										<TableRow key={issue.id}>
+											{issueTableHeaders.map((header) => (
+												<TableCell key={`${issue.id}-${header.key}`}>
+													{String(issue[header.key] ?? "")}
+												</TableCell>
+											))}
 										</TableRow>
-									)}
-								</TableBody>
-							</Table>
-						</div>
-					)}
-				</CardContent>
-			</Card>
-		</div>
+									))
+								) : (
+									<TableRow>
+										<TableCell
+											colSpan={issueTableHeaders.length}
+											className="h-24 text-center"
+										>
+											표시할 이슈가 없습니다.
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					</div>
+				)}
+			</CardContent>
+		</Card>
 	);
 }
--- a/viewer/src/services/issue.ts
+++ b/viewer/src/services/issue.ts
@@ -38,4 +38,24 @@ export const getIssues = async (projectId: string): Promise<Issue[]> => {

 	const result = await response.json();
 	return result.items || [];
+};
+
+/**
+ * 특정 프로젝트의 단일 이슈 상세 정보를 가져옵니다.
+ * @param projectId 프로젝트 ID
+ * @param issueId 이슈 ID
+ * @returns 이슈 상세 정보 Promise
+ */
+export const getIssue = async (
+	projectId: string,
+	issueId: string,
+): Promise<Issue> => {
+	const url = `/api/projects/${projectId}/issues/${issueId}`;
+	const response = await fetch(url);
+
+	if (!response.ok) {
+		await handleApiError("이슈 상세 정보를 불러오는 데 실패했습니다.", response);
+	}
+
+	return response.json();
 };
--- a/viewer/src/store/useSettingsStore.ts
+++ b/viewer/src/store/useSettingsStore.ts
@@ -5,17 +5,21 @@ type Theme = "light" | "dark" | "system";

 interface SettingsState {
 	projectId: string | null;
+	channelId: string | null;
 	theme: Theme;
 	setProjectId: (projectId: string) => void;
+	setChannelId: (channelId: string) => void;
 	setTheme: (theme: Theme) => void;
 }

 export const useSettingsStore = create<SettingsState>()(
 	persist(
 		(set) => ({
-			projectId: "1", // 기본 프로젝트 ID를 1로 설정
-			theme: "system",
+			projectId: import.meta.env.VITE_DEFAULT_PROJECT_ID,
+			channelId: import.meta.env.VITE_DEFAULT_CHANNEL_ID,
+			theme: "light",
 			setProjectId: (projectId) => set({ projectId }),
+			setChannelId: (channelId) => set({ channelId }),
 			setTheme: (theme) => set({ theme }),
 		}),
 		{
--- a/viewer/tailwind.config.ts
+++ b/viewer/tailwind.config.ts
@@ -19,38 +19,38 @@ const config: Config = {
 		},
 		extend: {
 			colors: {
-				border: "oklch(var(--border))",
-				input: "oklch(var(--input))",
-				ring: "oklch(var(--ring))",
-				background: "oklch(var(--background))",
-				foreground: "oklch(var(--foreground))",
+				border: "hsl(var(--border))",
+				input: "hsl(var(--input))",
+				ring: "hsl(var(--ring))",
+				background: "hsl(var(--background))",
+				foreground: "hsl(var(--foreground))",
 				primary: {
-					DEFAULT: "oklch(var(--primary))",
-					foreground: "oklch(var(--primary-foreground))",
+					DEFAULT: "hsl(var(--primary))",
+					foreground: "hsl(var(--primary-foreground))",
 				},
 				secondary: {
-					DEFAULT: "oklch(var(--secondary))",
-					foreground: "oklch(var(--secondary-foreground))",
+					DEFAULT: "hsl(var(--secondary))",
+					foreground: "hsl(var(--secondary-foreground))",
 				},
 				destructive: {
-					DEFAULT: "oklch(var(--destructive))",
-					foreground: "oklch(var(--destructive-foreground))",
+					DEFAULT: "hsl(var(--destructive))",
+					foreground: "hsl(var(--destructive-foreground))",
 				},
 				muted: {
-					DEFAULT: "oklch(var(--muted))",
-					foreground: "oklch(var(--muted-foreground))",
+					DEFAULT: "hsl(var(--muted))",
+					foreground: "hsl(var(--muted-foreground))",
 				},
 				accent: {
-					DEFAULT: "oklch(var(--accent))",
-					foreground: "oklch(var(--accent-foreground))",
+					DEFAULT: "hsl(var(--accent))",
+					foreground: "hsl(var(--accent-foreground))",
 				},
 				popover: {
-					DEFAULT: "oklch(var(--popover))",
-					foreground: "oklch(var(--popover-foreground))",
+					DEFAULT: "hsl(var(--popover))",
+					foreground: "hsl(var(--popover-foreground))",
 				},
 				card: {
-					DEFAULT: "oklch(var(--card))",
-					foreground: "oklch(var(--card-foreground))",
+					DEFAULT: "hsl(var(--card))",
+					foreground: "hsl(var(--card-foreground))",
 				},
 			},
 			borderRadius: {
--- a/viewer/vite.config.ts
+++ b/viewer/vite.config.ts
@@ -30,9 +30,9 @@ export default defineConfig(({ mode }) => {
 							proxyReq.setHeader("X-Api-Key", env.VITE_API_KEY);
 							proxyReq.removeHeader("cookie");
 						});
-					}
-				}
-			}
-		}
+					},
+				},
+			},
+		},
 	};
 });