dn-react-router-toolkit 0.1.0

package/dist/esm/auth-kit/client/google_login_button.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { FcGoogle } from "react-icons/fc";
+import { useSearchParams } from "react-router";
+export function GoogleLoginButton({ className = "max-w-[300px] w-full", GOOGLE_CLIENT_ID, GOOGLE_REDIRECT_URI, }) {
+    const [searchParams] = useSearchParams();
+    const redirectUrl = searchParams.get("redirectUrl") || "";
+    const googleClientId = GOOGLE_CLIENT_ID || "";
+    const googleRedirectUrl = GOOGLE_REDIRECT_URI || "";
+    const href = new URL("https://accounts.google.com/o/oauth2/v2/auth");
+    href.searchParams.append("client_id", googleClientId);
+    href.searchParams.append("redirect_uri", googleRedirectUrl);
+    href.searchParams.append("response_type", "code");
+    href.searchParams.append("scope", "email profile");
+    href.searchParams.append("state", redirectUrl);
+    return (React.createElement("div", { className: className },
+        React.createElement("a", { href: href.toString(), className: "relative flex items-center border border-neutral-300 px-4 py-3 no-underline hover:no-underline bg-white hover:bg-neutral-100 rounded" },
+            React.createElement(FcGoogle, null),
+            React.createElement("p", { className: "text-[14px] text-black absolute left-0 right-0 text-center" }, "\uAD6C\uAE00\uB85C \uACC4\uC18D\uD558\uAE30"))));
+}

package/dist/esm/auth-kit/client/redirect_page.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function RedirectPage(): React.JSX.Element;

package/dist/esm/auth-kit/client/redirect_page.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { useEffect } from "react";
+import { useNavigate } from "react-router";
+export function RedirectPage() {
+    const navigate = useNavigate();
+    useEffect(() => {
+        const searchParams = new URLSearchParams(window.location.search);
+        const redirectUrl = searchParams.get("redirectUrl") ||
+            new URL("/", window.location.origin).toString();
+        if (redirectUrl) {
+            navigate(redirectUrl);
+        }
+    }, [navigate]);
+    return React.createElement(React.Fragment, null);
+}

package/dist/esm/auth-kit/google_auth.d.ts

@@ -0,0 +1,18 @@
+import { AuthService } from "./auth_service";
+export declare class GoogleAuth {
+    AUTH: AuthService;
+    GOOGLE_CLIENT_ID: string;
+    GOOGLE_CLIENT_SECRET: string;
+    GOOGLE_REDIRECT_URI: string;
+    constructor(AUTH: AuthService, GOOGLE_CLIENT_ID: string, GOOGLE_CLIENT_SECRET: string, GOOGLE_REDIRECT_URI: string);
+    signIn(code: string): Promise<{
+        user: {
+            id: string;
+            role: string;
+            name: string;
+            refreshToken: string | null;
+        };
+        accessToken: string;
+        refreshToken: string;
+    }>;
+}

package/dist/esm/auth-kit/google_auth.js

@@ -0,0 +1,61 @@
+import { BAD_REQUEST, createJsonResponse, INTERNAL_SERVER_ERROR, } from "../http-kit/response";
+export class GoogleAuth {
+    constructor(AUTH, GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, GOOGLE_REDIRECT_URI) {
+        this.GOOGLE_CLIENT_ID = GOOGLE_CLIENT_ID;
+        this.GOOGLE_CLIENT_SECRET = GOOGLE_CLIENT_SECRET;
+        this.GOOGLE_REDIRECT_URI = GOOGLE_REDIRECT_URI;
+        this.AUTH = AUTH;
+    }
+    async signIn(code) {
+        const tokenRes = await fetch("https://oauth2.googleapis.com/token", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+            },
+            body: new URLSearchParams({
+                code,
+                client_id: this.GOOGLE_CLIENT_ID,
+                client_secret: this.GOOGLE_CLIENT_SECRET,
+                redirect_uri: this.GOOGLE_REDIRECT_URI,
+                grant_type: "authorization_code",
+            }),
+        });
+        if (!tokenRes.ok) {
+            if (process.env.NODE_ENV === "development") {
+                throw INTERNAL_SERVER_ERROR(`구글 토큰 발급에 실패했습니다. status: ${tokenRes.status}, message: ${await tokenRes.text()}`);
+            }
+            throw INTERNAL_SERVER_ERROR("인증에 실패했습니다.");
+        }
+        const { access_token } = await tokenRes.json();
+        const userRes = await fetch("https://www.googleapis.com/oauth2/v1/userinfo", {
+            headers: {
+                Authorization: `Bearer ${access_token}`,
+            },
+        });
+        if (!userRes.ok) {
+            throw BAD_REQUEST("유저 정보를 가져오는데 실패했습니다.");
+        }
+        const { id, email, name, picture } = await userRes.json();
+        const user = await this.AUTH.findUser("google", {
+            id,
+            email,
+            name,
+            picture,
+        });
+        if (!user) {
+            throw createJsonResponse(404)({
+                provider: "google",
+                id,
+                name,
+                picture,
+                message: "사용자를 찾을 수 없습니다.",
+            });
+        }
+        const { accessToken, refreshToken } = await this.AUTH.issueTokenPair(user);
+        return {
+            user,
+            accessToken,
+            refreshToken,
+        };
+    }
+}

