From e8beb9dbc8ca76ffe140a08f6f7f26c27f6d75de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chyeonggkim=E2=80=9D?=
 <“hyeonggkim@smilegate.com”>
Date: Wed, 19 Nov 2025 18:22:33 +0900
Subject: [PATCH] feat: enhance component viewer with responsive image support
 and usage examples

---
 app/pages/components-viewer/index.vue | 96 ++++++++++++++++++++++++++-
 layers/plugins/amplitude.client.ts    |  6 +-
 2 files changed, 96 insertions(+), 6 deletions(-)

diff --git a/app/pages/components-viewer/index.vue b/app/pages/components-viewer/index.vue
index 7247f32..9b39352 100644
--- a/app/pages/components-viewer/index.vue
+++ b/app/pages/components-viewer/index.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { getImagePaths } from '#layers/utils/dataUtil'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+
 definePageMeta({
   layout: false,
 })
@@ -394,9 +397,12 @@ const components: ComponentItem[] = [
     path: 'atoms/Img', 
     category: 'atoms',
     subcategory: 'img',
-    description: '이미지 컴포넌트',
-    hasPreview: false,
-    previewNotes: 'Image 컴포넌트는 실제 이미지 경로가 필요합니다',
+    description: '이미지 컴포넌트 (반응형 이미지 지원)',
+    hasPreview: true,
+    sampleProps: {
+      src: '/images/sample/sample01.jpg',
+      alt: '샘플 이미지',
+    },
   },
   { 
     name: 'Video', 
@@ -801,6 +807,18 @@ const testFullLoading = (duration: number = 3000) => {
 // 미리보기 테마 (dark/light)
 const previewTheme = ref<'light' | 'dark'>('dark')
 
+// getImagePaths 사용 예제를 위한 샘플 데이터
+const preImgPreregistdData: PageDataResourceGroup = {
+  resource_type: 'IMG_COMM',
+  res_path: {
+    path_pc: '/images/sample/sample01.jpg',
+    path_mo: '/images/sample/sample01.jpg',
+  },
+  display: {
+    text: '샘플 이미지 (getImagePaths 사용 예제)',
+  },
+}
+
 onMounted(() => {
   loadingStore.stopFullLoading()
 })
@@ -1479,6 +1497,78 @@ onMounted(() => {
                   </div>
                 </template>
 
+                <!-- Image -->
+                <template v-else-if="selectedComponent.path === 'atoms/Img'">
+                  <div class="w-full max-w-2xl space-y-6">
+                    <!-- 기본 사용법 -->
+                    <div class="space-y-2">
+                      <h4 class="text-sm font-semibold text-gray-700">1. 기본 사용법 (문자열 경로)</h4>
+                      <div class="border rounded-lg p-4 bg-gray-50">
+                        <AtomsImg 
+                          :src="selectedComponent.sampleProps?.src as string"
+                          :alt="selectedComponent.sampleProps?.alt as string"
+                          class="max-w-xs"
+                        />
+                      </div>
+                    </div>
+
+                    <!-- getImagePaths 사용법 -->
+                    <div class="space-y-2">
+                      <h4 class="text-sm font-semibold text-gray-700">2. getImagePaths() 사용법 (반응형 이미지)</h4>
+                      <div class="border rounded-lg p-4 bg-gray-50 space-y-3">
+                        <div class="text-xs text-gray-600 space-y-1">
+                          <p><strong>getImagePaths()</strong> 함수는 PageDataResourceGroup 타입의 데이터를 받아 PC/모바일 이미지 경로를 반환합니다.</p>
+                          <p>반환값: <code class="bg-gray-200 px-1 rounded">{ pc: string, mo: string }</code> 또는 <code class="bg-gray-200 px-1 rounded">string</code> 또는 <code class="bg-gray-200 px-1 rounded">null</code></p>
+                        </div>
+                        <div class="border-t pt-3">
+                          <AtomsImg 
+                            :src="getImagePaths(preImgPreregistdData)"
+                            :alt="preImgPreregistdData?.display?.text || '샘플 이미지'"
+                            class="max-w-xs"
+                          />
+                        </div>
+                        <div class="text-xs text-gray-500 bg-blue-50 p-2 rounded">
+                          <p class="font-semibold mb-1">💡 사용 예제:</p>
+                          <pre class="whitespace-pre-wrap break-words"><code>// PageDataResourceGroup 타입 데이터 예시
+const preImgPreregistdData: PageDataResourceGroup = {
+  res_path: {
+    path_pc: '/images/sample/sample01.jpg',
+    path_mo: '/images/sample/sample01.jpg'
+  },
+  display: {
+    text: '샘플 이미지'
+  }
+}
+
+// 사용법
+&lt;AtomsImg 
+  :src="getImagePaths(preImgPreregistdData)"
+  :alt="preImgPreregistdData?.display?.text"
+/&gt;</code></pre>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- 반응형 이미지 예제 -->
+                    <div class="space-y-2">
+                      <h4 class="text-sm font-semibold text-gray-700">3. 반응형 이미지 (PC/모바일 분리)</h4>
+                      <div class="border rounded-lg p-4 bg-gray-50">
+                        <AtomsImg 
+                          :src="{
+                            pc: '/images/sample/sample01.jpg',
+                            mo: '/images/sample/sample02.jpg'
+                          }"
+                          alt="반응형 이미지 예제"
+                          class="max-w-xs"
+                        />
+                        <p class="text-xs text-gray-500 mt-2">
+                          PC와 모바일에서 다른 이미지를 표시합니다. (1024px 기준)
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+
                 <!-- Loading Full -->
                 <template v-else-if="selectedComponent.path === 'atoms/loading/Full'">
                   <div class="w-full max-w-md space-y-4">
diff --git a/layers/plugins/amplitude.client.ts b/layers/plugins/amplitude.client.ts
index d8377d3..c4107cd 100644
--- a/layers/plugins/amplitude.client.ts
+++ b/layers/plugins/amplitude.client.ts
@@ -10,7 +10,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     // 원하는 설정을 여기에 추가하세요
     defaultTracking: {
       attribution: false, // 기본 추적 설정: 속성 추적 비활성화
-      pageViews: true, // 페이지 뷰 추적 활성화
+      pageViews: false, // 페이지 뷰 추적 활성화
       sessions: false, // 세션 추적 비활성화
       formInteractions: false, // 폼 상호작용 추적 비활성화
       fileDownloads: false // 파일 다운로드 추적 비활성화
@@ -28,7 +28,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   amplitude.identify(identifyEvent)
   amplitude.setUserId(`${memberNo}`)
 
-  ;(window as any).amplitude = amplitude // amplitude 객체 전역으로 설정(Stove GNB에서 사용)
+  // ;(window as any).amplitude = amplitude // amplitude 객체 전역으로 설정(Stove GNB에서 사용)
 
   // 페이지가 숨겨질 때 이벤트 리스너 추가
   window.addEventListener('pagehide', () => {
@@ -37,5 +37,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   })
 
   // Nuxt 앱에 amplitude 인스턴스 제공
-  nuxtApp.provide('amplitude', amplitude)
+  // nuxtApp.provide('amplitude', amplitude)
 })