@musecat/functionkit 1.0.0 → 1.0.2

package/index.ts

@@ -1,111 +1,106 @@
-// 컴포넌트
 export {
-  getViewportPortalRoot,
-  ViewportPortal
-} from "./components/ViewportPortal";
-// 쿠키
+	getViewportPortalRoot,
+	ViewportPortal,
+} from "./packages/components/ViewportPortal";
 export {
-  clearAllClientCookies,
-  clearClientCookie,
-  getClientCookie,
-  parseClientCookieNames,
-  setClientCookie
-} from "./cookie/cookie.shared";
-// 날짜/시간
+	clearAllClientCookies,
+	clearClientCookie,
+	getClientCookie,
+	parseClientCookieNames,
+	setClientCookie,
+} from "./packages/cookie/cookie.shared";
 export {
-  formatClientDate,
-  formatClientDateTime,
-  formatClientRelative,
-  formatClientTime
-} from "./datetime/dateTime.client";
+	formatClientDate,
+	formatClientDateTime,
+	formatClientRelative,
+	formatClientTime,
+} from "./packages/datetime/dateTime.client";
 export {
-  formatServerDate,
-  formatServerDateTime,
-  formatServerRelative,
-  formatServerTime
-} from "./datetime/dateTime.server";
-export {
-  addUtcDays,
-  format24HourTime,
-  formatDotDate,
-  formatKoreanTime,
-  formatLongDate,
-  formatRelativeText,
-  formatRemainingText,
-  formatTwelveHourTime,
-  formatUtcDateKey,
-  getUtcWeekdayIndex,
-  normalizeAppLocale,
-  parseUtcDateInput,
-  toDate,
-  toIntlLocale,
-  toUtcMidnight
-} from "./datetime/dateTime.shared";
+	formatServerDate,
+	formatServerDateTime,
+	formatServerRelative,
+	formatServerTime,
+} from "./packages/datetime/dateTime.server";
 export type {
-  AppLocale,
-  DateInput,
-  DatePreset,
-  TimePreset
-} from "./datetime/dateTime.shared";
-// hooks
-export { useAvoidKeyboard } from "./hooks/useAvoidKeyboard";
-export { useClientDateTime } from "./hooks/useClientDateTime";
-export { useDebounce } from "./hooks/useDebounce";
-export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
-export { useDoubleClick } from "./hooks/useDoubleClick";
-export { useGeolocation } from "./hooks/useGeolocation";
-export { useHasMounted } from "./hooks/useHasMounted";
-export { useIntersectionObserver } from "./hooks/useIntersectionObserver";
-export { useInterval } from "./hooks/useInterval";
-export { useKeyboardHeight } from "./hooks/useKeyboardHeight";
-export { useKeyboardListNavigation } from "./hooks/useKeyboardListNavigation";
-export { useLongPress } from "./hooks/useLongPress";
-export { usePreservedCallback } from "./hooks/usePreservedCallback";
-export { usePreservedReference } from "./hooks/usePreservedReference";
-export { useRefEffect } from "./hooks/useRefEffect";
-export { useRelativeDateTime } from "./hooks/useRelativeDateTime";
-export { useTimeout } from "./hooks/useTimeout";
-export { useToggleState } from "./hooks/useToggleState";
-export { useViewportHeight } from "./hooks/useViewportHeight";
-export { useViewportMatch } from "./hooks/useViewportMatch";
-// 유틸리티
+	AppLocale,
+	DateInput,
+	DatePreset,
+	TimePreset,
+} from "./packages/datetime/dateTime.shared";
 export {
-  getLocalStorage,
-  getSessionStorage,
-  removeLocalStorage,
-  removeSessionStorage,
-  updateLocalStorage,
-  updateSessionStorage
-} from "./utils/browserStorage";
-// 유틸리티
-export { buildContext } from "./utils/buildContext";
-export { getDeviceInfo } from "./utils/checkDevice";
-export type { DeviceInfo } from "./utils/checkDevice";
-export { NavigatorClipboard, NavigatorShare } from "./utils/clipboardShare";
-export type {
-  NavigatorClipboardProps,
-  NavigatorClipboardResult,
-  NavigatorShareProps,
-  NavigatorShareResult
-} from "./utils/clipboardShare.types";
+	addUtcDays,
+	format24HourTime,
+	formatDotDate,
+	formatKoreanTime,
+	formatLongDate,
+	formatRelativeText,
+	formatRemainingText,
+	formatTwelveHourTime,
+	formatUtcDateKey,
+	getUtcWeekdayIndex,
+	normalizeAppLocale,
+	parseUtcDateInput,
+	toDate,
+	toIntlLocale,
+	toUtcMidnight,
+} from "./packages/datetime/dateTime.shared";
+export { useAvoidKeyboard } from "./packages/hooks/useAvoidKeyboard";
+export { useClientDateTime } from "./packages/hooks/useClientDateTime";
+export { useDebounce } from "./packages/hooks/useDebounce";
+export { useDebouncedCallback } from "./packages/hooks/useDebouncedCallback";
+export { useDoubleClick } from "./packages/hooks/useDoubleClick";
+export { useGeolocation } from "./packages/hooks/useGeolocation";
+export { useHasMounted } from "./packages/hooks/useHasMounted";
+export { useIntersectionObserver } from "./packages/hooks/useIntersectionObserver";
+export { useInterval } from "./packages/hooks/useInterval";
+export { useKeyboardHeight } from "./packages/hooks/useKeyboardHeight";
+export { useKeyboardListNavigation } from "./packages/hooks/useKeyboardListNavigation";
+export { useLongPress } from "./packages/hooks/useLongPress";
+export { usePreservedCallback } from "./packages/hooks/usePreservedCallback";
+export { usePreservedReference } from "./packages/hooks/usePreservedReference";
+export { useRefEffect } from "./packages/hooks/useRefEffect";
+export { useRelativeDateTime } from "./packages/hooks/useRelativeDateTime";
+export { useTimeout } from "./packages/hooks/useTimeout";
+export { useToggleState } from "./packages/hooks/useToggleState";
+export { useViewportHeight } from "./packages/hooks/useViewportHeight";
+export { useViewportMatch } from "./packages/hooks/useViewportMatch";
+export {
+	getLocalStorage,
+	getSessionStorage,
+	removeLocalStorage,
+	removeSessionStorage,
+	updateLocalStorage,
+	updateSessionStorage,
+} from "./packages/utils/browserStorage";
+export { buildContext } from "./packages/utils/buildContext";
+export type { DeviceInfo } from "./packages/utils/checkDevice";
+export { getDeviceInfo } from "./packages/utils/checkDevice";
 export {
-  getFloatingHiddenTransform,
-  getFloatingMotionPreset,
-  getFloatingTransformOrigin
-} from "./utils/floatingMotion";
+	NavigatorClipboard,
+	NavigatorShare,
+} from "./packages/utils/clipboardShare";
 export type {
-  FloatingMotionMode,
-  FloatingMotionPreset,
-  FloatingPlacement
-} from "./utils/floatingMotion";
-// 유틸리티
-export { isEditableKeyboardTarget } from "./utils/keyboardTarget";
-export { mergeRefs } from "./utils/mergeRefs";
+	NavigatorClipboardProps,
+	NavigatorClipboardResult,
+	NavigatorShareProps,
+	NavigatorShareResult,
+} from "./packages/utils/clipboardShare.types";
+export type {
+	FloatingMotionMode,
+	FloatingMotionPreset,
+	FloatingPlacement,
+} from "./packages/utils/floatingMotion";
+export {
+	getFloatingHiddenTransform,
+	getFloatingMotionPreset,
+	getFloatingTransformOrigin,
+} from "./packages/utils/floatingMotion";
+export { isEditableKeyboardTarget } from "./packages/utils/keyboardTarget";
+export { mergeRefs } from "./packages/utils/mergeRefs";
 export {
-  buildSeenValue,
-  hasSeenKey,
-  parseSeen,
-  SEEN_STORAGE_KEY
-} from "./utils/seen";
-export { subscribeKeyboardHeight } from "./utils/subscribeKeyboardHeight";
-
+	buildSeenValue,
+	hasSeenKey,
+	parseSeen,
+	SEEN_STORAGE_KEY,
+} from "./packages/utils/seen";
+export { subscribeKeyboardHeight } from "./packages/utils/subscribeKeyboardHeight";