package/dist/esm/auth-kit/jwt.d.ts

@@ -0,0 +1,15 @@
+import { type JWTPayload } from "jose";
+export declare class JWTManager {
+    siteOrigin?: string;
+    constructor(siteOrigin?: string);
+    verify(token: string, secret: string): Promise<JWTPayload | undefined>;
+    verifyAccessToken(token: string): Promise<JWTPayload | undefined>;
+    verifyRefreshToken(token: string): Promise<JWTPayload | undefined>;
+    sign(payload: JWTPayload, secret: string, { expiresIn }?: {
+        expiresIn?: string;
+    }): Promise<string>;
+    signAccessToken(payload: JWTPayload): Promise<string>;
+    signRefreshToken(payload: JWTPayload): Promise<string>;
+    decode(token: string): JWTPayload;
+    getExpirationTime(token: string): Date;
+}

package/dist/esm/auth-kit/jwt.js

@@ -0,0 +1,49 @@
+import { SignJWT, decodeJwt, jwtVerify } from "jose";
+export class JWTManager {
+    constructor(siteOrigin) {
+        this.siteOrigin = siteOrigin;
+    }
+    async verify(token, secret) {
+        try {
+            const result = await jwtVerify(token, new TextEncoder().encode(secret));
+            return result.payload;
+        }
+        catch (_) {
+            return;
+        }
+    }
+    async verifyAccessToken(token) {
+        return this.verify(token, process.env.ACCESS_TOKEN_SECRET);
+    }
+    async verifyRefreshToken(token) {
+        return this.verify(token, process.env.REFRESH_TOKEN_SECRET);
+    }
+    async sign(payload, secret, { expiresIn } = {}) {
+        let builder = new SignJWT(payload)
+            .setProtectedHeader({ alg: "HS256", typ: "JWT" })
+            .setIssuedAt();
+        if (this.siteOrigin) {
+            builder = builder.setIssuer(this.siteOrigin);
+        }
+        if (expiresIn) {
+            builder = builder.setExpirationTime(expiresIn);
+        }
+        return builder.sign(new TextEncoder().encode(secret));
+    }
+    async signAccessToken(payload) {
+        return this.sign(payload, process.env.ACCESS_TOKEN_SECRET, {
+            expiresIn: process.env.ACCESS_TOKEN_EXPIRES_IN || "10s",
+        });
+    }
+    async signRefreshToken(payload) {
+        return this.sign(payload, process.env.REFRESH_TOKEN_SECRET, {
+            expiresIn: process.env.REFRESH_TOKEN_EXPIRES_IN || "1d",
+        });
+    }
+    decode(token) {
+        return decodeJwt(token);
+    }
+    getExpirationTime(token) {
+        return new Date(Number(decodeJwt(token).exp) * 1000);
+    }
+}

package/dist/esm/auth-kit/kakao_auth.d.ts

@@ -0,0 +1,15 @@
+import { AuthService } from "./auth_service";
+export declare class KakaoAuth {
+    AUTH: AuthService;
+    constructor(AUTH: AuthService);
+    signIn(kakaoAccessToken: string): Promise<{
+        user: {
+            id: string;
+            role: string;
+            name: string;
+            refreshToken: string | null;
+        };
+        accessToken: string;
+        refreshToken: string;
+    }>;
+}

package/dist/esm/auth-kit/kakao_auth.js

