storybook/ addon react-router-dom

// package.json
npm list로 확인 결과
react-router@7.13.1
storybook-addon-remix-react-router@6.1.0
react@19.2.4
storybook@10.2.17

강의에 있는 내용을 토대로 typescript로 쇼핑몰 storybook 테스트를 진행 중에 React Router pannel에 로깅이 찍히지 않습니다.

github, storybook docs

참고하면서 해봐도 해결이 되지를 않는데...

제 코드는 아래와 같습니다.

.storybook/main.ts

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@chromatic-com/storybook",
    "@storybook/addon-vitest",
    "@storybook/addon-a11y",
    "@storybook/addon-docs",
    "storybook-addon-remix-react-router",
  ],
  framework: "@storybook/react-vite",
};
export default config;

.storybook/preview.tsx

import type { Preview } from "@storybook/react-vite";
import { withRouter } from "storybook-addon-remix-react-router";
const preview: Preview = {
  tags: ["autodocs"],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    a11y: {
      // 'todo' - show a11y violations in the test UI only
      // 'error' - fail CI on a11y violations
      // 'off' - skip a11y checks entirely
      test: "todo",
    },
  },

  decorators: [withRouter],
};

export default preview;

EmptyNotice.tsx

import type { MouseEvent } from "react";
import { useNavigate } from "react-router";

const EmptyNotice = () => {
  const navigate = useNavigate();

  const handleClickBack = (event: MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    navigate("/");
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        height: 400,
        alignItems: "center",
        flexDirection: "column",
      }}
    >
      <p style={{ fontSize: "50px", fontWeight: 300 }}>텅~</p>
      <button onClick={handleClickBack} style={{ cursor: "pointer" }}>
        홈으로 가기
      </button>
    </div>
  );
};

export default EmptyNotice;

EmptyNotice.stories.tsx

import type { Meta, StoryObj } from "@storybook/react-vite";
import EmptyNotice from "./EmptyNotice";

const meta = {
  title: "장바구니/EmptyNotice",
  component: EmptyNotice,
} satisfies Meta<typeof EmptyNotice>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  name: "장바구니가 빈 경우",
};

AI하고 문답하면서 디버깅 하는데 좀처럼 원인을 못찾겠어서 질문올립니다.

// .storybook/preview.tsx
import type { Preview } from "@storybook/react-vite";
import { withRouter } from "storybook-addon-remix-react-router";
import { BrowserRouter } from "react-router-dom";

const preview: Preview = {
  tags: ["autodocs"],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    a11y: {
      test: "todo",
    },
  },
  decorators: [
    (Story) => (
      <BrowserRouter>
        <Story />
      </BrowserRouter>
    ),
    withRouter,
  ],
};

export default preview;