From 5fa377115dfe13ead5c22a47aee4924cf7b19074 Mon Sep 17 00:00:00 2001
From: NISHIZAWA Shuntaro <me@s2n.tech>
Date: Tue, 5 Nov 2024 04:00:11 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=AB=AA=E8=89=B2=E3=81=AE=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4=E3=82=82DB=E3=81=AB=E4=BF=9D=E5=AD=98=E3=81=95?=
 =?UTF-8?q?=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/ModelConfig.tsx | 76 ++++++++++++++++++++++------------
 app/routes/_auth.edit.tsx      |  8 ++++
 2 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/app/components/ModelConfig.tsx b/app/components/ModelConfig.tsx
index 9674589..0c3b2e8 100644
--- a/app/components/ModelConfig.tsx
+++ b/app/components/ModelConfig.tsx
@@ -9,43 +9,65 @@ interface ModelConfigProps {
 	characterSetting: CharacterSetting;
 	onModelSelect?: (model: Model) => void;
 	onAccessorySelect?: (accessory: Accessory) => void;
+	onHairColorChange?: (color: string) => void;
 }
 
 export function ModelConfig({
 	characterSetting,
 	onModelSelect,
 	onAccessorySelect,
+	onHairColorChange,
 }: ModelConfigProps) {
 	return (
-		<div className="mx-auto w-full max-w-screen-sm sm:px-4">
-			<div className="flex justify-between">
-				{MODEL_LIST.map((model) => (
-					<label key={model}>
-						<input
-							type="radio"
-							name="model"
-							value={model}
-							checked={model === characterSetting.character}
-							onChange={() => onModelSelect?.(model)}
-						/>
-						<span>{model}</span>
-					</label>
-				))}
+		<div className="mx-auto grid w-full max-w-screen-sm gap-y-4 px-4">
+			<div className="flex gap-4">
+				<span className="flex-shrink-0">モデル:</span>
+				<div className="flex flex-grow flex-wrap justify-between gap-2">
+					{MODEL_LIST.map((model) => (
+						<label key={model}>
+							<input
+								type="radio"
+								name="model"
+								value={model}
+								checked={model === characterSetting.character}
+								onChange={() => onModelSelect?.(model)}
+							/>
+							<span>{model}</span>
+						</label>
+					))}
+				</div>
 			</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 className="flex gap-4">
+				<span className="flex-shrink-0">アクセサリー:</span>
+				<div className="flex flex-grow flex-wrap justify-between gap-2">
+					{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>
+
+			<div>
+				<label className="flex gap-4">
+					<span className="flex-shrink-0">髪の色:</span>
+					<input
+						type="color"
+						value={characterSetting.hair}
+						onChange={(e) => {
+							// TODO: 色の更新処理が頻繁に呼び出されてしまうため、debounceする
+							onHairColorChange?.(e.target.value);
+						}}
+					/>
+				</label>
 			</div>
 
 			{/* モデル選択ボタン */}
diff --git a/app/routes/_auth.edit.tsx b/app/routes/_auth.edit.tsx
index 293b2af..8475d5d 100644
--- a/app/routes/_auth.edit.tsx
+++ b/app/routes/_auth.edit.tsx
@@ -25,6 +25,13 @@ export default function Page(): ReactNode {
 		});
 	};
 
+	const handleHairColorChange = (color: string) => {
+		updateCharacterSetting({
+			...myProfile.characterSetting,
+			hair: color,
+		});
+	};
+
 	return (
 		<div className="min-h-dvh w-full" style={{ viewTransitionName: "main" }}>
 			<main className="grid w-full gap-y-4">
@@ -33,6 +40,7 @@ export default function Page(): ReactNode {
 					characterSetting={myProfile.characterSetting}
 					onModelSelect={handleModelSelect}
 					onAccessorySelect={handleAccessorySelect}
+					onHairColorChange={handleHairColorChange}
 				/>
 			</main>
 		</div>