높이 문제 해결

TODO.md

@@ -1,29 +1 @@
-# Q&A 뷰어 프로젝트 TODO 리스트
-
-## Phase 1: 기반 구축 및 핵심 기능 구현
-
-- [x] `GEMINI.md`에 프로젝트 개요 및 개발 계획 정리 (완료: 2025-07-30 17:53:48)
-- [x] `DynamicTable` 컴포넌트 구현 및 API 연동 (완료: 2025-07-30 17:53:48)
-- [x] `DynamicForm` 컴포넌트 구현 및 API 연동 (완료: 2025-07-30 17:53:48)
-- [x] 피드백 목록 페이지 (`FeedbackListPage`) 구현 (완료: 2025-07-30 17:53:48)
-- [x] 피드백 생성 페이지 (`FeedbackCreatePage`) 구현 (완료: 2025-07-30 17:53:48)
-- [x] 피드백 상세/수정 페이지 (`FeedbackDetailPage`) 구현 (완료: 2025-07-30 17:53:48)
-- [x] React Router를 이용한 전체 페이지 라우팅 설정 (완료: 2025-07-30 17:53:48)
-- [x] 테이블 UI/UX 개선 (행 클릭, 특정 필드 서식 지정 등) (완료: 2025-07-30 17:53:48)
-- [x] 폼 UI/UX 개선 (필드 숨김, 읽기 전용 처리 등) (완료: 2025-07-30 17:53:48)
-
-## 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)
-- [ ] 동적 폼에 데이터 유효성 검사 기능 추가
-
-## Phase 3: 인증 및 배포
-
-- [ ] OIDC 클라이언트 연동 및 인증 로직 구현
-- [ ] 로그인/로그아웃 및 인증 상태 관리
-- [ ] 인증이 필요한 라우트 보호 기능 적용
-- [ ] Docker를 이용한 배포 환경 구축
+2025-08-05 10:30:00 KST - 이슈 API 연동 및 UI 개선 완료

viewer/src/components/Header.tsx

@@ -12,11 +12,7 @@ const menuItems = [
 	{ name: "Issue", path: "/issues", type: "issue" },
 ];
 
-interface HeaderProps {
-	className?: string;
-}
-
-export function Header({ className }: HeaderProps) {
+export function Header() {
 	const { projectId, channelId } = useSettingsStore();
 
 	const getPath = (type: string, basePath: string) => {
@@ -29,7 +25,7 @@ export function Header({ className }: HeaderProps) {
 	const homePath = `/projects/${projectId}`;
 
 	return (
-		<header className={cn("border-b", className)}>
+		<header className="border-b">
 			<div className="container mx-auto flex h-16 items-center">
 				{/* Left Section */}
 				<div className="flex items-center gap-6">

viewer/src/components/MainLayout.tsx

@@ -4,9 +4,9 @@ import { Header } from "./Header";
 
 export function MainLayout() {
 	return (
-		<div>
-			<Header className="fixed top-0 left-0 right-0 z-50 bg-background" />
-			<main className="container mx-auto p-6 pt-24">
+		<div className="flex h-screen flex-col">
+			<Header />
+			<main className="flex-1 overflow-y-auto p-6">
 				<Outlet />
 			</main>
 		</div>

viewer/src/components/PageLayout.tsx

@@ -15,11 +15,11 @@ export function PageLayout({
 	children,
 }: PageLayoutProps) {
 	return (
-		<div className="w-full">
+		<div className="flex h-full w-full flex-col">
 			<PageTitle title={title} description={description}>
 				{actions}
 			</PageTitle>
-			<div>{children}</div>
+			<div className="flex-grow overflow-y-auto">{children}</div>
 		</div>
 	);
 }

viewer/src/components/PageTitle.tsx

@@ -19,7 +19,7 @@ export function PageTitle({ title, description, children }: PageHeaderProps) {
 				</div>
 				<div>{children}</div>
 			</div>
-			<Separator className="my-4" />
+			<Separator />
 		</>
 	);
 }

viewer/src/index.css

@@ -31,7 +31,7 @@
 		/* Descope Theme */
 		--background: 240 0% 40%; /* #666 */
 		--foreground: 0 0% 100%; /* #fff */
-		--card: 0 0% 10%; /* #1a1a1a - More noticeable dark gray */
+		--card: 0 0% 10%; /* #4F442C */
 		--card-foreground: 0 0% 100%; /* #fff */
 		--popover: 0 0% 0%; /* #000 */
 		--popover-foreground: 0 0% 100%; /* #fff */