Merge pull request #540 from solid-connection/feat/magic-color-tokens

refactor: magic 색상 토큰 정리

Author: manNomi

apps/admin/src/components/features/bruno/BrunoApiPageContent.tsx

@@ -147,11 +147,11 @@ const getEndpointKey = (endpoint: EndpointItem) => `${endpoint.domain}:${endpoin
 const getMethodClassName = (method: DefinitionMethod) =>
 	cn(
 		"rounded px-1.5 py-0.5 typo-regular-4",
-		method === "GET" && "bg-[#E8F3FF] text-[#1D4ED8]",
-		method === "POST" && "bg-[#ECFDF3] text-[#047857]",
-		method === "PUT" && "bg-[#FFF7ED] text-[#C2410C]",
-		method === "PATCH" && "bg-[#FEF3C7] text-[#B45309]",
-		method === "DELETE" && "bg-[#FEE2E2] text-[#B91C1C]",
+		method === "GET" && "bg-magic-http-get-surface text-magic-http-get-text",
+		method === "POST" && "bg-magic-http-post-surface text-magic-http-post-text",
+		method === "PUT" && "bg-magic-http-put-surface text-magic-http-put-text",
+		method === "PATCH" && "bg-magic-http-patch-surface text-magic-http-patch-text",
+		method === "DELETE" && "bg-magic-http-delete-surface text-magic-http-delete-text",
 		(method === "HEAD" || method === "OPTIONS") && "bg-k-100 text-k-700",
 	);
 
@@ -385,7 +385,7 @@ export function BrunoApiPageContent() {
 
 				<div className="space-y-4">
 					{showRemoteWarning ? (
-						<div className="flex items-start gap-2 rounded-md border border-[#FACC15] bg-[#FEFCE8] px-4 py-3 text-[#854D0E]">
+						<div className="flex items-start gap-2 rounded-md border border-magic-warning-border bg-magic-warning-surface px-4 py-3 text-magic-warning">
 							<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
 							<div className="min-w-0">
 								<p className="typo-sb-11">원격 API 서버에 연결되어 있습니다.</p>
@@ -437,7 +437,7 @@ export function BrunoApiPageContent() {
 								</div>
 							) : null}
 							{editorError ? (
-								<div className="rounded-md border border-[#FCA5A5] bg-[#FEF2F2] px-3 py-2 typo-regular-4 text-[#B91C1C]">
+								<div className="rounded-md border border-magic-error-border bg-magic-error-surface px-3 py-2 typo-regular-4 text-magic-error">
 									{editorError}
 								</div>
 							) : null}
@@ -501,8 +501,8 @@ export function BrunoApiPageContent() {
 										className={cn(
 											"rounded px-2 py-1",
 											requestResult.status >= 200 && requestResult.status < 300
-												? "bg-[#ECFDF3] text-[#047857]"
-												: "bg-[#FEF2F2] text-[#B91C1C]",
+												? "bg-magic-api-success-surface text-magic-api-success-text"
+												: "bg-magic-error-surface text-magic-error",
 										)}
 									>
 										HTTP {requestResult.status}

apps/admin/src/components/features/mentor-applications/MentorApplicationsPageContent.tsx

@@ -28,8 +28,8 @@ const STATUS_OPTIONS: { value: MentorApplicationStatus; label: string }[] = [
 
 const statusStyles: Record<MentorApplicationStatus, string> = {
 	PENDING: "bg-primary-100 text-primary",
-	APPROVED: "bg-[#E9F7EC] text-[#15A861]",
-	REJECTED: "bg-[#FFD9D9] text-[#E22A2D]",
+	APPROVED: "bg-magic-success-surface text-magic-success",
+	REJECTED: "bg-magic-danger-surface text-magic-danger",
 };
 
 const statusLabels: Record<MentorApplicationStatus, string> = {
@@ -254,7 +254,7 @@ function MentorApplicationHistoryRow({ colSpan, siteUserId }: { colSpan: number;
 							<span className="ml-2 typo-regular-4 text-k-500">이력을 불러오는 중...</span>
 						</div>
 					) : isError ? (
-						<p className="py-4 text-center typo-regular-4 text-[#E22A2D]">신청 이력을 불러오지 못했습니다.</p>
+						<p className="py-4 text-center typo-regular-4 text-magic-danger">신청 이력을 불러오지 못했습니다.</p>
 					) : historyItems.length === 0 ? (
 						<p className="py-4 text-center typo-regular-4 text-k-500">신청 이력이 없습니다.</p>
 					) : (
@@ -595,7 +595,7 @@ export function MentorApplicationsPageContent() {
 								</TableRow>
 							) : isError ? (
 								<TableRow>
-									<TableCell colSpan={9} className="text-center typo-regular-4 text-[#E22A2D]">
+									<TableCell colSpan={9} className="text-center typo-regular-4 text-magic-danger">
 										멘토 승격 요청을 불러오지 못했습니다.
 									</TableCell>
 								</TableRow>

apps/admin/src/components/features/regions-countries/RegionsCountriesPageContent.tsx

@@ -300,7 +300,7 @@ export function RegionsCountriesPageContent() {
 									</TableRow>
 								) : regionsQuery.isError ? (
 									<TableRow>
-										<TableCell colSpan={3} className="text-center typo-regular-4 text-[#E22A2D]">
+										<TableCell colSpan={3} className="text-center typo-regular-4 text-magic-danger">
 											권역을 불러오지 못했습니다.
 										</TableCell>
 									</TableRow>
@@ -431,7 +431,7 @@ export function RegionsCountriesPageContent() {
 									</TableRow>
 								) : countriesQuery.isError ? (
 									<TableRow>
-										<TableCell colSpan={4} className="text-center typo-regular-4 text-[#E22A2D]">
+										<TableCell colSpan={4} className="text-center typo-regular-4 text-magic-danger">
 											지역을 불러오지 못했습니다.
 										</TableCell>
 									</TableRow>

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-[#15A861] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#10814A]"
+				className="rounded bg-magic-success px-3 py-1 typo-sb-11 text-k-0 hover:bg-magic-success-hover"
 			>
 				승인
 			</button>
@@ -50,7 +50,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
 					<button
 						type="button"
 						onClick={handleReject}
-						className="rounded bg-[#E22A2D] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#BA1E21]"
+						className="rounded bg-magic-danger px-3 py-1 typo-sb-11 text-k-0 hover:bg-magic-danger-hover"
 					>
 						확인
 					</button>
@@ -59,7 +59,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
 				<button
 					type="button"
 					onClick={handleReject}
-					className="rounded bg-[#E22A2D] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#BA1E21]"
+					className="rounded bg-magic-danger px-3 py-1 typo-sb-11 text-k-0 hover:bg-magic-danger-hover"
 				>
 					거절
 				</button>

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

@@ -2,8 +2,8 @@ import type { VerifyStatus } from "@/types/scores";
 
 const statusStyles = {
 	PENDING: "bg-primary-100 text-primary",
-	APPROVED: "bg-[#E9F7EC] text-[#15A861]",
-	REJECTED: "bg-[#FFD9D9] text-[#E22A2D]",
+	APPROVED: "bg-magic-success-surface text-magic-success",
+	REJECTED: "bg-magic-danger-surface text-magic-danger",
 };
 
 const statusLabels = {

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

@@ -38,9 +38,9 @@ export function AdminLayout({ children, activeMenu, title, description }: AdminL
 	};
 
 	return (
-		<div className="min-h-screen bg-[radial-gradient(circle_at_top,_#eef2ff_0%,_#fafafa_48%,_#f5f5f5_100%)] text-k-800">
+		<div className="min-h-screen bg-magic-admin-shell text-k-800">
 			<div className="mx-auto flex min-h-screen w-full max-w-[1440px] flex-col px-3 py-4 sm:px-4 sm:py-6 lg:px-8">
-				<header className="mb-4 flex items-center justify-between rounded-2xl border border-k-100 bg-k-0 px-4 py-3 shadow-[0_10px_30px_-24px_rgba(26,31,39,0.45)]">
+				<header className="mb-4 flex items-center justify-between rounded-2xl border border-k-100 bg-k-0 px-4 py-3 shadow-magic-admin-header">
 					<div className="flex items-center gap-3">
 						<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary-100 text-primary typo-sb-9">
 							SC
@@ -67,7 +67,7 @@ export function AdminLayout({ children, activeMenu, title, description }: AdminL
 				<div className="flex min-h-[calc(100vh-96px)] overflow-hidden rounded-[24px] border border-k-100 bg-k-0 shadow-sdw-a">
 					<AdminSidebar activeMenu={activeMenu} />
 					<section className="flex-1 bg-bg-50 p-4 sm:p-6 lg:p-7">
-						<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-4 shadow-[0_8px_24px_-22px_rgba(26,31,39,0.45)] sm:p-6">
+						<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-4 shadow-magic-admin-panel sm:p-6">
 							<h1 className="typo-bold-1 text-k-900">{title}</h1>
 							{description ? <p className="mt-1 typo-regular-4 text-k-500">{description}</p> : null}
 							{children}

apps/admin/src/styles.css

@@ -1,6 +1,37 @@
 @import "tailwindcss";
 @source "../../../packages/ui/src";
 
+@theme {
+  --color-magic-success: #15a861;
+  --color-magic-success-hover: #10814a;
+  --color-magic-success-surface: #e9f7ec;
+  --color-magic-danger: #e22a2d;
+  --color-magic-danger-hover: #ba1e21;
+  --color-magic-danger-surface: #ffd9d9;
+  --color-magic-error: #b91c1c;
+  --color-magic-error-border: #fca5a5;
+  --color-magic-error-surface: #fef2f2;
+  --color-magic-warning: #854d0e;
+  --color-magic-warning-border: #facc15;
+  --color-magic-warning-surface: #fefce8;
+  --color-magic-api-success-surface: #ecfdf3;
+  --color-magic-api-success-text: #047857;
+  --color-magic-http-get-surface: #e8f3ff;
+  --color-magic-http-get-text: #1d4ed8;
+  --color-magic-http-post-surface: #ecfdf3;
+  --color-magic-http-post-text: #047857;
+  --color-magic-http-put-surface: #fff7ed;
+  --color-magic-http-put-text: #c2410c;
+  --color-magic-http-patch-surface: #fef3c7;
+  --color-magic-http-patch-text: #b45309;
+  --color-magic-http-delete-surface: #fee2e2;
+  --color-magic-http-delete-text: #b91c1c;
+  --color-magic-admin-shell-spotlight: #eef2ff;
+  --color-magic-admin-shell-mid: #fafafa;
+  --color-magic-admin-shell-base: #f5f5f5;
+  --color-magic-admin-panel-shadow: rgba(26, 31, 39, 0.45);
+}
+
 body {
   @apply m-0;
   font-family: "Pretendard", system-ui, -apple-system, sans-serif;
@@ -101,6 +132,23 @@ code {
     box-shadow: 0 4px 40px 0 rgba(26, 31, 39, 0.12);
   }
 
+  .bg-magic-admin-shell {
+    background-image: radial-gradient(
+      circle at top,
+      var(--color-magic-admin-shell-spotlight) 0%,
+      var(--color-magic-admin-shell-mid) 48%,
+      var(--color-magic-admin-shell-base) 100%
+    );
+  }
+
+  .shadow-magic-admin-header {
+    box-shadow: 0 10px 30px -24px var(--color-magic-admin-panel-shadow);
+  }
+
+  .shadow-magic-admin-panel {
+    box-shadow: 0 8px 24px -22px var(--color-magic-admin-panel-shadow);
+  }
+
   .typo-bold-1 {
     font-size: 24px;
     line-height: 140%;

apps/web/src/app/community/[boardCode]/PostWriteButton.tsx

@@ -32,7 +32,7 @@ const PostWriteButton = ({ onClick }: PostWriteButtonProps) => {
       className={`fixed bottom-16 flex w-full max-w-app flex-col items-center transition-transform duration-300 ease-in-out ${isVisible ? "translate-y-0" : "translate-y-[calc(100%+66px)]"} `}
     >
       <button
-        className="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-primary shadow-[0px_4px_30px_rgba(0,0,0,0.15)]"
+        className="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-primary shadow-magic-floating-action"
         onClick={onClick}
         type="button"
         aria-label="글쓰기"

apps/web/src/app/community/[boardCode]/[postId]/CommentSection.tsx

@@ -78,7 +78,7 @@ const Comment = ({
     <div
       className={clsx(
         "flex border-b border-gray-c-100 px-5 py-[18px]",
-        comment.parentId !== null ? "bg-line-1" : "bg-[#fafafa]",
+        comment.parentId !== null ? "bg-line-1" : "bg-magic-comment-reply-bg",
       )}
       key={comment.id}
       role="button"

apps/web/src/app/mentor/chat/_ui/ChatPageClient/index.tsx

@@ -29,7 +29,7 @@ const ChatPageClient = () => {
         </p>
         <Link
           href={"/mentor"}
-          className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-[linear-gradient(270deg,_var(--Primary-Color,_#5950F6)_0%,_var(--SubA-Color,_#388CE8)_100%)] px-[10px] text-white typo-sb-9"
+          className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-gradient-to-l from-primary to-sub-a px-[10px] text-white typo-sb-9"
         >
           멘토 찾으러 가볼까요?
         </Link>