feat: 번역 데이터 추가

src/App.test.tsx

@@ -14,14 +14,16 @@ describe("상단 네비게이션", () => {
     renderWithProvider(<App />, { initialEntries: ["/"] });
 
     await userEvent.click(screen.getByRole("button", { name: /FAQ/ }));
-    expect(await screen.findByText(/Frequently Asked Questions/i)).toBeInTheDocument();
+    expect(
+      await screen.findByText(/How to connect an external calendar（iCloud、Google、Outlook）/i)
+    ).toBeInTheDocument();
   });
 
   test("2. Guide", async () => {
     renderWithProvider(<App />, { initialEntries: ["/"] });
 
     await userEvent.click(screen.getByRole("button", { name: /Guide/ }));
-    expect(await screen.findByText(/User Guide/i)).toBeInTheDocument();
+    expect(await screen.findByText(/Coming Soon/i)).toBeInTheDocument();
   });
 
   test("3. Language Option", async () => {
@@ -44,6 +46,8 @@ describe("상단 네비게이션", () => {
       await waitFor(async () => {
         const languageButton = await screen.findByTestId("language-button");
         expect(languageButton.getAttribute("aria-label")).equal("한국어");
+        await userEvent.click(languageButton);
+        await userEvent.click(screen.getByTestId("language-option-english"));
       });
     }
   });
@@ -65,10 +69,10 @@ describe("상단 네비게이션", () => {
 });
 
 describe("하단 네비게이션", () => {
-  test("1. Terms of service", async () => {
+  test("1. Terms of Use", async () => {
     renderWithProvider(<App />, { initialEntries: ["/"] });
 
-    await userEvent.click(screen.getByRole("button", { name: /Terms of service/ }));
+    await userEvent.click(screen.getByRole("button", { name: /Terms of Use/ }));
     expect(
       await screen.findByText(
         'We will explain the "terms of use" (hereinafter referred to as the "terms") for the the service and application "Plandy" (hereinafter referred to as "service") provided by Danah Kim (hereinafter referred to as the "service provider").'
@@ -79,7 +83,7 @@ describe("하단 네비게이션", () => {
   test("2. Privacy policy", async () => {
     renderWithProvider(<App />, { initialEntries: ["/"] });
 
-    await userEvent.click(screen.getByRole("button", { name: /Privacy policy/ }));
+    await userEvent.click(screen.getByRole("button", { name: /Privacy Policy/ }));
     expect(
       await screen.findByText(
         'This privacy policy explains the privacy policy for the service and application "Plandy" (hereinafter referred to as "the Service") provided by Danah Kim (hereinafter referred to as "the Service Provider").'

src/App.tsx

@@ -4,7 +4,6 @@ import ErrorBoundary from "@components/utils/ErrorBoundary";
 import LangLayout from "@components/utils/LangLayout";
 import Error404Page from "@pages/error/404/page";
 import Error500Page from "@pages/error/500/page";
-import HowToConnectPage from "@pages/faq/how-to-connect/page";
 import FaqPage from "@pages/faq/page";
 import GuidePage from "@pages/guide/page";
 import HomePage from "@pages/page";
@@ -17,7 +16,6 @@ function App() {
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/faq" element={<FaqPage />} />
-        <Route path="/faq/how-to-connect" element={<HowToConnectPage />} />
         <Route path="/guide" element={<GuidePage />} />
         <Route path="/terms" element={<TermsPage />} />
         <Route path="/privacy" element={<PrivacyPage />} />

src/assets/locales/en/translation.json

@@ -1,4 +1,11 @@
 {
   "title": "Plandy | Reminders & Calendar",
-  "intro_text": "Simple and easy task Manager"
+  "intro_text": "Simple and easy task Manager",
+  "faq": "FAQ",
+  "faq_apple_102543": "If your iCloud Contacts, Calendars, or Reminders won’t sync",
+  "faq_apple_105124": "Share and assign reminders on your iPhone or iPad",
+  "guide": "Guide",
+  "terms": "Terms of Use",
+  "privacy": "Privacy Policy",
+  "coming_soon": "Coming Soon"
 }

src/assets/locales/ja/translation.json

@@ -1,4 +1,11 @@
 {
-  "title": "Plandy: \u30EA\u30DE\u30A4\u30F3\u30C0\u30FC\u0020\uFF06\u0020\u30AB\u30EC\u30F3\u30C0\u30FC",
-  "intro_text": "\u30B7\u30F3\u30D7\u30EB\u3067\u7C21\u5358\u306A\u30BF\u30B9\u30AF\u7BA1\u7406"
+  "title": "Plandy | \u30EA\u30DE\u30A4\u30F3\u30C0\u30FC\u0020\uFF06\u0020\u30AB\u30EC\u30F3\u30C0\u30FC",
+  "intro_text": "\u30B7\u30F3\u30D7\u30EB\u3067\u7C21\u5358\u306A\u30BF\u30B9\u30AF\u7BA1\u7406",
+  "faq": "\u3088\u304F\u3042\u308B\u8CEA\u554F",
+  "faq_apple_102543": "\u0069\u0043\u006C\u006F\u0075\u0064\u0020\u306E\u9023\u7D61\u5148\u3001\u30AB\u30EC\u30F3\u30C0\u30FC\u3001\u30EA\u30DE\u30A4\u30F3\u30C0\u30FC\u304C\u540C\u671F\u3055\u308C\u306A\u3044\u5834\u5408",
+  "faq_apple_105124": "\u0069\u0050\u0068\u006F\u006E\u0065\u0020\u3084\u0020\u0069\u0050\u0061\u0064\u0020\u3067\u30EA\u30DE\u30A4\u30F3\u30C0\u30FC\u3092\u5171\u6709\u3059\u308B\uFF0F\u5272\u308A\u5F53\u3066\u308B",
+  "guide": "\u4F7F\u3044\u65B9\u30AC\u30A4\u30C9",
+  "terms": "\u5229\u7528\u898F\u7D04",
+  "privacy": "\u30D7\u30E9\u30A4\u30D0\u30B7\u30FC\u30DD\u30EA\u30B7\u30FC",
+  "coming_soon": "\u8FD1\u65E5\u516C\u958B"
 }

src/assets/locales/ko/translation.json

@@ -1,4 +1,11 @@
 {
   "title": "Plandy | \uB9AC\uB9C8\uC778\uB354\u0020\u0026\u0020\uB2EC\uB825",
-  "intro_text": "\uBE60\uB974\uACE0\u0020\uAC04\uD3B8\uD55C\u0020\uC77C\uC815\uACFC\u0020\uD560\uC77C\u0020\uAD00\uB9AC"
+  "intro_text": "\uBE60\uB974\uACE0\u0020\uAC04\uD3B8\uD55C\u0020\uC77C\uC815\uACFC\u0020\uD560\uC77C\u0020\uAD00\uB9AC",
+  "faq": "\u0008\uC790\uC8FC\u0020\uBB3B\uB294\u0020\uC9C8\uBB38",
+  "faq_apple_102543": "\u0069\u0043\u006C\u006F\u0075\u0064\u0020\uC5F0\uB77D\uCC98\u002C\u0020\uCE98\uB9B0\uB354\u0020\uB610\uB294\u0020\uBBF8\uB9AC\u0020\uC54C\uB9BC\uC774\u0020\uB3D9\uAE30\uD654\uB418\uC9C0\u0020\uC54A\uB294\u0020\uACBD\uC6B0",
+  "faq_apple_105124": "\u0069\u0050\u0068\u006F\u006E\u0065\u0020\uB610\uB294\u0020\u0069\u0050\u0061\u0064\uC5D0\uC11C\u0020\uBBF8\uB9AC\u0020\uC54C\uB9BC\u0020\uACF5\uC720\u0020\uBC0F\u0020\uD560\uB2F9\uD558\uAE30",
+  "guide": "\uC0AC\uC6A9\uC790\u0020\uAC00\uC774\uB4DC",
+  "terms": "\u0008\uC0AC\uC6A9\u0020\uC57D\uAD00",
+  "privacy": "\uAC1C\uC778\uC815\uBCF4\u0020\uCC98\uB9AC\uBC29\uCE68",
+  "coming_soon": "\uC900\uBE44\uC911"
 }

src/components/molecules/Footer/Footer.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Link, useParams } from "react-router-dom";
 
 import Button from "@components/atoms/Button";
@@ -7,6 +8,7 @@ import { GoogleFirebase } from "@utils/google-firebase";
 import { Copyright, Divider, InfoBox, PolicyButtonGroup, StyledFooter } from "./Footer.styles";
 
 function Footer() {
+  const { t } = useTranslation();
   const { lang } = useParams();
 
   const prefixUrlLang = lang ? `/${lang}` : "";
@@ -26,12 +28,12 @@ function Footer() {
           <PolicyButtonGroup>
             <Link to={`${prefixUrlLang}/terms`} onClick={() => handleLogEvent("terms")}>
               <Button variant="text" size="small">
-                Terms of service
+                {t("terms")}
               </Button>
             </Link>
             <Link to={`${prefixUrlLang}/privacy`} onClick={() => handleLogEvent("privacy")}>
               <Button variant="text" size="small">
-                Privacy policy
+                {t("privacy")}
               </Button>
             </Link>
           </PolicyButtonGroup>

src/components/molecules/Header/Header.tsx

@@ -13,7 +13,7 @@ import { matchSupportLanguage, SupportLanguage } from "@utils/i18n";
 import { Adornment, HeaderInner, Logo, StyledHeader } from "./Header.styles";
 
 function Header() {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const { lang } = useParams();
@@ -54,12 +54,12 @@ function Header() {
           <Adornment>
             <Link to={`${prefixUrlLang}/faq`} onClick={() => handleLogEvent("faq")}>
               <Button variant="text" size="small">
-                FAQ
+                {t("faq")}
               </Button>
             </Link>
             <Link to={`${prefixUrlLang}/guide`} onClick={() => handleLogEvent("guide")}>
               <Button variant="text" size="small">
-                Guide
+                {t("guide")}
               </Button>
             </Link>
             <Select

src/pages/faq/page.tsx

@@ -1,5 +1,7 @@
 import { useEffect } from "react";
 
+import { useTranslation } from "react-i18next";
+
 import Typography from "@components/atoms/Typography";
 import GeneralLayout from "@components/layouts/GeneralLayout";
 import Footer from "@components/molecules/Footer";
@@ -8,14 +10,16 @@ import FagList from "@pages/faq/_components/FagList";
 import { GoogleFirebase } from "@utils/google-firebase";
 
 function FaqPage() {
+  const { t } = useTranslation();
+
   useEffect(() => {
     GoogleFirebase.pageView("FAQ");
   }, []);
 
   return (
     <GeneralLayout header={<Header />} footer={<Footer />}>
       <Typography variant="headline" fontWeight={700} mt={2} mb={2}>
-        Frequently Asked Questions
+        {t("faq")}
       </Typography>
       <FagList />
     </GeneralLayout>

src/pages/guide/page.tsx

@@ -1,23 +1,27 @@
 import { useEffect } from "react";
 
+import { useTranslation } from "react-i18next";
+
 import Typography from "@components/atoms/Typography";
 import GeneralLayout from "@components/layouts/GeneralLayout";
 import Footer from "@components/molecules/Footer";
 import Header from "@components/molecules/Header";
 import { GoogleFirebase } from "@utils/google-firebase";
 
 function GuidePage() {
+  const { t } = useTranslation();
+
   useEffect(() => {
     GoogleFirebase.pageView("Guide");
   }, []);
 
   return (
     <GeneralLayout header={<Header />} footer={<Footer />}>
       <Typography variant="headline" fontWeight={700} mt={2} mb={2}>
-        User Guide
+        {t("guide")}
       </Typography>
       <Typography fontWeight={500} mt={2} mb={2}>
-        Coming Soon !
+        {t("coming_soon")} !
       </Typography>
     </GeneralLayout>
   );

src/pages/privacy/page.tsx

@@ -14,7 +14,7 @@ import { GoogleFirebase } from "@utils/google-firebase";
 
 function PrivacyPage() {
   useEffect(() => {
-    GoogleFirebase.pageView("Privacy policy");
+    GoogleFirebase.pageView("Privacy Policy");
   }, []);
 
   return (

src/pages/terms/page.tsx

@@ -14,13 +14,13 @@ import { GoogleFirebase } from "@utils/google-firebase";
 
 function TermsPage() {
   useEffect(() => {
-    GoogleFirebase.pageView("Terms of service");
+    GoogleFirebase.pageView("Terms of Use");
   }, []);
 
   return (
     <GeneralLayout header={<Header />} footer={<Footer />}>
       <Typography variant="headline" fontWeight={700} mt={2} mb={2}>
-        Terms of service
+        Terms of Use
       </Typography>
       <Typography>
         {`We will explain the "terms of use" (hereinafter referred to as the