Settings 컴포넌트 관련 구현

constants/settings/desc.ts

@@ -0,0 +1,25 @@
+import LANGUAGE from "@Library/language/constant";
+
+import { LanguageInterface } from "@Library/language/interface";
+
+export const POSITION_DESC: LanguageInterface = {
+  [LANGUAGE.ko]: `현재 회사에서 일하는 포지션 또는 희망하는 포지션을 입력해주세요.`,
+  [LANGUAGE.en]: `Please enter the position you are currently working for or the position you want.`,
+};
+export const EMAIL_DESC: LanguageInterface = {
+  [LANGUAGE.ko]: `연락할 이메일을 입력하세요.`,
+  [LANGUAGE.en]: `Please enter an e-mail to be contacted.
+    `,
+};
+export const INTRO_MSG_DESC: LanguageInterface = {
+  [LANGUAGE.ko]: `자신을 한줄로 표현해주세요. 
+    개인 블로그에 표시됩니다.`,
+  [LANGUAGE.en]: `Please introduction yourself in one line.
+    Appears on your personal blog.`,
+};
+export const DISPLAY_NAME_DESC: LanguageInterface = {
+  [LANGUAGE.ko]: `틸로그에서 사용할 닉네임을 지정해주세요. 
+    블로그이름, 개인블로그에서 사용되는 이름입니다.`,
+  [LANGUAGE.en]: `Please specify a nickname to use in the TILog. 
+    The name of the blog, the name used by the private blog.`,
+};

constants/settings/index.ts

@@ -0,0 +1,8 @@
+import SUMMIT_SETTINGS from "./summit";
+import WRONG_EMAIL from "./wrongEmail";
+
+export * from "./desc";
+export * from "./title";
+export * from "./type";
+
+export { WRONG_EMAIL, SUMMIT_SETTINGS };

constants/settings/summit.ts

@@ -0,0 +1,10 @@
+import LANGUAGE from "@Library/language/constant";
+
+import { LanguageInterface } from "@Library/language/interface";
+
+const SUMMIT_SETTINGS: LanguageInterface = {
+  [LANGUAGE.ko]: "설정 저장",
+  [LANGUAGE.en]: "Save settings",
+};
+
+export default SUMMIT_SETTINGS;

constants/settings/title.ts

@@ -0,0 +1,20 @@
+import LANGUAGE from "@Library/language/constant";
+
+import { LanguageInterface } from "@Library/language/interface";
+
+export const POSITION_TITLE: LanguageInterface = {
+  [LANGUAGE.ko]: "포지션",
+  [LANGUAGE.en]: "Position",
+};
+export const EMAIL_TITLE: LanguageInterface = {
+  [LANGUAGE.ko]: "이메일",
+  [LANGUAGE.en]: "Email",
+};
+export const INTRO_MSG_TITLE: LanguageInterface = {
+  [LANGUAGE.ko]: "소개",
+  [LANGUAGE.en]: "Introduction",
+};
+export const DISPLAY_NAME_TITLE: LanguageInterface = {
+  [LANGUAGE.ko]: "닉네임",
+  [LANGUAGE.en]: "NickName",
+};

constants/settings/type.ts

@@ -0,0 +1,4 @@
+export const DISPLAY_NAME = "DISPLAY_NAME";
+export const INTRO_MSG = "INTRO_MSG";
+export const EMAIL = "EMAIL";
+export const POSITION = "POSITION";

constants/settings/wrongEmail.ts

@@ -0,0 +1,10 @@
+import LANGUAGE from "@Library/language/constant";
+
+import { LanguageInterface } from "@Library/language/interface";
+
+const WRONG_EMAIL: LanguageInterface = {
+  [LANGUAGE.ko]: "잘못된 이메일 형식입니다.",
+  [LANGUAGE.en]: "Invalid email format.",
+};
+
+export default WRONG_EMAIL;

src/components/modules/settings/button/SettingsSubmit.tsx

@@ -0,0 +1,15 @@
+import PrimaryButton from "@Components/common/atom/buttons/PrimaryButton";
+import { SUMMIT_SETTINGS } from "@Constants/settings";
+
+const SettingsSubmit = () => {
+  return (
+    <PrimaryButton
+      isSubmit
+      className="dark:bg-neutral-900 w-full max-w-[150px]"
+    >
+      {SUMMIT_SETTINGS.ko}
+    </PrimaryButton>
+  );
+};
+
+export default SettingsSubmit;

src/components/modules/settings/index.tsx

