InlineCode 컴포넌트

InlineCode 컴포넌트는 문장 중간에 짧은 코드 조각, 명령어, 식별자, 경로, 상태값처럼 한 덩어리의 텍스트를 인라인으로 강조할 때 사용하는 컴포넌트입니다.

console.log('Hello World');

기본 사용법

<template>
    <p>
        이 코드는 <InlineCode text="console.log('Hello World');" /> 를
        출력합니다.
    </p>
</template>

<script setup lang="ts">
import { InlineCode } from '@jennifersoft/vue-components-v2';
</script>

언제 사용하나요?

• 짧은 코드 조각: const count = 1
• CLI 명령어: pnpm build
• 파일/경로/키 이름: src/main.ts, clusterId
• 강조가 필요한 값: READY, ERROR

긴 코드 예제나 여러 줄 코드에는 InlineCode 대신 코드 블록 계열 컴포넌트를 사용하세요.

Props

Prop	타입	필수	기본값	설명
text	string	✓	-	표시할 문자열입니다. 슬롯이 아니라 prop으로 텍스트를 전달합니다.
size	'mini' | 'small' | 'medium' | 'large'	-	'medium'	CommonProps에서 상속되는 크기 prop입니다. 구현상 mini는 typo-inlinecode-xsmall 스타일에 매핑됩니다.
type	'default' | 'danger'	-	'default'	시각적 변형입니다. danger는 파괴적이거나 주의가 필요한 명령/텍스트를 강조할 때 사용합니다.
linkable	boolean	-	false	링크처럼 보이는 스타일을 적용합니다. 클릭 동작이나 URL 이동을 내장하지는 않으므로, 실제 동작은 상위 요소에서 처리해야 합니다.

구현 메모

• InlineCode는 단일 text prop만 렌더링합니다.
• 별도의 slot, click event, href prop은 제공하지 않습니다.
• type="danger"일 때 js-inline-code-danger 클래스가 적용됩니다.
• linkable이 true면 js-inline-code-linkable 클래스가 적용됩니다.
• 사이즈 클래스 매핑은 아래와 같습니다.

size 값	적용 클래스
large	typo-inlinecode-large
medium	typo-inlinecode-medium
small	typo-inlinecode-small
mini	typo-inlinecode-xsmall

사용 예시

Size 별 케이스

mini:

npm install

small:

npm run serve

medium (default):

npm run dev

large:

npm run build

---

Type 별 케이스

default:

git commit -m 'feat: add component'

danger:

rm -rf /

---

Linkable 케이스

linkable / default:

https://github.com

linkable / danger:

Delete User Account

실무 권장 사항

• 문장 중간에서는 너무 긴 텍스트보다 한 눈에 읽히는 짧은 문자열에 사용하세요.
• 삭제 명령, 위험 옵션, 운영 주의 문구에는 type="danger"를 우선 검토하세요.
• 실제 링크처럼 눌러야 하는 경우에는 linkable만 주는 대신 상위에서 클릭 핸들러나 링크 요소를 함께 구성하세요.
• 여러 개를 연달아 배치할 때는 본문 타이포와 간격을 함께 조정해 과도하게 튀지 않게 사용하는 편이 좋습니다.