다국어 i18n 처리

Author: LimSB-dev

src/app/avatar/upload/page.tsx

@@ -3,13 +3,15 @@
 import { type PutBlobResult } from "@vercel/blob";
 import { upload } from "@vercel/blob/client";
 import { useState, useRef } from "react";
+import { useTranslation } from "@/hooks/useTranslation";
 
 export default function AvatarUploadPage() {
+  const { t } = useTranslation();
   const inputFileRef = useRef<HTMLInputElement>(null);
   const [blob, setBlob] = useState<PutBlobResult | null>(null);
   return (
     <>
-      <h1>Upload Your Avatar</h1>
+      <h1>{t("login.uploadAvatar")}</h1>
 
       <form
         onSubmit={async (event) => {
@@ -30,7 +32,7 @@ export default function AvatarUploadPage() {
         }}
       >
         <input name="file" ref={inputFileRef} type="file" required />
-        <button type="submit">Upload</button>
+        <button type="submit">{t("common.upload")}</button>
       </form>
       {blob && (
         <div>

src/app/not-found.tsx

@@ -3,13 +3,15 @@
 import styles from "./not-found.module.scss";
 import { DefaultTerminal } from "@/components/common/terminal";
 import { NOT_FOUND_SEQUENCE } from "@/constants/sequence/sequence";
+import { useTranslation } from "@/hooks/useTranslation";
 
 export default function NotFound() {
+  const { t } = useTranslation();
   return (
     <main className={styles.main}>
       <DefaultTerminal
         redirect="/"
-        title="404 Not Found"
+        title={t("notFound.title")}
         command={{ key: "Escape", name: "ESC" }}
         sequence={NOT_FOUND_SEQUENCE}
       />

src/app/posts/[index]/edit/page.tsx

@@ -12,13 +12,15 @@ import { setMarkdownValue, setTitle } from "@/store/modules/post";
 import AuthorizationComponents from "@/components/common/authorizationComponents";
 import { getPost } from "@/app/api/posts";
 import { useImageUpload } from "@/hooks/useImageUpload";
+import { useTranslation } from "@/hooks/useTranslation";
 
 const MarkdownEditor = dynamic(
   () => import("@uiw/react-markdown-editor").then((mod) => mod.default),
   { ssr: false }
 );
 
 export default function PostEditPage() {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const device = useDevice();
   const pathname = usePathname();
@@ -51,7 +53,7 @@ export default function PostEditPage() {
           className={styles.title_input}
           type="text"
           id="title"
-          placeholder="제목을 입력하세요."
+          placeholder={t("posts.titlePlaceholder")}
           onChange={(e) => dispatch(setTitle(e.target.value))}
           value={title}
         />

src/app/posts/[index]/loading.tsx

@@ -1,15 +1,19 @@
+"use client";
+
 import styles from "./page.module.scss";
+import { useTranslation } from "@/hooks/useTranslation";
 
 const SkeletonPostDetail = () => {
+  const { t } = useTranslation();
   return (
     <>
-      <h1 className={styles.title}>Now Loading...</h1>
-      <p>Please wait a moment</p>
+      <h1 className={styles.title}>{t("posts.nowLoading")}</h1>
+      <p>{t("posts.pleaseWait")}</p>
     </>
   );
 };
 
-export default async function PostDetailPage() {
+export default function PostDetailPageLoading() {
   return (
     <main id="main-page" role="main" className={styles.main}>
       <SkeletonPostDetail />

src/app/posts/create/page.tsx

@@ -8,13 +8,15 @@ import { useAppDispatch, useAppSelector } from "@/hooks/reduxHook";
 import { setMarkdownValue, setTitle } from "@/store/modules/post";
 import AuthorizationComponents from "@/components/common/authorizationComponents";
 import { useImageUpload } from "@/hooks/useImageUpload";
+import { useTranslation } from "@/hooks/useTranslation";
 
 const MarkdownEditor = dynamic(
   () => import("@uiw/react-markdown-editor").then((mod) => mod.default),
   { ssr: false }
 );
 
 export default function CreatePage() {
+  const { t } = useTranslation();
   const device = useDevice();
   const dispatch = useAppDispatch();
   const theme = useAppSelector((state) => state.theme.theme);
@@ -29,7 +31,7 @@ export default function CreatePage() {
           className={styles.title_input}
           type="text"
           id="title"
-          placeholder="제목을 입력하세요."
+          placeholder={t("posts.titlePlaceholder")}
           onChange={(e) => dispatch(setTitle(e.target.value))}
           value={title}
         />

src/components/common/SyncHtmlLang/index.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { useAppSelector } from "@/hooks/reduxHook";
+import { selectLocale } from "@/store/modules/language";
+
+/**
+ * Redux에 저장된 locale을 document.documentElement.lang에 동기화합니다.
+ */
+export function SyncHtmlLang() {
+  const locale = useAppSelector(selectLocale);
+
+  useEffect(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.lang = locale;
+    }
+  }, [locale]);
+
+  return null;
+}

src/components/common/header/CreateHeader/index.tsx

@@ -1,13 +1,17 @@
+"use client";
+
 import Link from "next/link";
 import styles from "./styles.module.scss";
 import { DefaultLogo } from "@/components/common/logo";
+import { useTranslation } from "@/hooks/useTranslation";
 
 const CreateHeader = () => {
+  const { t } = useTranslation();
   return (
     <header className={styles.header}>
       <section className={styles.content}>
         <DefaultLogo size="small" />
-        <Link href="/posts">POST</Link>
+        <Link href="/posts">{t("posts.navPost").toUpperCase()}</Link>
       </section>
     </header>
   );

src/components/common/header/PostsHeader/index.tsx

@@ -10,8 +10,10 @@ import { DefaultLogo } from "@/components/common/logo";
 import { useAppDispatch, useAppSelector } from "@/hooks/reduxHook";
 import { setResetPost } from "@/store/modules/post";
 import { deletePost, postPost, putPost } from "@/app/api/posts";
+import { useTranslation } from "@/hooks/useTranslation";
 
 const PostsHeader = () => {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const user = useAppSelector((state) => state.user);
   const { title, markdownValue } = useAppSelector((state) => state.post);
@@ -53,8 +55,8 @@ const PostsHeader = () => {
     <header className={styles.header}>
       <nav className={styles.nav}>
         <DefaultLogo size="small" withText />
-        {isPosts && isAdmin && <Link href="/posts/create">CREATE</Link>}
-        {!isPosts && <Link href="/posts">POST</Link>}
+        {isPosts && isAdmin && <Link href="/posts/create">{t("posts.create").toUpperCase()}</Link>}
+        {!isPosts && <Link href="/posts">{t("posts.navPost").toUpperCase()}</Link>}
       </nav>
 
       {isAdmin && !isPosts && (
@@ -71,7 +73,7 @@ const PostsHeader = () => {
                 }
                 disabled={loading}
               >
-                {isEdit ? "save" : "create"}
+                {isEdit ? t("common.save") : t("common.create")}
               </button>
               <Link
                 href={isEdit ? `/posts/${index}` : "/posts"}
@@ -80,7 +82,7 @@ const PostsHeader = () => {
                 }`}
                 onClick={() => handleButton("cancel")}
               >
-                cancel
+                {t("common.cancel")}
               </Link>
             </>
           ) : (
@@ -91,7 +93,7 @@ const PostsHeader = () => {
                   loading && styles.loading
                 }`}
               >
-                edit
+                {t("common.edit")}
               </Link>
               <button
                 type="button"
@@ -101,7 +103,7 @@ const PostsHeader = () => {
                 onClick={() => handleButton("delete")}
                 disabled={loading}
               >
-                delete
+                {t("common.delete")}
               </button>
             </>
           )}

src/components/common/logo/DefaultLogo/index.tsx

@@ -1,13 +1,17 @@
+"use client";
+
 import Image from "next/image";
 import Link from "next/link";
 import styles from "./styles.module.scss";
+import { useTranslation } from "@/hooks/useTranslation";
 
 interface IProps {
   size?: "small" | "medium" | "large";
   withText?: boolean;
 }
 
 const DefaultLogo = ({ size = "medium", withText }: IProps) => {
+  const { t } = useTranslation();
   const logoSize = {
     small: { width: 24, height: 24 },
     medium: { width: 48, height: 48 },
@@ -18,11 +22,11 @@ const DefaultLogo = ({ size = "medium", withText }: IProps) => {
     <Link href="/" passHref className={styles.link}>
       <Image
         src="/favicon.ico"
-        alt="logo"
+        alt={t("common.logoAlt")}
         width={logoSize[size].width}
         height={logoSize[size].height}
       />
-      {withText && <p>HOME</p>}
+      {withText && <p>{t("common.home").toUpperCase()}</p>}
     </Link>
   );
 };

src/components/main/card/ArrowCard/index.tsx

@@ -1,11 +1,15 @@
+"use client";
+
 import styles from "./styles.module.scss";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import { useAppDispatch } from "@/hooks/reduxHook";
 import { setOffset } from "@/store/modules/post";
+import { useTranslation } from "@/hooks/useTranslation";
 
 export const ArrowCard = () => {
+  const { t } = useTranslation();
   const dispatch = useAppDispatch();
 
   const handleArrow = (type: "prev" | "next") => {
@@ -20,7 +24,7 @@ export const ArrowCard = () => {
   return (
     <article id="arrow-card" className={`button-card-shadow ${styles.card}`}>
       <button
-        aria-label="left-arrow"
+        aria-label={t("common.leftArrow")}
         id="arrow-left"
         type="button"
         className={styles.arrow}
@@ -29,7 +33,7 @@ export const ArrowCard = () => {
         <FontAwesomeIcon icon={faAngleLeft} size="xl" />
       </button>
       <button
-        aria-label="right-arrow"
+        aria-label={t("common.rightArrow")}
         id="arrow-right"
         type="button"
         className={styles.arrow}