Component Library

Jump to bottom
mini edited this page Aug 3, 2026 · 2 revisions

공통 컴포넌트 라이브러리

src/components/ui/ 아래에 있는 재사용 컴포넌트 전체 목록. 새 화면을 만들 때 여기부터 확인할 것 — 대부분의 UI 패턴(뱃지, 필터, 빈 상태, 모달, 알림)이 이미 만들어져 있다.

표시·상태

컴포넌트용도주요 props
StatusLabel상태 뱃지 (승인 대기, 완료 등)tone: 'neutral'|'info'|'success'|'warning'|'critical'|'agent', children으로 라벨 텍스트 오버라이드 가능
AgentSourceLabelAgent 판단 근거 출처 뱃지source: 'rule'|'data'|'draft'|'review'
DetailRow라벨-값 한 줄 표시 (설정/업무 상세 등에서 반복 사용)label, value, tone?: 'default'|'warning'|'critical'|'success'
WorkflowStep처리 단계 표시state: 'pending'|'active'|'done'|'blocked'
DecisionGate승인 게이트 표시state: 'locked'|'ready'|'approved'
EmptyStateloading/empty/error 공통 상태 화면kind: 'loading'|'empty'|'error', title, body, note?(클릭 불가 보조 캡션 — 로딩 상태의 "처리 중 · 중복 실행 차단" 등, PR #209), actionLabel?, onAction? — useApiQuery/useAsyncDemoData와 함께 사용

목록·요약

컴포넌트용도
WorkItemRow업무 목록 행 (대시보드/업무함/업무상세 공용). urgency: 'warning'|'critical'|'neutral'로 왼쪽 rail 색상 결정 — 기한 3단계 색상 유틸(src/utils/urgency.ts)의 getUrgencyTier 결과를 매핑해서 사용
AgentSummaryAgent가 준비한 다음 행동 요약 카드

입력·인터랙션

컴포넌트용도도입 이유
Button공통 버튼 (Primary/Secondary × Default/Disabled)최초 라이브러리
Dropdown커스텀 콤보박스네이티브 \<select\>는 옵션 팝업을 CSS로 스타일링할 수 없어서 화면마다 드롭다운 모양이 제각각이었다 (#58). 트리거 버튼(48px 고정 높이) + 옵션 리스트, 키보드(화살표/Enter/Escape) 지원, aria-activedescendant로 스크린리더에 활성 옵션 전달, 닫힐 때 트리거로 포커스 복원. 현재 업무함/근로자/Agent 패널의 상태·마감·기한·기간 필터가 전부 이걸 사용
Modal공통 모달/다이얼로그#93에서 도움말 패널 만들며 도입. role="dialog" + aria-modal, ESC/바깥 클릭 닫기, Tab 포커스 트랩, 열릴 때 첫 포커스 가능 요소로 자동 포커스, 닫힐 때 트리거 요소로 포커스 복원, body 스크롤 잠금
ToastViewport전역 토스트 알림#94에서 도입. src/store/toastStore.ts(Zustand)의 showToast(message)로 어디서든 호출, AppLayout에 한 번만 마운트됨. role="status" aria-live="polite", 3초 후 자동 소멸. 초안 저장·구성원 초대·승인 권한 토글·승인 요청 등 주요 액션에 연결돼 있음

| SearchInput | 디바운스된 검색 인풋 | value, onChange, placeholder, ariaLabel |

관련 유틸/훅 (컴포넌트는 아니지만 같이 알아두면 좋은 것)

이름위치용도
useApiQuerysrc/hooks/useApiQuery.ts실제 서버 API 연동 화면의 표준 데이터 페칭 훅.fetcher/isEmpty 콜백을 받아 'loading'|'success'|'empty'|'error' 상태를 반환 — useAsyncDemoData와 동일한 상태 모양이라 EmptyState 분기 코드는 그대로 두고 훅만 교체하면 된다. fetcher/isEmpty는 반드시 useCallback으로 안정화해서 넘겨야 무한 재요청을 피할 수 있다. refetch() 제공
useAsyncDemoDatasrc/hooks/useAsyncDemoData.ts아직 서버 API가 없는 화면에서만 사용하는 구식 훅. loading→success/empty 전이를 흉내낸다. ?demoState=loading|empty|error URL 쿼리로 강제 전환 가능. 해당 화면에 API가 생기면 useApiQuery로 교체
useDebouncedValuesrc/hooks/useDebouncedValue.ts검색 인풋 등에 쓰는 범용 디바운스 훅 (기본 200ms). #96
getUrgencyTier / daysUntil / URGENCY_TONE / URGENCY_LABELsrc/utils/urgency.ts기한(D-day)을 긴급(7일 이내)/중간(8~30일)/여유(31일 이상 또는 기한 없음) 3단계로 분류. #87 — 근로자 목록 기한 뱃지, 업무함 rail 색상에 적용. daysUntil은 PR #217에서 타임존 경계 하루 오차 버그를 수정했으니 날짜 문자열은 반드시 로컬 Y/M/D 기준으로 다뤄야 함

@tanstack/react-query가 package.json에 설치·초기화(src/lib/queryClient.ts, main.tsx)는 되어 있지만, 실제 페이지들은 전부 위 useApiQuery 커스텀 훅을 쓰고 있다. React Query를 페이지에서 직접 쓰는 곳은 아직 없음 — 필요해지면 useApiQuery를 React Query 기반으로 재작성하거나 점진적으로 교체할 것.

새 화면 만들 때 체크리스트

  1. 목록형 화면이면 EmptyState + (실 API가 있으면 useApiQuery, 없으면 useAsyncDemoData)로 loading/empty/error부터 처리
  2. 검색 인풋이 있으면 useDebouncedValue로 감싸기
  3. 필터 드롭다운은 네이티브 <select> 대신 Dropdown 사용
  4. 주요 액션(저장/초대/승인 등)에는 useToastStore().showToast(...)로 피드백 연결
  5. 날짜/기한을 보여준다면 getUrgencyTier로 색상 통일 검토
  6. 데모 데이터 필드에는 실제 백엔드 연동 지점을 // TODO(backend): <method> <path> 주석으로 표시 (CONTRIBUTING.md 컨벤션)

Clone this wiki locally

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Component Library
Jump to bottom

mini edited this page Aug 3, 2026
·
2 revisions
공통 컴포넌트 라이브러리
src/components/ui/ 아래에 있는 재사용 컴포넌트 전체 목록. 새 화면을 만들 때 여기부터 확인할 것 — 대부분의 UI 패턴(뱃지, 필터, 빈 상태, 모달, 알림)이 이미 만들어져 있다.
표시·상태
컴포넌트용도주요 props
StatusLabel상태 뱃지 (승인 대기, 완료 등)tone: 'neutral'|'info'|'success'|'warning'|'critical'|'agent', children으로 라벨 텍스트 오버라이드 가능
AgentSourceLabelAgent 판단 근거 출처 뱃지source: 'rule'|'data'|'draft'|'review'
DetailRow라벨-값 한 줄 표시 (설정/업무 상세 등에서 반복 사용)label, value, tone?: 'default'|'warning'|'critical'|'success'
WorkflowStep처리 단계 표시state: 'pending'|'active'|'done'|'blocked'
DecisionGate승인 게이트 표시state: 'locked'|'ready'|'approved'
EmptyStateloading/empty/error 공통 상태 화면kind: 'loading'|'empty'|'error', title, body, note?(클릭 불가 보조 캡션 — 로딩 상태의 "처리 중 · 중복 실행 차단" 등, PR #209), actionLabel?, onAction? — useApiQuery/useAsyncDemoData와 함께 사용
목록·요약
컴포넌트용도
WorkItemRow업무 목록 행 (대시보드/업무함/업무상세 공용). urgency: 'warning'|'critical'|'neutral'로 왼쪽 rail 색상 결정 — 기한 3단계 색상 유틸(src/utils/urgency.ts)의 getUrgencyTier 결과를 매핑해서 사용
AgentSummaryAgent가 준비한 다음 행동 요약 카드
입력·인터랙션
컴포넌트용도도입 이유
Button공통 버튼 (Primary/Secondary × Default/Disabled)최초 라이브러리
Dropdown커스텀 콤보박스네이티브 \<select\>는 옵션 팝업을 CSS로 스타일링할 수 없어서 화면마다 드롭다운 모양이 제각각이었다 (#58). 트리거 버튼(48px 고정 높이) + 옵션 리스트, 키보드(화살표/Enter/Escape) 지원, aria-activedescendant로 스크린리더에 활성 옵션 전달, 닫힐 때 트리거로 포커스 복원. 현재 업무함/근로자/Agent 패널의 상태·마감·기한·기간 필터가 전부 이걸 사용
Modal공통 모달/다이얼로그#93에서 도움말 패널 만들며 도입. role="dialog" + aria-modal, ESC/바깥 클릭 닫기, Tab 포커스 트랩, 열릴 때 첫 포커스 가능 요소로 자동 포커스, 닫힐 때 트리거 요소로 포커스 복원, body 스크롤 잠금
ToastViewport전역 토스트 알림#94에서 도입. src/store/toastStore.ts(Zustand)의 showToast(message)로 어디서든 호출, AppLayout에 한 번만 마운트됨. role="status" aria-live="polite", 3초 후 자동 소멸. 초안 저장·구성원 초대·승인 권한 토글·승인 요청 등 주요 액션에 연결돼 있음
| SearchInput | 디바운스된 검색 인풋 | value, onChange, placeholder, ariaLabel |
관련 유틸/훅 (컴포넌트는 아니지만 같이 알아두면 좋은 것)
이름위치용도
useApiQuerysrc/hooks/useApiQuery.ts실제 서버 API 연동 화면의 표준 데이터 페칭 훅.fetcher/isEmpty 콜백을 받아 'loading'|'success'|'empty'|'error' 상태를 반환 — useAsyncDemoData와 동일한 상태 모양이라 EmptyState 분기 코드는 그대로 두고 훅만 교체하면 된다. fetcher/isEmpty는 반드시 useCallback으로 안정화해서 넘겨야 무한 재요청을 피할 수 있다. refetch() 제공
useAsyncDemoDatasrc/hooks/useAsyncDemoData.ts아직 서버 API가 없는 화면에서만 사용하는 구식 훅. loading→success/empty 전이를 흉내낸다. ?demoState=loading|empty|error URL 쿼리로 강제 전환 가능. 해당 화면에 API가 생기면 useApiQuery로 교체
useDebouncedValuesrc/hooks/useDebouncedValue.ts검색 인풋 등에 쓰는 범용 디바운스 훅 (기본 200ms). #96
getUrgencyTier / daysUntil / URGENCY_TONE / URGENCY_LABELsrc/utils/urgency.ts기한(D-day)을 긴급(7일 이내)/중간(8~30일)/여유(31일 이상 또는 기한 없음) 3단계로 분류. #87 — 근로자 목록 기한 뱃지, 업무함 rail 색상에 적용. daysUntil은 PR #217에서 타임존 경계 하루 오차 버그를 수정했으니 날짜 문자열은 반드시 로컬 Y/M/D 기준으로 다뤄야 함
@tanstack/react-query가 package.json에 설치·초기화(src/lib/queryClient.ts, main.tsx)는 되어 있지만,
실제 페이지들은 전부 위 useApiQuery 커스텀 훅을 쓰고 있다. React Query를 페이지에서 직접 쓰는 곳은
아직 없음 — 필요해지면 useApiQuery를 React Query 기반으로 재작성하거나 점진적으로 교체할 것.
새 화면 만들 때 체크리스트
  1. 목록형 화면이면 EmptyState + (실 API가 있으면 useApiQuery, 없으면 useAsyncDemoData)로 loading/empty/error부터 처리
  2. 검색 인풋이 있으면 useDebouncedValue로 감싸기
  3. 필터 드롭다운은 네이티브 <select> 대신 Dropdown 사용
  4. 주요 액션(저장/초대/승인 등)에는 useToastStore().showToast(...)로 피드백 연결
  5. 날짜/기한을 보여준다면 getUrgencyTier로 색상 통일 검토
  6. 데모 데이터 필드에는 실제 백엔드 연동 지점을 // TODO(backend): <method> <path> 주석으로 표시 (CONTRIBUTING.md 컨벤션)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Component Library
Jump to bottom

mini edited this page Aug 3, 2026
·
2 revisions
공통 컴포넌트 라이브러리
src/components/ui/ 아래에 있는 재사용 컴포넌트 전체 목록. 새 화면을 만들 때 여기부터 확인할 것 — 대부분의 UI 패턴(뱃지, 필터, 빈 상태, 모달, 알림)이 이미 만들어져 있다.
표시·상태
컴포넌트용도주요 props
StatusLabel상태 뱃지 (승인 대기, 완료 등)tone: 'neutral'|'info'|'success'|'warning'|'critical'|'agent', children으로 라벨 텍스트 오버라이드 가능
AgentSourceLabelAgent 판단 근거 출처 뱃지source: 'rule'|'data'|'draft'|'review'
DetailRow라벨-값 한 줄 표시 (설정/업무 상세 등에서 반복 사용)label, value, tone?: 'default'|'warning'|'critical'|'success'
WorkflowStep처리 단계 표시state: 'pending'|'active'|'done'|'blocked'
DecisionGate승인 게이트 표시state: 'locked'|'ready'|'approved'
EmptyStateloading/empty/error 공통 상태 화면kind: 'loading'|'empty'|'error', title, body, note?(클릭 불가 보조 캡션 — 로딩 상태의 "처리 중 · 중복 실행 차단" 등, PR #209), actionLabel?, onAction? — useApiQuery/useAsyncDemoData와 함께 사용
목록·요약
컴포넌트용도
WorkItemRow업무 목록 행 (대시보드/업무함/업무상세 공용). urgency: 'warning'|'critical'|'neutral'로 왼쪽 rail 색상 결정 — 기한 3단계 색상 유틸(src/utils/urgency.ts)의 getUrgencyTier 결과를 매핑해서 사용
AgentSummaryAgent가 준비한 다음 행동 요약 카드
입력·인터랙션
컴포넌트용도도입 이유
Button공통 버튼 (Primary/Secondary × Default/Disabled)최초 라이브러리
Dropdown커스텀 콤보박스네이티브 \<select\>는 옵션 팝업을 CSS로 스타일링할 수 없어서 화면마다 드롭다운 모양이 제각각이었다 (#58). 트리거 버튼(48px 고정 높이) + 옵션 리스트, 키보드(화살표/Enter/Escape) 지원, aria-activedescendant로 스크린리더에 활성 옵션 전달, 닫힐 때 트리거로 포커스 복원. 현재 업무함/근로자/Agent 패널의 상태·마감·기한·기간 필터가 전부 이걸 사용
Modal공통 모달/다이얼로그#93에서 도움말 패널 만들며 도입. role="dialog" + aria-modal, ESC/바깥 클릭 닫기, Tab 포커스 트랩, 열릴 때 첫 포커스 가능 요소로 자동 포커스, 닫힐 때 트리거 요소로 포커스 복원, body 스크롤 잠금
ToastViewport전역 토스트 알림#94에서 도입. src/store/toastStore.ts(Zustand)의 showToast(message)로 어디서든 호출, AppLayout에 한 번만 마운트됨. role="status" aria-live="polite", 3초 후 자동 소멸. 초안 저장·구성원 초대·승인 권한 토글·승인 요청 등 주요 액션에 연결돼 있음
| SearchInput | 디바운스된 검색 인풋 | value, onChange, placeholder, ariaLabel |
관련 유틸/훅 (컴포넌트는 아니지만 같이 알아두면 좋은 것)
이름위치용도
useApiQuerysrc/hooks/useApiQuery.ts실제 서버 API 연동 화면의 표준 데이터 페칭 훅.fetcher/isEmpty 콜백을 받아 'loading'|'success'|'empty'|'error' 상태를 반환 — useAsyncDemoData와 동일한 상태 모양이라 EmptyState 분기 코드는 그대로 두고 훅만 교체하면 된다. fetcher/isEmpty는 반드시 useCallback으로 안정화해서 넘겨야 무한 재요청을 피할 수 있다. refetch() 제공
useAsyncDemoDatasrc/hooks/useAsyncDemoData.ts아직 서버 API가 없는 화면에서만 사용하는 구식 훅. loading→success/empty 전이를 흉내낸다. ?demoState=loading|empty|error URL 쿼리로 강제 전환 가능. 해당 화면에 API가 생기면 useApiQuery로 교체
useDebouncedValuesrc/hooks/useDebouncedValue.ts검색 인풋 등에 쓰는 범용 디바운스 훅 (기본 200ms). #96
getUrgencyTier / daysUntil / URGENCY_TONE / URGENCY_LABELsrc/utils/urgency.ts기한(D-day)을 긴급(7일 이내)/중간(8~30일)/여유(31일 이상 또는 기한 없음) 3단계로 분류. #87 — 근로자 목록 기한 뱃지, 업무함 rail 색상에 적용. daysUntil은 PR #217에서 타임존 경계 하루 오차 버그를 수정했으니 날짜 문자열은 반드시 로컬 Y/M/D 기준으로 다뤄야 함
@tanstack/react-query가 package.json에 설치·초기화(src/lib/queryClient.ts, main.tsx)는 되어 있지만,
실제 페이지들은 전부 위 useApiQuery 커스텀 훅을 쓰고 있다. React Query를 페이지에서 직접 쓰는 곳은
아직 없음 — 필요해지면 useApiQuery를 React Query 기반으로 재작성하거나 점진적으로 교체할 것.
새 화면 만들 때 체크리스트
  1. 목록형 화면이면 EmptyState + (실 API가 있으면 useApiQuery, 없으면 useAsyncDemoData)로 loading/empty/error부터 처리
  2. 검색 인풋이 있으면 useDebouncedValue로 감싸기
  3. 필터 드롭다운은 네이티브 <select> 대신 Dropdown 사용
  4. 주요 액션(저장/초대/승인 등)에는 useToastStore().showToast(...)로 피드백 연결
  5. 날짜/기한을 보여준다면 getUrgencyTier로 색상 통일 검토
  6. 데모 데이터 필드에는 실제 백엔드 연동 지점을 // TODO(backend): <method> <path> 주석으로 표시 (CONTRIBUTING.md 컨벤션)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Component Library
Jump to bottom

mini edited this page Aug 3, 2026
·
2 revisions
공통 컴포넌트 라이브러리
src/components/ui/ 아래에 있는 재사용 컴포넌트 전체 목록. 새 화면을 만들 때 여기부터 확인할 것 — 대부분의 UI 패턴(뱃지, 필터, 빈 상태, 모달, 알림)이 이미 만들어져 있다.
표시·상태
컴포넌트용도주요 props
StatusLabel상태 뱃지 (승인 대기, 완료 등)tone: 'neutral'|'info'|'success'|'warning'|'critical'|'agent', children으로 라벨 텍스트 오버라이드 가능
AgentSourceLabelAgent 판단 근거 출처 뱃지source: 'rule'|'data'|'draft'|'review'
DetailRow라벨-값 한 줄 표시 (설정/업무 상세 등에서 반복 사용)label, value, tone?: 'default'|'warning'|'critical'|'success'
WorkflowStep처리 단계 표시state: 'pending'|'active'|'done'|'blocked'
DecisionGate승인 게이트 표시state: 'locked'|'ready'|'approved'
EmptyStateloading/empty/error 공통 상태 화면kind: 'loading'|'empty'|'error', title, body, note?(클릭 불가 보조 캡션 — 로딩 상태의 "처리 중 · 중복 실행 차단" 등, PR #209), actionLabel?, onAction? — useApiQuery/useAsyncDemoData와 함께 사용
목록·요약
컴포넌트용도
WorkItemRow업무 목록 행 (대시보드/업무함/업무상세 공용). urgency: 'warning'|'critical'|'neutral'로 왼쪽 rail 색상 결정 — 기한 3단계 색상 유틸(src/utils/urgency.ts)의 getUrgencyTier 결과를 매핑해서 사용
AgentSummaryAgent가 준비한 다음 행동 요약 카드
입력·인터랙션
컴포넌트용도도입 이유
Button공통 버튼 (Primary/Secondary × Default/Disabled)최초 라이브러리
Dropdown커스텀 콤보박스네이티브 \<select\>는 옵션 팝업을 CSS로 스타일링할 수 없어서 화면마다 드롭다운 모양이 제각각이었다 (#58). 트리거 버튼(48px 고정 높이) + 옵션 리스트, 키보드(화살표/Enter/Escape) 지원, aria-activedescendant로 스크린리더에 활성 옵션 전달, 닫힐 때 트리거로 포커스 복원. 현재 업무함/근로자/Agent 패널의 상태·마감·기한·기간 필터가 전부 이걸 사용
Modal공통 모달/다이얼로그#93에서 도움말 패널 만들며 도입. role="dialog" + aria-modal, ESC/바깥 클릭 닫기, Tab 포커스 트랩, 열릴 때 첫 포커스 가능 요소로 자동 포커스, 닫힐 때 트리거 요소로 포커스 복원, body 스크롤 잠금
ToastViewport전역 토스트 알림#94에서 도입. src/store/toastStore.ts(Zustand)의 showToast(message)로 어디서든 호출, AppLayout에 한 번만 마운트됨. role="status" aria-live="polite", 3초 후 자동 소멸. 초안 저장·구성원 초대·승인 권한 토글·승인 요청 등 주요 액션에 연결돼 있음
| SearchInput | 디바운스된 검색 인풋 | value, onChange, placeholder, ariaLabel |
관련 유틸/훅 (컴포넌트는 아니지만 같이 알아두면 좋은 것)
이름위치용도
useApiQuerysrc/hooks/useApiQuery.ts실제 서버 API 연동 화면의 표준 데이터 페칭 훅.fetcher/isEmpty 콜백을 받아 'loading'|'success'|'empty'|'error' 상태를 반환 — useAsyncDemoData와 동일한 상태 모양이라 EmptyState 분기 코드는 그대로 두고 훅만 교체하면 된다. fetcher/isEmpty는 반드시 useCallback으로 안정화해서 넘겨야 무한 재요청을 피할 수 있다. refetch() 제공
useAsyncDemoDatasrc/hooks/useAsyncDemoData.ts아직 서버 API가 없는 화면에서만 사용하는 구식 훅. loading→success/empty 전이를 흉내낸다. ?demoState=loading|empty|error URL 쿼리로 강제 전환 가능. 해당 화면에 API가 생기면 useApiQuery로 교체
useDebouncedValuesrc/hooks/useDebouncedValue.ts검색 인풋 등에 쓰는 범용 디바운스 훅 (기본 200ms). #96
getUrgencyTier / daysUntil / URGENCY_TONE / URGENCY_LABELsrc/utils/urgency.ts기한(D-day)을 긴급(7일 이내)/중간(8~30일)/여유(31일 이상 또는 기한 없음) 3단계로 분류. #87 — 근로자 목록 기한 뱃지, 업무함 rail 색상에 적용. daysUntil은 PR #217에서 타임존 경계 하루 오차 버그를 수정했으니 날짜 문자열은 반드시 로컬 Y/M/D 기준으로 다뤄야 함
@tanstack/react-query가 package.json에 설치·초기화(src/lib/queryClient.ts, main.tsx)는 되어 있지만,
실제 페이지들은 전부 위 useApiQuery 커스텀 훅을 쓰고 있다. React Query를 페이지에서 직접 쓰는 곳은
아직 없음 — 필요해지면 useApiQuery를 React Query 기반으로 재작성하거나 점진적으로 교체할 것.
새 화면 만들 때 체크리스트
  1. 목록형 화면이면 EmptyState + (실 API가 있으면 useApiQuery, 없으면 useAsyncDemoData)로 loading/empty/error부터 처리
  2. 검색 인풋이 있으면 useDebouncedValue로 감싸기
  3. 필터 드롭다운은 네이티브 <select> 대신 Dropdown 사용
  4. 주요 액션(저장/초대/승인 등)에는 useToastStore().showToast(...)로 피드백 연결
  5. 날짜/기한을 보여준다면 getUrgencyTier로 색상 통일 검토
  6. 데모 데이터 필드에는 실제 백엔드 연동 지점을 // TODO(backend): <method> <path> 주석으로 표시 (CONTRIBUTING.md 컨벤션)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Component Library
Jump to bottom

mini edited this page Aug 3, 2026
·
2 revisions
공통 컴포넌트 라이브러리
src/components/ui/ 아래에 있는 재사용 컴포넌트 전체 목록. 새 화면을 만들 때 여기부터 확인할 것 — 대부분의 UI 패턴(뱃지, 필터, 빈 상태, 모달, 알림)이 이미 만들어져 있다.
표시·상태
컴포넌트용도주요 props
StatusLabel상태 뱃지 (승인 대기, 완료 등)tone: 'neutral'|'info'|'success'|'warning'|'critical'|'agent', children으로 라벨 텍스트 오버라이드 가능
AgentSourceLabelAgent 판단 근거 출처 뱃지source: 'rule'|'data'|'draft'|'review'
DetailRow라벨-값 한 줄 표시 (설정/업무 상세 등에서 반복 사용)label, value, tone?: 'default'|'warning'|'critical'|'success'
WorkflowStep처리 단계 표시state: 'pending'|'active'|'done'|'blocked'
DecisionGate승인 게이트 표시state: 'locked'|'ready'|'approved'
EmptyStateloading/empty/error 공통 상태 화면kind: 'loading'|'empty'|'error', title, body, note?(클릭 불가 보조 캡션 — 로딩 상태의 "처리 중 · 중복 실행 차단" 등, PR #209), actionLabel?, onAction? — useApiQuery/useAsyncDemoData와 함께 사용
목록·요약
컴포넌트용도
WorkItemRow업무 목록 행 (대시보드/업무함/업무상세 공용). urgency: 'warning'|'critical'|'neutral'로 왼쪽 rail 색상 결정 — 기한 3단계 색상 유틸(src/utils/urgency.ts)의 getUrgencyTier 결과를 매핑해서 사용
AgentSummaryAgent가 준비한 다음 행동 요약 카드
입력·인터랙션
컴포넌트용도도입 이유
Button공통 버튼 (Primary/Secondary × Default/Disabled)최초 라이브러리
Dropdown커스텀 콤보박스네이티브 \<select\>는 옵션 팝업을 CSS로 스타일링할 수 없어서 화면마다 드롭다운 모양이 제각각이었다 (#58). 트리거 버튼(48px 고정 높이) + 옵션 리스트, 키보드(화살표/Enter/Escape) 지원, aria-activedescendant로 스크린리더에 활성 옵션 전달, 닫힐 때 트리거로 포커스 복원. 현재 업무함/근로자/Agent 패널의 상태·마감·기한·기간 필터가 전부 이걸 사용
Modal공통 모달/다이얼로그#93에서 도움말 패널 만들며 도입. role="dialog" + aria-modal, ESC/바깥 클릭 닫기, Tab 포커스 트랩, 열릴 때 첫 포커스 가능 요소로 자동 포커스, 닫힐 때 트리거 요소로 포커스 복원, body 스크롤 잠금
ToastViewport전역 토스트 알림#94에서 도입. src/store/toastStore.ts(Zustand)의 showToast(message)로 어디서든 호출, AppLayout에 한 번만 마운트됨. role="status" aria-live="polite", 3초 후 자동 소멸. 초안 저장·구성원 초대·승인 권한 토글·승인 요청 등 주요 액션에 연결돼 있음
| SearchInput | 디바운스된 검색 인풋 | value, onChange, placeholder, ariaLabel |
관련 유틸/훅 (컴포넌트는 아니지만 같이 알아두면 좋은 것)
이름위치용도
useApiQuerysrc/hooks/useApiQuery.ts실제 서버 API 연동 화면의 표준 데이터 페칭 훅.fetcher/isEmpty 콜백을 받아 'loading'|'success'|'empty'|'error' 상태를 반환 — useAsyncDemoData와 동일한 상태 모양이라 EmptyState 분기 코드는 그대로 두고 훅만 교체하면 된다. fetcher/isEmpty는 반드시 useCallback으로 안정화해서 넘겨야 무한 재요청을 피할 수 있다. refetch() 제공
useAsyncDemoDatasrc/hooks/useAsyncDemoData.ts아직 서버 API가 없는 화면에서만 사용하는 구식 훅. loading→success/empty 전이를 흉내낸다. ?demoState=loading|empty|error URL 쿼리로 강제 전환 가능. 해당 화면에 API가 생기면 useApiQuery로 교체
useDebouncedValuesrc/hooks/useDebouncedValue.ts검색 인풋 등에 쓰는 범용 디바운스 훅 (기본 200ms). #96
getUrgencyTier / daysUntil / URGENCY_TONE / URGENCY_LABELsrc/utils/urgency.ts기한(D-day)을 긴급(7일 이내)/중간(8~30일)/여유(31일 이상 또는 기한 없음) 3단계로 분류. #87 — 근로자 목록 기한 뱃지, 업무함 rail 색상에 적용. daysUntil은 PR #217에서 타임존 경계 하루 오차 버그를 수정했으니 날짜 문자열은 반드시 로컬 Y/M/D 기준으로 다뤄야 함
@tanstack/react-query가 package.json에 설치·초기화(src/lib/queryClient.ts, main.tsx)는 되어 있지만,
실제 페이지들은 전부 위 useApiQuery 커스텀 훅을 쓰고 있다. React Query를 페이지에서 직접 쓰는 곳은
아직 없음 — 필요해지면 useApiQuery를 React Query 기반으로 재작성하거나 점진적으로 교체할 것.
새 화면 만들 때 체크리스트
  1. 목록형 화면이면 EmptyState + (실 API가 있으면 useApiQuery, 없으면 useAsyncDemoData)로 loading/empty/error부터 처리
  2. 검색 인풋이 있으면 useDebouncedValue로 감싸기
  3. 필터 드롭다운은 네이티브 <select> 대신 Dropdown 사용
  4. 주요 액션(저장/초대/승인 등)에는 useToastStore().showToast(...)로 피드백 연결
  5. 날짜/기한을 보여준다면 getUrgencyTier로 색상 통일 검토
  6. 데모 데이터 필드에는 실제 백엔드 연동 지점을 // TODO(backend): <method> <path> 주석으로 표시 (CONTRIBUTING.md 컨벤션)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Component Library
Jump to bottom

mini edited this page Aug 3, 2026
·
2 revisions
공통 컴포넌트 라이브러리
src/components/ui/ 아래에 있는 재사용 컴포넌트 전체 목록. 새 화면을 만들 때 여기부터 확인할 것 — 대부분의 UI 패턴(뱃지, 필터, 빈 상태, 모달, 알림)이 이미 만들어져 있다.
표시·상태
컴포넌트용도주요 props
StatusLabel상태 뱃지 (승인 대기, 완료 등)tone: 'neutral'|'info'|'success'|'warning'|'critical'|'agent', children으로 라벨 텍스트 오버라이드 가능
AgentSourceLabelAgent 판단 근거 출처 뱃지source: 'rule'|'data'|'draft'|'review'
DetailRow라벨-값 한 줄 표시 (설정/업무 상세 등에서 반복 사용)label, value, tone?: 'default'|'warning'|'critical'|'success'
WorkflowStep처리 단계 표시state: 'pending'|'active'|'done'|'blocked'
DecisionGate승인 게이트 표시state: 'locked'|'ready'|'approved'
EmptyStateloading/empty/error 공통 상태 화면kind: 'loading'|'empty'|'error', title, body, note?(클릭 불가 보조 캡션 — 로딩 상태의 "처리 중 · 중복 실행 차단" 등, PR #209), actionLabel?, onAction? — useApiQuery/useAsyncDemoData와 함께 사용
목록·요약
컴포넌트용도
WorkItemRow업무 목록 행 (대시보드/업무함/업무상세 공용). urgency: 'warning'|'critical'|'neutral'로 왼쪽 rail 색상 결정 — 기한 3단계 색상 유틸(src/utils/urgency.ts)의 getUrgencyTier 결과를 매핑해서 사용
AgentSummaryAgent가 준비한 다음 행동 요약 카드
입력·인터랙션
컴포넌트용도도입 이유
Button공통 버튼 (Primary/Secondary × Default/Disabled)최초 라이브러리
Dropdown커스텀 콤보박스네이티브 \<select\>는 옵션 팝업을 CSS로 스타일링할 수 없어서 화면마다 드롭다운 모양이 제각각이었다 (#58). 트리거 버튼(48px 고정 높이) + 옵션 리스트, 키보드(화살표/Enter/Escape) 지원, aria-activedescendant로 스크린리더에 활성 옵션 전달, 닫힐 때 트리거로 포커스 복원. 현재 업무함/근로자/Agent 패널의 상태·마감·기한·기간 필터가 전부 이걸 사용
Modal공통 모달/다이얼로그#93에서 도움말 패널 만들며 도입. role="dialog" + aria-modal, ESC/바깥 클릭 닫기, Tab 포커스 트랩, 열릴 때 첫 포커스 가능 요소로 자동 포커스, 닫힐 때 트리거 요소로 포커스 복원, body 스크롤 잠금
ToastViewport전역 토스트 알림#94에서 도입. src/store/toastStore.ts(Zustand)의 showToast(message)로 어디서든 호출, AppLayout에 한 번만 마운트됨. role="status" aria-live="polite", 3초 후 자동 소멸. 초안 저장·구성원 초대·승인 권한 토글·승인 요청 등 주요 액션에 연결돼 있음
| SearchInput | 디바운스된 검색 인풋 | value, onChange, placeholder, ariaLabel |
관련 유틸/훅 (컴포넌트는 아니지만 같이 알아두면 좋은 것)
이름위치용도
useApiQuerysrc/hooks/useApiQuery.ts실제 서버 API 연동 화면의 표준 데이터 페칭 훅.fetcher/isEmpty 콜백을 받아 'loading'|'success'|'empty'|'error' 상태를 반환 — useAsyncDemoData와 동일한 상태 모양이라 EmptyState 분기 코드는 그대로 두고 훅만 교체하면 된다. fetcher/isEmpty는 반드시 useCallback으로 안정화해서 넘겨야 무한 재요청을 피할 수 있다. refetch() 제공
useAsyncDemoDatasrc/hooks/useAsyncDemoData.ts아직 서버 API가 없는 화면에서만 사용하는 구식 훅. loading→success/empty 전이를 흉내낸다. ?demoState=loading|empty|error URL 쿼리로 강제 전환 가능. 해당 화면에 API가 생기면 useApiQuery로 교체
useDebouncedValuesrc/hooks/useDebouncedValue.ts검색 인풋 등에 쓰는 범용 디바운스 훅 (기본 200ms). #96
getUrgencyTier / daysUntil / URGENCY_TONE / URGENCY_LABELsrc/utils/urgency.ts기한(D-day)을 긴급(7일 이내)/중간(8~30일)/여유(31일 이상 또는 기한 없음) 3단계로 분류. #87 — 근로자 목록 기한 뱃지, 업무함 rail 색상에 적용. daysUntil은 PR #217에서 타임존 경계 하루 오차 버그를 수정했으니 날짜 문자열은 반드시 로컬 Y/M/D 기준으로 다뤄야 함
@tanstack/react-query가 package.json에 설치·초기화(src/lib/queryClient.ts, main.tsx)는 되어 있지만,
실제 페이지들은 전부 위 useApiQuery 커스텀 훅을 쓰고 있다. React Query를 페이지에서 직접 쓰는 곳은
아직 없음 — 필요해지면 useApiQuery를 React Query 기반으로 재작성하거나 점진적으로 교체할 것.
새 화면 만들 때 체크리스트
  1. 목록형 화면이면 EmptyState + (실 API가 있으면 useApiQuery, 없으면 useAsyncDemoData)로 loading/empty/error부터 처리
  2. 검색 인풋이 있으면 useDebouncedValue로 감싸기
  3. 필터 드롭다운은 네이티브 <select> 대신 Dropdown 사용
  4. 주요 액션(저장/초대/승인 등)에는 useToastStore().showToast(...)로 피드백 연결
  5. 날짜/기한을 보여준다면 getUrgencyTier로 색상 통일 검토
  6. 데모 데이터 필드에는 실제 백엔드 연동 지점을 // TODO(backend): <method> <path> 주석으로 표시 (CONTRIBUTING.md 컨벤션)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Component Library
Jump to bottom

mini edited this page Aug 3, 2026
·
2 revisions
공통 컴포넌트 라이브러리
src/components/ui/ 아래에 있는 재사용 컴포넌트 전체 목록. 새 화면을 만들 때 여기부터 확인할 것 — 대부분의 UI 패턴(뱃지, 필터, 빈 상태, 모달, 알림)이 이미 만들어져 있다.
표시·상태
컴포넌트용도주요 props
StatusLabel상태 뱃지 (승인 대기, 완료 등)tone: 'neutral'|'info'|'success'|'warning'|'critical'|'agent', children으로 라벨 텍스트 오버라이드 가능
AgentSourceLabelAgent 판단 근거 출처 뱃지source: 'rule'|'data'|'draft'|'review'
DetailRow라벨-값 한 줄 표시 (설정/업무 상세 등에서 반복 사용)label, value, tone?: 'default'|'warning'|'critical'|'success'
WorkflowStep처리 단계 표시state: 'pending'|'active'|'done'|'blocked'
DecisionGate승인 게이트 표시state: 'locked'|'ready'|'approved'
EmptyStateloading/empty/error 공통 상태 화면kind: 'loading'|'empty'|'error', title, body, note?(클릭 불가 보조 캡션 — 로딩 상태의 "처리 중 · 중복 실행 차단" 등, PR #209), actionLabel?, onAction? — useApiQuery/useAsyncDemoData와 함께 사용
목록·요약
컴포넌트용도
WorkItemRow업무 목록 행 (대시보드/업무함/업무상세 공용). urgency: 'warning'|'critical'|'neutral'로 왼쪽 rail 색상 결정 — 기한 3단계 색상 유틸(src/utils/urgency.ts)의 getUrgencyTier 결과를 매핑해서 사용
AgentSummaryAgent가 준비한 다음 행동 요약 카드
입력·인터랙션
컴포넌트용도도입 이유
Button공통 버튼 (Primary/Secondary × Default/Disabled)최초 라이브러리
Dropdown커스텀 콤보박스네이티브 \<select\>는 옵션 팝업을 CSS로 스타일링할 수 없어서 화면마다 드롭다운 모양이 제각각이었다 (#58). 트리거 버튼(48px 고정 높이) + 옵션 리스트, 키보드(화살표/Enter/Escape) 지원, aria-activedescendant로 스크린리더에 활성 옵션 전달, 닫힐 때 트리거로 포커스 복원. 현재 업무함/근로자/Agent 패널의 상태·마감·기한·기간 필터가 전부 이걸 사용
Modal공통 모달/다이얼로그#93에서 도움말 패널 만들며 도입. role="dialog" + aria-modal, ESC/바깥 클릭 닫기, Tab 포커스 트랩, 열릴 때 첫 포커스 가능 요소로 자동 포커스, 닫힐 때 트리거 요소로 포커스 복원, body 스크롤 잠금
ToastViewport전역 토스트 알림#94에서 도입. src/store/toastStore.ts(Zustand)의 showToast(message)로 어디서든 호출, AppLayout에 한 번만 마운트됨. role="status" aria-live="polite", 3초 후 자동 소멸. 초안 저장·구성원 초대·승인 권한 토글·승인 요청 등 주요 액션에 연결돼 있음
| SearchInput | 디바운스된 검색 인풋 | value, onChange, placeholder, ariaLabel |
관련 유틸/훅 (컴포넌트는 아니지만 같이 알아두면 좋은 것)
이름위치용도
useApiQuerysrc/hooks/useApiQuery.ts실제 서버 API 연동 화면의 표준 데이터 페칭 훅.fetcher/isEmpty 콜백을 받아 'loading'|'success'|'empty'|'error' 상태를 반환 — useAsyncDemoData와 동일한 상태 모양이라 EmptyState 분기 코드는 그대로 두고 훅만 교체하면 된다. fetcher/isEmpty는 반드시 useCallback으로 안정화해서 넘겨야 무한 재요청을 피할 수 있다. refetch() 제공
useAsyncDemoDatasrc/hooks/useAsyncDemoData.ts아직 서버 API가 없는 화면에서만 사용하는 구식 훅. loading→success/empty 전이를 흉내낸다. ?demoState=loading|empty|error URL 쿼리로 강제 전환 가능. 해당 화면에 API가 생기면 useApiQuery로 교체
useDebouncedValuesrc/hooks/useDebouncedValue.ts검색 인풋 등에 쓰는 범용 디바운스 훅 (기본 200ms). #96
getUrgencyTier / daysUntil / URGENCY_TONE / URGENCY_LABELsrc/utils/urgency.ts기한(D-day)을 긴급(7일 이내)/중간(8~30일)/여유(31일 이상 또는 기한 없음) 3단계로 분류. #87 — 근로자 목록 기한 뱃지, 업무함 rail 색상에 적용. daysUntil은 PR #217에서 타임존 경계 하루 오차 버그를 수정했으니 날짜 문자열은 반드시 로컬 Y/M/D 기준으로 다뤄야 함
@tanstack/react-query가 package.json에 설치·초기화(src/lib/queryClient.ts, main.tsx)는 되어 있지만,
실제 페이지들은 전부 위 useApiQuery 커스텀 훅을 쓰고 있다. React Query를 페이지에서 직접 쓰는 곳은
아직 없음 — 필요해지면 useApiQuery를 React Query 기반으로 재작성하거나 점진적으로 교체할 것.
새 화면 만들 때 체크리스트
  1. 목록형 화면이면 EmptyState + (실 API가 있으면 useApiQuery, 없으면 useAsyncDemoData)로 loading/empty/error부터 처리
  2. 검색 인풋이 있으면 useDebouncedValue로 감싸기
  3. 필터 드롭다운은 네이티브 <select> 대신 Dropdown 사용
  4. 주요 액션(저장/초대/승인 등)에는 useToastStore().showToast(...)로 피드백 연결
  5. 날짜/기한을 보여준다면 getUrgencyTier로 색상 통일 검토
  6. 데모 데이터 필드에는 실제 백엔드 연동 지점을 // TODO(backend): <method> <path> 주석으로 표시 (CONTRIBUTING.md 컨벤션)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Component Library
Jump to bottom

mini edited this page Aug 3, 2026
·
2 revisions
공통 컴포넌트 라이브러리
src/components/ui/ 아래에 있는 재사용 컴포넌트 전체 목록. 새 화면을 만들 때 여기부터 확인할 것 — 대부분의 UI 패턴(뱃지, 필터, 빈 상태, 모달, 알림)이 이미 만들어져 있다.
표시·상태
컴포넌트용도주요 props
StatusLabel상태 뱃지 (승인 대기, 완료 등)tone: 'neutral'|'info'|'success'|'warning'|'critical'|'agent', children으로 라벨 텍스트 오버라이드 가능
AgentSourceLabelAgent 판단 근거 출처 뱃지source: 'rule'|'data'|'draft'|'review'
DetailRow라벨-값 한 줄 표시 (설정/업무 상세 등에서 반복 사용)label, value, tone?: 'default'|'warning'|'critical'|'success'
WorkflowStep처리 단계 표시state: 'pending'|'active'|'done'|'blocked'
DecisionGate승인 게이트 표시state: 'locked'|'ready'|'approved'
EmptyStateloading/empty/error 공통 상태 화면kind: 'loading'|'empty'|'error', title, body, note?(클릭 불가 보조 캡션 — 로딩 상태의 "처리 중 · 중복 실행 차단" 등, PR #209), actionLabel?, onAction? — useApiQuery/useAsyncDemoData와 함께 사용
목록·요약
컴포넌트용도
WorkItemRow업무 목록 행 (대시보드/업무함/업무상세 공용). urgency: 'warning'|'critical'|'neutral'로 왼쪽 rail 색상 결정 — 기한 3단계 색상 유틸(src/utils/urgency.ts)의 getUrgencyTier 결과를 매핑해서 사용
AgentSummaryAgent가 준비한 다음 행동 요약 카드
입력·인터랙션
컴포넌트용도도입 이유
Button공통 버튼 (Primary/Secondary × Default/Disabled)최초 라이브러리
Dropdown커스텀 콤보박스네이티브 \<select\>는 옵션 팝업을 CSS로 스타일링할 수 없어서 화면마다 드롭다운 모양이 제각각이었다 (#58). 트리거 버튼(48px 고정 높이) + 옵션 리스트, 키보드(화살표/Enter/Escape) 지원, aria-activedescendant로 스크린리더에 활성 옵션 전달, 닫힐 때 트리거로 포커스 복원. 현재 업무함/근로자/Agent 패널의 상태·마감·기한·기간 필터가 전부 이걸 사용
Modal공통 모달/다이얼로그#93에서 도움말 패널 만들며 도입. role="dialog" + aria-modal, ESC/바깥 클릭 닫기, Tab 포커스 트랩, 열릴 때 첫 포커스 가능 요소로 자동 포커스, 닫힐 때 트리거 요소로 포커스 복원, body 스크롤 잠금
ToastViewport전역 토스트 알림#94에서 도입. src/store/toastStore.ts(Zustand)의 showToast(message)로 어디서든 호출, AppLayout에 한 번만 마운트됨. role="status" aria-live="polite", 3초 후 자동 소멸. 초안 저장·구성원 초대·승인 권한 토글·승인 요청 등 주요 액션에 연결돼 있음
| SearchInput | 디바운스된 검색 인풋 | value, onChange, placeholder, ariaLabel |
관련 유틸/훅 (컴포넌트는 아니지만 같이 알아두면 좋은 것)
이름위치용도
useApiQuerysrc/hooks/useApiQuery.ts실제 서버 API 연동 화면의 표준 데이터 페칭 훅.fetcher/isEmpty 콜백을 받아 'loading'|'success'|'empty'|'error' 상태를 반환 — useAsyncDemoData와 동일한 상태 모양이라 EmptyState 분기 코드는 그대로 두고 훅만 교체하면 된다. fetcher/isEmpty는 반드시 useCallback으로 안정화해서 넘겨야 무한 재요청을 피할 수 있다. refetch() 제공
useAsyncDemoDatasrc/hooks/useAsyncDemoData.ts아직 서버 API가 없는 화면에서만 사용하는 구식 훅. loading→success/empty 전이를 흉내낸다. ?demoState=loading|empty|error URL 쿼리로 강제 전환 가능. 해당 화면에 API가 생기면 useApiQuery로 교체
useDebouncedValuesrc/hooks/useDebouncedValue.ts검색 인풋 등에 쓰는 범용 디바운스 훅 (기본 200ms). #96
getUrgencyTier / daysUntil / URGENCY_TONE / URGENCY_LABELsrc/utils/urgency.ts기한(D-day)을 긴급(7일 이내)/중간(8~30일)/여유(31일 이상 또는 기한 없음) 3단계로 분류. #87 — 근로자 목록 기한 뱃지, 업무함 rail 색상에 적용. daysUntil은 PR #217에서 타임존 경계 하루 오차 버그를 수정했으니 날짜 문자열은 반드시 로컬 Y/M/D 기준으로 다뤄야 함
@tanstack/react-query가 package.json에 설치·초기화(src/lib/queryClient.ts, main.tsx)는 되어 있지만,
실제 페이지들은 전부 위 useApiQuery 커스텀 훅을 쓰고 있다. React Query를 페이지에서 직접 쓰는 곳은
아직 없음 — 필요해지면 useApiQuery를 React Query 기반으로 재작성하거나 점진적으로 교체할 것.
새 화면 만들 때 체크리스트
  1. 목록형 화면이면 EmptyState + (실 API가 있으면 useApiQuery, 없으면 useAsyncDemoData)로 loading/empty/error부터 처리
  2. 검색 인풋이 있으면 useDebouncedValue로 감싸기
  3. 필터 드롭다운은 네이티브 <select> 대신 Dropdown 사용
  4. 주요 액션(저장/초대/승인 등)에는 useToastStore().showToast(...)로 피드백 연결
  5. 날짜/기한을 보여준다면 getUrgencyTier로 색상 통일 검토
  6. 데모 데이터 필드에는 실제 백엔드 연동 지점을 // TODO(backend): <method> <path> 주석으로 표시 (CONTRIBUTING.md 컨벤션)
Clone this wiki locally