From f0bbd513c1d7c81272d6f833664bc12339bde239 Mon Sep 17 00:00:00 2001
From: healtheloper <super0872@naver.com>
Date: Thu, 14 Dec 2023 17:54:10 +0900
Subject: [PATCH] =?UTF-8?q?PanelStack=20=EC=9D=98=20Push=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=EC=9D=84=20=EB=B3=80=EA=B2=BD=ED=96=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/PanelStack/PanelStack.tsx  | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/co-design-core/src/components/PanelStack/PanelStack.tsx b/packages/co-design-core/src/components/PanelStack/PanelStack.tsx
index f92a6231..9fd09ab3 100644
--- a/packages/co-design-core/src/components/PanelStack/PanelStack.tsx
+++ b/packages/co-design-core/src/components/PanelStack/PanelStack.tsx
@@ -78,27 +78,23 @@ export const PanelStack = <T extends Panel<object>>({
   const [panels, { append, pop }] = useList(initialPanel ? [initialPanel] : []);
 
   const [mount, toggleMount] = useToggle(true);
-
   const handlePushPanel = useCallback(
     (panel: T) => {
-      onPush?.(panel);
-      append(panel);
       toggleMount(false);
-      pushAnimate();
+      pushAnimate(panel);
     },
     [onPush, append, toggleMount],
   );
 
-  const handlePopPanel = useCallback(
-    (panel: T) => {
-      toggleMount(false);
-      popAnimate();
-    },
-    [onPop, pop],
-  );
+  const handlePopPanel = useCallback(() => {
+    toggleMount(false);
+    popAnimate();
+  }, [onPop, pop]);
 
-  const [pushAnimate] = useTimeoutFn(() => {
+  const [pushAnimate] = useTimeoutFn((panel) => {
     toggleMount(true);
+    onPush?.(panel);
+    append(panel);
   }, transitionDuration);
 
   const [popAnimate] = useTimeoutFn(() => {
@@ -123,7 +119,7 @@ export const PanelStack = <T extends Panel<object>>({
                 <>
                   <Group spacing="small" align="center" className={classes.header}>
                     {index !== 0 && (
-                      <IconButton variant="text" color="dark" size="small" className={classes.back} onClick={() => handlePopPanel(panel)}>
+                      <IconButton variant="text" color="dark" size="small" className={classes.back} onClick={() => handlePopPanel()}>
                         <ArrowLeft />
                       </IconButton>
                     )}