feat(ui): warningAlertModal 컴포넌트 개발 및 스토리북 작성

.vscode/settings.json

@@ -1,7 +1,23 @@
 {
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ]
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

apps/admin/app/page.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import styles from './page.module.css';
-import { Button } from '@jjoing/ui/button';
 
 export default function Home() {
   return (
@@ -46,9 +45,6 @@ export default function Home() {
             Read our docs
           </a>
         </div>
-        <Button appName="web" className={styles.secondary}>
-          Open alert
-        </Button>
       </main>
       <footer className={styles.footer}>
         <a

apps/client/app/layout.tsx

@@ -1,3 +1,4 @@
+import '@jjoing/ui/styles';
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
 import './globals.css';

apps/client/app/page.tsx

@@ -1,6 +1,6 @@
+import { WarningAlertModal } from '@jjoing/ui';
 import Image from 'next/image';
 import styles from './page.module.css';
-import { Button } from '@jjoing/ui/button';
 
 export default function Home() {
   return (
@@ -46,9 +46,7 @@ export default function Home() {
             Read our docs
           </a>
         </div>
-        <Button appName="docs" className={styles.secondary}>
-          Open alert
-        </Button>
+        <WarningAlertModal title="sf" subTitle="sdf" confirmTitle="sdf" />
       </main>
       <footer className={styles.footer}>
         <a

packages/ui/.eslintrc.js

@@ -7,4 +7,5 @@ module.exports = {
     project: './tsconfig.lint.json',
     tsconfigRootDir: __dirname,
   },
+  ignorePatterns: ['postcss.config.js', 'tailwind.config.js'],
 };

packages/ui/package.json

@@ -3,26 +3,30 @@
   "version": "0.0.0",
   "private": true,
   "exports": {
-    "./button": "./src/button.tsx",
-    "./card": "./src/card.tsx",
-    "./code": "./src/code.tsx"
+    ".": "./src/index.ts",
+    "./styles": "./dist/tailwind.generated.css"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
-    "generate:component": "turbo gen react-component"
+    "build:css": "postcss src/index.css -o dist/tailwind.generated.css",
+    "build": "pnpm run build:css"
   },
   "devDependencies": {
     "@jjoing/eslint-config": "workspace:*",
     "@jjoing/typescript-config": "workspace:*",
     "@turbo/gen": "^1.12.4",
-    "@types/node": "^20.11.24",
     "@types/eslint": "^8.56.5",
+    "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "eslint": "^8.57.0",
+    "postcss-cli": "^11.0.0",
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "react": "^18.2.0"
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "react": "^18.2.0",
+    "tailwindcss": "^3.4.9"
   }
 }

packages/ui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/ui/src/WarningAlertModal.tsx

@@ -0,0 +1,46 @@
+import { ForwardedRef, forwardRef } from 'react';
+
+type WarningAlertModalProps = {
+  title: string;
+  subTitle: string;
+  confirmTitle: string;
+  onCancle?: () => void;
+  onConfirm?: () => void;
+};
+
+const WarningAlertModal = forwardRef(function WarningAlertModal(
+  {
+    title,
+    subTitle,
+    confirmTitle,
+    onCancle,
+    onConfirm,
+    ...props
+  }: WarningAlertModalProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div ref={ref} {...props} className="w-80 h-52 bg-white flex flex-col rounded-lg">
+      <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>
+      </div>
+      <div className="h-[80px] flex cursor-pointer">
+        <div
+          onClick={onCancle}
+          className="w-1/2 bg-gray-400 flex justify-center items-center text-white hover:bg-gray-500 rounded-bl-lg"
+        >
+          취소
+        </div>
+        <div
+          onClick={onConfirm}
+          className="w-1/2 bg-red-600 flex justify-center items-center text-white hover:bg-red-700 rounded-br-lg"
+        >
+          {confirmTitle}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default WarningAlertModal;

packages/ui/src/button.tsx

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 
 interface ButtonProps {
   children: ReactNode;

packages/ui/src/index.css

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

packages/ui/src/index.ts

@@ -0,0 +1 @@
+export { default as WarningAlertModal } from './WarningAlertModal';