Overrides_Counter.tsx

import { forwardRef, type ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

// 공통 store 정의
const useStore = createStore({
    count: 0,
})

// 1. 버튼 클릭 시 count 증가
export function clickButton(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        return (
            <Component
                ref={ref}
                {...props}
                onClick={() => {
                    setStore({ count: store.count + 1 })
                }}
            />
        )
    })
}

// 2. 텍스트 컴포넌트에 count 표시
export function displayCount(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store] = useStore()

        return <Component ref={ref} {...props} text={String(store.count)} />
    })
}