vite preview mode

2025-08-04 21:35:54 +09:00
28 changed files with 479 additions and 638 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,17 +1,39 @@
-# Ignore node_modules
+# Git
+.git
+.gitignore
+
+# Dependencies
 node_modules
 viewer/node_modules

-# Ignore build artifacts
+# Build output
 viewer/dist
+viewer/build

-# Ignore environment files to prevent them from being baked into the image
-*.env.local
+# IDE / Editor specific
+.vscode
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

-# Ignore git directory
-.git
+# Local env files
+.env.local
+.env.*.local

-# Ignore Docker files
-Dockerfile
-docker-compose.yml
-.dockerignore
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,5 @@ dist-ssr

 .env
 .env.local
+
+.DS_Store
--- a/51
+++ b/51
@@ -1,47 +1,28 @@
-# Stage 1: Build the React application
-FROM node:20-alpine AS builder
+# Use a lightweight Node.js image
+FROM node:20-alpine

-# Set working directory
+# Set the working directory inside the container
 WORKDIR /app

-# Copy package manager files for the viewer app
-COPY viewer/package.json viewer/pnpm-lock.yaml ./viewer/
+# Copy package.json and lock files from the viewer directory first
+# to leverage Docker layer caching
+COPY viewer/package.json viewer/pnpm-lock.yaml* ./

-# Install pnpm and dependencies
+# Install pnpm globally
 RUN npm install -g pnpm
-WORKDIR /app/viewer
+
+# Install all dependencies (including devDependencies for Vite)
 RUN pnpm install --frozen-lockfile

-# Copy the rest of the application source code
+# Copy the rest of the application source code from the viewer directory
 COPY viewer/ ./

-RUN unset VITE_API_PROXY_TARGET
-RUN unset VITE_API_PROXY_TARGET
-# Build the application. Vite will automatically use the .env file we just created.
+# Build the application for production
 RUN pnpm build

-# Stage 2: Serve the application with Nginx
-FROM nginx:1.27-alpine
+# Expose the port Vite preview will run on
+EXPOSE 3000

-
-# Remove the default Nginx configuration
-RUN rm /etc/nginx/conf.d/default.conf
-
-# Copy the build output from the builder stage to the Nginx html directory
-COPY --from=builder /app/viewer/dist /usr/share/nginx/html
-
-# Copy the Nginx configuration template and the entrypoint script
-COPY nginx.conf.template /etc/nginx/templates/
-COPY docker-entrypoint.sh /
-
-# Make the entrypoint script executable
-RUN chmod +x /docker-entrypoint.sh
-
-# Set the entrypoint
-ENTRYPOINT ["/docker-entrypoint.sh"]
-
-# Expose port 80
-EXPOSE 80
-
-# Start Nginx in the foreground
-CMD ["nginx", "-g", "daemon off;"]
+# The command to run the app using Vite's preview server
+# --host 0.0.0.0 is crucial to make the server accessible from outside the container
+CMD ["pnpm", "exec", "vite", "preview", "--host", "0.0.0.0", "--port", "3000"]
--- a/TODO.md
+++ b/TODO.md
@@ -1,19 +1,3 @@
-### 2025-08-05 13:56:51 KST
- **Docker 환경 Nginx 프록시 오류 해결**: Docker 컨테이너 환경에서 Nginx가 API 서버로 요청을 올바르게 프록시하지 못하던 404 오류를 해결했습니다.
-  - **원인 분석**: `proxy_pass`에 `http://`와 경로가 포함된 환경 변수가 그대로 사용되어 `upstream` 설정 오류가 발생하고, 경로가 잘못 조합되는 문제를 확인했습니다.
-  - **해결**: `docker-entrypoint.sh` 스크립트에서 기존 `VITE_API_PROXY_TARGET` 변수를 `VITE_API_HOST` (호스트:포트)와 `VITE_API_DIR` (경로)로 분리하도록 수정했습니다.
-  - **Nginx 설정 수정**: `nginx.conf.template`에서 `upstream` 블록은 `${VITE_API_HOST}`를 사용하고, `proxy_pass`에서는 `${VITE_API_DIR}`를 사용하여 최종 경로를 조합하도록 변경하여 문제를 근본적으로 해결했습니다.
-
-### 2025-08-05 11:27:58 KST
- **빌드 오류 수정**: `pnpm build` 시 발생하던 12개의 타입스크립트 오류를 모두 해결하여 빌드 프로세스를 안정화했습니다.
-  - `DynamicForm`: `value` prop의 타입 불일치 오류를 해결했습니다.
-  - `DynamicTable`: 존재하지 않는 속성(`minSize`, `maxSize`) 접근 오류를 수정했습니다.
-  - `Header`: 사용되지 않는 변수(`homePath`)를 제거했습니다.
-  - `main.tsx`: `ThemeProvider`에 잘못 전달된 prop을 제거했습니다.
-  - `FeedbackListPage`: 데이터 타입 불일치로 인해 발생하던 다양한 오류들을 해결했습니다.
- **빌드 성능 최적화**: `React.lazy`와 `Suspense`를 사용하여 페이지 컴포넌트를 동적으로 가져오도록(Code Splitting) 구현했습니다. 이를 통해 초기 로딩 시 번들 크기를 줄여 성능을 개선하고, 빌드 시 발생하던 청크 크기 경고를 해결했습니다.
- **개발 환경 개선**: `pnpm install` 또는 `biome` 실행 시 나타나던 `npm warn` 경고를 해결하기 위해 프로젝트 루트에 `.npmrc` 파일을 추가하여 전역 설정을 덮어쓰도록 조치했습니다.
-
 2025-08-05 11:00:00 KST - Descope 연동 완료

 ---
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,11 +3,8 @@ services:
    build:
      context: .
      dockerfile: Dockerfile
