feat: アクセサリー切り替えも永続化

app/components/ModelConfig.tsx

@@ -1,14 +1,20 @@
-import { MODEL_LIST } from "~/features/profile/Profile";
-import type { CharacterSetting, Model } from "~/features/profile/Profile";
+import { ACCESSORY_LIST, MODEL_LIST } from "~/features/profile/Profile";
+import type {
+	Accessory,
+	CharacterSetting,
+	Model,
+} from "~/features/profile/Profile";
 
 interface ModelConfigProps {
 	characterSetting: CharacterSetting;
 	onModelSelect?: (model: Model) => void;
+	onAccessorySelect?: (accessory: Accessory) => void;
 }
 
 export function ModelConfig({
 	characterSetting,
 	onModelSelect,
+	onAccessorySelect,
 }: ModelConfigProps) {
 	return (
 		<div className="mx-auto w-full max-w-screen-sm sm:px-4">
@@ -27,6 +33,21 @@ export function ModelConfig({
 				))}
 			</div>
 
+			<div className="flex justify-between">
+				{ACCESSORY_LIST.map((accessory) => (
+					<label key={accessory}>
+						<input
+							type="radio"
+							name="accessory"
+							value={accessory}
+							checked={accessory === characterSetting.accessory}
+							onChange={() => onAccessorySelect?.(accessory)}
+						/>
+						<span>{accessory}</span>
+					</label>
+				))}
+			</div>
+
 			{/* モデル選択ボタン */}
 			{/* <div
 				id="model-list-container"

app/routes/_auth.edit.tsx

@@ -1,11 +1,8 @@
 import type { MetaFunction } from "@remix-run/react";
 import type { ReactNode } from "react";
-import { useState } from "react";
-import { getMeshColor } from "~/components/ModelColor";
 import { ModelConfig } from "~/components/ModelConfig";
 import { ModelViewer } from "~/components/ModelLoad";
-import { getMeshVisibility } from "~/components/ModelVisibility";
-import type { Model } from "~/features/profile/Profile";
+import type { Accessory, Model } from "~/features/profile/Profile";
 import { useMyProfile } from "~/features/profile/useMyProfile";
 
 export const meta: MetaFunction = () => [{ title: "キャラ編集 | RicoShot" }];
@@ -21,13 +18,21 @@ export default function Page(): ReactNode {
 		});
 	};
 
+	const handleAccessorySelect = (accessory: Accessory) => {
+		updateCharacterSetting({
+			...myProfile.characterSetting,
+			accessory,
+		});
+	};
+
 	return (
 		<div className="min-h-dvh w-full" style={{ viewTransitionName: "main" }}>
 			<main className="grid w-full gap-y-4">
 				<ModelViewer characterSetting={myProfile.characterSetting} />
 				<ModelConfig
 					characterSetting={myProfile.characterSetting}
 					onModelSelect={handleModelSelect}
+					onAccessorySelect={handleAccessorySelect}
 				/>
 			</main>
 		</div>