Translate component text to korean (#383)

* feat: YouWillLearn 컴포넌트 번역 추가

* feat: ExpandableExample 컴포넌트 번역 추가

* feat: CustomPreset 컴포넌트 번역 추가

* feat: LearnMore 컴포넌트 번역 추가

* feat: ExpandableCallout 컴포넌트 번역 추가

* feat: Challenges 컴포넌트 번역 추가

* feat: 오른쪽 목차 관련 번역 추가

* feat: Recap 컴포넌트 번역 추가

* fix: 자연스럽게 읽히도록 단어 수정

* feat: label도 번역 데이터로 변경

* feat: Tag 컴포넌트 name 속성 번역 추가

* feat: YouWillLearnCard 컴포넌트 번역 추가

* chore: lint:fix, prettier 명령어 실행

* chore: fix typo at Tag compoennt variantMap

* chore: fix typo at Challenges component

* Update beta/src/components/MDX/Sandpack/CustomPreset.tsx

Co-authored-by: KIM, WOOJUNG <[email protected]>

Author: alstn2468

beta/src/components/Layout/MarkdownPage.tsx

@@ -44,21 +44,21 @@ export function MarkdownPage<
         return {
           url: '#challenges',
           depth: 0,
-          text: 'Challenges',
+          text: '도전',
         };
       }
       if (child.props.mdxType === 'Recipes') {
         return {
           url: '#recipes',
           depth: 0,
-          text: 'Recipes',
+          text: '레시피',
         };
       }
       if (child.props.mdxType === 'Recap') {
         return {
           url: '#recap',
           depth: 0,
-          text: 'Recap',
+          text: '요약',
         };
       }
       return {
@@ -73,7 +73,7 @@ export function MarkdownPage<
   if (anchors.length > 0) {
     anchors.unshift({
       depth: 1,
-      text: 'Overview',
+      text: '개요',
       url: '#',
     });
   }

beta/src/components/Layout/Toc.tsx

@@ -26,7 +26,7 @@ export function Toc({
         maxWidth: 'inherit',
       }}>
       <h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
-        On this page
+        목차
       </h2>
       <div className="toc h-full overflow-y-auto pl-4">
         <ul className="space-y-2 pb-16">

beta/src/components/MDX/Challenges/Challenges.tsx

@@ -117,7 +117,9 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
               'text-3xl mb-2 leading-10 relative',
               isRecipes ? 'text-purple-50 dark:text-purple-30' : 'text-link'
             )}>
-            {isRecipes ? 'Try out some recipes' : 'Try out some challenges'}
+            {isRecipes
+              ? '몇 가지 레시피를 시도해 보세요.'
+              : '몇 가지 도전을 시도해 보세요.'}
           </H2>
           {challenges.length > 1 && (
             <Navigation
@@ -145,14 +147,14 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
               <div>
                 <Button className="mr-2" onClick={toggleHint} active={showHint}>
                   <IconHint className="mr-1.5" />{' '}
-                  {showHint ? 'Hide hint' : 'Show hint'}
+                  {showHint ? '힌트 숨기기' : '힌트 보기'}
                 </Button>
                 <Button
                   className="mr-2"
                   onClick={toggleSolution}
                   active={showSolution}>
                   <IconSolution className="mr-1.5" />{' '}
-                  {showSolution ? 'Hide solution' : 'Show solution'}
+                  {showSolution ? '해결책 숨기기' : '해결책 보기'}
                 </Button>
               </div>
             ) : (
@@ -162,7 +164,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
                   onClick={toggleSolution}
                   active={showSolution}>
                   <IconSolution className="mr-1.5" />{' '}
-                  {showSolution ? 'Hide solution' : 'Show solution'}
+                  {showSolution ? '해결책 숨기기' : '해결책 보기'}
                 </Button>
               )
             )}
@@ -179,7 +181,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
                   setShowSolution(false);
                 }}
                 active>
-                Next {isRecipes ? 'Recipe' : 'Challenge'}
+                다음 {isRecipes ? '레시피' : '도전'}
                 <IconArrowSmall
                   displayDirection="right"
                   className="block ml-1.5"