@@ -0,0 +1,34 @@
+import { createJsonResponse } from "../http-kit";
+export class KakaoAuth {
+    constructor(AUTH) {
+        this.AUTH = AUTH;
+    }
+    async signIn(kakaoAccessToken) {
+        const userRes = await fetch("https://kapi.kakao.com/v2/user/me", {
+            headers: {
+                Authorization: `Bearer ${kakaoAccessToken}`,
+            },
+        });
+        if (!userRes.ok) {
+            throw new Error("유저 정보를 가져오는데 실패했습니다.");
+        }
+        const { id, kakao_account } = await userRes.json();
+        const { email, profile } = kakao_account;
+        const payload = {
+            id,
+            email,
+            name: profile.nickname,
+            picture: profile.thumbnail_image_url,
+        };
+        const user = await this.AUTH.findUser("kakao", payload);
+        if (!user) {
+            throw createJsonResponse(404)(Object.assign(Object.assign({ provider: "kakao" }, payload), { message: "사용자를 찾을 수 없습니다." }));
+        }
+        const { accessToken, refreshToken } = await this.AUTH.issueTokenPair(user);
+        return {
+            user,
+            accessToken,
+            refreshToken,
+        };
+    }
+}

package/dist/esm/auth-kit/repository.d.ts

@@ -0,0 +1,40 @@
+export interface AuthRepository {
+    findCredentialById(id: string): Promise<{
+        password: string;
+        userId: string;
+    } | undefined>;
+    findUserById(userId: string): Promise<{
+        id: string;
+        role: string;
+        name: string;
+        refreshToken: string | null;
+    } | undefined>;
+    updateUserRefreshToken(userId: string, hashedRefreshToken: string | null): Promise<void>;
+    createUser(userData: {
+        id: string;
+        role: string;
+        profileImageId: string | null;
+        name: string;
+        email: string;
+    }): Promise<{
+        id: string;
+        role: string;
+        name: string;
+    }>;
+    findThirdPartyAuth(provider: string, providerId: string): Promise<{
+        userId: string;
+    } | undefined>;
+    createThirdPartyAuth(authData: {
+        id: string;
+        provider: string;
+        userId: string;
+    }): Promise<void>;
+    createFile(fileData: {
+        id: string;
+        name: string;
+        type: string;
+        key: string;
+        size: number;
+        metadata: Record<string, any>;
+    }): Promise<void>;
+}

package/dist/esm/auth-kit/repository.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/auth-kit/with_auth.d.ts

@@ -0,0 +1,12 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
+import { AuthService } from "./auth_service";
+import { JWTManager } from "./jwt";
+import type { JWTPayload } from "jose";
+type Fn<T extends LoaderFunctionArgs | ActionFunctionArgs> = (arg: T) => Promise<unknown> | unknown;
+type InputFN = (auth?: JWTPayload) => Fn<LoaderFunctionArgs> | Fn<ActionFunctionArgs>;
+export type WithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs> = (fn: InputFN) => Fn<T>;
+export declare function createWithAuthHandler<T extends LoaderFunctionArgs | ActionFunctionArgs>({ JWT_MANAGER, AUTH, }: {
+    JWT_MANAGER: JWTManager;
+    AUTH: AuthService;
+}): WithAuthHandler<T>;
+export {};

package/dist/esm/auth-kit/with_auth.js

@@ -0,0 +1,43 @@
+import { ACCESS_TOKEN_COOKIE, REFRESH_TOKEN_COOKIE, } from "./auth_service";
+export function createWithAuthHandler({ JWT_MANAGER, AUTH, }) {
+    return function (fn) {
+        return async function (arg) {
+            const cookie = arg.request.headers.get("cookie");
+            const accessToken = await ACCESS_TOKEN_COOKIE.parse(cookie);
+            if (accessToken) {
+                const payload = await JWT_MANAGER.verifyAccessToken(accessToken);
+                if (payload) {
+                    return fn(payload)(arg);
+                }
+            }
+            const refreshToken = await REFRESH_TOKEN_COOKIE.parse(cookie);
+            if (refreshToken) {
+                try {
+                    const refreshedAccessToken = await AUTH.refreshAccessToken(refreshToken);
+                    const setCookieHeader = await AUTH.getRefreshTokenSetCookie(refreshedAccessToken);
+                    return new Response("Temporary Redirect", {
+                        status: 307,
+                        headers: {
+                            "Set-Cookie": setCookieHeader,
+                            Location: arg.request.url,
+                        },
+                    });
+                }
+                catch (e) {
+                    if (e instanceof Error) {
+                        console.log(e.message);
+                    }
+                    const setCookieHeader = await AUTH.getRefreshTokenSetCookie(null);
+                    return new Response("Temporary Redirect", {
+                        status: 307,
+                        headers: {
+                            "Set-Cookie": setCookieHeader,
+                            Location: arg.request.url,
+                        },
+                    });
+                }
+            }
+            return fn(undefined)(arg);
+        };
+    };
+}

