💄 어드민 성적 관리 페이지 피그마 디자인 반영

apps/admin/src/components/features/scores/GpaScoreTable.tsx

@@ -90,7 +90,7 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 	};
 
 	return (
-		<div className="rounded-lg border bg-white shadow">
+		<div className="rounded-lg border border-k-100 bg-k-0">
 			<div className="overflow-x-auto">
 				<Table>
 					<TableHeader>
@@ -111,27 +111,27 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 							<TableRow>
 								<TableCell colSpan={9} className="text-center">
 									<div className="flex items-center justify-center">
-										<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-900" />
-										<span className="ml-2">로딩중...</span>
+										<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary" />
+										<span className="ml-2 typo-regular-4 text-k-500">로딩중...</span>
 									</div>
 								</TableCell>
 							</TableRow>
 						) : scores.length === 0 ? (
 							<TableRow>
-								<TableCell colSpan={9} className="text-center text-gray-500">
+								<TableCell colSpan={9} className="text-center typo-regular-4 text-k-500">
 									데이터가 없습니다
 								</TableCell>
 							</TableRow>
 						) : (
 							scores.map((score) => (
-								<TableRow key={score.gpaScoreStatusResponse.id} className="hover:bg-gray-50">
+								<TableRow key={score.gpaScoreStatusResponse.id} className="hover:bg-bg-50">
 									<TableCell>{score.gpaScoreStatusResponse.id}</TableCell>
 									<TableCell>
 										<div className="flex items-center">
 											<img
 												src={score.siteUserResponse.profileImageUrl}
 												alt="프로필"
-												className="mr-2 h-8 w-8 rounded-full"
+												className="mr-2 h-8 w-8 rounded-full border border-k-100"
 											/>
 											{score.siteUserResponse.nickname}
 										</div>
@@ -144,7 +144,7 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 													step="0.01"
 													value={editingGpa}
 													onChange={(e) => setEditingGpa(Number.parseFloat(e.target.value))}
-													className="w-20 rounded border px-2 py-1"
+													className="w-20 rounded border border-k-200 bg-k-0 px-2 py-1 typo-regular-4 text-k-700"
 												/>
 											</div>
 										) : (
@@ -159,7 +159,7 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 													step="0.01"
 													value={editingGpaCriteria}
 													onChange={(e) => setEditingGpaCriteria(Number.parseFloat(e.target.value))}
-													className="w-20 rounded border px-2 py-1"
+													className="w-20 rounded border border-k-200 bg-k-0 px-2 py-1 typo-regular-4 text-k-700"
 												/>
 												<Button onClick={() => handleSave(score)} variant="default">
 													저장
@@ -187,7 +187,7 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 											href={`${S3_BASE_URL}${score.gpaScoreStatusResponse.gpaResponse.gpaReportUrl}`}
 											target="_blank"
 											rel="noopener noreferrer"
-											className="text-blue-600 hover:text-blue-800 hover:underline"
+											className="typo-medium-4 text-primary hover:text-primary-700 hover:underline"
 										>
 											파일 보기
 										</a>
@@ -207,7 +207,7 @@ export function GpaScoreTable({ verifyFilter }: Props) {
 				</Table>
 			</div>
 			{/* 페이지네이션 */}
-			<div className="mt-4 flex items-center justify-center gap-2 p-4">
+			<div className="mt-4 flex items-center justify-center gap-2 border-t border-k-100 p-4">
 				<Button onClick={() => handlePageChange(page - 1)} disabled={page === 1} variant="secondary">
 					이전
 				</Button>

apps/admin/src/components/features/scores/LanguageScoreTable.tsx

@@ -105,7 +105,7 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 	};
 
 	return (
-		<div className="rounded-lg border bg-white shadow">
+		<div className="rounded-lg border border-k-100 bg-k-0">
 			<div className="overflow-x-auto">
 				<Table>
 					<TableHeader>
@@ -126,27 +126,27 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 							<TableRow>
 								<TableCell colSpan={9} className="text-center">
 									<div className="flex items-center justify-center">
-										<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-gray-900" />
-										<span className="ml-2">로딩중...</span>
+										<div className="h-5 w-5 animate-spin rounded-full border-b-2 border-primary" />
+										<span className="ml-2 typo-regular-4 text-k-500">로딩중...</span>
 									</div>
 								</TableCell>
 							</TableRow>
 						) : scores.length === 0 ? (
 							<TableRow>
-								<TableCell colSpan={9} className="text-center text-gray-500">
+								<TableCell colSpan={9} className="text-center typo-regular-4 text-k-500">
 									데이터가 없습니다
 								</TableCell>
 							</TableRow>
 						) : (
 							scores.map((score) => (
-								<TableRow key={score.languageTestScoreStatusResponse.id} className="hover:bg-gray-50">
+								<TableRow key={score.languageTestScoreStatusResponse.id} className="hover:bg-bg-50">
 									<TableCell>{score.languageTestScoreStatusResponse.id}</TableCell>
 									<TableCell>
 										<div className="flex items-center">
 											<img
 												src={score.siteUserResponse.profileImageUrl}
 												alt="프로필"
-												className="mr-2 h-8 w-8 rounded-full"
+												className="mr-2 h-8 w-8 rounded-full border border-k-100"
 											/>
 											{score.siteUserResponse.nickname}
 										</div>
@@ -157,7 +157,7 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 												<select
 													value={editingType}
 													onChange={(e) => setEditingType(e.target.value as LanguageTestType)}
-													className="rounded border px-2 py-1"
+													className="rounded border border-k-200 bg-k-0 px-2 py-1 typo-regular-4 text-k-700"
 												>
 													{LANGUAGE_TEST_OPTIONS.map((option) => (
 														<option key={option.value} value={option.value}>
@@ -180,7 +180,7 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 													type="text"
 													value={editingScore}
 													onChange={(e) => setEditingScore(e.target.value)}
-													className="w-20 rounded border px-2 py-1"
+													className="w-20 rounded border border-k-200 bg-k-0 px-2 py-1 typo-regular-4 text-k-700"
 												/>
 												<Button onClick={() => handleSave(score)} variant="default">
 													저장
@@ -210,7 +210,7 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 											href={`${S3_BASE_URL}${score.languageTestScoreStatusResponse.languageTestResponse.languageTestReportUrl}`}
 											target="_blank"
 											rel="noopener noreferrer"
-											className="text-blue-600 hover:text-blue-800 hover:underline"
+											className="typo-medium-4 text-primary hover:text-primary-700 hover:underline"
 										>
 											파일 보기
 										</a>
@@ -229,7 +229,7 @@ export function LanguageScoreTable({ verifyFilter }: Props) {
 					</TableBody>
 				</Table>
 			</div>
-			<div className="mt-4 flex items-center justify-center gap-2 p-4">
+			<div className="mt-4 flex items-center justify-center gap-2 border-t border-k-100 p-4">
 				<Button onClick={() => handlePageChange(page - 1)} disabled={page === 1} variant="secondary">
 					이전
 				</Button>

apps/admin/src/components/features/scores/ScoreVerifyButton.tsx

@@ -33,7 +33,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
 			<button
 				type="button"
 				onClick={handleApprove}
-				className="rounded bg-green-500 px-3 py-1 text-white hover:bg-green-600"
+				className="rounded bg-[#15A861] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#10814A]"
 			>
 				승인
 			</button>
@@ -45,12 +45,12 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
 						value={rejectReason}
 						onChange={(e) => setRejectReason(e.target.value)}
 						placeholder="거절 사유"
-						className="rounded border px-2 py-1"
+						className="rounded border border-k-200 bg-k-0 px-2 py-1 typo-regular-4 text-k-700"
 					/>
 					<button
 						type="button"
 						onClick={handleReject}
-						className="rounded bg-red-500 px-3 py-1 text-white hover:bg-red-600"
+						className="rounded bg-[#E22A2D] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#BA1E21]"
 					>
 						확인
 					</button>
@@ -59,7 +59,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
 				<button
 					type="button"
 					onClick={handleReject}
-					className="rounded bg-red-500 px-3 py-1 text-white hover:bg-red-600"
+					className="rounded bg-[#E22A2D] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#BA1E21]"
 				>
 					거절
 				</button>

apps/admin/src/components/features/scores/StatusBadge.tsx

@@ -1,9 +1,9 @@
 import type { VerifyStatus } from "@/types/scores";
 
 const statusStyles = {
-	PENDING: "bg-yellow-100 text-yellow-800",
-	APPROVED: "bg-green-100 text-green-800",
-	REJECTED: "bg-red-100 text-red-800",
+	PENDING: "bg-primary-100 text-primary",
+	APPROVED: "bg-[#E9F7EC] text-[#15A861]",
+	REJECTED: "bg-[#FFD9D9] text-[#E22A2D]",
 };
 
 const statusLabels = {
@@ -18,7 +18,7 @@ interface StatusBadgeProps {
 
 export function StatusBadge({ status }: StatusBadgeProps) {
 	return (
-		<span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusStyles[status]}`}>
+		<span className={`inline-flex items-center rounded-full px-2.5 py-0.5 typo-medium-4 ${statusStyles[status]}`}>
 			{statusLabels[status]}
 		</span>
 	);

apps/admin/src/components/layout/AdminLayout.tsx

@@ -4,7 +4,7 @@ interface AdminLayoutProps {
 
 export function AdminLayout({ children }: AdminLayoutProps) {
 	return (
-		<div className="min-h-screen bg-gray-100">
+		<div className="min-h-screen bg-bg-50 text-k-800">
 			<main className="p-6">{children}</main>
 		</div>
 	);

apps/admin/src/components/ui/button.tsx

@@ -5,15 +5,15 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md typo-sb-11 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 	{
 		variants: {
 			variant: {
-				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-				outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
+				default: "bg-primary text-k-0 shadow-sm hover:bg-primary-600",
+				destructive: "bg-[#E22A2D] text-k-0 shadow-sm hover:bg-[#BA1E21]",
+				outline: "border border-k-200 bg-k-0 text-k-700 shadow-sm hover:bg-k-50",
+				secondary: "bg-k-50 text-k-700 shadow-sm hover:bg-k-100",
+				ghost: "text-k-600 hover:bg-k-50 hover:text-k-800",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {

apps/admin/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 			<input
 				type={type}
 				className={cn(
-					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+					"flex h-9 w-full rounded-md border border-k-200 bg-k-0 px-3 py-1 typo-regular-4 text-k-700 shadow-sm transition-colors file:border-0 file:bg-transparent file:typo-medium-4 file:text-k-700 placeholder:text-k-400 focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
 					className,
 				)}
 				ref={ref}

apps/admin/src/components/ui/table.tsx

@@ -5,14 +5,16 @@ import { cn } from "@/lib/utils";
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
 	({ className, ...props }, ref) => (
 		<div className="relative w-full overflow-auto">
-			<table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+			<table ref={ref} className={cn("w-full caption-bottom typo-regular-4 text-k-700", className)} {...props} />
 		</div>
 	),
 );
 Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-	({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
+	({ className, ...props }, ref) => (
+		<thead ref={ref} className={cn("bg-bg-50 [&_tr]:border-b [&_tr]:border-k-100", className)} {...props} />
+	),
 );
 TableHeader.displayName = "TableHeader";
 
@@ -34,7 +36,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 	({ className, ...props }, ref) => (
 		<tr
 			ref={ref}
-			className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
+			className={cn("border-b border-k-100 transition-colors hover:bg-bg-50 data-[state=selected]:bg-bg-50", className)}
 			{...props}
 		/>
 	),
@@ -46,7 +48,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
 		<th
 			ref={ref}
 			className={cn(
-				"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				"h-10 px-2 text-left align-middle typo-sb-11 text-k-600 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 				className,
 			)}
 			{...props}
@@ -59,7 +61,10 @@ const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<
 	({ className, ...props }, ref) => (
 		<td
 			ref={ref}
-			className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
+			className={cn(
+				"p-2 align-middle typo-regular-4 text-k-700 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
 			{...props}
 		/>
 	),

apps/admin/src/components/ui/tabs.tsx

@@ -11,10 +11,7 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<TabsPrimitive.List
 		ref={ref}
-		className={cn(
-			"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-			className,
-		)}
+		className={cn("inline-flex h-9 items-center justify-center rounded-lg bg-k-50 p-1 text-k-500", className)}
 		{...props}
 	/>
 ));
@@ -27,7 +24,7 @@ const TabsTrigger = React.forwardRef<
 	<TabsPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 typo-sb-11 transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-k-0 data-[state=active]:text-primary data-[state=active]:shadow",
 			className,
 		)}
 		{...props}
@@ -39,14 +36,7 @@ const TabsContent = React.forwardRef<
 	React.ComponentRef<typeof TabsPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-	<TabsPrimitive.Content
-		ref={ref}
-		className={cn(
-			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-			className,
-		)}
-		{...props}
-	/>
+	<TabsPrimitive.Content ref={ref} className={cn("mt-2 focus-visible:outline-none", className)} {...props} />
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;