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

2025-08-05 14:44:41 +09:00
parent 27844ef237
commit 8f5ff651ed
18 changed files with 407 additions and 371 deletions
--- a/viewer/biome.json
+++ b/viewer/biome.json
@@ -15,4 +15,4 @@
 			"quoteStyle": "double"
 		}
 	}
-}
+}
--- a/viewer/src/components/DynamicForm.tsx
+++ b/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) => {
--- a/viewer/src/components/DynamicTable.tsx
+++ b/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>
 										);
 									})}
--- a/viewer/src/components/FeedbackFormCard.tsx
+++ b/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}
--- a/viewer/src/components/Header.tsx
+++ b/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>
 	);
 }
-
--- a/viewer/src/components/MainLayout.tsx
+++ b/viewer/src/components/MainLayout.tsx
@@ -4,13 +4,11 @@ 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>
 	);
-}
+}
--- a/viewer/src/components/PageLayout.tsx
+++ b/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>
 	);
 }
--- a/viewer/src/components/UserProfileBox.tsx
+++ b/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)}>
--- a/viewer/src/components/providers/ThemeProvider.d.ts
+++ b/viewer/src/components/providers/ThemeProvider.d.ts
@@ -6,4 +6,4 @@ interface ThemeProviderProps {

 export declare function ThemeProvider({
 	children,
-}: ThemeProviderProps): React.ReactElement;
+}: ThemeProviderProps): React.ReactElement;
--- 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,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;
--- a/viewer/src/pages/FeedbackCreatePage.tsx
+++ b/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="제출하기"
--- a/viewer/src/pages/FeedbackDetailPage.tsx
+++ b/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>
 	);
 }
--- a/viewer/src/pages/FeedbackListPage.tsx
+++ b/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>
-			<p className="whitespace-pre-wrap">{String(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>
 	);

--- a/viewer/src/pages/IssueListPage.tsx
+++ b/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
--- a/viewer/src/pages/ProfilePage.tsx
+++ b/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}
--- a/viewer/src/services/issue.ts
+++ b/viewer/src/services/issue.ts
@@ -65,4 +65,4 @@ export async function getIssueFields(): Promise<IssueField[]> {
 		{ id: "createdAt", name: "생성일", type: "date" },
 		{ id: "updatedAt", name: "수정일", type: "date" },
 	];
-}
+}