package/dist/esm/cn.d.ts

@@ -0,0 +1 @@
+export declare function cn(...classes: (string | false | undefined)[]): string;

package/dist/esm/cn.js

@@ -0,0 +1,3 @@
+export function cn(...classes) {
+    return classes.filter(Boolean).join(" ").trim();
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./modal";
+export * from "./styles";

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from "./modal";
+export * from "./styles";

package/dist/esm/components/modal/fullscreen_container.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { type DetailedHTMLProps, type HTMLAttributes } from "react";
+export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export default function FullscreenContainer({ className, children, ...props }: Props): React.JSX.Element;
+export declare function useFullscreen(ref: React.RefObject<HTMLDivElement | null>): string;

package/dist/esm/components/modal/fullscreen_container.js

@@ -0,0 +1,57 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { cn } from "../../cn";
+import React from "react";
+import { useEffect, useRef, } from "react";
+export default function FullscreenContainer(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const containerRef = useRef(null);
+    useFullscreen(containerRef);
+    return (React.createElement("div", Object.assign({ ref: containerRef }, props, { className: cn("fixed left-0 right-0 top-0 bottom-0", className) }), children));
+}
+export function useFullscreen(ref) {
+    useEffect(() => {
+        const container = ref.current;
+        if (!container) {
+            return;
+        }
+        const scroll = () => {
+            if (scrollY > 0) {
+                window.scrollTo({
+                    top: 0,
+                    behavior: "instant",
+                });
+            }
+        };
+        const resize = () => {
+            if (!visualViewport) {
+                return;
+            }
+            container.classList.remove("bottom-0");
+            container.style.height = `${visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.height}px`;
+            if (visualViewport.height < window.innerHeight) {
+                window.addEventListener("scroll", scroll);
+            }
+            else {
+                window.removeEventListener("scroll", scroll);
+            }
+        };
+        resize();
+        visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.addEventListener("resize", resize);
+        scroll();
+        return () => {
+            window.removeEventListener("scroll", scroll);
+            visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.removeEventListener("resize", resize);
+        };
+    }, [ref]);
+    return "fixed inset-0";
+}

package/dist/esm/components/modal/hooks.d.ts

@@ -0,0 +1,15 @@
+import { type ModalProps } from "./modal";
+import React from "react";
+export declare function useModalRoot(): HTMLElement | null;
+export declare function useModalPortal(): ((children: React.ReactNode) => null) | ((children: React.ReactNode) => React.ReactPortal);
+export type ModalContextProps = {
+    open: () => void;
+    close: () => void;
+    isOpen: boolean;
+};
+export declare const ModalContext: React.Context<ModalContextProps>;
+export declare function useModal(): {
+    open: () => void;
+    close: () => void;
+    Modal: (props: Omit<ModalProps, "open">) => React.JSX.Element;
+};

package/dist/esm/components/modal/hooks.js

@@ -0,0 +1,69 @@
+import { createContext, useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import Modal from "./modal";
+import React from "react";
+export function useModalRoot() {
+    const [container, setContainer] = useState(null);
+    useEffect(() => {
+        const container = document.getElementById("modal-root");
+        if (container) {
+            setContainer(container);
+        }
+        return () => {
+            setContainer(null);
+        };
+    }, []);
+    return container;
+}
+export function useModalPortal() {
+    const container = useModalRoot();
+    if (!container) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        return (children) => null;
+    }
+    return (children) => {
+        return createPortal(children, container);
+    };
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ModalContext = createContext({});
+export function useModal() {
+    const ch2 = useRef(null);
+    const open = () => {
+        var _a;
+        (_a = ch2.current) === null || _a === void 0 ? void 0 : _a.call(ch2, true);
+    };
+    const close = () => {
+        var _a;
+        (_a = ch2.current) === null || _a === void 0 ? void 0 : _a.call(ch2, false);
+    };
+    const Component = useCallback(function Component(props) {
+        const [isOpen, setIsOpen] = useState(false);
+        const createPortal = useModalPortal();
+        useEffect(() => {
+            ch2.current = (v) => {
+                setIsOpen(v);
+            };
+            return () => {
+                ch2.current = null;
+            };
+        }, []);
+        useEffect(() => {
+            if (isOpen) {
+                // document.body.style.overflow = "hidden";
+            }
+            else {
+                // document.body.style.overflow = "";
+            }
+            return () => {
+                // document.body.style.overflow = "";
+            };
+        }, [isOpen]);
+        return (React.createElement(ModalContext.Provider, { value: { open, close, isOpen } }, createPortal(React.createElement(Modal, Object.assign({}, props, { open: isOpen, onBackgroundClick: close })))));
+    }, []);
+    return {
+        open,
+        close,
+        Modal: Component,
+    };
+}

package/dist/esm/components/modal/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./fullscreen_container";
+export * from "./hooks";
+export * from "./modal";

package/dist/esm/components/modal/index.js

@@ -0,0 +1,3 @@
+export * from "./fullscreen_container";
+export * from "./hooks";
+export * from "./modal";

package/dist/esm/components/modal/modal.d.ts

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from "react";
+export type ModalProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    open: boolean;
+    children?: ReactNode;
+    onBackgroundClick?: () => void;
+    embeded?: boolean;
+    always?: boolean;
+    background?: string;
+};
+export default function Modal({ open, className, background, onBackgroundClick, children, ...props }: ModalProps): React.JSX.Element;

package/dist/esm/components/modal/modal.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useRef, } from "react";
+import { useFullscreen } from "./fullscreen_container";
+import { cn } from "../../cn";
+export default function Modal(_a) {
+    var { open, className, background = "bg-gray-500/25", onBackgroundClick, children } = _a, props = __rest(_a, ["open", "className", "background", "onBackgroundClick", "children"]);
+    const containerRef = useRef(null);
+    const fullscreen = useFullscreen(containerRef);
+    const [mounted, setMounted] = React.useState(false);
+    useEffect(() => {
+        if (open) {
+            // document.body.style.overflow = "hidden";
+            setMounted(true);
+        }
+        else {
+            // document.body.style.overflow = "";
+            setTimeout(() => {
+                setMounted(false);
+            }, 200);
+        }
+        return () => {
+            // document.body.style.overflow = "";
+        };
+    }, [open]);
+    const onBackgroundMouseDown = (event) => {
+        event.preventDefault();
+        onBackgroundClick === null || onBackgroundClick === void 0 ? void 0 : onBackgroundClick();
+    };
+    const onModalMouseDown = (event) => {
+        event.stopPropagation();
+    };
+    const onBackgroundTouchStart = (event) => {
+        event.preventDefault();
+        onBackgroundClick === null || onBackgroundClick === void 0 ? void 0 : onBackgroundClick();
+    };
+    const onModalTouchStart = (event) => {
+        event.stopPropagation();
+    };
+    return (React.createElement("div", { ref: containerRef, className: cn(fullscreen, "z-[999] flex flex-col justify-center transition-bg duration-200 md:px-6 overflow-hidden print:px-0 print:block print:overflow-auto", open && mounted
+            ? cn(background, "ease-out")
+            : "bg-transparent ease-in pointer-events-none"), onMouseDown: onBackgroundMouseDown, onTouchStart: onBackgroundTouchStart },
+        React.createElement("div", { className: cn("relative flex-1 flex flex-col justify-end md:justify-center items-center transition-[opacity transform] duration-200 print:block", open && mounted
+                ? "translate-y-[0px] opacity-100 ease-out"
+                : "translate-y-[100%] md:translate-y-[50px] opacity-0 ease-in") }, (open || mounted) && (React.createElement("div", Object.assign({}, props, { className: cn(className, "w-full max-h-[92vh] print:w-[unset] print:max-h-[unset] rounded-tl-lg rounded-tr-lg md:rounded-lg overflow-auto print:rounded-none"), onMouseDown: onModalMouseDown, onTouchStart: onModalTouchStart }), children)))));
+}

