From ad564c0771e7002b4497f8d5056e8c8c27697e92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?= Date: Sun, 8 Mar 2026 10:41:23 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20[design-insight]=2050=EC=A2=85=20UI=20?= =?UTF-8?q?=ED=8C=A8=ED=84=B4=20=EC=99=80=EC=9D=B4=EC=96=B4=ED=94=84?= =?UTF-8?q?=EB=A0=88=EC=9E=84=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 로그인/인증 5종: 클래식 로그인, 소셜 SSO, 2FA, 비밀번호 재설정, 회원가입 - 보고서 5종: 인쇄용, 인보이스/견적서, 분석 리포트, 업무 보고서, PDF 리포트 - 대시보드 4종: 위젯, 실시간 모니터링, 멀티 차트, 데이터 시각화 - 목록 3종: 무한 스크롤, 그룹/섹션, 벌크 액션 - 폼 3종: 인라인 편집, 리치 텍스트 에디터, 프로필 카드 - 모달 4종: 확인 다이얼로그, 라이트박스, 알림 센터, 날짜 선택기 - 네비게이션 3종: 메가 메뉴, 모바일 하단바, 다단계 드롭다운 - 기타 3종: 드래그 정렬, 스켈레톤 로딩, 알림 배지 --- .../views/rd/design-insight/index.blade.php | 1235 +++++++++++++++++ 1 file changed, 1235 insertions(+) diff --git a/resources/views/rd/design-insight/index.blade.php b/resources/views/rd/design-insight/index.blade.php index a97870af..46c1b0f0 100644 --- a/resources/views/rd/design-insight/index.blade.php +++ b/resources/views/rd/design-insight/index.blade.php @@ -2644,6 +2644,784 @@ function designInsight() { `; + // ===== 로그인/인증 ===== + // 로그인 폼 (클래식) + if (key.includes('로그인') && (key.includes('폼') || key.includes('클래식'))) return ` +
+
+
+
S
+
SAM에 로그인
+
+
+
이메일
+
user@company.com
+
+
+
+ 비밀번호 + 비밀번호 찾기 +
+
👁
+
+
+
+ 자동 로그인 +
+
로그인
+
계정이 없으신가요? 회원가입
+
+
`; + + // 소셜 로그인 / SSO + if (key.includes('소셜') || key.includes('sso') || key.includes('oauth')) return ` +
+
+
+
Welcome back
+
계속하려면 로그인하세요
+
+ ${[{icon:'🔵',name:'Google로 계속',bg:'#fff',border:'#e2e8f0',color:'#1e293b'},{icon:'⚫',name:'GitHub로 계속',bg:'#24292e',border:'#24292e',color:'#fff'},{icon:'🟣',name:'Slack으로 계속',bg:'#fff',border:'#e2e8f0',color:'#1e293b'}].map(s => + `
${s.icon} ${s.name}
` + ).join('')} +
+
+ 또는 +
+
+
이메일 주소
+
이메일로 계속
+
계속하면 이용약관 및 개인정보처리방침에 동의합니다.
+
+
`; + + // 2단계 인증 (2FA) + if (key.includes('2fa') || key.includes('otp') || key.includes('인증코드') || (key.includes('2단계') && key.includes('인증'))) return ` +
+
+
🔐
+
2단계 인증
+
인증 앱에서 6자리 코드를 입력하세요
+
+ ${[3,8,2,7,4,1].map((n,i) => `
${i<4?n:''}
`).join('')} +
+
확인
+
코드를 받지 못하셨나요? 재전송 (48초)
+
백업 코드로 인증 →
+
+
`; + + // 비밀번호 재설정 + if (key.includes('비밀번호') && (key.includes('재설정') || key.includes('복구'))) return ` +
+
+
✉️
+
비밀번호 재설정
+
가입한 이메일을 입력하시면
재설정 링크를 보내드립니다
+
+
이메일 주소
+
+
+
재설정 링크 발송
+
← 로그인으로 돌아가기
+
+
`; + + // 회원가입 폼 + if (key.includes('회원가입') || key.includes('가입') && key.includes('폼')) return ` +
+
+
+
회원가입
+
무료로 시작하세요
+
+ ${['이름','이메일','비밀번호'].map(f => `
${f}
`).join('')} +
+
+ ${['#ef4444','#f59e0b','#10b981','#e2e8f0'].map(c => `
`).join('')} +
+
보통 강도
+
+
+
✓
+ 이용약관 및 개인정보처리방침에 동의합니다 +
+
가입하기
+
이미 계정이 있으신가요? 로그인
+
+
`; + + // ===== 보고서/인쇄 ===== + // 인쇄용 보고서 + if (key.includes('인쇄') && key.includes('보고서')) return ` +
+
+
+
+
S
+ (주)코드브릿지엑스 +
+
서울시 강남구 테헤란로 123
+
+
+
보고서
+
문서번호: RPT-2026-0308
+
작성일: 2026.03.08
+
+
+
+ + + + + + + + ${[['블라인드 50mm','120','15,000','1,800,000'],['롤스크린 전동','45','28,000','1,260,000'],['커튼레일 2m','80','8,500','680,000']].map((r,i) => + `` + ).join('')} +
항목수량단가금액
${r[0]}${r[1]}${r[2]}${r[3]}
+
+
+
소계₩3,740,000
+
부가세(10%)₩374,000
+
합계₩4,114,000
+
+
+
+
+ 인쇄일: 2026.03.08Page 1 / 1 +
+
`; + + // 인보이스/견적서 + if (key.includes('인보이스') || key.includes('견적서')) return ` +
+
+
+
발행
+
(주)코드브릿지엑스
+
서울시 강남구 테헤란로
+
+
+
견 적 서
+
No. QT-2026-0042
+
+
+
+
+
수신
+
ABC 산업(주)
+
경기도 화성시 동탄대로 45
+
+
+
+
+
품목
+
수량
+
단가
+
금액
+ ${[['블라인드 50mm','100','12,000','1,200,000'],['롤스크린 200','50','25,000','1,250,000']].map((r,i) => + `
${r[0]}
${r[1]}
${r[2]}
${r[3]}
` + ).join('')} +
+
+
+
합계 금액
+
₩2,695,000
+
+
+
+
`; + + // 데이터 분석 리포트 + if (key.includes('분석') && key.includes('리포트')) return ` +
+
+ 📊 분석 리포트 +
+ ${['7일','30일','90일'].map((p,i) => `${p}`).join('')} + 📥 PDF +
+
+
+ ${[{l:'방문자',v:'12,847',d:'+15.3%',c:'#10b981'},{l:'전환율',v:'3.24%',d:'+0.8%',c:'#10b981'},{l:'이탈률',v:'42.1%',d:'-2.1%',c:'#ef4444'}].map(k => + `
${k.l}
${k.v}
${k.d}
` + ).join('')} +
+
+
+
일별 방문자 추이
+ +
+
+
`; + + // 일일/주간 업무 보고서 + if (key.includes('일일') || key.includes('주간') || key.includes('업무보고')) return ` +
+
+
📋 주간 업무 보고서
2026.03.02 ~ 03.08 | 작성자: 홍길동
+
+
+
✅ 완료 업무
+ ${['수주관리 API 개발 완료','거래처 목록 검색 기능 개선','견적서 PDF 출력 오류 수정'].map(t => + `
☑${t}
` + ).join('')} +
+
+
🔄 진행 중
+ ${[{t:'품목 마스터 마이그레이션',p:65},{t:'재고 관리 화면 설계',p:30}].map(i => + `
${i.t}${i.p}%
` + ).join('')} +
+
+
📌 예정 업무
+ ${['BOM 테이블 인라인 편집 구현','모바일 반응형 레이아웃 작업'].map(t => + `
☐${t}
` + ).join('')} +
+
`; + + // 대시보드 PDF 리포트 + if (key.includes('pdf') && (key.includes('대시보드') || key.includes('리포트'))) return ` +
+
+
MONTHLY REPORT
+
2026년 3월 월간 보고서
+
(주)코드브릿지엑스 | SAM
+
+
+
+
총 매출
+
₩48.5M
+
+
+
신규 수주
+
247건
+
+
+
+
+
월별 매출 차트
+
+ ${[20,35,28,42,38,50,45].map(h => `
`).join('')} +
+
+
+
ConfidentialPage 1 / 4
+
`; + + // ===== 대시보드 추가 ===== + // 위젯 대시보드 + if (key.includes('위젯') && key.includes('대시보드')) return ` +
+
+ 🎛️ 내 대시보드 +
+ + 위젯 추가 + ⚙️ +
+
+
+
⠿ ✕
+
📈 매출 추이
+ +
+
+
⠿ ✕
+
수주
+
148
+
+
+
⠿ ✕
+
할 일
+ ${['미팅 준비','보고서 작성'].map(t => `
☐ ${t}
`).join('')} +
+
+
⠿ ✕
+
최근 활동
+ ${['수주 #1024 등록','거래처 정보 수정'].map(t => `
${t}
`).join('')} +
+
+
`; + + // 실시간 모니터링 대시보드 + if (key.includes('실시간') && key.includes('모니터링')) return ` +
+
+ 🔴 실시간 모니터링 +
+
+ LIVE + 30s +
+
+ ${[{n:'API',s:'정상',c:'#10b981',up:'99.9%'},{n:'DB',s:'정상',c:'#10b981',up:'99.8%'},{n:'Queue',s:'경고',c:'#f59e0b',up:'97.2%'},{n:'Storage',s:'정상',c:'#10b981',up:'99.5%'}].map(v => + `
${v.n}
${v.s}
${v.up}
` + ).join('')} +
+
+
+
CPU / Memory
+ +
+
+
`; + + // 멀티 차트 분석 대시보드 + if (key.includes('멀티') && key.includes('차트')) return ` +
+
+ 📊 분석 대시보드 +
+ 이번 달 ▾ +
+
+
+
매출 추이 (Line)
+ +
+
+
카테고리별 (Bar)
+
+ ${[{h:80,c:'#3b82f6'},{h:60,c:'#10b981'},{h:90,c:'#f59e0b'},{h:45,c:'#8b5cf6'},{h:70,c:'#ec4899'}].map(b => + `
` + ).join('')} +
+
+
+
비율 (Donut)
+
+ 60% +
+
+
+
Top 5
+ ${['블라인드 50mm|42%','롤스크린 전동|28%','커튼레일|15%','기타|15%'].map(r => { + const [n,p] = r.split('|'); + return `
${n}
${p}
`; + }).join('')} +
+
+
`; + + // ===== 목록 추가 ===== + // 무한 스크롤 피드 + if (key.includes('무한스크롤') || key.includes('피드') && key.includes('소셜')) return ` +
+ ${[{user:'김영업',time:'10분 전',text:'이번 분기 수주 현황 보고서를 공유합니다.',likes:5,comments:3},{user:'이관리',time:'2시간 전',text:'새로운 거래처 ABC산업과 계약 체결되었습니다! 🎉',likes:12,comments:8}].map(p => + `
+
+
+
${p.user}
${p.time}
+
+
${p.text}
+
+ ❤️ ${p.likes}💬 ${p.comments}🔗 공유 +
+
` + ).join('')} +
+
+
불러오는 중...
+
+
`; + + // 그룹/섹션 목록 + if (key.includes('그룹') && (key.includes('섹션') || key.includes('목록'))) return ` +
+ ${[{name:'영업관리',count:4,open:true,items:['수주관리','거래처관리','견적서','매출현황']},{name:'생산관리',count:3,open:true,items:['작업지시','BOM관리','재고현황']},{name:'회계관리',count:2,open:false,items:[]}].map(g => + `
+
+ ${g.open?'▾':'▸'} + ${g.name} + ${g.count} +
+ ${g.open ? g.items.map(i => `
+ 📄${i} +
`).join('') : ''} +
` + ).join('')} +
`; + + // 벌크 액션 바 + if (key.includes('벌크') || key.includes('일괄처리') || key.includes('다중선택')) return ` +
+
+ ${[{name:'수주 #1024',checked:true},{name:'수주 #1025',checked:true},{name:'수주 #1026',checked:false},{name:'수주 #1027',checked:true},{name:'수주 #1028',checked:false}].map(r => + `
+
${r.checked?'✓':''}
+ ${r.name} +
+ 2026-03-08 +
` + ).join('')} +
+
+ 3건 선택 +
+ 상태 변경 + 이동 + 삭제 + ✕ +
+
`; + + // ===== 상세/폼 추가 ===== + // 인라인 편집 테이블 + if (key.includes('인라인') && key.includes('편집')) return ` +
+
+ BOM 품목 목록 +
+ 셀 클릭하여 편집 +
+
+
+
#
품명
수량
단위
비고
+
+
+
1
블라인드 50mm
120
EA
-
+
+
+
2
+
롤스크린 전동|
+
45
EA
-
+
+
+
3
커튼레일 2m
80
EA
재고 확인 필요
+
+
+ 행 추가
+
+
`; + + // 리치 텍스트 에디터 + if (key.includes('리치') || key.includes('에디터') || key.includes('wysiwyg')) return ` +
+
+ ${['B','I','U','S','|','H1','H2','H3','|','≡','•','1.','|','🔗','📷','','|','↩','↪'].map(b => + b === '|' ? `
` : + `
${b}
` + ).join('')} +
+
+
프로젝트 개요
+
SAM 프로젝트는 블라인드/스크린 제조업체를 위한 차세대 ERP/MES 통합 시스템입니다.
+
핵심 기능
+
+
• 수주/견적 관리
+
• 생산/품질 관리
+
• 재무/회계 관리
+
+
+
`; + + // 상세 정보 카드 (프로필) + if (key.includes('프로필') || key.includes('정보카드') && key.includes('상세')) return ` +
+
+
+
+
👤
+
+
홍길동
+
영업팀 팀장
+
+
+ 메시지 + 편집 +
+
+
+ ${[{l:'이메일',v:'hong@sam.co.kr'},{l:'전화',v:'010-1234-5678'},{l:'부서',v:'영업1팀'},{l:'상태',v:'근무 중',badge:true}].map(i => + `
${i.l}
${i.badge?``:''}${i.v}
` + ).join('')} +
+
+ ${[{l:'거래건수',v:'247'},{l:'수주액',v:'₩48.5M'},{l:'달성률',v:'112%'}].map(s => + `
${s.v}
${s.l}
` + ).join('')} +
+
+
`; + + // ===== 모달/팝업 추가 ===== + // 확인/경고 다이얼로그 + if (key.includes('확인') && (key.includes('경고') || key.includes('다이얼로그') || key.includes('삭제'))) return ` +
+
+
+
⚠️
+
정말 삭제하시겠습니까?
+
이 작업은 되돌릴 수 없습니다.
관련된 모든 데이터가 영구적으로 삭제됩니다.
+
+
확인하려면 "수주 #1024"를 입력하세요:
+
수주 #10...
+
+
+
+
취소
+
삭제
+
+
+
`; + + // 이미지 라이트박스 + if (key.includes('라이트박스') || key.includes('갤러리') && key.includes('이미지')) return ` +
+
+ 🔍+ + 🔍- + ✕ +
+
◀
+
▶
+
📸 이미지
+
+ 3 / 12 +
+
+ ${Array.from({length:5},(_, i) => `
`).join('')} +
+
`; + + // 알림 센터 패널 + if (key.includes('알림') && (key.includes('센터') || key.includes('패널') || key.includes('노티'))) return ` +
+
+ 🔔 알림 + 모두 읽음 +
+
오늘
+ ${[{icon:'📋',title:'수주 #1024 승인됨',desc:'김영업님이 수주를 승인했습니다.',time:'10분 전',unread:true},{icon:'💬',title:'새 댓글',desc:'이관리: "확인했습니다"',time:'1시간 전',unread:true},{icon:'⚠️',title:'재고 부족 알림',desc:'블라인드 50mm 재고가 10개 미만입니다.',time:'3시간 전',unread:false}].map(n => + `
+ ${n.icon} +
+
+ ${n.title} + ${n.unread?'
':''} +
+
${n.desc}
+
${n.time}
+
+
` + ).join('')} +
어제
+
+ ✅ +
견적서 #502 발송 완료
어제 오후 3:24
+
+
`; + + // 날짜/기간 선택기 + if (key.includes('날짜') && (key.includes('선택') || key.includes('피커'))) return ` +
+
+
+ ${['오늘','이번 주','이번 달','직접 선택'].map((p,i) => `${p}`).join('')} +
+
+
+
+ ◀ + 2026년 3월 + ▶ +
+
+ ${['일','월','화','수','목','금','토'].map(d => `
${d}
`).join('')} + ${Array.from({length:35},(_, i) => { + const d = i - 6; + const inRange = d >= 5 && d <= 12; + const isStart = d === 5; + const isEnd = d === 12; + return `
${d<1?'':d>31?'':d}
`; + }).join('')} +
+
+
+ 3월 5일 ~ 3월 12일 +
+ 취소 + 적용 +
+
+
`; + + // ===== 네비게이션 추가 ===== + // 메가 메뉴 + if (key.includes('메가') && key.includes('메뉴')) return ` +
+
+ SAM + ${['제품 ▾','솔루션 ▾','고객지원','문서'].map((m,i) => `${m}`).join('')} +
+ 로그인 +
+
+ ${[{cat:'ERP',items:['수주관리','견적서','거래처']},{cat:'MES',items:['작업지시','품질관리','재고']},{cat:'회계',items:['매출분석','세금관리','결산']},{cat:'인사',items:['근태관리','급여','조직도']}].map(col => + `
+
${col.cat}
+ ${col.items.map(i => `
${i}
`).join('')} +
` + ).join('')} +
+
`; + + // 모바일 하단 네비게이션 + if (key.includes('모바일') && (key.includes('하단') || key.includes('탭바'))) return ` +
+
+
+
+
+
콘텐츠
+
콘텐츠
+
+
+
+ ${[{icon:'🏠',label:'홈',active:true},{icon:'📋',label:'수주',active:false},{icon:'➕',label:'',fab:true},{icon:'📊',label:'분석',active:false,badge:3},{icon:'👤',label:'MY',active:false}].map(i => + i.fab ? `
+
` : + `
+
${i.icon}
+
${i.label}
+ ${i.badge?`
${i.badge}
`:''} +
` + ).join('')} +
+
`; + + // 다단계 드롭다운 + if (key.includes('드롭다운') && (key.includes('다단계') || key.includes('계층'))) return ` +
+
+
+ ${[{t:'새로 만들기',icon:'➕',sub:false},{t:'파일 열기',icon:'📂',sub:false,key:'⌘O'},{t:'최근 파일',icon:'🕐',sub:true},{t:'',sep:true},{t:'설정',icon:'⚙️',sub:true,active:true},{t:'',sep:true},{t:'로그아웃',icon:'🚪',sub:false,danger:true}].map(i => + i.sep ? `
` : + `
+ ${i.icon} + ${i.t} + ${i.key?`${i.key}`:''} + ${i.sub?`▸`:''} +
` + ).join('')} +
+
+ ${['일반','알림','보안','테마'].map((s,i) => + `
+ ${i===0?'✓':''}${s} +
` + ).join('')} +
+
+
`; + + // ===== 기타 추가 ===== + // 드래그 앤 드롭 정렬 + if (key.includes('드래그') && (key.includes('정렬') || key.includes('순서'))) return ` +
+
📋 메뉴 순서 관리
+ ${[{n:'대시보드',dragging:false},{n:'수주관리',dragging:true},{n:'',drop:true},{n:'거래처관리',dragging:false},{n:'품목관리',dragging:false},{n:'견적서관리',dragging:false}].map(i => + i.drop ? `
` : + `
+ ⠿ + ${i.n} +
+ ↕ +
` + ).join('')} +
`; + + // 스켈레톤 로딩 + if (key.includes('스켈레톤') || key.includes('플레이스홀더') && key.includes('로딩')) return ` +
+ + ${Array.from({length:3},(_, i) => + `
+
+
+
+
+
+
+
` + ).join('')} +
+ ${Array.from({length:2},(_, i) => + `
+
+
+
` + ).join('')} +
+
`; + + // 알림 배지 시스템 + if (key.includes('배지') && (key.includes('카운터') || key.includes('인디케이터'))) return ` +
+
배지 유형
+
+ ${[{icon:'🔔',badge:'3',type:'숫자 배지'},{icon:'💬',badge:'99+',type:'큰 숫자'},{icon:'📧',badge:'',dot:true,type:'점 배지'},{icon:'📋',badge:'NEW',text:true,type:'텍스트 배지'}].map(b => + `
+
+ ${b.icon} + ${b.dot?`
`: + b.text?`
${b.badge}
`: + b.badge?`
${b.badge}
`:''} +
+
${b.type}
+
` + ).join('')} +
+
사이드바 메뉴 적용 예시
+
+ ${[{m:'📊 대시보드',badge:''},{m:'📋 수주관리',badge:'5'},{m:'💬 메시지',badge:'12'},{m:'🔔 알림',badge:'',dot:true}].map(i => + `
+ ${i.m}
+ ${i.dot?`
`: + i.badge?`${i.badge}`:''} +
` + ).join('')} +
+
`; + + // 데이터 시각화 차트 컴포넌트 + if (key.includes('시각화') && key.includes('차트')) return ` +
+
+
월별 매출 현황2026년
+
+ ${['라인','바','파이'].map((t,i) => `${t}`).join('')} +
+
+
+
+ ● 매출 + ● 이익 +
+
+
+ 50M25M0 +
+
+ + + + + + + + + ₩48.5M + +
+
+ ${['1월','2월','3월','4월','5월','6월','7월'].map(m => `${m}`).join('')} +
+
+
+
`; + // 기본 와이어프레임 (매칭 안 됨) return `
@@ -3285,6 +4063,463 @@ function designInsight() { usedIn: ['AWS Console', 'Shopify', 'Jira', 'SAM 상세 페이지'], guidelines: '페이지 상단 좌측 배치. 글꼴 크기 12~13px. 현재 페이지는 클릭 불가 (시각적 구분). 3단계 이상일 때 가장 유용.', }, + // ===== 로그인/인증 (auth) ===== + { + type: 'pattern', title: '로그인 폼 (클래식)', category: 'auth', rating: 5, + tags: ['로그인', '인증', '폼', '보안'], + memo: 'GitHub, Google, Notion 등 거의 모든 서비스의 진입점. 심플하고 명확한 로그인 경험이 핵심.', + components: [ + { name: '로고 + 서비스명 (상단 중앙)', required: true }, + { name: '이메일/아이디 입력란', required: true }, + { name: '비밀번호 입력란 (보기 토글)', required: true }, + { name: '로그인 버튼 (풀 너비)', required: true }, + { name: '비밀번호 찾기 링크', required: true }, + { name: '자동 로그인 체크박스', required: false }, + { name: '회원가입 링크', required: false }, + ], + usedIn: ['GitHub', 'Google', 'Notion', 'SAM 로그인'], + guidelines: '폼은 화면 중앙 정렬, 너비 360~400px. 비밀번호 표시/숨기기 아이콘. Enter 키로 로그인 가능. 에러 메시지는 필드 하단에 빨간색.', + }, + { + type: 'pattern', title: '소셜 로그인 / SSO', category: 'auth', rating: 4, + tags: ['소셜로그인', 'SSO', 'OAuth', '간편로그인'], + memo: 'Vercel, Figma, Notion 등 최신 SaaS. 소셜 계정으로 원클릭 로그인. 가입 허들을 극적으로 낮춤.', + components: [ + { name: '소셜 로그인 버튼 (Google, GitHub 등)', required: true }, + { name: '구분선 ("또는")', required: true }, + { name: '이메일 로그인 폼 (하단)', required: false }, + { name: '서비스 로고 + 환영 메시지', required: true }, + { name: '개인정보 동의 링크', required: true }, + ], + usedIn: ['Vercel', 'Figma', 'Notion', 'Linear'], + guidelines: 'Google 로그인 최상단 배치 (가장 많이 사용). 버튼에 각 서비스 로고 + 이름 표시. "Continue with Google" 패턴이 표준.', + }, + { + type: 'pattern', title: '2단계 인증 (2FA)', category: 'auth', rating: 4, + tags: ['2FA', 'OTP', '보안', '인증코드'], + memo: 'GitHub, AWS, Stripe 등 보안이 중요한 서비스. 6자리 코드 입력으로 추가 인증.', + components: [ + { name: '안내 텍스트 (인증 방법 설명)', required: true }, + { name: '6자리 코드 입력란 (각 칸 분리)', required: true }, + { name: '확인 버튼', required: true }, + { name: '재전송 버튼 (카운트다운)', required: true }, + { name: '백업 코드로 인증 링크', required: false }, + { name: '자동 포커스 이동 (입력 시)', required: true }, + ], + usedIn: ['GitHub', 'AWS', 'Stripe', 'Google'], + guidelines: '각 숫자 칸은 40x48px, 중앙 정렬. 입력 시 자동으로 다음 칸 포커스. 붙여넣기(Ctrl+V) 시 자동 분배. 타이머 60초 후 재전송 가능.', + }, + { + type: 'pattern', title: '비밀번호 재설정 플로우', category: 'auth', rating: 3, + tags: ['비밀번호', '재설정', '이메일', '복구'], + memo: 'GitHub, Google, Slack 등. 3단계 플로우: 이메일 입력 → 인증 메일 확인 → 새 비밀번호 설정.', + components: [ + { name: '이메일 입력 화면', required: true }, + { name: '이메일 발송 완료 안내 화면', required: true }, + { name: '새 비밀번호 설정 화면', required: true }, + { name: '비밀번호 강도 표시', required: false }, + { name: '완료 + 로그인 유도 화면', required: true }, + ], + usedIn: ['GitHub', 'Google', 'Slack', 'SAM 비밀번호 찾기'], + guidelines: '각 단계 명확한 안내 텍스트. 이메일 발송 후 "메일함 열기" 버튼 제공. 비밀번호 규칙 사전 안내. 토큰 만료 시 재시도 안내.', + }, + { + type: 'pattern', title: '회원가입 폼', category: 'auth', rating: 4, + tags: ['회원가입', '가입', '온보딩', '폼'], + memo: 'Notion, Linear, Vercel 등. 최소 필드로 빠른 가입 후 프로필 완성은 나중에. 전환율이 핵심.', + components: [ + { name: '이름 입력란', required: true }, + { name: '이메일 입력란', required: true }, + { name: '비밀번호 입력란 (강도 표시)', required: true }, + { name: '가입 버튼 (풀 너비)', required: true }, + { name: '약관 동의 체크박스', required: true }, + { name: '소셜 가입 옵션', required: false }, + { name: '이미 계정이 있나요? 로그인 링크', required: true }, + ], + usedIn: ['Notion', 'Linear', 'Vercel', 'SAM 회원가입'], + guidelines: '필드 3~4개 이하 (이름, 이메일, 비밀번호). 비밀번호 강도 실시간 표시. 가입 버튼은 눈에 띄는 색상. 소셜 가입을 상단에 배치하면 전환율 향상.', + }, + // ===== 보고서/인쇄 (report) ===== + { + type: 'pattern', title: '인쇄용 보고서 레이아웃', category: 'report', rating: 4, + tags: ['인쇄', '보고서', 'A4', '프린트'], + memo: 'SAM, 전자세금계산서, 관공서 서식 등. A4 기준 인쇄 최적화. @media print 스타일 핵심.', + components: [ + { name: '회사 로고 + 문서 제목 (상단)', required: true }, + { name: '문서 번호 + 날짜 (우상단)', required: true }, + { name: '데이터 테이블 (테두리 인쇄)', required: true }, + { name: '합계/요약 영역 (하단)', required: true }, + { name: '서명란/도장 영역', required: false }, + { name: '페이지 번호 (푸터)', required: true }, + { name: '인쇄 버튼 (화면에서만 표시)', required: true }, + ], + usedIn: ['전자세금계산서', '관공서 서식', 'SAM 견적서/거래명세서'], + guidelines: 'A4 기준 210×297mm. @media print로 불필요 요소 숨기기. 테이블 테두리는 인쇄 시 선명하게. 페이지 나눔은 page-break-before/after.', + }, + { + type: 'pattern', title: '인보이스/견적서 문서', category: 'report', rating: 4, + tags: ['인보이스', '견적서', '문서', '금액'], + memo: 'Stripe Invoice, FreshBooks, SAM 견적서 등. 발행자/수신자 정보 + 품목 테이블 + 합계의 정형화된 구조.', + components: [ + { name: '발행자 정보 (좌상단: 로고+주소)', required: true }, + { name: '수신자 정보 (우상단: 업체명+주소)', required: true }, + { name: '문서 번호/날짜/유효기간', required: true }, + { name: '품목 테이블 (품명, 수량, 단가, 금액)', required: true }, + { name: '소계/세금/합계 (우하단)', required: true }, + { name: '비고/조건 (하단)', required: false }, + { name: '인감/서명란', required: false }, + ], + usedIn: ['Stripe Invoice', 'FreshBooks', 'Wave', 'SAM 견적서/거래명세서'], + guidelines: '금액은 우측 정렬 + 천단위 콤마. 합계는 볼드 + 크게. 품목 테이블은 줄무늬 배경(zebra striping). PDF 다운로드 버튼 제공.', + }, + { + type: 'pattern', title: '데이터 분석 리포트', category: 'report', rating: 4, + tags: ['분석', '리포트', '차트', 'KPI'], + memo: 'Google Analytics, Mixpanel, Amplitude 등. 다양한 차트와 데이터를 조합한 종합 분석 보고서.', + components: [ + { name: '기간 선택기 (상단)', required: true }, + { name: 'KPI 요약 카드 (핵심 지표 4~6개)', required: true }, + { name: '라인/바/파이 차트 (메인)', required: true }, + { name: '데이터 테이블 (상세)', required: true }, + { name: 'PDF/Excel 내보내기 버튼', required: true }, + { name: '비교 기간 토글 (전월/전년)', required: false }, + ], + usedIn: ['Google Analytics', 'Mixpanel', 'Amplitude', 'SAM 매출 분석'], + guidelines: '차트는 목적에 맞는 유형 선택 (추이→라인, 비교→바, 비율→파이). KPI 카드에 전기 대비 증감률 표시. 데이터 로딩 시 Skeleton UI.', + }, + { + type: 'pattern', title: '일일/주간 업무 보고서', category: 'report', rating: 3, + tags: ['일일보고', '주간보고', '업무보고', '보고서'], + memo: '사내 업무 보고서 양식. 완료/진행/예정 업무를 구조화하여 상사에게 보고하는 형식.', + components: [ + { name: '보고 기간/작성일/작성자', required: true }, + { name: '완료 업무 섹션 (체크리스트)', required: true }, + { name: '진행 중 업무 섹션 (진행률)', required: true }, + { name: '예정 업무 섹션', required: true }, + { name: '이슈/건의 사항', required: false }, + { name: '첨부파일', required: false }, + ], + usedIn: ['사내 보고 시스템', 'Notion 일일보고', 'SAM 일일 스크럼'], + guidelines: '완료 항목은 취소선 또는 체크 표시. 진행 중은 퍼센트 바. 중요 이슈는 빨간 강조. 인쇄 시 A4 1~2페이지 이내.', + }, + { + type: 'pattern', title: '대시보드 PDF 리포트', category: 'report', rating: 3, + tags: ['PDF', '대시보드', '리포트', '내보내기'], + memo: 'Stripe Report, HubSpot Report 등. 대시보드 데이터를 PDF로 내보내기 위한 인쇄 최적화 레이아웃.', + components: [ + { name: '리포트 표지 (로고+제목+기간)', required: true }, + { name: '요약 페이지 (핵심 KPI)', required: true }, + { name: '차트 페이지 (차트+설명)', required: true }, + { name: '상세 데이터 테이블', required: true }, + { name: '페이지 번호/날짜 (푸터)', required: true }, + { name: '목차 (3페이지 이상 시)', required: false }, + ], + usedIn: ['Stripe Report', 'HubSpot', 'Google Data Studio', 'SAM 월간 보고서'], + guidelines: 'A4 세로 또는 가로. 차트는 벡터(SVG) 또는 고해상도. 페이지 당 정보량 제한 (여백 충분히). 컬러 인쇄/흑백 인쇄 모두 고려.', + }, + // ===== 대시보드 추가 ===== + { + type: 'pattern', title: '위젯 대시보드 (커스터마이징)', category: 'dashboard', rating: 5, + tags: ['위젯', '대시보드', '드래그', '커스텀'], + memo: 'Notion Dashboard, Grafana, Datadog 등. 사용자가 위젯을 자유롭게 배치하고 크기를 조절하는 맞춤형 대시보드.', + components: [ + { name: '위젯 그리드 (드래그 이동)', required: true }, + { name: '위젯 리사이즈 (코너 드래그)', required: true }, + { name: '위젯 추가 버튼/패널', required: true }, + { name: '위젯 삭제/설정 (hover 메뉴)', required: true }, + { name: '레이아웃 저장/불러오기', required: true }, + { name: '위젯 유형: 차트, 숫자, 테이블, 목록', required: true }, + ], + usedIn: ['Grafana', 'Datadog', 'Notion', 'macOS 위젯'], + guidelines: '그리드 기반 배치 (12컬럼). 위젯 최소 크기 제한. 저장 시 레이아웃 JSON 직렬화. 기본 레이아웃 프리셋 제공.', + }, + { + type: 'pattern', title: '실시간 모니터링 대시보드', category: 'dashboard', rating: 4, + tags: ['실시간', '모니터링', '라이브', '상태'], + memo: 'Datadog, New Relic, AWS CloudWatch 등. 서버/시스템 상태를 실시간으로 모니터링하는 대시보드.', + components: [ + { name: '실시간 차트 (자동 업데이트)', required: true }, + { name: '상태 인디케이터 (정상/경고/장애)', required: true }, + { name: '알림 피드 (최근 이벤트)', required: true }, + { name: '서비스별 상태 카드', required: true }, + { name: '업타임 퍼센트 표시', required: false }, + { name: '자동 새로고침 간격 설정', required: false }, + ], + usedIn: ['Datadog', 'New Relic', 'AWS CloudWatch', 'SAM 서버 모니터링'], + guidelines: '정상=초록, 경고=노랑, 장애=빨강 (신호등 패턴). 차트 30초~1분 자동 갱신. 장애 시 화면 상단 빨간 배너. 소리 알림 선택적.', + }, + { + type: 'pattern', title: '멀티 차트 분석 대시보드', category: 'dashboard', rating: 4, + tags: ['차트', '분석', '시각화', '그래프'], + memo: 'Google Analytics, Tableau, Power BI 등. 다양한 차트 유형을 조합한 데이터 시각화 중심 대시보드.', + components: [ + { name: '라인 차트 (추이 분석)', required: true }, + { name: '바 차트 (비교 분석)', required: true }, + { name: '파이/도넛 차트 (비율 분석)', required: true }, + { name: '히트맵 (밀도 분석)', required: false }, + { name: '필터 바 (기간, 세그먼트)', required: true }, + { name: '차트 전환 옵션', required: false }, + ], + usedIn: ['Google Analytics', 'Tableau', 'Power BI', 'SAM 분석 대시보드'], + guidelines: '차트 간 일관된 색상 팔레트. 각 차트에 제목+범례. 데이터 포인트 hover 시 툴팁. 빈 데이터 시 안내 메시지.', + }, + // ===== 목록 추가 ===== + { + type: 'pattern', title: '무한 스크롤 피드', category: 'list', rating: 4, + tags: ['무한스크롤', '피드', '소셜', '스크롤'], + memo: 'Twitter/X, Instagram, LinkedIn 등 소셜 미디어. 스크롤하면 자동으로 다음 데이터를 로드하는 패턴.', + components: [ + { name: '피드 카드 (콘텐츠 + 메타정보)', required: true }, + { name: '자동 로딩 트리거 (스크롤 감지)', required: true }, + { name: '로딩 스피너/스켈레톤', required: true }, + { name: '새 글 알림 배너 ("새 글 N개")', required: false }, + { name: '맨 위로 가기 버튼', required: true }, + { name: '끝 도달 표시', required: true }, + ], + usedIn: ['Twitter/X', 'Instagram', 'LinkedIn', 'SAM 활동 로그'], + guidelines: 'IntersectionObserver로 스크롤 감지. 한 번에 20~30개 로드. 로딩 중 스켈레톤 3~4개 표시. 에러 시 재시도 버튼.', + }, + { + type: 'pattern', title: '그룹/섹션 목록', category: 'list', rating: 3, + tags: ['그룹', '섹션', '목록', '분류'], + memo: 'iOS 설정, macOS Finder, Notion 등. 항목을 논리적 그룹으로 묶어 표시하는 목록 패턴.', + components: [ + { name: '그룹 헤더 (섹션 제목 + 카운트)', required: true }, + { name: '그룹 내 항목 목록', required: true }, + { name: '접기/펼치기 토글', required: true }, + { name: 'Sticky 그룹 헤더 (스크롤 시 고정)', required: false }, + { name: '전체 접기/펼치기 버튼', required: false }, + ], + usedIn: ['iOS 설정', 'macOS Finder', 'Notion', 'SAM 품목 분류 목록'], + guidelines: '그룹 헤더는 배경색으로 구분. 접힌 상태에서도 항목 수 표시. 스크롤 시 현재 그룹 헤더 sticky. 초기 상태: 첫 그룹만 펼침.', + }, + { + type: 'pattern', title: '벌크 액션 바', category: 'list', rating: 4, + tags: ['벌크', '다중선택', '일괄처리', '액션바'], + memo: 'Gmail, GitHub, Jira 등. 여러 항목을 선택한 후 일괄 작업(삭제, 이동, 상태 변경)을 수행하는 패턴.', + components: [ + { name: '전체 선택 체크박스', required: true }, + { name: '선택 수 표시', required: true }, + { name: '벌크 액션 버튼 (삭제, 이동, 상태변경)', required: true }, + { name: '선택 해제 버튼', required: true }, + { name: '플로팅 액션 바 (하단 고정)', required: false }, + { name: '확인 다이얼로그 (위험 작업)', required: true }, + ], + usedIn: ['Gmail', 'GitHub', 'Jira', 'SAM 목록 화면'], + guidelines: '액션 바는 선택 시에만 표시 (애니메이션 슬라이드). 삭제 등 위험 작업은 확인 다이얼로그. 최대 선택 수 제한 안내.', + }, + // ===== 상세/폼 추가 ===== + { + type: 'pattern', title: '인라인 편집 테이블', category: 'form', rating: 4, + tags: ['인라인편집', '테이블', '스프레드시트', 'CRUD'], + memo: 'Airtable, Notion Table, Google Sheets 등. 행 클릭/더블클릭 시 셀을 직접 편집하는 스프레드시트형 패턴.', + components: [ + { name: '셀 클릭 → 편집 모드 전환', required: true }, + { name: '셀 유형별 에디터 (텍스트, 선택, 날짜)', required: true }, + { name: 'ESC 취소 / Enter 저장', required: true }, + { name: '행 추가 (하단 + 버튼)', required: true }, + { name: '행 삭제 (hover 메뉴)', required: true }, + { name: 'Tab 키로 다음 셀 이동', required: false }, + ], + usedIn: ['Airtable', 'Notion', 'Google Sheets', 'SAM BOM 테이블'], + guidelines: '편집 중인 셀은 파란 테두리 하이라이트. 변경 즉시 자동저장 (debounce 500ms). 셀 유형에 맞는 입력 UI (드롭다운, 날짜 피커).', + }, + { + type: 'pattern', title: '리치 텍스트 에디터', category: 'form', rating: 4, + tags: ['에디터', '리치텍스트', 'WYSIWYG', '마크다운'], + memo: 'Notion, Google Docs, Medium 등. 서식 있는 텍스트를 편집하는 WYSIWYG 에디터.', + components: [ + { name: '서식 도구 모음 (볼드, 기울임, 밑줄)', required: true }, + { name: '제목 레벨 (H1~H3)', required: true }, + { name: '목록 (순서/비순서)', required: true }, + { name: '이미지/파일 삽입', required: false }, + { name: '코드 블록', required: false }, + { name: '링크 삽입', required: true }, + { name: '플로팅 툴바 (선택 시 표시)', required: false }, + ], + usedIn: ['Notion', 'Google Docs', 'Medium', 'SAM 게시판 에디터'], + guidelines: '플로팅 툴바 (텍스트 선택 시 나타남) 또는 상단 고정 툴바. Markdown 단축키 지원 (**볼드**, # 제목). 이미지 드래그 앤 드롭.', + }, + { + type: 'pattern', title: '상세 정보 카드 (프로필)', category: 'form', rating: 3, + tags: ['상세', '프로필', '정보카드', '요약'], + memo: 'LinkedIn 프로필, GitHub 프로필, Salesforce Contact 등. 엔티티의 핵심 정보를 카드형으로 요약 표시.', + components: [ + { name: '프로필 이미지/아바타', required: true }, + { name: '이름 + 직함/역할', required: true }, + { name: '연락처 정보 (이메일, 전화)', required: true }, + { name: '액션 버튼 (편집, 메시지, 삭제)', required: true }, + { name: '태그/배지 (부서, 상태)', required: false }, + { name: '통계 (거래건수, 매출액 등)', required: false }, + ], + usedIn: ['LinkedIn', 'GitHub', 'Salesforce', 'SAM 거래처 상세'], + guidelines: '이미지 좌측 또는 상단 배치. 핵심 정보는 한눈에 파악 가능하게. 액션 버튼은 우상단. 통계는 숫자 + 라벨 조합.', + }, + // ===== 모달/팝업 추가 ===== + { + type: 'pattern', title: '확인/경고 다이얼로그', category: 'modal', rating: 4, + tags: ['확인', '경고', '다이얼로그', '삭제확인'], + memo: 'GitHub "Delete repository", Slack "Leave channel" 등. 위험한 작업 전 사용자에게 재확인을 요청하는 패턴.', + components: [ + { name: '경고 아이콘 (⚠️ 또는 빨간 방패)', required: true }, + { name: '제목 (명확한 액션 설명)', required: true }, + { name: '설명 텍스트 (영향 범위)', required: true }, + { name: '확인 입력 (리소스명 타이핑)', required: false }, + { name: '취소/확인 버튼 (확인은 빨간색)', required: true }, + ], + usedIn: ['GitHub', 'Slack', 'AWS', 'SAM 삭제 확인'], + guidelines: '삭제 버튼은 빨간색 (위험 인지). GitHub 패턴: 리소스명을 직접 타이핑해야 확인 가능. 취소가 기본 포커스 (실수 방지).', + }, + { + type: 'pattern', title: '이미지 라이트박스/갤러리', category: 'modal', rating: 3, + tags: ['라이트박스', '갤러리', '이미지', '확대'], + memo: 'Medium, Dribbble, Instagram 등. 이미지 클릭 시 전체 화면으로 확대하여 상세히 볼 수 있는 패턴.', + components: [ + { name: '오버레이 배경 (어둡게)', required: true }, + { name: '이미지 (최대 크기, 중앙)', required: true }, + { name: '좌우 네비게이션 화살표', required: true }, + { name: '닫기 버튼 (우상단 또는 ESC)', required: true }, + { name: '이미지 카운터 (3/12)', required: false }, + { name: '확대/축소 컨트롤', required: false }, + { name: '썸네일 스트립 (하단)', required: false }, + ], + usedIn: ['Medium', 'Dribbble', 'Instagram', 'SAM 첨부 이미지 뷰어'], + guidelines: '배경 클릭 또는 ESC로 닫기. 좌우 화살표 키 네비게이션. 이미지 로딩 시 placeholder. 모바일: 스와이프 네비게이션.', + }, + { + type: 'pattern', title: '알림 센터 (슬라이드 패널)', category: 'modal', rating: 4, + tags: ['알림', '패널', '슬라이드', '노티피케이션'], + memo: 'GitHub Notifications, Slack Activity, Linear Inbox 등. 화면 우측에서 슬라이드하여 알림 목록을 보여주는 패턴.', + components: [ + { name: '알림 아이콘 + 배지 (트리거)', required: true }, + { name: '슬라이드 패널 (우측)', required: true }, + { name: '알림 목록 (시간순)', required: true }, + { name: '읽음/안읽음 구분', required: true }, + { name: '모두 읽음 처리 버튼', required: true }, + { name: '알림 유형별 아이콘/색상', required: false }, + { name: '알림 클릭 → 해당 페이지 이동', required: true }, + ], + usedIn: ['GitHub', 'Slack', 'Linear', 'SAM 알림'], + guidelines: '패널 너비 360~400px. 안읽은 알림은 배경색 구분. 알림 그룹핑 (오늘/어제/이전). 빈 상태: "새 알림이 없습니다".', + }, + // ===== 네비게이션 추가 ===== + { + type: 'pattern', title: '메가 메뉴', category: 'navigation', rating: 3, + tags: ['메가메뉴', '드롭다운', '대형메뉴', 'GNB'], + memo: 'Amazon, Microsoft, Shopify 등 대규모 서비스. 메뉴 hover 시 전체 너비 드롭다운으로 하위 메뉴를 한눈에 표시.', + components: [ + { name: '상단 메뉴 바 (1차 메뉴)', required: true }, + { name: '메가 드롭다운 (전체 너비)', required: true }, + { name: '카테고리 컬럼 (2~4열)', required: true }, + { name: '아이콘/이미지 포함 항목', required: false }, + { name: '추천/하이라이트 영역', required: false }, + ], + usedIn: ['Amazon', 'Microsoft', 'Shopify', 'SAM 대형 메뉴 (검토용)'], + guidelines: '메뉴 진입 지연 200ms (실수 방지). 컬럼 간 명확한 구분. 현재 호버 메뉴 시각적 강조. 모바일에서는 아코디언으로 변환.', + }, + { + type: 'pattern', title: '모바일 하단 네비게이션', category: 'navigation', rating: 4, + tags: ['모바일', '하단바', '탭바', '네비게이션'], + memo: 'Instagram, Twitter/X, YouTube 등 모바일 앱. 엄지 손가락이 닿기 쉬운 하단에 핵심 메뉴 배치.', + components: [ + { name: '하단 고정 바', required: true }, + { name: '메뉴 아이콘 + 라벨 (4~5개)', required: true }, + { name: '활성 탭 하이라이트', required: true }, + { name: '알림 배지 (숫자)', required: false }, + { name: '중앙 액션 버튼 (FAB)', required: false }, + ], + usedIn: ['Instagram', 'Twitter/X', 'YouTube', 'SAM 모바일 뷰'], + guidelines: '항목 4~5개 권장 (초과 시 "더보기"). 아이콘 24px + 라벨 10px. 활성 탭은 색상 + 아이콘 변화. Safe area 하단 여백 (iOS 노치 대응).', + }, + // ===== 기타 추가 ===== + { + type: 'pattern', title: '드래그 앤 드롭 정렬', category: 'etc', rating: 4, + tags: ['드래그', '정렬', '순서변경', '드래그앤드롭'], + memo: 'Trello, Todoist, Notion, macOS Reminders 등. 마우스로 항목을 끌어서 순서를 변경하는 인터랙션.', + components: [ + { name: '드래그 핸들 (⠿ 아이콘)', required: true }, + { name: '드래그 미리보기 (반투명 복제)', required: true }, + { name: '드롭 위치 인디케이터 (파란 선)', required: true }, + { name: '드래그 중 원래 위치 표시', required: true }, + { name: '키보드 접근성 (Alt+↑↓)', required: false }, + ], + usedIn: ['Trello', 'Todoist', 'Notion', 'SAM 메뉴 순서, BOM 순서'], + guidelines: '드래그 시작 지연 150ms (클릭과 구분). 드래그 중 오토 스크롤 (목록 끝 근처). 드롭 후 애니메이션. 모바일: 길게 누르기.', + }, + { + type: 'pattern', title: '스켈레톤 로딩', category: 'etc', rating: 4, + tags: ['스켈레톤', '로딩', '플레이스홀더', 'UX'], + memo: 'Facebook, LinkedIn, YouTube, Notion 등. 데이터 로딩 중 콘텐츠 구조를 미리 보여주어 체감 속도를 높이는 패턴.', + components: [ + { name: '콘텐츠 형태의 회색 플레이스홀더', required: true }, + { name: '펄스/웨이브 애니메이션', required: true }, + { name: '실제 레이아웃과 동일한 구조', required: true }, + { name: '텍스트 줄 (다양한 너비)', required: true }, + { name: '이미지 영역 (회색 사각형)', required: true }, + { name: '아바타 (회색 원형)', required: false }, + ], + usedIn: ['Facebook', 'LinkedIn', 'YouTube', 'SAM 목록/상세 로딩'], + guidelines: '실제 UI와 동일한 구조/크기. 텍스트 줄은 60~80% 너비 랜덤. 애니메이션은 좌→우 웨이브. 로딩 1초 미만이면 스켈레톤 불필요.', + }, + { + type: 'pattern', title: '알림 배지 시스템', category: 'etc', rating: 3, + tags: ['배지', '알림', '카운터', '인디케이터'], + memo: 'Gmail, Slack, iOS 앱 아이콘 등. 읽지 않은 항목 수나 새 알림을 숫자/점으로 표시하는 패턴.', + components: [ + { name: '숫자 배지 (빨간 원 + 숫자)', required: true }, + { name: '점 배지 (숫자 없이 존재만 표시)', required: true }, + { name: '아이콘 위 배치 (우상단)', required: true }, + { name: '99+ 처리 (큰 숫자)', required: true }, + { name: '애니메이션 (새 알림 시 바운스)', required: false }, + ], + usedIn: ['Gmail', 'Slack', 'iOS', 'SAM 사이드바 메뉴'], + guidelines: '배지 최소 크기 18px. 숫자 1자리: 원형, 2자리 이상: pill 형태. 99+로 표기 (3자리 이상). 색상: 빨강(긴급), 파랑(정보), 회색(비활성).', + }, + { + type: 'pattern', title: '데이터 시각화 차트 컴포넌트', category: 'dashboard', rating: 4, + tags: ['차트', '그래프', '시각화', '데이터'], + memo: 'Chart.js, D3.js, Recharts 등 차트 라이브러리를 활용한 데이터 시각화 컴포넌트 패턴.', + components: [ + { name: '차트 제목 + 범례', required: true }, + { name: '차트 영역 (라인/바/파이/도넛)', required: true }, + { name: '툴팁 (데이터 포인트 hover)', required: true }, + { name: '축 라벨 (X/Y축)', required: true }, + { name: '기간 선택 토글', required: false }, + { name: '데이터 없음 표시', required: true }, + ], + usedIn: ['Stripe', 'Vercel', 'GitHub Insights', 'SAM 차트 컴포넌트'], + guidelines: '색상 6~8개 팔레트 고정. 접근성: 색맹 대응 패턴 구분. 반응형: 작은 화면에서 범례 하단 이동. 로딩 시 차트 영역 스켈레톤.', + }, + { + type: 'pattern', title: '다단계 드롭다운 메뉴', category: 'navigation', rating: 3, + tags: ['드롭다운', '계층', '메뉴', '셀렉트'], + memo: 'macOS 메뉴, VS Code 우클릭, Figma 메뉴 등. 메뉴 항목에 서브메뉴가 있는 계층형 드롭다운.', + components: [ + { name: '1단계 메뉴 (클릭/hover 트리거)', required: true }, + { name: '2단계 서브메뉴 (우측 확장)', required: true }, + { name: '구분선 (그룹 분리)', required: true }, + { name: '단축키 표시 (우측)', required: false }, + { name: '체크 마크 (선택 상태)', required: false }, + { name: '비활성 항목 (회색)', required: true }, + ], + usedIn: ['macOS', 'VS Code', 'Figma', 'SAM 우클릭 메뉴'], + guidelines: '서브메뉴 전환 지연 200ms. 현재 활성 항목 배경색 하이라이트. 메뉴 외부 클릭 시 닫기. 키보드: 화살표 키 네비게이션.', + }, + { + type: 'pattern', title: '날짜/기간 선택기 (Date Picker)', category: 'modal', rating: 4, + tags: ['날짜', '기간', '달력', '피커'], + memo: 'Airbnb, Booking.com, Google Flights 등. 단일 날짜 또는 시작~종료 기간을 선택하는 UI.', + components: [ + { name: '달력 그리드 (월간)', required: true }, + { name: '이전/다음 월 네비게이션', required: true }, + { name: '기간 선택 (시작~종료 하이라이트)', required: false }, + { name: '오늘 버튼 (빠른 이동)', required: true }, + { name: '프리셋 (오늘, 이번 주, 이번 달)', required: false }, + { name: '시간 선택 (선택적)', required: false }, + ], + usedIn: ['Airbnb', 'Booking.com', 'Google Flights', 'SAM 기간 필터'], + guidelines: '오늘 날짜 강조. 선택 불가 날짜 회색 처리. 기간 선택 시 범위 배경색. 모바일: 전체 화면 달력. 키보드: 화살표 키 이동.', + }, ]; const cards = presets.map(p => ({