KCPLF Header 컴포넌트

Vue 3로 개발된 헤더 컴포넌트 라이브러리입니다. Nuxt와 Vue 3 프로젝트에서 사용할 수 있습니다.

설치

npm install kcplf-header
# 또는
yarn add kcplf-header

사용 방법

Vue 프로젝트에서 사용하기

<template>
  <KcplfHeader
    :userName="userName"
    :memberRole="memberRole"
    :bizNm="bizNm"
    linkType="router"
    @logout="handleLogout"
  />
</template>

<script setup>
import { KcplfHeader } from "kcplf-header";

const userName = "홍길동";
const memberRole = "세무사";
const bizNm = "플랫폼세무회계사무소";

const handleLogout = () => {
  // 로그아웃 처리 로직
  console.log("로그아웃");
};
</script>

Nuxt 프로젝트에서 사용하기

Nuxt 프로젝트에서도 설정은 동일합니다. linkType 프로퍼티는 "router"나 "nuxt" 둘 다 사용 가능하며, 내부적으로는 모두 Vue Router의 RouterLink를 사용합니다.

<template>
  <KcplfHeader
    :userName="userName"
    :memberRole="memberRole"
    :bizNm="bizNm"
    linkType="nuxt"
    @logout="handleLogout"
  />
</template>

<script setup>
import { KcplfHeader } from "kcplf-header";

const userName = "홍길동";
const memberRole = "세무사";
const bizNm = "플랫폼세무회계사무소";

const handleLogout = () => {
  // 로그아웃 처리 로직
  console.log("로그아웃");
};
</script>

참고: 내부적으로 모든 내비게이션 링크는 RouterLink를 사용합니다. Nuxt 애플리케이션에서도 RouterLink가 호환되므로 별도 설정 없이 작동합니다.

타입스크립트 지원 추가하기

Nuxt 프로젝트에서 타입 오류가 발생하는 경우, types 디렉토리에 다음과 같은 선언 파일을 추가하세요:

// types/kcplf-header.d.ts
declare module "kcplf-header" {
  import { DefineComponent } from "vue";

  export const KcplfHeader: DefineComponent<
    {
      userName: string;
      memberRole: string;
      bizNm: string;
      linkType?: "router" | "nuxt";
      logoPath?: string;
      logoTextPath?: string;
      memberIconPath?: string;
      arrowIconPath?: string;
      env?: string;
    },
    {},
    any
  >;
}

그리고 tsconfig.json에 타입 선언 파일을 포함시킵니다:

{
  "compilerOptions": {
    "types": ["kcplf-header"]
  },
  "files": ["types/kcplf-header.d.ts"]
}

커스텀 이미지 사용하기

컴포넌트에 포함된 기본 이미지 대신 커스텀 이미지를 사용할 수 있습니다:

<template>
  <KcplfHeader
    :userName="userName"
    :memberRole="memberRole"
    :bizNm="bizNm"
    :logoPath="logoPath"
    :logoTextPath="logoTextPath"
    :memberIconPath="memberIconPath"
    :arrowIconPath="arrowIconPath"
    linkType="nuxt"
    @logout="handleLogout"
  />
</template>

<script setup>
import { KcplfHeader } from "kcplf-header";

const userName = "홍길동";
const memberRole = "세무사";
const bizNm = "플랫폼세무회계사무소";

// 커스텀 이미지 경로
const logoPath = "/images/custom-logo.svg";
const logoTextPath = "/images/custom-logo-text.svg";
const memberIconPath = "/images/custom-member-icon.svg";
const arrowIconPath = "/images/custom-arrow-icon.svg";

const handleLogout = () => {
  // 로그아웃 처리 로직
  console.log("로그아웃");
};
</script>

Props

| 이름 | 타입 | 기본값 | 설명 | | -------------- | ------ | ----------- | --------------------------------------------- | | userName | String | "" | 사용자 이름 | | memberRole | String | "" | 사용자 역할 (예: 세무사) | | bizNm | String | "" | 회사/사무소 이름 | | linkType | String | "router" | 링크 타입 (내부적으로는 모두 RouterLink 사용) | | logoPath | String | 기본 이미지 | 로고 이미지 경로 | | logoTextPath | String | 기본 이미지 | 로고 텍스트 이미지 경로 | | memberIconPath | String | 기본 이미지 | 사용자 아이콘 이미지 경로 | | arrowIconPath | String | 기본 이미지 | 팝업 화살표 이미지 경로 |

Events

| 이름 | 설명 | | ------ | ------------------------------------- | | logout | 로그아웃 버튼 클릭 시 발생하는 이벤트 |

개발

# 의존성 설치
npm install

# 개발 서버 실행 (http://localhost:5173)
npm run dev

# 라이브러리 빌드
npm run build

배포

이 패키지는 npm 레지스트리에 배포되어 있으며, 다음 명령어로 설치할 수 있습니다:

npm install kcplf-header

npm 배포

배포 전에는 꼭 package.json의 버젼을 올려야됩니다.

npm login

npm run build
# kcplf-header 프로젝트에서
npm publish --tag latest

# 또는 이미 배포된 경우
npm dist-tag add [email protected] latest