feat: add specific interaction patterns and UI structure

- Update Interaction Patterns with specific patterns:
  - OnLoad (skeleton UI, loading states)
  - OnScroll (default page vertical scroll as primary interaction)
  - Notify (Toast, banner, etc.)
  - Alert (Toast)
  - Pause & Ask (popup)
  - Magnify (bottomsheet)
  - Screen to Screen (navigation patterns)
  - Feedback (touch, swipe, etc.)
  - (more to come)

- Update UI Kit structure to reflect atomic design:
  - Atoms (buttons, inputs, icons)
  - Modules (cards, forms, navigation)
  - Views (pages, layouts, screens)

- Update Micro-interaction Patterns with specific patterns:
  - Living icons
  - EmphasisOn
  - Reward delights
  - More to come

- Add comprehensive translation keys for all new patterns
- Include Korean translations for complete i18n support
- Fix TypeScript issues with proper interface definitions
- Update component rendering to handle different data structures
- Maintain responsive design and visual hierarchy

Author: mmaxence

src/components/product/ProductGuidelines.tsx

@@ -2,7 +2,18 @@
 
 import { motion } from 'framer-motion';
 import { useLanguage } from '@/contexts/LanguageContext';
-import { MousePointer, Palette, Zap, Eye, Workflow } from 'lucide-react';
+import { MousePointer, Palette, Zap, Eye, Workflow, LucideIcon } from 'lucide-react';
+
+interface Subsection {
+  id: string;
+  icon: LucideIcon;
+  title: string;
+  subtitle: string;
+  description: string;
+  patterns?: string[];
+  structure?: string[];
+  principles?: string[];
+}
 
 const ProductGuidelines = () => {
   const { t } = useLanguage();
@@ -19,11 +30,16 @@ const ProductGuidelines = () => {
           title: t('product.guidelines.interactionPatterns.title'),
           subtitle: t('product.guidelines.interactionPatterns.subtitle'),
           description: t('product.guidelines.interactionPatterns.description'),
-          principles: [
-            t('product.guidelines.interactionPatterns.principle1'),
-            t('product.guidelines.interactionPatterns.principle2'),
-            t('product.guidelines.interactionPatterns.principle3'),
-            t('product.guidelines.interactionPatterns.principle4')
+          patterns: [
+            t('product.guidelines.interactionPatterns.onLoad'),
+            t('product.guidelines.interactionPatterns.onScroll'),
+            t('product.guidelines.interactionPatterns.notify'),
+            t('product.guidelines.interactionPatterns.alert'),
+            t('product.guidelines.interactionPatterns.pauseAsk'),
+            t('product.guidelines.interactionPatterns.magnify'),
+            t('product.guidelines.interactionPatterns.screenToScreen'),
+            t('product.guidelines.interactionPatterns.feedback'),
+            t('product.guidelines.interactionPatterns.moreToCome')
           ]
         },
         {
@@ -32,11 +48,10 @@ const ProductGuidelines = () => {
           title: t('product.guidelines.uiKit.title'),
           subtitle: t('product.guidelines.uiKit.subtitle'),
           description: t('product.guidelines.uiKit.description'),
-          principles: [
-            t('product.guidelines.uiKit.principle1'),
-            t('product.guidelines.uiKit.principle2'),
-            t('product.guidelines.uiKit.principle3'),
-            t('product.guidelines.uiKit.principle4')
+          structure: [
+            t('product.guidelines.uiKit.atoms'),
+            t('product.guidelines.uiKit.modules'),
+            t('product.guidelines.uiKit.views')
           ]
         },
         {
@@ -45,11 +60,11 @@ const ProductGuidelines = () => {
           title: t('product.guidelines.microInteractionPatterns.title'),
           subtitle: t('product.guidelines.microInteractionPatterns.subtitle'),
           description: t('product.guidelines.microInteractionPatterns.description'),
-          principles: [
-            t('product.guidelines.microInteractionPatterns.principle1'),
-            t('product.guidelines.microInteractionPatterns.principle2'),
-            t('product.guidelines.microInteractionPatterns.principle3'),
-            t('product.guidelines.microInteractionPatterns.principle4')
+          patterns: [
+            t('product.guidelines.microInteractionPatterns.livingIcons'),
+            t('product.guidelines.microInteractionPatterns.emphasisOn'),
+            t('product.guidelines.microInteractionPatterns.rewardDelights'),
+            t('product.guidelines.microInteractionPatterns.moreToCome')
           ]
         }
       ]
@@ -138,7 +153,7 @@ const ProductGuidelines = () => {
               {section.subsections ? (
                 // UX Patterns with subsections
                 <div className="space-y-8">
-                  {section.subsections.map((subsection, subsectionIndex) => (
+                  {section.subsections.map((subsection: Subsection, subsectionIndex) => (
                     <motion.div
                       key={subsection.id}
                       initial={{ opacity: 0, y: 20 }}
@@ -165,14 +180,14 @@ const ProductGuidelines = () => {
                       </div>
 
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                        {subsection.principles.map((principle, principleIndex) => (
+                        {(subsection.patterns || subsection.structure || subsection.principles || []).map((item: string, itemIndex: number) => (
                           <div
-                            key={principleIndex}
+                            key={itemIndex}
                             className="flex items-start space-x-3 p-3 bg-muted/30 rounded-lg"
                           >
                             <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                             <p className="text-muted-foreground text-sm leading-relaxed">
-                              {principle}
+                              {item}
                             </p>
                           </div>
                         ))}

src/contexts/LanguageContext.tsx

@@ -189,26 +189,30 @@ const translations = {
             'product.guidelines.interactionPatterns.title': 'Interaction Patterns',
             'product.guidelines.interactionPatterns.subtitle': 'The foundation of our product experience',
             'product.guidelines.interactionPatterns.description': 'We define interaction patterns before any visual design work begins. These patterns establish how users navigate, engage, and accomplish tasks within our products.',
-            'product.guidelines.interactionPatterns.principle1': 'Define clear user flows and navigation patterns before visual design',
-            'product.guidelines.interactionPatterns.principle2': 'Ensure consistent interaction behaviors across all touchpoints',
-            'product.guidelines.interactionPatterns.principle3': 'Design for accessibility and inclusive user experiences',
-            'product.guidelines.interactionPatterns.principle4': 'Test and validate interaction patterns with real users',
+            'product.guidelines.interactionPatterns.onLoad': 'OnLoad (skeleton UI, loading states)',
+            'product.guidelines.interactionPatterns.onScroll': 'OnScroll (default page vertical scroll as primary interaction)',
+            'product.guidelines.interactionPatterns.notify': 'Notify (Toast, banner, etc.)',
+            'product.guidelines.interactionPatterns.alert': 'Alert (Toast)',
+            'product.guidelines.interactionPatterns.pauseAsk': 'Pause & Ask (popup)',
+            'product.guidelines.interactionPatterns.magnify': 'Magnify (bottomsheet)',
+            'product.guidelines.interactionPatterns.screenToScreen': 'Screen to Screen (navigation patterns)',
+            'product.guidelines.interactionPatterns.feedback': 'Feedback (touch, swipe, etc.)',
+            'product.guidelines.interactionPatterns.moreToCome': '(more to come)',
 
             'product.guidelines.uiKit.title': 'UI Kit',
             'product.guidelines.uiKit.subtitle': 'Visual components built on interaction foundations',
             'product.guidelines.uiKit.description': 'Our UI components are designed to support the interaction patterns we\'ve established. Every component serves a specific interaction purpose.',
-            'product.guidelines.uiKit.principle1': 'Build components that enhance, not hinder, user interactions',
-            'product.guidelines.uiKit.principle2': 'Maintain visual consistency while supporting diverse interaction needs',
-            'product.guidelines.uiKit.principle3': 'Design for scalability and reusability across products',
-            'product.guidelines.uiKit.principle4': 'Document component behavior and interaction states clearly',
+            'product.guidelines.uiKit.atoms': 'Atoms (buttons, inputs, icons)',
+            'product.guidelines.uiKit.modules': 'Modules (cards, forms, navigation)',
+            'product.guidelines.uiKit.views': 'Views (pages, layouts, screens)',
 
             'product.guidelines.microInteractionPatterns.title': 'Micro-interaction Patterns',
             'product.guidelines.microInteractionPatterns.subtitle': 'Polishing details that bring experiences to life',
             'product.guidelines.microInteractionPatterns.description': 'These subtle details add personality and feedback to our interactions, making the experience feel responsive and delightful.',
-            'product.guidelines.microInteractionPatterns.principle1': 'Use animations to provide clear feedback for user actions',
-            'product.guidelines.microInteractionPatterns.principle2': 'Keep micro-interactions purposeful and not distracting',
-            'product.guidelines.microInteractionPatterns.principle3': 'Ensure animations enhance accessibility, not hinder it',
-            'product.guidelines.microInteractionPatterns.principle4': 'Test performance impact of animations on various devices',
+            'product.guidelines.microInteractionPatterns.livingIcons': 'Living icons',
+            'product.guidelines.microInteractionPatterns.emphasisOn': 'EmphasisOn',
+            'product.guidelines.microInteractionPatterns.rewardDelights': 'Reward delights',
+            'product.guidelines.microInteractionPatterns.moreToCome': 'More to come',
 
             'product.guidelines.visualPatterns.title': 'Visual Patterns',
             'product.guidelines.visualPatterns.subtitle': 'Connecting product design to brand identity',
@@ -430,26 +434,30 @@ const translations = {
             'product.guidelines.interactionPatterns.title': '상호작용 패턴',
             'product.guidelines.interactionPatterns.subtitle': '제품 경험의 기초',
             'product.guidelines.interactionPatterns.description': '시각적 디자인 작업을 시작하기 전에 상호작용 패턴을 정의합니다. 이러한 패턴은 사용자가 제품 내에서 탐색하고 참여하며 작업을 완료하는 방법을 설정합니다.',
-            'product.guidelines.interactionPatterns.principle1': '시각적 디자인 전에 명확한 사용자 플로우와 탐색 패턴 정의',
-            'product.guidelines.interactionPatterns.principle2': '모든 터치포인트에서 일관된 상호작용 행동 보장',
-            'product.guidelines.interactionPatterns.principle3': '접근성과 포용적인 사용자 경험을 위한 디자인',
-            'product.guidelines.interactionPatterns.principle4': '실제 사용자와 상호작용 패턴 테스트 및 검증',
+            'product.guidelines.interactionPatterns.onLoad': 'OnLoad (스켈레톤 UI, 로딩 상태)',
+            'product.guidelines.interactionPatterns.onScroll': 'OnScroll (기본 페이지 세로 스크롤을 주요 상호작용으로)',
+            'product.guidelines.interactionPatterns.notify': 'Notify (토스트, 배너 등)',
+            'product.guidelines.interactionPatterns.alert': 'Alert (토스트)',
+            'product.guidelines.interactionPatterns.pauseAsk': 'Pause & Ask (팝업)',
+            'product.guidelines.interactionPatterns.magnify': 'Magnify (바텀시트)',
+            'product.guidelines.interactionPatterns.screenToScreen': 'Screen to Screen (네비게이션 패턴)',
+            'product.guidelines.interactionPatterns.feedback': 'Feedback (터치, 스와이프 등)',
+            'product.guidelines.interactionPatterns.moreToCome': '(더 많은 패턴 예정)',
 
             'product.guidelines.uiKit.title': 'UI 키트',
             'product.guidelines.uiKit.subtitle': '상호작용 기반 위에 구축된 시각적 컴포넌트',
             'product.guidelines.uiKit.description': '우리의 UI 컴포넌트는 우리가 설정한 상호작용 패턴을 지원하도록 설계되었습니다. 모든 컴포넌트는 특정한 상호작용 목적을 제공합니다.',
-            'product.guidelines.uiKit.principle1': '사용자 상호작용을 방해하지 않고 향상시키는 컴포넌트 구축',
-            'product.guidelines.uiKit.principle2': '다양한 상호작용 요구를 지원하면서 시각적 일관성 유지',
-            'product.guidelines.uiKit.principle3': '제품 전반에 걸친 확장성과 재사용성을 위한 디자인',
-            'product.guidelines.uiKit.principle4': '컴포넌트 행동과 상호작용 상태를 명확하게 문서화',
+            'product.guidelines.uiKit.atoms': 'Atoms (버튼, 입력, 아이콘)',
+            'product.guidelines.uiKit.modules': 'Modules (카드, 폼, 네비게이션)',
+            'product.guidelines.uiKit.views': 'Views (페이지, 레이아웃, 화면)',
 
             'product.guidelines.microInteractionPatterns.title': '마이크로 상호작용 패턴',
             'product.guidelines.microInteractionPatterns.subtitle': '경험을 생생하게 만드는 세부 사항',
             'product.guidelines.microInteractionPatterns.description': '이러한 미묘한 세부 사항은 우리의 상호작용에 개성과 피드백을 추가하여 경험이 반응적이고 즐겁게 느껴지도록 합니다.',
-            'product.guidelines.microInteractionPatterns.principle1': '사용자 행동에 대한 명확한 피드백을 제공하기 위해 애니메이션 사용',
-            'product.guidelines.microInteractionPatterns.principle2': '마이크로 상호작용을 목적 있게 유지하고 방해가 되지 않도록 함',
-            'product.guidelines.microInteractionPatterns.principle3': '애니메이션이 접근성을 방해하지 않고 향상시키도록 보장',
-            'product.guidelines.microInteractionPatterns.principle4': '다양한 기기에서 애니메이션의 성능 영향 테스트',
+            'product.guidelines.microInteractionPatterns.livingIcons': 'Living icons',
+            'product.guidelines.microInteractionPatterns.emphasisOn': 'EmphasisOn',
+            'product.guidelines.microInteractionPatterns.rewardDelights': 'Reward delights',
+            'product.guidelines.microInteractionPatterns.moreToCome': 'More to come',
 
             'product.guidelines.visualPatterns.title': '시각적 패턴',
             'product.guidelines.visualPatterns.subtitle': '제품 디자인을 브랜드 아이덴티티와 연결',