안드로이드 이이콘 변경

frontend/src/hooks/useDraggablePanel.ts

@@ -9,6 +9,8 @@ export interface DraggablePosition {
 export interface UseDraggablePanelOptions {
   /** 마운트 후 패널 크기 기준 화면 중앙 배치 */
   centerOnMount?: boolean;
+  /** 콘텐츠 크기 변화·창 리사이즈 시 (드래그 전까지) 중앙 재정렬 */
+  recenterOnResize?: boolean;
   initialPosition?: DraggablePosition;
   panelRef?: RefObject<HTMLElement | null>;
 }
@@ -32,6 +34,7 @@ function estimateCenterPosition(
 export function useDraggablePanel(options: UseDraggablePanelOptions = {}) {
   const {
     centerOnMount = false,
+    recenterOnResize = false,
     initialPosition = DEFAULT_POS,
     panelRef: externalRef,
   } = options;
@@ -44,29 +47,42 @@ export function useDraggablePanel(options: UseDraggablePanelOptions = {}) {
   const [positionReady, setPositionReady] = useState(!centerOnMount);
   const [dragging, setDragging] = useState(false);
   const dragOrigin = useRef({ mx: 0, my: 0, px: 0, py: 0 });
-  const centeredOnce = useRef(false);
+  const movedByUser = useRef(false);
   const unbindDragRef = useRef<(() => void) | null>(null);
 
   useEffect(() => {
-    if (!centerOnMount || centeredOnce.current) return;
+    if (!centerOnMount) return;
     const el = panelRef.current;
     if (!el) return;
 
     const placeCenter = () => {
+      if (movedByUser.current) return;
       const w = el.offsetWidth || DEFAULT_CENTER_ESTIMATE.width;
       const h = el.offsetHeight || DEFAULT_CENTER_ESTIMATE.height;
       setPos({
         x: Math.max(8, (window.innerWidth - w) / 2),
         y: Math.max(8, (window.innerHeight - h) / 2),
       });
-      centeredOnce.current = true;
       setPositionReady(true);
     };
 
     placeCenter();
     const id = requestAnimationFrame(placeCenter);
-    return () => cancelAnimationFrame(id);
-  }, [centerOnMount, panelRef]);
+
+    if (!recenterOnResize) {
+      return () => cancelAnimationFrame(id);
+    }
+
+    const ro = new ResizeObserver(() => placeCenter());
+    ro.observe(el);
+    const onResize = () => placeCenter();
+    window.addEventListener('resize', onResize);
+    return () => {
+      cancelAnimationFrame(id);
+      ro.disconnect();
+      window.removeEventListener('resize', onResize);
+    };
+  }, [centerOnMount, recenterOnResize, panelRef]);
 
   const endDrag = useCallback(() => {
     unbindDragRef.current?.();
@@ -86,6 +102,7 @@ export function useDraggablePanel(options: UseDraggablePanelOptions = {}) {
       /* ignore */
     }
     const { x, y } = clientXYFromReact(e);
+    movedByUser.current = true;
     setDragging(true);
     dragOrigin.current = { mx: x, my: y, px: pos.x, py: pos.y };