feat(user): require age_range when creating a user

client/src/app/features/user/apis/index.test.ts

@@ -32,6 +32,7 @@ const makeRequest = (overrides: Partial<CreateUserRequest> = {}): CreateUserRequ
   last_name: "Yamada",
   email: "taro@example.com",
   password: "password123",
+  age_range: "teens",
   ...overrides,
 });
 

client/src/app/features/user/apis/user-api.ts

@@ -10,6 +10,7 @@ export type CreateUserRequest = {
   last_name: string;
   email: string;
   password: string;
+  age_range: AgeRange;
 };
 
 export type UpdateUserRequest = {

client/src/app/features/user/components/UserCreateForm.tsx

@@ -1,8 +1,10 @@
 import type { FormEvent } from "react";
+import MenuItem from "@mui/material/MenuItem";
 import TextField from "@shared/uis/TextField.tsx";
 import { Button } from "@shared/uis/Button.tsx";
 import { ErrorPanel } from "@shared/uis/ErrorPanel.tsx";
 import { useText } from "@shared/locale/ui-text.ts";
+import { AGE_RANGES } from "../types";
 import type { CreateUserFormValues } from "../types";
 import type { ApiUserDto } from "../apis/user-api";
 
@@ -75,6 +77,21 @@ export function UserCreateForm({
         onChange={(e) => handleField("password", e.target.value)}
         required
       />
+      <TextField
+        select
+        label={text.userAgeRange}
+        value={value.ageRange}
+        onChange={(e) =>
+          handleField("ageRange", e.target.value as CreateUserFormValues["ageRange"])
+        }
+        required
+      >
+        {AGE_RANGES.map((ageRange) => (
+          <MenuItem key={ageRange} value={ageRange}>
+            {ageRange}
+          </MenuItem>
+        ))}
+      </TextField>
 
       <Button type="submit" variant="primary" isLoading={isLoading}>
         {text.userCreateSubmit}

client/src/app/features/user/components/__tests__/UserCreateForm.test.tsx

@@ -13,6 +13,7 @@ const renderForm = (props: Partial<React.ComponentProps<typeof UserCreateForm>>
     lastName: "",
     email: "",
     password: "",
+    ageRange: "teens",
   };
 
   const defaultProps: React.ComponentProps<typeof UserCreateForm> = {
@@ -35,15 +36,15 @@ const renderForm = (props: Partial<React.ComponentProps<typeof UserCreateForm>>
 };
 
 describe("UserCreateForm", () => {
-  it("renders only first name, last name, email, and password fields", () => {
+  it("renders first name, last name, email, password, and age range fields, but not subscription", () => {
     renderForm();
 
     expect(screen.getByLabelText(/^First Name/)).toBeInTheDocument();
     expect(screen.getByLabelText(/^Last Name/)).toBeInTheDocument();
     expect(screen.getByLabelText(/^Email/)).toBeInTheDocument();
     expect(screen.getByLabelText(/^Password/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/age range/i)).toBeInTheDocument();
 
-    expect(screen.queryByLabelText(/age range/i)).not.toBeInTheDocument();
     expect(screen.queryByLabelText(/subscription/i)).not.toBeInTheDocument();
   });
 
@@ -54,7 +55,13 @@ describe("UserCreateForm", () => {
     fireEvent.change(screen.getByLabelText(/^First Name/), { target: { value: "Taro" } });
 
     expect(onChange).toHaveBeenCalledWith(
-      expect.objectContaining({ firstName: "Taro", lastName: "", email: "", password: "" }),
+      expect.objectContaining({
+        firstName: "Taro",
+        lastName: "",
+        email: "",
+        password: "",
+        ageRange: "teens",
+      }),
     );
   });
 
@@ -65,6 +72,7 @@ describe("UserCreateForm", () => {
       lastName: "Yamada",
       email: "taro@example.com",
       password: "password123",
+      ageRange: "20s",
     };
     renderForm({ onSubmit, value });
 

client/src/app/features/user/hooks/__tests__/use-create-user.test.ts

@@ -32,13 +32,15 @@ const formValues: CreateUserFormValues = {
   lastName: "Yamada",
   email: "taro@example.com",
   password: "password123",
+  ageRange: "teens",
 };
 
 const request: CreateUserRequest = {
   first_name: "Taro",
   last_name: "Yamada",
   email: "taro@example.com",
   password: "password123",
+  age_range: "teens",
 };
 
 const user: ApiUserDto = {

client/src/app/features/user/mapper/__tests__/to-create-user-request.test.ts

@@ -7,6 +7,7 @@ const makeFormValues = (overrides: Partial<CreateUserFormValues> = {}): CreateUs
   lastName: "Yamada",
   email: "taro@example.com",
   password: "password123",
+  ageRange: "20s",
   ...overrides,
 });
 
@@ -19,6 +20,7 @@ describe("toCreateUserRequest", () => {
       last_name: "Yamada",
       email: "taro@example.com",
       password: "password123",
+      age_range: "20s",
     });
   });
 

client/src/app/features/user/mapper/to-create-user-request.ts

@@ -6,4 +6,5 @@ export const toCreateUserRequest = (values: CreateUserFormValues): CreateUserReq
   last_name: values.lastName.trim(),
   email: values.email.trim(),
   password: values.password,
+  age_range: values.ageRange,
 });

client/src/app/features/user/mapper/user.types.ts

@@ -5,4 +5,5 @@ export const DEFAULT_CREATE_USER_FORM_VALUES: CreateUserFormValues = {
   lastName: "",
   email: "",
   password: "",
+  ageRange: "teens",
 };

client/src/app/features/user/types.ts

@@ -9,6 +9,7 @@ export type CreateUserFormValues = {
   lastName: string;
   email: string;
   password: string;
+  ageRange: AgeRange;
 };
 
 export type UserProfile = {