feat(WEB-170): edit profile view

components/TempDesignSystem/Form/ErrorMessage/error.module.css

@@ -0,0 +1,8 @@
+.message {
+  color: var(--some-red-color, #d64242);
+  font-family: var(--ff-fira-sans);
+  font-size: 1.4rem;
+  font-weight: 400;
+  line-height: 2.2rem;
+  margin: 0.4rem 0 0;
+}

components/TempDesignSystem/Form/ErrorMessage/errorMessage.ts

@@ -0,0 +1,18 @@
+import { FieldValuesFromFieldErrors } from "@hookform/error-message"
+import type {
+  FieldErrors,
+  FieldName,
+  FieldValues,
+  Message,
+  MultipleFieldErrors,
+} from "react-hook-form"
+
+export type ErrorMessageProps<TFieldErrors> = {
+  errors?: FieldErrors<FieldValues>
+  name: FieldName<FieldValuesFromFieldErrors<TFieldErrors>>
+  message?: Message
+  render?: (data: {
+    message: Message
+    messages?: MultipleFieldErrors
+  }) => React.ReactNode
+}

components/TempDesignSystem/Form/ErrorMessage/index.tsx

@@ -0,0 +1,18 @@
+import { ErrorMessage as RHFErrorMessage } from "@hookform/error-message"
+
+import styles from "./error.module.css"
+
+import type { ErrorMessageProps } from "./errorMessage"
+
+export default function ErrorMessage<T>({
+  errors,
+  name,
+}: ErrorMessageProps<T>) {
+  return (
+    <RHFErrorMessage
+      errors={errors}
+      name={name}
+      render={({ message }) => <p className={styles.message}>{message}</p>}
+    />
+  )
+}