package/package.json

@@ -1,15 +1,29 @@
 {
-  "name": "@musecat/functionkit",
-  "version": "1.0.0",
-  "type": "module",
-  "main": "./index.ts",
-  "types": "./index.ts",
-  "exports": {
-    ".": "./index.ts",
-    "./*": "./*"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  }
+	"name": "@musecat/functionkit",
+	"version": "1.0.2",
+	"type": "module",
+	"main": "./index.ts",
+	"types": "./index.ts",
+	"exports": {
+		".": "./index.ts",
+		"./*": "./*"
+	},
+	"scripts": {
+		"lint": "biome check",
+		"format": "prettier --write . && biome format --write",
+		"test": "vitest run"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.5.4",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.2.0",
+		"@testing-library/user-event": "^14.6.1",
+		"jsdom": "^26.0.0",
+		"prettier": "^3.9.5",
+		"vitest": "^4.1.10"
+	}
 }

package/{components → packages/components}/ScrolltoTop.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 
 export function ScrolltoTop() {
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  });
+	useEffect(() => {
+		window.scrollTo(0, 0);
+	});
 }

package/{components → packages/components}/SwitchCase.tsx

@@ -1,15 +1,15 @@
 import type { ReactNode } from "react";
 
 type SwitchCaseProps<T extends string | number> = {
-  value: T;
-  cases: Partial<Record<T, ReactNode>>;
-  otherwise?: ReactNode;
+	value: T;
+	cases: Partial<Record<T, ReactNode>>;
+	otherwise?: ReactNode;
 };
 
 export function SwitchCase<T extends string | number>({
-  value,
-  cases,
-  otherwise = null,
+	value,
+	cases,
+	otherwise = null,
 }: SwitchCaseProps<T>) {
-  return (cases[value] ?? otherwise) as ReactNode;
+	return (cases[value] ?? otherwise) as ReactNode;
 }

