castad
/
o2o-infinith-frontend
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
main
Mina Choi 2026-06-04 09:42:23 +09:00
parent 4f6c30e249
commit b4691b029a
2 changed files with 113 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/features/dev/fixtures/mockUrls.ts
View File

@ -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',
youtube: 'youtube.com/channel/UCQqqH3Klj2HQSHNNSVug-CQ',
instagram: 'instagram.com/viewplastic',
facebook: 'facebook.com/viewps1',
naverPlace: 'https://naver.me/x9BxGXkK',
naverBlog: 'blog.naver.com/viewclinicps',
gangnamUnni: 'gangnamunni.com/hospitals/189',
homepage: 'https://www.viewclinic.com',
youtube: 'https://www.youtube.com/@ViewclinicKR',
instagram: 'https://www.instagram.com/viewplastic/',
facebook: 'https://www.facebook.com/viewps1/',
naverPlace: 'https://m.place.naver.com/hospital/11709005',
naverBlog: 'https://blog.naver.com/viewclinicps',
gangnamUnni: 'https://www.gangnamunni.com/hospitals/189',
},
},
{
label: '바노바기 성형외과',
label: '바노바기성형외과',
urls: {
homepage: 'banobagi.com',
youtube: 'youtube.com/c/banobagips',
instagram: 'instagram.com/banobagi_ps',
facebook: 'facebook.com/BanobagiPlasticSurgery',
naverPlace: 'https://naver.me/xxY2yLr5',
naverBlog: 'blog.naver.com/banobagiprs',
gangnamUnni: 'gangnamunni.com/hospitals/23',
homepage: 'https://www.banobagi.com',
youtube: 'https://www.youtube.com/c/banobagips',
instagram: 'https://www.instagram.com/banobagi_ps/',
facebook: 'https://www.facebook.com/BanobagiPlasticSurgery',
naverPlace: 'https://m.place.naver.com/hospital/21033469',
naverBlog: 'https://blog.naver.com/banobagips',
gangnamUnni: 'https://www.gangnamunni.com/hospitals/23',
},
},
{
label: 'ID 성형외과',
label: '아이디병원',
urls: {
homepage: 'idhospital.com',
youtube: 'youtube.com/user/IDhospital',
instagram: 'instagram.com/idhospital',
facebook: 'facebook.com/idhospital0050',
naverPlace: 'https://naver.me/GtURpCEn',
naverBlog: '',
gangnamUnni: 'gangnamunni.com/hospitals/257',
homepage: 'https://www.idhospital.com',
youtube: 'https://www.youtube.com/user/IDhospital',
instagram: 'https://www.instagram.com/idhospital',
facebook: 'https://www.facebook.com/idhospital0050',
naverPlace: 'https://m.place.naver.com/hospital/11548359',
naverBlog: 'https://blog.naver.com/idfacial',
gangnamUnni: 'https://www.gangnamunni.com/hospitals/257',
},
},
{
label: 'JK 성형외과',
label: '그랜드성형외과',
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',
homepage: 'https://www.grandsurgery.com',
youtube: 'https://www.youtube.com/channel/UCU2o_aHqsNFuqwtdzVM3xbQ',
instagram: 'https://www.instagram.com/grand_korea/',
facebook: 'https://www.facebook.com/grandps.korea',
naverPlace: 'https://m.place.naver.com/hospital/12322994',
naverBlog: 'https://blog.naver.com/grandprs',
gangnamUnni: 'https://www.gangnamunni.com/hospitals/62',
},
},
{
label: '그랜드 성형외과',
label: '원진성형외과',
urls: {
homepage: 'grandsurgery.com',
youtube: 'youtube.com/channel/UCU2o_aHqsNFuqwtdzVM3xbQ',
instagram: 'instagram.com/grand_korea',
facebook: 'facebook.com/grandps.korea',
naverPlace: 'https://naver.me/Fw7MYKWK',
naverBlog: 'blog.naver.com/grandprs',
gangnamUnni: 'gangnamunni.com/hospitals/62',
homepage: 'https://www.k-wonjin.co.kr',
youtube: 'https://www.youtube.com/@wjwonjin',
instagram: 'https://www.instagram.com/wonjin_official/',
facebook: 'https://www.facebook.com/KwonjinPS',
naverPlace: 'https://m.place.naver.com/hospital/11887873',
naverBlog: 'https://blog.naver.com/popokpop',
gangnamUnni: 'https://www.gangnamunni.com/hospitals/2500',
},
},
{
label: 'BK 성형외과',
label: '나나성형외과',
urls: {
homepage: 'bkhospital.com',
youtube: 'youtube.com/channel/UChJONft3hemy5DGbXUveTFg',
instagram: 'instagram.com/bkhospital_korea',
facebook: '',
naverPlace: 'https://naver.me/517CTH3W',
naverBlog: '',
gangnamUnni: '',
homepage: 'https://www.nanaprs.com',
youtube: 'https://www.youtube.com/@Nanaprstv',
instagram: 'https://www.instagram.com/nanaprs/',
facebook: 'https://www.facebook.com/nanaprs2',
naverPlace: 'https://m.place.naver.com/hospital/1518147116',
naverBlog: 'https://blog.naver.com/nanaprs1',
gangnamUnni: 'https://www.gangnamunni.com/hospitals/938',
},
},
{
label: '톡스앤필',
label: '디에이성형외과',
urls: {
homepage: 'toxnfill.com',
youtube: 'youtube.com/channel/UCFpFZkm7mclD-z_-j7FTUag',
instagram: 'instagram.com/toxnfill_official',
facebook: 'facebook.com/toxnfill.official',
naverPlace: 'https://naver.me/FvEmJIHA',
naverBlog: 'blog.naver.com/toxnfill',
gangnamUnni: 'gangnamunni.com/hospitals/3702',
homepage: 'https://daprs.com',
youtube: 'https://www.youtube.com/channel/UC0wlA-w5JIt0G0EeWQf65AQ',
instagram: 'https://www.instagram.com/da_plastic_surgery',
facebook: 'https://www.facebook.com/daprs/',
naverPlace: 'https://m.place.naver.com/hospital/33084820',
naverBlog: 'https://blog.naver.com/daprs',
gangnamUnni: 'https://www.gangnamunni.com/hospitals/250',
},
},
{
label: '더 압구정 성형외과',
label: '노트성형외과',
urls: {
homepage: 'theclinic.co.kr',
youtube: 'youtube.com/user/theplasticsurgery1',
instagram: 'instagram.com/the_plasticsurgery',
facebook: 'facebook.com/THEPS16445998',
naverPlace: '',
naverBlog: 'blog.naver.com/with_theps',
gangnamUnni: 'gangnamunni.com/hospitals/30',
homepage: 'http://notebreast.com',
youtube: 'https://www.youtube.com/channel/UC2OIyb2serotqDyEzQYyCtA',
instagram: 'https://www.instagram.com/note.prs/',
facebook: 'https://www.facebook.com/noteprs2/',
naverPlace: 'https://m.place.naver.com/hospital/1572670484',
naverBlog: 'https://blog.naver.com/noteprs01',
gangnamUnni: 'https://www.gangnamunni.com/hospitals/2186',
},
},
{
label: '라마르 성형외과',
label: '에이비성형외과',
urls: {
homepage: 'lamarps.com',
youtube: '',
instagram: '',
facebook: '',
naverPlace: '',
naverBlog: '',
gangnamUnni: '',
homepage: 'https://www.abps.co.kr',
youtube: 'https://www.youtube.com/@abplasticsurgery',
instagram: 'https://www.instagram.com/ab_plasticsurgery_kr/',
facebook: 'https://www.facebook.com/profile.php?id=100063560996454',
naverPlace: 'https://m.place.naver.com/hospital/1304260302',
naverBlog: 'https://blog.naver.com/abps20',
gangnamUnni: 'https://www.gangnamunni.com/hospitals/3004',
},
},
{
label: '오라클 성형외과',
label: '제이준성형외과',
urls: {
homepage: 'oracleclinic.com',
youtube: 'youtube.com/@oracle_medical_group',
instagram: 'instagram.com/oraclemedicalgroup',
facebook: 'facebook.com/oracleclinickr',
naverPlace: 'https://naver.me/GhbU3VtK',
naverBlog: '',
gangnamUnni: 'gangnamunni.com/hospitals/125',
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',
},
},
]

37
src/features/dev/pages/TestPrefillPage.tsx
View File

@ -1,23 +1,26 @@
/**
* /test — 고정 병원 fixture 를 디폴트로 채워 분석 플로우를 빠르게 검증하는 dev 페이지.
*
* - 진입 시 PINNED_LABEL fixture 로 form prefill
* - DevOnly 가드 아래 등록되어 localhost에서만 접근
* - 상단 칩 그룹으로 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}