react strap 공통 컴포넌트 작업중

middleware.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+// This function can be marked `async` if using `await` inside
+export function middleware(request: NextRequest) {
+  return NextResponse.redirect(new URL('/account/login', request.url));
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     */
+    '/((?!api|_next/static|_next/image|favicon.ico).*)'
+  ]
+};

package-lock.json

@@ -13,7 +13,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",
@@ -37,7 +38,6 @@
       "version": "7.23.8",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz",
       "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -318,6 +318,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.0.tgz",
@@ -916,8 +925,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-      "dev": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -1012,6 +1020,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -2976,6 +2993,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
     "node_modules/react-feather": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.10.tgz",
@@ -2992,6 +3014,52 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/reactstrap": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.2.2.tgz",
+      "integrity": "sha512-4KroiGOdqZLAnMGzHjpErW3G7bLB+QbKzzMLIDXydPIV0y74lpdL7WtXHkLWAGInd97WCPNx4+R0NQDPyzIfhw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@popperjs/core": "^2.6.0",
+        "classnames": "^2.2.3",
+        "prop-types": "^15.5.8",
+        "react-popper": "^2.2.4",
+        "react-transition-group": "^4.4.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
@@ -3015,8 +3083,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
-      "dev": true
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.1",
@@ -3598,6 +3665,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

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>
+  );
+}

src/components/common/ui/index.tsx

@@ -0,0 +1,3 @@
+function A() {
+  return;
+}