feat: comprehensive translation coverage for all new content

mmaxence · mmaxence · commit 5a7c42dd3b75 · 2025-10-28T13:43:26.000+09:00
- Add translations for new menu items (UX Patterns, Visual Patterns, Workflow &amp; Rituals)
- Add translations for all new page content and section labels
- Add translations for footer links and sub-pages with proper indentation
- Add comprehensive translations for interaction patterns with titles and descriptions
- Update data structure to use translation keys instead of hardcoded text
- Add Korean translations for all new content
- Update components to use translation system consistently
- Fix TypeScript interfaces to support new translation structure

All new pages and content are now fully covered by the translation logic
with proper English and Korean translations throughout the application.
diff --git a/src/app/product/UX-patterns/page.tsx b/src/app/product/UX-patterns/page.tsx
@@ -17,9 +17,9 @@ const UXPatternsPage = () => {
   const router = useRouter();
 
   const sections = [
-    { id: 'interaction-patterns', label: 'Interaction Patterns' },
-    { id: 'ui-kit', label: 'UI Kit' },
-    { id: 'micro-interactions', label: 'Micro-interactions' }
+    { id: 'interaction-patterns', label: t('pages.sections.interactionPatterns') },
+    { id: 'ui-kit', label: t('pages.sections.uiKit') },
+    { id: 'micro-interactions', label: t('pages.sections.microInteractions') }
   ];
 
 
@@ -38,7 +38,7 @@ const UXPatternsPage = () => {
             whileHover={{ x: -4 }}
           >
             <ArrowLeft className="w-4 h-4" />
-            <span>Back to Guidelines</span>
+            <span>{t('pages.backToGuidelines')}</span>
           </motion.button>
         </div>
       </div>
diff --git a/src/app/product/visual-patterns/page.tsx b/src/app/product/visual-patterns/page.tsx
@@ -15,9 +15,9 @@ const VisualPatternsPage = () => {
   const router = useRouter();
 
   const sections = [
-    { id: 'principles', label: 'Design Principles' },
-    { id: 'guidelines', label: 'Visual Guidelines' },
-    { id: 'coming-soon', label: 'Coming Soon' }
+    { id: 'principles', label: t('pages.sections.designPrinciples') },
+    { id: 'guidelines', label: t('pages.sections.visualGuidelines') },
+    { id: 'coming-soon', label: t('pages.sections.comingSoon') }
   ];
 
   const principles = [
@@ -42,7 +42,7 @@ const VisualPatternsPage = () => {
             whileHover={{ x: -4 }}
           >
             <ArrowLeft className="w-4 h-4" />
-            <span>Back to Guidelines</span>
+            <span>{t('pages.backToGuidelines')}</span>
           </motion.button>
         </div>
       </div>
diff --git a/src/app/product/workflow-rituals/page.tsx b/src/app/product/workflow-rituals/page.tsx
@@ -15,9 +15,9 @@ const WorkflowRitualsPage = () => {
   const router = useRouter();
 
   const sections = [
-    { id: 'principles', label: 'Core Principles' },
-    { id: 'workflow', label: 'Workflow Steps' },
-    { id: 'coming-soon', label: 'Coming Soon' }
+    { id: 'principles', label: t('pages.sections.corePrinciples') },
+    { id: 'workflow', label: t('pages.sections.workflowSteps') },
+    { id: 'coming-soon', label: t('pages.sections.comingSoon') }
   ];
 
   const principles = [
@@ -42,7 +42,7 @@ const WorkflowRitualsPage = () => {
             whileHover={{ x: -4 }}
           >
             <ArrowLeft className="w-4 h-4" />
-            <span>Back to Guidelines</span>
+            <span>{t('pages.backToGuidelines')}</span>
           </motion.button>
         </div>
       </div>
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -31,9 +31,9 @@ const Footer = () => {
     'Product': [
       { name: t('footer.product.principles'), href: '/design/product#principles' },
       { name: t('footer.product.guidelines'), href: '/design/product#guidelines' },
-      { name: 'UX Patterns', href: '/design/product/UX-patterns', isIndented: true },
-      { name: 'Visual Patterns', href: '/design/product/visual-patterns', isIndented: true },
-      { name: 'Workflow & Rituals', href: '/design/product/workflow-rituals', isIndented: true },
+      { name: t('nav.product.uxPatterns'), href: '/design/product/UX-patterns', isIndented: true },
+      { name: t('nav.product.visualPatterns'), href: '/design/product/visual-patterns', isIndented: true },
+      { name: t('nav.product.workflowRituals'), href: '/design/product/workflow-rituals', isIndented: true },
       { name: t('footer.product.resources'), href: '/design/product#resources' },
     ],
     'Connect': [
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -25,9 +25,9 @@ const Header = () => {
       submenuItems: [
         { name: t('product.sections.principles'), href: '/product#principles' },
         { name: t('product.sections.guidelines'), href: '/product#guidelines' },
-        { name: 'UX Patterns', href: '/product/UX-patterns', isIndented: true },
-        { name: 'Visual Patterns', href: '/product/visual-patterns', isIndented: true },
-        { name: 'Workflow & Rituals', href: '/product/workflow-rituals', isIndented: true },
+        { name: t('nav.product.uxPatterns'), href: '/product/UX-patterns', isIndented: true },
+        { name: t('nav.product.visualPatterns'), href: '/product/visual-patterns', isIndented: true },
+        { name: t('nav.product.workflowRituals'), href: '/product/workflow-rituals', isIndented: true },
         { name: t('product.sections.resources'), href: '/product#resources' },
       ]
     },
@@ -46,7 +46,7 @@ const Header = () => {
             }}
           >
             <Logo size={32} className="text-white" />
-            <span className="text-lg font-semibold text-foreground">Buzzvil Design</span>
+            <span className="text-lg font-extrabold text-foreground">buzzvil / design</span>
           </motion.div>
 
           {/* Desktop Navigation */}
diff --git a/src/components/ui/CodePreview.tsx b/src/components/ui/CodePreview.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { Copy } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
 
 interface CodePreviewProps {
   code: string;
@@ -12,6 +13,7 @@ interface CodePreviewProps {
 
 const CodePreview = ({ code, patternId, className = '' }: CodePreviewProps) => {
   const [copiedPattern, setCopiedPattern] = useState<string | null>(null);
+  const { t } = useLanguage();
 
   const handleCopyCode = async () => {
     try {
@@ -27,15 +29,15 @@ const CodePreview = ({ code, patternId, className = '' }: CodePreviewProps) => {
     <div className={`space-y-3 ${className}`}>
       <div className="flex items-center justify-between">
         <h5 className="text-sm font-medium text-white">
-          Code Example
+          {t('codePreview.title')}
         </h5>
         <motion.button
           onClick={handleCopyCode}
           className="flex items-center space-x-1 text-xs text-muted-foreground hover:text-white transition-colors"
           whileTap={{ scale: 0.95 }}
         >
           <Copy className="w-3 h-3" />
-          <span>{copiedPattern === patternId ? 'Copied!' : 'Copy'}</span>
+          <span>{copiedPattern === patternId ? t('codePreview.copied') : t('codePreview.copy')}</span>
         </motion.button>
       </div>
       <div className="bg-muted/10 border border-border/50 rounded-lg p-4 overflow-x-auto">
diff --git a/src/components/ui/LivePreview.tsx b/src/components/ui/LivePreview.tsx
@@ -2,6 +2,7 @@
 
 import { ReactNode } from 'react';
 import { Smartphone } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
 
 interface LivePreviewProps {
   title: string;
@@ -10,10 +11,12 @@ interface LivePreviewProps {
 }
 
 const LivePreview = ({ title, children, className = '' }: LivePreviewProps) => {
+  const { t } = useLanguage();
+  
   return (
     <div className={`space-y-3 ${className}`}>
       <h5 className="text-sm font-medium text-white">
-        Live Preview
+        {t('livePreview.title')}
       </h5>
       <div className="flex justify-center">
         {/* Mobile Frame with 9:16 ratio (vertical phone) */}
@@ -30,7 +33,7 @@ const LivePreview = ({ title, children, className = '' }: LivePreviewProps) => {
                   {title}
                 </p>
                 <p className="text-xs text-muted-foreground/70">
-                  Preview coming soon
+                  {t('livePreview.comingSoon')}
                 </p>
               </div>
             )}
diff --git a/src/components/ui/PatternAccordion.tsx b/src/components/ui/PatternAccordion.tsx
@@ -5,11 +5,12 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { ChevronDown } from 'lucide-react';
 import LivePreview from './LivePreview';
 import CodePreview from './CodePreview';
+import { useLanguage } from '@/contexts/LanguageContext';
 
 interface InteractionPattern {
   id: string;
-  title: string;
-  description: string;
+  titleKey: string;
+  descriptionKey: string;
   tags: string[];
   code?: string;
 }
@@ -21,6 +22,7 @@ interface PatternAccordionProps {
 
 const PatternAccordion = ({ patterns, className = '' }: PatternAccordionProps) => {
   const [openPattern, setOpenPattern] = useState<string | null>(null);
+  const { t } = useLanguage();
 
   const handlePatternToggle = (patternId: string) => {
     setOpenPattern(openPattern === patternId ? null : patternId);
@@ -44,7 +46,7 @@ const PatternAccordion = ({ patterns, className = '' }: PatternAccordionProps) =
           >
             <div className="flex-1">
               <h4 className="text-base font-semibold text-white">
-                {pattern.title}
+                {t(pattern.titleKey)}
               </h4>
             </div>
             <motion.div
@@ -74,9 +76,9 @@ const PatternAccordion = ({ patterns, className = '' }: PatternAccordionProps) =
                         <h5 className="text-sm font-medium text-white">
                           Description
                         </h5>
-                        <p className="text-muted-foreground leading-relaxed text-sm">
-                          {pattern.description}
-                        </p>
+                                <p className="text-muted-foreground leading-relaxed text-sm">
+                                  {t(pattern.descriptionKey)}
+                                </p>
                         
                         {/* Tags */}
                         <div className="flex flex-wrap gap-2 mt-3">
@@ -102,7 +104,7 @@ const PatternAccordion = ({ patterns, className = '' }: PatternAccordionProps) =
 
                     {/* Right Column - Live Preview */}
                     <div className="lg:col-span-1">
-                      <LivePreview title={pattern.title} />
+                      <LivePreview title={t(pattern.titleKey)} />
                     </div>
                   </div>
                 </div>
diff --git a/src/contexts/LanguageContext.tsx b/src/contexts/LanguageContext.tsx
@@ -250,6 +250,65 @@ const translations = {
             'product.resources.title': 'Product Resources',
             'product.resources.description': 'Download our design system components, templates, and development resources. Everything you need to build consistent product experiences.',
             
+            // New submenu items
+            'nav.product.uxPatterns': 'UX Patterns',
+            'nav.product.visualPatterns': 'Visual Patterns',
+            'nav.product.workflowRituals': 'Workflow & Rituals',
+            
+            // Page-specific translations
+            'pages.backToGuidelines': 'Back to Guidelines',
+            'pages.sections.interactionPatterns': 'Interaction Patterns',
+            'pages.sections.uiKit': 'UI Kit',
+            'pages.sections.microInteractions': 'Micro-interactions',
+            'pages.sections.designPrinciples': 'Design Principles',
+            'pages.sections.visualGuidelines': 'Visual Guidelines',
+            'pages.sections.comingSoon': 'Coming Soon',
+            'pages.sections.corePrinciples': 'Core Principles',
+            'pages.sections.workflowSteps': 'Workflow Steps',
+            
+            // Interaction Patterns specific
+            'interactionPatterns.whileLoading': 'While loading',
+            'interactionPatterns.whileLoading.description': 'Skeleton screens, loading states, and progressive disclosure patterns that keep users engaged during wait times.',
+            'interactionPatterns.pageScroll': 'Page Scroll',
+            'interactionPatterns.pageScroll.description': 'Default vertical scrolling as the primary interaction pattern, with parallax and reveal animations.',
+            'interactionPatterns.notify': 'Notify',
+            'interactionPatterns.notify.description': 'Toast notifications, banners, and system messages that provide feedback without interrupting user flow.',
+            'interactionPatterns.alert': 'Alert',
+            'interactionPatterns.alert.description': 'Critical notifications and warnings that require immediate user attention and action.',
+            'interactionPatterns.pauseAsk': 'Pause & Ask',
+            'interactionPatterns.pauseAsk.description': 'Modal dialogs and popups that pause user flow to gather information or confirm actions.',
+            'interactionPatterns.magnify': 'Magnify',
+            'interactionPatterns.magnify.description': 'Expandable content and bottom sheets that reveal additional information or options.',
+            'interactionPatterns.screenToScreen': 'Screen to Screen',
+            'interactionPatterns.screenToScreen.description': 'Smooth transitions between different views or screens with clear navigation hierarchy.',
+            'interactionPatterns.feedback': 'Feedback',
+            'interactionPatterns.feedback.description': 'Immediate visual or haptic feedback for user interactions to create responsive experiences.',
+            'interactionPatterns.moreToCome': 'More to come',
+            'interactionPatterns.moreToCome.description': 'Additional patterns will be added as we discover and document new interaction needs.',
+            
+            // UI Kit specific
+            'uiKit.atoms': 'Atoms',
+            'uiKit.molecules': 'Molecules',
+            'uiKit.organisms': 'Organisms',
+            'uiKit.templates': 'Templates',
+            'uiKit.pages': 'Pages',
+            'uiKit.moreToCome': 'More to come',
+            
+            // Micro-interactions specific
+            'microInteractions.livingIcons': 'Living Icons',
+            'microInteractions.emphasisOn': 'Emphasis On',
+            'microInteractions.rewardDelights': 'Reward Delights',
+            'microInteractions.moreToCome': 'More to come',
+            
+            // Code preview
+            'codePreview.title': 'Code Example',
+            'codePreview.copy': 'Copy',
+            'codePreview.copied': 'Copied!',
+            
+            // Live preview
+            'livePreview.title': 'Live Preview',
+            'livePreview.comingSoon': 'Preview coming soon',
+            
             // Footer
             'footer.description': 'Home to Buzzvil\'s design source of truth. We build in the open. This portal is primarily meant to be used internally and by our partners, but we also like anyone to have a look at how we work!',
             'footer.foundations.mission': 'The Mission',
@@ -509,6 +568,65 @@ const translations = {
             'product.resources.title': '제품 리소스',
             'product.resources.description': '디자인 시스템 컴포넌트, 템플릿, 개발 리소스를 다운로드하세요. 일관된 제품 경험을 구축하는 데 필요한 모든 것.',
             
+            // New submenu items
+            'nav.product.uxPatterns': 'UX 패턴',
+            'nav.product.visualPatterns': '시각적 패턴',
+            'nav.product.workflowRituals': '워크플로우 & 의식',
+            
+            // Page-specific translations
+            'pages.backToGuidelines': '가이드라인으로 돌아가기',
+            'pages.sections.interactionPatterns': '상호작용 패턴',
+            'pages.sections.uiKit': 'UI 키트',
+            'pages.sections.microInteractions': '마이크로 상호작용',
+            'pages.sections.designPrinciples': '디자인 원칙',
+            'pages.sections.visualGuidelines': '시각적 가이드라인',
+            'pages.sections.comingSoon': '곧 출시',
+            'pages.sections.corePrinciples': '핵심 원칙',
+            'pages.sections.workflowSteps': '워크플로우 단계',
+            
+            // Interaction Patterns specific
+            'interactionPatterns.whileLoading': '로딩 중',
+            'interactionPatterns.whileLoading.description': '사용자가 대기하는 동안 참여를 유지하는 스켈레톤 화면, 로딩 상태, 점진적 공개 패턴입니다.',
+            'interactionPatterns.pageScroll': '페이지 스크롤',
+            'interactionPatterns.pageScroll.description': '패럴랙스와 공개 애니메이션을 포함한 주요 상호작용 패턴으로서의 기본 세로 스크롤입니다.',
+            'interactionPatterns.notify': '알림',
+            'interactionPatterns.notify.description': '사용자 플로우를 방해하지 않고 피드백을 제공하는 토스트 알림, 배너, 시스템 메시지입니다.',
+            'interactionPatterns.alert': '경고',
+            'interactionPatterns.alert.description': '즉각적인 사용자 주의와 조치가 필요한 중요한 알림과 경고입니다.',
+            'interactionPatterns.pauseAsk': '일시정지 & 질문',
+            'interactionPatterns.pauseAsk.description': '정보를 수집하거나 작업을 확인하기 위해 사용자 플로우를 일시 중지하는 모달 대화상자와 팝업입니다.',
+            'interactionPatterns.magnify': '확대',
+            'interactionPatterns.magnify.description': '추가 정보나 옵션을 보여주는 확장 가능한 콘텐츠와 바텀시트입니다.',
+            'interactionPatterns.screenToScreen': '화면 간 이동',
+            'interactionPatterns.screenToScreen.description': '명확한 네비게이션 계층을 가진 다른 뷰나 화면 간의 부드러운 전환입니다.',
+            'interactionPatterns.feedback': '피드백',
+            'interactionPatterns.feedback.description': '반응적인 경험을 만들기 위한 사용자 상호작용에 대한 즉각적인 시각적 또는 햅틱 피드백입니다.',
+            'interactionPatterns.moreToCome': '더 많은 패턴 예정',
+            'interactionPatterns.moreToCome.description': '새로운 상호작용 요구를 발견하고 문서화함에 따라 추가 패턴이 추가될 예정입니다.',
+            
+            // UI Kit specific
+            'uiKit.atoms': '원자',
+            'uiKit.molecules': '분자',
+            'uiKit.organisms': '유기체',
+            'uiKit.templates': '템플릿',
+            'uiKit.pages': '페이지',
+            'uiKit.moreToCome': '더 많은 컴포넌트 예정',
+            
+            // Micro-interactions specific
+            'microInteractions.livingIcons': '살아있는 아이콘',
+            'microInteractions.emphasisOn': '강조',
+            'microInteractions.rewardDelights': '보상 기쁨',
+            'microInteractions.moreToCome': '더 많은 패턴 예정',
+            
+            // Code preview
+            'codePreview.title': '코드 예제',
+            'codePreview.copy': '복사',
+            'codePreview.copied': '복사됨!',
+            
+            // Live preview
+            'livePreview.title': '라이브 미리보기',
+            'livePreview.comingSoon': '미리보기 곧 출시',
+            
             // Footer
             'footer.description': '버즈빌의 디자인 진실의 원천이 되는 곳입니다. 우리는 공개적으로 구축합니다. 이 포털은 주로 내부적으로 그리고 파트너들이 사용하도록 의도되었지만, 우리가 어떻게 일하는지 누구나 살펴볼 수 있기를 좋아합니다!',
             'footer.foundations.mission': '미션',
diff --git a/src/data/interactionPatterns.ts b/src/data/interactionPatterns.ts