-    env_file:
-    # Also load the .env file for the runtime container environment (for the entrypoint script).
-      - viewer/.env
+    image: qna-viewer:latest
+    container_name: qna-viewer-app
    ports:
-      # Map port on the host to port 80 in the container
-      - "8073:80"
+      - "8073:3000"
    restart: unless-stopped
-    container_name: qna-viewer-react
--- a/docker-entrypoint.sh
+++ b/docker-entrypoint.sh
@@ -1,36 +0,0 @@
-#!/bin/sh
-
-# Exit immediately if a command exits with a non-zero status.
-set -e
-
-echo "--- Docker Entrypoint Script Started ---"
-echo "Listing all environment variables:"
-printenv
-echo "----------------------------------------"
-
-# Check if the required environment variables are set. Exit with an error if they are not.
-: "${VITE_API_PROXY_TARGET:?Error: VITE_API_PROXY_TARGET is not set. Please check your .env file and docker-compose.yml}"
-: "${VITE_API_KEY:?Error: VITE_API_KEY is not set. Please check your .env file and docker-compose.yml}"
-
-# Extract host and directory from VITE_API_PROXY_TARGET
-export VITE_API_HOST=$(echo $VITE_API_PROXY_TARGET | sed -e 's,http://\([^/]*\).*$,\1,g')
-export VITE_API_DIR=$(echo $VITE_API_PROXY_TARGET | sed -e 's,http://[^/]*\(/.*\)$,\1,g' -e 's,/$,,')
-
-echo "Extracted VITE_API_HOST: ${VITE_API_HOST}"
-echo "Extracted VITE_API_DIR: ${VITE_API_DIR}"
-
-# Define the template and output file paths
-TEMPLATE_FILE="/etc/nginx/templates/nginx.conf.template"
-OUTPUT_FILE="/etc/nginx/conf.d/default.conf"
-
-# Substitute environment variables in the template file.
-envsubst '${VITE_API_HOST} ${VITE_API_DIR} ${VITE_API_KEY}' < "$TEMPLATE_FILE" > "$OUTPUT_FILE"
-
-
-echo "Nginx configuration generated successfully. Content:"
-echo "----------------------------------------"
-cat "$OUTPUT_FILE"
-echo "----------------------------------------"
-
-# Execute the command passed to this script (e.g., "nginx -g 'daemon off;'")
-exec "$@"
--- a/nginx.conf.template
+++ b/nginx.conf.template
@@ -1,44 +0,0 @@
-upstream api_back {
-        server ${VITE_API_HOST};
-    }
-
-server {
-    listen 80;
-    server_name localhost;
-
-    # Root directory for static files
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # Proxy API requests
-    location /api/ {
-        # IMPORTANT: The resolver is necessary for Nginx to resolve DNS inside a Docker container
-        # when using variables in proxy_pass. 127.0.0.11 is Docker's internal DNS server.
-        # resolver 127.0.0.11;
-
-        # Set headers for the proxied request
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-
-        # Inject the custom API key header
-        proxy_set_header X-API-KEY '${VITE_API_KEY}';
-
-        # Use environment variables for the proxy target and API key.
-        # These will be substituted by envsubst in the entrypoint script.
-        proxy_pass http://api_back${VITE_API_DIR}/api/;
-    }
-
-    # Serve static files directly
-    location / {
-        # Fallback to index.html for Single Page Application (SPA) routing
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Optional: Add error pages for better user experience
-    error_page 500 502 503 504 /50x.html;
-    location = /50x.html {
-        root /usr/share/nginx/html;
-    }
-}
--- a/viewer/.env
+++ b/viewer/.env
@@ -1,5 +1,4 @@
-# VITE_API_PROXY_TARGET=https://feedback.hmac.kr/_back
-VITE_API_PROXY_TARGET=http://172.16.10.175:3030/_back
+VITE_API_PROXY_TARGET=https://feedback.hmac.kr/_back

 # API 요청 시 필요한 인증 키
 VITE_API_KEY=F5FE0363E37C012204F5
@@ -16,6 +15,7 @@ VITE_DESCOPE_PROJECT_ID=P2wON5fy1K6kyia269VpeIzYP8oP
 VITE_DESCOPE_FLOW_ID=sign-up-with-password-standard

 VITE_DESCOPE_USER_PROFILE_WIDGET_ID=user-profile-widget-standard
+
 # Descope base URL
 DESCOPE_BASE_URL=""
 # Descope base static URL
--- a/viewer/src/App.tsx
+++ b/viewer/src/App.tsx
@@ -1,86 +1,57 @@
 // src/App.tsx
-import { Suspense, lazy } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
 import { MainLayout } from "@/components/MainLayout";
-
-// 페이지 컴포넌트를 동적으로 import
-const FeedbackListPage = lazy(() =>
-	import("@/pages/FeedbackListPage").then((module) => ({
-		default: module.FeedbackListPage,
-	})),
-);
-const FeedbackCreatePage = lazy(() =>
-	import("@/pages/FeedbackCreatePage").then((module) => ({
-		default: module.FeedbackCreatePage,
-	})),
-);
-const FeedbackDetailPage = lazy(() =>
-	import("@/pages/FeedbackDetailPage").then((module) => ({
-		default: module.FeedbackDetailPage,
-	})),
-);
-const IssueListPage = lazy(() =>
-	import("@/pages/IssueListPage").then((module) => ({
-		default: module.IssueListPage,
-	})),
-);
-const IssueDetailPage = lazy(() =>
-	import("@/pages/IssueDetailPage").then((module) => ({
-		default: module.IssueDetailPage,
-	})),
-);
-const ProfilePage = lazy(() =>
-	import("@/pages/ProfilePage").then((module) => ({
-		default: module.ProfilePage,
-	})),
-);
+import { FeedbackCreatePage } from "@/pages/FeedbackCreatePage";
+import { FeedbackListPage } from "@/pages/FeedbackListPage";
+import { FeedbackDetailPage } from "@/pages/FeedbackDetailPage";
+import { IssueListPage } from "@/pages/IssueListPage";
+import { IssueDetailPage } from "@/pages/IssueDetailPage";
+import { ProfilePage } from "@/pages/ProfilePage";

 function App() {
 	const defaultProjectId = import.meta.env.VITE_DEFAULT_PROJECT_ID || "1";
 	const defaultChannelId = import.meta.env.VITE_DEFAULT_CHANNEL_ID || "4";

 	return (
-		<Suspense fallback={<div className="text-center p-8">로딩 중...</div>}>
-			<Routes>
-				{/* 기본 경로 리디렉션 */}
+		<Routes>
+			{/* 기본 경로 리디렉션 */}
+			<Route
+				path="/"
+				element={
+					<Navigate
+						to={`/projects/${defaultProjectId}/channels/${defaultChannelId}/feedbacks`}
+					/>
+				}
+			/>
+
+			{/* 프로젝트 기반 레이아웃 */}
+			<Route path="/projects/:projectId" element={<MainLayout />}>
 				<Route
-					path="/"
-					element={
-						<Navigate
-							to={`/projects/${defaultProjectId}/channels/${defaultChannelId}/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" element={<MainLayout />}>
-					<Route
-						path="channels/:channelId/feedbacks"
-						element={<FeedbackListPage />}
-					/>
-					<Route
-						path="channels/:channelId/feedbacks/new"
-						element={<FeedbackCreatePage />}
-					/>
-					<Route
-						path="channels/:channelId/feedbacks/:feedbackId"
-						element={<FeedbackDetailPage />}
-					/>
+				{/* 채널 비종속 페이지 */}
+				<Route path="issues" element={<IssueListPage />} />
+				<Route path="issues/:issueId" element={<IssueDetailPage />} />
+			</Route>

-					{/* 채널 비종속 페이지 */}
-					<Route path="issues" element={<IssueListPage />} />
-					<Route path="issues/:issueId" element={<IssueDetailPage />} />
-				</Route>
+			{/* 전체 레이아웃 */}
+			<Route element={<MainLayout />}>
+				<Route path="/profile" element={<ProfilePage />} />
+			</Route>

-				{/* 전체 레이아웃 */}
-				<Route element={<MainLayout />}>
-					<Route path="/profile" element={<ProfilePage />} />
-				</Route>
-
-				{/* 잘못된 접근을 위한 리디렉션 */}
-				<Route path="*" element={<Navigate to="/" />} />
-			</Routes>
-		</Suspense>
+			{/* 잘못된 접근을 위한 리디렉션 */}
+			<Route path="*" element={<Navigate to="/" />} />
+		</Routes>
 	);
 }

--- a/viewer/src/components/DynamicForm.tsx
+++ b/viewer/src/components/DynamicForm.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import type { FeedbackField } from "@/services/feedback";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -11,11 +11,13 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";

+// 컴포넌트 외부에 안정적인 참조를 가진 빈 객체 상수 선언
+const EMPTY_INITIAL_DATA = {};
+
 interface DynamicFormProps {
 	fields: FeedbackField[];
-	formData: Record<string, unknown>;
-	setFormData: (formData: Record<string, unknown>) => void;
 	onSubmit: (formData: Record<string, unknown>) => Promise<void>;
+	initialData?: Record<string, unknown>;
 	submitButtonText?: string;
 	onCancel?: () => void;
 	cancelButtonText?: string;
@@ -24,18 +26,24 @@ interface DynamicFormProps {

 export function DynamicForm({
 	fields,
-	formData,
-	setFormData,
 	onSubmit,
+	initialData = EMPTY_INITIAL_DATA, // 기본값으로 상수 사용
 	submitButtonText = "제출",
 	onCancel,
 	cancelButtonText = "취소",
 	hideButtons = false,
 }: DynamicFormProps) {
+	const [formData, setFormData] =
+		useState<Record<string, unknown>>(initialData);
 	const [isSubmitting, setIsSubmitting] = useState(false);

+	useEffect(() => {
+		// initialData prop이 변경될 때만 폼 데이터를 동기화
+		setFormData(initialData);
+	}, [initialData]);
+
 	const handleFormChange = (fieldId: string, value: unknown) => {
-		setFormData({ ...formData, [fieldId]: value });
+		setFormData((prev) => ({ ...prev, [fieldId]: value }));
 	};

 	const handleSubmit = async (e: React.FormEvent) => {
@@ -51,9 +59,10 @@ export function DynamicForm({
 	};

 	const renderField = (field: FeedbackField) => {
+		const value = String(formData[field.id] ?? "");
 		const commonProps = {
 			id: field.id,
-			value: formData[field.id] ?? "",
+			value: value,
 			disabled: field.readOnly,
 		};

@@ -62,7 +71,6 @@ export function DynamicForm({
 				return (
 					<Textarea
 						{...commonProps}
-						value={String(commonProps.value)}
 						onChange={(e) => handleFormChange(field.id, e.target.value)}
 						placeholder={field.readOnly ? "" : `${field.name}...`}
 						rows={5}
@@ -73,7 +81,6 @@ export function DynamicForm({
 				return (
 					<Input
 						{...commonProps}
-						value={String(commonProps.value)}
 						type={field.type}
 						onChange={(e) => handleFormChange(field.id, e.target.value)}
 						placeholder={field.readOnly ? "" : field.name}
@@ -82,7 +89,7 @@ export function DynamicForm({
 			case "select":
 				return (
 					<Select
-						value={String(commonProps.value)}
+						value={commonProps.value}
 						onValueChange={(value) => handleFormChange(field.id, value)}
 						disabled={field.readOnly}
 					>
--- a/viewer/src/components/DynamicTable.tsx
+++ b/viewer/src/components/DynamicTable.tsx
@@ -90,19 +90,12 @@ export function DynamicTable<TData extends BaseData>({
 }: DynamicTableProps<TData>) {
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
-		screenshot: false,
-		createdAt: false,
-	});
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
 	const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
 	const [expanded, setExpanded] = useState<ExpandedState>({});
 	const [globalFilter, setGlobalFilter] = useState("");
 	const [date, setDate] = useState<DateRange | undefined>();

-	const columnNameMap = useMemo(() => {
-		return new Map(rawColumns.map((col) => [col.id, col.name]));
-	}, [rawColumns]);
-
 	const columns = useMemo<ColumnDef<TData>[]>(() => {
 		// 컬럼 순서 고정: 'id', 'title'/'name'을 항상 앞으로
 		const fixedOrder = ["id", "title", "name"];
@@ -131,9 +124,7 @@ export function DynamicTable<TData extends BaseData>({
 					return (
 						<Button
 							variant="ghost"
-							onClick={() =>
-								column.toggleSorting(column.getIsSorted() === "asc")
-							}
+							onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
 						>
 							{field.name}
 							<ArrowUpDown className="ml-2 h-4 w-4" />
@@ -191,18 +182,6 @@ export function DynamicTable<TData extends BaseData>({
 						case "createdAt":
 						case "updatedAt":
 							return String(value ?? "N/A").substring(0, 10);
-						case "customer": {
-							const content = String(value ?? "N/A");
-							const truncated =
-								content.length > 20
-									? `${content.substring(0, 20)}...`
-									: content;
-							return (
-								<div title={content} className="whitespace-nowrap">
-									{truncated}
-								</div>
-							);
-						}
 						default:
 							if (typeof value === "object" && value !== null) {
 								return JSON.stringify(value);
@@ -360,7 +339,7 @@ export function DynamicTable<TData extends BaseData>({
 													column.toggleVisibility(!!value)
 												}
 											>
-												{columnNameMap.get(column.id) ?? column.id}
+												{column.id}
 											</DropdownMenuCheckboxItem>
 										);
 									})}
--- a/viewer/src/components/FeedbackFormCard.tsx
+++ b/viewer/src/components/FeedbackFormCard.tsx
@@ -1,5 +1,10 @@
 // src/components/FeedbackFormCard.tsx
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
 import { DynamicForm } from "@/components/DynamicForm";
 import type { FeedbackField } from "@/services/feedback";
 import { ErrorDisplay } from "./ErrorDisplay";
@@ -8,8 +13,7 @@ import { Button } from "./ui/button";
 interface FeedbackFormCardProps {
 	title: string;
 	fields: FeedbackField[];
-	formData: Record<string, unknown>;
-	setFormData: (formData: Record<string, unknown>) => void;
+	initialData?: Record<string, unknown>;
 	onSubmit: (formData: Record<string, unknown>) => Promise<void>;
 	onCancel: () => void;
 	submitButtonText: string;
@@ -24,8 +28,7 @@ interface FeedbackFormCardProps {
 export function FeedbackFormCard({
 	title,
 	fields,
-	formData,
-	setFormData,
+	initialData,
 	onSubmit,
 	onCancel,
 	submitButtonText,
@@ -47,15 +50,14 @@ export function FeedbackFormCard({
 	const readOnlyFields = fields.map((field) => ({ ...field, readOnly: true }));

 	return (
-		<Card className="w-full mt-6 max-w-3xl mx-auto">
+		<Card className="w-full mt-6">
 			<CardHeader>
 				<CardTitle>{title}</CardTitle>
 			</CardHeader>
 			<CardContent>
 				<DynamicForm
 					fields={isEditing ? fields : readOnlyFields}
-					formData={formData}
-					setFormData={setFormData}
+					initialData={initialData}
 					onSubmit={onSubmit}
 					onCancel={onCancel}
 					submitButtonText={submitButtonText}
--- a/viewer/src/components/Header.tsx
+++ b/viewer/src/components/Header.tsx
@@ -28,9 +28,7 @@ export function Header() {

 	useEffect(() => {
 		const getSystemTheme = () =>
-			window.matchMedia("(prefers-color-scheme: dark)").matches
-				? "dark"
-				: "light";
+			window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";

 		const resolvedTheme = theme === "system" ? getSystemTheme() : theme;
 		setCurrentLogo(resolvedTheme === "dark" ? LogoDark : LogoLight);
@@ -124,3 +122,4 @@ export function Header() {
 		</header>
 	);
 }
+
--- a/viewer/src/components/MainLayout.tsx
+++ b/viewer/src/components/MainLayout.tsx
@@ -4,10 +4,12 @@ import { Header } from "./Header";

 export function MainLayout() {
 	return (
-		<div className="flex h-full w-full flex-col">
+		<div className="flex h-screen w-full flex-col">
 			<Header />
-			<main className="flex-1 overflow-y-scroll bg-muted/40">
-				<Outlet />
+			<main className="flex-1 overflow-y-auto">
+				<div className="container mx-auto py-6">
+					<Outlet />
+				</div>
 			</main>
 		</div>
 	);
--- a/viewer/src/components/PageLayout.tsx
+++ b/viewer/src/components/PageLayout.tsx
@@ -6,7 +6,6 @@ interface PageLayoutProps {
 	description?: string;
 	actions?: React.ReactNode;
 	children: React.ReactNode;
-	size?: "default" | "narrow";
 }

 export function PageLayout({
@@ -14,19 +13,13 @@ export function PageLayout({
 	description,
 	actions,
 	children,
-	size = "default",
 }: PageLayoutProps) {
-	const containerClass =
-		size === "narrow" ? "max-w-3xl mx-auto" : "max-w-7xl mx-auto";
-
 	return (
-		<div className="w-full px-4 sm:px-6 lg:px-8 py-6">
-			<div className={containerClass}>
-				<PageTitle title={title} description={description}>
-					{actions}
-				</PageTitle>
-				<main>{children}</main>
-			</div>
+		<div className="flex h-full w-full flex-col">
+			<PageTitle title={title} description={description}>
+				{actions}
+			</PageTitle>
+			<div className="flex-grow overflow-y-auto">{children}</div>
 		</div>
 	);
 }
--- a/viewer/src/components/UserProfileBox.tsx
+++ b/viewer/src/components/UserProfileBox.tsx
@@ -77,9 +77,7 @@ export function UserProfileBox() {
 							<DropdownMenuItem onClick={() => navigate("/profile")}>
 								내 프로필
 							</DropdownMenuItem>
-							<DropdownMenuItem onClick={handleLogout}>
-								로그아웃
-							</DropdownMenuItem>
+							<DropdownMenuItem onClick={handleLogout}>로그아웃</DropdownMenuItem>
 						</>
 					) : (
 						<DropdownMenuItem onClick={() => setIsLoginModalOpen(true)}>
--- a/viewer/src/components/providers/ThemeProvider.d.ts
+++ b/viewer/src/components/providers/ThemeProvider.d.ts
@@ -1,9 +1,6 @@
-import React from "react";
-
 interface ThemeProviderProps {
 	children: React.ReactNode;
 }
-
 export declare function ThemeProvider({
 	children,
-}: ThemeProviderProps): React.ReactElement;
+}: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
--- a/viewer/src/components/ui/avatar.tsx
+++ b/viewer/src/components/ui/avatar.tsx
@@ -1,50 +1,50 @@
-"use client";
+"use client"

-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"

-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"

 const Avatar = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Root
-		ref={ref}
-		className={cn(
-			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-			className,
-		)}
-		{...props}
-	/>
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName

 const AvatarImage = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Image>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Image
-		ref={ref}
-		className={cn("aspect-square h-full w-full", className)}
-		{...props}
-	/>
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName

 const AvatarFallback = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Fallback>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Fallback
-		ref={ref}
-		className={cn(
-			"flex h-full w-full items-center justify-center rounded-full bg-muted",
-			className,
-		)}
-		{...props}
-	/>
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarImage, AvatarFallback }
--- a/viewer/src/components/ui/dialog.tsx
+++ b/viewer/src/components/ui/dialog.tsx
@@ -1,119 +1,119 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "@/lib/utils";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { cn } from "@/lib/utils"
+import { Cross2Icon } from "@radix-ui/react-icons"

-const Dialog = DialogPrimitive.Root;
+const Dialog = DialogPrimitive.Root

-const DialogTrigger = DialogPrimitive.Trigger;
+const DialogTrigger = DialogPrimitive.Trigger

-const DialogPortal = DialogPrimitive.Portal;
+const DialogPortal = DialogPrimitive.Portal

-const DialogClose = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close

 const DialogOverlay = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-	<DialogPrimitive.Overlay
-		ref={ref}
-		className={cn(
-			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-			className,
-		)}
-		{...props}
-	/>
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

 const DialogContent = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-	<DialogPortal>
-		<DialogOverlay />
-		<DialogPrimitive.Content
-			ref={ref}
-			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-				className,
-			)}
-			{...props}
-		>
-			{children}
-			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-				<Cross2Icon className="h-4 w-4" />
-				<span className="sr-only">Close</span>
-			</DialogPrimitive.Close>
-		</DialogPrimitive.Content>
-	</DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName

 const DialogHeader = ({
-	className,
-	...props
+  className,
+  ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn(
-			"flex flex-col space-y-1.5 text-center sm:text-left",
-			className,
-		)}
-		{...props}
-	/>
-);
-DialogHeader.displayName = "DialogHeader";
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"

 const DialogFooter = ({
-	className,
-	...props
+  className,
+  ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div
-		className={cn(
-			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-			className,
-		)}
-		{...props}
-	/>
-);
-DialogFooter.displayName = "DialogFooter";
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"

 const DialogTitle = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Title>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-	<DialogPrimitive.Title
-		ref={ref}
-		className={cn(
-			"text-lg font-semibold leading-none tracking-tight",
-			className,
-		)}
-		{...props}
-	/>
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName

 const DialogDescription = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-	<DialogPrimitive.Description
-		ref={ref}
-		className={cn("text-sm text-muted-foreground", className)}
-		{...props}
-	/>
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName

 export {
-	Dialog,
-	DialogPortal,
-	DialogOverlay,
-	DialogTrigger,
-	DialogClose,
-	DialogContent,
-	DialogHeader,
-	DialogFooter,
-	DialogTitle,
-	DialogDescription,
-};
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
--- a/viewer/src/index.css
+++ b/viewer/src/index.css
@@ -55,14 +55,132 @@
 	* {
 		@apply border-border;
 	}
-	html, body, #root {
-		height: 100%;
-	}
 	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", monospace;
+	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", sans-serif;
+	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;
+	}
+}
+
 .resizer {
 	position: absolute;
 	right: 0;
--- a/viewer/src/pages/FeedbackCreatePage.tsx
+++ b/viewer/src/pages/FeedbackCreatePage.tsx
@@ -19,89 +19,68 @@ export function FeedbackCreatePage() {
 	const { user } = useUser();

 	const [fields, setFields] = useState<FeedbackField[]>([]);
-	const [formData, setFormData] = useState<Record<string, unknown>>({});
+	const [initialData, setInitialData] = useState<Record<string, unknown>>({});
 	const [loading, setLoading] = useState<boolean>(true);
 	const [error, setError] = useState<string | null>(null);
 	const [successMessage, setSuccessMessage] = useState<string | null>(null);

 	useEffect(() => {
 		if (!projectId || !channelId) return;
-
-		const fetchAndProcessSchema = async () => {
+		const fetchSchema = async () => {
 			try {
 				setLoading(true);
 				const schemaData = await getFeedbackFields(projectId, channelId);
-
-				let processedFields = schemaData
-					.filter(
-						(field) =>
-							!["id", "createdAt", "updatedAt", "issues"].includes(field.id),
-					)
-					.map((field) => ({
-						...field,
-						type: field.id === "contents" ? "textarea" : field.type,
-					}));
-
-				const initialData: Record<string, unknown> = {};
-
-				if (user) {
-					const authorField = processedFields.find((f) =>
-						["customer", "author", "writer"].includes(f.id),
-					);
-
-					if (authorField) {
-						const { name, email, customAttributes } = user;
-						const company =
-							customAttributes?.familyCompany ||
-							customAttributes?.company ||
-							customAttributes?.customerCompany ||
-							"";
-						const team = customAttributes?.team || "";
-						const companyInfo = [company, team].filter(Boolean).join(", ");
-						const authorString = `${name} <${email}>${
-							companyInfo ? ` at ${companyInfo}` : ""
-						}`;
-
-						initialData[authorField.id] = authorString;
-
-						processedFields = processedFields.map((field) =>
-							field.id === authorField.id
-								? { ...field, readOnly: true }
-								: field,
-						);
-					}
-				}
-
-				setFields(processedFields);
-				setFormData(initialData);
+				const filteredSchema = schemaData.filter(
+					(field) => !["id", "createdAt", "updatedAt", "issues"].includes(field.id),
+				);
+				setFields(filteredSchema);
 			} catch (err) {
 				setError(err instanceof Error ? err.message : "폼 로딩 중 오류 발생");
 			} finally {
 				setLoading(false);
 			}
 		};
+		fetchSchema();
+	}, [projectId, channelId]);

-		fetchAndProcessSchema();
-	}, [projectId, channelId, user]);
+	useEffect(() => {
+		if (user && fields.length > 0) {
+			const authorField = fields.find((f) =>
+				["customer", "author", "writer"].includes(f.id),
+			);

-	const handleSubmit = async (submittedData: Record<string, unknown>) => {
+			if (authorField && !authorField.readOnly) {
+				const { name, email, customAttributes } = user;
+				const company =
+					customAttributes?.familyCompany ||
+					customAttributes?.company ||
+					customAttributes?.customerCompany ||
+					"";
+				const team = customAttributes?.team || "";
+				const companyInfo = [company, team].filter(Boolean).join(", ");
+				const authorString = `${name} <${email}>${
+					companyInfo ? ` at ${companyInfo}` : ""
+				}`;
+
+				setInitialData((prev) => ({ ...prev, [authorField.id]: authorString }));
+				setFields((prevFields) =>
+					prevFields.map((field) =>
+						field.id === authorField.id ? { ...field, readOnly: true } : field,
+					),
+				);
+			}
+		}
+	}, [user, fields]);
+
+	const handleSubmit = async (formData: Record<string, unknown>) => {
 		if (!projectId || !channelId) return;
 		try {
 			setError(null);
 			setSuccessMessage(null);
-			const requestData: CreateFeedbackRequest = {
-				...submittedData,
-				issueNames: [],
-			};
+			const requestData: CreateFeedbackRequest = { ...formData, issueNames: [] };
 			await createFeedback(projectId, channelId, requestData);
-			setSuccessMessage(
-				"피드백이 성공적으로 등록되었습니다! 곧 목록으로 돌아갑니다.",
-			);
-			setTimeout(
-				() =>
-					navigate(`/projects/${projectId}/channels/${channelId}/feedbacks`),
-				2000,
-			);
+			setSuccessMessage("피드백이 성공적으로 등록되었습니다! 곧 목록으로 돌아갑니다.");
+			setTimeout(() => navigate(`/projects/${projectId}/channels/${channelId}/feedbacks`), 2000);
 		} catch (err) {
 			setError(err instanceof Error ? err.message : "피드백 등록 중 오류 발생");
 			throw err;
@@ -116,13 +95,11 @@ export function FeedbackCreatePage() {
 		<PageLayout
 			title="새 피드백 작성"
 			description="아래 폼을 작성하여 피드백을 제출해주세요."
-			size="narrow"
 		>
 			<FeedbackFormCard
 				title="새 피드백"
 				fields={fields}
-				formData={formData}
-				setFormData={setFormData}
+				initialData={initialData}
 				onSubmit={handleSubmit}
 				onCancel={handleCancel}
 				submitButtonText="제출하기"
--- a/viewer/src/pages/FeedbackDetailPage.tsx
+++ b/viewer/src/pages/FeedbackDetailPage.tsx
@@ -1,6 +1,5 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import { useUser } from "@descope/react-sdk";
 import { useSyncChannelId } from "@/hooks/useSyncChannelId";
 import {
 	getFeedbackById,
@@ -11,10 +10,6 @@ import {
 } from "@/services/feedback";
 import { FeedbackFormCard } from "@/components/FeedbackFormCard";
 import { PageLayout } from "@/components/PageLayout";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { ErrorDisplay } from "@/components/ErrorDisplay";

 export function FeedbackDetailPage() {
 	useSyncChannelId();
@@ -24,7 +19,6 @@ export function FeedbackDetailPage() {
 		feedbackId: string;
 	}>();
 	const navigate = useNavigate();
-	const { user } = useUser();

 	const [fields, setFields] = useState<FeedbackField[]>([]);
 	const [feedback, setFeedback] = useState<Feedback | null>(null);
@@ -32,7 +26,8 @@ export function FeedbackDetailPage() {
 	const [error, setError] = useState<string | null>(null);
 	const [successMessage, setSuccessMessage] = useState<string | null>(null);
 	const [isEditing, setIsEditing] = useState(false);
-	const [formData, setFormData] = useState<Record<string, unknown>>({});
+
+	const initialData = useMemo(() => feedback ?? {}, [feedback]);

 	useEffect(() => {
 		const fetchData = async () => {
@@ -44,27 +39,19 @@ export function FeedbackDetailPage() {
 					getFeedbackById(projectId, channelId, feedbackId),
 				]);

-				const hiddenFields = [
-					"id",
-					"createdAt",
-					"updatedAt",
-					"issues",
-					"screenshot",
-					"customer",
-				];
+				const hiddenFields = ["id", "createdAt", "updatedAt", "issues", "screenshot"];
 				const processedFields = fieldsData
 					.filter((field) => !hiddenFields.includes(field.id))
 					.map((field) => ({
 						...field,
 						type: field.id === "contents" ? "textarea" : field.type,
+						readOnly: field.id === "customer",
 					}));

 				setFields(processedFields);
 				setFeedback(feedbackData);
 			} catch (err) {
-				setError(
-					err instanceof Error ? err.message : "데이터 로딩 중 오류 발생",
-				);
+				setError(err instanceof Error ? err.message : "데이터 로딩 중 오류 발생");
 			} finally {
 				setLoading(false);
 			}
@@ -72,30 +59,19 @@ export function FeedbackDetailPage() {
 		fetchData();
 	}, [projectId, channelId, feedbackId]);

-	const handleEditClick = () => {
-		setFormData(feedback ?? {});
-		setIsEditing(true);
-	};
-
-	const handleSubmit = async (submittedData: Record<string, unknown>) => {
+	const handleSubmit = async (formData: Record<string, unknown>) => {
 		if (!projectId || !channelId || !feedbackId) return;
 		try {
 			setError(null);
 			setSuccessMessage(null);
 			const dataToUpdate = Object.fromEntries(
-				Object.entries(submittedData).filter(([key]) =>
+				Object.entries(formData).filter(([key]) =>
 					fields.some((f) => f.id === key && !f.readOnly),
 				),
 			);
-			const updatedFeedback = await updateFeedback(
-				projectId,
-				channelId,
-				feedbackId,
-				dataToUpdate,
-			);
-			setFeedback((prev) => ({ ...prev, ...updatedFeedback }));
+			await updateFeedback(projectId, channelId, feedbackId, dataToUpdate);
 			setSuccessMessage("피드백이 성공적으로 수정되었습니다!");
-			setIsEditing(false);
+			setIsEditing(false); // 수정 완료 후 읽기 모드로 전환
 		} catch (err) {
 			setError(err instanceof Error ? err.message : "피드백 수정 중 오류 발생");
 			throw err;
@@ -103,112 +79,28 @@ export function FeedbackDetailPage() {
 	};

 	const handleCancel = () => {
-		if (isEditing) {
-			setIsEditing(false);
-		} else {
-			navigate(`/projects/${projectId}/channels/${channelId}/feedbacks`);
-		}
+		navigate(`/projects/${projectId}/channels/${channelId}/feedbacks`);
 	};

-	const ReadOnlyDisplay = ({ onEditClick }: { onEditClick: () => void }) => {
-		if (!feedback) return null;
-
-		const getEmailFromCustomer = (customer: unknown): string | null => {
-			if (typeof customer !== "string") return null;
-			const match = customer.match(/<([^>]+)>/);
-			return match ? match[1] : null;
-		};
-
-		const authorEmail = getEmailFromCustomer(feedback.customer);
-		const isOwner =
-			!!user?.email && !!authorEmail && user.email === authorEmail;
-
-		return (
-			<Card className="w-full mt-6 max-w-3xl mx-auto">
-				<CardHeader>
-					<div className="flex justify-between items-start">
-						<CardTitle>피드백 정보 (ID: {feedback.id})</CardTitle>
-						{!!feedback.customer && (
-							<span
-								className="text-sm text-muted-foreground whitespace-nowrap"
-								title={String(feedback.customer)}
-							>
-								{String(feedback.customer).length > 45
-									? `${String(feedback.customer).substring(0, 45)}...`
-									: String(feedback.customer)}
-							</span>
-						)}
-					</div>
-				</CardHeader>
-				<CardContent>
-					<div className="space-y-4">
-						{fields.map((field) => (
-							<div key={field.id}>
-								<Label htmlFor={field.id} className="font-semibold">
-									{field.name}
-								</Label>
-								<div
-									id={field.id}
-									className={`mt-1 p-2 border rounded-md bg-muted min-h-[40px] whitespace-pre-wrap ${
-										field.id === "contents" ? "min-h-[120px]" : ""
-									}`}
-								>
-									{String(feedback[field.id] ?? "")}
-								</div>
-							</div>
-						))}
-						<div className="flex justify-end gap-2 pt-4">
-							{isOwner && <Button onClick={onEditClick}>수정</Button>}
-							<Button
-								variant="outline"
-								onClick={() =>
-									navigate(
-										`/projects/${projectId}/channels/${channelId}/feedbacks`,
-									)
-								}
-							>
-								목록으로
-							</Button>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-		);
-	};
-
-	if (loading) {
-		return <div>페이지 로딩 중...</div>;
-	}
-
-	if (error) {
-		return <ErrorDisplay message={error} />;
-	}
-
 	return (
 		<PageLayout
 			title="개별 피드백"
 			description="피드백 내용을 확인하고 수정할 수 있습니다."
-			size="narrow"
 		>
-			{isEditing ? (
-				<FeedbackFormCard
-					title={`피드백 수정 (ID: ${feedback?.id})`}
-					fields={fields}
-					formData={formData}
-					setFormData={setFormData}
-					onSubmit={handleSubmit}
-					onCancel={handleCancel}
-					submitButtonText="완료"
-					cancelButtonText="취소"
-					successMessage={successMessage}
-					error={error}
-					loading={loading}
-					isEditing={isEditing}
-					onEditClick={handleEditClick}
-				/>
-			) : (
-				<ReadOnlyDisplay onEditClick={handleEditClick} />
-			)}
+			<FeedbackFormCard
+				title={`피드백 정보 (ID: ${feedback?.id})`}
+				fields={fields}
+				initialData={initialData}
+				onSubmit={handleSubmit}
+				onCancel={handleCancel}
+				submitButtonText="완료"
+				cancelButtonText="목록으로"
+				successMessage={successMessage}
+				error={error}
+				loading={loading}
+				isEditing={isEditing}
+				onEditClick={() => setIsEditing(true)}
+			/>
 		</PageLayout>
 	);
 }
--- a/viewer/src/pages/FeedbackListPage.tsx
+++ b/viewer/src/pages/FeedbackListPage.tsx
@@ -51,20 +51,16 @@ export function FeedbackListPage() {
 		fetchSchemaAndFeedbacks();
 	}, [projectId, channelId]);

-	const handleRowClick = (row: Feedback) => {
+	const handleRowClick = (row: any) => {
 		navigate(
 			`/projects/${projectId}/channels/${channelId}/feedbacks/${row.id}`,
 		);
 	};

-	const renderExpandedRow = (row: Row<Feedback>) => (
+	const renderExpandedRow = (row: Row<any>) => (
 		<div className="p-4 bg-muted rounded-md">
-			<h4 className="font-bold text-lg mb-2">
-				{String(row.original.title ?? "")}
-			</h4>
-			<p className="whitespace-pre-wrap">
-				{String(row.original.contents ?? "")}
-			</p>
+			<h4 className="font-bold text-lg mb-2">{row.original.title}</h4>
+			<p className="whitespace-pre-wrap">{row.original.contents}</p>
 		</div>
 	);

@@ -72,6 +68,11 @@ export function FeedbackListPage() {
 		return <div className="text-center py-10">로딩 중...</div>;
 	}

+	const tableData = feedbacks.map(item => ({
+		...item,
+		updatedAt: item.updatedAt || new Date().toISOString(),
+	}));
+
 	return (
 		<PageLayout
 			title="피드백 목록"
@@ -88,7 +89,7 @@ export function FeedbackListPage() {
 			{schema && (
 				<DynamicTable
 					columns={schema}
-					data={feedbacks}
+					data={tableData}
 					onRowClick={handleRowClick}
 					renderExpandedRow={renderExpandedRow}
 					projectId={projectId}
--- a/viewer/src/pages/IssueListPage.tsx
+++ b/viewer/src/pages/IssueListPage.tsx
@@ -62,7 +62,10 @@ export function IssueListPage() {
 	}

 	return (
-		<PageLayout title="이슈 목록" description="프로젝트의 이슈 목록입니다.">
+		<PageLayout
+			title="이슈 목록"
+			description="프로젝트의 이슈 목록입니다."
+		>
 			{error && <ErrorDisplay message={error} />}
 			{schema && (
 				<DynamicTable
--- a/viewer/src/pages/ProfilePage.tsx
+++ b/viewer/src/pages/ProfilePage.tsx
@@ -17,10 +17,7 @@ export function ProfilePage() {
 	}

 	return (
-		<PageLayout
-			title="내 프로필"
-			description="프로필 정보를 수정할 수 있습니다."
-		>
+		<PageLayout title="내 프로필" description="프로필 정보를 수정할 수 있습니다.">
 			<div className="mt-6 flex justify-center">
 				<UserProfile
 					widgetId={widgetId}
--- a/viewer/src/services/feedback.ts
+++ b/viewer/src/services/feedback.ts
@@ -13,7 +13,6 @@ interface ApiField {
 export interface Feedback {
 	id: string;
 	content: string;
-	updatedAt: string;
 	[key: string]: unknown; // 동적 필드를 위해 인덱스 시그니처 사용
 }