Recoil

// Recoil Atom 정의 - 상태의 최소 단위
import { atom } from 'recoil';

// 사용자 정보 Atom
export const userState = atom({
    key: 'userState',  // 고유 식별자 (필수)
    default: {
        name: '',
        email: '',
        isLoggedIn: false
    }
});

// 장바구니 Atom
export const cartState = atom({
    key: 'cartState',
    default: [],
    // Atom Effects로 로컬 스토리지 동기화
    effects: [
        ({setSelf, onSet}) => {
            // 초기화 시 로컬 스토리지에서 불러오기
            const savedCart = localStorage.getItem('cart');
            if (savedCart) {
                setSelf(JSON.parse(savedCart));
            }

            // 상태 변경 시 로컬 스토리지에 저장
            onSet((newValue) => {
                localStorage.setItem('cart', JSON.stringify(newValue));
            });
        }
    ]
});

// 테마 설정 Atom
export const themeState = atom({
    key: 'themeState',
    default: 'light'
});

// Selector - Atom에서 파생된 상태 계산
import { selector } from 'recoil';
import { cartState, userState } from './atoms';

// 장바구니 총액 계산 Selector
export const cartTotalSelector = selector({
    key: 'cartTotalSelector',
    get: ({get}) => {
        const cart = get(cartState);
        return cart.reduce((total, item) =>
            total + item.price * item.quantity, 0
        );
    }
});

// 비동기 Selector - API 데이터 페칭
export const userOrdersSelector = selector({
    key: 'userOrdersSelector',
    get: async ({get}) => {
        const user = get(userState);

        if (!user.isLoggedIn) {
            return [];
        }

        // 비동기 데이터 페칭 (Suspense 자동 통합)
        const response = await fetch(
            `/api/users/${user.email}/orders`
        );
        return response.json();
    }
});

// 쓰기 가능한 Selector
export const cartItemCountSelector = selector({
    key: 'cartItemCountSelector',
    get: ({get}) => {
        const cart = get(cartState);
        return cart.reduce((count, item) =>
            count + item.quantity, 0
        );
    },
    set: ({set}, newValue) => {
        // 전체 초기화 등 특별한 동작
        if (newValue === 0) {
            set(cartState, []);
        }
    }
});

// 컴포넌트에서 Recoil 상태 사용하기
import { Suspense } from 'react';
import {
    useRecoilState,
    useRecoilValue,
    useSetRecoilState
} from 'recoil';
import { cartState, cartTotalSelector, userOrdersSelector } from './store';

function Cart() {
    // useState처럼 [값, setter] 반환
    const [cart, setCart] = useRecoilState(cartState);

    // 읽기 전용 (리렌더링 최적화)
    const total = useRecoilValue(cartTotalSelector);

    // 쓰기 전용 (해당 컴포넌트는 값 변경에 리렌더 안됨)
    const setCartOnly = useSetRecoilState(cartState);

    const addItem = (product) => {
        setCart((prev) => {
            const existing = prev.find(item => item.id === product.id);
            if (existing) {
                return prev.map(item =>
                    item.id === product.id
                        ? { ...item, quantity: item.quantity + 1 }
                        : item
                );
            }
            return [...prev, { ...product, quantity: 1 }];
        });
    };

    return (
        <div>
            <h2>장바구니 ({cart.length}개 상품)</h2>
            {cart.map(item => (
                <div key={item.id}>
                    {item.name} x {item.quantity}
                </div>
            ))}
            <p>총액: {total.toLocaleString()}원</p>

            {/* 비동기 Selector + Suspense */}
            <Suspense fallback={<p>주문 내역 로딩 중...</p>}>
                <OrderHistory />
            </Suspense>
        </div>
    );
}

function OrderHistory() {
    // 비동기 Selector 사용 - 자동으로 Suspense 처리
    const orders = useRecoilValue(userOrdersSelector);
    return <div>{orders.length}개의 주문 내역</div>;
}