[웹] 영문 렌딩 페이지 추가

apps/landing/i18next-parser.config.ts

@@ -0,0 +1,14 @@
+import type { UserConfig } from 'i18next-parser';
+
+const config: UserConfig = {
+    input: ['src/**/*.{js,jsx,ts,tsx}'],
+    output: 'apps/landing/public/locales/$LOCALE/translation.json',
+    locales: ['en', 'ko'],
+    defaultNamespace: 'translation',
+    keepRemoved: false,
+    sort: true,
+    defaultValue: (locale: string, namespace: string, key: string) => (locale === 'en' ? key : ''),
+    keySeparator: false,
+};
+
+export default config;

apps/landing/project.json

@@ -5,5 +5,12 @@
     "projectType": "application",
     "tags": [],
     "// targets": "to see all targets run: nx show project landing --web",
-    "targets": {}
+    "targets": {
+        "i18n:extract": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "i18next --config ./apps/landing/i18next-parser.config.ts 'apps/landing/src/**/*.{ts,tsx}'"
+            }
+        }
+    }
 }

apps/landing/public/locales/en/translation.json

@@ -0,0 +1,13 @@
+{
+    "<strong>EurekaKit</strong> provides app and<br/>backend code to help you build your MVP quickly.": "<strong>EurekaKit</strong> provides app and<br/>backend code to help you build your MVP quickly.",
+    "After applying with a React Native app, you can build<br/>your product faster and customize it to your needs.": "After applying with a React Native app, you can build<br/>your product faster and customize it to your needs.",
+    "Apply for EurekaKit and try using it": "Apply for EurekaKit and try using it",
+    "Apply for the Kit": "Apply for the Kit",
+    "It helps you quickly build optimized products with a React Native app,<br />and even non-developers can easily create customized services.": "It helps you quickly build optimized products with a React Native app,<br />and even non-developers can easily create customized services.",
+    "It provides a default workspace and project for you": "It provides a default workspace and project for you",
+    "To use EurekaKit, please start by using<br/><strong>EurekaCodes</strong> first": "To use EurekaKit, please start by using<br/><strong>EurekaCodes</strong> first",
+    "Try applying for the<br/>EurekaKit service<br/>from the catalog": "Try applying for the<br/>EurekaKit service<br/>from the catalog",
+    "Try using the<br/>EurekaKit<br/>service with ease": "Try using the<br/>EurekaKit<br/>service with ease",
+    "You can find and apply for the service you<br/>need from a variety of available options": "You can find and apply for the service you<br/>need from a variety of available options",
+    "You can try out Eurekacodes with the default workspace and project provided": "You can try out Eurekacodes with the default workspace and project provided"
+}

apps/landing/public/locales/ko/translation.json

@@ -0,0 +1,13 @@
+{
+    "<strong>EurekaKit</strong> provides app and<br/>backend code to help you build your MVP quickly.": "<strong>EurekaKit</strong> 는 앱과 백엔드 코드를 제공해<br/>MVP 개발을 빠르게 도와줍니다.",
+    "After applying with a React Native app, you can build<br/>your product faster and customize it to your needs.": "React Native 앱으로 신청 후 더욱 빠르게<br/>제품을 구축하고 맞춤형으로 사용할 수 있습니다.",
+    "Apply for EurekaKit and try using it": "EurekaKit를 신청하고 사용해 보세요",
+    "Apply for the Kit": "Kit 신청하러가기",
+    "It helps you quickly build optimized products with a React Native app,<br />and even non-developers can easily create customized services.": "React Native 앱으로 최적화 제품을 빠르게 구축할 수 있도록 지원해주며<br/>개발자가 아닌 사람도 맞춤형 서비스를 쉽게 구현할 수 있습니다.",
+    "It provides a default workspace and project for you": "기본 워크스페이스와 프로젝트를 제공해줘요",
+    "To use EurekaKit, please start by using<br/><strong>EurekaCodes</strong> first": "EurekaKit를 이용하려면<br/><strong>EurekaCodes</strong>를 먼저 사용해 주세요",
+    "Try applying for the<br/>EurekaKit service<br/>from the catalog": "카탈로그에서 EurekaKit<br/>서비스를 신청해 보세요",
+    "Try using the<br/>EurekaKit<br/>service with ease": "EurekaKit 서비스를<br/>쉽게 사용해 보세요",
+    "You can find and apply for the service you<br/>need from a variety of available options": "다양한 서비스 중 나에게 필요한<br/>서비스를 찾아 신청할 수 있어요",
+    "You can try out Eurekacodes with the default workspace and project provided": "기본으로 제공되는 워크스페이스와 프로젝트로 유레카코즈를 이용해볼 수 있어요"
+}

