dev(test): /test prefill 칩 그룹 + clinic_registry 기반 10개 fixture 재구성

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/features/dev/fixtures/mockUrls.ts

@@ -2,7 +2,7 @@
  * /test 페이지 + 향후 E2E·부하 테스트용 목업 병원 URL 데이터.
  *
  * 7개 채널: homepage, youtube, instagram, facebook, naverPlace, naverBlog, gangnamUnni
- * 빈 채널은 분석에서 제외됨. naverPlace는 수동 확인 필요(숫자 ID 기반).
+ * 빈 채널은 분석에서 제외됨.
  */
 
 export interface ChannelUrls {
@@ -24,121 +24,121 @@ export const CLINICS: ClinicFixture[] = [
   {
     label: '뷰성형외과',
     urls: {
-      homepage:    'viewclinic.com',
+      homepage:    'https://www.viewclinic.com',
-      youtube:     'youtube.com/channel/UCQqqH3Klj2HQSHNNSVug-CQ',
+      youtube:     'https://www.youtube.com/@ViewclinicKR',
-      instagram:   'instagram.com/viewplastic',
+      instagram:   'https://www.instagram.com/viewplastic/',
-      facebook:    'facebook.com/viewps1',
+      facebook:    'https://www.facebook.com/viewps1/',
-      naverPlace:  'https://naver.me/x9BxGXkK',
+      naverPlace:  'https://m.place.naver.com/hospital/11709005',
-      naverBlog:   'blog.naver.com/viewclinicps',
+      naverBlog:   'https://blog.naver.com/viewclinicps',
-      gangnamUnni: 'gangnamunni.com/hospitals/189',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/189',
     },
   },
   {
     label: '바노바기성형외과',
     urls: {
-      homepage:    'banobagi.com',
+      homepage:    'https://www.banobagi.com',
-      youtube:     'youtube.com/c/banobagips',
+      youtube:     'https://www.youtube.com/c/banobagips',
-      instagram:   'instagram.com/banobagi_ps',
+      instagram:   'https://www.instagram.com/banobagi_ps/',
-      facebook:    'facebook.com/BanobagiPlasticSurgery',
+      facebook:    'https://www.facebook.com/BanobagiPlasticSurgery',
-      naverPlace:  'https://naver.me/xxY2yLr5',
+      naverPlace:  'https://m.place.naver.com/hospital/21033469',
-      naverBlog:   'blog.naver.com/banobagiprs',
+      naverBlog:   'https://blog.naver.com/banobagips',
-      gangnamUnni: 'gangnamunni.com/hospitals/23',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/23',
     },
   },
   {
-    label: 'ID 성형외과',
+    label: '아이디병원',
     urls: {
-      homepage:    'idhospital.com',
+      homepage:    'https://www.idhospital.com',
-      youtube:     'youtube.com/user/IDhospital',
+      youtube:     'https://www.youtube.com/user/IDhospital',
-      instagram:   'instagram.com/idhospital',
+      instagram:   'https://www.instagram.com/idhospital',
-      facebook:    'facebook.com/idhospital0050',
+      facebook:    'https://www.facebook.com/idhospital0050',
-      naverPlace:  'https://naver.me/GtURpCEn',
+      naverPlace:  'https://m.place.naver.com/hospital/11548359',
-      naverBlog:   '',
+      naverBlog:   'https://blog.naver.com/idfacial',
-      gangnamUnni: 'gangnamunni.com/hospitals/257',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/257',
-    },
-  },
-  {
-    label: 'JK 성형외과',
-    urls: {
-      homepage:    'jkplastic.com',
-      youtube:     'youtube.com/channel/UC5F8dEt32hdp3cTeFyls4qg',
-      instagram:   'instagram.com/jkplasticsurgery_kr',
-      facebook:    'facebook.com/jkmedicalgroup',
-      naverPlace:  'https://naver.me/x67y6cAc',
-      naverBlog:   'blog.naver.com/jkstory1',
-      gangnamUnni: 'gangnamunni.com/hospitals/858',
     },
   },
   {
     label: '그랜드성형외과',
     urls: {
-      homepage:    'grandsurgery.com',
+      homepage:    'https://www.grandsurgery.com',
-      youtube:     'youtube.com/channel/UCU2o_aHqsNFuqwtdzVM3xbQ',
+      youtube:     'https://www.youtube.com/channel/UCU2o_aHqsNFuqwtdzVM3xbQ',
-      instagram:   'instagram.com/grand_korea',
+      instagram:   'https://www.instagram.com/grand_korea/',
-      facebook:    'facebook.com/grandps.korea',
+      facebook:    'https://www.facebook.com/grandps.korea',
-      naverPlace:  'https://naver.me/Fw7MYKWK',
+      naverPlace:  'https://m.place.naver.com/hospital/12322994',
-      naverBlog:   'blog.naver.com/grandprs',
+      naverBlog:   'https://blog.naver.com/grandprs',
-      gangnamUnni: 'gangnamunni.com/hospitals/62',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/62',
     },
   },
   {
-    label: 'BK 성형외과',
+    label: '원진성형외과',
     urls: {
-      homepage:    'bkhospital.com',
+      homepage:    'https://www.k-wonjin.co.kr',
-      youtube:     'youtube.com/channel/UChJONft3hemy5DGbXUveTFg',
+      youtube:     'https://www.youtube.com/@wjwonjin',
-      instagram:   'instagram.com/bkhospital_korea',
+      instagram:   'https://www.instagram.com/wonjin_official/',
-      facebook:    '',
+      facebook:    'https://www.facebook.com/KwonjinPS',
-      naverPlace:  'https://naver.me/517CTH3W',
+      naverPlace:  'https://m.place.naver.com/hospital/11887873',
-      naverBlog:   '',
+      naverBlog:   'https://blog.naver.com/popokpop',
-      gangnamUnni: '',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/2500',
     },
   },
   {
-    label: '톡스앤필',
+    label: '나나성형외과',
     urls: {
-      homepage:    'toxnfill.com',
+      homepage:    'https://www.nanaprs.com',
-      youtube:     'youtube.com/channel/UCFpFZkm7mclD-z_-j7FTUag',
+      youtube:     'https://www.youtube.com/@Nanaprstv',
-      instagram:   'instagram.com/toxnfill_official',
+      instagram:   'https://www.instagram.com/nanaprs/',
-      facebook:    'facebook.com/toxnfill.official',
+      facebook:    'https://www.facebook.com/nanaprs2',
-      naverPlace:  'https://naver.me/FvEmJIHA',
+      naverPlace:  'https://m.place.naver.com/hospital/1518147116',
-      naverBlog:   'blog.naver.com/toxnfill',
+      naverBlog:   'https://blog.naver.com/nanaprs1',
-      gangnamUnni: 'gangnamunni.com/hospitals/3702',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/938',
     },
   },
   {
-    label: '더 압구정 성형외과',
+    label: '디에이성형외과',
     urls: {
-      homepage:    'theclinic.co.kr',
+      homepage:    'https://daprs.com',
-      youtube:     'youtube.com/user/theplasticsurgery1',
+      youtube:     'https://www.youtube.com/channel/UC0wlA-w5JIt0G0EeWQf65AQ',
-      instagram:   'instagram.com/the_plasticsurgery',
+      instagram:   'https://www.instagram.com/da_plastic_surgery',
-      facebook:    'facebook.com/THEPS16445998',
+      facebook:    'https://www.facebook.com/daprs/',
-      naverPlace:  '',
+      naverPlace:  'https://m.place.naver.com/hospital/33084820',
-      naverBlog:   'blog.naver.com/with_theps',
+      naverBlog:   'https://blog.naver.com/daprs',
-      gangnamUnni: 'gangnamunni.com/hospitals/30',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/250',
     },
   },
   {
-    label: '라마르 성형외과',
+    label: '노트성형외과',
     urls: {
-      homepage:    'lamarps.com',
+      homepage:    'http://notebreast.com',
-      youtube:     '',
+      youtube:     'https://www.youtube.com/channel/UC2OIyb2serotqDyEzQYyCtA',
-      instagram:   '',
+      instagram:   'https://www.instagram.com/note.prs/',
-      facebook:    '',
+      facebook:    'https://www.facebook.com/noteprs2/',
-      naverPlace:  '',
+      naverPlace:  'https://m.place.naver.com/hospital/1572670484',
-      naverBlog:   '',
+      naverBlog:   'https://blog.naver.com/noteprs01',
-      gangnamUnni: '',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/2186',
     },
   },
   {
-    label: '오라클 성형외과',
+    label: '에이비성형외과',
     urls: {
-      homepage:    'oracleclinic.com',
+      homepage:    'https://www.abps.co.kr',
-      youtube:     'youtube.com/@oracle_medical_group',
+      youtube:     'https://www.youtube.com/@abplasticsurgery',
-      instagram:   'instagram.com/oraclemedicalgroup',
+      instagram:   'https://www.instagram.com/ab_plasticsurgery_kr/',
-      facebook:    'facebook.com/oracleclinickr',
+      facebook:    'https://www.facebook.com/profile.php?id=100063560996454',
-      naverPlace:  'https://naver.me/GhbU3VtK',
+      naverPlace:  'https://m.place.naver.com/hospital/1304260302',
-      naverBlog:   '',
+      naverBlog:   'https://blog.naver.com/abps20',
-      gangnamUnni: 'gangnamunni.com/hospitals/125',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/3004',
+    },
+  },
+  {
+    label: '제이준성형외과',
+    urls: {
+      homepage:    'http://www.jjprs.com',
+      youtube:     'https://www.youtube.com/channel/UC1p4msJnetDKeOW-B4nlwZA',
+      instagram:   'https://www.instagram.com/jayjunps/',
+      facebook:    'https://www.facebook.com/jayjunps',
+      naverPlace:  'https://m.place.naver.com/hospital/36294945',
+      naverBlog:   'https://blog.naver.com/gusrlf00',
+      gangnamUnni: 'https://www.gangnamunni.com/hospitals/139',
     },
   },
 ]

src/features/dev/pages/TestPrefillPage.tsx

@@ -1,23 +1,26 @@
 /**
  * /test — 고정 병원 fixture 를 디폴트로 채워 분석 플로우를 빠르게 검증하는 dev 페이지.
  *
- * - 진입 시 PINNED_LABEL fixture 로 form prefill
+ * - 상단 칩 그룹으로 10개 fixture 중 선택 (디폴트 PINNED_LABEL)
+ * - 선택 변경 시 MultiChannelInput 을 `key` 로 강제 리마운트 → 깔끔 prefill
  * - DevOnly 가드 아래 등록되어 localhost 에서만 접근
  */
+import { useState } from 'react'
 import { useNavigate } from 'react-router'
 import MultiChannelInput, { type AnalyzePayload } from '@/features/channels/components/MultiChannelInput'
 import { CLINICS } from '../fixtures/mockUrls'
 
 const PINNED_LABEL = '뷰성형외과'
 
-function pickIndex(): number {
+function pickInitialIndex(): number {
   const i = CLINICS.findIndex((c) => c.label === PINNED_LABEL)
   return i >= 0 ? i : 0
 }
 
 export default function TestPrefillPage() {
   const navigate = useNavigate()
-  const clinic = CLINICS[pickIndex()]
+  const [selectedIdx, setSelectedIdx] = useState<number>(pickInitialIndex)
+  const clinic = CLINICS[selectedIdx]
 
   const handleAnalyze = (payload: AnalyzePayload) => {
     navigate('/report/loading', {
@@ -38,9 +41,35 @@ export default function TestPrefillPage() {
           <h1 className="text-3xl font-bold text-primary-900">
             prefill 테스트
           </h1>
+          <p className="mt-2 text-sm text-slate-600">
+            병원을 선택하면 아래 입력 폼이 해당 fixture URL 로 자동 채워집니다.
+          </p>
+        </div>
+
+        <div className="mb-6 flex flex-wrap gap-2" role="tablist" aria-label="병원 fixture 선택">
+          {CLINICS.map((c, i) => {
+            const active = i === selectedIdx
+            return (
+              <button
+                key={c.label}
+                type="button"
+                role="tab"
+                aria-selected={active}
+                onClick={() => setSelectedIdx(i)}
+                className={
+                  active
+                    ? 'px-3 py-1.5 rounded-full text-xs font-medium bg-gradient-to-r from-[#4F1DA1] to-[#021341] text-white shadow-sm'
+                    : 'px-3 py-1.5 rounded-full text-xs font-medium bg-white/80 backdrop-blur-sm text-slate-700 border border-slate-200 hover:border-slate-300 hover:bg-white transition'
+                }
+              >
+                {c.label}
+              </button>
+            )
+          })}
         </div>
 
         <MultiChannelInput
+          key={clinic.label}
           variant="hero"
           initialUrls={clinic.urls}
           onAnalyze={handleAnalyze}