dn-react-router-toolkit 0.1.0

package/README.md

@@ -0,0 +1 @@
+# Dndnsoft React Router Toolkit

package/dist/cjs/auth-kit/apple_auth.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppleAuth = void 0;
+const jose_1 = require("jose");
+class AppleAuth {
+    constructor(AUTH) {
+        this.AUTH = AUTH;
+    }
+    async signIn(code, type = "web") {
+        const url = "https://appleid.apple.com/auth/token";
+        const client_secret = await this.generateAppleClientSecret(type);
+        const res = await fetch(url, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+            },
+            body: new URLSearchParams({
+                client_id: type === "web"
+                    ? process.env.APPLE_SERVICE_ID
+                    : process.env.APPLE_CLIENT_ID,
+                client_secret,
+                code,
+                grant_type: "authorization_code",
+            }),
+        });
+        if (!res.ok) {
+            console.error(await res.text());
+            throw new Error("Apple 인증에 실패했습니다.");
+        }
+        const data = await res.json();
+        const { id_token } = data;
+        const payload = (0, jose_1.decodeJwt)(id_token);
+        const { sub, email, name } = payload;
+        const user = await this.AUTH.getOrCreateUser("apple", {
+            id: sub,
+            email,
+            name,
+        });
+        const { accessToken, refreshToken } = await this.AUTH.issueTokenPair(user);
+        return { user, accessToken, refreshToken };
+    }
+    async generateAppleClientSecret(type = "web") {
+        const authKey = process.env.APPLE_AUTH_KEY;
+        const teamId = process.env.APPLE_TEAM_ID;
+        const keyId = process.env.APPLE_KEY_ID;
+        const clientId = type === "web"
+            ? process.env.APPLE_SERVICE_ID
+            : process.env.APPLE_CLIENT_ID;
+        const keyObject = await (0, jose_1.importPKCS8)(authKey, "ES256");
+        return new jose_1.SignJWT()
+            .setProtectedHeader({ alg: "ES256", kid: keyId })
+            .setIssuedAt()
+            .setIssuer(teamId)
+            .setExpirationTime("1h")
+            .setAudience("https://appleid.apple.com")
+            .setSubject(clientId)
+            .sign(keyObject);
+    }
+}
+exports.AppleAuth = AppleAuth;

package/dist/cjs/auth-kit/auth_service.js

