Fix: 바텀시트 초기 렌더링 시 애니메이션 적용 안 되는 문제 해결

Author: gustn99

src/components/BottomSheet/index.tsx

@@ -11,13 +11,17 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
 }) => {
 	const startY = useRef<number | null>(null);
 	const [initialRender, setInitialRender] = useState(true);
+	const [isRendered, setIsRendered] = useState(false);
 	const [currentTranslateY, setCurrentTranslateY] = useState(0);
 	const [isDragging, setIsDragging] = useState<boolean>(false);
 
 	useEffect(() => {
 		if (isOpenBottomSheet) {
 			setInitialRender(false);
+			setIsRendered(true);
 			setCurrentTranslateY(0); // 초기화
+		} else {
+			setIsRendered(false);
 		}
 	}, [isOpenBottomSheet]);
 
@@ -105,7 +109,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
 
 	return (
 		<BottomSheetWrapper
-			$isOpenBottomSheet={isOpenBottomSheet}
+			$isOpenBottomSheet={isRendered}
 			onClick={(e: React.MouseEvent) => {
 				// BottomSheet 외부를 클릭할 경우 BottomSheet 닫음
 				if (!isDragging && e.target === e.currentTarget) {
@@ -117,7 +121,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
 				onPointerDown={onPointerDown}
 				onTouchStart={onPointerDown}
 				$currentTranslateY={currentTranslateY}
-				$isOpenBottomSheet={isOpenBottomSheet}
+				$isOpenBottomSheet={isRendered}
 				$isHandlerVisible={isHandlerVisible}
 			>
 				{isHandlerVisible && <Handler />}

src/components/BottomSheet/styles.tsx

@@ -12,7 +12,7 @@ export const BottomSheetWrapper = styled.div<{ $isOpenBottomSheet: boolean }>`
 	visibility: ${({ $isOpenBottomSheet }) => ($isOpenBottomSheet ? 'visible' : 'hidden')};
 	transition:
 		opacity 0.2s ease-out,
-		visibility 0.2s ease-out;
+		visibility 0.3s ease-out;
 `;
 
 export const BottomSheetLayout = styled.div<{
@@ -36,7 +36,7 @@ export const BottomSheetLayout = styled.div<{
 		-50%,
 		${({ $currentTranslateY, $isOpenBottomSheet }) => ($isOpenBottomSheet ? `${$currentTranslateY}px` : '100%')}
 	);
-	transition: transform 0.3s ease-in-out;
+	transition: transform 0.3s;
 `;
 
 export const Handler = styled.hr`