package/packages/components/ViewportPortal.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+const VIEWPORT_PORTAL_ROOT_ID = "viewport-portal-root";
+
+export function getViewportPortalRoot() {
+	if (typeof document === "undefined") {
+		return null;
+	}
+
+	const existingRoot = document.getElementById(VIEWPORT_PORTAL_ROOT_ID);
+	if (existingRoot instanceof HTMLDivElement) {
+		return existingRoot;
+	}
+
+	const root = document.createElement("div");
+	root.id = VIEWPORT_PORTAL_ROOT_ID;
+	root.setAttribute("data-viewport-portal-root", "true");
+	root.style.cssText =
+		"position:fixed;inset:0;pointer-events:none;z-index:9999;";
+	document.body.appendChild(root);
+	return root;
+}
+
+type ViewportPortalProps = {
+	children: React.ReactNode;
+};
+
+export function ViewportPortal({ children }: ViewportPortalProps) {
+	const [root, setRoot] = useState<HTMLElement | null>(null);
+
+	useEffect(() => {
+		setRoot(getViewportPortalRoot());
+	}, []);
+
+	if (!root) return null;
+	return createPortal(children, root);
+}

package/packages/cookie/cookie.shared.ts

@@ -0,0 +1,138 @@
+"use client";
+
+const EXPIRED_COOKIE_DATE = "Thu, 01 Jan 1970 00:00:00 GMT";
+
+type CookieStoreLike = {
+	delete: (name: string) => Promise<void>;
+};
+
+type DocumentCookieRef = {
+	cookie: string;
+};
+
+type ClearClientCookieOptions = {
+	hostname?: string;
+	path?: string;
+	documentRef?: DocumentCookieRef;
+	cookieStore?: CookieStoreLike;
+};
+
+type ClearAllClientCookiesOptions = ClearClientCookieOptions & {
+	includeRoot?: boolean;
+	cookieString?: string;
+};
+
+function findClientCookie(
+	name: string,
+	documentRef: DocumentCookieRef,
+): string | undefined {
+	const parsed = parseClientCookie(documentRef.cookie);
+	return parsed[name];
+}
+
+function parseClientCookie(cookieString: string): Record<string, string> {
+	return cookieString
+		.split(";")
+		.map((pair) => pair.trim().split("=") as [string, string])
+		.reduce<Record<string, string>>((acc, [key, value]) => {
+			if (key) {
+				acc[key] = value;
+			}
+			return acc;
+		}, {});
+}
+
+export function parseClientCookieNames(cookieString: string): string[] {
+	return cookieString
+		.split(";")
+		.map((entry) => {
+			const eqPos = entry.indexOf("=");
+			return eqPos > -1 ? entry.slice(0, eqPos).trim() : entry.trim();
+		})
+		.filter(Boolean);
+}
+
+export function getClientCookie(name: string): string | undefined {
+	if (typeof document === "undefined") {
+		return undefined;
+	}
+
+	return findClientCookie(name, document);
+}
+
+export function setClientCookie(name: string, value: string, days?: number) {
+	if (typeof document === "undefined") {
+		return;
+	}
+
+	let expires = "";
+	if (days) {
+		const date = new Date();
+		date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+		expires = `; expires=${date.toUTCString()}`;
+	}
+
+	document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
+}
+
+export function clearClientCookie(
+	name: string,
+	options: ClearClientCookieOptions = {},
+): void {
+	const {
+		hostname = window.location.hostname,
+		path = "/",
+		documentRef = document,
+	} = options;
+
+	documentRef.cookie = `${name}=; expires=${EXPIRED_COOKIE_DATE}; path=${path}; domain=${hostname};`;
+}
+
+export function clearAllClientCookies(
+	options: ClearAllClientCookiesOptions = {},
+): string[] {
+	const {
+		documentRef = document,
+		cookieStore,
+		includeRoot = false,
+		cookieString,
+	} = options;
+
+	const entries = cookieString
+		? parseClientCookieNames(cookieString)
+		: documentRef.cookie
+				.split(/;\s*/)
+				.map((entry) => {
+					const eqPos = entry.indexOf("=");
+					return eqPos > -1 ? entry.slice(0, eqPos).trim() : entry.trim();
+				})
+				.filter(Boolean);
+
+	if (cookieStore) {
+		for (const name of entries) {
+			cookieStore.delete(name);
+		}
+		return entries;
+	}
+
+	const hostnameParts = window.location.hostname.split(".");
+	const { pathname } = window.location;
+
+	const paths = [pathname];
+	if (includeRoot) {
+		paths.unshift("/");
+	}
+
+	for (const name of entries) {
+		if (!name) continue;
+
+		for (const path of paths) {
+			for (let i = 0; i < hostnameParts.length; i++) {
+				const domain = hostnameParts.slice(i).join(".");
+				documentRef.cookie = `${name}=; expires=${EXPIRED_COOKIE_DATE}; path=${path}; domain=${domain};`;
+			}
+		}
+	}
+
+	return entries;
+}

