export const INIT_CHARACTER = 'INIT_CHARACTER';
export const MAIN_CHARACTER = 'MAIN_CHARACTER';
export const MAIN_CHARACTER_DEPT = 'MAIN_CHARACTER_DEPT';

// Action Creator 함수
export const initChar = () => ({
  type: INIT_CHARACTER,
});
export const mainChar = (newPosition) => ({
  type: MAIN_CHARACTER,
  payload: newPosition,
});
export const mainCharDept = (newPosition) => ({
  type: MAIN_CHARACTER_DEPT,
  payload: newPosition,
});

import {
  INIT_CHARACTER,
  MAIN_CHARACTER,
  MAIN_CHARACTER_DEPT,
} from '../actions/actions';

const initialState = {
  name: '',
  currentPosition: [280, 0, -355],
  deptInitPosition: [0, 0, 0],
};

export function mainCharReducer(state = initialState, action) {
  switch (action.type) {
    case INIT_CHARACTER:
      return {
        ...state,
        name: '',
        currentPosition: [280, 0, -355],
        deptInitPosition: [0, 0, 0],
      };
    case MAIN_CHARACTER:
      // console.log('action.payload', action.payload)
      return {
        ...state,
        name: 'SJ',
        currentPosition: action.payload,
        deptInitPosition: state.deptInitPosition,
      };
    case MAIN_CHARACTER_DEPT:
      return {
        ...state,
        name: 'SJ',
        currentPosition: state.currentPosition,
        deptInitPosition: action.payload,
      };
    default:
      return state;
  }
}

import { createStore } from 'redux';
import rootReducer from '../reducers/rootReducer';

// 스토어 정의
const store = createStore(rootReducer);

export default store;

import { combineReducers } from 'redux';
import { mainCharReducer } from './mainCharReducer';
// ...

// 모든 리듀서 결합 - 성준
const rootReducer = combineReducers({
  mChar: mainCharReducer,
  // ...
});

export default rootReducer;

<Provider store={store}>
  <BrowserRouter>{/* ... */}</BrowserRouter>
</Provider>

const myChar = useSelector((state) => state.mChar);
//...

useEffect(() => {
  dispatch(mainChar(targetPosition));
}, [targetPosition]);

import { atom } from 'recoil';

export const isStartScene = atom({
  key: 'isStart',
  default: false,
});

// ...
const setStart = useSetRecoilState(isStartScene);
//...

return (
  <motion.group
    onAnimationComplete={() => setStart(true)}
    {/* ... */}
  >
    <Text3D
      {...fontStyle}
    >
      Hello Seong Jun
      <meshNormalMaterial />
    </Text3D>
    {/* ... */}
  </motion.group>;
)

// ...
const isStart = useRecoilValue(isStartScene)

return (
  {isStart && <Car />}
  // ...
)

// ...

// 초기 상태
const initialState = {
  keyword: '',
  checkIn: formatDate(checkInDate),
  checkOut: formatDate(checkOutDate),
  tripDay: 1,
  numberOfPeople: 2,
};

export const useAccomSearchStore = create(
  persist(
    (set, get) => ({
      initialState,
      setKeywordState: (value) => set({ keyword: value }),
      setCheckInState: (date) => set({ checkIn: date }),
      setCheckOutState: (date) => set({ checkOut: date }),
      setTripDayState: (day) => set({ tripDay: day }),
      setNumberOfPeople: (count) =>
        set({ numberOfPeople: count === 1 ? 2 : count }),
      resetState: () => set(initialState),
    }),
    {
      name: 'accomSearchStore',
      getStorage: () => localStorage,
      partialize: (state) => ({
        keyword: state.keyword,
        checkIn: state.checkIn,
        checkOut: state.checkOut,
        tripDay: state.tripDay,
        numberOfPeople: state.numberOfPeople,
      }),
    }
  )
);

const state = useAccomSearchStore((state) => state);

// or

const { checkIn, checkOut, tripDay } = useAccomSearchStore((state) => state);
const { setCheckInState, setCheckOutState, setTripDayState, resetState } =
  useAccomSearchStore((state) => state);