[♻️ Refactor/#61] Storybook 배경 설정 정리

.storybook/preview.tsx

@@ -7,8 +7,9 @@ const preview: Preview = {
     layout: 'centered',
 
     backgrounds: {
+      default: 'dark',
       options: {
-        black: { name: 'black', value: '#000000' },
+        dark: { name: 'dark', value: '#000000' },
       },
     },
 
@@ -27,7 +28,7 @@ const preview: Preview = {
     },
   },
   initialGlobals: {
-    backgrounds: { value: 'black' },
+    backgrounds: { value: 'dark' },
   },
 };
 

src/entities/review-version/ui/ai-review-requirement-modal/AIReviewRequirementModal.stories.tsx

@@ -188,11 +188,6 @@ const meta = {
       control: false,
     },
   },
-  parameters: {
-    backgrounds: {
-      default: 'black',
-    },
-  },
 } satisfies Meta<typeof AIReviewRequirementModal>;
 
 export default meta;

src/shared/ui/button/Button.stories.tsx

@@ -20,11 +20,6 @@ const meta = {
       options: ['primary', 'secondary', 'ghost', 'outline'],
     },
   },
-  parameters: {
-    backgrounds: {
-      default: 'dark',
-    },
-  },
 } satisfies Meta<typeof Button>;
 
 export default meta;

src/shared/ui/confirm-modal/ConfirmModal.stories.tsx

@@ -169,11 +169,6 @@ const meta = {
       control: 'text',
     },
   },
-  parameters: {
-    backgrounds: {
-      default: 'black',
-    },
-  },
 } satisfies Meta<typeof ConfirmModal>;
 
 export default meta;

src/shared/ui/logo/SymbolLogo.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   component: SymbolLogo,
   decorators: [
     (Story) => (
-      <div className="bg-black p-8">
+      <div className="p-8">
         <Story />
       </div>
     ),

src/shared/ui/logo/TextLogo.stories.tsx

@@ -20,7 +20,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="bg-black p-8 text-white">
+      <div className="p-8 text-white">
         <Story />
       </div>
     ),

src/shared/ui/page-header/PageHeader.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="min-w-160 bg-black p-8 text-white">
+      <div className="min-w-160 p-8 text-white">
         <Story />
       </div>
     ),

src/shared/ui/surface/Surface.stories.tsx

@@ -193,11 +193,6 @@ const meta = {
       control: 'boolean',
     },
   },
-  parameters: {
-    backgrounds: {
-      default: 'black',
-    },
-  },
 } satisfies Meta<typeof Surface>;
 
 export default meta;

src/shared/ui/title/Title.stories.tsx

@@ -18,7 +18,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="min-w-160 bg-black p-8 text-white">
+      <div className="min-w-160 p-8 text-white">
         <Story />
       </div>
     ),

src/shared/ui/tooltip/Tooltip.stories.tsx

@@ -42,7 +42,7 @@ const PLACEMENT_EXAMPLES = [
 
 function TooltipExample(props: TooltipStoryProps) {
   return (
-    <div className="flex min-h-72 items-center justify-center bg-black p-12">
+    <div className="flex min-h-72 items-center justify-center p-12">
       <Tooltip {...props}>
         <Tooltip.Trigger asChild>
           <Button aria-label="AI 첨삭 도움말" iconOnly variant="outline">
@@ -92,11 +92,6 @@ const meta = {
       control: false,
     },
   },
-  parameters: {
-    backgrounds: {
-      default: 'black',
-    },
-  },
 } satisfies Meta<typeof Tooltip.Root>;
 
 export default meta;
@@ -109,7 +104,7 @@ export const Playground: Story = {
 
 export const Placements: Story = {
   render: () => (
-    <div className="grid min-h-96 place-items-center bg-black p-16">
+    <div className="grid min-h-96 place-items-center p-16">
       <div className="grid grid-cols-3 items-center gap-6">
         <div className="col-start-2 row-start-2 rounded-xl border border-gray-700 bg-gray-900 px-5 py-4 text-center body-14 text-gray-100">
           Hover / Focus
@@ -134,7 +129,7 @@ export const Placements: Story = {
 
 export const TextTrigger: Story = {
   render: () => (
-    <p className="min-h-64 bg-black p-12 body-16 text-gray-100">
+    <p className="min-h-64 p-12 body-16 text-gray-100">
       문장 안에서도{' '}
       <Tooltip placement="bottom">
         <Tooltip.Trigger asChild>