Skip to content

Commit 7d446df

Browse files
echonet-aisechonet-ais
committed
fix: improve fallback logic and demo i18n/UX
1 parent 3c76ccb commit 7d446df

File tree

19 files changed

+1986
-254
lines changed

19 files changed

+1986
-254
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,4 @@ Add any other context about the problem here, including:
4747

4848
- [ ] I have searched existing issues to avoid duplicates
4949
- [ ] I have provided a minimal reproduction example
50-
- [ ] I have included all relevant environment information
50+
- [ ] I have included all relevant environment information

‎README.en.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ return <h1>{title}</h1>;
7979
## Documentation & Examples
8080

8181
- **[API Reference](./docs/API_REFERENCE.md)** - Complete API documentation
82-
- **[Live Demo](./examples/nextjs-basic/)** - Next.js integration example
82+
- **[Live Demo](../examples/nextjs-basic/)** - Next.js integration example
8383
- **[Changelog](./CHANGELOG.md)** - Version history
8484

8585
## Key Differentiators

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ return <h1>{title}</h1>;
7979
## 문서 & 예제
8080

8181
- **[API Reference](./docs/API_REFERENCE.md)** - 완전한 API 문서 (한국어/영어)
82-
- **[Live Demo](./examples/nextjs-basic/)** - Next.js 통합 예제
82+
- **[Live Demo](../examples/nextjs-basic/)** - Next.js 통합 예제
8383
- **[Changelog](./CHANGELOG.md)** - 버전 변경사항
8484

8585
## 주요 차별점

‎CHANGELOG.md‎ renamed to ‎docs/CHANGELOG.md‎

File renamed without changes.

‎examples/nextjs-basic/app/favicon.ico‎

-10.3 KB
Binary file not shown.

