lynx-console 0.4.0 → 0.6.0

package/src/components/BottomSheet.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, useEffect, useState } from "@lynx-js/react";
 import type { BaseTouchEvent, Target } from "@lynx-js/types";
+import { useKeyboardHeight } from "../hooks/useKeyboardHeight";
 import { useThemeColors } from "../styles/ThemeContext";
 import { duration, fontWeight } from "../styles/theme";
 import "./BottomSheet.css";
@@ -41,6 +42,7 @@ export default function BottomSheet({
   );
   const [isOpening, setIsOpening] = useState(true);
   const [isClosing, setIsClosing] = useState(false);
+  const keyboardHeight = useKeyboardHeight();
 
   // 닫기 애니메이션 처리
   const handleClose = () => {
@@ -114,12 +116,21 @@ export default function BottomSheet({
           catchtap={() => {}}
           style={{
             background: colors.bg.layerFloating,
-            height: `${isDragging ? tempHeight : sheetHeight}px`,
+            height: `${
+              keyboardHeight > 0
+                ? Math.min(
+                    MAX_HEIGHT,
+                    (isDragging ? tempHeight : sheetHeight) + keyboardHeight,
+                  )
+                : isDragging
+                  ? tempHeight
+                  : sheetHeight
+            }px`,
             transform:
               isOpening || isClosing ? "translateY(100%)" : "translateY(0)",
             transition: isDragging
               ? "none"
-              : `transform ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`,
+              : `transform ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1), height ${duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`,
           }}
         >
           {/* catchtap: 이벤트 버블링 차단 */}
@@ -150,7 +161,10 @@ export default function BottomSheet({
           <view
             className="bs-body"
             style={{
-              paddingBottom: safeAreaInsetBottom,
+              paddingBottom:
+                keyboardHeight > 0
+                  ? `${keyboardHeight}px`
+                  : safeAreaInsetBottom,
             }}
           >
             {children}

package/src/components/FloatingButton.tsx

@@ -1,5 +1,8 @@
 import type { ReactNode } from "@lynx-js/react";
-import { useLongPressDrag } from "../hooks/useLongPressDrag";
+import {
+  type InitialPosition,
+  useLongPressDrag,
+} from "../hooks/useLongPressDrag";
 import { useThemeColors } from "../styles/ThemeContext";
 import { duration } from "../styles/theme";
 import "./FloatingButton.css";
@@ -7,6 +10,7 @@ import "./FloatingButton.css";
 interface FloatingButtonProps {
   bindtap: () => void;
   children: ReactNode;
+  initialPosition?: InitialPosition;
 }
 
 const SHINE_STYLES = {
@@ -26,10 +30,16 @@ const SHINE_STYLES = {
   },
 } as const;
 
-export const FloatingButton = ({ bindtap, children }: FloatingButtonProps) => {
+export const FloatingButton = ({
+  bindtap,
+  children,
+  initialPosition,
+}: FloatingButtonProps) => {
   const colors = useThemeColors();
-  const { phase, right, bottom, clearTimer, handlers } =
-    useLongPressDrag(bindtap);
+  const { phase, positionStyle, clearTimer, handlers } = useLongPressDrag(
+    bindtap,
+    { initialPosition },
+  );
 
   const handleReload = () => {
     try {
@@ -48,8 +58,7 @@ export const FloatingButton = ({ bindtap, children }: FloatingButtonProps) => {
       className={"fb-wrapper"}
       consume-slide-event={[[-180, 180]]}
       style={{
-        right: `${right}px`,
-        bottom: `${bottom}px`,
+        ...positionStyle,
         transform: isDragging ? "scale(1.05)" : "scale(1)",
         transition: `transform ${duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`,
       }}

package/src/hooks/useKeyboardHeight.ts

@@ -0,0 +1,14 @@
+import { useLynxGlobalEventListener, useState } from "@lynx-js/react";
+
+export function useKeyboardHeight() {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useLynxGlobalEventListener(
+    "keyboardstatuschanged",
+    (status: "on" | "off", height: number) => {
+      setKeyboardHeight(status === "on" ? height : 0);
+    },
+  );
+
+  return keyboardHeight;
+}

package/src/hooks/useLongPressDrag.ts

@@ -7,19 +7,86 @@ const MOVE_THRESHOLD = 5;
 const DEFAULT_RIGHT = 16;
 const DEFAULT_BOTTOM = 84;
 
-let savedRight = DEFAULT_RIGHT;
-let savedBottom = DEFAULT_BOTTOM;
+type VerticalAxis = "top" | "bottom";
+type HorizontalAxis = "left" | "right";
+
+export interface InitialPosition {
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+}
+
+interface ResolvedAnchors {
+  vertical: VerticalAxis;
+  horizontal: HorizontalAxis;
+  x: number;
+  y: number;
+}
+
+function resolveAnchors(initial?: InitialPosition): ResolvedAnchors {
+  // top/left이 명시되면 그것이 anchor가 돼요. 둘 다 명시되면 top/left가 이겨요.
+  const vertical: VerticalAxis = initial?.top !== undefined ? "top" : "bottom";
+  const horizontal: HorizontalAxis =
+    initial?.left !== undefined ? "left" : "right";
+
+  const y =
+    vertical === "top"
+      ? (initial?.top ?? 0)
+      : (initial?.bottom ?? DEFAULT_BOTTOM);
+  const x =
+    horizontal === "left"
+      ? (initial?.left ?? 0)
+      : (initial?.right ?? DEFAULT_RIGHT);
+
+  return { vertical, horizontal, x, y };
+}
+
+interface SavedState {
+  vertical: VerticalAxis;
+  horizontal: HorizontalAxis;
+  x: number;
+  y: number;
+}
+
+let saved: SavedState | null = null;
+
+interface UseLongPressDragOptions {
+  initialPosition?: InitialPosition;
+}
 
-export function useLongPressDrag(onTap: () => void) {
-  const [right, setRight] = useState(savedRight);
-  const [bottom, setBottom] = useState(savedBottom);
+export function useLongPressDrag(
+  onTap: () => void,
+  options?: UseLongPressDragOptions,
+) {
+  const anchors = resolveAnchors(options?.initialPosition);
+
+  // 저장된 위치는 anchor 조합이 동일할 때만 복원해요.
+  const snapshot = saved;
+  let initX = anchors.x;
+  let initY = anchors.y;
+  if (
+    snapshot !== null &&
+    snapshot.vertical === anchors.vertical &&
+    snapshot.horizontal === anchors.horizontal
+  ) {
+    initX = snapshot.x;
+    initY = snapshot.y;
+  }
+
+  const [x, setX] = useState(initX);
+  const [y, setY] = useState(initY);
   const [phase, setPhase] = useState<"idle" | "dragging" | "releasing">("idle");
-  const [tempRight, setTempRight] = useState(savedRight);
-  const [tempBottom, setTempBottom] = useState(savedBottom);
+  const [tempX, setTempX] = useState(initX);
+  const [tempY, setTempY] = useState(initY);
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const draggingRef = useRef(false);
-  const startRef = useRef({ x: 0, y: 0, r: 0, b: 0 });
+  const startRef = useRef({ x: 0, y: 0, ax: 0, ay: 0 });
+
+  // anchor 방향에 따라 드래그 부호 결정. right/bottom anchor면 드래그 방향과 값 변화가 반대.
+  const xSign = anchors.horizontal === "right" ? -1 : 1;
+  const ySign = anchors.vertical === "bottom" ? -1 : 1;
 
   const clearTimer = () => {
     if (timerRef.current) {
@@ -32,16 +99,16 @@ export function useLongPressDrag(onTap: () => void) {
     startRef.current = {
       x: e.detail.x,
       y: e.detail.y,
-      r: right,
-      b: bottom,
+      ax: x,
+      ay: y,
     };
     draggingRef.current = false;
 
     timerRef.current = setTimeout(() => {
       draggingRef.current = true;
       setPhase("dragging");
-      setTempRight(right);
-      setTempBottom(bottom);
+      setTempX(x);
+      setTempY(y);
     }, LONG_PRESS_DURATION);
   };
 
@@ -58,19 +125,22 @@ export function useLongPressDrag(onTap: () => void) {
 
     if (!draggingRef.current) return;
 
-    // right/bottom 기준이므로 방향 반전
-    setTempRight(startRef.current.r - dx);
-    setTempBottom(startRef.current.b - dy);
+    setTempX(startRef.current.ax + xSign * dx);
+    setTempY(startRef.current.ay + ySign * dy);
   };
 
   const handleTouchEnd = () => {
     clearTimer();
 
     if (draggingRef.current) {
-      setRight(tempRight);
-      setBottom(tempBottom);
-      savedRight = tempRight;
-      savedBottom = tempBottom;
+      setX(tempX);
+      setY(tempY);
+      saved = {
+        vertical: anchors.vertical,
+        horizontal: anchors.horizontal,
+        x: tempX,
+        y: tempY,
+      };
       setPhase("releasing");
       draggingRef.current = false;
       setTimeout(() => setPhase("idle"), 300);
@@ -80,11 +150,17 @@ export function useLongPressDrag(onTap: () => void) {
   };
 
   const isDragging = phase === "dragging";
+  const currentX = isDragging ? tempX : x;
+  const currentY = isDragging ? tempY : y;
+
+  const positionStyle = {
+    [anchors.horizontal]: `${currentX}px`,
+    [anchors.vertical]: `${currentY}px`,
+  } as { top?: string; left?: string; right?: string; bottom?: string };
 
   return {
     phase,
-    right: isDragging ? tempRight : right,
-    bottom: isDragging ? tempBottom : bottom,
+    positionStyle,
     clearTimer,
     handlers: {
       catchtouchstart: handleTouchStart,

package/src/index.tsx

@@ -25,6 +25,12 @@ export interface LynxConsoleProps {
   theme?: "light" | "dark";
   safeAreaInsetBottom?: string;
   customTabs?: CustomTab[];
+  initialPosition?: {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+  };
 }
 
 interface FcpMetric {
@@ -40,7 +46,12 @@ interface MetricFcpEntry {
 
 const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
   (
-    { theme = "light", safeAreaInsetBottom = "50px", customTabs },
+    {
+      theme = "light",
+      safeAreaInsetBottom = "50px",
+      customTabs,
+      initialPosition,
+    },
     ref: ForwardedRef<LynxConsoleHandle>,
   ) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -94,7 +105,10 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
             color: colors.fg.neutral,
           }}
         >
-          <FloatingButton bindtap={handleOpenBottomSheet}>
+          <FloatingButton
+            bindtap={handleOpenBottomSheet}
+            initialPosition={initialPosition}
+          >
             <text
               className="fb-title t4"
               style={{ fontWeight: "400", color: colors.palette.staticWhite }}