Framer에서 OS별로 버튼 출력여부 결정하기

Framer에서 제공하는 컴포넌트 중에서 스토어에서 다운받기 링크 버튼이 있다. 이때 굳이 이렇게 두개를 모두 띄우는 것보다 사용자의 OS에 맞춰서 출력해주는 편이 좋은데 이걸 결정하기 위해 framer의 code overrides를 이용해봤다.

import { Override } from "framer"

const getUserOS = () => {
    const userAgent = window.navigator.userAgent
    console.log(userAgent)
    if (/iPad|iPhone|iPod/.test(userAgent)) {
        return "iOS"
    } else if (/Android/.test(userAgent)) {
        return "Android"
    } else {
        return "Other"
    }
}

export const ButtonOverrideiOS: Override = () => {
    const userOS = getUserOS()

    if (userOS === "iOS") {
        return {
            initial: { opacity: 1 },
            animate: { opacity: 1 },
            exit: { opacity: 0 },
        }
    }

    return {
        initial: { opacity: 0 },
        animate: { opacity: 0 },
        exit: { opacity: 0 },
    }
}

export const ButtonOverrideAOS: Override = () => {
    const userOS = getUserOS()

    if (userOS === "Android") {
        return {
            initial: { opacity: 1 },
            animate: { opacity: 1 },
            exit: { opacity: 0 },
        }
    }

    return {
        initial: { opacity: 0 },
        animate: { opacity: 0 },
        exit: { opacity: 0 },
    }
}

일단 테스트용 코드라서 두개의 override를 각각 따로 export 했는데, 편의에 따라 합쳐서 사용하면 된다.