‎examples/nextjs-basic/app/globals.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,73 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
/* Custom animations */
6+
@keyframes fadeIn {
7+
from {
8+
opacity: 0;
9+
transform: translateY(20px);
10+
}
11+
to {
12+
opacity: 1;
13+
transform: translateY(0);
14+
}
15+
}
16+
17+
@keyframes slideIn {
18+
from {
19+
opacity: 0;
20+
transform: translateX(-20px);
21+
}
22+
to {
23+
opacity: 1;
24+
transform: translateX(0);
25+
}
26+
}
27+
28+
@keyframes pulse {
29+
0%, 100% {
30+
opacity: 1;
31+
}
32+
50% {
33+
opacity: 0.7;
34+
}
35+
}
36+
37+
/* Animation classes */
38+
.animate-fade-in {
39+
animation: fadeIn 0.6s ease-out;
40+
}
41+
42+
.animate-slide-in {
43+
animation: slideIn 0.5s ease-out;
44+
}
45+
46+
.animate-pulse-slow {
47+
animation: pulse 2s ease-in-out infinite;
48+
}
49+
50+
/* Smooth transitions for language changes */
51+
.language-transition {
52+
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
53+
}
54+
55+
/* Glass morphism effect */
56+
.glass {
57+
background: rgba(255, 255, 255, 0.25);
58+
backdrop-filter: blur(10px);
59+
border: 1px solid rgba(255, 255, 255, 0.18);
60+
}
61+
62+
/* Hover effects */
63+
.hover-lift {
64+
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
65+
}
66+
67+
.hover-lift:hover {
68+
transform: translateY(-2px);
69+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
70+
}
71+
572
:root {
673
--foreground-rgb: 0, 0, 0;
774
--background-start-rgb: 214, 219, 220;

‎examples/nextjs-basic/app/layout.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import type { Metadata } from "next";
2-
import { Inter } from "next/font/google";
32
import "./globals.css";
4-
5-
const inter = Inter({ subsets: ["latin"] });
3+
import I18nWrapper from "@/components/I18nWrapper";
64

75
export const metadata: Metadata = {
86
title: "hua-i18n-sdk Demo",
@@ -16,8 +14,10 @@ export default function RootLayout({
1614
}) {
1715
return (
1816
<html lang="ko" suppressHydrationWarning>
19-
<body className={inter.className}>
20-
{children}
17+
<body suppressHydrationWarning>
18+
<I18nWrapper>
19+
{children}
20+
</I18nWrapper>
2121
</body>
2222
</html>
2323
);

‎examples/nextjs-basic/app/page.tsx‎

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,55 @@
1-
import { ssrTranslate } from 'hua-i18n-sdk';
2-
import { translations } from '@/lib/i18n-config';
1+
'use client';
2+
3+
import { useTranslation } from 'hua-i18n-sdk';
34
import LanguageSwitcher from '@/components/LanguageSwitcher';
45
import TranslationDemo from '@/components/TranslationDemo';
56

6-
// SSR에서 번역 사용 예제
7+
// 클라이언트에서 번역 사용 예제
8+
//
9+
// SSR 사용 예제 (참고용):
10+
// ```
11+
// import { ssrTranslate } from 'hua-i18n-sdk';
12+
//
13+
// export default function ServerComponent() {
14+
// const title = ssrTranslate({
15+
// translations: translations.ko.demo(),
16+
// key: 'demo.title',
17+
// language: 'ko',
18+
// });
19+
// return <h1>{title}</h1>;
20+
// }
21+
// ```
722
export default function HomePage() {
8-
const title = ssrTranslate({
9-
translations: translations.ko.demo(),
10-
key: 'demo.title',
11-
language: 'ko',
12-
});
23+
const { t } = useTranslation();
1324

14-
const description = ssrTranslate({
15-
translations: translations.ko.demo(),
16-
key: 'demo.description',
17-
language: 'ko',
18-
});
25+
const title = t('demo.title');
26+
const description = t('demo.description');
1927

2028
return (
21-
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
29+
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
2230
<div className="container mx-auto px-4 py-8">
2331
{/* 헤더 */}
24-
<header className="text-center mb-12">
25-
<h1 className="text-4xl font-bold text-gray-800 mb-4">
32+
<header className="text-center mb-12 animate-fade-in">
33+
<h1 className="text-4xl font-bold text-gray-800 mb-4 language-transition">
2634
{title}
2735
</h1>
28-
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
36+
<p className="text-lg text-gray-600 max-w-2xl mx-auto language-transition">
2937
{description}
3038
</p>
3139
</header>
3240

3341
{/* 언어 전환기 */}
34-
<div className="flex justify-center mb-8">
42+
<div className="flex justify-center mb-8 animate-slide-in">
3543
<LanguageSwitcher />
3644
</div>
3745

3846
{/* 메인 콘텐츠 */}
39-
<main className="max-w-4xl mx-auto">
47+
<main className="max-w-4xl mx-auto animate-fade-in">
4048
<TranslationDemo />
4149
</main>
4250

4351
{/* 푸터 */}
44-
<footer className="text-center mt-16 text-gray-500">
52+
<footer className="text-center mt-16 text-gray-500 animate-fade-in">
4553
<p>hua-i18n-sdk Demo - Next.js Integration Example</p>
4654
</footer>
4755
</div>

‎examples/nextjs-basic/components/I18nWrapper.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use client';
2+
3+
import { I18nProvider } from "hua-i18n-sdk";
4+
import { i18nConfig } from "@/lib/i18n-config";
5+
6+
interface I18nWrapperProps {
7+
children: React.ReactNode;
8+
}
9+
10+
export default function I18nWrapper({ children }: I18nWrapperProps) {
11+
return (
12+
<I18nProvider config={i18nConfig}>
13+
{children}
14+
</I18nProvider>
15+
);
16+
}

‎examples/nextjs-basic/components/LanguageSwitcher.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,37 +15,39 @@ export default function LanguageSwitcher() {
1515
const currentLang = supportedLanguages.find(lang => lang.code === currentLanguage);
1616

1717
return (
18-
<div className="relative">
18+
<div className="relative animate-slide-in">
1919
<button
2020
onClick={() => setIsOpen(!isOpen)}
21-
className="flex items-center space-x-2 px-4 py-2 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 border border-gray-200"
21+
className="flex items-center justify-between w-48 px-4 py-2 bg-white/90 backdrop-blur-sm rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-1 transition-all duration-300 ease-out border border-gray-200 hover:border-blue-300"
2222
>
23-
<span className="text-lg">🌐</span>
24-
<span className="font-medium text-gray-700">
25-
{currentLang?.nativeName || currentLang?.name || currentLanguage}
26-
</span>
27-
<span className="text-gray-400">▼</span>
23+
<div className="flex items-center space-x-2">
24+
<span className="text-lg animate-pulse-slow">🌐</span>
25+
<span className="font-medium text-gray-700 truncate">
26+
{currentLang?.nativeName || currentLang?.name || currentLanguage}
27+
</span>
28+
</div>
29+
<span className={`text-gray-400 transition-transform duration-200 flex-shrink-0 ${isOpen ? 'rotate-180' : ''}`}>▼</span>
2830
</button>
2931

3032
{isOpen && (
31-
<div className="absolute top-full mt-2 w-full bg-white rounded-lg shadow-lg border border-gray-200 z-10">
33+
<div className="absolute top-full mt-2 w-48 bg-white/95 backdrop-blur-sm rounded-xl shadow-xl border border-gray-200 z-10 animate-fade-in">
3234
{supportedLanguages.map((language) => (
3335
<button
3436
key={language.code}
3537
onClick={() => handleLanguageChange(language.code)}
36-
className={`w-full px-4 py-2 text-left hover:bg-gray-50 transition-colors duration-150 ${
38+
className={`w-full px-4 py-2 text-left hover:bg-blue-50 hover:scale-105 transition-all duration-200 ${
3739
language.code === currentLanguage
38-
? 'bg-blue-50 text-blue-600 font-medium'
40+
? 'bg-blue-100 text-blue-600 font-medium'
3941
: 'text-gray-700'
4042
}`}
4143
>
4244
<div className="flex items-center space-x-2">
43-
<span className="text-sm">
45+
<span className="text-sm transition-transform duration-200 hover:scale-110 flex-shrink-0">
4446
{language.code === 'ko' ? '🇰🇷' : '🇺🇸'}
4547
</span>
46-
<span>{language.nativeName}</span>
48+
<span className="truncate">{language.nativeName}</span>
4749
{language.code !== 'ko' && (
48-
<span className="text-xs text-gray-400">({language.name})</span>
50+
<span className="text-xs text-gray-400 flex-shrink-0">({language.name})</span>
4951
)}
5052
</div>
5153
</button>
@@ -56,7 +58,7 @@ export default function LanguageSwitcher() {
5658
{/* 배경 클릭 시 닫기 */}
5759
{isOpen && (
5860
<div
59-
className="fixed inset-0 z-0"
61+
className="fixed inset-0 z-0 animate-fade-in"
6062
onClick={() => setIsOpen(false)}
6163
/>
6264
)}

0 commit comments

Comments
 (0)