feat(ui): storybook 에서 임포트한 컴포넌트가 바로 tailwindCss 적용되도록 함

apps/client/src/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import '..//styles/globals.css';
+import '../styles/globals.css';
 
 export const metadata: Metadata = {
   title: 'Create Next App',

apps/client/src/app/page.tsx

@@ -1,11 +1,3 @@
-import { WarningAlertModal } from '@jjoing/ui';
-
-export default function Home() {
-  return (
-    <WarningAlertModal
-      title="정말 프로젝트를 삭제하실 건가요?"
-      subTitle="한 번 삭제한 프로젝트는 복구 할 수 없어요."
-      confirmTitle="삭제"
-    />
-  );
+export default function HomePage() {
+  return <></>;
 }

packages/ui/src/WarningAlertModal/index.tsx

@@ -1,5 +1,4 @@
 import { ForwardedRef, forwardRef } from 'react';
-import '../styles.css';
 
 type WarningAlertModalProps = {
   title: string;
@@ -21,7 +20,7 @@ const WarningAlertModal = forwardRef(function WarningAlertModal(
   ref: ForwardedRef<HTMLDivElement>
 ) {
   return (
-    <div ref={ref} {...props} className="w-80 h-52 bg-white flex flex-col rounded-lg">
+    <div ref={ref} className="w-80 h-52 bg-white flex flex-col rounded-lg" {...props}>
       <div className="w-full h-[220px] flex flex-col items-center justify-center gap-4">
         <h2 className="text-black text-lg font-semibold">{title}</h2>
         <h4 className="text-black">{subTitle}</h4>

storybook/.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import './styles.css';
 
 const preview: Preview = {
   parameters: {

storybook/.storybook/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;