apps/landing/src/app/app.tsx

@@ -1,15 +1,20 @@
 import { useEffect, useRef } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 
 import { ChevronRight } from 'lucide-react';
 
 import { Images } from '@lemon/assets';
-import { Button } from '@lemon/ui-kit/components/ui/button';
 import { cn } from '@lemon/ui-kit/lib/utils';
 
 import { RadialGradient } from './components';
 
 export function App() {
     const ref = useRef<HTMLDivElement>(null);
+    const { i18n } = useTranslation();
+
+    const changeLanguage = () => {
+        i18n.changeLanguage(i18n.language === 'en' ? 'ko' : 'en');
+    };
 
     useEffect(() => {
         let angle = 0;
@@ -32,19 +37,26 @@ export function App() {
             <div className="relative flex h-[720px] w-full flex-col items-center justify-center gap-10 overflow-x-hidden bg-[#1B1B1B]/50">
                 <div className="absolute top-4 flex h-[60px] w-full max-w-[1180px] items-center rounded-lg bg-[#1b1b1b] px-4">
                     <img src={Images.eurekaCodesLogo} className="h-6" />
-                    <button className="ml-auto h-6">
+                    <button className="ml-auto h-6" onClick={changeLanguage}>
                         <img src={Images.globe} />
                     </button>
                 </div>
-                <p className="flex flex-col text-center text-[52px] leading-tight">
-                    <span>
-                        <strong className="text-[86px]">EurekaKit</strong> 는 앱과 백엔드 코드를 제공해
-                    </span>
-                    <span>MVP 개발을 빠르게 도와줍니다.</span>
+                <p className="text-center text-[52px] leading-tight">
+                    <Trans
+                        i18nKey="<strong>EurekaKit</strong> provides app and<br/>backend code to help you build your MVP quickly."
+                        components={{
+                            strong: <strong className="text-[86px]" />,
+                            br: <br />,
+                        }}
+                    />
                 </p>
                 <p className="flex flex-col text-center text-[24px]">
-                    <span>React Native 앱으로 최적화 제품을 빠르게 구축할 수 있도록 지원해주며</span>
-                    <span>개발자가 아닌 사람도 맞춤형 서비스를 쉽게 구현할 수 있습니다.</span>
+                    <Trans
+                        i18nKey="It helps you quickly build optimized products with a React Native app,<br />and even non-developers can easily create customized services."
+                        components={{
+                            br: <br />,
+                        }}
+                    />
                 </p>
                 <RadialGradient
                     radius={300}
@@ -78,16 +90,25 @@ export function App() {
                 />
             </div>
             <div className="mt-24 flex max-w-[1180px] flex-col gap-12">
-                <p className="flex flex-col text-[44px] leading-tight">
-                    <span>EurekaKit를 이용하려면</span>
-                    <span>
-                        <strong className="text-[58px]">EurekaCodes</strong>를 먼저 사용해 주세요
-                    </span>
+                <p className="text-[44px] leading-tight">
+                    <Trans
+                        i18nKey="To use EurekaKit, please start by using<br/><strong>EurekaCodes</strong> first"
+                        components={{
+                            strong: <strong className="text-[58px]" />,
+                            br: <br />,
+                        }}
+                    />
                 </p>
                 <div className="grid grid-cols-2 grid-rows-2 gap-4">
                     <p className="relative col-span-2 flex h-[682px] flex-col gap-8 overflow-hidden rounded-3xl bg-white/[0.03] px-24 pt-24">
-                        <span className="text-4xl">기본 워크스페이스와 프로젝트를 제공해줘요</span>
-                        <span>기본으로 제공되는 워크스페이스와 프로젝트로 유레카코즈를 이용해볼 수 있어요</span>
+                        <span className="text-4xl">
+                            <Trans i18nKey={`It provides a default workspace and project for you`} />
+                        </span>
+                        <span>
+                            <Trans
+                                i18nKey={`You can try out Eurekacodes with the default workspace and project provided`}
+                            />
+                        </span>
                         <img src={Images.landingBannder1} className="absolute bottom-0 w-4/5" />
                         <RadialGradient
                             radius={300}
@@ -122,14 +143,20 @@ export function App() {
                     </p>
                     <p className="relative flex h-[682px] flex-col gap-8 overflow-hidden rounded-3xl bg-white/[0.03] px-16 pt-16">
                         <span className="text-4xl">
-                            카탈로그에서 EurekaKit
-                            <br />
-                            서비스를 신청해보세요
+                            <Trans
+                                i18nKey="Try applying for the<br/>EurekaKit service<br/>from the catalog"
+                                components={{
+                                    br: <br />,
+                                }}
+                            />
                         </span>
                         <span>
-                            다양한 서비스 중 나에게 필요한
-                            <br />
-                            서비스를 찾아 신청할 수 있어요
+                            <Trans
+                                i18nKey="You can find and apply for the service you<br/>need from a variety of available options"
+                                components={{
+                                    br: <br />,
+                                }}
+                            />
                         </span>
                         <img src={Images.landingBannder2} className="absolute bottom-0 right-0 w-10/12" />
                         <RadialGradient
@@ -155,14 +182,20 @@ export function App() {
                     </p>
                     <p className="relative flex h-[682px] flex-col gap-8 overflow-hidden break-words rounded-3xl bg-white/[0.03] px-16 pt-16">
                         <span className="text-4xl">
-                            EurekaKit 서비스를
-                            <br />
-                            쉽게 사용해 보세요
+                            <Trans
+                                i18nKey="Try using the<br/>EurekaKit<br/>service with ease"
+                                components={{
+                                    br: <br />,
+                                }}
+                            />
                         </span>
                         <span>
-                            React Native 앱으로 신청 후 더욱 빠르게
-                            <br />
-                            제품을 구축하고 맞춤형으로 사용할 수 있습니다.
+                            <Trans
+                                i18nKey="After applying with a React Native app, you can build<br/>your product faster and customize it to your needs."
+                                components={{
+                                    br: <br />,
+                                }}
+                            />
                         </span>
                         <img src={Images.landingBannder3} className="absolute bottom-0 right-0 w-10/12" />
                         <RadialGradient
@@ -198,11 +231,16 @@ export function App() {
                         )}
                     >
                         <div className="z-10 flex w-[954px] items-center rounded-full bg-[#161617] py-5 pl-10 pr-5">
-                            <span className="text-[30px]">EurekaKit를 신청하고 사용해 보세요</span>
-                            <Button className="ml-auto rounded-full bg-white/[0.07] py-8 pl-8 pr-5 text-[24px] hover:bg-white/10">
-                                <span>Kit 신청하러 가기</span>
-                                <ChevronRight className="!h-auto !w-auto" size={24} />
-                            </Button>
+                            <span className="text-[30px]">
+                                <Trans i18nKey={'Apply for EurekaKit and try using it'} />
+                            </span>
+                            <a
+                                href="https://eureka.codes/"
+                                className="ml-auto inline-flex gap-2 rounded-full bg-white/[0.07] py-4 pl-8 pr-5 text-[24px] hover:bg-white/10"
+                            >
+                                <Trans i18nKey={'Apply for the Kit'} />
+                                <ChevronRight className="!h-auto !w-auto" size={28} />
+                            </a>
                         </div>
                     </div>
                 </div>

apps/landing/src/i18n/index.ts

@@ -0,0 +1,20 @@
+import { initReactI18next } from 'react-i18next';
+
+import i18n from 'i18next';
+import Backend from 'i18next-xhr-backend';
+
+const i18nInitOptions = {
+    lng: 'en',
+    fallbackLng: 'en',
+    supportedLngs: ['ko', 'en'],
+    interpolation: {
+        escapeValue: false,
+    },
+    ns: ['translation'],
+    defaultNS: 'translation',
+    debug: process.env.NODE_ENV === 'development',
+};
+
+i18n.use(Backend).use(initReactI18next).init(i18nInitOptions);
+
+export default i18n;

apps/landing/src/main.tsx

@@ -1,16 +1,20 @@
 import { StrictMode } from 'react';
+import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter } from 'react-router-dom';
 
 import * as ReactDOM from 'react-dom/client';
 
 import App from './app/app';
+import i18n from './i18n';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
     <StrictMode>
         <BrowserRouter>
-            <App />
+            <I18nextProvider i18n={i18n}>
+                <App />
+            </I18nextProvider>
         </BrowserRouter>
     </StrictMode>
 );

package.json

@@ -179,6 +179,7 @@
         "eslint-plugin-react-hooks": "5.0.0",
         "eslint-plugin-unused-imports": "^4.1.4",
         "husky": "^9.1.7",
+        "i18next-parser": "^9.3.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-react-native": "18.0.0",