@@ -0,0 +1,13 @@
+import SettingsSubmit from "@Components/modules/settings/button/SettingsSubmit";
+import DisplayNameInput from "@Components/modules/settings/input/DisplayNameInput";
+import EmailInput from "@Components/modules/settings/input/EmailInput";
+import IntroductionInput from "@Components/modules/settings/input/IntroductionInput";
+import PositionInput from "@Components/modules/settings/input/PositionInput";
+
+export {
+  PositionInput,
+  IntroductionInput,
+  EmailInput,
+  DisplayNameInput,
+  SettingsSubmit,
+};

src/components/modules/settings/input/DisplayNameInput.tsx

@@ -0,0 +1,31 @@
+import { useFormContext } from "react-hook-form";
+
+import UnderLineTextInput from "@Components/common/atom/input/UnderLineTextInput";
+import { displayNameRules } from "@Components/modules/settings/input/rules";
+import {
+  DISPLAY_NAME,
+  DISPLAY_NAME_DESC,
+  DISPLAY_NAME_TITLE,
+} from "@Constants/settings";
+
+import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+
+const DisplayNameInput = () => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<UserSettingTypes>();
+  return (
+    <div>
+      <h1>{DISPLAY_NAME_TITLE.ko}</h1>
+      <p>{DISPLAY_NAME_DESC.ko}</p>
+      <UnderLineTextInput
+        register={register}
+        type={DISPLAY_NAME}
+        rules={displayNameRules("ko")}
+        error={errors.DISPLAY_NAME?.message}
+      />
+    </div>
+  );
+};
+export default DisplayNameInput;

src/components/modules/settings/input/EmailInput.tsx

@@ -0,0 +1,27 @@
+import { useFormContext } from "react-hook-form";
+
+import UnderLineTextInput from "@Components/common/atom/input/UnderLineTextInput";
+import { emailRules } from "@Components/modules/settings/input/rules";
+import { EMAIL, EMAIL_DESC, EMAIL_TITLE } from "@Constants/settings";
+
+import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+
+const EmailInput = () => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<UserSettingTypes>();
+  return (
+    <div>
+      <h1>{EMAIL_TITLE.ko}</h1>
+      <p>{EMAIL_DESC.ko}</p>
+      <UnderLineTextInput
+        register={register}
+        type={EMAIL}
+        rules={emailRules("ko")}
+        error={errors.EMAIL?.message}
+      />
+    </div>
+  );
+};
+export default EmailInput;

src/components/modules/settings/input/IntroductionInput.tsx

@@ -0,0 +1,31 @@
+import { useFormContext } from "react-hook-form";
+
+import UnderLineTextInput from "@Components/common/atom/input/UnderLineTextInput";
+import { introMsgRules } from "@Components/modules/settings/input/rules";
+import {
+  INTRO_MSG,
+  INTRO_MSG_DESC,
+  INTRO_MSG_TITLE,
+} from "@Constants/settings";
+
+import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+
+const IntroductionInput = () => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<UserSettingTypes>();
+  return (
+    <div>
+      <h1>{INTRO_MSG_TITLE.ko}</h1>
+      <p>{INTRO_MSG_DESC.ko}</p>
+      <UnderLineTextInput
+        register={register}
+        type={INTRO_MSG}
+        rules={introMsgRules("ko")}
+        error={errors.INTRO_MSG?.message}
+      />
+    </div>
+  );
+};
+export default IntroductionInput;

src/components/modules/settings/input/PositionInput.tsx

@@ -0,0 +1,27 @@
+import { useFormContext } from "react-hook-form";
+
+import UnderLineTextInput from "@Components/common/atom/input/UnderLineTextInput";
+import { positionRules } from "@Components/modules/settings/input/rules";
+import { POSITION, POSITION_DESC, POSITION_TITLE } from "@Constants/settings";
+
+import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+
+const PositionInput = () => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<UserSettingTypes>();
+  return (
+    <div>
+      <h1>{POSITION_TITLE.ko}</h1>
+      <p>{POSITION_DESC.ko}</p>
+      <UnderLineTextInput
+        register={register}
+        type={POSITION}
+        rules={positionRules("ko")}
+        error={errors.POSITION?.message}
+      />
+    </div>
+  );
+};
+export default PositionInput;

src/components/modules/settings/input/rules/displayNameRules.ts

