feat(web): 2단계 설치 안내를 위한 InstallModal 추가 (#2)

사용자가 플러그인을 설치할 때 marketplace 추가와 플러그인 설치라는
두 가지 명령어를 순서대로 실행해야 합니다. 이를 명확하게 안내하기 위해
InstallModal 컴포넌트를 추가했습니다.

주요 변경사항:
- InstallModal 컴포넌트 신규 추가
  - 단계별 설치 안내 (1. Marketplace 추가, 2. 플러그인 설치)
  - 각 명령어별 개별 복사 버튼
  - 전체 명령어 한 번에 복사 기능
  - Clipboard API 지원 여부 감지 및 경고
  - 복사 실패 시 toast 알림 표시
  - 수동 복사 안내 메시지 추가

- PluginCard 컴포넌트 수정
  - Install 버튼 클릭 시 modal 열기로 변경
  - 기존 단일 명령어 복사 기능 제거

에러 처리 개선:
- Clipboard API 사용 전 지원 여부 확인
- 복사 실패 시 사용자에게 toast로 알림
- 실패 시 성공 상태로 표시되지 않도록 수정
- 상세한 에러 로깅 (명령어, 타입, 환경 정보 포함)
- 수동 복사 대체 방법 안내

Author: amondnet

apps/web/app/components/InstallModal.vue

@@ -0,0 +1,214 @@
+<template>
+  <UModal
+    v-model:open="isOpen"
+    title="Installation Instructions"
+    description="Run these two commands in order"
+  >
+    <template #body>
+      <div class="space-y-4">
+        <!-- Clipboard Not Supported Warning -->
+        <UAlert
+          v-if="!isClipboardSupported"
+          color="warning"
+          variant="soft"
+          icon="i-heroicons-exclamation-triangle"
+          title="Clipboard Not Available"
+          description="Your browser doesn't support automatic copying. Please copy the commands manually using Ctrl+C (Cmd+C on Mac)."
+        />
+
+        <!-- Step 1: Add Marketplace -->
+        <div class="space-y-2">
+          <div class="flex items-center gap-2 text-sm font-medium">
+            <UBadge color="primary" variant="soft" size="sm">1</UBadge>
+            <span>Add Marketplace</span>
+          </div>
+          <div class="relative">
+            <pre class="bg-default border border-default rounded-lg p-3 text-sm overflow-x-auto"><code>{{ marketplaceCommand }}</code></pre>
+            <UButton
+              @click="copyCommand(marketplaceCommand, 'marketplace')"
+              :variant="copiedStates.marketplace ? 'soft' : 'ghost'"
+              :color="copiedStates.marketplace ? 'success' : 'neutral'"
+              size="xs"
+              :icon="copiedStates.marketplace ? 'i-heroicons-check' : 'i-heroicons-clipboard-document'"
+              class="absolute top-2 right-2"
+              :title="copiedStates.marketplace ? 'Copied!' : 'Copy command'"
+            />
+          </div>
+        </div>
+
+        <!-- Step 2: Install Plugin -->
+        <div class="space-y-2">
+          <div class="flex items-center gap-2 text-sm font-medium">
+            <UBadge color="primary" variant="soft" size="sm">2</UBadge>
+            <span>Install Plugin</span>
+          </div>
+          <div class="relative">
+            <pre class="bg-default border border-default rounded-lg p-3 text-sm overflow-x-auto"><code>{{ installCommand }}</code></pre>
+            <UButton
+              @click="copyCommand(installCommand, 'install')"
+              :variant="copiedStates.install ? 'soft' : 'ghost'"
+              :color="copiedStates.install ? 'success' : 'neutral'"
+              size="xs"
+              :icon="copiedStates.install ? 'i-heroicons-check' : 'i-heroicons-clipboard-document'"
+              class="absolute top-2 right-2"
+              :title="copiedStates.install ? 'Copied!' : 'Copy command'"
+            />
+          </div>
+        </div>
+
+        <!-- Copy All Button -->
+        <div class="pt-2 border-t border-default">
+          <UButton
+            @click="copyAllCommands"
+            :variant="copiedStates.all ? 'soft' : 'outline'"
+            :color="copiedStates.all ? 'success' : 'primary'"
+            block
+            :icon="copiedStates.all ? 'i-heroicons-check-circle' : 'i-heroicons-clipboard-document-list'"
+          >
+            {{ copiedStates.all ? 'All Commands Copied!' : 'Copy All Commands' }}
+          </UButton>
+        </div>
+
+        <!-- Manual Copy Tip -->
+        <div class="text-sm text-muted flex items-start gap-2">
+          <UIcon name="i-heroicons-information-circle" class="shrink-0 mt-0.5" />
+          <span>Tip: You can also select and copy the commands manually (Ctrl+C / Cmd+C)</span>
+        </div>
+      </div>
+    </template>
+
+    <template #footer="{ close }">
+      <div class="flex justify-end">
+        <UButton
+          label="Close"
+          color="neutral"
+          variant="outline"
+          @click="close"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  pluginName: string
+  open?: boolean
+}
+
+interface Emits {
+  (e: 'update:open', value: boolean): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false
+})
+
+const emit = defineEmits<Emits>()
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (value) => emit('update:open', value)
+})
+
+const marketplaceCommand = '/plugin marketplace add pleaseai/claude-code-plugins'
+const installCommand = computed(() => `/plugin install ${props.pluginName}@pleaseai`)
+
+const copiedStates = reactive({
+  marketplace: false,
+  install: false,
+  all: false
+})
+
+// Check if clipboard API is supported
+const isClipboardSupported = computed(() => {
+  return typeof navigator !== 'undefined' &&
+         'clipboard' in navigator &&
+         typeof navigator.clipboard?.writeText === 'function'
+})
+
+const copyCommand = async (command: string, type: keyof typeof copiedStates) => {
+  try {
+    // Check if clipboard API is available
+    if (!isClipboardSupported.value) {
+      throw new Error('Clipboard API not available')
+    }
+
+    await navigator.clipboard.writeText(command)
+    copiedStates[type] = true
+
+    setTimeout(() => {
+      copiedStates[type] = false
+    }, 2000)
+  } catch (err) {
+    // Log error with full context for debugging
+    console.error('Failed to copy command to clipboard:', {
+      command,
+      type,
+      error: err instanceof Error ? err.message : String(err),
+      clipboardAvailable: isClipboardSupported.value,
+      isSecureContext: typeof window !== 'undefined' ? window.isSecureContext : false
+    })
+
+    // Show user-facing error notification
+    const toast = useToast()
+    toast.add({
+      title: 'Copy Failed',
+      description: 'Could not copy to clipboard. Please copy the command manually.',
+      color: 'error',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+
+    // DO NOT set success state on failure
+    copiedStates[type] = false
+  }
+}
+
+const copyAllCommands = async () => {
+  const allCommands = `${marketplaceCommand}\n${installCommand.value}`
+
+  try {
+    // Check if clipboard API is available
+    if (!isClipboardSupported.value) {
+      throw new Error('Clipboard API not available')
+    }
+
+    await navigator.clipboard.writeText(allCommands)
+    copiedStates.all = true
+
+    setTimeout(() => {
+      copiedStates.all = false
+    }, 2000)
+  } catch (err) {
+    // Log error with full context for debugging
+    console.error('Failed to copy all commands to clipboard:', {
+      marketplaceCommand,
+      installCommand: installCommand.value,
+      error: err instanceof Error ? err.message : String(err),
+      clipboardAvailable: isClipboardSupported.value,
+      isSecureContext: typeof window !== 'undefined' ? window.isSecureContext : false
+    })
+
+    // Show user-facing error notification
+    const toast = useToast()
+    toast.add({
+      title: 'Copy Failed',
+      description: 'Could not copy commands to clipboard. Please copy them manually from above.',
+      color: 'error',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+
+    // DO NOT set success state on failure
+    copiedStates.all = false
+  }
+}
+
+// Reset copied states when modal is closed
+watch(isOpen, (newValue) => {
+  if (!newValue) {
+    copiedStates.marketplace = false
+    copiedStates.install = false
+    copiedStates.all = false
+  }
+})
+</script>

apps/web/app/components/PluginCard.vue

@@ -74,19 +74,25 @@
         </UButton>
 
         <UButton
-          @click="copyInstallCommand"
-          :variant="copied ? 'soft' : 'solid'"
-          :color="copied ? 'green' : 'primary'"
+          @click="openInstallModal"
+          variant="solid"
+          color="primary"
           size="sm"
-          :icon="copied ? 'i-heroicons-check-circle' : 'i-heroicons-clipboard-document'"
+          icon="i-heroicons-arrow-down-tray"
           class="flex-1 justify-center"
-          :title="copied ? 'Copied to clipboard!' : 'Copy install command'"
+          title="View installation instructions"
         >
-          {{ copied ? 'Copied!' : 'Install' }}
+          Install
         </UButton>
       </div>
     </template>
   </UCard>
+
+  <!-- Install Modal -->
+  <InstallModal
+    v-model:open="isModalOpen"
+    :plugin-name="plugin.name"
+  />
 </template>
 
 <script setup lang="ts">
@@ -115,7 +121,7 @@ const props = defineProps<{
   plugin: Plugin
 }>()
 
-const copied = ref(false)
+const isModalOpen = ref(false)
 const pluginMetadata = ref<PluginMetadata | null>(null)
 const loading = ref(false)
 
@@ -166,18 +172,7 @@ onMounted(() => {
   fetchPluginMetadata()
 })
 
-const copyInstallCommand = async () => {
-  const command = `claude-code plugins install https://github.com/${props.plugin.source.repo}`
-
-  try {
-    await navigator.clipboard.writeText(command)
-    copied.value = true
-
-    setTimeout(() => {
-      copied.value = false
-    }, 2000)
-  } catch (err) {
-    console.error('Failed to copy:', err)
-  }
+const openInstallModal = () => {
+  isModalOpen.value = true
 }
 </script>