Merge pull request #18 from MBTips/feature/alert-컴포넌트-개발

feat: Alert 컴포넌트 구현

Author: junjeeong

src/App.tsx

@@ -1,5 +1,7 @@
+import Alert from "./components/Alert";
+
 function App() {
-  return;
+  return <Alert />;
 }
 
 export default App;

src/components/Alert.tsx

@@ -0,0 +1,21 @@
+import AlertButton from "@/components/button/AlertButton";
+
+const Alert = () => {
+  return (
+    <>
+      <div className="flex flex-col justify-center items-center bg-white rounded-2xl w-[294px] h-[200px]">
+        <h3 className="font-bold text-2xl">채팅방 나가기</h3>
+        <p className="mt-[9px] font-medium text-xl">
+          <span>대화가 저장되지 않아요.</span>
+          <span className="flex justify-center">정말 나갈까요?</span>
+        </p>
+        <div className="flex gap-3.5 mt-[19px]">
+          <AlertButton>취소</AlertButton>
+          <AlertButton>확인</AlertButton>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Alert;

src/components/button/AlertButton.tsx

@@ -0,0 +1,24 @@
+import { MouseEvent } from "react";
+import { cls } from "@/utils/cls";
+
+interface AlertButtonProps {
+  children: string;
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+const AlertButton = ({ children, onClick }: AlertButtonProps) => {
+  return (
+    <button
+      className={cls(
+        "flex justify-center items-center rounded-lg w-[124px] h-[44px] font-medium text-xl",
+        children === "확인"
+          ? "bg-primary-normal text-white"
+          : "bg-gray-100 text-gray-900"
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default AlertButton;

src/components/LoginButton.tsx src/components/button/LoginButton.tsxsrc/components/LoginButton.tsx renamed to src/components/button/LoginButton.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import App from "./App.tsx";
+import App from "./App";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

src/components/PrimaryButton.tsx src/components/button/PrimaryButton.tsxsrc/components/PrimaryButton.tsx renamed to src/components/button/PrimaryButton.tsx

@@ -1,6 +1,4 @@
 // 여러 문자열의 className을 인자로 받아 하나의 className으로 반환해주는 함수
-const cls = (...classses: (string | undefined | false)[]) => {
+export const cls = (...classses: (string | undefined | false)[]) => {
   return classses.filter(Boolean).join(" ");
 };
-
-export default cls;

src/main.tsx

@@ -1,8 +1,10 @@
 {
   "compilerOptions": {
-    "baseUrl": "src",
+    "baseUrl": "./src",
     "paths": {
-      "@/*": ["*"]
+      "@/*": ["/*"],
+      "@/components/*": ["components/*"],
+      "@/utils/*": ["utils/*"]
     },
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
@@ -26,5 +28,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src", "**/*.ts", "**/*.tsx"]
 }

src/utils/cls.ts

@@ -1,8 +1,29 @@
+import * as path from "path";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss()]
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: [
+      { find: "@/", replacement: path.resolve(__dirname, "src") },
+      {
+        find: "@/components",
+        replacement: path.resolve(__dirname, "src/components")
+      },
+      { find: "@/hooks", replacement: path.resolve(__dirname, "src/hooks") },
+      { find: "@/utils", replacement: path.resolve(__dirname, "src/utils") },
+      { find: "@/types", replacement: path.resolve(__dirname, "src/types") },
+      {
+        find: "@/constants",
+        replacement: path.resolve(__dirname, "src/constants")
+      },
+      {
+        find: "@/api",
+        replacement: path.resolve(__dirname, "src/api")
+      }
+    ]
+  }
 });