feat(WEB-170): edit profile view

components/TempDesignSystem/Form/Input/index.tsx

@@ -0,0 +1,44 @@
+"use client"
+import { useController } from "react-hook-form"
+
+import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
+import { Input as AriaInput, TextField } from "react-aria-components"
+
+import styles from "./input.module.css"
+
+import type { InputProps } from "./input"
+
+export default function Input({
+  control,
+  disabled,
+  name,
+  placeholder,
+  registerOptions,
+  type = "text",
+}: InputProps) {
+  const { field, fieldState, formState } = useController({
+    control,
+    name,
+    rules: registerOptions,
+  })
+
+  return (
+    <TextField
+      defaultValue={field.value}
+      isDisabled={disabled ?? field.disabled}
+      isInvalid={fieldState.invalid}
+      isRequired={!!registerOptions?.required}
+      name={field.name}
+      onBlur={field.onBlur}
+      onChange={field.onChange}
+      type={type}
+    >
+      <AriaInput
+        className={styles.input}
+        placeholder={placeholder}
+        ref={field.ref}
+      />
+      <ErrorMessage errors={formState.errors} name={name} />
+    </TextField>
+  )
+}

components/TempDesignSystem/Form/Input/input.module.css

@@ -0,0 +1,13 @@
+.input {
+  border: 0.2rem solid var(--some-black-color, #757575);
+  border-radius: 0.4rem;
+  color: var(--some-black-color, #757575);
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  height: 4rem;
+  letter-spacing: -1.5%;
+  line-height: 2.4rem;
+  padding: 0.8rem 1.6rem;
+  width: min(28rem, 100%);
+}

components/TempDesignSystem/Form/Input/input.ts

@@ -0,0 +1,9 @@
+import { EditProfileSchema } from "@/components/MyProfile/Profile/Edit/Form/schema"
+import { Control, RegisterOptions } from "react-hook-form"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  control: Control<EditProfileSchema>
+  name: keyof EditProfileSchema
+  registerOptions?: RegisterOptions<EditProfileSchema>
+}