@akanjs/config 0.0.39 → 0.0.41

package/index.d.ts

@@ -0,0 +1,132 @@
+import { NextConfig } from "next";
+export * from "./src/akanConfig";
+export * from "./src/nextConfig";
+export interface RunnerProps {
+    appName: string;
+    repoName: string;
+    serveDomain: string;
+    env: "testing" | "debug" | "develop" | "main";
+    command?: string;
+}
+export type Arch = "amd64" | "arm64";
+export type ExplicitDependencies = string[] | {
+    [key in Arch]: string[];
+};
+export interface AppConfigResult {
+    rootLib?: string;
+    libs: string[];
+    backend: {
+        dockerfile: string;
+        explicitDependencies: ExplicitDependencies;
+    };
+    frontend: {
+        dockerfile: string;
+        nextConfig: NextConfig | (() => Promise<NextConfig> | NextConfig);
+        routes?: {
+            basePath?: string;
+            domains: {
+                main?: string[];
+                develop?: string[];
+                debug?: string[];
+            };
+        }[];
+        explicitDependencies: ExplicitDependencies;
+    };
+}
+export interface LibConfigResult {
+    rootLib?: string;
+    libs: string[];
+    backend: {
+        explicitDependencies: ExplicitDependencies;
+    };
+    frontend: {
+        explicitDependencies: ExplicitDependencies;
+    };
+}
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends any[] ? T[P] : T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export type AppConfig = DeepPartial<AppConfigResult> | ((props: RunnerProps) => DeepPartial<AppConfigResult>);
+export type LibConfig = DeepPartial<LibConfigResult> | ((props: RunnerProps) => DeepPartial<LibConfigResult>);
+export interface AkanConfigFile {
+    default: NextConfig;
+}
+export interface FileConventionScanResult {
+    constants: {
+        databases: string[];
+        scalars: string[];
+    };
+    dictionary: {
+        databases: string[];
+        services: string[];
+        scalars: string[];
+    };
+    documents: {
+        databases: string[];
+        scalars: string[];
+    };
+    services: {
+        databases: string[];
+        services: string[];
+        scalars: string[];
+    };
+    signal: {
+        databases: string[];
+        services: string[];
+        scalars: string[];
+    };
+    store: {
+        databases: string[];
+        services: string[];
+        scalars: string[];
+    };
+    components: {
+        databases: string[];
+        services: string[];
+        scalars: string[];
+    };
+}
+export declare const getDefaultFileScan: () => FileConventionScanResult;
+export interface AppScanResult {
+    name: string;
+    type: "app" | "lib";
+    akanConfig: AppConfigResult;
+    files: FileConventionScanResult;
+    libDeps: string[];
+    pkgDeps: string[];
+    dependencies: string[];
+    libs: {
+        [key: string]: LibScanResult;
+    };
+}
+export interface LibScanResult {
+    name: string;
+    type: "app" | "lib";
+    akanConfig: LibConfigResult;
+    files: FileConventionScanResult;
+    libDeps: string[];
+    pkgDeps: string[];
+    dependencies: string[];
+    libs: {
+        [key: string]: LibScanResult;
+    };
+}
+export interface PkgScanResult {
+    name: string;
+    pkgDeps: string[];
+    dependencies: string[];
+}
+export interface WorkspaceScanResult {
+    appNames: string[];
+    libNames: string[];
+    pkgNames: string[];
+    apps: {
+        [key: string]: AppScanResult;
+    };
+    libs: {
+        [key: string]: LibScanResult;
+    };
+    pkgs: {
+        [key: string]: PkgScanResult;
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akanjs/config",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "type": "commonjs",
   "publishConfig": {
     "access": "public"

package/src/akanConfig.d.ts

@@ -0,0 +1,7 @@
+import type { AppConfig, AppConfigResult, DeepPartial, LibConfigResult, RunnerProps } from "@akanjs/config";
+import type { NextConfig } from "next";
+export declare const makeAppConfig: (config: DeepPartial<AppConfigResult>, props?: Partial<RunnerProps>) => AppConfigResult;
+export declare const getAppConfig: (appRoot: string, props: RunnerProps) => Promise<AppConfigResult>;
+export declare const makeLibConfig: (config: DeepPartial<LibConfigResult>, props?: Partial<RunnerProps>) => LibConfigResult;
+export declare const getLibConfig: (libRoot: string, props: RunnerProps) => Promise<LibConfigResult>;
+export declare const getNextConfig: (configImp: AppConfig, appData: any) => NextConfig | (() => Promise<NextConfig> | NextConfig);

package/src/akanConfig.ts

@@ -0,0 +1,141 @@
+import type {
+  AppConfig,
+  AppConfigResult,
+  AppScanResult,
+  DeepPartial,
+  LibConfig,
+  LibConfigResult,
+  RunnerProps,
+} from "@akanjs/config";
+import fs from "fs";
+import type { NextConfig } from "next";
+import path from "path";
+
+import { getBaseConfigEnv } from "./baseConfigEnv";
+import { withBase } from "./nextConfig";
+
+export const makeAppConfig = (
+  config: DeepPartial<AppConfigResult>,
+  props: Partial<RunnerProps> = {}
+): AppConfigResult => {
+  const baseConfigEnv = getBaseConfigEnv(props.appName);
+  const {
+    appName = baseConfigEnv.appName,
+    repoName = baseConfigEnv.repoName,
+    serveDomain = baseConfigEnv.serveDomain,
+    env = baseConfigEnv.env,
+    command = "build",
+  } = props;
+  return {
+    rootLib: config.rootLib,
+    libs: config.libs ?? [],
+    backend: {
+      dockerfile:
+        config.backend?.dockerfile ??
+        `FROM node:22-slim
+RUN ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime
+RUN apt-get update && apt-get upgrade -y
+RUN apt-get install -y ca-certificates fonts-liberation libappindicator3-1 libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget xdg-utils udev
+ARG TARGETARCH
+RUN if [ "$TARGETARCH" = "amd64" ]; then \
+      wget https://fastdl.mongodb.org/tools/db/mongodb-database-tools-debian92-x86_64-100.3.1.deb && \
+      apt-get install -y ./mongodb-database-tools-*.deb && \
+      rm -f mongodb-database-tools-*.deb; \
+    fi
+RUN apt-get install -y git redis build-essential python3
+RUN rm -rf /var/lib/apt/lists/*
+RUN mkdir -p /workspace
+WORKDIR /workspace
+COPY ./package.json ./package.json
+RUN npx pnpm i --prod
+COPY . .
+ENV PORT 8080
+ENV NODE_OPTIONS=--max_old_space_size=8192
+ENV NEXT_PUBLIC_REPO_NAME=${repoName}
+ENV NEXT_PUBLIC_SERVE_DOMAIN=${serveDomain}
+ENV NEXT_PUBLIC_APP_NAME=${appName}
+ENV NEXT_PUBLIC_ENV=${env}
+ENV NEXT_PUBLIC_OPERATION_MODE=cloud
+CMD ["node", "main.js"]`,
+      explicitDependencies: (config.backend?.explicitDependencies as string[] | undefined) ?? ([] as string[]),
+    },
+    frontend: {
+      dockerfile:
+        config.frontend?.dockerfile ??
+        `FROM node:22-alpine
+RUN ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime
+RUN apk --no-cache add git
+RUN mkdir -p /workspace
+WORKDIR /workspace
+COPY ./package.json ./package.json
+RUN npx pnpm i --prod
+COPY . .
+ENV PORT 4200
+ENV NODE_OPTIONS=--max_old_space_size=8192
+ENV NEXT_PUBLIC_REPO_NAME=${repoName}
+ENV NEXT_PUBLIC_SERVE_DOMAIN=${serveDomain}
+ENV NEXT_PUBLIC_APP_NAME=${appName}
+ENV NEXT_PUBLIC_ENV=${env}
+ENV NEXT_PUBLIC_OPERATION_MODE=cloud
+CMD ["npm", "start"]`,
+      nextConfig: withBase(
+        appName,
+        config.frontend?.nextConfig
+          ? typeof config.frontend.nextConfig === "function"
+            ? (config.frontend as { nextConfig: () => NextConfig }).nextConfig()
+            : config.frontend.nextConfig
+          : {},
+        config.libs ?? [],
+        config.frontend?.routes
+      ),
+      explicitDependencies: (config.frontend?.explicitDependencies as string[] | undefined) ?? ([] as string[]),
+    },
+  };
+};
+
+export const getAppConfig = async (appRoot: string, props: RunnerProps): Promise<AppConfigResult> => {
+  const akanConfigPath = path.join(appRoot, "akan.config.ts");
+  if (!fs.existsSync(akanConfigPath)) throw new Error(`application akan.config.ts is not found ${appRoot}`);
+  const configImp = ((await import(`${appRoot}/akan.config.ts`)) as { default: AppConfig }).default;
+  const config = typeof configImp === "function" ? configImp(props) : configImp;
+  return makeAppConfig(config, props);
+};
+
+export const makeLibConfig = (
+  config: DeepPartial<LibConfigResult>,
+  props: Partial<RunnerProps> = {}
+): LibConfigResult => {
+  return {
+    rootLib: config.rootLib,
+    libs: config.libs ?? [],
+    backend: {
+      explicitDependencies: (config.backend?.explicitDependencies as string[] | undefined) ?? ([] as string[]),
+    },
+    frontend: {
+      explicitDependencies: (config.frontend?.explicitDependencies as string[] | undefined) ?? ([] as string[]),
+    },
+  };
+};
+
+export const getLibConfig = async (libRoot: string, props: RunnerProps): Promise<LibConfigResult> => {
+  const akanConfigPath = path.join(libRoot, "akan.config.ts");
+  if (!fs.existsSync(akanConfigPath)) throw new Error(`library akan.config.ts is not found ${libRoot}`);
+  const configImp = ((await import(`${libRoot}/akan.config.ts`)) as { default: LibConfig }).default;
+  const config = typeof configImp === "function" ? configImp(props) : configImp;
+  return makeLibConfig(config, props);
+};
+
+export const getNextConfig = (configImp: AppConfig, appData: any) => {
+  const appInfo = appData as AppScanResult;
+  const baseConfigEnv = getBaseConfigEnv(appInfo.name);
+  const props: RunnerProps = {
+    appName: baseConfigEnv.appName,
+    repoName: baseConfigEnv.repoName,
+    serveDomain: baseConfigEnv.serveDomain,
+    env: baseConfigEnv.env,
+    command: "build",
+  };
+  const config = typeof configImp === "function" ? configImp(props) : configImp;
+  const akanConfig = makeAppConfig(config, props);
+  return akanConfig.frontend.nextConfig;
+};

package/src/baseConfigEnv.d.ts

@@ -0,0 +1,8 @@
+interface BaseConfigEnv {
+    appName: string;
+    repoName: string;
+    serveDomain: string;
+    env: "testing" | "debug" | "develop" | "main";
+}
+export declare const getBaseConfigEnv: (appName?: string | undefined) => BaseConfigEnv;
+export {};

package/src/baseConfigEnv.ts

@@ -0,0 +1,21 @@
+interface BaseConfigEnv {
+  appName: string;
+  repoName: string;
+  serveDomain: string;
+  env: "testing" | "debug" | "develop" | "main";
+}
+
+export const getBaseConfigEnv = (appName = process.env.NEXT_PUBLIC_APP_NAME): BaseConfigEnv => {
+  if (!appName) throw new Error("NEXT_PUBLIC_APP_NAME is not set");
+
+  const repoName = process.env.NEXT_PUBLIC_REPO_NAME;
+  if (!repoName) throw new Error("NEXT_PUBLIC_REPO_NAME is not set");
+
+  const serveDomain = process.env.NEXT_PUBLIC_SERVE_DOMAIN;
+  if (!serveDomain) throw new Error("NEXT_PUBLIC_SERVE_DOMAIN is not set");
+
+  const env = (process.env.NEXT_PUBLIC_ENV ?? "debug") as "testing" | "debug" | "develop" | "main" | undefined;
+  if (!env) throw new Error("NEXT_PUBLIC_ENV is not set");
+
+  return { appName, repoName, serveDomain, env };
+};

package/src/capacitor.base.config.ts

@@ -0,0 +1,39 @@
+import type { CapacitorConfig } from "@capacitor/cli";
+import os from "os";
+
+const getLocalIP = () => {
+  const interfaces = os.networkInterfaces();
+  for (const interfaceName in interfaces) {
+    const iface = interfaces[interfaceName];
+    if (!iface) continue;
+    for (const alias of iface) {
+      if (alias.family === "IPv4" && !alias.internal) return alias.address;
+    }
+  }
+  return "127.0.0.1"; // fallback to localhost if no suitable IP found
+};
+
+export const withBase = (applyConfig: (config: CapacitorConfig) => CapacitorConfig) => {
+  const projectName = process.env.NEXT_PUBLIC_APP_NAME;
+  if (!projectName) throw new Error("projectName is not defined, please run with nx command");
+  const ip = getLocalIP();
+  const baseConfig: CapacitorConfig = {
+    appId: `com.${projectName}`,
+    appName: projectName,
+    webDir: `../../dist/apps/${projectName}/csr/`,
+    // bundledWebRuntime: false, !not used
+    server:
+      process.env.APP_OPERATION_MODE !== "release"
+        ? {
+            androidScheme: "http",
+            url: `http://${ip}:4201`,
+            cleartext: true,
+            allowNavigation: [`http://${ip}:8080/*`],
+          }
+        : undefined,
+    plugins: {
+      CapacitorCookies: { enabled: true },
+    },
+  };
+  return applyConfig(baseConfig);
+};

package/src/nextConfig.d.ts

@@ -0,0 +1,17 @@
+import type { NextConfig } from "next";
+export type NextConfigFn = (phase: string, context?: any) => Promise<NextConfig> | NextConfig;
+export type NextPlugin = (config: NextConfig) => NextConfig;
+export type NextPluginThatReturnsConfigFn = (config: NextConfig) => NextConfigFn;
+export declare const composePlugins: (...plugins: (NextPlugin | NextPluginThatReturnsConfigFn)[]) => ((baseConfig: NextConfig) => NextConfigFn);
+/**
+ * @type { (config: import('@nx/next/plugins/with-nx').WithNxOptions) = import('@nx/next/plugins/with-nx').WithNxOptions }
+ **/
+export declare const withBase: (appName: string, config: NextConfig, libs: string[], routes?: {
+    basePath?: string;
+    domains: {
+        main?: string[];
+        develop?: string[];
+        debug?: string[];
+    };
+}[]) => NextConfigFn;
+export declare const defaultNextConfigFile = "import \"tsconfig-paths/register\";\n\nimport { getNextConfig } from \"@akanjs/config\";\n\nimport appInfo from \"./akan.app.json\";\nimport config from \"./akan.config\";\n\nexport default getNextConfig(config, appInfo);\n";

package/src/nextConfig.ts

@@ -0,0 +1,195 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import withAnalyze from "@next/bundle-analyzer";
+import type { NextConfig } from "next";
+import pwa from "next-pwa";
+import runtimeCaching from "next-pwa/cache";
+import path from "path";
+
+export type NextConfigFn = (phase: string, context?: any) => Promise<NextConfig> | NextConfig;
+
+export type NextPlugin = (config: NextConfig) => NextConfig;
+
+export type NextPluginThatReturnsConfigFn = (config: NextConfig) => NextConfigFn;
+
+export const composePlugins = (
+  ...plugins: (NextPlugin | NextPluginThatReturnsConfigFn)[]
+): ((baseConfig: NextConfig) => NextConfigFn) => {
+  return function (baseConfig: NextConfig) {
+    return async function combined(phase: string, context: any): Promise<NextConfig> {
+      let config = baseConfig;
+      for (const plugin of plugins) {
+        const fn = plugin;
+        const configOrFn = fn(config);
+        if (typeof configOrFn === "function") config = await configOrFn(phase, context);
+        else config = configOrFn;
+      }
+      return config;
+    };
+  };
+};
+
+const commandType = process.env.AKAN_COMMAND_TYPE?.includes("serve")
+  ? "serve"
+  : process.env.AKAN_COMMAND_TYPE?.includes("build")
+    ? "build"
+    : "deploy";
+const withPWA = pwa({
+  dest: "public",
+  register: true,
+  skipWaiting: true,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  runtimeCaching,
+  disable: commandType === "serve",
+});
+const devDomain = process.env.NEXT_PUBLIC_SERVE_DOMAIN ?? "akanjs.com";
+
+/**
+ * @type { (config: import('@nx/next/plugins/with-nx').WithNxOptions) = import('@nx/next/plugins/with-nx').WithNxOptions }
+ **/
+export const withBase = (
+  appName: string,
+  config: NextConfig,
+  libs: string[],
+  routes: { basePath?: string; domains: { main?: string[]; develop?: string[]; debug?: string[] } }[] = []
+) => {
+  return composePlugins(
+    withAnalyze({ enabled: process.env.ANALYZE === "true" }) as unknown as NextPlugin,
+    ...(commandType !== "serve" || process.env.USE_PWA === "true" ? [withPWA as unknown as NextPlugin] : [])
+  )({
+    ...config,
+    eslint: { ...config.eslint, ignoreDuringBuilds: true },
+    env: {
+      ...config.env,
+      basePaths: routes.map(({ basePath }) => basePath).join(","),
+    },
+    transpilePackages: [
+      "swiper",
+      "ssr-window",
+      "dom7",
+      ...libs.map((lib) => `@${lib}`),
+      "@akanjs/base",
+      "@akanjs/common",
+      "@akanjs/next",
+      "@akanjs/ui",
+      "@akanjs/client",
+      "@akanjs/server",
+      "@akanjs/service",
+      "@akanjs/signal",
+      "@akanjs/store",
+      "@akanjs/dictionary",
+      "@akanjs/constant",
+      "@akanjs/config",
+      "@akanjs/document",
+    ],
+    reactStrictMode: commandType === "serve" ? false : true,
+    experimental: {
+      ...(config.experimental ?? {}),
+      optimizePackageImports: [
+        ...[appName, ...libs].map((lib) => [`@${lib}/ui`, `@${lib}/next`, `@${lib}/common`, `@${lib}/client`]).flat(),
+        "@contract",
+        "@akanjs/next",
+        "@akanjs/common",
+      ],
+    },
+    // modularizeImports: {
+    //   "react-icons/?(((\\w*)?/?)*)": {
+    //     transform: "@react-icons/all-files/{{ matches.[1] }}/{{member}}",
+    //     skipDefaultConversion: true,
+    //   },
+    //   lodash: { transform: "lodash/{{member}}", preventFullImport: true },
+    //   ...Object.fromEntries(
+    //     [appName, ...libs].reduce(
+    //       (acc, lib) => [
+    //         ...acc,
+    //         [`@${lib}/ui`, { transform: `@${lib}/ui/{{member}}`, skipDefaultConversion: true }],
+    //         [`@${lib}/next`, { transform: `@${lib}/next/{{member}}`, skipDefaultConversion: true }],
+    //         [`@${lib}/common`, { transform: `@${lib}/common/{{member}}`, skipDefaultConversion: true }],
+    //         [`@${lib}/client`, { transform: `@${lib}/lib/{{ camelCase member }}`, skipDefaultConversion: true }],
+    //       ],
+    //       [
+    //         ["@contract", { transform: `@contract/src/{{member}}`, skipDefaultConversion: true }],
+    //         [`@akanjs/next`, { transform: `@akanjs/next/src/{{member}}`, skipDefaultConversion: true }],
+    //         [`@akanjs/common`, { transform: `@akanjs/common/src/{{member}}`, skipDefaultConversion: true }],
+    //       ]
+    //     )
+    //   ),
+    //   ...(config.modularizeImports ?? {}),
+    // },
+    images: {
+      formats: ["image/avif", "image/webp"],
+      ...(config.images ?? {}),
+      remotePatterns: [
+        ...(config.images?.remotePatterns ?? []),
+        ...routes
+          .map(({ domains }) => [
+            ...(domains.main?.map((domain) => ({ protocol: "https", hostname: `**.${domain}` })) ?? []),
+            ...(domains.develop?.map((domain) => ({ protocol: "https", hostname: `**.${domain}` })) ?? []),
+            ...(domains.debug?.map((domain) => ({ protocol: "https", hostname: `**.${domain}` })) ?? []),
+          ])
+          .flat(),
+        { protocol: "https", hostname: `**.${devDomain}` },
+      ],
+    },
+    webpack: (config: NextConfig) => {
+      // react-pdf error fix
+      config.resolve.alias.canvas = false;
+      config.resolve.alias.encoding = false;
+      if (process.env.USE_AKANJS_PKGS === "true")
+        config.resolve.alias["@akanjs/config"] = path.resolve(__dirname, "../../../../pkgs/@akanjs/config");
+      return config;
+    },
+    redirects() {
+      return routes
+        .map(({ basePath, domains }) => [
+          { basePath, domain: `${basePath}-debug.${devDomain}` },
+          { basePath, domain: `${basePath}-develop.${devDomain}` },
+          { basePath, domain: `${basePath}-main.${devDomain}` },
+          ...(domains.main?.map((domain) => ({ basePath, domain })) ?? []),
+          ...(domains.develop?.map((domain) => ({ basePath, domain })) ?? []),
+          ...(domains.debug?.map((domain) => ({ basePath, domain })) ?? []),
+        ])
+        .flat()
+        .map(({ basePath, domain }) => ({
+          source: `/:locale/${basePath}/:path*`,
+          has: [{ type: "host", value: domain }],
+          permanent: true,
+          destination: "/:locale/:path*",
+        }));
+    },
+    rewrites() {
+      return routes
+        .map(({ basePath, domains }) => [
+          { basePath, domain: `${basePath}-debug.${devDomain}` },
+          { basePath, domain: `${basePath}-develop.${devDomain}` },
+          { basePath, domain: `${basePath}-main.${devDomain}` },
+          ...(domains.main?.map((domain) => ({ basePath, domain })) ?? []),
+          ...(domains.develop?.map((domain) => ({ basePath, domain })) ?? []),
+          ...(domains.debug?.map((domain) => ({ basePath, domain })) ?? []),
+        ])
+        .flat()
+        .map(({ basePath, domain }) => [
+          {
+            source: "/:locale",
+            has: [{ type: "host", value: domain }],
+            destination: `/:locale/${basePath}`,
+          },
+          {
+            source: `/:locale/:path((?!${basePath}$)(?!admin(?:/|$)).*)`,
+            has: [{ type: "host", value: domain }],
+            destination: `/:locale/${basePath}/:path*`,
+          },
+        ])
+        .flat();
+    },
+  } as unknown as NextConfig);
+};
+
+export const defaultNextConfigFile = `import "tsconfig-paths/register";
+
+import { getNextConfig } from "@akanjs/config";
+
+import appInfo from "./akan.app.json";
+import config from "./akan.config";
+
+export default getNextConfig(config, appInfo);
+`;

package/src/postcss.config.base.js

@@ -0,0 +1,24 @@
+const path = require("path");
+
+const withBase = (config = {}) => ({
+  ...config,
+  plugins: {
+    ...(process.env.USE_AKANJS_PKGS === "true"
+      ? {
+          "postcss-import": {
+            resolve(id) {
+              if (id.startsWith("@akanjs/config/src"))
+                return path.resolve(__dirname, id.replace("@akanjs/config/src/", ""));
+              else return id;
+            },
+          },
+        }
+      : {}),
+    "@tailwindcss/postcss": process.env.AKAN_WORKSPACE_ROOT
+      ? { base: path.join(process.env.AKAN_WORKSPACE_ROOT, "./") }
+      : {},
+    ...(config.plugins ?? {}),
+  },
+});
+
+module.exports = { withBase };

package/src/styles.css

@@ -0,0 +1,610 @@
+@plugin "tailwindcss-animation-delay";
+@plugin "tailwind-scrollbar";
+@plugin "tailwindcss-radix";
+
+html,
+body {
+  margin: 0;
+  /* -webkit-touch-callout: none;
+  -webkit-user-select: none; */
+}
+
+/* invisible scrollbar */
+::-webkit-scrollbar {
+  display: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* *,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+  background-color: transparent;
+} */
+
+/* .body {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+} */
+.img {
+  -webkit-user-drag: none;
+}
+.rounded-btn {
+  --rounded-btn: 0.75rem;
+}
+.animate-delay-2000 {
+  animation-delay: 2000ms;
+}
+.animate-delay-3000 {
+  animation-delay: 3000ms;
+}
+.animate-delay-4000 {
+  animation-delay: 4000ms;
+}
+.animate-delay-5000 {
+  animation-delay: 5000ms;
+}
+
+/* 게시판 상세보기시 유튜브 */
+.btn-ghost:hover {
+  opacity: 0.5;
+  transition: all 0.3s;
+  background-color: transparent;
+}
+.btn {
+  text-transform: none;
+  font-weight: normal;
+}
+.page-content {
+  @apply overflow-y-auto h-screen;
+}
+
+@property --percentage {
+  initial-value: 100%;
+  inherits: false;
+  syntax: "<percentage>";
+}
+
+.chart {
+  background: conic-gradient(rgb(244, 62, 21) var(--percentage), white 0);
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: timer 10s infinite linear;
+}
+
+@keyframes timer {
+  to {
+    --percentage: 0%;
+  }
+}
+
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+@utility centric {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+}
+
+/* Always-included keyframes (non-theme animations) */
+@keyframes smaller {
+  0% {
+    scale: 1;
+    height: 100%;
+  }
+  100% {
+    scale: 0;
+    height: 0;
+  }
+}
+
+@keyframes bigger {
+  0% {
+    transform: scale(0.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes flyOut {
+  0% {
+    opacity: 1;
+    transform: translate(-50%, -100%);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -140%);
+  }
+}
+
+@keyframes drop {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -140%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -100%);
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes flash {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pop {
+  0% {
+    transform: scale(0, 0);
+  }
+  50% {
+    transform: scale(1.5, 1.5);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes menuOpen {
+  0% {
+    opacity: 0;
+    width: 0;
+  }
+  100% {
+    opacity: 1;
+    width: 80px;
+  }
+}
+
+@keyframes menuClose {
+  0% {
+    opacity: 1;
+    width: 80px;
+  }
+  100% {
+    opacity: 0;
+    width: 0;
+  }
+}
+
+@keyframes backdrop-blur {
+  0% {
+    backdrop-filter: blur(0);
+  }
+  100% {
+    backdrop-filter: blur(5px);
+  }
+}
+
+@keyframes zoomIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes bottomUp {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes bottomDown {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes wave {
+  0% {
+    box-shadow:
+      0 0 0 0 rgba(219, 39, 119, 0.3),
+      0 0 0 1em rgba(219, 39, 119, 0.3),
+      0 0 0 2em rgba(219, 39, 119, 0.3),
+      0 0 0 3em rgba(219, 39, 119, 0.3);
+  }
+  100% {
+    box-shadow:
+      0 0 0 1em rgba(219, 39, 119, 0.3),
+      0 0 0 2em rgba(219, 39, 119, 0.3),
+      0 0 0 3em rgba(219, 39, 119, 0.3),
+      0 0 0 4em rgba(219, 39, 119, 0);
+  }
+}
+
+@keyframes translateUp {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-60%);
+  }
+}
+
+@keyframes tranlateLeft {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes tranlateRight {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes floatUpDown {
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(10%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes floatDownUp {
+  0% {
+    transform: translateY(10%);
+  }
+  50% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(10%);
+  }
+}
+
+@keyframes scanDown {
+  0% {
+    top: -100%;
+  }
+  100% {
+    top: 200%;
+  }
+}
+
+/* Programmatic Animations */
+@keyframes fadeInRight5 {
+  0% {
+    opacity: 0;
+    translate: 5% 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInRight15 {
+  0% {
+    opacity: 0;
+    translate: 15% 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInRight30 {
+  0% {
+    opacity: 0;
+    translate: 30% 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInRight100 {
+  0% {
+    opacity: 0;
+    translate: 100% 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes fadeInLeft5 {
+  0% {
+    opacity: 0;
+    translate: -5% 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInLeft15 {
+  0% {
+    opacity: 0;
+    translate: -15% 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInLeft30 {
+  0% {
+    opacity: 0;
+    translate: -30% 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInLeft100 {
+  0% {
+    opacity: 0;
+    translate: -100% 0;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes fadeInUp5 {
+  0% {
+    opacity: 0;
+    translate: 0 5%;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInUp15 {
+  0% {
+    opacity: 0;
+    translate: 0 15%;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInUp30 {
+  0% {
+    opacity: 0;
+    translate: 0 30%;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInUp100 {
+  0% {
+    opacity: 0;
+    translate: 0 100%;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes fadeInDown5 {
+  0% {
+    opacity: 0;
+    translate: 0 -5%;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInDown15 {
+  0% {
+    opacity: 0;
+    translate: 0 -15%;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInDown30 {
+  0% {
+    opacity: 0;
+    translate: 0 -30%;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+@keyframes fadeInDown100 {
+  0% {
+    opacity: 0;
+    translate: 0 -100%;
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@theme {
+  /* Theme Extensions */
+  --color-primary-light: hsl(var(--primary-light) / <alpha-value>);
+  --color-primary-dark: hsl(var(--primary-dark) / <alpha-value>);
+  --color-secondary-light: hsl(var(--secondary-light) / <alpha-value>);
+  --color-secondary-dark: hsl(var(--secondary-dark) / <alpha-value>);
+
+  /* Animation Variables */
+  --animate-smaller: smaller 0.15s ease-in-out forwards;
+  --animate-bigger: bigger 1s ease-in-out forwards;
+  --animate-fadeIn: fadeIn 0.15s ease-in-out forwards;
+  --animate-fadeIn_750ms: fadeIn 0.75s ease-in-out forwards;
+  --animate-fadeOut: fadeOut 0.15s ease-in-out forwards;
+  --animate-flyOut: flyOut 0.15s ease-in-out forwards;
+  --animate-drop: drop 0.15s ease-in-out forwards;
+  --animate-flash: flash 1s linear infinite;
+  --animate-spin: spin 1s linear infinite;
+  --animate-backdrop-blur: backdrop-blur-sm 2s ease-in-out forwards;
+  --animate-pop: pop 0.15s ease-in-out forwards;
+  --animate-menuOpen: menuOpen 0.3s ease-in-out forwards;
+  --animate-menuClose: menuClose 0.3s ease-in-out forwards;
+  --animate-slideDown: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-slideUp: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-zoomIn: zoomIn 0.15s ease-in-out forwards;
+  --animate-wave: wave 1s linear infinite;
+  --animate-translateUp: translateUp 0.5s ease-in-out 0.5s forwards;
+  --animate-bottomUp: bottomUp 0.5s ease-in-out 0.5s forwards;
+  --animate-translateLeft: tranlateLeft 0.15s ease-in-out forwards;
+  --animate-translateRight: tranlateRight 0.15s ease-in-out forwards;
+  --animate-floatUpDown: floatUpDown 3s linear forwards infinite;
+  --animate-floatDownUp: floatDownUp 3s linear forwards infinite;
+  --animate-scanDown: scanDown 3s ease-in-out infinite;
+
+  /* Programmatic Animation Variables */
+  --animate-fadeInRight5-150ms: fadeInRight5 0.15s ease-in-out forwards;
+  --animate-fadeInRight5-500ms: fadeInRight5 0.5s ease-in-out forwards;
+  --animate-fadeInRight5-1000ms: fadeInRight5 1s ease-in-out forwards;
+  --animate-fadeInRight15-150ms: fadeInRight15 0.15s ease-in-out forwards;
+  --animate-fadeInRight15-500ms: fadeInRight15 0.5s ease-in-out forwards;
+  --animate-fadeInRight15-1000ms: fadeInRight15 1s ease-in-out forwards;
+  --animate-fadeInRight30-150ms: fadeInRight30 0.15s ease-in-out forwards;
+  --animate-fadeInRight30-500ms: fadeInRight30 0.5s ease-in-out forwards;
+  --animate-fadeInRight30-1000ms: fadeInRight30 1s ease-in-out forwards;
+  --animate-fadeInRight100-150ms: fadeInRight100 0.15s ease-in-out forwards;
+  --animate-fadeInRight100-500ms: fadeInRight100 0.5s ease-in-out forwards;
+  --animate-fadeInRight100-1000ms: fadeInRight100 1s ease-in-out forwards;
+
+  --animate-fadeInLeft5-150ms: fadeInLeft5 0.15s ease-in-out forwards;
+  --animate-fadeInLeft5-500ms: fadeInLeft5 0.5s ease-in-out forwards;
+  --animate-fadeInLeft5-1000ms: fadeInLeft5 1s ease-in-out forwards;
+  --animate-fadeInLeft15-150ms: fadeInLeft15 0.15s ease-in-out forwards;
+  --animate-fadeInLeft15-500ms: fadeInLeft15 0.5s ease-in-out forwards;
+  --animate-fadeInLeft15-1000ms: fadeInLeft15 1s ease-in-out forwards;
+  --animate-fadeInLeft30-150ms: fadeInLeft30 0.15s ease-in-out forwards;
+  --animate-fadeInLeft30-500ms: fadeInLeft30 0.5s ease-in-out forwards;
+  --animate-fadeInLeft30-1000ms: fadeInLeft30 1s ease-in-out forwards;
+  --animate-fadeInLeft100-150ms: fadeInLeft100 0.15s ease-in-out forwards;
+  --animate-fadeInLeft100-500ms: fadeInLeft100 0.5s ease-in-out forwards;
+  --animate-fadeInLeft100-1000ms: fadeInLeft100 1s ease-in-out forwards;
+
+  --animate-fadeInUp5-150ms: fadeInUp5 0.15s ease-in-out forwards;
+  --animate-fadeInUp5-500ms: fadeInUp5 0.5s ease-in-out forwards;
+  --animate-fadeInUp5-1000ms: fadeInUp5 1s ease-in-out forwards;
+  --animate-fadeInUp15-150ms: fadeInUp15 0.15s ease-in-out forwards;
+  --animate-fadeInUp15-500ms: fadeInUp15 0.5s ease-in-out forwards;
+  --animate-fadeInUp15-1000ms: fadeInUp15 1s ease-in-out forwards;
+  --animate-fadeInUp30-150ms: fadeInUp30 0.15s ease-in-out forwards;
+  --animate-fadeInUp30-500ms: fadeInUp30 0.5s ease-in-out forwards;
+  --animate-fadeInUp30-1000ms: fadeInUp30 1s ease-in-out forwards;
+  --animate-fadeInUp100-150ms: fadeInUp100 0.15s ease-in-out forwards;
+  --animate-fadeInUp100-500ms: fadeInUp100 0.5s ease-in-out forwards;
+  --animate-fadeInUp100-1000ms: fadeInUp100 1s ease-in-out forwards;
+
+  --animate-fadeInDown5-150ms: fadeInDown5 0.15s ease-in-out forwards;
+  --animate-fadeInDown5-500ms: fadeInDown5 0.5s ease-in-out forwards;
+  --animate-fadeInDown5-1000ms: fadeInDown5 1s ease-in-out forwards;
+  --animate-fadeInDown15-150ms: fadeInDown15 0.15s ease-in-out forwards;
+  --animate-fadeInDown15-500ms: fadeInDown15 0.5s ease-in-out forwards;
+  --animate-fadeInDown15-1000ms: fadeInDown15 1s ease-in-out forwards;
+  --animate-fadeInDown30-150ms: fadeInDown30 0.15s ease-in-out forwards;
+  --animate-fadeInDown30-500ms: fadeInDown30 0.5s ease-in-out forwards;
+  --animate-fadeInDown30-1000ms: fadeInDown30 1s ease-in-out forwards;
+  --animate-fadeInDown100-150ms: fadeInDown100 0.15s ease-in-out forwards;
+  --animate-fadeInDown100-500ms: fadeInDown100 0.5s ease-in-out forwards;
+  --animate-fadeInDown100-1000ms: fadeInDown100 1s ease-in-out forwards;
+
+  /* Transition Property */
+  --transition-property-all: all;
+}