From 8b45362a00bc017a0c15589626ae98fa26609140 Mon Sep 17 00:00:00 2001
From: Macbook <macbook@172-11-15-212.lightspeed.chrlnc.sbcglobal.net>
Date: Mon, 15 Jun 2026 17:58:55 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=88=EB=93=9C=EB=A1=9C=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EC=9D=B4=EC=BD=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/AppDownloadModal.tsx  |  3 ++-
 frontend/src/components/AppPopup.tsx          |  5 +++-
 .../src/components/DraggableModalFrame.tsx    |  4 +++
 .../components/icons/PlatformBrandIcons.tsx   | 26 +++++++++++++++---
 frontend/src/hooks/useDraggablePanel.ts       | 27 +++++++++++++++----
 5 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/AppDownloadModal.tsx b/frontend/src/components/AppDownloadModal.tsx
index cd285c6..ec55e31 100644
--- a/frontend/src/components/AppDownloadModal.tsx
+++ b/frontend/src/components/AppDownloadModal.tsx
@@ -609,7 +609,7 @@ const DesktopTab: React.FC<{ canBuildDesktop: boolean }> = ({ canBuildDesktop })
 };
 
 const AppDownloadModal: React.FC<Props> = ({ onClose, canBuildDesktop = false }) => {
-  const [tab, setTab] = useState<TabId>('mobile');
+  const [tab, setTab] = useState<TabId>('desktop');
 
   return (
     <DraggableModalFrame
@@ -619,6 +619,7 @@ const AppDownloadModal: React.FC<Props> = ({ onClose, canBuildDesktop = false })
       badge={tab === 'mobile' ? 'Mobile' : 'Desktop'}
       width={480}
       dialogClassName="sp-modal app-download-modal"
+      recenterOnResize
     >
       <div className="app-download-tabs" role="tablist" aria-label="다운로드 종류">
         <button
diff --git a/frontend/src/components/AppPopup.tsx b/frontend/src/components/AppPopup.tsx
index 6063506..6c63f2d 100644
--- a/frontend/src/components/AppPopup.tsx
+++ b/frontend/src/components/AppPopup.tsx
@@ -24,6 +24,8 @@ export interface AppPopupProps {
   overlayClassName?: string;
   bodyClassName?: string;
   centered?: boolean;
+  /** 콘텐츠 크기 변화·창 리사이즈 시 (드래그 전까지) 중앙 재정렬 */
+  recenterOnResize?: boolean;
   zIndex?: number;
   closeOnBackdrop?: boolean;
   backdrop?: boolean;
@@ -48,6 +50,7 @@ export const AppPopup: React.FC<AppPopupProps> = ({
   overlayClassName,
   bodyClassName = 'app-popup-body',
   centered = true,
+  recenterOnResize = false,
   zIndex = 9999,
   closeOnBackdrop = true,
   backdrop = false,
@@ -68,7 +71,7 @@ export const AppPopup: React.FC<AppPopupProps> = ({
     headerTouchStyle,
     panelStyle,
     headerCursor,
-  } = useDraggablePanel({ centerOnMount: centered, initialPosition });
+  } = useDraggablePanel({ centerOnMount: centered, recenterOnResize, initialPosition });
 
   const overlayCls = [
     'app-popup-overlay',
diff --git a/frontend/src/components/DraggableModalFrame.tsx b/frontend/src/components/DraggableModalFrame.tsx
index 4ce08b0..cda5461 100644
--- a/frontend/src/components/DraggableModalFrame.tsx
+++ b/frontend/src/components/DraggableModalFrame.tsx
@@ -16,6 +16,8 @@ export interface DraggableModalFrameProps {
   zIndex?: number;
   width?: number | string;
   closeOnBackdrop?: boolean;
+  /** 콘텐츠 크기 변화 시 (드래그 전까지) 중앙 재정렬 */
+  recenterOnResize?: boolean;
 }
 
 export const DraggableModalFrame: React.FC<DraggableModalFrameProps> = ({
@@ -30,6 +32,7 @@ export const DraggableModalFrame: React.FC<DraggableModalFrameProps> = ({
   zIndex = 1000,
   width,
   closeOnBackdrop = true,
+  recenterOnResize = false,
 }) => (
   <AppPopup
     onClose={onClose}
@@ -44,6 +47,7 @@ export const DraggableModalFrame: React.FC<DraggableModalFrameProps> = ({
     backdrop
     closeOnBackdrop={closeOnBackdrop}
     centered
+    recenterOnResize={recenterOnResize}
   >
     {children}
   </AppPopup>
diff --git a/frontend/src/components/icons/PlatformBrandIcons.tsx b/frontend/src/components/icons/PlatformBrandIcons.tsx
index e65dd6e..8ab7c41 100644
--- a/frontend/src/components/icons/PlatformBrandIcons.tsx
+++ b/frontend/src/components/icons/PlatformBrandIcons.tsx
@@ -36,7 +36,7 @@ export const WindowsLogo: React.FC<{ size?: number; className?: string }> = ({
   </svg>
 );
 
-/** Android 로봇 로고 — 공식 그린 (#3DDC84) */
+/** Android 로봇 로고 — 머리·몸통·양팔·양다리 (공식 그린 #A4C639/#8BC34A 톤) */
 export const AndroidLogo: React.FC<{ size?: number; className?: string }> = ({
   size = 22,
   className,
@@ -45,11 +45,31 @@ export const AndroidLogo: React.FC<{ size?: number; className?: string }> = ({
     width={size}
     height={size}
     viewBox="0 0 24 24"
-    fill="#3ddc84"
+    fill="none"
     className={className}
     aria-hidden
   >
-    <path d="M17.6 9.48l1.84-3.18a.38.38 0 0 0-.66-.38l-1.86 3.22a11.4 11.4 0 0 0-9.84 0L5.22 5.92a.38.38 0 1 0-.66.38L6.4 9.48A10.78 10.78 0 0 0 1 18h22a10.78 10.78 0 0 0-5.4-8.52zM7 15.25a1.25 1.25 0 1 1 1.25-1.25A1.25 1.25 0 0 1 7 15.25zm10 0A1.25 1.25 0 1 1 18.25 14 1.25 1.25 0 0 1 17 15.25z" />
+    {/* 안테나 */}
+    <g stroke="#9bcf4e" strokeWidth="0.95" strokeLinecap="round">
+      <line x1="8.7" y1="2.9" x2="9.9" y2="4.9" />
+      <line x1="15.3" y1="2.9" x2="14.1" y2="4.9" />
+    </g>
+    {/* 머리(돔) */}
+    <path
+      d="M6.4 9.2C6.4 6.05 8.9 3.7 12 3.7s5.6 2.35 5.6 5.5z"
+      fill="#9bcf4e"
+    />
+    {/* 눈 */}
+    <circle cx="9.7" cy="6.6" r="0.72" fill="#ffffff" />
+    <circle cx="14.3" cy="6.6" r="0.72" fill="#ffffff" />
+    {/* 몸통 */}
+    <rect x="6.5" y="9.1" width="11" height="8.5" rx="1.3" fill="#9bcf4e" />
+    {/* 양팔 */}
+    <rect x="3.3" y="9.7" width="2.3" height="6.4" rx="1.15" fill="#9bcf4e" />
+    <rect x="18.4" y="9.7" width="2.3" height="6.4" rx="1.15" fill="#9bcf4e" />
+    {/* 양다리 */}
+    <rect x="8.3" y="16.7" width="2.3" height="4.4" rx="1.15" fill="#9bcf4e" />
+    <rect x="13.4" y="16.7" width="2.3" height="4.4" rx="1.15" fill="#9bcf4e" />
   </svg>
 );
 
diff --git a/frontend/src/hooks/useDraggablePanel.ts b/frontend/src/hooks/useDraggablePanel.ts
index 7ba0e63..86c2d1a 100644
--- a/frontend/src/hooks/useDraggablePanel.ts
+++ b/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 };