@cher1shrxd/webview-stack-kit 1.0.0 → 1.0.2

package/dist/components/NavigationStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationStack.d.ts","sourceRoot":"","sources":["../../src/components/NavigationStack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAK/D,eAAO,MAAM,eAAe,GAAI,cAAc,iBAAiB,4CAyB9D,CAAC"}
+{"version":3,"file":"NavigationStack.d.ts","sourceRoot":"","sources":["../../src/components/NavigationStack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1C,eAAO,MAAM,eAAe,GAAI,cAAc,iBAAiB,4CAO9D,CAAC"}

package/dist/components/NavigationStack.js

@@ -1,22 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
 import { StackProvider } from "../context/stack-provider";
 import { NavigationStackView } from "./NavigationStackView";
-import { getSearchParams } from "../utils/get-search-params";
 export const NavigationStack = ({ children }) => {
-    const [dynamicPadding, setDynamicPadding] = useState({
-        paddingTop: 0,
-        paddingBottom: 0,
-    });
-    useEffect(() => {
-        const searchParams = getSearchParams();
-        const topPadding = Number(searchParams["top"] || 0);
-        const bottomPadding = Number(searchParams["bottom"] || 0);
-        setDynamicPadding({ paddingTop: topPadding, paddingBottom: bottomPadding });
-    }, []);
-    return (_jsxs(StackProvider, { children: [_jsx(NavigationStackView, {}), _jsx("div", { style: {
-                    paddingTop: dynamicPadding.paddingTop,
-                    paddingBottom: dynamicPadding.paddingBottom,
-                }, children: children })] }));
+    return (_jsxs(StackProvider, { children: [_jsx(NavigationStackView, {}), children] }));
 };

package/dist/components/NavigationStackView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationStackView.d.ts","sourceRoot":"","sources":["../../src/components/NavigationStackView.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,+CAoG/B,CAAC"}
+{"version":3,"file":"NavigationStackView.d.ts","sourceRoot":"","sources":["../../src/components/NavigationStackView.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,+CA4H/B,CAAC"}

package/dist/components/NavigationStackView.js

@@ -7,6 +7,20 @@ export const NavigationStackView = () => {
     const { stack, pop, remove } = useStack();
     const topScreenRef = useRef(null);
     const dragInfo = useRef(null);
+    useEffect(() => {
+        const handlePopState = (e) => {
+            e.preventDefault?.();
+            if (stack.length > 1) {
+                pop();
+                window.history.pushState(null, '', window.location.href);
+            }
+        };
+        window.history.pushState(null, '', window.location.href);
+        window.addEventListener('popstate', handlePopState);
+        return () => {
+            window.removeEventListener('popstate', handlePopState);
+        };
+    }, [stack.length, pop]);
     const handleDragEnd = useCallback(() => {
         if (!dragInfo.current?.isDragging)
             return;
@@ -35,9 +49,12 @@ export const NavigationStackView = () => {
         else {
             clientX = e.clientX;
         }
+        const distance = clientX - dragInfo.current.startX;
+        if (distance < 0)
+            return;
         dragInfo.current.lastX = clientX;
         if (topScreenRef.current) {
-            topScreenRef.current.style.transform = `translateX(${clientX - dragInfo.current.startX}px)`;
+            topScreenRef.current.style.transform = `translateX(${distance}px)`;
         }
     }, []);
     const handleDragStart = useCallback((e, index) => {
@@ -52,6 +69,10 @@ export const NavigationStackView = () => {
         else {
             clientX = e.clientX;
         }
+        // 화면 왼쪽 가장자리에서만 스와이프 시작 허용 (왼쪽 20% 이내)
+        const screenWidth = window.innerWidth;
+        if (clientX > screenWidth * 0.2)
+            return;
         dragInfo.current = {
             isDragging: true,
             startX: clientX,

package/dist/components/StackScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackScreen.d.ts","sourceRoot":"","sources":["../../src/components/StackScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,UAAU,EACV,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAiBrC,eAAO,MAAM,WAAW;;UAGd,SAAS;WACR,MAAM;gBACD,MAAM;oBACF,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;iBACvB,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;0DA8ElE,CAAC"}
+{"version":3,"file":"StackScreen.d.ts","sourceRoot":"","sources":["../../src/components/StackScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,UAAU,EACV,UAAU,EACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgBrC,eAAO,MAAM,WAAW;;UAGd,SAAS;WACR,MAAM;gBACD,MAAM;oBACF,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;iBACvB,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;0DAwDlE,CAAC"}

package/dist/components/StackScreen.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect, forwardRef, useRef, useLayoutEffect, } from "react";
-import { getSearchParams } from "../utils/get-search-params";
+import { useState, useEffect, forwardRef, useRef, } from "react";
 const stackScreenStyle = {
     position: "absolute",
     top: 0,
@@ -16,21 +15,8 @@ const stackScreenStyle = {
 };
 export const StackScreen = forwardRef(({ item, index, totalCount, onExitComplete, onDragStart, ...rest }, ref) => {
     const [isMounted, setIsMounted] = useState(false);
-    const [dynamicPadding, setDynamicPadding] = useState({
-        paddingTop: 0,
-        paddingBottom: 0,
-    });
     const isExiting = item.transition === "pop";
     const containerRef = useRef(null);
-    useLayoutEffect(() => {
-        const elList = containerRef.current?.querySelectorAll(".stack-view");
-        if (!elList)
-            return;
-        elList.forEach((el) => {
-            el.style.paddingTop = `${dynamicPadding.paddingTop}px`;
-            el.style.paddingBottom = `${dynamicPadding.paddingBottom}px`;
-        });
-    }, [dynamicPadding.paddingTop, dynamicPadding.paddingBottom]);
     useEffect(() => {
         const frame = requestAnimationFrame(() => {
             setIsMounted(true);
@@ -45,13 +31,6 @@ export const StackScreen = forwardRef(({ item, index, totalCount, onExitComplete
             return () => clearTimeout(timer);
         }
     }, [isExiting, item.id, onExitComplete]);
-    useEffect(() => {
-        const searchParams = getSearchParams();
-        setDynamicPadding({
-            paddingTop: Number(searchParams["top"] || 0),
-            paddingBottom: Number(searchParams["bottom"] || 0),
-        });
-    }, []);
     const isTop = index === totalCount - 1;
     const style = {
         ...stackScreenStyle,

package/dist/context/stack-reducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack-reducer.d.ts","sourceRoot":"","sources":["../../src/context/stack-reducer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAElD,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,EAAE,QAAQ,WAAW,KAAG,UAqBrE,CAAA"}
+{"version":3,"file":"stack-reducer.d.ts","sourceRoot":"","sources":["../../src/context/stack-reducer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAElD,eAAO,MAAM,YAAY,GAAI,OAAO,UAAU,EAAE,QAAQ,WAAW,KAAG,UAoBrE,CAAA"}

package/dist/context/stack-reducer.js

@@ -18,5 +18,4 @@ export const stackReducer = (state, action) => {
                 stack: state.stack.filter(item => item.id !== action.id),
             };
     }
-    return state;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cher1shrxd/webview-stack-kit",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",