detail-button

사용자 상세 정보를 다양한 형태(모달, 탭, 새창)로 열 수 있는 공통 버튼 컴포넌트입니다. 사용자 정의 라우팅 및 컴포넌트 동작을 지원하며, grid 내부나 외부 어디에서든 재사용이 가능합니다.

props

이름	타입	기본값	설명
label	string		버튼 라벨입니다. 보통 '회원'처럼 엔티티명을 입력합니다.
back-to	string		상세 페이지 또는 모달에서 돌아갈 경로의 라우트 경로입니다.
types	Array	['popup', 'tab']	버튼 클릭 시 사용할 열기 방식입니다. 'popup', 'tab', 'window' 중 선택 가능.
popup-only	Boolean	false	true일 경우, 강제로 모달(popup)로만 열도록 설정합니다.
component-name	number		내부적으로 사용할 상세 컴포넌트 이름입니다. .modal을 붙여 사용됩니다.
comp	Object		실제로 렌더링될 컴포넌트 객체입니다.
route-name	string		새 창에서 열릴 라우트 이름 (routes.ts에 정의된 이름과 일치해야 함).
model-value	Object		해당 row의 데이터 객체입니다.
id-key	String Number	'id'	상세 정보 조회 시 식별자로 사용할 필드 이름입니다.
callback	Function	null	모달 닫힘 이후 실행할 콜백 함수입니다.
params	Object	{}	상세 페이지 또는 컴포넌트로 전달할 추가 파라미터입니다.

예시. grid 내부에서 사용법

<nv-grid-col headerName="Action" :width="150" pinned="right" :cellStyle="grid.style.center" :cellClass="'actions-button-cell'">
  <template v-slot:render="{params}">
    <detail-button v-model="params"
                   label="정보"
                   route-name="user-detail"
                   component-name="user-detail"
                   :comp="detailComponent"
                   back-to="/home"
                   id-key="id"
                   :callback="retrieve"
    />
  </template>
</nv-grid-col>

상세 페이지 열기 타입별 사용법

• Popup 타입 (모달)

  <detail-button
    v-model="params.data"
    :types="['popup']"
    component-name="banner-detail"  // 실제 상세 컴포넌트 경로
    :comp="detailComponent"        // 상세 컴포넌트 객체
    :callback="retrieve"           // 모달 닫힐 때 실행할 함수
  />

• Window 타입 (새 창)

  <detail-button
    v-model="params.data"
    :types="['window']"
    route-name="banner-detail"     // routes.ts에 정의된 라우트명
    back-to="/content/banner"      // 닫기 버튼 클릭 시 돌아갈 경로
  />

• Tab 타입 (새 탭)

  <detail-button
    v-model="params.data"
    :types="['tab']"
    route-name="banner-detail"     // routes.ts에 정의된 라우트명
    back-to="/content/banner"      // 닫기 버튼 클릭 시 돌아갈 경로
  />

Window/Tab 타입은 라우터 설정이 필요합니다:

{
  path: 'banner/:id',
  name: 'banner-detail',
  component: () => import('src/views/common-detail.panel.vue'),
  meta: {
    componentName: 'common-detail.panel'
  }
}

💡 여러 타입을 동시에 지원할 수 있습니다:

<detail-button
  :types="['popup', 'window', 'tab']"  // 사용자가 선택 가능
/>