Feat/i18n codebattle

src/components/Code.tsx

@@ -2,6 +2,9 @@ import styled from "@emotion/styled";
 
 export const Code = styled.code`
   font-family: "IBM Plex Mono", "Pretendard", monospace;
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
   tab-size: 4;
   &:not([class*="language-"]) {
     background-color: ${({ theme }) => theme.color.background.card.main};

src/components/PostLayout.tsx

@@ -3,6 +3,7 @@ import { Container, Divider, Footer, Space, Typo } from "@solved-ac/ui-react";
 import { IconArrowLeft } from "@tabler/icons-react";
 import { createLink } from "@tanstack/react-router";
 import type { Post } from "content-collections";
+import "./styles.css";
 
 const NavigationContainer = styled.div`
   padding-top: 32px;
@@ -48,16 +49,17 @@ interface Props {
   children: React.ReactNode;
   root?: boolean;
   meta?: PostMetaLike;
+  en?: boolean;
   theme?: {
     background: string;
     color: string;
   };
 }
 
 export const PostLayout: React.FC<Props> = (props) => {
-  const { root, meta, theme, children } = props;
+  const { root, meta, theme, en, children } = props;
 
-  const prev = meta?.year ? `/${meta.year}${meta.codebattle ? "-codebattle" : ""}` : "/";
+  const prev = `${en ? "/en" : ""}${meta?.year ? `/${meta.year}${meta.codebattle ? "-codebattle" : ""}` : "/"}`;
 
   const title = meta?.title
     ? `${meta.title}${
@@ -91,16 +93,30 @@ export const PostLayout: React.FC<Props> = (props) => {
             {root ? (
               <MetaLinkA href="https://www.nypc.co.kr">
                 <Navigation description style={theme && { color: theme.color }}>
-                  <IconArrowLeft /> NYPC 공식 사이트
+                  <IconArrowLeft /> {en ? "NYPC Official Website" : "NYPC 공식 사이트"}
                 </Navigation>
               </MetaLinkA>
             ) : (
               <MetaLink to={prev}>
                 <Navigation description style={theme && { color: theme.color }}>
-                  <IconArrowLeft /> 이전
+                  <IconArrowLeft /> {en ? "Back" : "이전"}
                 </Navigation>
               </MetaLink>
             )}
+            {root &&
+              (en ? (
+                <MetaLink to="/" style={{ float: "right" }}>
+                  <Navigation description style={theme && { color: theme.color }}>
+                    [한국어로 보기]
+                  </Navigation>
+                </MetaLink>
+              ) : (
+                <MetaLink to="/en" style={{ float: "right" }}>
+                  <Navigation description style={theme && { color: theme.color }}>
+                    [View in English]
+                  </Navigation>
+                </MetaLink>
+              ))}
           </Container>
         </NavigationContainer>
         {meta && (

src/components/ProblemList.tsx

@@ -23,10 +23,11 @@ interface Props {
     | Array<[string, string]>
     | ReadonlyArray<[string, string]>
     | ReadonlyArray<readonly [string, string]>;
+  en?: boolean;
 }
 
 export const ProblemList: React.FC<Props> = (props) => {
-  const { year, problems: list } = props;
+  const { year, problems: list, en } = props;
 
   const practices = useMemo(
     () => list.filter(([, title]) => title.startsWith("[연습문제]")),
@@ -44,7 +45,7 @@ export const ProblemList: React.FC<Props> = (props) => {
           <Itemize>
             {practices.map(([id, title]) => (
               <li key={id}>
-                <ProblemLink to="/$year/$page" params={{ year, page: id }}>
+                <ProblemLink to={`${en ? "/en" : ""}/$year/$page`} params={{ year, page: id }}>
                   <Typo description>연습문제:</Typo> {title.replace(/^\[연습문제] */, "")}
                 </ProblemLink>
               </li>
@@ -55,7 +56,7 @@ export const ProblemList: React.FC<Props> = (props) => {
       <ProblemListEnumerate style={{ columnCount: 3 }}>
         {problems.map(([id, title]) => (
           <li key={id}>
-            <ProblemLink to="/$year/$page" params={{ year, page: id }}>
+            <ProblemLink to={`${en ? "/en" : ""}/$year/$page`} params={{ year, page: id }}>
               {title}
             </ProblemLink>
           </li>

src/components/styles.css

@@ -0,0 +1,5 @@
+.no-block p,
+aside p,
+span p {
+  display: inline;
+}

src/routes/2025-codebattle/finals_1.mdx

@@ -272,7 +272,7 @@ $64$개가 있습니다. 타일은 색을 표현하는 문자와 문양을 표
 - C++20: [sample-code.cpp](https://nypc-static.s3.ap-northeast-2.amazonaws.com/2025/connexion.8c20978b76cf/sample-code/sample-code.cpp)
 - C#: [sample-code.cs](https://nypc-static.s3.ap-northeast-2.amazonaws.com/2025/connexion.8c20978b76cf/sample-code/sample-code.cs)
 - OpenJDK Java 21: [sample-code.java](https://nypc-static.s3.ap-northeast-2.amazonaws.com/2025/connexion.8c20978b76cf/sample-code/sample-code.java)
-- Node.js: [sample-code.rs](https://nypc-static.s3.ap-northeast-2.amazonaws.com/2025/connexion.8c20978b76cf/sample-code/sample-code.rs)
+- Node.js: [sample-code.js](https://nypc-static.s3.ap-northeast-2.amazonaws.com/2025/connexion.8c20978b76cf/sample-code/sample-code.js)
 - Typescript: [sample-code.ts](https://nypc-static.s3.ap-northeast-2.amazonaws.com/2025/connexion.8c20978b76cf/sample-code/sample-code.ts)
 - PyPy3 / Python3: [sample-code.py](https://nypc-static.s3.ap-northeast-2.amazonaws.com/2025/connexion.8c20978b76cf/sample-code/sample-code.py)
 - Rust 2024: [sample-code.rs](https://nypc-static.s3.ap-northeast-2.amazonaws.com/2025/connexion.8c20978b76cf/sample-code/sample-code.rs)

src/routes/en/$year.$page.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { MDXViewer, PostLayout } from "components";
+import { allPosts } from "content-collections";
+import { z } from "zod";
+
+const Post = () => {
+  const post = Route.useLoaderData();
+  return (
+    <PostLayout en={true} meta={post}>
+      <MDXViewer code={post.content} />
+    </PostLayout>
+  );
+};
+
+export const Route = createFileRoute("/en/$year/$page")({
+  params: {
+    parse: z.object({
+      year: z.union([z.number(), z.string()]),
+      page: z.string(),
+    }).parse,
+  },
+  loader: ({ params }) => {
+    const post = allPosts.find((p) => p.slug === `en/${params.year}/${params.page}`);
+    if (!post) throw notFound();
+    return post;
+  },
+  component: Post,
+});

src/routes/en/$year.notice.$page.tsx

@@ -0,0 +1,28 @@
+import { createFileRoute, notFound } from "@tanstack/react-router";
+import { MDXViewer, PostLayout } from "components";
+import { allPosts } from "content-collections";
+import { z } from "zod";
+
+const Post = () => {
+  const post = Route.useLoaderData();
+  return (
+    <PostLayout en={true} meta={post}>
+      <MDXViewer code={post.content} />
+    </PostLayout>
+  );
+};
+
+export const Route = createFileRoute("/en/$year/notice/$page")({
+  params: {
+    parse: z.object({
+      year: z.union([z.number(), z.string()]),
+      page: z.string(),
+    }).parse,
+  },
+  loader: ({ params }) => {
+    const post = allPosts.find((p) => p.slug === `en/${params.year}/notice/${params.page}`);
+    if (!post) throw notFound();
+    return post;
+  },
+  component: Post,
+});