Translate: component titles, descriptions, buttons, tags and more (#716)

Author: hanseul-lee

src/components/DocsFooter.tsx

@@ -80,7 +80,7 @@ function FooterLink({
       />
       <span>
         <span className="block no-underline text-sm tracking-wide text-secondary dark:text-secondary-dark uppercase font-bold group-focus:text-link dark:group-focus:text-link-dark group-focus:text-opacity-100">
-          {type}
+          {type === 'Previous' ? '이전' : '다음'}
         </span>
         <span className="block text-lg group-hover:underline">{title}</span>
       </span>

src/components/Layout/Feedback.tsx

@@ -63,7 +63,9 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   return (
     <div className="max-w-xs w-80 lg:w-auto py-3 shadow-lg rounded-lg m-4 bg-wash dark:bg-gray-95 px-4 flex">
       <p className="w-full font-bold text-primary dark:text-primary-dark text-lg mr-4">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+        {isSubmitted
+          ? '피드백을 보내주셔서 감사합니다!'
+          : '이 페이지가 도움이 되었나요?'}
       </p>
       {!isSubmitted && (
         <button

src/components/MDX/Challenges/Challenge.tsx

@@ -50,7 +50,7 @@ export function Challenge({
           className="text-xl text-primary dark:text-primary-dark mb-2 mt-0 font-medium"
           id={currentChallenge.id}>
           <div className="font-bold block md:inline">
-            {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order} of{' '}
+            {isRecipes ? '예제' : '챌린지'} {currentChallenge.order} of{' '}
             {totalChallenges}
             <span className="text-primary dark:text-primary-dark">: </span>
           </div>
@@ -63,14 +63,14 @@ export function Challenge({
           <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>
         ) : (
@@ -80,7 +80,7 @@ export function Challenge({
               onClick={toggleSolution}
               active={showSolution}>
               <IconSolution className="mr-1.5" />{' '}
-              {showSolution ? 'Hide solution' : 'Show solution'}
+              {showSolution ? '정답 숨기기' : '정답 보기'}
             </Button>
           )
         )}
@@ -94,7 +94,7 @@ export function Challenge({
             )}
             onClick={handleClickNextChallenge}
             active>
-            Next {isRecipes ? 'Example' : 'Challenge'}
+            다음 {isRecipes ? '예제' : '챌린지'}
             <IconArrowSmall displayDirection="right" className="block ml-1.5" />
           </Button>
         )}
@@ -104,21 +104,19 @@ export function Challenge({
       {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>
+            <Button onClick={() => setShowSolution(false)}>정답 닫기</Button>
             {hasNextChallenge && (
               <Button
                 className={cn(
                   isRecipes ? 'bg-purple-50' : 'bg-link dark:bg-link-dark'
                 )}
                 onClick={handleClickNextChallenge}
                 active>
-                Next Challenge
+                다음 챌린지
                 <IconArrowSmall
                   displayDirection="right"
                   className="block ml-1.5"

src/components/MDX/Challenges/Challenges.tsx

@@ -78,7 +78,7 @@ export function Challenges({
   children,
   isRecipes,
   noTitle,
-  titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
+  titleText = isRecipes ? '예제 살펴보기' : '챌린지 도전하기',
   titleId = isRecipes ? 'examples' : 'challenges',
 }: ChallengesProps) {
   const challenges = parseChallengeContents(children);

src/components/MDX/ExpandableCallout.tsx

@@ -18,15 +18,15 @@ interface ExpandableCalloutProps {
 
 const variantMap = {
   deprecated: {
-    title: 'Deprecated',
+    title: '더 이상 사용되지 않습니다',
     Icon: IconWarning,
     containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20',
     textColor: 'text-red-50 dark:text-red-40',
     overlayGradient:
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
   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',
@@ -43,7 +43,7 @@ const variantMap = {
       'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
   },
   wip: {
-    title: 'Under Construction',
+    title: '개발중이에요',
     Icon: IconNote,
     containerClasses: 'bg-yellow-5 dark:bg-yellow-60 dark:bg-opacity-20',
     textColor: 'text-yellow-50 dark:text-yellow-40',

src/components/MDX/ExpandableExample.tsx

@@ -101,7 +101,7 @@ function ExpandableExample({children, excerpt, type}: ExpandableExampleProps) {
           <span className="mr-1">
             <IconChevron displayDirection={isExpanded ? 'up' : 'down'} />
           </span>
-          {isExpanded ? 'Hide Details' : 'Show Details'}
+          {isExpanded ? '숨기기' : '자세히 보기'}
         </Button>
       </summary>
       <div

src/components/MDX/MDXComponents.tsx

@@ -113,7 +113,7 @@ function LearnMore({
       <section className="p-8 mt-16 mb-16 flex flex-row shadow-inner-border dark:shadow-inner-border-dark justify-between items-center bg-card dark:bg-card-dark rounded-2xl">
         <div className="flex-col">
           <h2 className="text-primary font-display dark:text-primary-dark font-bold text-2xl leading-tight">
-            Ready to learn this topic?
+            이 주제를 배울 준비가 되셨나요?
           </h2>
           {children}
           {path ? (
@@ -122,7 +122,7 @@ function LearnMore({
               label="Read More"
               href={path}
               type="primary">
-              Read More
+              더 보기
               <IconNavArrow displayDirection="right" className="inline ml-1" />
             </ButtonLink>
           ) : null}
@@ -173,7 +173,7 @@ function YouWillLearn({
   children: any;
   isChapter?: boolean;
 }) {
-  let title = isChapter ? 'In this chapter' : 'You will learn';
+  let title = isChapter ? '이 장에서는' : '학습 내용';
   return <SimpleCallout title={title}>{children}</SimpleCallout>;
 }
 

src/components/MDX/Recap.tsx

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

src/components/Tag.tsx

@@ -7,23 +7,23 @@ import type {RouteTag} from './Layout/getRouteMeta';
 
 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',
   },
 };