package/dist/esm/components/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const inputBackgroundStyle = "text-[16px] border border-neutral-200 outline-none appearance-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-neutral-400";
+export declare const formInputStyle = "w-full px-3 text-[16px] border border-neutral-200 outline-none appearance-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-neutral-400 h-[40px]";
+export declare const baseButtonStyle = "transition-colors text-sm font-semibold cursor-pointer flex items-center justify-center rounded-lg whitespace-nowrap text-ellipsis overflow-hidden";
+export declare const primaryButtonStyle = "transition-colors text-sm font-semibold cursor-pointer flex items-center justify-center rounded-lg whitespace-nowrap text-ellipsis overflow-hidden px-4 h-[40px] bg-gradient-to-br from-primary-400 to-primary-500 text-white transition-colors";
+export declare const disabledButtonStyle = "transition-colors text-sm font-semibold cursor-pointer flex items-center justify-center rounded-lg whitespace-nowrap text-ellipsis overflow-hidden h-[40px] px-4 bg-neutral-200 text-neutral-400";
+export declare const outlineButtonStyle = "transition-colors text-sm font-semibold cursor-pointer flex items-center justify-center rounded-lg whitespace-nowrap text-ellipsis overflow-hidden h-[40px] px-4 bg-white border border-neutral-300 hover:bg-neutral-50";
+export declare const dangerousButtonStyle = "transition-colors text-sm font-semibold cursor-pointer flex items-center justify-center rounded-lg whitespace-nowrap text-ellipsis overflow-hidden h-[40px] px-4 bg-white border hover:bg-red-50 text-red-600";

