CodeDiff | CoUI
LogoCoUI

CodeDiff

라인 단위로 코드 변경 사항(추가/삭제/유지)을 표시하는 viewer 컴포넌트

CodeDiff#

코드 변경 사항을 라인 단위로 비교해서 보여주는 read-only viewer입니다. 추가된 라인은 success 톤으로, 삭제된 라인은 error 톤으로 강조하며 변경 없는 라인은 그대로 둡니다. PR 리뷰, 변경 이력 표시, 마이그레이션 가이드 등에 사용합니다.

이미지나 텍스트 두 가지를 좌우로 비교하는 split-view UI 가 필요하다면 Diff 컴포넌트를 사용하세요.

Live Preview#

Web
1
import 'package:coui_web/coui_web.dart';
2
3
class MyWidget extends StatelessComponent {
4
-
Component build(BuildContext context) {
4
+
Component build(BuildContext context) {
5
-
return text('Hello');
5
+
return CoText('Hello').bodyMedium;
6
}
7
}
Flutter
Loading Flutter... 
class CodeDiffDefaultExample extends StatelessComponent {
  const CodeDiffDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return const CoCodeDiff(
      lines: [
        CoreCodeDiffLine(
          text: "import 'package:coui_web/coui_web.dart';",
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 1,
        ),
        CoreCodeDiffLine(
          text: '',
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 2,
        ),
        CoreCodeDiffLine(
          text: 'class MyWidget extends StatelessComponent {',
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 3,
        ),
        CoreCodeDiffLine(
          text: '  Component build(BuildContext context) {',
          type: CoreCodeDiffLineType.removed,
          lineNumber: 4,
        ),
        CoreCodeDiffLine(
          text: '  Component build(BuildContext context) {',
          type: CoreCodeDiffLineType.added,
          lineNumber: 4,
        ),
        CoreCodeDiffLine(
          text: "    return text('Hello');",
          type: CoreCodeDiffLineType.removed,
          lineNumber: 5,
        ),
        CoreCodeDiffLine(
          text: "    return CoText('Hello').bodyMedium;",
          type: CoreCodeDiffLineType.added,
          lineNumber: 5,
        ),
        CoreCodeDiffLine(
          text: '  }',
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 6,
        ),
        CoreCodeDiffLine(
          text: '}',
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 7,
        ),
      ],
    );
  }
}

class CodeDiffDefaultExample extends StatelessWidget {
  const CodeDiffDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const CoCodeDiff(
      lines: [
        CoreCodeDiffLine(
          text: "import 'package:coui_flutter/coui_flutter.dart';",
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 1,
        ),
        CoreCodeDiffLine(
          text: '',
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 2,
        ),
        CoreCodeDiffLine(
          text: 'class MyWidget extends StatelessWidget {',
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 3,
        ),
        CoreCodeDiffLine(
          text: '  Widget build(BuildContext context) {',
          type: CoreCodeDiffLineType.removed,
          lineNumber: 4,
        ),
        CoreCodeDiffLine(
          text: '  Widget build(BuildContext context) {',
          type: CoreCodeDiffLineType.added,
          lineNumber: 4,
        ),
        CoreCodeDiffLine(
          text: "    return Text('Hello');",
          type: CoreCodeDiffLineType.removed,
          lineNumber: 5,
        ),
        CoreCodeDiffLine(
          text: "    return CoText('Hello').bodyMedium;",
          type: CoreCodeDiffLineType.added,
          lineNumber: 5,
        ),
        CoreCodeDiffLine(
          text: '  }',
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 6,
        ),
        CoreCodeDiffLine(
          text: '}',
          type: CoreCodeDiffLineType.unchanged,
          lineNumber: 7,
        ),
      ],
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

  • PR / 커밋 변경 사항을 라인 단위로 보여줄 때
  • 마이그레이션 가이드에서 "이전 → 이후" 코드를 강조할 때
  • 변경 이력(audit log)을 코드 형태로 보여줄 때

대신 다른 컴포넌트를 사용하세요:

  • CoCodeSnippet: 단일 코드 블록을 보여줄 때 (변경 표시 없음)
  • CoDiff: 이미지/텍스트 split-view 비교가 필요할 때

Props / Parameters#

속성타입기본값설명
lines List<CoreCodeDiffLine> 필수 표시할 라인 데이터
showLineNumbers bool true 라인 번호 거터 표시 여부

타이포그래피는 디자인 시스템의 시맨틱 토큰(bodySmall / labelSmall)을 그대로 따르며 sans 폰트로 렌더링됩니다. + / - / prefix 정렬은 고정폭 라인 번호 거터와 두 글자 prefix span 으로 보장됩니다 (별도의 monospace 폰트 지정 없음).

CoreCodeDiffLine 필드:

필드타입설명
textString라인 텍스트
type CoreCodeDiffLineType added / removed / unchanged
lineNumberint?거터에 표시할 라인 번호

예제#

CoCodeDiff(
  lines: [
    CoreCodeDiffLine(
      text: 'class MyWidget extends StatelessWidget {',
      type: CoreCodeDiffLineType.unchanged,
      lineNumber: 1,
    ),
    CoreCodeDiffLine(
      text: "  return Text('Hello');",
      type: CoreCodeDiffLineType.removed,
      lineNumber: 2,
    ),
    CoreCodeDiffLine(
      text: "  return CoText('Hello').bodyMedium;",
      type: CoreCodeDiffLineType.added,
      lineNumber: 2,
    ),
  ],
)

관련 컴포넌트 (Related Components)#

  • CodeSnippet: 단일 코드 블록 표시
  • Diff: 이미지/텍스트 split-view 비교