package/packages/datetime/dateTime.client.ts

@@ -0,0 +1,108 @@
+import {
+	type DateInput,
+	type DatePreset,
+	format24HourTime,
+	formatDotDate,
+	formatKoreanTime,
+	formatLongDate,
+	formatRelativeText,
+	formatTwelveHourTime,
+	type TimePreset,
+	toDate,
+} from "./dateTime.shared";
+
+export function formatClientDate(
+	value: DateInput,
+	options: {
+		locale?: string;
+		timeZone?: string;
+		preset: DatePreset;
+	},
+): string {
+	const date = toDate(value);
+	if (!date) return "";
+
+	return options.preset === "dot"
+		? formatDotDate(date, options.timeZone)
+		: formatLongDate(date, options.locale, options.timeZone);
+}
+
+export function formatClientTime(
+	value: DateInput,
+	options: {
+		locale?: string;
+		timeZone?: string;
+		preset: TimePreset;
+	},
+): string {
+	const date = toDate(value);
+	if (!date) return "";
+
+	switch (options.preset) {
+		case "ko":
+			return formatKoreanTime(date, options.timeZone);
+		case "12h":
+			return formatTwelveHourTime(date, options.locale, options.timeZone);
+		case "24h-second":
+			return format24HourTime(date, {
+				includeSeconds: true,
+				timeZone: options.timeZone,
+			});
+		default:
+			return format24HourTime(date, { timeZone: options.timeZone });
+	}
+}
+
+export function formatClientDateTime(
+	value: DateInput,
+	options: {
+		locale?: string;
+		timeZone?: string;
+		datePreset?: DatePreset;
+		timePreset?: TimePreset;
+	},
+): string {
+	const dateText = formatClientDate(value, {
+		locale: options.locale,
+		timeZone: options.timeZone,
+		preset: options.datePreset ?? "long",
+	});
+	const timeText = formatClientTime(value, {
+		locale: options.locale,
+		timeZone: options.timeZone,
+		preset: options.timePreset ?? "24h-minute",
+	});
+	return dateText && timeText
+		? `${dateText} ${timeText}`
+		: dateText || timeText;
+}
+
+export function formatClientRelative(
+	value: DateInput,
+	options: {
+		locale?: string;
+		now?: DateInput;
+		maxRelativeDays?: number;
+		fallbackDatePreset?: DatePreset;
+	},
+): { text: string; isRelative: boolean } {
+	const date = toDate(value);
+	const now = toDate(options.now ?? Date.now());
+	if (!date || !now) {
+		return { text: "", isRelative: false };
+	}
+
+	const diffMs = Math.max(0, now.getTime() - date.getTime());
+	const maxRelativeMs = (options.maxRelativeDays ?? 7) * 24 * 60 * 60 * 1000;
+	if (diffMs > maxRelativeMs) {
+		return {
+			text: formatClientDate(date, {
+				locale: options.locale,
+				preset: options.fallbackDatePreset ?? "dot",
+			}),
+			isRelative: false,
+		};
+	}
+
+	return formatRelativeText(diffMs, options.locale);
+}