package/dist/esm/components/styles.js

@@ -0,0 +1,7 @@
+export const inputBackgroundStyle = "text-[16px] border border-neutral-200 outline-none appearance-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-neutral-400";
+export const formInputStyle = `w-full px-3 ${inputBackgroundStyle} h-[40px]`;
+export const baseButtonStyle = "transition-colors text-sm font-semibold cursor-pointer flex items-center justify-center rounded-lg whitespace-nowrap text-ellipsis overflow-hidden";
+export const primaryButtonStyle = `${baseButtonStyle} px-4 h-[40px] bg-gradient-to-br from-primary-400 to-primary-500 text-white transition-colors`;
+export const disabledButtonStyle = `${baseButtonStyle} h-[40px] px-4 bg-neutral-200 text-neutral-400`;
+export const outlineButtonStyle = `${baseButtonStyle} h-[40px] px-4 bg-white border border-neutral-300 hover:bg-neutral-50`;
+export const dangerousButtonStyle = `${baseButtonStyle} h-[40px] px-4 bg-white border hover:bg-red-50 text-red-600`;

package/dist/esm/date.d.ts

@@ -0,0 +1 @@
+export declare const formatHumanDateTime: (value: string | Date) => string;

package/dist/esm/date.js

@@ -0,0 +1,24 @@
+import moment from "moment-timezone";
+export const formatHumanDateTime = (value) => {
+    const date = moment(value).tz("Asia/Seoul");
+    const now = moment().tz("Asia/Seoul");
+    if (date.isAfter(now.clone().subtract(1, "minute"))) {
+        return "방금 전";
+    }
+    if (date.isAfter(now.clone().subtract(1, "hour"))) {
+        const diff = now.diff(date, "minute");
+        return `${diff}분 전`;
+    }
+    if (date.isAfter(now.clone().subtract(6, "hours"))) {
+        const diff = now.diff(date, "hour");
+        return `${diff}시간 전`;
+    }
+    if (date.isAfter(now.clone().subtract(1, "week"))) {
+        const diff = now.diff(date, "day");
+        return `${diff}일 전`;
+    }
+    if (date.isSame(now, "year")) {
+        return date.format("M월 D일");
+    }
+    return date.format("YYYY년 M월 D일");
+};

package/dist/esm/file-kit/cdn.d.ts

@@ -0,0 +1,3 @@
+export declare const createCDN: (origin: string) => <T extends string | undefined>(key: T, { width }?: {
+    width?: number;
+}) => T extends undefined ? T : string;

package/dist/esm/file-kit/cdn.js

@@ -0,0 +1,5 @@
+export const createCDN = (origin) => {
+    return (key, { width } = {}) => {
+        return (key ? `${origin}/${key}${width ? `?w=${width}` : ""}` : undefined);
+    };
+};