fix: soften todo sheet view transitions

Author: dynojun

src/feature/todo/todoBottomSheet/TodoBottomSheet.tsx

@@ -37,7 +37,7 @@ const TodoBottomSheetWrapper = ({ isOpen, onOpen, children }: TodoBottomSheetWra
 
   return (
     <>
-      <BottomSheet isOpen={isOpen} showSheet={onOpen} closeSheet={handleCloseSheet} height="auto" animateHeight={false}>
+      <BottomSheet isOpen={isOpen} showSheet={onOpen} closeSheet={handleCloseSheet}>
         {children}
       </BottomSheet>
 

src/feature/todo/todoBottomSheet/components/shared/stackView/StackView.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
 import { cn } from '@/shared/lib/utils';
 
 interface StackViewProps {
@@ -13,12 +14,29 @@ interface StackViewProps {
 
 /**
  * 스택 뷰 컴포넌트
- * 바텀시트 내부 화면을 즉시 전환합니다.
+ * 바텀시트 위치를 유지하며 짧은 크로스페이드로 내부 화면을 전환합니다.
  */
-export const StackView = ({ viewKey, children, className }: StackViewProps) => (
-  <div data-view={viewKey} className={cn('h-full transform-none transition-none animate-none', className)}>
-    {children}
-  </div>
-);
+export const StackView = ({ viewKey, children, className }: StackViewProps) => {
+  const shouldReduceMotion = useReducedMotion();
+  const duration = shouldReduceMotion ? 0 : 0.15;
+
+  return (
+    <div className={cn('relative h-full overflow-hidden', className)}>
+      <AnimatePresence initial={false}>
+        <motion.div
+          key={viewKey}
+          data-view={viewKey}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration, ease: 'easeOut' }}
+          className="absolute inset-0 flex h-full flex-col"
+        >
+          {children}
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+};
 
 export default StackView;

src/shared/components/feedBack/BottomSheet.tsx

@@ -218,21 +218,15 @@ const BottomSheetProvider = ({
 };
 
 // Root 컴포넌트 (오버레이 + 시트 컨테이너)
-const BottomSheetRoot = ({ children, animateHeight }: { children: React.ReactNode; animateHeight: boolean }) => {
+const BottomSheetRoot = ({ children }: { children: React.ReactNode }) => {
   const { isOpen, closeSheet, springHeight, snapPoints, heightMode, contentHeight, autoSpringHeight } =
     useBottomSheetContext();
 
   const isAutoHeight = heightMode === 'auto';
   const isMeasured = contentHeight > 0;
 
-  // auto 모드: 측정 전에는 'auto', 측정 후에는 설정에 따라 즉시 또는 스프링으로 높이 반영
-  const resolvedHeight = isAutoHeight
-    ? isMeasured
-      ? animateHeight
-        ? autoSpringHeight
-        : contentHeight
-      : 'auto'
-    : springHeight;
+  // auto 모드: 측정 전에는 'auto', 측정 후에는 스프링 애니메이션 적용
+  const resolvedHeight = isAutoHeight ? (isMeasured ? autoSpringHeight : 'auto') : springHeight;
 
   return (
     <AnimatePresence>
@@ -260,13 +254,9 @@ const BottomSheetRoot = ({ children, animateHeight }: { children: React.ReactNod
               overflow: 'hidden',
               paddingBottom: 'env(safe-area-inset-bottom)',
             }}
-            initial={animateHeight ? { height: 0 } : false}
-            animate={
-              animateHeight
-                ? { height: isAutoHeight ? (isMeasured ? contentHeight : 'auto') : snapPoints.half }
-                : undefined
-            }
-            exit={animateHeight ? { height: 0 } : undefined}
+            initial={{ height: 0 }}
+            animate={{ height: isAutoHeight ? (isMeasured ? contentHeight : 'auto') : snapPoints.half }}
+            exit={{ height: 0 }}
             className={`fixed bottom-0 left-1/2 -translate-x-1/2 bg-bg-elevated max-w-md w-full rounded-t-lg ${Z_INDEX.SHEET}`}
           >
             <AutoHeightContent>{children}</AutoHeightContent>
@@ -369,20 +359,17 @@ export const BottomSheet = ({
   showSheet,
   closeSheet,
   height,
-  animateHeight = true,
 }: {
   children: React.ReactNode;
   isOpen: boolean;
   showSheet: () => void;
   closeSheet: () => void;
   /** 높이 설정: 'auto' | '{x}px' | '{x}%' (기본값: '55%') */
   height?: BottomSheetHeight;
-  /** 열림 및 콘텐츠 높이 변경 시 높이 애니메이션 적용 여부 */
-  animateHeight?: boolean;
 }) => {
   return (
     <BottomSheetProvider isOpen={isOpen} showSheet={showSheet} closeSheet={closeSheet} heightMode={height}>
-      <BottomSheetRoot animateHeight={animateHeight}>{children}</BottomSheetRoot>
+      <BottomSheetRoot>{children}</BottomSheetRoot>
     </BottomSheetProvider>
   );
 };