DiffViewer

코드 변경 사항을 시각적으로 비교하는 컴포넌트입니다. Unified/Split 뷰 모드를 지원합니다.

Installation

bash

npx @axis-ds/cli add diff-viewer --agentic

Usage

tsx

import { DiffViewer } from '@axis-ds/agentic-ui'

const before = `function greet(name) {
  console.log("Hello, " + name)
}`

const after = `function greet(name: string) {
  console.log(\`Hello, \${name}!\`)
  return name
}`

export function Example() {
  return (
    <DiffViewer
      before={before}
      after={after}
      filename="greet.ts"
      viewMode="unified"
    />
  )
}

Interactive Demo

counter.tsx

import { useState } from 'react'

import { useState, useCallback } from 'react'

function Counter() {

const [count, setCount] = useState(0)

interface CounterProps {

initialValue?: number

}

function Counter({ initialValue = 0 }: CounterProps) {

const [count, setCount] = useState(initialValue)

const increment = useCallback(() => {

setCount(prev => prev + 1)

}, [])

return (

<div>

<p>Count: {count}</p>

<button onClick={() => setCount(count + 1)}>

Increment

</button>

</div>

)

}

View Modes

Unified

example.ts

const a = 1

const b = 2

const b = 3

const c = 4

Split

example.ts

const a = 1

const b = 2

const b = 3

const c = 4

Props

Prop	Type	Default	Description
`before`Required	`string`	-	변경 전 코드
`after`Required	`string`	-	변경 후 코드
`filename`	`string`	-	파일 이름
`viewMode`	`"unified" \| "split"`	"unified"	뷰 모드
`className`	`string`	-	추가 CSS 클래스

beforeRequired

Type:string

변경 전 코드

afterRequired

Type:string

변경 후 코드

filename

Type:string

Default:-

파일 이름

viewMode

Type:"unified" | "split"

Default:"unified"

뷰 모드

className

Type:string

Default:-

추가 CSS 클래스

Accessibility

diff 영역은 role="region"으로 그룹화되고, 뷰 모드 토글은 aria-pressed로 상태를 전달합니다.

Key	Action
`Tab`	뷰 모드 토글로 이동합니다.
`Enter / Space`	뷰 모드를 전환합니다.

추가/삭제는 색상만이 아니라 마크업으로 구분됩니다.
장식 요소는 role="presentation"으로 처리됩니다.