react strap 공통 컴포넌트 작업중

package.json

@@ -14,7 +14,8 @@
     "next": "13.5.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-feather": "2.0.10"
+    "react-feather": "2.0.10",
+    "reactstrap": "^9.2.2"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/common/ui/badge/index.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { Badge } from 'reactstrap';
+import { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  color?: string;
+}
+
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param color?: 'light-secondary' | 'primary' | 'secondary' | 'light-primary'
+ */
+
+export default function CustomBadge({ children, className, color }: Props) {
+  return (
+    <Badge color={color} className={className}>
+      {children}
+    </Badge>
+  );
+}

src/components/common/ui/card/CustomCard.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { ReactNode } from 'react';
+import { Card } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomCard({ children, className }: Props) {
+  return <Card className={className}>{children}</Card>;
+}

src/components/common/ui/card/CustomCardBody.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { ReactNode } from 'react';
+import { CardBody } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomCardBody({ children, className }: Props) {
+  return <CardBody className={className}>{children}</CardBody>;
+}

src/components/common/ui/card/CustomCardHeader.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { ReactNode } from 'react';
+import { CardHeader } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ */
+
+export default function CustomCardHeader({ children, className }: Props) {
+  return <CardHeader className={className}>{children}</CardHeader>;
+}

src/components/common/ui/card/CustomCardTitle.tsx

@@ -0,0 +1,23 @@
+'use client';
+import { ElementType, ReactNode } from 'react';
+import { CardTitle } from 'reactstrap';
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+  tag: ElementType;
+}
+/**
+ *
+ * @param children: ReactNode
+ * @param className?:string
+ * @param tag?:string
+ */
+
+export default function CustomCardTitle({ children, className, tag }: Props) {
+  return (
+    <CardTitle className={className} tag={tag}>
+      {children}
+    </CardTitle>
+  );
+}