Overrides_LikeButtonSave.tsx

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

// localStorage에서 초기값 로드
const storedLikes = localStorage.getItem("likes")
const storedUserLiked = localStorage.getItem("userLiked")

const useStore = createStore({
    background: "green",
    likes: storedLikes ? Number(storedLikes) : 1000,
    userLiked: storedUserLiked === "true",
})

function persistStore(store) {
    localStorage.setItem("likes", store.likes.toString())
    localStorage.setItem("userLiked", store.userLiked.toString())
}

export function myOverride(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        return (
            <Component
                ref={ref}
                {...props}
                style={{
                    background: store.background,
                }}
                onClick={() => {
                    setStore({ background: "purple" })
                }}
            />
        )
    })
}

export function like(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        const handleClick = () => {
            const newLikes = store.userLiked ? 1000 : 1001
            const newUserLiked = !store.userLiked

            setStore({
                likes: newLikes,
                userLiked: newUserLiked,
            })

            persistStore({
                likes: newLikes,
                userLiked: newUserLiked,
            })
        }

        const variant = store.userLiked ? "liked" : "default"

        return (
            <Component
                ref={ref}
                {...props}
                onClick={handleClick}
                variant={variant}
            />
        )
    })
}

export function likeNumber(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store] = useStore()
        const formattedLikes = store.likes.toLocaleString()

        return <Component ref={ref} {...props} text={formattedLikes} />
    })
}

export function notification(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store] = useStore()

        const variant = store.userLiked ? "ruucm" : "default"

        return <Component ref={ref} {...props} variant={variant} />
    })
}