@@ -0,0 +1,204 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthService = exports.REFRESH_TOKEN_COOKIE = exports.ACCESS_TOKEN_COOKIE = exports.REFRESH_TOKEN_KEY = exports.ACCESS_TOKEN_KEY = void 0;
+const bcryptjs_1 = __importDefault(require("bcryptjs"));
+const uuid_1 = require("uuid");
+const react_router_1 = require("react-router");
+exports.ACCESS_TOKEN_KEY = "access_token";
+exports.REFRESH_TOKEN_KEY = "refresh_token";
+exports.ACCESS_TOKEN_COOKIE = (0, react_router_1.createCookie)(exports.ACCESS_TOKEN_KEY, {
+    path: "/",
+    httpOnly: process.env.NODE_ENV === "production",
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "strict",
+});
+exports.REFRESH_TOKEN_COOKIE = (0, react_router_1.createCookie)(exports.REFRESH_TOKEN_KEY, {
+    path: "/",
+    httpOnly: process.env.NODE_ENV === "production",
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "strict",
+});
+class AuthService {
+    constructor({ repository, JWT_MANAGER, OBJECT_STORAGE, }) {
+        this.repository = repository;
+        this.JWT_MANAGER = JWT_MANAGER;
+        this.OBJECT_STORAGE = OBJECT_STORAGE;
+    }
+    async verify(request) {
+        var _a;
+        const accessToken = ((_a = request === null || request === void 0 ? void 0 : request.headers.get("Authorization")) === null || _a === void 0 ? void 0 : _a.replace("Bearer ", "")) ||
+            (await this.getAccessTokenFromCookies(request));
+        if (accessToken) {
+            return this.JWT_MANAGER.verifyAccessToken(accessToken);
+        }
+    }
+    async verifyOrRefresh(request) {
+        const payload = await this.verify(request);
+        if (payload) {
+            return payload;
+        }
+        return this.refresh(request);
+    }
+    async getAccessTokenFromCookies(request) {
+        var _a;
+        const cookieStore = await exports.ACCESS_TOKEN_COOKIE.parse(request.headers.get("cookie"));
+        return (_a = cookieStore.get(exports.ACCESS_TOKEN_KEY)) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    async getRefreshTokenFromCookies(request) {
+        var _a;
+        const cookieStore = await exports.REFRESH_TOKEN_COOKIE.parse(request.headers.get("cookie"));
+        return (_a = cookieStore.get(exports.REFRESH_TOKEN_KEY)) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    async refresh(request) {
+        const refreshToken = await this.getRefreshTokenFromCookies(request);
+        if (refreshToken) {
+            try {
+                const refreshedAccessToken = await this.refreshAccessToken(refreshToken);
+                await this.getAccessTokenSetCookie(refreshedAccessToken);
+                const payload = this.JWT_MANAGER.decode(refreshedAccessToken);
+                if (payload) {
+                    return payload;
+                }
+            }
+            catch (e) {
+                if (e instanceof Error) {
+                    console.log(e.message);
+                }
+                return;
+            }
+        }
+    }
+    async signIn({ id, password }) {
+        const credential = await this.repository.findCredentialById(id);
+        if (!credential) {
+            throw Error("아이디 또는 비밀번호가 틀렸습니다.");
+        }
+        if (!(await bcryptjs_1.default.compare(password, credential.password))) {
+            throw Error("아이디 또는 비밀번호가 틀렸습니다.");
+        }
+        const user = await this.repository.findUserById(credential.userId);
+        if (!user) {
+            throw Error("회원 정보를 찾을 수 없습니다.");
+        }
+        const { accessToken, refreshToken } = await this.issueTokenPair(user);
+        return {
+            accessToken,
+            refreshToken,
+        };
+    }
+    async issueAccessToken(user) {
+        return this.JWT_MANAGER.signAccessToken({
+            userId: user.id,
+            role: user.role,
+            name: user.name,
+        });
+    }
+    async issueTokenPair(user) {
+        const refreshToken = await this.JWT_MANAGER.signRefreshToken({
+            userId: user.id,
+            role: user.role,
+            name: user.name,
+        });
+        await this.repository.updateUserRefreshToken(user.id, await bcryptjs_1.default.hash(refreshToken, 10));
+        const accessToken = await this.issueAccessToken(user);
+        return { refreshToken, accessToken };
+    }
+    async refreshAccessToken(refreshToken) {
+        const payload = await this.JWT_MANAGER.verifyRefreshToken(refreshToken);
+        if (!payload) {
+            throw new Error("토큰이 유효하지 않습니다.");
+        }
+        const { userId } = payload;
+        if (typeof userId !== "string") {
+            throw new Error("토큰이 유효하지 않습니다.");
+        }
+        const user = await this.repository.findUserById(userId);
+        if (!user) {
+            throw Error("이용자를 찾지 못했습니다.");
+        }
+        if (!user.refreshToken) {
+            throw Error("인증 정보를 찾지 못했습니다.");
+        }
+        if (await bcryptjs_1.default.compare(user.refreshToken, refreshToken)) {
+            throw Error("토큰이 유효하지 않습니다.");
+        }
+        const accessToken = await this.issueAccessToken(user);
+        return accessToken;
+    }
+    async getAccessTokenSetCookie(accessToken) {
+        return exports.ACCESS_TOKEN_COOKIE.serialize(accessToken, {
+            expires: accessToken
+                ? this.JWT_MANAGER.getExpirationTime(accessToken)
+                : new Date(0),
+        });
+    }
+    async getRefreshTokenSetCookie(refreshToken) {
+        return exports.REFRESH_TOKEN_COOKIE.serialize(refreshToken, {
+            expires: refreshToken
+                ? this.JWT_MANAGER.getExpirationTime(refreshToken)
+                : new Date(0),
+        });
+    }
+    async findUser(provider, info) {
+        const thirdPartyAuth = await this.repository.findThirdPartyAuth(provider, info.id);
+        if (thirdPartyAuth) {
+            const user = await this.repository.findUserById(thirdPartyAuth.userId);
+            if (user) {
+                return user;
+            }
+        }
+    }
+    async getOrCreateUser(provider, info) {
+        const thirdPartyAuth = await this.repository.findThirdPartyAuth(provider, info.id);
+        if (thirdPartyAuth) {
+            const user = await this.repository.findUserById(thirdPartyAuth.userId);
+            if (user) {
+                return user;
+            }
+        }
+        const userId = (0, uuid_1.v4)();
+        const email = info.email;
+        const name = info.name || "익명";
+        const picture = info.picture;
+        const profileImageId = (await this.savePicture(picture)) || null;
+        const result = await this.repository.createUser({
+            id: userId,
+            role: "user",
+            profileImageId,
+            name,
+            email,
+        });
+        await this.repository.createThirdPartyAuth({
+            id: info.id,
+            provider,
+            userId,
+        });
+        return result;
+    }
+    async savePicture(picture) {
+        if (!picture) {
+            return;
+        }
+        const res = await fetch(picture);
+        if (!res.ok) {
+            return;
+        }
+        const buffer = await res.arrayBuffer();
+        const id = (0, uuid_1.v4)();
+        const key = `/users/${id}/picture`;
+        await this.OBJECT_STORAGE.put(key, Buffer.from(buffer));
+        await this.repository.createFile({
+            id,
+            name: "picture",
+            type: "image/*",
+            key,
+            size: buffer.byteLength,
+            metadata: {},
+        });
+        return id;
+    }
+}
+exports.AuthService = AuthService;

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GoogleLoginButton = GoogleLoginButton;
+const react_1 = __importDefault(require("react"));
+const fc_1 = require("react-icons/fc");
+const react_router_1 = require("react-router");
+function GoogleLoginButton({ className = "max-w-[300px] w-full", GOOGLE_CLIENT_ID, GOOGLE_REDIRECT_URI, }) {
+    const [searchParams] = (0, react_router_1.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_1.default.createElement("div", { className: className },
+        react_1.default.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_1.default.createElement(fc_1.FcGoogle, null),
+            react_1.default.createElement("p", { className: "text-[14px] text-black absolute left-0 right-0 text-center" }, "\uAD6C\uAE00\uB85C \uACC4\uC18D\uD558\uAE30"))));
+}

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RedirectPage = RedirectPage;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const react_router_1 = require("react-router");
+function RedirectPage() {
+    const navigate = (0, react_router_1.useNavigate)();
+    (0, react_2.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_1.default.createElement(react_1.default.Fragment, null);
+}

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GoogleAuth = void 0;
+const response_1 = require("../http-kit/response");
+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 (0, response_1.INTERNAL_SERVER_ERROR)(`구글 토큰 발급에 실패했습니다. status: ${tokenRes.status}, message: ${await tokenRes.text()}`);
+            }
+            throw (0, response_1.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 (0, response_1.BAD_REQUEST)("유저 정보를 가져오는데 실패했습니다.");
+        }
+        const { id, email, name, picture } = await userRes.json();
+        const user = await this.AUTH.findUser("google", {
+            id,
+            email,
+            name,
+            picture,
+        });
+        if (!user) {
+            throw (0, response_1.createJsonResponse)(404)({
+                provider: "google",
+                id,
+                name,
+                picture,
+                message: "사용자를 찾을 수 없습니다.",
+            });
+        }
+        const { accessToken, refreshToken } = await this.AUTH.issueTokenPair(user);
+        return {
+            user,
+            accessToken,
+            refreshToken,
+        };
+    }
+}
+exports.GoogleAuth = GoogleAuth;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JWTManager = void 0;
+const jose_1 = require("jose");
+class JWTManager {
+    constructor(siteOrigin) {
+        this.siteOrigin = siteOrigin;
+    }
+    async verify(token, secret) {
+        try {
+            const result = await (0, jose_1.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 jose_1.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 (0, jose_1.decodeJwt)(token);
+    }
+    getExpirationTime(token) {
+        return new Date(Number((0, jose_1.decodeJwt)(token).exp) * 1000);
+    }
+}
+exports.JWTManager = JWTManager;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KakaoAuth = void 0;
+const http_kit_1 = require("../http-kit");
+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 (0, http_kit_1.createJsonResponse)(404)(Object.assign(Object.assign({ provider: "kakao" }, payload), { message: "사용자를 찾을 수 없습니다." }));
+        }
+        const { accessToken, refreshToken } = await this.AUTH.issueTokenPair(user);
+        return {
+            user,
+            accessToken,
+            refreshToken,
+        };
+    }
+}
+exports.KakaoAuth = KakaoAuth;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createWithAuthHandler = createWithAuthHandler;
+const auth_service_1 = require("./auth_service");
+function createWithAuthHandler({ JWT_MANAGER, AUTH, }) {
+    return function (fn) {
+        return async function (arg) {
+            const cookie = arg.request.headers.get("cookie");
+            const accessToken = await auth_service_1.ACCESS_TOKEN_COOKIE.parse(cookie);
+            if (accessToken) {
+                const payload = await JWT_MANAGER.verifyAccessToken(accessToken);
+                if (payload) {
+                    return fn(payload)(arg);
+                }
+            }
+            const refreshToken = await auth_service_1.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/cjs/cn.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cn = cn;
+function cn(...classes) {
+    return classes.filter(Boolean).join(" ").trim();
+}

package/dist/cjs/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./modal"), exports);
+__exportStar(require("./styles"), exports);

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

@@ -0,0 +1,64 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FullscreenContainer;
+exports.useFullscreen = useFullscreen;
+const cn_1 = require("../../cn");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+function FullscreenContainer(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const containerRef = (0, react_2.useRef)(null);
+    useFullscreen(containerRef);
+    return (react_1.default.createElement("div", Object.assign({ ref: containerRef }, props, { className: (0, cn_1.cn)("fixed left-0 right-0 top-0 bottom-0", className) }), children));
+}
+function useFullscreen(ref) {
+    (0, react_2.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";
+}