@@ -192,12 +194,12 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
           {showSolution && (
             <div className="mt-6">
               <h3 className="text-2xl font-bold text-primary dark:text-primary-dark">
-                Solution
+                해결책
               </h3>
               {currentChallenge?.solution}
               <div className="flex justify-between items-center mt-4">
                 <Button onClick={() => setShowSolution(false)}>
-                  Close solution
+                  해결책 닫기
                 </Button>
                 {nextChallenge && (
                   <Button
@@ -215,7 +217,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
                       }
                     }}
                     active>
-                    Next Challenge
+                    다음 도전
                     <IconArrowSmall
                       displayDirection="right"
                       className="block ml-1.5"

beta/src/components/MDX/ExpandableCallout.tsx

@@ -16,7 +16,7 @@ interface ExpandableCalloutProps {
 
 const variantMap = {
   note: {
-    title: 'Note',
+    title: '주의',
     Icon: IconNote,
     containerClasses:
       'bg-green-5 dark:bg-green-60 dark:bg-opacity-20 text-primary dark:text-primary-dark text-lg',
@@ -25,7 +25,7 @@ const variantMap = {
       'linear-gradient(rgba(245, 249, 248, 0), rgba(245, 249, 248, 1)',
   },
   gotcha: {
-    title: 'Gotcha',
+    title: '알겠다!',
     Icon: IconGotcha,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',

beta/src/components/MDX/ExpandableExample.tsx

@@ -41,13 +41,13 @@ function ExpandableExample({
           {isDeepDive && (
             <>
               <IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
-              Deep Dive
+              깊게 분석하기
             </>
           )}
           {isExample && (
             <>
               <IconCodeBlock className="inline mr-2 dark:text-yellow-30 text-yellow-50" />
-              Example
+              예시
             </>
           )}
         </h5>
@@ -69,7 +69,7 @@ function ExpandableExample({
           <span className="mr-1">
             <IconChevron displayDirection={isExpanded ? 'up' : 'down'} />
           </span>
-          {isExpanded ? 'Hide Details' : 'Show Details'}
+          {isExpanded ? '디테일 숨기기' : '디테일 보기'}
         </Button>
       </div>
       <div

beta/src/components/MDX/MDXComponents.tsx

@@ -91,16 +91,16 @@ function LearnMore({
       <section className="p-8 mt-16 mb-16 flex flex-row shadow-inner justify-between items-center bg-card dark:bg-card-dark rounded-lg">
         <div className="flex-col">
           <h2 className="text-primary dark:text-primary-dark font-bold text-2xl leading-tight">
-            Ready to learn this topic?
+            이 주제를 배울 준비가 되었나요?
           </h2>
           {children}
           {path ? (
             <ButtonLink
               className="mt-1"
-              label="Read More"
+              label="더 읽어보기"
               href={path}
               type="primary">
-              Read More
+              더 읽어보기
               <IconNavArrow displayDirection="right" className="inline ml-1" />
             </ButtonLink>
           ) : null}
@@ -136,7 +136,7 @@ function MathI({children}: {children: any}) {
 }
 
 function YouWillLearn({children}: {children: any}) {
-  return <SimpleCallout title="You will learn">{children}</SimpleCallout>;
+  return <SimpleCallout title="배우게 될 것">{children}</SimpleCallout>;
 }
 
 // TODO: typing.

beta/src/components/MDX/Recap.tsx

@@ -13,7 +13,7 @@ function Recap({children}: RecapProps) {
   return (
     <section>
       <H2 isPageAnchor id="recap">
-        Recap
+        요약
       </H2>
       {children}
     </section>

beta/src/components/MDX/Sandpack/CustomPreset.tsx

@@ -99,7 +99,7 @@ export function CustomPreset({
                     className="inline mr-1.5 text-xl"
                     displayDirection={isExpanded ? 'up' : 'down'}
                   />
-                  {isExpanded ? 'Show less' : 'Show more'}
+                  {isExpanded ? '숨기기' : '더 보기'}
                 </span>
               </button>
             )}

beta/src/components/MDX/YouWillLearnCard.tsx

@@ -28,7 +28,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) {
           type="primary"
           size="md"
           label={title}>
-          Read More
+          더 읽어보기
           <IconNavArrow displayDirection="right" className="inline ml-1" />
         </ButtonLink>
       </div>

beta/src/components/Tag.tsx

@@ -8,23 +8,23 @@ import {RouteTag} from './Layout/useRouteMeta';
 
 const variantMap = {
   foundation: {
-    name: 'Foundation',
+    name: '기초',
     classes: 'bg-yellow-50 text-white',
   },
   intermediate: {
-    name: 'Intermediate',
+    name: '중급',
     classes: 'bg-purple-40 text-white',
   },
   advanced: {
-    name: 'Advanced',
+    name: '고급',
     classes: 'bg-green-40 text-white',
   },
   experimental: {
-    name: 'Experimental',
+    name: '실험적인',
     classes: 'bg-ui-orange text-white',
   },
   deprecated: {
-    name: 'Deprecated',
+    name: '사용되지 않는',
     classes: 'bg-red-40 text-white',
   },
 };