@kood/claude-code 0.4.0 → 0.5.0

package/templates/.claude/skills/nextjs-react-best-practices/rules/js-combine-iterations.md

@@ -5,11 +5,11 @@ impactDescription: reduces iterations
 tags: javascript, arrays, loops, performance
 ---
 
-## Combine Multiple Array Iterations
+## 여러 배열 반복 결합
 
-Multiple `.filter()` or `.map()` calls iterate the array multiple times. Combine into one loop.
+여러 `.filter()` 또는 `.map()` 호출은 배열을 여러 번 반복합니다. 하나의 루프로 결합하세요.
 
-**Incorrect (3 iterations):**
+**❌ 잘못된 예시 (3번 반복):**
 
 ```typescript
 const admins = users.filter(u => u.isAdmin)
@@ -17,7 +17,7 @@ const testers = users.filter(u => u.isTester)
 const inactive = users.filter(u => !u.isActive)
 ```
 
-**Correct (1 iteration):**
+**✅ 올바른 예시 (1번 반복):**
 
 ```typescript
 const admins: User[] = []

package/templates/.claude/skills/nextjs-react-best-practices/rules/js-early-exit.md

@@ -5,17 +5,17 @@ impactDescription: avoids unnecessary computation
 tags: javascript, functions, optimization, early-return
 ---
 
-## Early Return from Functions
+## 함수에서 조기 반환
 
-Return early when result is determined to skip unnecessary processing.
+결과가 결정되면 불필요한 처리를 건너뛰기 위해 조기 반환하세요.
 
-**Incorrect (processes all items even after finding answer):**
+**❌ 잘못된 예 (답을 찾은 후에도 모든 항목 처리):**
 
 ```typescript
 function validateUsers(users: User[]) {
   let hasError = false
   let errorMessage = ''
-  
+
   for (const user of users) {
     if (!user.email) {
       hasError = true
@@ -25,14 +25,14 @@ function validateUsers(users: User[]) {
       hasError = true
       errorMessage = 'Name required'
     }
-    // Continues checking all users even after error found
+    // 오류를 찾은 후에도 모든 사용자를 계속 확인
   }
-  
+
   return hasError ? { valid: false, error: errorMessage } : { valid: true }
 }
 ```
 
-**Correct (returns immediately on first error):**
+**✅ 올바른 예 (첫 번째 오류에서 즉시 반환):**
 
 ```typescript
 function validateUsers(users: User[]) {

package/templates/.claude/skills/nextjs-react-best-practices/rules/js-hoist-regexp.md

@@ -5,11 +5,11 @@ impactDescription: avoids recreation
 tags: javascript, regexp, optimization, memoization
 ---
 
-## Hoist RegExp Creation
+## RegExp 생성 호이스팅
 
-Don't create RegExp inside render. Hoist to module scope or memoize with `useMemo()`.
+렌더 내부에서 RegExp를 생성하지 마세요. 모듈 스코프로 호이스팅하거나 `useMemo()`로 메모이제이션하세요.
 
-**Incorrect (new RegExp every render):**
+**❌ 잘못된 예 (매 렌더마다 새 RegExp):**
 
 ```tsx
 function Highlighter({ text, query }: Props) {
@@ -19,7 +19,7 @@ function Highlighter({ text, query }: Props) {
 }
 ```
 
-**Correct (memoize or hoist):**
+**✅ 올바른 예 (메모이제이션 또는 호이스팅):**
 
 ```tsx
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
@@ -34,9 +34,9 @@ function Highlighter({ text, query }: Props) {
 }
 ```
 
-**Warning (global regex has mutable state):**
+**⚠️ 주의 (전역 정규식은 가변 상태를 가짐):**
 
-Global regex (`/g`) has mutable `lastIndex` state:
+전역 정규식(`/g`)은 가변적인 `lastIndex` 상태를 가집니다:
 
 ```typescript
 const regex = /foo/g

package/templates/.claude/skills/nextjs-react-best-practices/rules/js-index-maps.md

@@ -5,11 +5,11 @@ impactDescription: 1M ops to 2K ops
 tags: javascript, map, indexing, optimization, performance
 ---
 
-## Build Index Maps for Repeated Lookups
+## 반복 조회를 위한 인덱스 맵 구축
 
-Multiple `.find()` calls by the same key should use a Map.
+동일한 키로 여러 번 `.find()` 호출하는 경우 Map을 사용하세요.
 
-**Incorrect (O(n) per lookup):**
+**❌ 잘못된 예시 (조회당 O(n)):**
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
@@ -20,7 +20,7 @@ function processOrders(orders: Order[], users: User[]) {
 }
 ```
 
-**Correct (O(1) per lookup):**
+**✅ 올바른 예시 (조회당 O(1)):**
 
 ```typescript
 function processOrders(orders: Order[], users: User[]) {
@@ -33,5 +33,5 @@ function processOrders(orders: Order[], users: User[]) {
 }
 ```
 
-Build map once (O(n)), then all lookups are O(1).
-For 1000 orders × 1000 users: 1M ops → 2K ops.
+맵을 한 번만 구축하고(O(n)), 이후 모든 조회는 O(1)입니다.
+1000개 주문 × 1000명 사용자의 경우: 1M 연산 → 2K 연산으로 감소합니다.

package/templates/.claude/skills/nextjs-react-best-practices/rules/js-length-check-first.md

@@ -5,32 +5,32 @@ impactDescription: avoids expensive operations when lengths differ
 tags: javascript, arrays, performance, optimization, comparison
 ---
 
-## Early Length Check for Array Comparisons
+## 배열 비교 시 길이 우선 체크
 
-When comparing arrays with expensive operations (sorting, deep equality, serialization), check lengths first. If lengths differ, the arrays cannot be equal.
+정렬, 깊은 비교, 직렬화 등 비용이 큰 연산으로 배열을 비교할 때는 길이를 먼저 확인하세요. 길이가 다르면 배열이 같을 수 없습니다.
 
-In real-world applications, this optimization is especially valuable when the comparison runs in hot paths (event handlers, render loops).
+실제 애플리케이션에서 이 최적화는 비교가 핫 패스(이벤트 핸들러, 렌더 루프)에서 실행될 때 특히 유용합니다.
 
-**Incorrect (always runs expensive comparison):**
+**❌ 잘못된 예 (항상 비싼 비교 실행):**
 
 ```typescript
 function hasChanges(current: string[], original: string[]) {
-  // Always sorts and joins, even when lengths differ
+  // 길이가 다른 경우에도 항상 정렬과 join 실행
   return current.sort().join() !== original.sort().join()
 }
 ```
 
-Two O(n log n) sorts run even when `current.length` is 5 and `original.length` is 100. There is also overhead of joining the arrays and comparing the strings.
+`current.length`가 5이고 `original.length`가 100인 경우에도 두 개의 O(n log n) 정렬이 실행됩니다. 배열을 join하고 문자열을 비교하는 오버헤드도 발생합니다.
 
-**Correct (O(1) length check first):**
+**✅ 올바른 예 (O(1) 길이 체크 우선):**
 
 ```typescript
 function hasChanges(current: string[], original: string[]) {
-  // Early return if lengths differ
+  // 길이가 다르면 조기 반환
   if (current.length !== original.length) {
     return true
   }
-  // Only sort/join when lengths match
+  // 길이가 같을 때만 정렬/join
   const currentSorted = current.toSorted()
   const originalSorted = original.toSorted()
   for (let i = 0; i < currentSorted.length; i++) {
@@ -42,8 +42,8 @@ function hasChanges(current: string[], original: string[]) {
 }
 ```
 
-This new approach is more efficient because:
-- It avoids the overhead of sorting and joining the arrays when lengths differ
-- It avoids consuming memory for the joined strings (especially important for large arrays)
-- It avoids mutating the original arrays
-- It returns early when a difference is found
+이 새로운 접근 방식이 더 효율적인 이유:
+- 길이가 다를 때 정렬과 join의 오버헤드를 피함
+- join된 문자열을 위한 메모리 소비를 피함 (특히 큰 배열에 중요)
+- 원본 배열 변형을 피함
+- 차이를 발견하면 조기 반환

package/templates/.claude/skills/nextjs-react-best-practices/rules/js-min-max-loop.md

@@ -5,11 +5,11 @@ impactDescription: O(n) instead of O(n log n)
 tags: javascript, arrays, performance, sorting, algorithms
 ---
 
-## Use Loop for Min/Max Instead of Sort
+## 최소/최대값은 정렬 대신 루프 사용
 
-Finding the smallest or largest element only requires a single pass through the array. Sorting is wasteful and slower.
+가장 작거나 큰 요소를 찾는 것은 배열을 한 번 순회하는 것만으로 충분합니다. 정렬은 낭비이며 느립니다.
 
-**Incorrect (O(n log n) - sort to find latest):**
+**❌ 잘못된 예 (O(n log n) - 최신값을 찾기 위해 정렬):**
 
 ```typescript
 interface Project {
@@ -24,9 +24,9 @@ function getLatestProject(projects: Project[]) {
 }
 ```
 
-Sorts the entire array just to find the maximum value.
+최대값을 찾기 위해 전체 배열을 정렬합니다.
 
-**Incorrect (O(n log n) - sort for oldest and newest):**
+**❌ 잘못된 예 (O(n log n) - 가장 오래된 것과 최신값을 위해 정렬):**
 
 ```typescript
 function getOldestAndNewest(projects: Project[]) {
@@ -35,43 +35,43 @@ function getOldestAndNewest(projects: Project[]) {
 }
 ```
 
-Still sorts unnecessarily when only min/max are needed.
+최소/최대값만 필요한데도 불필요하게 정렬합니다.
 
-**Correct (O(n) - single loop):**
+**✅ 올바른 예 (O(n) - 단일 루프):**
 
 ```typescript
 function getLatestProject(projects: Project[]) {
   if (projects.length === 0) return null
-  
+
   let latest = projects[0]
-  
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt > latest.updatedAt) {
       latest = projects[i]
     }
   }
-  
+
   return latest
 }
 
 function getOldestAndNewest(projects: Project[]) {
   if (projects.length === 0) return { oldest: null, newest: null }
-  
+
   let oldest = projects[0]
   let newest = projects[0]
-  
+
   for (let i = 1; i < projects.length; i++) {
     if (projects[i].updatedAt < oldest.updatedAt) oldest = projects[i]
     if (projects[i].updatedAt > newest.updatedAt) newest = projects[i]
   }
-  
+
   return { oldest, newest }
 }
 ```
 
-Single pass through the array, no copying, no sorting.
+배열을 단일 패스로 순회, 복사 없음, 정렬 없음.
 
-**Alternative (Math.min/Math.max for small arrays):**
+**대안 (작은 배열의 경우 Math.min/Math.max):**
 
 ```typescript
 const numbers = [5, 2, 8, 1, 9]
@@ -79,4 +79,4 @@ const min = Math.min(...numbers)
 const max = Math.max(...numbers)
 ```
 
-This works for small arrays but can be slower for very large arrays due to spread operator limitations. Use the loop approach for reliability.
+이것은 작은 배열에서는 동작하지만 spread 연산자 제한으로 인해 매우 큰 배열에서는 느릴 수 있습니다. 안정성을 위해 루프 접근 방식을 사용하세요.

package/templates/.claude/skills/nextjs-react-best-practices/rules/js-set-map-lookups.md

@@ -5,18 +5,18 @@ impactDescription: O(n) to O(1)
 tags: javascript, set, map, data-structures, performance
 ---
 
-## Use Set/Map for O(1) Lookups
+## O(1) 조회를 위해 Set/Map 사용
 
-Convert arrays to Set/Map for repeated membership checks.
+반복적인 멤버십 검사를 위해 배열을 Set/Map으로 변환하세요.
 
-**Incorrect (O(n) per check):**
+**❌ 잘못된 예 (검사마다 O(n)):**
 
 ```typescript
 const allowedIds = ['a', 'b', 'c', ...]
 items.filter(item => allowedIds.includes(item.id))
 ```
 
-**Correct (O(1) per check):**
+**✅ 올바른 예 (검사마다 O(1)):**
 
 ```typescript
 const allowedIds = new Set(['a', 'b', 'c', ...])

package/templates/.claude/skills/nextjs-react-best-practices/rules/js-tosorted-immutable.md

@@ -5,15 +5,15 @@ impactDescription: prevents mutation bugs in React state
 tags: javascript, arrays, immutability, react, state, mutation
 ---
 
-## Use toSorted() Instead of sort() for Immutability
+## 불변성을 위해 sort() 대신 toSorted() 사용
 
-`.sort()` mutates the array in place, which can cause bugs with React state and props. Use `.toSorted()` to create a new sorted array without mutation.
+`.sort()`는 배열을 제자리에서 변형하여 React 상태 및 props에서 버그를 일으킬 수 있습니다. 변형 없이 새로운 정렬된 배열을 생성하려면 `.toSorted()`를 사용하세요.
 
-**Incorrect (mutates original array):**
+**❌ 잘못된 예 (원본 배열 변형):**
 
 ```typescript
 function UserList({ users }: { users: User[] }) {
-  // Mutates the users prop array!
+  // users prop 배열을 변형합니다!
   const sorted = useMemo(
     () => users.sort((a, b) => a.name.localeCompare(b.name)),
     [users]
@@ -22,11 +22,11 @@ function UserList({ users }: { users: User[] }) {
 }
 ```
 
-**Correct (creates new array):**
+**✅ 올바른 예 (새 배열 생성):**
 
 ```typescript
 function UserList({ users }: { users: User[] }) {
-  // Creates new sorted array, original unchanged
+  // 새로운 정렬된 배열 생성, 원본은 변경되지 않음
   const sorted = useMemo(
     () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
     [users]
@@ -35,23 +35,23 @@ function UserList({ users }: { users: User[] }) {
 }
 ```
 
-**Why this matters in React:**
+**React에서 중요한 이유:**
 
-1. Props/state mutations break React's immutability model - React expects props and state to be treated as read-only
-2. Causes stale closure bugs - Mutating arrays inside closures (callbacks, effects) can lead to unexpected behavior
+1. Props/state 변형은 React의 불변성 모델을 깨뜨림 - React는 props와 state가 읽기 전용으로 취급되길 기대
+2. 오래된 클로저 버그 발생 - 클로저(콜백, 이펙트) 내부에서 배열을 변형하면 예상치 못한 동작이 발생할 수 있음
 
-**Browser support (fallback for older browsers):**
+**브라우저 지원 (구형 브라우저를 위한 폴백):**
 
-`.toSorted()` is available in all modern browsers (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+). For older environments, use spread operator:
+`.toSorted()`는 모든 최신 브라우저(Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+)에서 사용 가능합니다. 구형 환경의 경우 spread 연산자를 사용하세요:
 
 ```typescript
-// Fallback for older browsers
+// 구형 브라우저를 위한 폴백
 const sorted = [...items].sort((a, b) => a.value - b.value)
 ```
 
-**Other immutable array methods:**
+**다른 불변 배열 메서드:**
 
-- `.toSorted()` - immutable sort
-- `.toReversed()` - immutable reverse
-- `.toSpliced()` - immutable splice
-- `.with()` - immutable element replacement
+- `.toSorted()` - 불변 정렬
+- `.toReversed()` - 불변 역순
+- `.toSpliced()` - 불변 splice
+- `.with()` - 불변 요소 교체

package/templates/.claude/skills/nextjs-react-best-practices/rules/rendering-activity.md

@@ -5,11 +5,11 @@ impactDescription: preserves state/DOM
 tags: rendering, activity, visibility, state-preservation
 ---
 
-## Use Activity Component for Show/Hide
+## 표시/숨김에 Activity 컴포넌트 사용
 
-Use React's `<Activity>` to preserve state/DOM for expensive components that frequently toggle visibility.
+자주 가시성을 전환하는 비용이 많이 드는 컴포넌트의 상태/DOM을 보존하려면 React의 `<Activity>`를 사용하세요.
 
-**Usage:**
+**사용법:**
 
 ```tsx
 import { Activity } from 'react'
@@ -23,4 +23,4 @@ function Dropdown({ isOpen }: Props) {
 }
 ```
 
-Avoids expensive re-renders and state loss.
+비용이 많이 드는 리렌더링과 상태 손실을 방지합니다.

package/templates/.claude/skills/nextjs-react-best-practices/rules/rendering-animate-svg-wrapper.md

@@ -5,19 +5,19 @@ impactDescription: enables hardware acceleration
 tags: rendering, svg, css, animation, performance
 ---
 
-## Animate SVG Wrapper Instead of SVG Element
+## SVG 요소 대신 래퍼 애니메이션
 
-Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead.
+많은 브라우저가 SVG 요소에 대한 CSS3 애니메이션의 하드웨어 가속을 지원하지 않습니다. SVG를 `<div>`로 감싸고 래퍼를 애니메이션하세요.
 
-**Incorrect (animating SVG directly - no hardware acceleration):**
+**❌ 잘못된 예시 (SVG 직접 애니메이션 - 하드웨어 가속 없음):**
 
 ```tsx
 function LoadingSpinner() {
   return (
-    <svg 
+    <svg
       className="animate-spin"
-      width="24" 
-      height="24" 
+      width="24"
+      height="24"
       viewBox="0 0 24 24"
     >
       <circle cx="12" cy="12" r="10" stroke="currentColor" />
@@ -26,15 +26,15 @@ function LoadingSpinner() {
 }
 ```
 
-**Correct (animating wrapper div - hardware accelerated):**
+**✅ 올바른 예시 (래퍼 div 애니메이션 - 하드웨어 가속):**
 
 ```tsx
 function LoadingSpinner() {
   return (
     <div className="animate-spin">
-      <svg 
-        width="24" 
-        height="24" 
+      <svg
+        width="24"
+        height="24"
         viewBox="0 0 24 24"
       >
         <circle cx="12" cy="12" r="10" stroke="currentColor" />
@@ -44,4 +44,4 @@ function LoadingSpinner() {
 }
 ```
 
-This applies to all CSS transforms and transitions (`transform`, `opacity`, `translate`, `scale`, `rotate`). The wrapper div allows browsers to use GPU acceleration for smoother animations.
+이 방식은 모든 CSS transform과 transition(`transform`, `opacity`, `translate`, `scale`, `rotate`)에 적용됩니다. 래퍼 div는 브라우저가 더 부드러운 애니메이션을 위해 GPU 가속을 사용할 수 있게 합니다.

package/templates/.claude/skills/nextjs-react-best-practices/rules/rendering-conditional-render.md

@@ -5,11 +5,11 @@ impactDescription: prevents rendering 0 or NaN
 tags: rendering, conditional, jsx, falsy-values
 ---
 
-## Use Explicit Conditional Rendering
+## 명시적 조건부 렌더링 사용
 
-Use explicit ternary operators (`? :`) instead of `&&` for conditional rendering when the condition can be `0`, `NaN`, or other falsy values that render.
+조건이 `0`, `NaN` 또는 렌더링되는 다른 falsy 값일 수 있는 경우, 조건부 렌더링에 `&&` 대신 명시적인 삼항 연산자(`? :`)를 사용하세요.
 
-**Incorrect (renders "0" when count is 0):**
+**❌ 잘못된 예시 (count가 0일 때 "0"을 렌더링):**
 
 ```tsx
 function Badge({ count }: { count: number }) {
@@ -20,11 +20,11 @@ function Badge({ count }: { count: number }) {
   )
 }
 
-// When count = 0, renders: <div>0</div>
-// When count = 5, renders: <div><span class="badge">5</span></div>
+// count = 0일 때 렌더링: <div>0</div>
+// count = 5일 때 렌더링: <div><span class="badge">5</span></div>
 ```
 
-**Correct (renders nothing when count is 0):**
+**✅ 올바른 예시 (count가 0일 때 아무것도 렌더링하지 않음):**
 
 ```tsx
 function Badge({ count }: { count: number }) {
@@ -35,6 +35,6 @@ function Badge({ count }: { count: number }) {
   )
 }
 
-// When count = 0, renders: <div></div>
-// When count = 5, renders: <div><span class="badge">5</span></div>
+// count = 0일 때 렌더링: <div></div>
+// count = 5일 때 렌더링: <div><span class="badge">5</span></div>
 ```

package/templates/.claude/skills/nextjs-react-best-practices/rules/rendering-content-visibility.md

@@ -5,9 +5,9 @@ impactDescription: faster initial render
 tags: rendering, css, content-visibility, long-lists
 ---
 
-## CSS content-visibility for Long Lists
+## 긴 목록을 위한 CSS content-visibility
 
-Apply `content-visibility: auto` to defer off-screen rendering.
+`content-visibility: auto`를 적용하여 화면 밖 렌더링을 연기하세요.
 
 **CSS:**
 
@@ -18,7 +18,7 @@ Apply `content-visibility: auto` to defer off-screen rendering.
 }
 ```
 
-**Example:**
+**예시:**
 
 ```tsx
 function MessageList({ messages }: { messages: Message[] }) {
@@ -35,4 +35,4 @@ function MessageList({ messages }: { messages: Message[] }) {
 }
 ```
 
-For 1000 messages, browser skips layout/paint for ~990 off-screen items (10× faster initial render).
+1000개의 메시지가 있을 때, 브라우저는 ~990개의 화면 밖 항목에 대한 레이아웃/페인트를 건너뜁니다 (초기 렌더링 10배 빠름).

package/templates/.claude/skills/nextjs-react-best-practices/rules/rendering-hoist-jsx.md

@@ -5,11 +5,11 @@ impactDescription: avoids re-creation
 tags: rendering, jsx, static, optimization
 ---
 
-## Hoist Static JSX Elements
+## 정적 JSX 요소 끌어올리기
 
-Extract static JSX outside components to avoid re-creation.
+정적 JSX를 컴포넌트 외부로 추출하여 재생성을 방지하세요.
 
-**Incorrect (recreates element every render):**
+**❌ 잘못된 예시 (매 렌더링마다 요소 재생성):**
 
 ```tsx
 function LoadingSkeleton() {
@@ -25,7 +25,7 @@ function Container() {
 }
 ```
 
-**Correct (reuses same element):**
+**✅ 올바른 예시 (동일한 요소 재사용):**
 
 ```tsx
 const loadingSkeleton = (
@@ -41,6 +41,6 @@ function Container() {
 }
 ```
 
-This is especially helpful for large and static SVG nodes, which can be expensive to recreate on every render.
+이 방식은 매 렌더링마다 재생성하기에 비용이 많이 드는 크고 정적인 SVG 노드에 특히 유용합니다.
 
-**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, the compiler automatically hoists static JSX elements and optimizes component re-renders, making manual hoisting unnecessary.
+**참고:** 프로젝트에 [React Compiler](https://react.dev/learn/react-compiler)가 활성화되어 있다면, 컴파일러가 자동으로 정적 JSX 요소를 끌어올리고 컴포넌트 리렌더링을 최적화하므로 수동 끌어올리기가 불필요합니다.

package/templates/.claude/skills/nextjs-react-best-practices/rules/rendering-hydration-no-flicker.md

@@ -5,17 +5,17 @@ impactDescription: avoids visual flicker and hydration errors
 tags: rendering, ssr, hydration, localStorage, flicker
 ---
 
-## Prevent Hydration Mismatch Without Flickering
+## 깜박임 없이 하이드레이션 불일치 방지
 
-When rendering content that depends on client-side storage (localStorage, cookies), avoid both SSR breakage and post-hydration flickering by injecting a synchronous script that updates the DOM before React hydrates.
+클라이언트 측 저장소(localStorage, 쿠키)에 의존하는 콘텐츠를 렌더링할 때, 동기 스크립트를 주입하여 React가 하이드레이션하기 전에 DOM을 업데이트함으로써 SSR 오류와 하이드레이션 후 깜박임을 모두 방지하세요.
 
-**Incorrect (breaks SSR):**
+**❌ 잘못된 예시 (SSR 오류 발생):**
 
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
-  // localStorage is not available on server - throws error
+  // localStorage는 서버에서 사용 불가 - 오류 발생
   const theme = localStorage.getItem('theme') || 'light'
-  
+
   return (
     <div className={theme}>
       {children}
@@ -24,22 +24,22 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
 }
 ```
 
-Server-side rendering will fail because `localStorage` is undefined.
+`localStorage`가 undefined이기 때문에 서버 사이드 렌더링이 실패합니다.
 
-**Incorrect (visual flickering):**
+**❌ 잘못된 예시 (시각적 깜박임):**
 
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
   const [theme, setTheme] = useState('light')
-  
+
   useEffect(() => {
-    // Runs after hydration - causes visible flash
+    // 하이드레이션 후 실행 - 눈에 보이는 깜박임 발생
     const stored = localStorage.getItem('theme')
     if (stored) {
       setTheme(stored)
     }
   }, [])
-  
+
   return (
     <div className={theme}>
       {children}
@@ -48,9 +48,9 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
 }
 ```
 
-Component first renders with default value (`light`), then updates after hydration, causing a visible flash of incorrect content.
+컴포넌트가 먼저 기본값(`light`)으로 렌더링된 다음 하이드레이션 후 업데이트되어, 잘못된 콘텐츠가 눈에 보이게 깜박입니다.
 
-**Correct (no flicker, no hydration mismatch):**
+**✅ 올바른 예시 (깜박임 없음, 하이드레이션 불일치 없음):**
 
 ```tsx
 function ThemeWrapper({ children }: { children: ReactNode }) {
@@ -77,6 +77,6 @@ function ThemeWrapper({ children }: { children: ReactNode }) {
 }
 ```
 
-The inline script executes synchronously before showing the element, ensuring the DOM already has the correct value. No flickering, no hydration mismatch.
+인라인 스크립트가 요소를 표시하기 전에 동기적으로 실행되어, DOM이 이미 올바른 값을 가지도록 보장합니다. 깜박임도 없고, 하이드레이션 불일치도 없습니다.
 
-This pattern is especially useful for theme toggles, user preferences, authentication states, and any client-only data that should render immediately without flashing default values.
+이 패턴은 테마 토글, 사용자 선호도, 인증 상태 및 기본값을 깜박이지 않고 즉시 렌더링해야 하는 모든 클라이언트 전용 데이터에 특히 유용합니다.