-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
162 lines (152 loc) · 8.39 KB
/
Copy pathindex.html
File metadata and controls
162 lines (152 loc) · 8.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-src 'none'; upgrade-insecure-requests; require-trusted-types-for 'script';">
<meta name="referrer" content="strict-origin-when-cross-origin">
<title>KRDS Component Library · 맥락지혜 연구실</title>
<meta name="description" content="맥락지혜 연구실 KRDS 컴포넌트 라이브러리 — 브랜드 토큰 기반 바닐라 구현" />
<link rel="stylesheet" href="../styles.css" />
<link rel="stylesheet" href="krds-components.css" />
<link rel="stylesheet" href="krds-gallery.css" />
<script src="krds-gallery.js" defer></script>
</head>
<body class="krds-scope">
<main class="gallery">
<h1>KRDS Component Library</h1>
<p class="lead">맥락지혜 연구실 · 브랜드 토큰(<code>:root</code>) 기반 바닐라 구현 · Figma <code>6Kx2gzcduyIyLGN3Ck2rtm</code> 대응</p>
<section class="story" id="s-button">
<h2>Button</h2>
<p class="src">.krds-btn · Figma Action/Button 36:67</p>
<div class="row">
<button type="button" class="krds-btn krds-btn--primary">Primary</button>
<button type="button" class="krds-btn krds-btn--secondary">Secondary</button>
<button type="button" class="krds-btn krds-btn--tertiary">Tertiary</button>
<button type="button" class="krds-btn krds-btn--danger">Danger</button>
<button type="button" class="krds-btn krds-btn--primary" disabled>Disabled</button>
<button type="button" class="krds-btn krds-btn--primary krds-btn--loading">Loading</button>
</div>
<div class="row mt-16">
<button type="button" class="krds-btn krds-btn--primary krds-btn--sm">Small</button>
<button type="button" class="krds-btn krds-btn--primary">Medium</button>
<button type="button" class="krds-btn krds-btn--primary krds-btn--lg">Large</button>
</div>
</section>
<section class="story" id="s-input">
<h2>Text Input</h2>
<p class="src">.krds-field · Figma Input/Text Input 62:22</p>
<div class="stack">
<label class="krds-field">
<span class="krds-field__label">이름<span class="krds-req" aria-hidden="true">*</span></span>
<input class="krds-field__control" type="text" placeholder="이름을 입력하세요" maxlength="64" required />
<span class="krds-field__help">공백 없이 입력합니다.</span>
</label>
<div class="krds-field krds-field--error">
<label class="krds-field__label" for="email-err">이메일</label>
<input class="krds-field__control" id="email-err" type="email" value="not-an-email" maxlength="64" aria-invalid="true" aria-describedby="email-err-msg" />
<span class="krds-field__error" id="email-err-msg">올바른 이메일 형식이 아닙니다.</span>
</div>
<label class="krds-field">
<span class="krds-field__label">비활성</span>
<input class="krds-field__control" type="text" value="수정 불가" maxlength="64" disabled />
</label>
</div>
</section>
<section class="story" id="s-choice">
<h2>Checkbox / Radio</h2>
<p class="src">.krds-choice · Figma Selection 38:16 / 38:27</p>
<div class="row col">
<label class="krds-choice"><input type="checkbox" checked /> 동의합니다</label>
<label class="krds-choice"><input type="checkbox" /> 선택 안 함</label>
<label class="krds-choice"><input type="checkbox" disabled /> 비활성</label>
<label class="krds-choice"><input type="radio" name="r" checked /> 옵션 A</label>
<label class="krds-choice"><input type="radio" name="r" /> 옵션 B</label>
</div>
</section>
<section class="story" id="s-select">
<h2>Select</h2>
<p class="src">.krds-select · Figma Selection/Select 56:29</p>
<label class="krds-field max-w-320">
<span class="krds-field__label">정렬</span>
<select class="krds-select">
<option>최신순</option>
<option>이름순</option>
<option>관련도순</option>
</select>
</label>
</section>
<section class="story" id="s-badge-tag">
<h2>Badge & Tag</h2>
<p class="src">.krds-badge / .krds-tag · Figma 58:48 / 58:54</p>
<div class="row">
<span class="krds-badge">Default</span>
<span class="krds-badge krds-badge--info">Info</span>
<span class="krds-badge krds-badge--success">Success</span>
<span class="krds-badge krds-badge--warning">Warning</span>
<span class="krds-badge krds-badge--danger">Danger</span>
</div>
<div class="row mt-16">
<span class="krds-tag">필터 A <button type="button" class="krds-tag__remove" aria-label="필터 A 제거">×</button></span>
<span class="krds-tag">필터 B <button type="button" class="krds-tag__remove" aria-label="필터 B 제거">×</button></span>
</div>
</section>
<section class="story" id="s-tabs">
<h2>Tabs</h2>
<p class="src">.krds-tabs · Figma Layout/Tabs 59:11</p>
<div class="krds-tabs">
<div class="krds-tabs__list" role="tablist">
<button type="button" class="krds-tab" role="tab" aria-selected="true" aria-controls="tp1" id="t1">개요</button>
<button type="button" class="krds-tab" role="tab" aria-selected="false" aria-controls="tp2" id="t2">근거</button>
<button type="button" class="krds-tab" role="tab" aria-selected="false" aria-controls="tp3" id="t3">참고</button>
</div>
<div class="krds-tabpanel" role="tabpanel" id="tp1" aria-labelledby="t1">개요 패널 내용입니다.</div>
<div class="krds-tabpanel" role="tabpanel" id="tp2" aria-labelledby="t2" hidden>근거 패널 내용입니다.</div>
<div class="krds-tabpanel" role="tabpanel" id="tp3" aria-labelledby="t3" hidden>참고 패널 내용입니다.</div>
</div>
</section>
<section class="story" id="s-accordion">
<h2>Accordion</h2>
<p class="src">.krds-accordion (native details) · Figma Layout/Accordion 59:21</p>
<details class="krds-accordion" open>
<summary>DIKW란 무엇인가</summary>
<div class="krds-accordion__body">자료·정보·지식·지혜를 점검하는 질문 체계입니다.</div>
</details>
<details class="krds-accordion mt-8">
<summary>왜 위계가 아닌가</summary>
<div class="krds-accordion__body">맥락에 따라 순환·재구성되기 때문입니다.</div>
</details>
</section>
<section class="story" id="s-pagination">
<h2>Pagination</h2>
<p class="src">.krds-pagination · Figma Navigation/Pagination 58:25</p>
<nav aria-label="페이지 이동">
<ul class="krds-pagination">
<li><span aria-disabled="true">이전</span></li>
<li><a href="#" aria-current="page">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><span>…</span></li>
<li><a href="#">9</a></li>
<li><a href="#">다음</a></li>
</ul>
</nav>
</section>
<section class="story" id="s-alert">
<h2>Alert</h2>
<p class="src">.krds-alert · Figma Layout/Critical Alert</p>
<div class="stack max-w-640">
<div class="krds-alert krds-alert--info"><span><strong class="krds-alert__title">안내</strong> 정보 메시지입니다.</span></div>
<div class="krds-alert krds-alert--success"><span><strong class="krds-alert__title">완료</strong> 성공적으로 처리되었습니다.</span></div>
<div class="krds-alert krds-alert--warning"><span><strong class="krds-alert__title">주의</strong> 확인이 필요합니다.</span></div>
<div class="krds-alert krds-alert--danger"><span><strong class="krds-alert__title">오류</strong> 처리에 실패했습니다.</span></div>
</div>
</section>
<section class="story" id="s-toast">
<h2>Toast</h2>
<p class="src">.krds-toast · Figma Feedback/Toast 56:46</p>
<div class="krds-toast">저장되었습니다. <button type="button" class="krds-toast__action">실행 취소</button></div>
</section>
</main>
</body>
</html>