refactor: 페르소나 메시지 애니메이션 구현

Author: ljh130334

src/app/(protected)/immersion/_components/PersonaMessage.tsx

@@ -21,6 +21,7 @@ export default function PersonaMessage({
 }: PersonaMessageProps) {
 	const [messageType, setMessageType] = useState<TimeMessageType>("start");
 	const [message, setMessage] = useState<string>("");
+	const [isAnimated, setIsAnimated] = useState(false);
 
 	useEffect(() => {
 		const updateMessage = () => {
@@ -39,6 +40,9 @@ export default function PersonaMessage({
 		// 초기 메시지 설정
 		updateMessage();
 
+		// 애니메이션 시작
+		setIsAnimated(true);
+
 		// 1분마다 메시지 업데이트 (필요에 따라 주기 조정)
 		const intervalId = setInterval(updateMessage, 60 * 1000);
 
@@ -55,22 +59,47 @@ export default function PersonaMessage({
 	};
 
 	return (
-		<div
-			className="s3 flex items-center justify-center whitespace-nowrap rounded-[999px] px-[14px] py-[10px] text-[#BDBDF5]"
-			style={{
-				background: "var(--Elevated-PointPriamry, rgba(107, 107, 225, 0.20))",
-				backdropFilter: "blur(30px)",
-			}}
-		>
-			<Image
-				src="/icons/onboarding/clap.svg"
-				alt="박수"
-				width={16}
-				height={15}
-				className="mr-1"
-				priority
-			/>
-			<span>{message}</span>
-		</div>
+		<>
+			<div
+				className={`s3 flex items-center justify-center whitespace-nowrap rounded-[999px] px-[14px] py-[10px] text-[#BDBDF5] float-up-animation ${isAnimated ? "animated" : ""}`}
+				style={{
+					background: "var(--Elevated-PointPriamry, rgba(107, 107, 225, 0.20))",
+					backdropFilter: "blur(30px)",
+				}}
+			>
+				<Image
+					src="/icons/onboarding/clap.svg"
+					alt="박수"
+					width={16}
+					height={15}
+					className="mr-1"
+					priority
+				/>
+				<span>{message}</span>
+			</div>
+
+			{/* 애니메이션 스타일 */}
+			<style jsx>{`
+				@keyframes floatUp {
+					0% {
+						opacity: 0;
+						transform: translateY(100px);
+					}
+					100% {
+						opacity: 1;
+						transform: translateY(0);
+					}
+				}
+
+				.float-up-animation {
+					opacity: 0;
+					transform: translateY(100px);
+				}
+
+				.float-up-animation.animated {
+					animation: floatUp 1s ease-out forwards;
+				}
+			`}</style>
+		</>
 	);
 }