// TravelPlanKanban.tsx (최상위 상태 관리 컴포넌트)
const [draggingItem, setDraggingItem] = useState(null);  // 🔴 여기서 관리
const [dayData, setDayData] = useState(...);

return (
  <View>
    {/* 상태가 바뀔 때마다 모든 자식이 리렌더링 */}
    <DayColumn dayId="day1" draggingItem={draggingItem} ...props />
    <DayColumn dayId="day2" draggingItem={draggingItem} ...props />
    <DayColumn dayId="day3" draggingItem={draggingItem} ...props />
    <DayColumn dayId="day4" draggingItem={draggingItem} ...props />
  </View>
);

// stores/useDragStore.ts
import { create } from 'zustand';

interface DragStore {
  // 드래그 상태
  draggingItem: ScheduleItem | null;
  draggingSourceDay: string | null;

  // 드래그 위치 추적 (빠르게 변하는 값)
  dropTargetDay: string | null;
  dropPosition: number | null;

  // 액션
  setDraggingItem: (item: ScheduleItem | null, sourceDay: string | null) => void;
  setDropTarget: (dayId: string | null, position: number | null) => void;
  resetDrag: () => void;
}

export const useDragStore = create<DragStore>((set) => ({
  draggingItem: null,
  draggingSourceDay: null,
  dropTargetDay: null,
  dropPosition: null,

  setDraggingItem: (item, sourceDay) =>
    set({ draggingItem: item, draggingSourceDay: sourceDay }),

  setDropTarget: (dayId, position) =>
    set({ dropTargetDay: dayId, dropPosition: position }),

  resetDrag: () =>
    set({
      draggingItem: null,
      draggingSourceDay: null,
      dropTargetDay: null,
      dropPosition: null,
    }),
}));

// selectors
const selectDraggingItem = (state: DragStore) => state.draggingItem;
const selectDropTarget = (state: DragStore) => state.dropTargetDay;
const selectIsDragging = (state: DragStore) => state.draggingItem !== null;
const selectIsThisDayTarget = (dayId: string) => (state: DragStore) =>
  state.dropTargetDay === dayId;

// DayColumn.tsx
interface DayColumnProps {
  dayId: string;
  schedules: ScheduleItem[];
}

const DayColumn = memo(({ dayId, schedules }: DayColumnProps) => {
  // ✅ store에서 필요한 것만 구독
  const isThisDayTarget = useDragStore(
    useCallback((state) => state.dropTargetDay === dayId, [dayId])
  );

  const backgroundColor = isThisDayTarget ? '#E3F2FD' : '#FFFFFF';

  return (
    <View style={[styles.dayColumn, { backgroundColor }]}>
      {schedules.map((schedule, index) => (
        <DraggablePlanCard
          key={schedule.id}
          item={schedule}
          index={index}
          dayId={dayId}
        />
      ))}
    </View>
  );
});

export default DayColumn;

// DraggablePlanCard.tsx
interface DraggablePlanCardProps {
  item: ScheduleItem;
  index: number;
  dayId: string;
}

const DraggablePlanCard = memo(({ item, index, dayId }: DraggablePlanCardProps) => {
  // store에서 필요한 값 가져오기
  const draggingItem = useDragStore((state) => state.draggingItem);
  const draggingSourceDay = useDragStore((state) => state.draggingSourceDay);

  // 자신이 드래깅 중인 아이템인지 판단
  const isDragging = draggingItem?.id === item.id && draggingSourceDay === dayId;

  // 상태 변경 (store 사용)
  const onDragStart = useCallback(() => {
    useDragStore.getState().setDraggingItem(item, dayId);
  }, [item, dayId]);

  const panResponder = useMemo(() =>
    PanResponder.create({
      onPanResponderGrant: onDragStart,
      onPanResponderMove: (evt, { dy }) => {
        // dropTargetDay 업데이트
        const targetDay = calculateDropTargetDay(evt.nativeEvent.pageY);
        useDragStore.getState().setDropTarget(targetDay, Math.floor(dy / CARD_HEIGHT));
      },
      onPanResponderRelease: () => {
        useDragStore.getState().resetDrag();
      },
    }),
    []
  );

  const cardOpacity = useSharedValue(isDragging ? 0.3 : 1);

  return (
    <Animated.View
      style={{ opacity: cardOpacity }}
      {...panResponder.panHandlers}
    >
      {/* 카드 내용 */}
    </Animated.View>
  );
});

export default DraggablePlanCard;

// ❌ 잘못된 패턴: 전체 store를 구독 → 어떤 값이 바뀌든 리렌더링
const dragState = useDragStore();
const isDragging = dragState.draggingItem !== null;

// ✅ 올바른 패턴: 필요한 값만 구독 → 그 값이 바뀔 때만 리렌더링
const isDragging = useDragStore((state) => state.draggingItem !== null);

// 각 DayColumn이 "자신이 드롭 타겟인지"만 구독
const DayColumn = memo(({ dayId }) => {
  const isTarget = useDragStore((state) => state.dropTargetDay === dayId);

  // isTarget이 바뀔 때만 리렌더링
  // 다른 날의 dropTargetDay가 변해도 이 컴포넌트는 영향 없음
  return <View style={{ backgroundColor: isTarget ? '#E3F2FD' : '#FFF' }} />;
});