package/packages/datetime/dateTime.server.ts

@@ -0,0 +1,108 @@
+import {
+	type DateInput,
+	type DatePreset,
+	format24HourTime,
+	formatDotDate,
+	formatKoreanTime,
+	formatLongDate,
+	formatRelativeText,
+	formatTwelveHourTime,
+	type TimePreset,
+	toDate,
+} from "./dateTime.shared";
+
+export function formatServerDate(
+	value: DateInput,
+	options: {
+		locale?: string;
+		timeZone?: string;
+		preset: DatePreset;
+	},
+): string {
+	const date = toDate(value);
+	if (!date) return "";
+
+	return options.preset === "dot"
+		? formatDotDate(date, options.timeZone)
+		: formatLongDate(date, options.locale, options.timeZone);
+}
+
+export function formatServerTime(
+	value: DateInput,
+	options: {
+		locale?: string;
+		timeZone?: string;
+		preset: TimePreset;
+	},
+): string {
+	const date = toDate(value);
+	if (!date) return "";
+
+	switch (options.preset) {
+		case "ko":
+			return formatKoreanTime(date, options.timeZone);
+		case "12h":
+			return formatTwelveHourTime(date, options.locale, options.timeZone);
+		case "24h-second":
+			return format24HourTime(date, {
+				includeSeconds: true,
+				timeZone: options.timeZone,
+			});
+		default:
+			return format24HourTime(date, { timeZone: options.timeZone });
+	}
+}
+
+export function formatServerDateTime(
+	value: DateInput,
+	options: {
+		locale?: string;
+		timeZone?: string;
+		datePreset?: DatePreset;
+		timePreset?: TimePreset;
+	},
+): string {
+	const dateText = formatServerDate(value, {
+		locale: options.locale,
+		timeZone: options.timeZone,
+		preset: options.datePreset ?? "long",
+	});
+	const timeText = formatServerTime(value, {
+		locale: options.locale,
+		timeZone: options.timeZone,
+		preset: options.timePreset ?? "24h-minute",
+	});
+	return dateText && timeText
+		? `${dateText} ${timeText}`
+		: dateText || timeText;
+}
+
+export function formatServerRelative(
+	value: DateInput,
+	options: {
+		locale?: string;
+		now?: DateInput;
+		maxRelativeDays?: number;
+		fallbackDatePreset?: DatePreset;
+	},
+): { text: string; isRelative: boolean } {
+	const date = toDate(value);
+	const now = toDate(options.now ?? new Date());
+	if (!date || !now) {
+		return { text: "", isRelative: false };
+	}
+
+	const diffMs = Math.max(0, now.getTime() - date.getTime());
+	const maxRelativeMs = (options.maxRelativeDays ?? 7) * 24 * 60 * 60 * 1000;
+	if (diffMs > maxRelativeMs) {
+		return {
+			text: formatServerDate(date, {
+				locale: options.locale,
+				preset: options.fallbackDatePreset ?? "dot",
+			}),
+			isRelative: false,
+		};
+	}
+
+	return formatRelativeText(diffMs, options.locale);
+}