newをyamlモード

src/app/stories/new/_components/NewStorySwitchMode.tsx

@@ -0,0 +1,21 @@
+import { type Device } from "@/common/util/device";
+import { NewStory } from "@/components/newStory";
+import { NewStoryYaml } from "@/components/newStoryYaml";
+import { StoryInit } from "@/server/model/story";
+import { useSearchParams } from "next/navigation";
+
+export const NewStorySwitchMode = ({
+	device,
+	createStory,
+}: {
+	device: Device;
+	createStory: (data: StoryInit) => Promise<string>;
+}) => {
+	const searchParams = useSearchParams();
+	const mode = searchParams?.get("mode");
+	if (mode === "yaml") {
+		return <NewStoryYaml createStory={createStory} />;
+	} else {
+		return <NewStory device={device} createStory={createStory} />;
+	}
+};

src/app/stories/new/page.tsx

@@ -1,4 +1,4 @@
-import { type Device, getDevice } from "@/common/util/device";
+import { getDevice } from "@/common/util/device";
 import { NewStory } from "@/components/newStory";
 import { getUserSession } from "@/server/serverComponent/getUserSession";
 import { createStory } from "@/server/services/story/createStory";

src/components/newStory/index.tsx

@@ -28,7 +28,7 @@ export const NewStory: React.FC<Props> = ({ device, createStory }) => {
 			<Heading level={1}>新しいストーリーを投稿</Heading>
 			{device === "desktop" && (
 				<div className={styles.navigation}>
-					<Link href={`/stories/new/yaml`}>
+					<Link href={`/stories/new?mode=yaml`}>
 						<GenericButton color={"zero"} size={"small"}>
 							<ButtonIconWrapper>
 								<AiOutlineUpload />