레이아웃 수정, 글쓰기/작성한글 수정 간단 권한

.dockerignore

@@ -0,0 +1,17 @@
+# Ignore node_modules
+node_modules
+viewer/node_modules
+
+# Ignore build artifacts
+viewer/dist
+
+# Ignore environment files to prevent them from being baked into the image
+*.env.local
+
+# Ignore git directory
+.git
+
+# Ignore Docker files
+Dockerfile
+docker-compose.yml
+.dockerignore

.gitignore

@@ -25,5 +25,3 @@ dist-ssr
 
 .env
 .env.local
-
-.DS_Store

Dockerfile

@@ -0,0 +1,47 @@
+# Stage 1: Build the React application
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package manager files for the viewer app
+COPY viewer/package.json viewer/pnpm-lock.yaml ./viewer/
+
+# Install pnpm and dependencies
+RUN npm install -g pnpm
+WORKDIR /app/viewer
+RUN pnpm install --frozen-lockfile
+
+# Copy the rest of the application source code
+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.
+RUN pnpm build
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:1.27-alpine
+
+
+# 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;"]

TODO.md

@@ -1,3 +1,19 @@
+### 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 연동 완료
 
 ---

docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  qna-viewer:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    env_file:
+    # Also load the .env file for the runtime container environment (for the entrypoint script).
+      - viewer/.env
+    ports:
+      # Map port on the host to port 80 in the container
+      - "8073:80"
+    restart: unless-stopped
+    container_name: qna-viewer-react

docker-entrypoint.sh

@@ -0,0 +1,36 @@
+#!/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 "$@"

nginx.conf.template

@@ -0,0 +1,44 @@
+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;
+    }
+}

viewer/.env

@@ -1,4 +1,5 @@
-VITE_API_PROXY_TARGET=https://feedback.hmac.kr/_back
+# VITE_API_PROXY_TARGET=https://feedback.hmac.kr/_back
+VITE_API_PROXY_TARGET=http://172.16.10.175:3030/_back
 
 # API 요청 시 필요한 인증 키
 VITE_API_KEY=F5FE0363E37C012204F5

viewer/src/App.tsx

@@ -1,57 +1,86 @@
 // src/App.tsx
+import { Suspense, lazy } 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 { IssueListPage } from "@/pages/IssueListPage";
-import { IssueDetailPage } from "@/pages/IssueDetailPage";
-import { ProfilePage } from "@/pages/ProfilePage";
+
+// 페이지 컴포넌트를 동적으로 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,
+	})),
+);
 
 function App() {
 	const defaultProjectId = import.meta.env.VITE_DEFAULT_PROJECT_ID || "1";
 	const defaultChannelId = import.meta.env.VITE_DEFAULT_CHANNEL_ID || "4";
 
 	return (
-		<Routes>
-			{/* 기본 경로 리디렉션 */}
-			<Route
-				path="/"
-				element={
-					<Navigate
-						to={`/projects/${defaultProjectId}/channels/${defaultChannelId}/feedbacks`}
+		<Suspense fallback={<div className="text-center p-8">로딩 중...</div>}>
+			<Routes>
+				{/* 기본 경로 리디렉션 */}
+				<Route
+					path="/"
+					element={
+						<Navigate
+							to={`/projects/${defaultProjectId}/channels/${defaultChannelId}/feedbacks`}
+						/>
+					}
+				/>
+
+				{/* 프로젝트 기반 레이아웃 */}
+				<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="/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>
+				{/* 잘못된 접근을 위한 리디렉션 */}
+				<Route path="*" element={<Navigate to="/" />} />
+			</Routes>
+		</Suspense>
 	);
 }
 

viewer/src/components/DynamicForm.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import type { FeedbackField } from "@/services/feedback";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -11,13 +11,11 @@ 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;
@@ -26,24 +24,18 @@ 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((prev) => ({ ...prev, [fieldId]: value }));
+		setFormData({ ...formData, [fieldId]: value });
 	};
 
 	const handleSubmit = async (e: React.FormEvent) => {
@@ -70,6 +62,7 @@ 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}
@@ -80,6 +73,7 @@ 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}
@@ -88,7 +82,7 @@ export function DynamicForm({
 			case "select":
 				return (
 					<Select
-						value={commonProps.value}
+						value={String(commonProps.value)}
 						onValueChange={(value) => handleFormChange(field.id, value)}
 						disabled={field.readOnly}
 					>

viewer/src/components/DynamicTable.tsx

@@ -90,12 +90,19 @@ export function DynamicTable<TData extends BaseData>({
 }: DynamicTableProps<TData>) {
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
+		screenshot: false,
+		createdAt: false,
+	});
 	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"];
@@ -124,7 +131,9 @@ 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" />
@@ -182,6 +191,18 @@ 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);
@@ -339,7 +360,7 @@ export function DynamicTable<TData extends BaseData>({
 													column.toggleVisibility(!!value)
 												}
 											>
-												{column.id}
+												{columnNameMap.get(column.id) ?? column.id}
 											</DropdownMenuCheckboxItem>
 										);
 									})}
