refactor: select 컴포넌트 애니메이션 추가 (#ATR-603)

Atractorrr · Sep 5, 2024 · 3e18d30 · 3e18d30
1 parent 4ece1db
commit 3e18d30
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git a/packages/design-system/packages/core/src/components/select/Select.tsx b/packages/design-system/packages/core/src/components/select/Select.tsx
@@ -9,6 +9,7 @@ import {
 } from '@attraction/ds-hooks'
 import { ArrowFillDownOutline, CheckOutline } from '@attraction/icons'
 import { cn } from '@attraction/utils'
+import { AnimatePresence, motion } from 'framer-motion'
 import { forwardRefWithGeneric } from '../../core'
 import { Button } from '../button'
 import { Label } from '../label'
@@ -162,17 +163,33 @@ function Select<T extends string>(
         <ArrowFillDownOutline />
       </div>
       {createPortal(
-        isOpen && (
-          <div
-            className={cn(
-              selectOptionClassName,
-              isMobile && selectOptionClassNameWithMobileModifier,
-            )}
-            style={computeOptionPosition(inputBox, optionBox.height)}>
-            <ul ref={optionRef}>{children}</ul>
-            {isMobile && <Dimmed />}
-          </div>
-        ),
+        <AnimatePresence>
+          {isOpen && (
+            <div
+              className={cn(
+                selectOptionClassName,
+                isMobile && selectOptionClassNameWithMobileModifier,
+              )}
+              style={computeOptionPosition(inputBox, optionBox.height)}>
+              <motion.ul
+                ref={optionRef}
+                initial={{ opacity: 1 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ ease: 'easeInOut', duration: 0.1 }}>
+                {children}
+              </motion.ul>
+              {isMobile && (
+                <Dimmed
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ ease: 'easeInOut', duration: 0.1 }}
+                />
+              )}
+            </div>
+          )}
+        </AnimatePresence>,
         document.body,
       )}
     </SelectContext.Provider>

diff --git a/packages/design-system/packages/core/src/core/utils/forwardRefWithGeneric.ts b/packages/design-system/packages/core/src/core/utils/forwardRefWithGeneric.ts
@@ -1,9 +1,9 @@
 import React from 'react'
 
 export default function forwardRefWithGeneric<T, P = {}>(
-  render: (props: P, ref: React.Ref<T>) => React.ReactNode,
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode | null,
 ) {
-  return React.forwardRef(render) as (
-    props: P & React.RefAttributes<T>,
-  ) => React.ReactNode
+  return React.forwardRef<T, P>(render) as (
+    props: React.PropsWithoutRef<P> & React.RefAttributes<T>,
+  ) => React.ReactNode | null
 }