@@ -0,0 +1,24 @@
+import { RegisterOptions } from "react-hook-form";
+
+import { MAX_LENGTH, MIN_LENGTH } from "@Constants/input/rules";
+
+import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+import { LanguageUnionType } from "@Library/language/interface";
+
+const displayNameRules = (
+  language: LanguageUnionType
+): RegisterOptions<UserSettingTypes> => {
+  return {
+    required: true,
+    minLength: {
+      value: 2,
+      message: MIN_LENGTH(2, language),
+    },
+    maxLength: {
+      value: 190,
+      message: MAX_LENGTH(190, language),
+    },
+  };
+};
+
+export default displayNameRules;

src/components/modules/settings/input/rules/emailRules.ts

@@ -0,0 +1,25 @@
+import { RegisterOptions } from "react-hook-form";
+
+import { MAX_LENGTH, WRONG_EMAIL } from "@Constants/input/rules";
+
+import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+import { LanguageUnionType } from "@Library/language/interface";
+
+const emailRules = (
+  language: LanguageUnionType
+): RegisterOptions<UserSettingTypes> => {
+  return {
+    required: true,
+    pattern: {
+      value:
+        /[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]$/i,
+      message: WRONG_EMAIL[language],
+    },
+    maxLength: {
+      value: 190,
+      message: MAX_LENGTH(190, language),
+    },
+  };
+};
+
+export default emailRules;

src/components/modules/settings/input/rules/index.ts

@@ -0,0 +1,6 @@
+import displayNameRules from "@Components/modules/settings/input/rules/displayNameRules";
+import emailRules from "@Components/modules/settings/input/rules/emailRules";
+import introMsgRules from "@Components/modules/settings/input/rules/introMsgRules";
+import positionRules from "@Components/modules/settings/input/rules/positionRules";
+
+export { displayNameRules, emailRules, positionRules, introMsgRules };

src/components/modules/settings/input/rules/introMsgRules.ts

@@ -0,0 +1,23 @@
+import { RegisterOptions } from "react-hook-form";
+
+import { MAX_LENGTH, MIN_LENGTH } from "@Constants/input/rules";
+
+import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+import { LanguageUnionType } from "@Library/language/interface";
+
+const emailRules = (
+  language: LanguageUnionType
+): RegisterOptions<UserSettingTypes> => {
+  return {
+    minLength: {
+      value: 10,
+      message: MIN_LENGTH(10, language),
+    },
+    maxLength: {
+      value: 190,
+      message: MAX_LENGTH(190, language),
+    },
+  };
+};
+
+export default emailRules;

src/components/modules/settings/input/rules/positionRules.ts

@@ -0,0 +1,23 @@
+import { RegisterOptions } from "react-hook-form";
+
+import { MAX_LENGTH, MIN_LENGTH } from "@Constants/input/rules";
+
+import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+import { LanguageUnionType } from "@Library/language/interface";
+
+const positionRules = (
+  language: LanguageUnionType
+): RegisterOptions<UserSettingTypes> => {
+  return {
+    minLength: {
+      value: 2,
+      message: MIN_LENGTH(2, language),
+    },
+    maxLength: {
+      value: 190,
+      message: MAX_LENGTH(190, language),
+    },
+  };
+};
+
+export default positionRules;

src/hooks/pages/settings/hooks/useHandleSubmit.ts

@@ -0,0 +1,41 @@
+import { SubmitHandler } from "react-hook-form";
+
+import useSetUserSetting from "@Hooks/react-query/userSetting/useSetUserSetting";
+
+import { SetSettingRequestBodyDtoSettingTypeEnum } from "@til-log.lab/tilog-api";
+
+import UserSettingTypes from "@Library/api/users/interface/userSettingTypes";
+
+// TODO Toast
+const useHandleSubmit = (): SubmitHandler<UserSettingTypes> => {
+  const { mutate } = useSetUserSetting();
+
+  return (object: UserSettingTypes) => {
+    // const loading = toast.loading("로딩중...");
+    Object.keys(object).forEach((key) => {
+      const userSettingKey = key as SetSettingRequestBodyDtoSettingTypeEnum;
+      mutate(
+        {
+          content: object[userSettingKey],
+          settingType: userSettingKey,
+        },
+        {
+          // onError: (error) => {
+          //   if (httpClient.isHttpClientError(error)) {
+          //     toast.error(error.message.ko, {
+          //       id: loading,
+          //     });
+          //   }
+          // },
+          // onSuccess: () => {
+          //   toast.success(SAVE_MESSAGE.ko, {
+          //     id: loading,
+          //   });
+          // },
+        }
+      );
+    });
+  };
+};
+
+export default useHandleSubmit;