next-redux-wrapper를 이용해서 Server와 Client 간의 Redux 공유하기

import React, { useEffect, useState } from "react";
import { system } from "styled-system";
import { ThemeProvider, styled } from "styled-components";
import { RootState, store, wrapper } from "@/src/configureStore";
import { connect, useSelector, useStore } from "react-redux";
import { getPosts } from "@/src/store/sagas/getPosts";
import { setPost } from "@/src/store/reducers/postReducer";

const theme = {
  colors: {
    primary: "#007bff",
    secondary: "#6c757d",
    success: "#28a745",
    error: "#dc3545",
    warning: "#ffc107",
  },
  fontSizes: {
    small: "12px",
    medium: "16px",
    large: "20px",
  },
};

const HomePage = ({}) => {
  const [active, setActive] = useState(false);
  const store = useStore();
  const { posts } = useSelector((state: RootState) => (state as any).posts);

  const stores = store.getState();
  console.log("posts: ", stores);

  useEffect(() => {
    console.log(store.getState());
  }, [store]);

  if (!posts) return <div></div>;

  return (
    <>
      <ThemeProvider theme={theme}>
        <button onClick={() => setActive((prev) => !prev)}>버튼</button>
        <button onClick={() => getPosts()}>커트냥ㄹ내머ㄴ</button>
        <div>
          {stores &&
            Object.keys(stores).length > 0 &&
            (stores as any).posts.posts.map((el: any) => {
              return <p key={el.id}>{el.title}</p>;
            })}
        </div>
        <Div active={active}>
          {["fidsoa", "fdsioajfdsa", "fdsijoafioa"].map((el) => {
            return (
              <Text key={el} fontSize="large">
                {el}
              </Text>
            );
          })}
        </Div>
      </ThemeProvider>
    </>
  );
};

export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async (context) => {
    console.log("------", context);

    store.dispatch(setPost([{ title: "fjdiosjfdoi" }]));

    return {
      props: {
        key: "value",
        stores: store.getState().posts.posts,
      },
    };
  }
);

const Text = styled("div")<{ fontSize: number | string }>(
  system({
    fontSize: {
      property: "fontSize",
      scale: "fontSizes",
      defaultScale: [12, 14, 16, 20, 24, 32, 48],
    },
  })
);

const Div = styled("div")<{ active: boolean }>`
  width: 100px;

  visibility: visible;
  border: 1px solid black;
  overflow: hidden;

  ${(props) => {
    if (!props.active) {
      return `
        height: 100px;
        transition: all .5s ease-in-out;
      `;
    }

    return `
        height: 0;
        transition: all .5s ease-in-out;
    `;
  }}
`;

// 반드시 해줘야 클라이언트와 서버 간 redux store 공유함
export default wrapper.withRedux(HomePage);