Refactor: 바텀시트 애니메이션을 transition으로 수정

Author: gustn99

src/components/BottomSheet/styles.tsx

@@ -1,4 +1,4 @@
-import styled, { keyframes, css } from 'styled-components';
+import styled from 'styled-components';
 
 export const BottomSheetWrapper = styled.div<{ $isOpenBottomSheet: boolean }>`
 	position: fixed;
@@ -8,21 +8,18 @@ export const BottomSheetWrapper = styled.div<{ $isOpenBottomSheet: boolean }>`
 	height: 100%;
 	z-index: 999;
 	background-color: rgba(0, 0, 0, 0.3);
-	animation: ${(props) =>
-		props.$isOpenBottomSheet
-			? css`
-					${fadeIn} 0.2s ease-out forwards
-				`
-			: css`
-					${fadeOut} 0.2s ease-out forwards
-				`};
+	opacity: ${({ $isOpenBottomSheet }) => ($isOpenBottomSheet ? 1 : 0)};
+	visibility: ${({ $isOpenBottomSheet }) => ($isOpenBottomSheet ? 'visible' : 'hidden')};
+	transition:
+		opacity 0.2s ease-out,
+		visibility 0.2s ease-out;
 `;
 
-export const BottomSheetLayout = styled.div.attrs<{ $currentTranslateY: number }>(({ $currentTranslateY }) => ({
-	style: {
-		transform: `translate(-50%, ${$currentTranslateY}px)`,
-	},
-}))<{ $isOpenBottomSheet: boolean; $currentTranslateY: number; $isHandlerVisible: boolean }>`
+export const BottomSheetLayout = styled.div<{
+	$isOpenBottomSheet: boolean;
+	$currentTranslateY: number;
+	$isHandlerVisible: boolean;
+}>`
 	position: fixed;
 	bottom: 0;
 	flex-direction: column;
@@ -31,18 +28,15 @@ export const BottomSheetLayout = styled.div.attrs<{ $currentTranslateY: number }
 	left: 50%;
 	border-radius: 0.938rem 0.938rem 0 0;
 	background-color: ${({ theme }) => theme.colors.white};
-	padding-top: ${(props) => (props.$isHandlerVisible ? '1.3rem' : '0.9375rem')};
+	padding-top: ${({ $isHandlerVisible }) => ($isHandlerVisible ? '1.3rem' : '0.9375rem')};
 	z-index: 200;
 	user-select: none;
 	touch-action: none;
-	animation: ${(props) =>
-		props.$isOpenBottomSheet
-			? css`
-					${slideUp} 0.2s ease-out
-				`
-			: css`
-					${slideDown} 0.2s ease-out forwards
-				`};
+	transform: translate(
+		-50%,
+		${({ $currentTranslateY, $isOpenBottomSheet }) => ($isOpenBottomSheet ? `${$currentTranslateY}px` : '100%')}
+	);
+	transition: transform 0.3s ease-in-out;
 `;
 
 export const Handler = styled.hr`
@@ -55,39 +49,3 @@ export const Handler = styled.hr`
 	z-index: 300;
 	cursor: pointer;
 `;
-
-const fadeIn = keyframes`
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-`;
-
-const fadeOut = keyframes`
-	from {
-		opacity: 1;
-		visibility: visible;
-	}
-	to {
-		opacity: 0;
-		visibility: hidden;
-	}
-`;
-
-const slideUp = keyframes`
-  from {
-    transform: translate(-50%, 100%);
-  }
-  to {
-    transform: translate(-50%, 0);
-  }
-`;
-
-const slideDown = keyframes`
-  to {
-    transform: translate(-50%, 100%);
-		visibility: hidden;
-  }
-`;