Skip to content

Commit 4e191c4

Browse files
yongsk0066claude
yongsk0066
and
claude
committed
feat: Enhance sample data with practical QR code use cases
- Add extensive real-world QR code examples (Wi-Fi, contacts, calendar, etc.) - Include social media integrations (Instagram, Facebook, WhatsApp, Spotify) - Add app store links, email templates, and location sharing examples - Implement dynamic Christmas calendar event with smart date calculation - Increase textarea height for better UX with longer sample data - Update personal information to actual accounts (email, GitHub, Instagram) - Resolve all spelling warnings with appropriate cSpell directives - Support both current year and next year Christmas events automatically The sample data now showcases 17 different QR code formats that demonstrate real smartphone recognition patterns and practical applications. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent d0af749 commit 4e191c4

1 file changed

Lines changed: 132 additions & 2 deletions

File tree

‎src/components/encode/SettingsColumn.tsx‎

Lines changed: 132 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function SettingsColumn({
4040
value={inputData}
4141
onChange={(e) => setInputData(e.target.value)}
4242
placeholder="QR 코드로 만들 데이터를 입력하세요..."
43-
className="w-full min-h-[60px] p-2 border border-gray-200 text-sm resize-none focus:outline-none focus:border-black"
43+
className="w-full min-h-[150px] p-2 border border-gray-200 text-sm resize-none focus:outline-none focus:border-black"
4444
autoFocus
4545
/>
4646
</div>
@@ -108,6 +108,7 @@ export function SettingsColumn({
108108
<div>
109109
<h3 className="text-xs font-medium text-gray-700 mb-2">샘플 데이터</h3>
110110
<div className="space-y-1">
111+
{/* 기본 인코딩 모드 */}
111112
<button
112113
onClick={() => setInputData('123456789')}
113114
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
@@ -124,7 +125,7 @@ export function SettingsColumn({
124125
onClick={() => setInputData('https://example.com')}
125126
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
126127
>
127-
<span className="font-medium">바이트:</span> https://example.com
128+
<span className="font-medium">URL:</span> https://example.com
128129
</button>
129130
<button
130131
onClick={() => setInputData('안녕하세요 QR코드')}
@@ -138,6 +139,135 @@ export function SettingsColumn({
138139
>
139140
<span className="font-medium">혼합:</span> Mixed123한글
140141
</button>
142+
143+
{/* 실용적인 케이스들 */}
144+
<div className="border-t border-gray-200 pt-2 mt-2">
145+
<div className="text-[10px] text-gray-500 mb-1">실용 사례</div>
146+
147+
<button
148+
onClick={() => setInputData('WIFI:T:WPA;S:MyWiFi;P:password123;H:false;;')}
149+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
150+
>
151+
<span className="font-medium">Wi-Fi:</span> 네트워크 연결
152+
</button>
153+
154+
<button
155+
onClick={() =>
156+
setInputData(
157+
'BEGIN:VCARD\nVERSION:3.0\nFN:홍길동\nORG:회사명\nTEL:010-1234-5678\nEMAIL:hong@example.com\nEND:VCARD' // cspell:disable-line
158+
)
159+
}
160+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
161+
>
162+
<span className="font-medium">연락처:</span> vCard 형식
163+
</button>
164+
165+
<button
166+
onClick={() =>
167+
setInputData(
168+
'mailto:yongsk0066@gmail.com?subject=QR코드 문의&body=안녕하세요! QR 시각화 프로젝트에 대해 문의드립니다.'
169+
)
170+
}
171+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
172+
>
173+
<span className="font-medium">이메일:</span> 메일 작성
174+
</button>
175+
176+
<button
177+
onClick={() => setInputData('tel:+82-10-1234-5678')}
178+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
179+
>
180+
<span className="font-medium">전화:</span> 통화 연결
181+
</button>
182+
183+
<button
184+
onClick={() =>
185+
setInputData('sms:+82-10-1234-5678:안녕하세요! QR코드로 메시지를 보냅니다.')
186+
}
187+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
188+
>
189+
<span className="font-medium">SMS:</span> 문자 메시지
190+
</button>
191+
192+
<button
193+
onClick={() => setInputData('geo:37.5665,126.9780?q=서울특별시청')}
194+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
195+
>
196+
<span className="font-medium">위치:</span> 지도 좌표
197+
</button>
198+
199+
<button
200+
onClick={() => setInputData('https://github.com/yongsk0066/qr-visualizer')}
201+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
202+
>
203+
<span className="font-medium">GitHub:</span> 프로젝트 링크
204+
</button>
205+
206+
<button
207+
onClick={() => {
208+
const now = new Date();
209+
const currentYear = now.getFullYear();
210+
const christmas = new Date(currentYear, 11, 25); // 12월 25일
211+
212+
// 크리스마스가 지났으면 내년 크리스마스
213+
const targetChristmas =
214+
now > christmas ? new Date(currentYear + 1, 11, 25) : christmas;
215+
216+
const year = targetChristmas.getFullYear();
217+
const startTime = `${year}1225T180000`; // 6:00 PM
218+
const endTime = `${year}1225T210000`; // 9:00 PM
219+
220+
setInputData(
221+
`BEGIN:VEVENT\nSUMMARY:Christmas Party at Rockefeller Center\nDTSTART:${startTime}\nDTEND:${endTime}\nLOCATION:Rockefeller Center, New York\nDESCRIPTION:Join us for a magical Christmas celebration at the iconic Rockefeller Center Christmas Tree\nEND:VEVENT` // cspell:disable-line
222+
);
223+
}} // cspell:disable-line
224+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
225+
>
226+
<span className="font-medium">캘린더:</span> Christmas Party
227+
</button>
228+
229+
<button
230+
onClick={() => setInputData('https://www.youtube.com/watch?v=dQw4w9WgXcQ')}
231+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
232+
>
233+
<span className="font-medium">YouTube:</span> 동영상 링크
234+
</button>
235+
236+
<button
237+
onClick={() => setInputData('market://details?id=com.android.chrome')}
238+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
239+
>
240+
<span className="font-medium">앱스토어:</span> 앱 다운로드
241+
</button>
242+
243+
<button
244+
onClick={() => setInputData('fb://profile/100000000000000')}
245+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
246+
>
247+
<span className="font-medium">Facebook:</span> 프로필 연결
248+
</button>
249+
250+
<button
251+
onClick={() => setInputData('instagram://user?username=yongsk0066')} // cspell:disable-line
252+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
253+
>
254+
<span className="font-medium">Instagram:</span> 프로필 방문
255+
</button>
256+
257+
<button
258+
onClick={() => setInputData('spotify:track:2zPANzQTt5Nbkg0eBPb7HI')}
259+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
260+
>
261+
<span className="font-medium">Spotify:</span> 음악 재생
262+
</button>
263+
264+
<button
265+
onClick={() => setInputData('https://maps.google.com/maps?q=37.5665,126.9780')}
266+
className="w-full text-left text-xs p-1 text-blue-600 hover:text-blue-800 hover:underline focus:outline-none"
267+
>
268+
<span className="font-medium">Google Maps:</span> 위치 공유
269+
</button>
270+
</div>
141271
</div>
142272
</div>
143273
</div>

0 commit comments

Comments
 (0)