@@ -375,8 +396,8 @@ export function DynamicTable<TData extends BaseData>({
 											<div
 												role="slider"
 												aria-label={`컬럼 너비 조절: ${header.id}`}
-												aria-valuemin={header.column.minSize}
-												aria-valuemax={header.column.maxSize}
+												aria-valuemin={header.column.columnDef.minSize}
+												aria-valuemax={header.column.columnDef.maxSize}
 												aria-valuenow={header.column.getSize()}
 												tabIndex={0}
 												onMouseDown={header.getResizeHandler()}

viewer/src/components/FeedbackFormCard.tsx

@@ -1,10 +1,5 @@
 // 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";
@@ -13,7 +8,8 @@ import { Button } from "./ui/button";
 interface FeedbackFormCardProps {
 	title: string;
 	fields: FeedbackField[];
-	initialData?: Record<string, unknown>;
+	formData: Record<string, unknown>;
+	setFormData: (formData: Record<string, unknown>) => void;
 	onSubmit: (formData: Record<string, unknown>) => Promise<void>;
 	onCancel: () => void;
 	submitButtonText: string;
@@ -28,7 +24,8 @@ interface FeedbackFormCardProps {
 export function FeedbackFormCard({
 	title,
 	fields,
-	initialData,
+	formData,
+	setFormData,
 	onSubmit,
 	onCancel,
 	submitButtonText,
@@ -50,14 +47,15 @@ export function FeedbackFormCard({
 	const readOnlyFields = fields.map((field) => ({ ...field, readOnly: true }));
 
 	return (
-		<Card className="w-full mt-6">
+		<Card className="w-full mt-6 max-w-3xl mx-auto">
 			<CardHeader>
 				<CardTitle>{title}</CardTitle>
 			</CardHeader>
 			<CardContent>
 				<DynamicForm
 					fields={isEditing ? fields : readOnlyFields}
-					initialData={initialData}
+					formData={formData}
+					setFormData={setFormData}
 					onSubmit={onSubmit}
 					onCancel={onCancel}
 					submitButtonText={submitButtonText}

viewer/src/components/Header.tsx

@@ -28,7 +28,9 @@ 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);
@@ -50,8 +52,6 @@ export function Header() {
 		return `/projects/${projectId}/channels/${channelId}${basePath}`;
 	};
 
-	const homePath = projectId ? `/projects/${projectId}` : "/";
-
 	return (
 		<header className="border-b">
 			<div className="container mx-auto flex h-16 items-center">
@@ -124,4 +124,3 @@ export function Header() {
 		</header>
 	);
 }
-

viewer/src/components/MainLayout.tsx

@@ -4,12 +4,10 @@ import { Header } from "./Header";
 
 export function MainLayout() {
 	return (
-		<div className="flex h-screen w-full flex-col">
+		<div className="flex h-full w-full flex-col">
 			<Header />
-			<main className="flex-1 overflow-y-auto">
-				<div className="container mx-auto py-6">
-					<Outlet />
-				</div>
+			<main className="flex-1 overflow-y-scroll bg-muted/40">
+				<Outlet />
 			</main>
 		</div>
 	);

viewer/src/components/PageLayout.tsx

@@ -6,6 +6,7 @@ interface PageLayoutProps {
 	description?: string;
 	actions?: React.ReactNode;
 	children: React.ReactNode;
+	size?: "default" | "narrow";
 }
 
 export function PageLayout({
@@ -13,13 +14,19 @@ 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="flex h-full w-full flex-col">
-			<PageTitle title={title} description={description}>
-				{actions}
-			</PageTitle>
-			<div className="flex-grow overflow-y-auto">{children}</div>
+		<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>
 	);
 }

viewer/src/components/UserProfileBox.tsx

@@ -77,7 +77,9 @@ export function UserProfileBox() {
 							<DropdownMenuItem onClick={() => navigate("/profile")}>
 								내 프로필
 							</DropdownMenuItem>
-							<DropdownMenuItem onClick={handleLogout}>로그아웃</DropdownMenuItem>
+							<DropdownMenuItem onClick={handleLogout}>
+								로그아웃
+							</DropdownMenuItem>
 						</>
 					) : (
 						<DropdownMenuItem onClick={() => setIsLoginModalOpen(true)}>

viewer/src/components/providers/ThemeProvider.d.ts

@@ -1,6 +1,9 @@
+import React from "react";
+
 interface ThemeProviderProps {
 	children: React.ReactNode;
 }
+
 export declare function ThemeProvider({
 	children,
-}: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+}: ThemeProviderProps): React.ReactElement;

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 };

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,
+};

viewer/src/index.css

@@ -55,132 +55,14 @@
 	* {
 		@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;

viewer/src/main.tsx

@@ -15,7 +15,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
 		<BrowserRouter>
 			<AuthProvider projectId={projectId}>
-				<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+				<ThemeProvider>
 					<App />
 				</ThemeProvider>
 			</AuthProvider>

viewer/src/pages/FeedbackCreatePage.tsx

@@ -19,68 +19,89 @@ export function FeedbackCreatePage() {
 	const { user } = useUser();
 
 	const [fields, setFields] = useState<FeedbackField[]>([]);
-	const [initialData, setInitialData] = useState<Record<string, unknown>>({});
+	const [formData, setFormData] = 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 fetchSchema = async () => {
+
+		const fetchAndProcessSchema = async () => {
 			try {
 				setLoading(true);
 				const schemaData = await getFeedbackFields(projectId, channelId);
-				const filteredSchema = schemaData.filter(
-					(field) => !["id", "createdAt", "updatedAt", "issues"].includes(field.id),
-				);
-				setFields(filteredSchema);
+
+				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);
 			} catch (err) {
 				setError(err instanceof Error ? err.message : "폼 로딩 중 오류 발생");
 			} finally {
 				setLoading(false);
 			}
 		};
-		fetchSchema();
-	}, [projectId, channelId]);
 
-	useEffect(() => {
-		if (user && fields.length > 0) {
-			const authorField = fields.find((f) =>
-				["customer", "author", "writer"].includes(f.id),
-			);
+		fetchAndProcessSchema();
+	}, [projectId, channelId, user]);
 
-			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>) => {
+	const handleSubmit = async (submittedData: Record<string, unknown>) => {
 		if (!projectId || !channelId) return;
 		try {
 			setError(null);
 			setSuccessMessage(null);
-			const requestData: CreateFeedbackRequest = { ...formData, issueNames: [] };
+			const requestData: CreateFeedbackRequest = {
+				...submittedData,
+				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;
@@ -95,11 +116,13 @@ export function FeedbackCreatePage() {
 		<PageLayout
 			title="새 피드백 작성"
 			description="아래 폼을 작성하여 피드백을 제출해주세요."
+			size="narrow"
 		>
 			<FeedbackFormCard
 				title="새 피드백"
 				fields={fields}
-				initialData={initialData}
+				formData={formData}
+				setFormData={setFormData}
 				onSubmit={handleSubmit}
 				onCancel={handleCancel}
 				submitButtonText="제출하기"

viewer/src/pages/FeedbackDetailPage.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
+import { useUser } from "@descope/react-sdk";
 import { useSyncChannelId } from "@/hooks/useSyncChannelId";
 import {
 	getFeedbackById,
@@ -10,6 +11,10 @@ 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();
@@ -19,6 +24,7 @@ export function FeedbackDetailPage() {
 		feedbackId: string;
 	}>();
 	const navigate = useNavigate();
+	const { user } = useUser();
 
 	const [fields, setFields] = useState<FeedbackField[]>([]);
 	const [feedback, setFeedback] = useState<Feedback | null>(null);
@@ -26,8 +32,7 @@ export function FeedbackDetailPage() {
 	const [error, setError] = useState<string | null>(null);
 	const [successMessage, setSuccessMessage] = useState<string | null>(null);
 	const [isEditing, setIsEditing] = useState(false);
-
-	const initialData = useMemo(() => feedback ?? {}, [feedback]);
+	const [formData, setFormData] = useState<Record<string, unknown>>({});
 
 	useEffect(() => {
 		const fetchData = async () => {
@@ -39,19 +44,27 @@ export function FeedbackDetailPage() {
 					getFeedbackById(projectId, channelId, feedbackId),
 				]);
 
-				const hiddenFields = ["id", "createdAt", "updatedAt", "issues", "screenshot"];
+				const hiddenFields = [
+					"id",
+					"createdAt",
+					"updatedAt",
+					"issues",
+					"screenshot",
+					"customer",
+				];
 				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);
 			}
@@ -59,19 +72,30 @@ export function FeedbackDetailPage() {
 		fetchData();
 	}, [projectId, channelId, feedbackId]);
 
-	const handleSubmit = async (formData: Record<string, unknown>) => {
+	const handleEditClick = () => {
+		setFormData(feedback ?? {});
+		setIsEditing(true);
+	};
+
+	const handleSubmit = async (submittedData: Record<string, unknown>) => {
 		if (!projectId || !channelId || !feedbackId) return;
 		try {
 			setError(null);
 			setSuccessMessage(null);
 			const dataToUpdate = Object.fromEntries(
-				Object.entries(formData).filter(([key]) =>
+				Object.entries(submittedData).filter(([key]) =>
 					fields.some((f) => f.id === key && !f.readOnly),
 				),
 			);
-			await updateFeedback(projectId, channelId, feedbackId, dataToUpdate);
+			const updatedFeedback = await updateFeedback(
+				projectId,
+				channelId,
+				feedbackId,
+				dataToUpdate,
+			);
+			setFeedback((prev) => ({ ...prev, ...updatedFeedback }));
 			setSuccessMessage("피드백이 성공적으로 수정되었습니다!");
-			setIsEditing(false); // 수정 완료 후 읽기 모드로 전환
+			setIsEditing(false);
 		} catch (err) {
 			setError(err instanceof Error ? err.message : "피드백 수정 중 오류 발생");
 			throw err;
@@ -79,28 +103,112 @@ export function FeedbackDetailPage() {
 	};
 
 	const handleCancel = () => {
-		navigate(`/projects/${projectId}/channels/${channelId}/feedbacks`);
+		if (isEditing) {
+			setIsEditing(false);
+		} else {
+			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"
 		>
-			<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)}
-			/>
+			{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} />
+			)}
 		</PageLayout>
 	);
 }

viewer/src/pages/FeedbackListPage.tsx

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

viewer/src/pages/IssueListPage.tsx

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

viewer/src/pages/ProfilePage.tsx

@@ -17,7 +17,10 @@ export function ProfilePage() {
 	}
 
 	return (
-		<PageLayout title="내 프로필" description="프로필 정보를 수정할 수 있습니다.">
+		<PageLayout
+			title="내 프로필"
+			description="프로필 정보를 수정할 수 있습니다."
+		>
 			<div className="mt-6 flex justify-center">
 				<UserProfile
 					widgetId={widgetId}

viewer/src/services/feedback.ts

@@ -13,6 +13,7 @@ interface ApiField {
 export interface Feedback {
 	id: string;
 	content: string;
+	updatedAt: string;
 	[key: string]: unknown; // 동적 필드를 위해 인덱스 시그니처 사용
 }