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

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) => {

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

viewer/src/components/FeedbackFormCard.tsx

@@ -1,10 +1,5 @@
 // src/components/FeedbackFormCard.tsx
-import {
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-	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);
@@ -122,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">
+			<main className="flex-1 overflow-y-scroll bg-muted/40">
-				<div className="container mx-auto py-6">
 				<Outlet />
-				</div>
 			</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">
+		<div className="w-full px-4 sm:px-6 lg:px-8 py-6">
+			<div className={containerClass}>
 				<PageTitle title={title} description={description}>
 					{actions}
 				</PageTitle>
-			<div className="flex-grow overflow-y-auto">{children}</div>
+				<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/ui/avatar.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+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>,
@@ -13,12 +13,12 @@ const Avatar = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-Avatar.displayName = AvatarPrimitive.Root.displayName
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
 	React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -29,8 +29,8 @@ const AvatarImage = React.forwardRef<
 		className={cn("aspect-square h-full w-full", className)}
 		{...props}
 	/>
-))
+));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
 	React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -40,11 +40,11 @@ const AvatarFallback = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };

viewer/src/components/ui/dialog.tsx

@@ -1,15 +1,15 @@
-import * as React from "react"
+import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Cross2Icon } from "@radix-ui/react-icons"
+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>,
@@ -19,12 +19,12 @@ const DialogOverlay = React.forwardRef<
 		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
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Content>,
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
 			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
+				className,
 			)}
 			{...props}
 		>
@@ -47,8 +47,8 @@ const DialogContent = React.forwardRef<
 			</DialogPrimitive.Close>
 		</DialogPrimitive.Content>
 	</DialogPortal>
-))
+));
-DialogContent.displayName = DialogPrimitive.Content.displayName
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
 	className,
@@ -57,12 +57,12 @@ const DialogHeader = ({
 	<div
 		className={cn(
 			"flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+			className,
 		)}
 		{...props}
 	/>
-)
+);
-DialogHeader.displayName = "DialogHeader"
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
 	className,
@@ -71,12 +71,12 @@ const DialogFooter = ({
 	<div
 		className={cn(
 			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+			className,
 		)}
 		{...props}
 	/>
-)
+);
-DialogFooter.displayName = "DialogFooter"
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Title>,
@@ -86,12 +86,12 @@ const DialogTitle = React.forwardRef<
 		ref={ref}
 		className={cn(
 			"text-lg font-semibold leading-none tracking-tight",
-      className
+			className,
 		)}
 		{...props}
 	/>
-))
+));
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
 	React.ElementRef<typeof DialogPrimitive.Description>,
@@ -102,8 +102,8 @@ const DialogDescription = React.forwardRef<
 		className={cn("text-sm text-muted-foreground", className)}
 		{...props}
 	/>
-))
+));
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
 	Dialog,
@@ -116,4 +116,4 @@ export {
 	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/pages/FeedbackCreatePage.tsx

@@ -19,37 +19,37 @@ 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);
-			} catch (err) {
-				setError(err instanceof Error ? err.message : "폼 로딩 중 오류 발생");
-			} finally {
-				setLoading(false);
-			}
-		};
-		fetchSchema();
-	}, [projectId, channelId]);
 
-	useEffect(() => {
+				let processedFields = schemaData
-		if (user && fields.length > 0) {
+					.filter(
-			const authorField = fields.find((f) =>
+						(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 && !authorField.readOnly) {
+					if (authorField) {
 						const { name, email, customAttributes } = user;
 						const company =
 							customAttributes?.familyCompany ||
@@ -62,25 +62,46 @@ export function FeedbackCreatePage() {
 							companyInfo ? ` at ${companyInfo}` : ""
 						}`;
 
-				setInitialData((prev) => ({ ...prev, [authorField.id]: authorString }));
+						initialData[authorField.id] = authorString;
-				setFields((prevFields) =>
+
-					prevFields.map((field) =>
+						processedFields = processedFields.map((field) =>
-						field.id === authorField.id ? { ...field, readOnly: true } : field,
+							field.id === authorField.id
-					),
+								? { ...field, readOnly: true }
+								: field,
 						);
 					}
 				}
-	}, [user, fields]);
 
-	const handleSubmit = async (formData: Record<string, unknown>) => {
+				setFields(processedFields);
+				setFormData(initialData);
+			} catch (err) {
+				setError(err instanceof Error ? err.message : "폼 로딩 중 오류 발생");
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		fetchAndProcessSchema();
+	}, [projectId, channelId, user]);
+
+	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("피드백이 성공적으로 등록되었습니다! 곧 목록으로 돌아갑니다.");
+			setSuccessMessage(
-			setTimeout(() => navigate(`/projects/${projectId}/channels/${channelId}/feedbacks`), 2000);
+				"피드백이 성공적으로 등록되었습니다! 곧 목록으로 돌아갑니다.",
+			);
+			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 [formData, setFormData] = useState<Record<string, unknown>>({});
-	const initialData = useMemo(() => feedback ?? {}, [feedback]);
 
 	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 = () => {
+		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"
 		>
+			{isEditing ? (
 				<FeedbackFormCard
-				title={`피드백 정보 (ID: ${feedback?.id})`}
+					title={`피드백 수정 (ID: ${feedback?.id})`}
 					fields={fields}
-				initialData={initialData}
+					formData={formData}
+					setFormData={setFormData}
 					onSubmit={handleSubmit}
 					onCancel={handleCancel}
 					submitButtonText="완료"
-				cancelButtonText="목록으로"
+					cancelButtonText="취소"
 					successMessage={successMessage}
 					error={error}
 					loading={loading}
 					isEditing={isEditing}
-				onEditClick={() => setIsEditing(true)}
+					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">{String(row.original.title ?? '')}</h4>
+			<h4 className="font-bold text-lg mb-2">
-			<p className="whitespace-pre-wrap">{String(row.original.contents ?? '')}</p>
+				{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
+		<PageLayout title="이슈 목록" description="프로젝트의 이슈 목록입니다.">
-			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}