diff --git a/README_ko.md b/README_ko.md new file mode 120000 index 00000000..94efb11c --- /dev/null +++ b/README_ko.md @@ -0,0 +1 @@ +packages/stac/README_ko.md \ No newline at end of file diff --git a/packages/stac/README_ko.md b/packages/stac/README_ko.md new file mode 100644 index 00000000..7db1c04b --- /dev/null +++ b/packages/stac/README_ko.md @@ -0,0 +1,81 @@ +

+ Stac: Server-Driven UI Framework for Flutter +

+ +

+ pub + github + license + discord + contributors + melos +

+ +

+ 웹사이트 • + 콘솔 • + 빠른 시작 • + 문서 • + 커뮤니티 & 지원 • + GitHub +

+ +# Stac + +**Stac**은 **Flutter를 위한 Server-Driven UI (SDUI) 프레임워크**로, 앱을 재배포하지 않고도 동적 사용자 인터페이스를 구축, 업데이트 및 제공할 수 있습니다. +Flutter에서 모든 위젯을 하드코딩하는 대신, JSON에서 런타임에 렌더링되는 **Stac Widgets**으로 UI를 정의합니다. + +이 접근 방식은 앱의 프레젠테이션 레이어와 비즈니스 로직을 분리하여 팀이 다음을 수행할 수 있도록 합니다: + +- **즉시 업데이트 배포.** StacWidgets를 업데이트하고 Stac Cloud에 푸시하기만 하면 됩니다. +- **기능 실험** (A/B 테스팅, 개인화 등)을 새로운 릴리스 없이 수행할 수 있습니다. +- 통합 스키마를 사용하여 **플랫폼 간 일관성 유지**가 가능합니다. +- 디자이너나 PM과 같은 **비개발자도 레이아웃과 콘텐츠를 관리**할 수 있습니다. + +## 주요 기능 + +- 🚀 즉시 업데이트: 앱 스토어 릴리스 없이 UI 배포 +- 🧩 JSON 기반 UI: JSON으로 위젯을 정의하고 네이티브로 렌더링 +- 📦 Dart에서 JSON으로: Dart로 Stac 위젯을 작성하고 Stac Cloud에 배포 +- 🎛 액션 & 내비게이션: 백엔드에서 라우트와 API 호출 제어 +- 📝 폼 & 검증: 내장된 폼 상태 및 검증 규칙 +- 🎨 테마: Stac Theme을 통한 JSON 기반 브랜드 및 레이아웃 +- 🔌 확장 가능: 커스텀 위젯, 액션 및 네이티브 통합 추가 가능 + +## 문서 + +- 📚 **[전체 문서](https://docs.stac.dev/)** – 완전한 가이드 및 API 레퍼런스 +- 🚀 **[빠른 시작](https://docs.stac.dev/quickstart)** – 몇 분 안에 시작하기 +- 🛠️ **[Stac CLI](https://docs.stac.dev/cli)** – 개발을 위한 커맨드라인 도구 +- 🎛️ **[Stac Console](https://console.stac.dev/)** – 앱 관리를 위한 웹 인터페이스 +- 🤝 **[기여하기](https://github.com/StacDev/stac/blob/dev/CONTRIBUTING.md)** – Stac 구축에 참여하기 + +## 라이선스 + +이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 [LICENSE](/LICENSE) 파일을 참조하세요. + +## 커뮤니티 참여 + +- 💬 **[Discord](https://discord.com/invite/vTGsVRK86V)** – 커뮤니티와 채팅하고 도움 받기 +- 🐙 **[GitHub](https://github.com/StacDev/stac)** – 이슈 보고 및 기여 +- 🐦 **[X](https://x.com/stac_dev)** – 업데이트 팔로우 + +--- + +

Stac 팀과 멋진 커뮤니티가 💙로 개발했습니다

+ +

+ + Stac Contributors + +

+ +[github_stars]: https://img.shields.io/github/stars/StacDev/stac +[github_stars_link]: https://github.com/StacDev/stac/stargazers +[license_badge]: https://img.shields.io/badge/license-MIT-blue.png +[license_link]: https://opensource.org/licenses/MIT +[stac_banner]: https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/stac_banner.png +[form_screen]: https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/form_screen_image.png +[divyanshu_github]: https://github.com/divyanshub024 +[rahul_linkedin]: https://www.linkedin.com/in/bybisht +[stac_website]: https://stac.dev/ diff --git a/website/docs/actions/dialog..md b/website/docs/actions/dialog.md similarity index 100% rename from website/docs/actions/dialog..md rename to website/docs/actions/dialog.md diff --git a/website/docs/widgets/gesture_detector.md b/website/docs/widgets/gesture_detector.md index 9322c1e6..45f81f02 100644 --- a/website/docs/widgets/gesture_detector.md +++ b/website/docs/widgets/gesture_detector.md @@ -205,4 +205,4 @@ To use a GestureDetector in your Stac JSON, specify the widget type as "gestureD Each gesture callback in Stac GestureDetector accepts an action object that defines what should happen when the gesture is detected. This can be a navigation action, showing a dialog, executing a custom function, or any other action supported by your Stac application. -For more information on actions, see the [Actions documentation](../actions/overview.md). +For more information on actions, see the [Actions documentation](../actions/). diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index 316a25c1..cbf64da7 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -28,7 +28,17 @@ const config: Config = { // may want to replace "en" with "zh-Hans". i18n: { defaultLocale: 'en', - locales: ['en'], + locales: ['en', 'ko'], + localeConfigs: { + en: { + label: 'English', + direction: 'ltr', + }, + ko: { + label: '한국어', + direction: 'ltr', + }, + }, }, presets: [ @@ -84,6 +94,10 @@ const config: Config = { label: 'GitHub', position: 'right', }, + { + type: 'localeDropdown', + position: 'right', + }, ], }, footer: { diff --git a/website/i18n/TRANSLATION_GUIDE.md b/website/i18n/TRANSLATION_GUIDE.md new file mode 100644 index 00000000..eb3becab --- /dev/null +++ b/website/i18n/TRANSLATION_GUIDE.md @@ -0,0 +1,132 @@ +# Stac Documentation Translation Guide (Korean) + +## Translation Principles + +1. **Technical Accuracy**: Maintain technical precision in all translations +2. **Consistency**: Use the same Korean terms for the same English concepts +3. **Natural Korean**: Write in natural, fluent Korean while preserving technical meaning +4. **Code Preservation**: Keep all code examples, JSON, and syntax unchanged + +## Terminology Glossary + +### Core Concepts +- **Widget** → **위젯** (keep as-is, commonly used in Korean dev community) +- **Action** → **액션** (keep as-is) +- **Parser** → **파서** (keep as-is) +- **Server-Driven UI** → **서버 주도 UI** or **SDUI** (use SDUI for brevity) +- **Framework** → **프레임워크** +- **Package** → **패키지** +- **Playground** → **플레이그라운드** + +### UI Components +- **Button** → **버튼** +- **Container** → **컨테이너** +- **Text** → **텍스트** +- **Image** → **이미지** +- **Icon** → **아이콘** +- **Dialog** → **다이얼로그** +- **Modal** → **모달** +- **Snackbar** → **스낵바** +- **App Bar** → **앱 바** +- **Navigation** → **내비게이션** +- **Drawer** → **드로어** +- **Scaffold** → **스캐폴드** +- **Column** → **칼럼** +- **Row** → **로우** +- **Stack** → **스택** +- **Grid** → **그리드** +- **List** → **리스트** + +### Actions & Events +- **Navigate** → **이동** or **내비게이트** +- **Network Request** → **네트워크 요청** +- **Form Validation** → **폼 검증** +- **Delay** → **지연** +- **Multi Action** → **멀티 액션** +- **Tap** → **탭** or **터치** +- **Click** → **클릭** +- **Swipe** → **스와이프** + +### Styles & Properties +- **Border** → **테두리** +- **Radius** → **반경** +- **Padding** → **패딩** +- **Margin** → **마진** +- **Alignment** → **정렬** +- **Color** → **색상** +- **Opacity** → **불투명도** +- **Clip** → **클립** + +### Development Terms +- **Property** → **속성** +- **Parameter** → **매개변수** or **파라미터** +- **Attribute** → **속성** +- **Value** → **값** +- **Type** → **타입** or **유형** +- **String** → **문자열** +- **Boolean** → **불린** or **불리언** +- **Integer** → **정수** +- **Double** → **실수** +- **Object** → **객체** +- **Array** → **배열** +- **Null** → **null** (keep as-is) +- **Optional** → **선택 사항** or **옵션** +- **Required** → **필수** +- **Default** → **기본값** + +### Actions +- **Install** → **설치하다** +- **Import** → **가져오다** or **임포트하다** +- **Add** → **추가하다** +- **Remove** → **제거하다** +- **Update** → **업데이트하다** +- **Build** → **빌드하다** +- **Run** → **실행하다** +- **Deploy** → **배포하다** + +### Common Phrases +- **Get Started** → **시작하기** +- **Learn more** → **자세히 알아보기** +- **Note** → **참고** +- **Warning** → **경고** +- **Example** → **예제** +- **Usage** → **사용법** +- **Description** → **설명** +- **See also** → **참고** + +## Style Guidelines + +### Tone +- Use **반말 (informal)** style for consistency with most Korean tech documentation +- Example: "이 위젯은..." not "이 위젯은...입니다" +- Exception: Use formal tone for warnings, notes, and important notices + +### Sentence Structure +- Prefer active voice +- Keep sentences concise and clear +- Break long sentences into shorter ones for readability + +### Code Comments +- Translate comments in code examples to Korean +- Keep variable names and function names in English +- Translate string values when they represent user-facing text + +### Links and URLs +- Keep all URLs unchanged +- Translate link text to Korean + +### Markdown Formatting +- Preserve all markdown formatting (headers, lists, code blocks, etc.) +- Keep admonitions (:::note, :::warning, etc.) in English +- Translate the content inside admonitions + +## Quality Checklist + +Before submitting translation: +- [ ] All technical terms use consistent Korean translations +- [ ] Code examples are unchanged +- [ ] Links work correctly +- [ ] Markdown formatting is preserved +- [ ] No English sentences remain (except in code/URLs) +- [ ] Natural Korean flow and readability +- [ ] Technical accuracy verified diff --git a/website/i18n/ko/code.json b/website/i18n/ko/code.json new file mode 100644 index 00000000..e920645e --- /dev/null +++ b/website/i18n/ko/code.json @@ -0,0 +1,313 @@ +{ + "theme.ErrorPageContent.title": { + "message": "페이지에 오류가 발생하였습니다.", + "description": "The title of the fallback page when the page crashed" + }, + "theme.BackToTopButton.buttonAriaLabel": { + "message": "맨 위로 스크롤하기", + "description": "The ARIA label for the back to top button" + }, + "theme.blog.archive.title": { + "message": "게시물 목록", + "description": "The page & hero title of the blog archive page" + }, + "theme.blog.archive.description": { + "message": "게시물 목록", + "description": "The page & hero description of the blog archive page" + }, + "theme.blog.paginator.navAriaLabel": { + "message": "블로그 게시물 목록 탐색", + "description": "The ARIA label for the blog pagination" + }, + "theme.blog.paginator.newerEntries": { + "message": "이전 페이지", + "description": "The label used to navigate to the newer blog posts page (previous page)" + }, + "theme.blog.paginator.olderEntries": { + "message": "다음 페이지", + "description": "The label used to navigate to the older blog posts page (next page)" + }, + "theme.blog.post.paginator.navAriaLabel": { + "message": "블로그 게시물 탐색", + "description": "The ARIA label for the blog posts pagination" + }, + "theme.blog.post.paginator.newerPost": { + "message": "이전 게시물", + "description": "The blog post button label to navigate to the newer/previous post" + }, + "theme.blog.post.paginator.olderPost": { + "message": "다음 게시물", + "description": "The blog post button label to navigate to the older/next post" + }, + "theme.tags.tagsPageLink": { + "message": "모든 태그 보기", + "description": "The label of the link targeting the tag list page" + }, + "theme.colorToggle.ariaLabel": { + "message": "어두운 모드와 밝은 모드 전환하기 (현재 {mode})", + "description": "The ARIA label for the navbar color mode toggle" + }, + "theme.colorToggle.ariaLabel.mode.dark": { + "message": "어두운 모드", + "description": "The name for the dark color mode" + }, + "theme.colorToggle.ariaLabel.mode.light": { + "message": "밝은 모드", + "description": "The name for the light color mode" + }, + "theme.docs.breadcrumbs.navAriaLabel": { + "message": "Breadcrumbs", + "description": "The ARIA label for the breadcrumbs" + }, + "theme.docs.DocCard.categoryDescription.plurals": { + "message": "{count} 항목", + "description": "The default description for a category card in the generated index about how many items this category includes" + }, + "theme.docs.paginator.navAriaLabel": { + "message": "문서 페이지", + "description": "The ARIA label for the docs pagination" + }, + "theme.docs.paginator.previous": { + "message": "이전", + "description": "The label used to navigate to the previous doc" + }, + "theme.docs.paginator.next": { + "message": "다음", + "description": "The label used to navigate to the next doc" + }, + "theme.docs.tagDocListPageTitle.nDocsTagged": { + "message": "{count}개 문서가", + "description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.docs.tagDocListPageTitle": { + "message": "{nDocsTagged} \"{tagName}\" 태그에 분류되었습니다", + "description": "The title of the page for a docs tag" + }, + "theme.docs.versions.unreleasedVersionLabel": { + "message": "{siteTitle} {versionLabel} 문서는 아직 정식 공개되지 않았습니다.", + "description": "The label used to tell the user that he's browsing an unreleased doc version" + }, + "theme.docs.versions.unmaintainedVersionLabel": { + "message": "{siteTitle} {versionLabel} 문서는 더 이상 업데이트되지 않습니다.", + "description": "The label used to tell the user that he's browsing an unmaintained doc version" + }, + "theme.docs.versions.latestVersionSuggestionLabel": { + "message": "최신 문서는 {latestVersionLink} ({versionLabel})을 확인하세요.", + "description": "The label used to tell the user to check the latest version" + }, + "theme.docs.versions.latestVersionLinkLabel": { + "message": "최신 버전", + "description": "The label used for the latest version suggestion link label" + }, + "theme.common.editThisPage": { + "message": "페이지 편집", + "description": "The link label to edit the current page" + }, + "theme.docs.versionBadge.label": { + "message": "버전: {versionLabel}" + }, + "theme.common.headingLinkTitle": { + "message": "{heading}에 대한 직접 링크", + "description": "Title for link to heading" + }, + "theme.lastUpdated.atDate": { + "message": " {date}에", + "description": "The words used to describe on which date a page has been last updated" + }, + "theme.lastUpdated.byUser": { + "message": " {user}가", + "description": "The words used to describe by who the page has been last updated" + }, + "theme.lastUpdated.lastUpdatedAtBy": { + "message": "최종 수정: {atDate}{byUser}", + "description": "The sentence used to display when a page has been last updated, and by who" + }, + "theme.navbar.mobileVersionsDropdown.label": { + "message": "버전", + "description": "The label for the navbar versions dropdown on mobile view" + }, + "theme.NotFound.title": { + "message": "페이지를 찾을 수 없습니다.", + "description": "The title of the 404 page" + }, + "theme.tags.tagsListLabel": { + "message": "태그:", + "description": "The label alongside a tag list" + }, + "theme.admonition.caution": { + "message": "주의", + "description": "The default label used for the Caution admonition (:::caution)" + }, + "theme.admonition.danger": { + "message": "위험", + "description": "The default label used for the Danger admonition (:::danger)" + }, + "theme.admonition.info": { + "message": "정보", + "description": "The default label used for the Info admonition (:::info)" + }, + "theme.admonition.note": { + "message": "노트", + "description": "The default label used for the Note admonition (:::note)" + }, + "theme.admonition.tip": { + "message": "팁", + "description": "The default label used for the Tip admonition (:::tip)" + }, + "theme.admonition.warning": { + "message": "경고", + "description": "The default label used for the Warning admonition (:::warning)" + }, + "theme.AnnouncementBar.closeButtonAriaLabel": { + "message": "닫기", + "description": "The ARIA label for close button of announcement bar" + }, + "theme.blog.sidebar.navAriaLabel": { + "message": "최근 블로그 문서 둘러보기", + "description": "The ARIA label for recent posts in the blog sidebar" + }, + "theme.CodeBlock.wordWrapToggle": { + "message": "줄 바꿈 전환", + "description": "The title attribute for toggle word wrapping button of code block lines" + }, + "theme.CodeBlock.copied": { + "message": "복사했습니다", + "description": "The copied button label on code blocks" + }, + "theme.CodeBlock.copyButtonAriaLabel": { + "message": "클립보드에 코드 복사", + "description": "The ARIA label for copy code blocks button" + }, + "theme.CodeBlock.copy": { + "message": "복사", + "description": "The copy button label on code blocks" + }, + "theme.DocSidebarItem.expandCategoryAriaLabel": { + "message": "사이드바 분류 '{label}' 펼치기", + "description": "The ARIA label to expand the sidebar category" + }, + "theme.DocSidebarItem.collapseCategoryAriaLabel": { + "message": "사이드바 분류 '{label}' 접기", + "description": "The ARIA label to collapse the sidebar category" + }, + "theme.NavBar.navAriaLabel": { + "message": "메인", + "description": "The ARIA label for the main navigation" + }, + "theme.navbar.mobileLanguageDropdown.label": { + "message": "언어", + "description": "The label for the mobile language switcher dropdown" + }, + "theme.NotFound.p1": { + "message": "원하는 페이지를 찾을 수 없습니다.", + "description": "The first paragraph of the 404 page" + }, + "theme.NotFound.p2": { + "message": "사이트 관리자에게 링크가 깨진 것을 알려주세요.", + "description": "The 2nd paragraph of the 404 page" + }, + "theme.TOCCollapsible.toggleButtonLabel": { + "message": "이 페이지에서", + "description": "The label used by the button on the collapsible TOC component" + }, + "theme.blog.post.readingTime.plurals": { + "message": "약 {readingTime}분", + "description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.post.readMore": { + "message": "자세히 보기", + "description": "The label used in blog post item excerpts to link to full blog posts" + }, + "theme.blog.post.readMoreLabel": { + "message": "{title} 에 대해 더 읽어보기", + "description": "The ARIA label for the link to full blog posts from excerpts" + }, + "theme.docs.sidebar.collapseButtonTitle": { + "message": "사이드바 숨기기", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.collapseButtonAriaLabel": { + "message": "사이드바 숨기기", + "description": "The title attribute for collapse button of doc sidebar" + }, + "theme.docs.sidebar.navAriaLabel": { + "message": "문서 사이드바", + "description": "The ARIA label for the sidebar navigation" + }, + "theme.docs.breadcrumbs.home": { + "message": "홈", + "description": "The ARIA label for the home page in the breadcrumbs" + }, + "theme.docs.sidebar.closeSidebarButtonAriaLabel": { + "message": "사이드바 닫기", + "description": "The ARIA label for close button of mobile sidebar" + }, + "theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": { + "message": "← 메인 메뉴로 돌아가기", + "description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)" + }, + "theme.docs.sidebar.toggleSidebarButtonAriaLabel": { + "message": "사이드바 펼치거나 접기", + "description": "The ARIA label for hamburger menu button of mobile navigation" + }, + "theme.docs.sidebar.expandButtonTitle": { + "message": "사이드바 열기", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.docs.sidebar.expandButtonAriaLabel": { + "message": "사이드바 열기", + "description": "The ARIA label and title attribute for expand button of doc sidebar" + }, + "theme.blog.post.plurals": { + "message": "{count}개 게시물", + "description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)" + }, + "theme.blog.tagTitle": { + "message": "\"{tagName}\" 태그로 연결된 {nPosts}개의 게시물이 있습니다.", + "description": "The title of the page for a blog tag" + }, + "theme.blog.author.pageTitle": { + "message": "{authorName} - {nPosts}", + "description": "The title of the page for a blog author" + }, + "theme.blog.authorsList.pageTitle": { + "message": "저자", + "description": "The title of the authors page" + }, + "theme.blog.authorsList.viewAll": { + "message": "모든 저자 보기", + "description": "The label of the link targeting the blog authors page" + }, + "theme.blog.author.noPosts": { + "message": "이 저자는 아직 게시물을 작성하지 않았습니다.", + "description": "The text for authors with 0 blog post" + }, + "theme.contentVisibility.unlistedBanner.title": { + "message": "색인되지 않은 문서", + "description": "The unlisted content banner title" + }, + "theme.contentVisibility.unlistedBanner.message": { + "message": "이 문서는 색인되지 않습니다. 검색 엔진이 이 문서를 색인하지 않으며, 주소를 알고 있는 사용자만 접근할 수 있습니다.", + "description": "The unlisted content banner message" + }, + "theme.contentVisibility.draftBanner.title": { + "message": "초안 페이지", + "description": "The draft content banner title" + }, + "theme.contentVisibility.draftBanner.message": { + "message": "이 페이지는 초안입니다. 개발 중에만 표시되며 프로덕션 빌드에서는 제외됩니다.", + "description": "The draft content banner message" + }, + "theme.ErrorPageContent.tryAgain": { + "message": "다시 시도해 보세요", + "description": "The label of the button to try again rendering when the React error boundary captures an error" + }, + "theme.common.skipToMainContent": { + "message": "본문으로 건너뛰기", + "description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation" + }, + "theme.tags.tagsPageTitle": { + "message": "태그", + "description": "The title of the tag list page" + } +} diff --git a/website/i18n/ko/docusaurus-plugin-content-blog/options.json b/website/i18n/ko/docusaurus-plugin-content-blog/options.json new file mode 100644 index 00000000..9239ff70 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-blog/options.json @@ -0,0 +1,14 @@ +{ + "title": { + "message": "Blog", + "description": "The title for the blog used in SEO" + }, + "description": { + "message": "Blog", + "description": "The description for the blog used in SEO" + }, + "sidebar.title": { + "message": "Recent posts", + "description": "The label for the left sidebar" + } +} diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current.json b/website/i18n/ko/docusaurus-plugin-content-docs/current.json new file mode 100644 index 00000000..c5afb4e2 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current.json @@ -0,0 +1,38 @@ +{ + "version.label": { + "message": "최신", + "description": "The label for version current" + }, + "sidebar.tutorialSidebar.category.Concepts": { + "message": "핵심 개념", + "description": "The label for category Concepts in sidebar tutorialSidebar" + }, + "sidebar.tutorialSidebar.category.Concepts.link.generated-index.description": { + "message": "Stac의 핵심 개념을 학습합니다.", + "description": "The generated-index page description for category Concepts in sidebar tutorialSidebar" + }, + "sidebar.tutorialSidebar.category.Stac Widgets": { + "message": "Stac 위젯", + "description": "The label for category Stac Widgets in sidebar tutorialSidebar" + }, + "sidebar.tutorialSidebar.category.Stac Widgets.link.generated-index.description": { + "message": "Stac이 제공하는 다양한 위젯을 학습합니다", + "description": "The generated-index page description for category Stac Widgets in sidebar tutorialSidebar" + }, + "sidebar.tutorialSidebar.category.Stac Actions": { + "message": "Stac 액션", + "description": "The label for category Stac Actions in sidebar tutorialSidebar" + }, + "sidebar.tutorialSidebar.category.Stac Actions.link.generated-index.description": { + "message": "Stac이 제공하는 다양한 액션을 학습합니다", + "description": "The generated-index page description for category Stac Actions in sidebar tutorialSidebar" + }, + "sidebar.tutorialSidebar.category.Stac Styles": { + "message": "Stac 스타일", + "description": "The label for category Stac Styles in sidebar tutorialSidebar" + }, + "sidebar.tutorialSidebar.category.Stac Styles.link.generated-index.description": { + "message": "Stac이 제공하는 다양한 스타일을 학습합니다", + "description": "The generated-index page description for category Stac Styles in sidebar tutorialSidebar" + } +} diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/_category_.json b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/_category_.json new file mode 100644 index 00000000..53cdc64b --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Stac 액션", + "position": 5, + "link": { + "type": "generated-index", + "description": "Stac이 제공하는 다양한 액션을 학습합니다" + } +} diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/delay_action.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/delay_action.md new file mode 100644 index 00000000..220937e0 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/delay_action.md @@ -0,0 +1,18 @@ +# Delay Action + +`StacDelayAction`은 지정된 시간 동안 아무 작업도 수행하지 않고 대기할 수 있게 합니다. + +## Delay Action 속성 + +| Property | Type | Description | +| --- |-------------------|---------------------------------------------------| +| milliseconds | `int` | 대기할 시간(밀리초 단위) | + +## Delay Action JSON + +```json +{ + "actionType": "delay", + "milliseconds": 1000 +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/dialog.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/dialog.md new file mode 100644 index 00000000..29200ab9 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/dialog.md @@ -0,0 +1,51 @@ +# Dialog Action + +`StacDialogAction` 클래스는 Stac 애플리케이션에서 다이얼로그를 표시하는 데 사용됩니다. + +## 속성 + +| Property | Type | Description | +|------------------------|-------------------------------|-----------------------------------------------------------------------------| +| widget | `Map?` | 다이얼로그 내부에 표시할 widget. | +| request | `StacNetworkRequest?` | 다이얼로그를 표시하기 전에 수행할 네트워크 요청. | +| assetPath | `String?` | 다이얼로그 내부에 표시할 widget의 asset 경로. | +| barrierDismissible | `bool` | 다이얼로그 외부를 탭하여 닫을 수 있는지 여부. 기본값은 `true`. | +| barrierColor | `String?` | 모달 배리어의 색상. | +| barrierLabel | `String?` | 모달 배리어의 시맨틱 레이블. | +| useSafeArea | `bool` | 안전 영역을 사용할지 여부. 기본값은 `true`. | +| traversalEdgeBehavior | `TraversalEdgeBehavior?` | 다이얼로그의 traversal edge 동작. | + +## 예제 JSON + +### Widget JSON을 사용한 다이얼로그 + +```json +{ + "actionType": "showDialog", + "widget": { + "type": "text", + "data": "Hello, World!" + } +} +``` + +### Request JSON을 사용한 다이얼로그 + +```json +{ + "actionType": "showDialog", + "request": { + "url": "https://example.com/api", + "method": "get" + } +} +``` + +### Asset JSON을 사용한 다이얼로그 + +```json +{ + "actionType": "showDialog", + "assetPath": "assets/dialog.json" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/form_validate.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/form_validate.md new file mode 100644 index 00000000..07a35887 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/form_validate.md @@ -0,0 +1,34 @@ +# Form Validate Action + +`StacFormValidateAction` 클래스는 Stac 애플리케이션에서 폼의 유효성을 검사하는 데 사용됩니다. + +## 속성 + +| Property | Type | Description | +|-------------|-------------------------|-----------------------------------------------------------------------------| +| isValid | `Map` | 폼이 유효한 경우 수행할 action. | +| isNotValid | `Map` | 폼이 유효하지 않은 경우 수행할 action. | + +## 예제 JSON + +### Form Validate Action JSON + +```json +{ + "actionType": "validateForm", + "isValid": { + "actionType": "showDialog", + "widget": { + "type": "text", + "data": "Form is valid!" + } + }, + "isNotValid": { + "actionType": "showDialog", + "widget": { + "type": "text", + "data": "Form is not valid!" + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/get_form_value.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/get_form_value.md new file mode 100644 index 00000000..821ffc18 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/get_form_value.md @@ -0,0 +1,20 @@ +# Get Form Value Action + +`StacGetFormValueAction` 클래스는 Stac 애플리케이션에서 폼 값을 가져오는 데 사용됩니다. + +## 속성 + +| Property | Type | Description | +|-----------|----------|------------------------------------| +| id | `String` | 가져올 폼 필드의 ID. | + +## 예제 JSON + +### Get Form Value Action JSON + +```json +{ + "actionType": "getFormValue", + "id": "username" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/modal_bottom_sheet.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/modal_bottom_sheet.md new file mode 100644 index 00000000..32a76e46 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/modal_bottom_sheet.md @@ -0,0 +1,83 @@ +# Modal Bottom Sheet Action + +`StacModalBottomSheetAction` 클래스는 Stac 애플리케이션에서 모달 바텀시트를 표시하는 데 사용됩니다. + +## 속성 + +| Property | Type | Description | +|---------------------|-------------------------------|-----------------------------------------------------------------------------| +| widget | `Map?` | 모달 바텀시트 내부에 표시할 widget. | +| request | `StacNetworkRequest?` | 모달 바텀시트를 표시하기 전에 수행할 네트워크 요청. | +| assetPath | `String?` | 모달 바텀시트 내부에 표시할 widget의 asset 경로. | +| backgroundColor | `String?` | 모달 바텀시트의 배경색. | +| barrierLabel | `String?` | 모달 배리어의 시맨틱 레이블. | +| elevation | `double?` | 모달 바텀시트의 높이. | +| shape | `StacBorder?` | 모달 바텀시트의 모양. | +| constraints | `StacBoxConstraints?` | 모달 바텀시트의 제약 조건. | +| barrierColor | `String?` | 모달 배리어의 색상. | +| isScrollControlled | `bool` | 모달 바텀시트가 스크롤 제어되는지 여부. 기본값은 `false`. | +| useRootNavigator | `bool` | 루트 네비게이터를 사용할지 여부. 기본값은 `false`. | +| isDismissible | `bool` | 모달 바텀시트를 닫을 수 있는지 여부. 기본값은 `true`. | +| enableDrag | `bool` | 모달 바텀시트를 드래그할 수 있는지 여부. 기본값은 `true`. | +| showDragHandle | `bool?` | 모달 바텀시트에 드래그 핸들을 표시할지 여부. | +| useSafeArea | `bool` | 안전 영역을 사용할지 여부. 기본값은 `false`. | + +## 예제 JSON + +### Widget JSON을 사용한 모달 바텀시트 + +```json +{ + "actionType": "showModalBottomSheet", + "widget": { + "type": "container", + "height": 200, + "color": "amber", + "child": { + "type": "center", + "child": { + "type": "column", + "mainAxisAlignment": "center", + "mainAxisSize": "min", + "children": [ + { + "type": "text", + "data": "Modal BottomSheet" + }, + { + "type": "elevatedButton", + "child": { + "type": "text", + "data": "Close BottomSheet" + }, + "onPressed": { + "actionType": "pop" + } + } + ] + } + } + } +} +``` + +### Asset Path를 사용한 모달 바텀시트 + +```json +{ + "actionType": "showModalBottomSheet", + "assetPath": "assets/widgets/modal_bottom_sheet.json" +} +``` + +### Network Request를 사용한 모달 바텀시트 + +```json +{ + "actionType": "showModalBottomSheet", + "request": { + "url": "https://example.com/api", + "method": "get" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/multi_action.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/multi_action.md new file mode 100644 index 00000000..0818d3a3 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/multi_action.md @@ -0,0 +1,78 @@ +# Multi Action + +`StacMultiAction`을 사용하면 여러 작업을 쉽게 실행할 수 있습니다. + +## Multi Action 속성 + +| Property | Type | Description | +| --- |-------------------|---------------------------------------------------| +| actions | `List?>?` | 수행할 action 목록 | +| sync | `bool` | action을 동기적으로 실행할지 병렬로 실행할지 여부. 기본값은 `false`. | + +## Multi Action JSON + +이 예제는 `StacShowSnackBarAction`을 통해 스낵바를 표시하고, `StacNetworkRequest`를 통해 네트워크 요청을 실행한 후 바로 또 다른 스낵바를 표시합니다. + +```json +{ + "actionType": "multiAction", + "sync": true, + "actions": [ + { + "actionType": "showSnackBar", + "content": { + "type": "text", + "data": "Executing request..." + }, + "action": { + "label": "Done", + "textColor": "#73C2FB", + "onPressed": {} + }, + "behavior": "floating" + }, + { + "actionType": "networkRequest", + "url": "https://example.com/api", + "method": "get", + "queryParameters": { + "page": 1 + }, + "headers": { + "Authorization": "Bearer token" + }, + "contentType": "application/json", + "body": { + "data": "example" + }, + "results": [ + { + "statusCode": 200, + "action": { + "actionType": "none" + } + }, + { + "statusCode": 404, + "action": { + "actionType": "none" + } + } + ] + }, + { + "actionType": "showSnackBar", + "content": { + "type": "text", + "data": "Request executed" + }, + "action": { + "label": "Done", + "textColor": "#73C2FB", + "onPressed": {} + }, + "behavior": "floating" + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/navigate.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/navigate.md new file mode 100644 index 00000000..5b86bf65 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/navigate.md @@ -0,0 +1,93 @@ +# Navigate Action + +Stac Navigate Action을 사용하면 JSON을 통해 Flutter 애플리케이션에서 네비게이션 작업을 수행할 수 있습니다. +Flutter의 네비게이션에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/Navigator-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|------------------|-------------------------|-----------------------------------------------------------------------------| +| request | `StacNetworkRequest?` | 네비게이션 전에 수행할 네트워크 요청. | +| widgetJson | `Map?` | 네비게이션할 widget의 JSON 표현. | +| assetPath | `String?` | 네비게이션할 widget의 asset 경로. | +| routeName | `String?` | 네비게이션할 라우트의 이름. | +| navigationStyle | `NavigationStyle?` | 네비게이션 스타일 (예: push, pop, pushReplacement 등). | +| result | `Map?` | 라우트를 pop할 때 반환할 결과. | +| arguments | `Map?` | 라우트에 전달할 인자. | + + +### NavigationStyle + +`NavigationStyle` enum은 Stac Navigate Action에서 사용할 수 있는 다양한 네비게이션 스타일을 정의합니다. + +| Value | Description | +|-------------------------|-----------------------------------------------------------| +| `push` | 네비게이터 스택에 새 라우트를 푸시합니다. | +| `pop` | 네비게이터 스택에서 현재 라우트를 pop합니다. | +| `pushReplacement` | 현재 라우트를 새 라우트로 교체합니다. | +| `pushAndRemoveAll` | 새 라우트를 푸시하고 이전의 모든 라우트를 제거합니다. | +| `popAll` | 네비게이터 스택에서 모든 라우트를 pop합니다. | +| `pushNamed` | 네비게이터 스택에 명명된 라우트를 푸시합니다. | +| `pushNamedAndRemoveAll` | 명명된 라우트를 푸시하고 이전의 모든 라우트를 제거합니다. | +| `pushReplacementNamed` | 현재 라우트를 명명된 라우트로 교체합니다. | + +## 예제 JSON + +### Network Request를 사용한 네비게이션 + +```json +{ + "actionType": "navigate", + "request": { + "url": "https://example.com/api", + "method": "get" + }, + "navigationStyle": "push" +} +``` + +### Widget JSON을 사용한 네비게이션 + +```json +{ + "actionType": "navigate", + "widgetJson": { + "type": "scaffold", + "appBar": { + "type": "appBar", + "title": { + "type": "text", + "data": "My App" + } + }, + "body": { + "type": "center", + "child": { + "type": "text", + "data": "Hello, World!" + } + } + }, + "navigationStyle": "push" +} +``` + +### Asset Path를 사용한 네비게이션 + +```json +{ + "actionType": "navigate", + "assetPath": "assets/widgets/my_widget.json", + "navigationStyle": "push" +} +``` + +### Route Name을 사용한 네비게이션 + +```json +{ + "actionType": "navigate", + "routeName": "/home", + "navigationStyle": "pushNamed" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/network_request.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/network_request.md new file mode 100644 index 00000000..00164bc2 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/network_request.md @@ -0,0 +1,69 @@ +# Network Request Action + +`NetworkRequestAction` 클래스는 Stac 애플리케이션에서 네트워크 요청을 만드는 데 사용됩니다. + +## 속성 + +| Property | Type | Description | +|-----------------|----------------------------|----------------------------------------------------------------------------------| +| url | `String` | 요청을 보낼 URL. | +| method | `Method` | 요청에 사용할 HTTP 메서드. 기본값은 `Method.get`. | +| queryParameters | `Map?` | 요청 URL에 포함할 쿼리 파라미터. | +| headers | `Map?` | 요청에 포함할 헤더. | +| contentType | `String?` | 요청의 콘텐츠 타입. | +| body | `dynamic` | 요청의 본문. | +| results | `List` | 다양한 상태 코드를 처리할 결과 목록. 기본값은 빈 목록. | + +### Method + +`Method` enum은 Stac Network Request Action에서 사용할 수 있는 다양한 HTTP 메서드를 정의합니다. + +| Value | Description | +|----------|-------------------------| +| `get` | GET 요청을 보냅니다. | +| `post` | POST 요청을 보냅니다. | +| `put` | PUT 요청을 보냅니다. | +| `delete` | DELETE 요청을 보냅니다. | + +### StacNetworkResult + +`StacNetworkResult` 클래스는 Stac Network Request Action에서 다양한 상태 코드를 처리하는 데 사용됩니다. + +| Property | Type | Description | +|------------|----------|---------------------------------------------------------| +| statusCode | `int` | 처리할 상태 코드. | +| action | `Action` | 상태 코드를 받았을 때 수행할 action. | + +## 예제 JSON + +```json +{ + "actionType": "networkRequest", + "url": "https://example.com/api", + "method": "get", + "queryParameters": { + "page": 1 + }, + "headers": { + "Authorization": "Bearer token" + }, + "contentType": "application/json", + "body": { + "data": "example" + }, + "results": [ + { + "statusCode": 200, + "action": { + "actionType": "none" + } + }, + { + "statusCode": 404, + "action": { + "actionType": "none" + } + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/none.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/none.md new file mode 100644 index 00000000..8d0cb8b4 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/none.md @@ -0,0 +1,11 @@ +# None Action + +아무 작업도 수행하지 않는 기본 action입니다. + +## 예제 JSON + +```json +{ + "actionType": "none" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/snack_bar.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/snack_bar.md new file mode 100644 index 00000000..c7a6697a --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/actions/snack_bar.md @@ -0,0 +1,55 @@ +# SnackBar + +Stac snackBar를 사용하면 JSON을 통해 Flutter SnackBar를 표시할 수 있습니다. +Flutter의 SnackBar widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/SnackBar-class.html)를 참조하세요. + +## SnackBar 속성 + +| Property | Type | Description | +| --- |-------------------|---------------------------------------------------| +| content | `Map` | 스낵바의 주요 콘텐츠. | +| backgroundColor | `String` | 스낵바의 배경색. | +| elevation | `double` | 스낵바를 배치할 z 좌표. 스낵바 아래 그림자의 크기를 제어합니다. | +| margin | `StacEdgeInsets` | 스낵바를 둘러싼 빈 공간. | +| padding | `StacEdgeInsets` | 스낵바의 콘텐츠와 선택적 action에 적용할 패딩 양. | +| width | `double` | 스낵바의 너비. | +| shape | `StacShapeBorder` | 스낵바의 모양. | +| hitTestBehavior | `HitTestBehavior` | margin을 포함한 스낵바 영역이 hit test 중에 어떻게 동작할지 정의합니다. | +| behavior | `SnackBarBehavior` | 스낵바의 동작 및 위치를 정의합니다. | +| action | `StacSnackBarAction` | 사용자가 스낵바를 기반으로 수행할 수 있는 action. | +| actionOverflowThreshold | `double` | action widget이 새 줄로 넘어가기 전 너비의 백분율 임계값. | +| showCloseIcon | `bool` | 닫기 아이콘 widget을 포함할지 여부. | +| closeIconColor | `String` | 닫기 아이콘이 보이는 경우 선택적 색상. | +| duration | `StacDuration` | 스낵바가 보이는 시간. | +| onVisible | `Map` | 스낵바가 처음 보일 때 호출됩니다. | +| dismissDirection | `DismissDirection` | SnackBar를 닫을 수 있는 방향. | +| clipBehavior | `Clip` | 이 옵션에 따라 콘텐츠가 잘립니다(또는 잘리지 않습니다). | + +## SnackBarAction 속성 + +| Property | Type | Description | +| --- |-------------------|---------------------------------------------------| +| textColor | `String` | 버튼 레이블 색상. | +| disabledTextColor | `String` | 버튼 비활성화 레이블 색상. | +| backgroundColor | `String` | 버튼 배경 채우기 색상. | +| disabledBackgroundColor | `String` | 버튼 비활성화 배경 색상. | +| label | `String` | 버튼 레이블. | +| onPressed | `Map` | 버튼을 눌렀을 때 호출될 콜백. | + +## 예제 JSON + +```json +{ + "actionType": "showSnackBar", + "content": { + "type": "text", + "data": "This is a Snackbar" + }, + "action": { + "label": "Done", + "textColor": "#73C2FB", + "onPressed": {} + }, + "behavior": "floating" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/_category_.json b/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/_category_.json new file mode 100644 index 00000000..aa674ad3 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Concepts", + "position": 3, + "link": { + "type": "generated-index", + "description": "Stac의 핵심 개념을 알아보세요." + } +} diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/action_parsers.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/action_parsers.md new file mode 100644 index 00000000..fd89d4ed --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/action_parsers.md @@ -0,0 +1,111 @@ +--- +sidebar_position: 2 +--- + +# Action Parser + +Stac은 다양한 유형의 action을 처리하기 위한 여러 내장 action parser를 지원합니다. 그러나 Stac에서 기본적으로 지원하지 않는 사용자 정의 action이나 action을 처리하기 위해 커스텀 action parser를 만들 수도 있습니다. 이 가이드에서는 Stac에서 action parser를 생성하고 사용하는 기본 사항을 안내합니다. + +## Stac Action Parser란 무엇인가요? + +Stac action parser는 action을 나타내는 특정 JSON 객체를 해석하고 Flutter 애플리케이션에서 해당 로직을 실행하는 커스텀 클래스입니다. 이를 통해 애플리케이션의 특정 요구 사항에 맞춘 매우 유연하고 커스터마이징 가능한 동작을 구현할 수 있습니다. + +## 커스텀 Action Parser 생성하기 + +커스텀 action parser를 생성하려면 다음 단계를 따라야 합니다: + +1. **JSON 구조 정의**: action parser가 해석할 JSON 객체의 구조를 정의합니다. 이 구조는 잘 문서화되어 있고 이해하기 쉬워야 합니다. +2. **Action Parser 클래스 생성**: Stac에서 제공하는 `StacActionParser` 인터페이스를 구현하는 새로운 Dart 클래스를 생성합니다. 이 클래스는 JSON 객체를 해석하고 해당 action을 실행하는 로직을 포함합니다. +3. **Action Parser 등록**: 커스텀 action parser를 Stac에 등록하여 JSON 객체를 해석하는 데 사용할 수 있도록 합니다. + +## 예제 Action Parser + +이 예제에서는 제공된 메시지와 함께 print 함수를 호출하는 커스텀 action parser를 생성합니다. + +### Step 1: JSON 구조 정의 + +커스텀 action의 JSON 구조는 다음과 같습니다: + +```json +{ + "actionType": "print", + "message": "Hello, Stac!" +} +``` +이 JSON 구조에 대해 커스텀 action을 나타내는 데이터 클래스를 생성하고 JSON 객체를 커스텀 action 객체로 변환하는 `fromJson` 메서드를 제공할 수 있습니다. + +```dart +@freezed +abstract class PrintAction with _$PrintAction { + const factory PrintAction({ + required String message, + }) = _PrintAction; + + factory PrintAction.fromJson(Map json) => + _$PrintActionFromJson(json); +} +``` +:::note +여기서는 freezed 패키지를 사용하여 데이터 클래스를 생성합니다. 하지만 다른 방법을 사용하여 데이터 클래스를 생성할 수도 있습니다. +::: + +### Step 2: Action Parser 클래스 생성 + +다음으로 `StacActionParser` 인터페이스를 구현하는 커스텀 action parser 클래스를 생성합니다. 이 클래스는 JSON 객체를 해석하고 해당 로직을 실행합니다. + +```dart +class PrintActionParser implements StacActionParser { + @override + String get actionType => 'print'; + + @override + PrintAction getModel(Map json) => PrintAction.fromJson(json); + + @override + FutureOr onCall(BuildContext context, StacNavigateAction model) { + print(model.message); + } +} +``` + +### Step 3: Action Parser 등록 + +마지막으로 커스텀 action parser를 Stac에 등록해야 합니다. + +커스텀 action parser를 등록하는 방법은 2가지가 있습니다: + +1. **`Stac.initialize`에서 등록**: Stac을 초기화할 때 `actionParser` 매개변수에 전달하여 parser를 등록할 수 있습니다. + +```dart +void main() async { + await Stac.initialize( + actionParsers: const [ + PrintActionParser(), + ], + ); + runApp(const MyApp()); +} +``` + +2. **StacRegistry를 통한 등록**: `StacRegistry` 클래스를 사용하여 어디서나 action parser를 등록할 수도 있습니다. + +`StacRegistry`는 action parser를 등록하기 위한 두 가지 메서드를 제공합니다. + +1. 단일 action parser 등록: + +```dart +StacRegistry.instance.registerAction(parser); +``` + +2. 여러 action parser 등록: + +```dart +StacRegistry.instance.registerAllActions([ + StacShareParser(), + StacBluetoothParser(), +]); +``` + +## 결론 + +Stac에서 커스텀 action parser를 생성하면 라이브러리의 기능을 확장할 수 있을 뿐만 아니라 애플리케이션 내에서 높은 수준의 커스터마이징 가능한 동작을 정의할 수 있습니다. action에 대한 커스텀 parser를 정의함으로써 Flutter 애플리케이션에서 server-driven UI의 모든 기능을 활용하여 동적이고 반응형 사용자 인터랙션을 보장할 수 있습니다. diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/parsers.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/parsers.md new file mode 100644 index 00000000..cf307ef2 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/parsers.md @@ -0,0 +1,137 @@ +--- +sidebar_position: 1 +--- + +# Stac Parser + +Stac은 다양한 유형의 widget을 처리하기 위한 여러 내장 parser를 지원합니다. +그러나 Stac에서 기본적으로 지원하지 않는 커스텀 widget이나 widget을 처리하기 위해 커스텀 parser를 만들 수도 있습니다. +이 가이드에서는 Stac에서 parser를 생성하고 사용하는 기본 사항을 안내합니다. + +## Stac Parser란 무엇인가요? + +[StacParser](https://github.com/StacDev/stac/blob/dev/packages/stac_framework/lib/src/stac_parser.dart)는 특정 JSON 객체를 해석하고 Flutter widget으로 변환하는 커스텀 클래스입니다. +이를 통해 애플리케이션의 특정 요구 사항에 맞춘 매우 유연하고 커스터마이징 가능한 UI 컴포넌트를 만들 수 있습니다. + +## 커스텀 Widget Parser 생성하기 + +커스텀 parser를 생성하려면 다음 단계를 따라야 합니다: + +1. **JSON 구조 정의**: parser가 해석할 JSON 객체의 구조를 정의합니다. 이 구조는 잘 문서화되어 있고 이해하기 쉬워야 합니다. +2. **Parser 클래스 생성**: Stac에서 제공하는 `StacParser` 클래스를 확장하는 새로운 Dart 클래스를 생성합니다. 이 클래스는 JSON 객체를 해석하고 해당하는 Flutter widget을 생성하는 로직을 포함합니다. +3. **Parser 등록**: 커스텀 parser를 Stac에 등록하여 JSON 객체를 해석하는 데 사용할 수 있도록 합니다. + +## 예제 Parser + +다음은 가상의 CustomButton widget을 위한 커스텀 parser를 생성하는 단계별 예제입니다. + +### Step 1: JSON 구조 정의 + +CustomButton widget의 JSON 구조는 다음과 같습니다: + +```json +{ + "type": "customButton", + "text": "Click Me", + "color": "#FF5733", + "onPressed": "handleClick" +} +``` + +이 JSON 구조에 대해 CustomButton widget을 나타내는 데이터 클래스를 생성하고 JSON 객체를 CustomButton 객체로 변환하는 fromJson 메서드를 제공할 수 있습니다. +:::note +여기서는 freezed 패키지를 사용하여 데이터 클래스를 생성합니다. 하지만 다른 방법을 사용하여 데이터 클래스를 생성할 수도 있습니다. +::: + +```dart +@freezed +abstract class CustomButton with _$CustomButton { + const factory CustomButton({ + required String text, + required String color, + required VoidCallback onPressed, + }) = _CustomButton; + + factory CustomButton.fromJson(Map json) => + _$CustomButtonFromJson(json); +} +``` + +### Step 2: Parser 클래스 생성 + +다음으로 `StacParser` 클래스를 확장하는 새로운 Dart 클래스를 생성합니다. + +StacParser는 구현해야 할 3가지 메서드를 제공합니다: + +1. `type`: 이 메서드는 widget의 type을 반환해야 합니다. `type`은 어떤 parser를 사용할지 결정하는 데 사용될 widget의 고유 식별자입니다. +2. `getModel`: 이 메서드는 제공된 JSON에서 모델 객체를 추출하고 반환합니다. 모델 객체는 widget을 렌더링하는 데 필요한 속성과 데이터를 포함합니다. +3. `parse`: 여기서 모델 객체를 사용하여 Flutter widget을 빌드합니다. 이 메서드는 JSON 객체에 해당하는 widget을 반환해야 합니다. + +```dart +class CustomButtonParser extends StacParser { + const CustomButtonParser(); + + @override + String get type => 'customButton'; + + @override + CustomButton getModel(Map json) => CustomButton.fromJson(json); + + @override + Widget parse(BuildContext context, model) { + return ElevatedButton( + onPressed: model.onPressed, + child: Text(model.text), + style: ElevatedButton.styleFrom( + backgroundColor: model.color.toColor, + ), + ); + } +} +``` + + +### Step 3: Parser 등록 + +마지막으로 커스텀 parser를 Stac에 등록하여 JSON 객체를 해석하는 데 사용할 수 있도록 해야 합니다. + +parser를 등록하는 방법은 2가지가 있습니다: + +1. **`Stac.initialize`에서 등록**: Stac을 초기화할 때 `parsers` 매개변수에 전달하여 parser를 등록할 수 있습니다. + +```dart +void main() async { + await Stac.initialize( + parsers: const [ + CustomButtonParser(), + ], + ); + + runApp(const MyApp()); +} +``` + +`Stac.initialize`에서 parser를 등록하면, parser는 앱 전체에서 사용할 수 있습니다. + +2. **StacRegistry를 통한 등록**: `StacRegistry` 클래스를 사용하여 어디서나 parser를 등록할 수도 있습니다. + +`StacRegistry`는 widget parser를 등록하기 위한 두 가지 메서드를 제공합니다. + +1. 단일 parser 등록 + +```dart +StacRegistry.instance.register(CustomButtonParser()); +``` + +2. 여러 parser 등록 + +```dart +StacRegistry.instance.registerAll([ + StacTextParser(), + StacButtonParser(), +]); +``` + +## 결론 + +Stac에서 커스텀 parser를 생성하면 라이브러리의 기능을 확장하고 높은 수준의 커스터마이징 가능한 UI 컴포넌트를 구축할 수 있을 뿐만 아니라, 서드파티 패키지를 애플리케이션에 통합할 수도 있습니다. 이러한 패키지가 제공하는 widget이나 컴포넌트에 대한 커스텀 parser를 정의함으로써, Stac이 제공하는 server-driven UI 패러다임 내에서 해당 기능을 활용할 수 있습니다. 이는 프로젝트에서 모든 Flutter 패키지를 사용하고 서버 측 JSON 응답에서 해당 widget을 렌더링할 수 있다는 것을 의미하며, 애플리케이션의 유연성과 강력함을 더욱 향상시킵니다. diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/theming.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/theming.md new file mode 100644 index 00000000..69678e89 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/concepts/theming.md @@ -0,0 +1,63 @@ +--- +sidebar_position: 3 +--- + +# Theming + +테마는 모든 애플리케이션의 필수적인 부분으로, 앱 전체에 걸쳐 일관된 모양과 느낌을 보장합니다. Stac은 JSON을 사용하여 애플리케이션의 테마를 동적으로 업데이트할 수 있는 강력한 방법을 제공합니다. + +Stac 테마는 Flutter의 내장 테마와 유사하게 작동합니다. JSON에서 테마를 정의하고 StacTheme widget을 사용하여 애플리케이션에 적용합니다. 이를 통해 앱의 시각적 스타일을 관리하는 중앙 집중식이고 쉽게 유지보수 가능한 접근 방식을 제공합니다. + +## Stac Theming 구현하기 + +Stac에서 테마를 구현하려면 다음 단계를 따라야 합니다: + +1. **MaterialApp을 StacApp으로 교체**: `MaterialApp`을 `StacApp`으로 교체하는 것부터 시작합니다 +2. **StacApp에 StacTheme 전달**: `StacApp`에 `StacTheme` widget을 전달하여 테마를 적용합니다. StacTheme widget은 JSON 테마 정의로부터 생성된 `StacTheme` 객체를 매개변수로 받습니다. + +```dart +import 'package:flutter/material.dart'; +import 'package:stac/stac.dart'; + +void main() async { + await Stac.initialize(); + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return StacApp( + theme: StacTheme.fromJson(themeJson), + homeBuilder: (context) => const HomeScreen(), + ); + } + + Map themeJson = { + "brightness": "light", + "disabledColor": "#60FEF7FF", + "fontFamily": "Handjet", + "colorScheme": { + "brightness": "light", + "primary": "#6750a4", + "onPrimary": "#FFFFFF", + "secondary": "#615B6F", + "onSecondary": "#FFFFFF", + "surface": "#FEFBFF", + "onSurface": "#1C1B1E", + "background": "#FEFBFF", + "onBackground": "#1C1B1E", + "surfaceVariant": "#E6E0EA", + "onSurfaceVariant": "#48454D", + "error": "#AB2D25", + "onError": "#FFFFFF", + "success": "#27BA62", + "onSuccess": "#FFFFFF" + } + }; +} +``` + +자세한 내용은 [StacTheme](https://github.com/StacDev/stac/blob/dev/packages/stac/lib/src/parsers/theme/stac_theme/stac_theme.dart) 클래스를 확인하세요. diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/intro.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/intro.md new file mode 100644 index 00000000..7c2115eb --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/intro.md @@ -0,0 +1,457 @@ +--- +slug: / +sidebar_position: 1 +--- + +# 시작하기 🚀 + +**Stac**(이전 명칭: Mirai)에 오신 것을 환영합니다. Stac은 Flutter를 위한 Server-Driven UI(SDUI) 프레임워크입니다. Stac은 개발자가 JSON을 실시간으로 활용하여 동적이고 크로스 플랫폼 애플리케이션을 구축할 수 있도록 지원합니다. 이 혁신적인 UI 개발 접근 방식은 유연하고 효율적이며 원활한 업데이트를 가능하게 하여, 빈번한 AppStore/PlayStore 릴리스의 필요성을 최소화하고 애플리케이션이 항상 신선하게 보이고 느껴지도록 보장합니다. + +## 패키지 + +Stac 생태계는 다음 패키지들로 구성됩니다: + +| 패키지 | 설명 | 링크 | +|---------|-------------|----------------------------------------------------------------------------------------------------| +| [stac](https://github.com/StacDev/stac/tree/dev/packages/stac) | Flutter에서 server-driven UI를 구축하기 위한 기반을 제공하는 핵심 패키지입니다. | [![pub package](https://img.shields.io/pub/v/stac.svg)](https://pub.dev/packages/stac) | +| [stac_framework](https://github.com/StacDev/stac/tree/dev/packages/stac_framework) | 핵심 패키지의 기능을 확장하고 server-driven UI 구축을 위한 추가 기능을 제공하는 프레임워크입니다. | [![pub package](https://img.shields.io/pub/v/stac_framework.svg)](https://pub.dev/packages/stac_framework) | +| [stac_webview](https://github.com/StacDev/stac/tree/dev/packages/stac_webview) | server-driven UI에 웹 뷰를 임베드할 수 있게 해주는 패키지입니다. | [![pub package](https://img.shields.io/pub/v/stac_webview.svg)](https://pub.dev/packages/stac_webview) | + + +## 설치 + +Stac을 시작하려면 아래 설치 지침을 따르세요: + +1. `pubspec.yaml` 파일에 Stac 의존성을 추가하세요: + +다음 명령어를 실행하세요: + +```bash +flutter pub add stac +``` +이 명령은 패키지의 pubspec.yaml에 stac을 추가하고 암묵적으로 flutter pub get을 실행합니다: + +또는 pubspec.yaml에서 직접 의존성을 수동으로 추가할 수 있습니다: + +```yaml +dependencies: + stac: ^ +``` +:::note +``을 Stac의 최신 버전으로 교체해주세요. 최신 버전은 [Stac pub.dev 페이지](https://pub.dev/packages/stac)에서 확인할 수 있습니다. +::: + +2. 터미널에서 다음 명령어를 실행하여 패키지를 설치하세요: + +```bash +flutter pub get +``` + +3. Dart 파일에서 Stac 패키지를 import하세요: + +```dart +import 'package:stac/stac.dart'; +``` + +이제 Flutter 프로젝트에서 Stac을 사용할 준비가 되었습니다. + +## Stac 사용 방법 + +Stac을 성공적으로 설치했으니, Flutter 프로젝트에서 동적 server-driven UI를 구축하는 방법을 알아보겠습니다. + +## 1. Stac 패키지 import하기 + +Stac을 사용하려면 Dart 파일에서 패키지를 import해야 합니다. `main.dart`에 다음 import 문을 추가하세요: + +```dart +import 'package:stac/stac.dart'; +``` + +이 import를 통해 Stac에서 제공하는 모든 클래스와 함수에 접근할 수 있습니다. + +## 2. Stac 초기화 + +`main` 함수에서 Stac을 초기화하여 필요한 설정을 준비하고 앱이 JSON에서 UI를 렌더링할 수 있도록 준비합니다. + +### 기본 초기화 +```dart +void main() async { + await Stac.initialize(); + runApp(const MyApp()); +} +``` + +## 3. Stac을 사용하여 UI 렌더링 + +`Stac.fromJson`을 사용하여 JSON 객체에서 UI를 로드하고 렌더링할 수 있습니다. Flutter 앱에 통합하는 방법은 다음과 같습니다: + +```dart +import 'package:flutter/material.dart'; +import 'package:stac/stac.dart'; + +void main() async { + await Stac.initialize(); + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'StacDemo', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: Stac.fromJson(json, context), + ); + } +} +``` + +### Assets의 JSON 파일에서 UI 렌더링 + +Assets 폴더에 저장된 JSON 파일에서 UI를 로드하고 렌더링하려면 `Stac.fromAssets`를 사용할 수도 있습니다: + +```dart + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'StacDemo', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: Stac.fromAsset('assets/ui.json', context), + ); +} +``` + +### 네트워크에서 UI 렌더링 + +또는 `Stac.fromNetwork` 메서드를 사용하여 서버에 저장된 JSON 파일에서 UI를 로드하고 렌더링할 수 있습니다: + +```dart + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'StacDemo', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: Stac.fromNetwork( + request: StacNetworkRequest( + url: 'https://example.com/ui.json', + ), + context: context, + ), + ); +} +``` + +이러한 단계를 따라 Flutter 프로젝트에 Stac을 효과적으로 통합하고 동적 server-driven UI 구축을 시작할 수 있습니다. + +## 예제: Stac Form 화면 + +Flutter 앱에서 Stac을 사용하여 폼 화면을 렌더링하는 방법의 예제입니다: + +### JSON 데이터 + +```json +{ + "type": "scaffold", + "appBar": { + "type": "appBar", + "title": { + "type": "text", + "data": "Text Field", + "style": { + "color": "#ffffff", + "fontSize": 21 + } + }, + "backgroundColor": "#4D00E9" + }, + "backgroundColor": "#ffffff", + "body": { + "type": "singleChildScrollView", + "child": { + "type": "container", + "padding": { + "left": 12, + "right": 12, + "top": 12, + "bottom": 12 + }, + "child": { + "type": "column", + "mainAxisAlignment": "center", + "crossAxisAlignment": "center", + "children": [ + { + "type": "sizedBox", + "height": 24 + }, + { + "type": "textField", + "maxLines": 1, + "keyboardType": "text", + "textInputAction": "done", + "textAlign": "start", + "textCapitalization": "none", + "textDirection": "ltr", + "textAlignVertical": "top", + "obscureText": false, + "cursorColor": "#FC3F1B", + "style": { + "color": "#000000" + }, + "decoration": { + "hintText": "What do people call you?", + "filled": true, + "icon": { + "type": "icon", + "iconType": "cupertino", + "icon": "person_solid", + "size": 24 + }, + "hintStyle": { + "color": "#797979" + }, + "labelText": "Name*", + "fillColor": "#F2F2F2" + }, + "readOnly": false, + "enabled": true + }, + { + "type": "sizedBox", + "height": 24 + }, + { + "type": "textField", + "maxLines": 1, + "keyboardType": "text", + "textInputAction": "done", + "textAlign": "start", + "textCapitalization": "none", + "textDirection": "ltr", + "textAlignVertical": "top", + "obscureText": false, + "cursorColor": "#FC3F1B", + "style": { + "color": "#000000" + }, + "decoration": { + "hintText": "Where can we reach you?", + "filled": true, + "icon": { + "type": "icon", + "iconType": "cupertino", + "icon": "phone_solid", + "size": 24 + }, + "hintStyle": { + "color": "#797979" + }, + "labelText": "Phone number*", + "fillColor": "#F2F2F2" + }, + "readOnly": false, + "enabled": true + }, + { + "type": "sizedBox", + "height": 24 + }, + { + "type": "textField", + "maxLines": 1, + "keyboardType": "text", + "textInputAction": "done", + "textAlign": "start", + "textCapitalization": "none", + "textDirection": "ltr", + "textAlignVertical": "top", + "obscureText": false, + "cursorColor": "#FC3F1B", + "style": { + "color": "#000000" + }, + "decoration": { + "hintText": "Your email address", + "filled": true, + "icon": { + "type": "icon", + "iconType": "material", + "icon": "email", + "size": 24 + }, + "hintStyle": { + "color": "#797979" + }, + "labelText": "Email", + "fillColor": "#F2F2F2" + }, + "readOnly": false, + "enabled": true + }, + { + "type": "sizedBox", + "height": 24 + }, + { + "type": "sizedBox", + "height": 100, + "child": { + "type": "textField", + "expands": true, + "cursorColor": "#FC3F1B", + "style": { + "color": "#000000" + }, + "decoration": { + "filled": true, + "hintStyle": { + "color": "#797979" + }, + "labelText": "Life story", + "fillColor": "#F2F2F2" + }, + "readOnly": false, + "enabled": true + } + }, + { + "type": "sizedBox", + "height": 24 + }, + { + "type": "textField", + "maxLines": 1, + "keyboardType": "text", + "textInputAction": "done", + "textAlign": "start", + "textCapitalization": "none", + "textDirection": "ltr", + "textAlignVertical": "top", + "obscureText": true, + "cursorColor": "#FC3F1B", + "style": { + "color": "#000000" + }, + "decoration": { + "filled": true, + "suffixIcon": { + "type": "icon", + "iconType": "cupertino", + "icon": "eye", + "size": 24 + }, + "hintStyle": { + "color": "#797979" + }, + "labelText": "Password*", + "fillColor": "#F2F2F2" + }, + "readOnly": false, + "enabled": true + }, + { + "type": "sizedBox", + "height": 24 + }, + { + "type": "textField", + "maxLines": 1, + "keyboardType": "text", + "textInputAction": "done", + "textAlign": "start", + "textCapitalization": "none", + "textDirection": "ltr", + "textAlignVertical": "top", + "obscureText": true, + "cursorColor": "#FC3F1B", + "style": { + "color": "#000000" + }, + "decoration": { + "filled": true, + "suffixIcon": { + "type": "icon", + "iconType": "cupertino", + "icon": "eye", + "size": 24 + }, + "hintStyle": { + "color": "#797979" + }, + "labelText": "Re-type password*", + "fillColor": "#F2F2F2" + }, + "readOnly": false, + "enabled": true + }, + { + "type": "sizedBox", + "height": 48 + }, + { + "type": "elevatedButton", + "child": { + "type": "text", + "data": "Submit" + }, + "style": { + "backgroundColor": "#4D00E9", + "padding": { + "top": 8, + "left": 12, + "right": 12, + "bottom": 8 + } + }, + "onPressed": {} + } + ] + } + } + } +} +``` +### Flutter 코드 + +```dart +import 'package:flutter/material.dart'; +import 'package:stac/stac.dart'; + +void main() { + runApp(const MyApp()); +} + +class MyApp extends StatelessWidget { + const MyApp({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return StacApp( + title: 'Stac Demo', + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: Stac.fromNetwork( + StacNetworkRequest( + url: _url, + method: Method.get, + ), + ), + ); + } +} +``` + +단 몇 줄의 코드로 SDUI 앱이 실행됩니다. + +Form screen example + +더 자세한 예제와 고급 사용법은 [Stac Gallery App](https://github.com/StacDev/stac/tree/dev/examples/stac_gallery)을 참조하세요. diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/_category_.json b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/_category_.json new file mode 100644 index 00000000..9e467040 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Stac 스타일", + "position": 6, + "link": { + "type": "generated-index", + "description": "Stac이 제공하는 다양한 스타일을 학습합니다" + } +} diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/border.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/border.md new file mode 100644 index 00000000..17dc3a85 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/border.md @@ -0,0 +1,159 @@ +# Border + +StacBorder를 사용하면 균일한 테두리(모든 면)와 개별 테두리 면을 모두 지원하는 JSON을 통해 Flutter Border 클래스를 정의할 수 있습니다. +Flutter의 Border 클래스에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/painting/Border-class.html)를 참조하세요. + +## 기능 + +- **균일한 테두리**: 모든 면에 동일한 테두리 적용 (이전 버전과 호환) +- **개별 테두리 면**: 상단, 우측, 하단, 좌측 면에 각각 다른 테두리 지정 +- **자동 감지**: 시스템이 균일 테두리 또는 개별 테두리 사용 여부를 자동으로 감지 + +## 속성 + +### 균일한 테두리 (모든 면) + +| Property | Type | Description | +| ----------- | -------------- | --------------------------------------------------------------------------------------- | +| color | `String?` | 모든 면의 테두리 색상을 정의합니다. | +| width | `StacDouble?` | 모든 면의 테두리 두께를 정의합니다 (논리 픽셀). | +| borderStyle | `BorderStyle?` | 모든 면의 테두리 스타일을 정의합니다. `solid` 또는 `none`이 가능하며, 기본값은 `solid`입니다. | +| strokeAlign | `StacDouble?` | 스트로크의 상대적 위치를 정의합니다. -1.0(내부)에서 1.0(외부) 범위의 값을 가집니다. | + +### 개별 테두리 면 + +| Property | Type | Description | +| ------ | ----------------- | -------------------------------- | +| top | `StacBorderSide?` | 상단 면의 테두리를 정의합니다. | +| right | `StacBorderSide?` | 우측 면의 테두리를 정의합니다. | +| bottom | `StacBorderSide?` | 하단 면의 테두리를 정의합니다. | +| left | `StacBorderSide?` | 좌측 면의 테두리를 정의합니다. | + +:::note + +개별 테두리 면(`top`, `right`, `bottom` 또는 `left`)이 하나라도 지정되면, 시스템은 개별 테두리 모드를 사용하고 균일 테두리 속성(`color`, `width`, `borderStyle`, `strokeAlign`)을 무시합니다. + +::: + +## 예제 + +### 균일한 테두리 (모든 면) + +```json +{ + "border": { + "color": "#FF0000", + "width": 2.0, + "borderStyle": "solid", + "strokeAlign": 0.0 + } +} +``` + +### 개별 테두리 면 + +```json +{ + "border": { + "top": { + "color": "#FF0000", + "width": 2.0, + "borderStyle": "solid", + "strokeAlign": 0.0 + }, + "right": { + "color": "#00FF00", + "width": 1.0, + "borderStyle": "solid" + }, + "bottom": { + "color": "#0000FF", + "width": 3.0, + "borderStyle": "solid" + }, + "left": { + "color": "#FFFF00", + "width": 1.5, + "borderStyle": "solid" + } + } +} +``` + +### 부분 테두리 면 + +일부 면만 지정할 수 있으며, 나머지는 기본값인 `BorderSide.none`이 됩니다: + +```json +{ + "border": { + "top": { + "color": "#FF0000", + "width": 2.0, + "borderStyle": "solid" + }, + "bottom": { + "color": "#0000FF", + "width": 2.0, + "borderStyle": "solid" + } + } +} +``` + +### 완전한 Container 예제 + +```json +{ + "type": "container", + "width": 200, + "height": 100, + "decoration": { + "color": "#F0F0F0", + "border": { + "top": { + "color": "#FF0000", + "width": 3.0, + "borderStyle": "solid" + }, + "right": { + "color": "#00FF00", + "width": 2.0, + "borderStyle": "solid" + }, + "bottom": { + "color": "#0000FF", + "width": 3.0, + "borderStyle": "solid" + }, + "left": { + "color": "#FFFF00", + "width": 2.0, + "borderStyle": "solid" + } + }, + "borderRadius": { + "topLeft": 8.0, + "topRight": 8.0, + "bottomLeft": 8.0, + "bottomRight": 8.0 + } + }, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Custom Borders", + "style": { + "fontSize": 16, + "fontWeight": "bold" + } + } + } +} +``` + +## 참고 자료 + +- [Border Side](./border_side.md) - StacBorderSide 속성에 대해 알아보기 +- [Border Radius](./border_radius.md) - border radius 설정에 대해 알아보기 diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/border_radius.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/border_radius.md new file mode 100644 index 00000000..540887ee --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/border_radius.md @@ -0,0 +1,50 @@ +# Border Radius + +StacBorderRadius를 사용하면 JSON을 통해 Flutter BorderRadius 클래스를 구성할 수 있습니다. +Flutter의 BorderRadius 클래스에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/painting/BorderRadius-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +| ------ | ---------------------- | --------------------------------------------------- | +| radius | `double?` | 모든 모서리에 적용할 border Radius를 정의합니다. | +| radius | `Map?` | 각 모서리의 border Radius를 명시적으로 정의합니다. | +| radius | `List?` | 각 모서리의 border Radius를 명시적으로 정의합니다. | + +:::note + +위의 세 가지 속성은 모두 선택 사항입니다. 즉, `StacBorderRadius`는 위의 3가지 방법 중 하나를 사용하여 정의할 수 있습니다. + +::: + +## 예제 + +// 일반 선언 +```json +{ + "borderRadius": 16.0 +} +``` +// 명시적 선언 +```json +{ + "borderRadius": { + "topLeft": 16.0, + "topRight": 16.0, + "bottomLeft": 16.0, + "bottomRight": 16.0 + } +} +``` + +// 명시적 선언 (리스트) +```json +{ + "borderRadius": [ + 16.0, + 16.0, + 16.0, + 16.0 + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/border_side.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/border_side.md new file mode 100644 index 00000000..771d76da --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/border_side.md @@ -0,0 +1,34 @@ +# Border Side + +StacBorderSide를 사용하면 JSON을 통해 Flutter BorderSide 클래스를 정의할 수 있습니다. +Flutter의 BorderSide 클래스에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/painting/BorderSide-class.html)를 참조하세요. + +:::info + +BorderSide는 [StacBorder](./border.md)의 새로운 개별 테두리 기능과 함께 사용됩니다. 이제 상단, 우측, 하단, 좌측 테두리를 개별적으로 지정할 수 있습니다. + +::: + +## 속성 + +| Property | Type | Description | +| ----------- | -------------- | --------------------------------------------------------------------------------------- | +| color | `Color?` | 테두리의 색상을 정의합니다. | +| width | `double?` | 테두리의 두께를 정의합니다. (논리 픽셀). | +| style | `BorderStyle?` | 테두리의 스타일을 정의합니다. `solid` 또는 `none`이 가능하며, 기본값은 `solid`입니다. | +| strokeAlign | `double?` | 스트로크의 상대적 위치를 정의합니다. -1.0(내부)에서 1.0(외부) 범위의 값을 가집니다. | + +## 예제 + +```json +{ + "color": "#428AF5", + "width": 1.0, + "style": "solid", + "strokeAlign": 1.0 +} +``` + +## 참고 자료 + +- [Border](./border.md) - StacBorder에서 개별 테두리 사용에 대해 알아보기 diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/box_fit.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/box_fit.md new file mode 100644 index 00000000..2f3adfc5 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/box_fit.md @@ -0,0 +1,22 @@ +# BoxFit + +`fit` 속성은 다음 값들을 지원합니다: + +| 값 | Description | +| ----------- | ----------------------------------------------------------------------------- | +| `fill` | 필요한 경우 가로세로 비율을 왜곡하여 자식을 박스에 맞게 늘립니다. | +| `contain` | 가로세로 비율을 유지하면서 자식을 박스 내에 맞도록 크기를 조정합니다. | +| `cover` | 일부가 잘릴 수 있지만 박스를 완전히 덮도록 자식의 크기를 조정합니다. | +| `fitWidth` | 자식을 박스의 너비에 맞추며, 세로로 넘칠 수 있습니다. | +| `fitHeight` | 자식을 박스의 높이에 맞추며, 가로로 넘칠 수 있습니다. | +| `none` | 크기 조정 없이 자식을 배치하며, 박스를 넘칠 수 있습니다. | +| `scaleDown` | 자식이 박스보다 큰 경우에만 박스 내에 맞도록 크기를 줄입니다. | + +## 예제 JSON + +```json +{ + "type": "fittedBox", + "fit": "contain" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/clip_behavior.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/clip_behavior.md new file mode 100644 index 00000000..740cb150 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/clip_behavior.md @@ -0,0 +1,19 @@ +# Clip + +`clipBehavior` 속성은 박스 외부의 콘텐츠를 처리하는 방법을 결정합니다: + +| 값 | Description | +| ------------------------ | --------------------------------------------------------------- | +| `none` | 클리핑이 적용되지 않습니다 (기본값). | +| `hardEdge` | 안티앨리어싱 없이 콘텐츠를 클리핑합니다. | +| `antiAlias` | 더 부드러운 가장자리를 위해 안티앨리어싱을 사용하여 콘텐츠를 클리핑합니다. | +| `antiAliasWithSaveLayer` | 안티앨리어싱을 사용하여 콘텐츠를 클리핑하고 페인팅을 위한 오프스크린 버퍼를 저장합니다. | + +## 예제 JSON + +```json +{ + "type": "fittedBox", + "clipBehavior": "hardEdge" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/colors.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/colors.md new file mode 100644 index 00000000..6757ece1 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/colors.md @@ -0,0 +1,62 @@ +# Color + +텍스트 색상, 배경 색상, 테두리 색상 등 다양한 Flutter 위젯에 적용할 수 있는 `Color`입니다. [공식 문서](https://api.flutter.dev/flutter/material/Colors-class.html). + +## 색상 타입 + +세 가지 다른 타입의 색상이 있습니다. Theme 색상, Hex 색상, Name 색상. + +### Theme 색상 + +Theme 색상은 테마에서 정의하는 테마 기반 색상입니다. + +다음은 theme 색상입니다 [`primary`, `onPrimary`,`primaryContainer`, `onPrimaryContainer`, `secondary`, `onSecondary`, `secondaryContainer`, `onSecondaryContainer`, `tertiary`, `onTertiary`, `tertiaryContainer`, `onTertiaryContainer`, `error`, `onError`, `errorContainer`, `onErrorContainer`, `background`, `onBackground`, `surface`, `onSurface`, `surfaceVariant`, `onSurfaceVariant`, `outline`, `outlineVariant`, `shadow`, `scrim`, `inverseSurface`, `onInverseSurface`, `inversePrimary`, `surfaceTint`, `scaffoldBackgroundColor`]. + +### Hex 색상 + +Hex 색상을 사용하면 사용자 정의 hex 값을 정의할 수 있습니다. 6자리 Hex 코드(`#FF0000`)이거나 8자리 Hex 코드(`#88FF0000`)일 수 있으며, 처음 2자리는 불투명도를 나타냅니다. + +### Name 색상 + +Name 색상을 사용하면 색상 이름과 검은색 및 흰색 색상의 불투명도를 사용하여 색상을 제공할 수 있습니다. + +다음은 name 색상입니다 [`amber`, `amberAccent`, `black`, `blue`, `blueAccent`, `blueGrey`, `brown`, `cyan`, `cyanAccent`, `deepOrange`, `deepOrangeAccent`, `deepPurple`, `deepPurpleAccent`, `green`, `greenAccent`, `grey`, `indigo`, `indigoAccent`, `lightBlue`, `lightBlueAccent`, `lightGreen`, `lightGreenAccent`, `lime`, `limeAccent`, `orange`, `orangeAccent`, `pink`, `pinkAccent`, `purple`, `purpleAccent`, `red`, `redAccent`, `teal`, `tealAccent`, `transparent`, `white`, `yellow`, `yellowAccent`]. + +다음은 흰색의 불투명도입니다 [`10`, `12`, `24`, `30`, `38`, `54`, `60`, `70`]. + +다음은 검은색의 불투명도입니다 [`12`, `26`, `38`, `45`, `54`, `87`]. + +## 예제 + +### 예제 1: Theme 색상 +```json +{ + "type": "text", + "data": "Hello World!", + "style": { + "color": "primary" + } +} +``` + +### 예제 2: Hex 색상 +```json +{ + "type": "text", + "data": "Hello World!", + "style": { + "color": "#000000" + } +} +``` + +### 예제 3: Name 색상 +```json +{ + "type": "text", + "data": "Hello World!", + "style": { + "color": "black45" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/stac_alignment_directional.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/stac_alignment_directional.md new file mode 100644 index 00000000..b40b2fdf --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/stac_alignment_directional.md @@ -0,0 +1,26 @@ +# StacAlignmentDirectional + +Stac AlignmentDirectional을 사용하면 JSON을 통해 alignment 위젯을 처리할 수 있습니다. + +`alignment` 속성은 박스 내에서 자식이 배치되는 위치를 결정합니다: + +| 값 | Description | +| -------------- | ---------------------------------- | +| `topStart` | 자식을 상단-시작 모서리에 정렬합니다. | +| `topCenter` | 자식을 상단-중앙에 정렬합니다. | +| `topEnd` | 자식을 상단-끝 모서리에 정렬합니다. | +| `centerStart` | 자식을 중앙-시작에 정렬합니다. | +| `center` | 자식을 박스 중앙에 정렬합니다. | +| `centerEnd` | 자식을 중앙-끝에 정렬합니다. | +| `bottomStart` | 자식을 하단-시작에 정렬합니다. | +| `bottomCenter` | 자식을 하단-중앙에 정렬합니다. | +| `bottomEnd` | 자식을 하단-끝에 정렬합니다. | + +## 예제 JSON + +```json +{ + "type": "fittedBox", + "alignment": "center" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/table_border.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/table_border.md new file mode 100644 index 00000000..9ac4c213 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/table_border.md @@ -0,0 +1,32 @@ +# Table Border + +StacTableBorder를 사용하면 JSON을 통해 Flutter TableBorder 클래스를 정의할 수 있습니다. +Flutter의 TableBorder 클래스에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/rendering/TableBorder-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------|---------------------|----------------------------------------| +| color | `String` | 테이블 테두리의 색상을 정의합니다. | +| width | `double` | 테이블 테두리의 너비를 정의합니다. | +| style | `BorderStyle` | 테이블 테두리의 스타일을 정의합니다. | +| borderRadius | `StacBorderRadius` | 테이블 테두리의 border radius를 정의합니다. | + + +## 예제 + +```json +{ + "tableBorder": { + "color": "#000000", + "width": 1.0, + "style": "solid", + "borderRadius": { + "topLeft": 16.0, + "topRight": 16.0, + "bottomLeft": 16.0, + "bottomRight": 16.0 + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/table_column_width.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/table_column_width.md new file mode 100644 index 00000000..762630cb --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/styles/table_column_width.md @@ -0,0 +1,20 @@ +# Table Column Width + +StacTableColumnWidth를 사용하면 JSON을 통해 Flutter TableColumnWidth 클래스를 구성할 수 있습니다. +Flutter의 TableColumnWidth 클래스에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/rendering/TableColumnWidth-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +| ----- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | +| type | `StacTableColumnWidth?` | 사용할 columnWidth의 타입을 정의합니다. `fixedColumnWidth`, `flexColumnWidth`, `fractionColumnWidth` 및 `intrinsicColumnWidth`가 가능합니다. | +| value | `double?` | columnWidth에 할당할 값을 정의합니다. 예: `5.0`은 `fixedColumnWidth`의 경우 `5px`이 됩니다. | + +## Example + +```json +{ + "type": "fixedColumnWidth", + "value": 200.0 +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/why_stac.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/why_stac.md new file mode 100644 index 00000000..d1cbe665 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/why_stac.md @@ -0,0 +1,47 @@ +--- +sidebar_position: 2 +--- + +# Why Stac? + +2008년 App Store와 Play Store가 출시된 이후, 모바일 애플리케이션은 우리 일상생활의 필수적인 부분이 되었습니다. 2024년 기준으로 App Store에는 380만 개 이상의 앱이, Play Store에는 250만 개 이상의 앱이 존재합니다. 이 기간 동안 앱들은 더욱 동적이고 개인화되며 지능적으로 진화해왔습니다. 하지만 앱을 개발하고 배포하는 근본적인 방식은 거의 변하지 않았습니다. + +전통적인 앱 개발에서는 데이터는 백엔드에서 관리하고 사용자 인터페이스(UI)는 클라이언트(Android, iOS, web)에서 관리합니다. 이러한 접근 방식을 Client-Driven UI(CDUI)라고 하며, 클라이언트가 대부분의 프레젠테이션 로직을 처리합니다. 그러나 이 접근 방식의 한계는 무엇이며, 왜 새로운 앱 개발 방식이 필요할까요? + +## Limitations of Client-Driven UI (CDUI) + +CDUI 접근 방식에는 몇 가지 주요 문제점이 있습니다: + +1. **잦은 앱 릴리스**: 대규模 UI 변경이든 작은 텍스트 수정이든, 개발자는 UI를 업데이트하기 위해 앱의 새 버전을 릴리스해야 합니다. 이 과정은 앱 스토어 승인을 받는 데 며칠 또는 몇 주가 걸릴 수 있으며, 중요한 업데이트가 지연될 경우 사용자의 불만을 야기할 수 있습니다. 또한 일부 사용자는 앱을 전혀 업데이트하지 않아 분편화 및 호환성 문제가 발생할 수 있습니다. +2. **일관성 없는 사용자 경험**: 다양한 플랫폼(iOS, Android, web)의 사용자들이 서로 다른 버전의 앱을 사용할 수 있어 사용자 경험의 일관성이 떨어질 수 있습니다. 이는 서로 다른 릴리스 일정, 기능 플래그 또는 플랫폼별 버그로 인해 발생할 수 있습니다. +3. **제한적인 개인화**: CDUI로는 각 사용자에 맞춰 앱 경험을 개인화하는 것이 어렵습니다. 앱은 모든 가능한 변형을 미리 구축해야 하므로 앱 크기가 커지고 성능이 저하될 수 있습니다. 사용자 행동이나 선호도에 기반한 동적 개인화는 달성하기 어렵습니다. +4. **A/B 테스팅 및 실험**: 앱 경험을 최적화하기 위한 A/B 테스트나 실험을 실행하려면 여러 버전의 앱을 릴리스하고 사용자 행동을 추적해야 합니다. 이 과정은 번거롭고 시간이 많이 소요되어 빠른 반복과 데이터 기반 의사결정 능력을 제한합니다. +5. **확장성 문제**: 애플리케이션의 복잡성과 사용자 기반이 증가함에 따라 여러 플랫폼에서 UI 변경을 관리하고 동기화하는 것이 점점 더 어려워집니다. CDUI는 효율적으로 확장하는 데 어려움을 겪을 수 있어 개발 주기가 느려지고 비용이 증가합니다. 이는 특히 빈번한 업데이트와 기능 추가가 필요한 애플리케이션에 문제가 됩니다. +6. **보안 문제**: 클라이언트 측에 프레젠테이션 로직을 저장하면 민감한 정보와 로직이 최종 사용자에게 노출되어 변조 및 리버스 엔지니어링에 더 취약해질 수 있습니다. 서버 기반 접근 방식은 중요한 로직을 서버에 유지하여 제어를 중앙 집중화함으로써 보안을 향상시킬 수 있습니다. +7. **긴 출시 시간**: CDUI로 앱을 개발하고 릴리스하는 것은 특히 여러 플랫폼과 복잡한 UI 요구사항을 다룰 때 시간이 많이 걸립니다. 백엔드와 프론트엔드 개발 주기를 조율해야 하므로 릴리스 프로세스가 느려지고 새로운 기능과 업데이트가 지연될 수 있습니다. + +이는 흥미로운 질문으로 이어집니다: 클라이언트 앱이 위젯을 렌더링하는 방법만 알고 무엇을 렌더링하는지는 모르는 수준으로 단순화된다면 어떨까요? 서버에서 직접 UI를 제어할 수 있다면 어떨까요? 이것이 Server-Driven UI(SDUI)의 핵심 개념입니다. + +## What is Server-Driven UI (SDUI)? + +Server-Driven UI(SDUI)는 클라이언트가 아닌 서버에서 UI를 정의하고 제어하는 혁신적인 앱 개발 접근 방식입니다. SDUI 아키텍처에서 클라이언트 앱은 씬 클라이언트 역할을 하며, 서버로부터 받은 데이터와 지시사항을 기반으로 UI 컴포넌트를 렌더링하는 역할을 담당합니다. 이는 UI 로직을 클라이언트 앱에서 분리하여 앱 스토어 릴리스 없이도 동적이고 실시간으로 업데이트할 수 있게 합니다. + +SDUI 모델에서 서버는 UI 구조, 콘텐츠 및 동작을 포함하는 JSON 페이로드를 클라이언트에 전송합니다. 클라이언트는 이러한 페이로드를 해석하고 그에 따라 UI를 렌더링합니다. 이 접근 방식을 통해 개발자는 서버 측에서 UI를 변경할 수 있으며, 앱 업데이트나 사용자 개입 없이도 해당 변경 사항이 클라이언트 앱에 즉시 반영됩니다. + +## Why Stac stands out? + +**Stac**은 Flutter를 위한 Server-Driven UI(SDUI) 프레임워크입니다. Stac은 개발자가 실시간으로 JSON을 활용하여 동적이고 크로스 플랫폼 애플리케이션을 구축할 수 있도록 지원합니다. 이러한 혁신적인 UI 개발 접근 방식은 유연하고 효율적이며 원활한 업데이트를 가능하게 하여 빈번한 AppStore/PlayStore 릴리스의 필요성을 최소화하고 애플리케이션이 항상 신선하게 보이고 느껴지도록 보장합니다. + +다음은 Stac을 차별화하는 주요 기능입니다: + +- **크로스 플랫폼**: Stac은 Flutter가 작동하는 모든 곳에서 작동하여 Android, iOS 및 web용 SDUI 애플리케이션을 구축할 수 있습니다. +- **실시간 업데이트**: Stac은 JSON 페이로드를 사용하여 즉각적인 UI 업데이트를 제공하므로 앱 스토어 릴리스 없이도 즉시 UI를 수정할 수 있습니다. +- **동적 UI**: Stac을 사용하면 서버 측 데이터를 기반으로 UI를 동적으로 생성하고 수정할 수 있어 개인화되고 적응형 사용자 경험을 제공할 수 있습니다. +- **Flutter 구조 준수**: Stac은 UI 구축을 위한 Flutter의 아키텍처를 따르므로 기존 Flutter 프로젝트 및 프레임워크와 쉽게 통합할 수 있습니다. +- **유연한 통합**: Stac은 Flutter 프로젝트에 쉽게 통합할 수 있어 주요 코드 변경 없이도 SDUI 기능을 활용할 수 있습니다. +- **오픈 소스**: Stac은 커뮤니티 기여와 협업을 장려하는 오픈 소스 프로젝트로, 지속적인 개선과 혁신을 보장합니다. +- **확장 가능**: Stac은 효율적으로 확장되도록 설계되어 모든 규모와 복잡성의 애플리케이션에 적합합니다. 간단한 프로토타입이든 대규모 프로덕션 앱이든 Stac은 처리할 수 있습니다. +- **보안**: UI 로직을 서버에 중앙 집중화함으로써 Stac은 최종 사용자에게 민감한 정보와 로직의 노출을 줄여 보안을 강화합니다. 이를 통해 악의적인 행위자가 UI를 변조하거나 중요한 로직을 리버스 엔지니어링하기 어렵게 만듭니다. +- **빠른 출시**: Stac을 사용하면 UI 업데이트를 앱 릴리스에서 분리하여 앱을 더 빠르게 개발하고 릴리스할 수 있습니다. 이를 통해 앱 스토어 승인을 기다리지 않고도 빠르게 반복하고 실험을 실행하며 사용자 경험을 최적화할 수 있습니다. + +전반적으로 Stac은 개발자가 사용자의 요구와 선호도에 실시간으로 적응하는 현대적이고 동적인 애플리케이션을 구축할 수 있게 해주는 강력한 도구입니다. Server-Driven UI의 이점을 활용함으로써 Stac은 앱 개발의 새로운 가능성을 열어주며, 개발자가 사용자를 계속 돌아오게 만드는 매력적이고 개인화된 경험을 만들 수 있도록 지원합니다. diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/_category_.json b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/_category_.json new file mode 100644 index 00000000..ea9067b9 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Stac 위젯", + "position": 4, + "link": { + "type": "generated-index", + "description": "Stac이 제공하는 다양한 위젯을 학습합니다" + } +} diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/alert_dialog.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/alert_dialog.md new file mode 100644 index 00000000..296b846f --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/alert_dialog.md @@ -0,0 +1,92 @@ +# AlertDialog + +Stac AlertDialog를 사용하면 JSON을 통해 Flutter alert dialog 위젯을 구성할 수 있습니다. +Flutter의 alert dialog 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/AlertDialog-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|------------------------------|-------------------------------|--------------------------------------------------------------------------------------| +| icon | `Map?` | 알림 대화상자에 표시할 아이콘입니다. | +| iconPadding | `StacEdgeInsets?` | 아이콘 주변의 여백입니다. | +| iconColor | `String?` | 아이콘의 색상입니다. | +| title | `Map?` | 알림 대화상자의 제목 위젯입니다. | +| titlePadding | `StacEdgeInsets?` | 제목 주변의 여백입니다. | +| titleTextStyle | `StacTextStyle?` | 제목의 텍스트 스타일입니다. | +| content | `Map?` | 알림 대화상자의 내용 위젯입니다. | +| contentPadding | `StacEdgeInsets?` | 내용 주변의 여백입니다. | +| contentTextStyle | `StacTextStyle?` | 내용의 텍스트 스타일입니다. | +| actions | `List>?` | 알림 대화상자에 표시할 액션들입니다. | +| actionsPadding | `StacEdgeInsets?` | 액션 주변의 여백입니다. | +| actionsAlignment | `MainAxisAlignment?` | 액션의 정렬 방식입니다. | +| actionsOverflowAlignment | `OverflowBarAlignment?` | 액션의 오버플로우 정렬 방식입니다. | +| actionsOverflowDirection | `VerticalDirection?` | 액션의 오버플로우 방향입니다. | +| actionsOverflowButtonSpacing | `double?` | 오버플로우 버튼 사이의 간격입니다. | +| buttonPadding | `StacEdgeInsets?` | 버튼 주변의 여백입니다. | +| backgroundColor | `String?` | 알림 대화상자의 배경 색상입니다. | +| elevation | `double?` | 알림 대화상자의 고도입니다. | +| shadowColor | `String?` | 알림 대화상자의 그림자 색상입니다. | +| surfaceTintColor | `String?` | 알림 대화상자의 표면 틴트 색상입니다. | +| semanticLabel | `String?` | 알림 대화상자의 시맨틱 레이블입니다. | +| insetPadding | `StacEdgeInsets` | 알림 대화상자 주변의 여백입니다. 기본값은 `left: 40, right: 40, top: 24, bottom: 24`입니다. | +| clipBehavior | `Clip` | 알림 대화상자의 클립 동작입니다. 기본값은 `Clip.none`입니다. | +| shape | `StacShapeBorder?` | 알림 대화상자의 모양입니다. | +| alignment | `StacAlignmentGeometry?` | 알림 대화상자의 정렬 방식입니다. | +| scrollable | `bool` | 알림 대화상자의 스크롤 가능 여부입니다. 기본값은 `false`입니다. | + +## 예제 JSON + +```json +{ + "type": "alertDialog", + "content": { + "type": "padding", + "padding": { + "top": 0, + "left": 12, + "right": 12, + "bottom": 8 + }, + "child": { + "type": "text", + "data": "Discard draft?", + "align": "center", + "style": { + "fontSize": 14 + } + } + }, + "actions": [ + { + "type": "textButton", + "child": { + "type": "text", + "data": "CANCEL" + }, + "onPressed": { + "actionType": "navigate", + "navigationStyle": "pop" + } + }, + { + "type": "sizedBox", + "width": 8 + }, + { + "type": "textButton", + "child": { + "type": "text", + "data": "DISCARD" + }, + "onPressed": { + "actionType": "navigate", + "navigationStyle": "pop" + } + }, + { + "type": "sizedBox", + "width": 12 + } + ] +} +``` \ No newline at end of file diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/align.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/align.md new file mode 100644 index 00000000..55a42417 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/align.md @@ -0,0 +1,41 @@ +# Align + +Stac align을 사용하면 JSON을 통해 Flutter align 위젯을 구성할 수 있습니다. +Flutter의 align 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/Align-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|--------------|-----------------------|------------------------------------------------------------------------| +| alignment | `StacAlignment` | 자식 요소를 정렬하는 방법입니다. | +| widthFactor | `double` | null이 아닌 경우, 너비를 자식의 너비에 이 인수를 곱한 값으로 설정합니다. | +| heightFactor | `double` | null이 아닌 경우, 높이를 자식의 높이에 이 인수를 곱한 값으로 설정합니다. | +| child | `Map` | 트리에서 이 위젯 아래에 있는 위젯입니다. | + +## 예제 JSON + +```json +{ + "type": "align", + "alignment": "topEnd", + "child": { + "type": "container", + "color": "#FC5632", + "clipBehavior": "hardEdge", + "height": 250, + "width": 200, + "child": { + "type": "align", + "alignment": "bottomCenter", + "child": { + "type": "text", + "data": "Flutter", + "style": { + "fontSize": 23, + "fontWeight": "w600" + } + } + } + } +} +``` \ No newline at end of file diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/app_bar.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/app_bar.md new file mode 100644 index 00000000..61bac0fd --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/app_bar.md @@ -0,0 +1,58 @@ +# AppBar + +Stac AppBar를 사용하면 JSON을 통해 Flutter app bar 위젯을 구성할 수 있습니다. +Flutter의 app bar 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/AppBar-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|------------------------|------------------------------|-------------------------------------------------------------------------------------| +| leading | `Map?` | 제목 앞에 표시되는 선행 위젯입니다. | +| title | `Map?` | 제목 위젯입니다. | +| titleTextStyle | `StacTextStyle?` | 제목의 텍스트 스타일입니다. | +| toolbarTextStyle | `StacTextStyle?` | 툴바의 텍스트 스타일입니다. | +| shadowColor | `String?` | 앱 바 아래 그림자의 색상입니다. | +| backgroundColor | `String?` | 앱 바의 배경 색상입니다. | +| foregroundColor | `String?` | 앱 바의 전경 요소 색상입니다. | +| surfaceTintColor | `String?` | 앱 바의 표면 틴트 색상입니다. | +| actions | `List>` | 제목 뒤에 행으로 표시할 위젯 목록입니다. 기본값은 빈 목록입니다. | +| bottom | `Map?` | 앱 바의 하단 위젯입니다. | +| titleSpacing | `double?` | 제목 주변의 간격입니다. | +| toolbarOpacity | `double` | 툴바의 불투명도입니다. 기본값은 `1.0`입니다. | +| bottomOpacity | `double` | 하단 위젯의 불투명도입니다. 기본값은 `1.0`입니다. | +| toolbarHeight | `double?` | 툴바의 높이입니다. | +| leadingWidth | `double?` | 선행 위젯의 너비입니다. | +| primary | `bool` | 이 앱 바가 scaffold의 기본 앱 바인지 여부입니다. 기본값은 `true`입니다. | +| centerTitle | `bool?` | 제목을 중앙에 배치할지 여부입니다. | +| elevation | `double?` | 앱 바의 고도입니다. | +| scrolledUnderElevation | `double?` | 스크롤되어 아래로 내려갔을 때 앱 바의 고도입니다. | + +## 예제 JSON + +```json +{ + "type": "appBar", + "title": { + "type": "text", + "data": "App Bar Title" + }, + "backgroundColor": "#FFFFFF", + "foregroundColor": "#000000", + "actions": [ + { + "type": "iconButton", + "icon": { + "type": "icon", + "icon": "search" + } + }, + { + "type": "iconButton", + "icon": { + "type": "icon", + "icon": "settings" + } + } + ] +} +``` \ No newline at end of file diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/aspect_ratio.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/aspect_ratio.md new file mode 100644 index 00000000..1ca2e6d6 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/aspect_ratio.md @@ -0,0 +1,30 @@ +# AspectRatio + +Stac aspectRatio를 사용하면 JSON을 통해 Flutter AspectRatio 위젯을 생성할 수 있습니다. +Flutter의 aspectRatio 위젯에 대해 더 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/AspectRatio-class.html)를 참조하세요. + +--- + +## 속성 + +| 속성 | 타입 | 설명 | +|---------------|-------------------------|--------------------------------------------------------------------------------------------------| +| `aspectRatio` | `double` | 자식 위젯의 원하는 너비-높이 비율입니다. 기본값은 `1` (정사각형 비율)입니다. | +| `child` | `Map?` | 지정된 비율을 따라야 하는 자식 위젯으로, JSON 객체로 표현됩니다. | + +--- + +## 예제 JSON + +```json +{ + "type": "aspectRatio", + "aspectRatio": 1.33, + "child": { + "type": "container", + "color": "#FF5733", + "width": 100, + "height": 100 + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/auto_complete.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/auto_complete.md new file mode 100644 index 00000000..9ae24021 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/auto_complete.md @@ -0,0 +1,30 @@ +# AutoComplete + +Stac AutoComplete를 사용하면 JSON을 통해 Flutter AutoComplete 위젯을 구성할 수 있습니다. +Flutter의 AutoComplete 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/Autocomplete-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|--------------------------|----------------------------|-------------------------------------------------------------------------------------------| +| options | `List` | 자동완성 옵션 목록입니다. | +| onSelected | `Map?` | 옵션이 선택되었을 때 호출되는 콜백입니다. | +| optionsMaxHeight | `double` | 옵션 목록의 최대 높이입니다. 기본값은 `200`입니다. | +| optionsViewOpenDirection | `OptionsViewOpenDirection` | 옵션 뷰가 열리는 방향입니다. 기본값은 `OptionsViewOpenDirection.down`입니다. | +| initialValue | `String?` | 자동완성 필드의 초기값입니다. | + +## 예제 JSON + +```json +{ + "type": "autoComplete", + "options": ["Option 1", "Option 2", "Option 3"], + "onSelected": { + "type": "callback", + "name": "onOptionSelected" + }, + "optionsMaxHeight": 250, + "optionsViewOpenDirection": "up", + "initialValue": "Option 1" +} +``` \ No newline at end of file diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/backdrop_filter.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/backdrop_filter.md new file mode 100644 index 00000000..7bd4ef93 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/backdrop_filter.md @@ -0,0 +1,232 @@ +# BackdropFilter + +Stac BackdropFilter를 사용하면 JSON을 통해 Flutter BackdropFilter 위젯을 구축할 수 있습니다. 이 위젯은 기존에 그려진 콘텐츠에 필터를 적용한 다음 자식 위젯을 그립니다. 주로 서리 유리 효과, 블러, 그리고 다른 시각적 효과를 만드는 데 사용됩니다. + +Flutter의 BackdropFilter 위젯에 대해 자세히 알아보려면 [Backdrop Filter](https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html) 및 [Image Filter](https://api.flutter.dev/flutter/dart-ui/ImageFilter-class.html) 공식 문서를 참조하세요. + +--- + +## 속성 + +| Property | Type | Description | +|-----------|------------------------|--------------------------------------------------------------------------------------------| +| `filter` | `Map` | 자식을 그리기 전에 기존에 그려진 콘텐츠에 적용할 이미지 필터입니다. | +| `child` | `Map?`| 기존에 그려진 콘텐츠에 필터를 적용한 후 그릴 위젯입니다. | +| `enabled` | `bool` | 필터를 적용할지 여부입니다. false인 경우 자식이 필터 없이 그려집니다. 기본값은 `true`입니다. | +| `blendMode` | `String?` | 필터를 기존 콘텐츠와 블렌딩할 때 적용할 블렌드 모드입니다. 기본값은 `BlendMode.srcOver`입니다. 사용 가능한 값은 [BlendMode](https://api.flutter.dev/flutter/dart-ui/BlendMode.html)를 참조하세요. | + +--- + +## Filter Types + +`filter` 속성은 다양한 유형의 이미지 필터를 허용합니다. 다음은 지원되는 필터 유형입니다: + +### Blur Filter + +| Property | Type | Description | +|-----------|---------|--------------------------------------------------------------------------------| +| `type` | `String`| `"blur"`로 설정되어야 합니다. | +| `sigmaX` | `double`| 수평 방향의 표준 편차입니다. 기본값은 `10.0`입니다. | +| `sigmaY` | `double`| 수직 방향의 표준 편차입니다. 기본값은 `sigmaX`와 동일합니다.| + +### Dilate Filter + +| Property | Type | Description | +|-----------|---------|--------------------------------------------------------------------------------| +| `type` | `String`| `"dilate"`로 설정되어야 합니다. | +| `radiusX` | `double`| 수평 방향의 반경입니다. | +| `radiusY` | `double`| 수직 방향의 반경입니다. | + +### Erode Filter + +| Property | Type | Description | +|-----------|---------|--------------------------------------------------------------------------------| +| `type` | `String`| `"erode"`로 설정되어야 합니다. | +| `radiusX` | `double`| 수평 방향의 반경입니다. | +| `radiusY` | `double`| 수직 방향의 반경입니다. | + +### Compose Filter + +| Property | Type | Description | +|-----------|------------------------|-----------------------------------------------------------------| +| `type` | `String` | `"compose"`로 설정되어야 합니다. | +| `inner` | `Map` | 먼저 적용할 내부 필터입니다. | +| `outer` | `Map` | 내부 필터 이후에 적용할 외부 필터입니다. | + +--- + +## Usage Recommendations + +BackdropFilter를 사용할 때 최상의 결과를 얻으려면: + +1. `Stack`을 사용하여 필터를 적용하려는 콘텐츠 위에 BackdropFilter를 배치하세요 +2. BackdropFilter를 `ClipRRect`로 감싸서 필터를 특정 영역으로 제한하세요 +3. BackdropFilter의 자식으로 반투명 컨테이너를 포함시켜 효과를 가시적으로 만드세요 +4. Stack에서 `fit: expand`를 사용하여 적절한 크기를 보장하세요 + +--- + +## 예제 JSON + +### Example 1: Frosted Glass Effect + +```json +{ + "type": "clipRRect", + "borderRadius": { + "all": 16 + }, + "child": { + "type": "sizedBox", + "height": 200, + "width": 300, + "child": { + "type": "stack", + "fit": "expand", + "children": [ + { + "type": "container", + "decoration": { + "image": { + "src": "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg", + "fit": "cover" + } + } + }, + { + "type": "backdropFilter", + "filter": { + "type": "blur", + "sigmaX": 15.0, + "sigmaY": 15.0 + }, + "child": { + "type": "container", + "decoration": { + "color": "#80FFFFFF" + } + } + } + ] + } + } +} +``` + +### Example 2: Dilate Filter Effect + +```json +{ + "type": "clipRRect", + "borderRadius": { + "all": 16 + }, + "child": { + "type": "sizedBox", + "height": 200, + "width": 300, + "child": { + "type": "stack", + "fit": "expand", + "children": [ + { + "type": "container", + "decoration": { + "image": { + "src": "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg", + "fit": "cover" + } + } + }, + { + "type": "backdropFilter", + "filter": { + "type": "dilate", + "radiusX": 2.0, + "radiusY": 2.0 + }, + "child": { + "type": "container", + "decoration": { + "color": "#80FFFFFF" + } + } + } + ] + } + } +} +``` + +### Example 3: Compose Filter (Blur + Dilate) + +```json +{ + "type": "clipRRect", + "borderRadius": { + "all": 16 + }, + "child": { + "type": "sizedBox", + "height": 200, + "width": 300, + "child": { + "type": "stack", + "fit": "expand", + "children": [ + { + "type": "container", + "decoration": { + "image": { + "src": "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg", + "fit": "cover" + } + } + }, + { + "type": "backdropFilter", + "filter": { + "type": "compose", + "outer": { + "type": "blur", + "sigmaX": 5.0, + "sigmaY": 5.0 + }, + "inner": { + "type": "dilate", + "radiusX": 2.0, + "radiusY": 2.0 + } + }, + "child": { + "type": "container", + "decoration": { + "color": "#80FFFFFF" + } + } + } + ] + } + } +} +``` + +--- + +## Common Issues and Solutions + +### Issue: Filter affects entire screen + +백드롭 필터가 특정 영역 대신 전체 화면에 영향을 미치는 경우, 다음을 확인하세요: + +1. BackdropFilter를 `ClipRRect`로 감싸서 효과를 제한하세요 +2. 필터를 적용할 콘텐츠 위에 BackdropFilter를 자식으로 배치한 `Stack`을 사용하세요 +3. BackdropFilter가 위젯 트리의 루트 레벨에 있지 않은지 확인하세요 + +### Issue: Filter not visible + +필터 효과가 보이지 않는 경우: + +1. BackdropFilter의 자식이 반투명 색상을 가지고 있는지 확인하세요 (예: `#80FFFFFF`) +2. 필터 매개변수 (블러의 경우 `sigmaX` 및 `sigmaY`)가 눈에 띄기에 충분히 큰지 확인하세요 +3. 필터 뒤의 콘텐츠에 효과를 가시적으로 만들기에 충분한 대비가 있는지 확인하세요 diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/bottom_navigation_bar.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/bottom_navigation_bar.md new file mode 100644 index 00000000..2e7eb7f6 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/bottom_navigation_bar.md @@ -0,0 +1,150 @@ +# BottomNavigationBar + +Stac BottomNavigationBar를 사용하면 JSON을 통해 Flutter BottomNavigationBar 위젯을 구축할 수 있습니다. +Flutter의 BottomNavigationBar 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------------------|---------------------------------------|--------------------------------------------------------------------------------| +| items | `List` | 하단 네비게이션 바에 표시할 항목입니다. | +| elevation | `double?` | 이 하단 네비게이션 바를 배치할 z-좌표입니다. | +| bottomNavigationBarType | `BottomNavigationBarType?` | 하단 네비게이션 바의 유형입니다. | +| fixedColor | `String?` | `type`이 `BottomNavigationBarType.fixed`일 때 선택된 항목의 색상입니다. | +| backgroundColor | `String?` | 하단 네비게이션 바의 배경 색상입니다. | +| iconSize | `double` | 하단 네비게이션 바의 아이콘 크기입니다. 기본값은 `24`입니다. | +| selectedItemColor | `String?` | 선택된 항목의 색상입니다. | +| unselectedItemColor | `String?` | 선택되지 않은 항목의 색상입니다. | +| selectedFontSize | `double` | 선택된 항목의 글꼴 크기입니다. 기본값은 `14.0`입니다. | +| unselectedFontSize | `double` | 선택되지 않은 항목의 글꼴 크기입니다. 기본값은 `12.0`입니다. | +| selectedLabelStyle | `StacTextStyle?` | 선택된 항목 레이블의 텍스트 스타일입니다. | +| unselectedLabelStyle | `StacTextStyle?` | 선택되지 않은 항목 레이블의 텍스트 스타일입니다. | +| showSelectedLabels | `bool?` | 선택된 항목의 레이블을 표시할지 여부입니다. | +| showUnselectedLabels | `bool?` | 선택되지 않은 항목의 레이블을 표시할지 여부입니다. | +| enableFeedback | `bool?` | 탭에 대한 피드백을 활성화할지 여부입니다. | +| landscapeLayout | `BottomNavigationBarLandscapeLayout?` | 가로 모드에서 하단 네비게이션 바의 레이아웃입니다. | + +# DefaultBottomNavigationController + +DefaultBottomNavigationController는 BottomNavigationController를 BottomNavigationBar 또는 BottomNavigationView와 공유하는 데 사용되는 상속 위젯입니다. + +## 속성 + +| Property | Type | Description | +|---------------|-------------------------|-----------------------------------------------------------------------------| +| length | `int` | 하단 네비게이션 바의 항목 수입니다. | +| initialIndex | `int?` | 선택된 항목의 초기 인덱스입니다. | +| child | `Map` | 트리에서 이 위젯 아래에 있는 위젯입니다. | + + +# BottomNavigationBarItem + +Stac BottomNavigationBarItem을 사용하면 JSON을 통해 Flutter BottomNavigationBarItem을 구축할 수 있습니다. +Flutter의 BottomNavigationBarItem 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/BottomNavigationBarItem-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-----------------|-------------------------|-----------------------------------------------------------------------------| +| icon | `Map` | 하단 네비게이션 바 항목에 표시할 아이콘입니다. | +| label | `String` | 하단 네비게이션 바 항목에 표시할 레이블입니다. | +| activeIcon | `Map?` | 항목이 활성 상태일 때 표시할 아이콘입니다. | +| backgroundColor | `String?` | 하단 네비게이션 바 항목의 배경 색상입니다. | +| tooltip | `String?` | 항목을 길게 누를 때 표시할 툴팁 텍스트입니다. | + +# BottomNavigationView + +현재 선택된 하단 네비게이션 항목에 해당하는 위젯을 표시하는 페이지 뷰입니다. + +## 속성 + +| Property | Type | Description | +|----------|-------------------------------|--------------------------------------------------| +| children | `List>` | 트리에서 이 위젯 아래에 있는 위젯들입니다. | + + +## Example + +```json +{ + "type": "defaultBottomNavigationController", + "length": 3, + "child": { + "type": "scaffold", + "appBar": { + "type": "appBar", + "title": { + "type": "text", + "data": "Bottom Navigation Screen" + } + }, + "body": { + "type": "bottomNavigationView", + "children": [ + { + "type": "center", + "child": { + "type": "text", + "data": "Home", + "style": { + "fontSize": 24 + } + } + }, + { + "type": "center", + "child": { + "type": "text", + "data": "Search", + "style": { + "fontSize": 24 + } + } + }, + { + "type": "center", + "child": { + "type": "text", + "data": "Profile", + "style": { + "fontSize": 24 + } + } + } + ] + }, + "bottomNavigationBar": { + "type": "bottomNavigationBar", + "items": [ + { + "type": "navigationBarItem", + "label": "Home", + "icon": { + "type": "icon", + "iconType": "material", + "icon": "home" + } + }, + { + "type": "navigationBarItem", + "label": "Search", + "icon": { + "type": "icon", + "iconType": "material", + "icon": "search" + } + }, + { + "type": "navigationBarItem", + "label": "Profile", + "icon": { + "type": "icon", + "iconType": "material", + "icon": "account_circle" + } + } + ] + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/card.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/card.md new file mode 100644 index 00000000..5dcc40a6 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/card.md @@ -0,0 +1,48 @@ +# Card + +Stac Card를 사용하면 JSON을 통해 Flutter Card 위젯을 구축할 수 있습니다. +Flutter의 Card 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/Card-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------------|-------------------------|-----------------------------------------------------------------------------| +| color | `String?` | 카드의 배경 색상입니다. | +| shadowColor | `String?` | 카드 그림자의 색상입니다. | +| surfaceTintColor | `String?` | 카드 표면 틴트의 색상입니다. | +| elevation | `double?` | 이 카드를 배치할 z-좌표입니다. | +| shape | `StacShapeBorder?` | 카드 테두리의 모양입니다. | +| borderOnForeground | `bool` | 자식 앞에 테두리를 그릴지 여부입니다. 기본값은 `true`입니다. | +| margin | `StacEdgeInsets?` | 카드를 둘러싼 빈 공간입니다. | +| clipBehavior | `Clip?` | 이 옵션에 따라 콘텐츠가 클리핑되거나 되지 않습니다. | +| child | `Map?` | 트리에서 이 위젯 아래에 있는 위젯입니다. | +| semanticContainer | `bool` | 이 카드가 의미적 컨테이너인지 여부입니다. 기본값은 `true`입니다. | + +## 예제 JSON + +```json +{ + "type": "card", + "color": "#FFFFFF", + "shadowColor": "#000000", + "surfaceTintColor": "#FF0000", + "elevation": 5.0, + "shape": { + "type": "roundedRectangle", + "borderRadius": 10.0 + }, + "borderOnForeground": true, + "margin": { + "left": 10, + "top": 20, + "right": 10, + "bottom": 20 + }, + "clipBehavior": "antiAlias", + "child": { + "type": "text", + "data": "This is a card." + }, + "semanticContainer": true +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/carousel_view.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/carousel_view.md new file mode 100644 index 00000000..a3c04711 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/carousel_view.md @@ -0,0 +1,67 @@ +# CarouselView + +Stac CarouselView를 사용하면 JSON을 통해 Flutter CarouselView 위젯을 구축할 수 있습니다. +Flutter의 CarouselView 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Carousel-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|------------------|-------------------------------|-----------------------------------------------------------------------------| +| carouselType | `StacCarouselViewType` | 캐러셀의 유형입니다. 기본값은 `StacCarouselViewType.regular`입니다. | +| padding | `StacEdgeInsets?` | 캐러셀을 삽입할 공간의 양입니다. | +| backgroundColor | `String?` | 캐러셀의 배경 색상입니다. | +| elevation | `double?` | 이 캐러셀을 배치할 z-좌표입니다. | +| overlayColor | `String?` | 캐러셀 오버레이의 색상입니다. | +| itemSnapping | `bool` | 항목이 제자리에 스냅될지 여부입니다. 기본값은 `false`입니다. | +| shrinkExtent | `double` | 캐러셀을 축소할 양입니다. 기본값은 `0.0`입니다. | +| scrollDirection | `Axis` | 캐러셀이 스크롤되는 축입니다. 기본값은 `Axis.horizontal`입니다. | +| reverse | `bool` | 캐러셀이 역방향으로 스크롤되는지 여부입니다. 기본값은 `false`입니다. | +| onTap | `Map?` | 항목을 탭할 때 호출되는 콜백입니다. | +| enableSplash | `bool` | 탭 시 스플래시 효과를 활성화할지 여부입니다. 기본값은 `true`입니다. | +| itemExtent | `double?` | 캐러셀의 각 항목의 범위입니다. | +| flexWeights | `List?` | 캐러셀 항목의 플렉스 가중치입니다. | +| children | `List>` | 트리에서 이 위젯 아래에 있는 위젯들입니다. | + +## 예제 JSON + +```json +{ + "type": "carouselView", + "carouselType": "weighted", + "padding": 12, + "backgroundColor": "#FFFFFF", + "elevation": 5.0, + "overlayColor": "#FF0000", + "itemSnapping": true, + "shrinkExtent": 0.0, + "scrollDirection": "horizontal", + "reverse": false, + "onTap": { + "type": "callback", + "name": "onItemTap" + }, + "enableSplash": true, + "itemExtent": 300, + "flexWeights": [1, 7, 1], + "children": [ + { + "type": "image", + "height": 400, + "fit": "cover", + "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_1.png" + }, + { + "type": "image", + "height": 400, + "fit": "cover", + "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_2.png" + }, + { + "type": "image", + "height": 400, + "fit": "cover", + "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_3.png" + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/center.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/center.md new file mode 100644 index 00000000..8c061422 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/center.md @@ -0,0 +1,24 @@ +# Center + +Stac Center를 사용하면 JSON을 통해 Flutter center 위젯을 구축할 수 있습니다. +Flutter의 center 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Center-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------|-------------------------|-----------------------------------------------------| +| widthFactor | `double?` | 자식의 너비에 곱할 요소입니다. | +| heightFactor | `double?` | 자식의 높이에 곱할 요소입니다. | +| child | `Map?` | center 안에 표시할 위젯입니다. | + +## 예제 JSON + +```json +{ + "type": "center", + "child": { + "type": "text", + "data": "Hello, World!" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/check_box.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/check_box.md new file mode 100644 index 00000000..1681b6a0 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/check_box.md @@ -0,0 +1,48 @@ +# CheckBox + +Stac CheckBox를 사용하면 JSON을 통해 Flutter CheckBox 위젯을 구축할 수 있습니다. +Flutter의 CheckBox 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/Checkbox-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-----------------------|--------------------------|----------------------------------------------------------------------------------------------------| +| id | `String?` | 체크박스의 식별자입니다. | +| value | `bool?` | 체크박스의 현재 값입니다. | +| tristate | `bool` | 이 체크박스가 삼상 모드인지 여부입니다. 기본값은 `false`입니다. | +| onChanged | `Map?` | 값이 변경될 때 호출되는 콜백입니다. | +| mouseCursor | `StacMouseCursor?` | 마우스 포인터가 체크박스에 진입하거나 호버링할 때의 커서입니다. | +| activeColor | `String?` | 이 체크박스가 체크되었을 때 사용할 색상입니다. | +| fillColor | `StacMaterialColor?` | 체크박스의 채우기에 사용할 색상입니다. | +| checkColor | `String?` | 체크 아이콘에 사용할 색상입니다. | +| focusColor | `String?` | 체크박스의 포커스 색상에 사용할 색상입니다. | +| hoverColor | `String?` | 체크박스의 호버 색상에 사용할 색상입니다. | +| overlayColor | `StacMaterialColor?` | 체크박스의 오버레이 색상에 사용할 색상입니다. | +| splashRadius | `double?` | 체크박스 탭 대상의 스플래시 반경입니다. | +| materialTapTargetSize | `MaterialTapTargetSize?` | 탭 대상의 최소 크기를 구성합니다. | +| autofocus | `bool` | 다른 항목에 포커스가 없는 경우 이 체크박스가 자동으로 포커스를 받을지 여부입니다. 기본값은 `false`입니다. | +| isError | `bool` | 이 체크박스가 오류 상태인지 여부입니다. 기본값은 `false`입니다. | + +## 예제 JSON + +```json +{ + "type": "checkBox", + "id": "checkbox_1", + "value": true, + "tristate": false, + "mouseCursor": "click", + "activeColor": "#FF0000", + "fillColor": { + "type": "materialColor", + "color": "#00FF00" + }, + "checkColor": "#0000FF", + "focusColor": "#FFFF00", + "hoverColor": "#FF00FF", + "splashRadius": 20.0, + "materialTapTargetSize": "padded", + "autofocus": true, + "isError": false +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/chip.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/chip.md new file mode 100644 index 00000000..ec8bfb13 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/chip.md @@ -0,0 +1,106 @@ +# Chip + +Stac Chip을 사용하면 JSON을 통해 Flutter Chip 위젯을 구축할 수 있습니다. +Flutter의 Chip 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/Chip-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------------------------|--------------------------------|------------------------------------------------------------------------------------------------| +| avatar | `Map?` | 칩의 레이블 앞에 표시할 위젯입니다. | +| label | `Map` | 칩의 주요 콘텐츠입니다. | +| labelStyle | `StacTextStyle?` | 레이블에 사용할 스타일입니다. | +| labelPadding | `StacEdgeInsets?` | 레이블 주변의 패딩입니다. | +| deleteIcon | `Map?` | 칩의 삭제 아이콘으로 표시할 위젯입니다. | +| onDeleted | `Map?` | 삭제 아이콘을 탭할 때 호출되는 콜백입니다. | +| deleteIconColor | `String?` | 삭제 아이콘의 색상입니다. | +| deleteButtonTooltipMessage | `String?` | 삭제 아이콘의 툴팁에 표시할 메시지입니다. | +| side | `StacBorderSide?` | 칩 주변에 표시할 테두리입니다. | +| shape | `StacRoundedRectangleBorder?` | 칩 테두리의 모양입니다. | +| clipBehavior | `Clip` | 칩의 클립 동작입니다. 기본값은 `Clip.none`입니다. | +| autofocus | `bool` | 다른 항목에 포커스가 없는 경우 이 칩이 자동으로 포커스를 받을지 여부입니다. 기본값은 `false`입니다. | +| color | `String?` | 칩의 색상입니다. | +| backgroundColor | `String?` | 칩의 배경 색상입니다. | +| padding | `StacEdgeInsets?` | 칩 주변의 패딩입니다. | +| visualDensity | `StacVisualDensity?` | 칩의 시각적 밀도입니다. | +| materialTapTargetSize | `MaterialTapTargetSize?` | 탭 대상의 최소 크기를 구성합니다. | +| elevation | `double?` | 칩의 높이입니다. | +| shadowColor | `String?` | 칩 그림자의 색상입니다. | +| surfaceTintColor | `String?` | 칩 표면 틴트의 색상입니다. | +| iconTheme | `StacIconThemeData?` | 칩 내 아이콘의 테마입니다. | +| avatarBoxConstraints | `StacBoxConstraints?` | 아바타의 제약 조건입니다. | +| deleteIconBoxConstraints | `StacBoxConstraints?` | 삭제 아이콘의 제약 조건입니다. | + +## 예제 JSON + +```json +{ + "type": "chip", + "avatar": { + "type": "circleAvatar", + "backgroundColor": "#FF0000", + "child": { + "type": "text", + "data": "A" + } + }, + "label": { + "type": "text", + "data": "Chip Label" + }, + "labelStyle": { + "color": "#000000", + "fontSize": 14 + }, + "labelPadding": { + "left": 8, + "top": 4, + "right": 8, + "bottom": 4 + }, + "deleteIcon": { + "type": "icon", + "icon": "delete" + }, + "deleteIconColor": "#FF0000", + "deleteButtonTooltipMessage": "Delete", + "side": { + "color": "#000000", + "width": 1.0 + }, + "shape": { + "type": "roundedRectangle", + "borderRadius": 8.0 + }, + "clipBehavior": "antiAlias", + "autofocus": false, + "color": "#FFFFFF", + "backgroundColor": "#EEEEEE", + "padding": { + "left": 8, + "top": 4, + "right": 8, + "bottom": 4 + }, + "visualDensity": { + "horizontal": 0.0, + "vertical": 0.0 + }, + "materialTapTargetSize": "padded", + "elevation": 2.0, + "shadowColor": "#000000", + "surfaceTintColor": "#FFFFFF", + "iconTheme": { + "color": "#000000", + "size": 24.0 + }, + "avatarBoxConstraints": { + "minWidth": 24.0, + "minHeight": 24.0 + }, + "deleteIconBoxConstraints": { + "minWidth": 24.0, + "minHeight": 24.0 + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/circle_avatar.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/circle_avatar.md new file mode 100644 index 00000000..8bd6ac55 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/circle_avatar.md @@ -0,0 +1,35 @@ +# CircleAvatar + +Stac CircleAvatar를 사용하면 JSON을 통해 Flutter circle avatar 위젯을 구축할 수 있습니다. +Flutter의 circle avatar 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/CircleAvatar-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------------------|-------------------------|-----------------------------------------------------------------------------| +| child | `Map?` | circle avatar 안에 표시할 위젯입니다. | +| backgroundColor | `String?` | circle avatar의 배경 색상입니다. | +| backgroundImage | `String?` | circle avatar의 배경 이미지입니다. | +| foregroundImage | `String?` | circle avatar의 전경 이미지입니다. | +| onBackgroundImageError | `Map?` | 배경 이미지 로드에 실패한 경우 표시할 오류 위젯입니다. | +| onForegroundImageError | `Map?` | 전경 이미지 로드에 실패한 경우 표시할 오류 위젯입니다. | +| foregroundColor | `String?` | circle avatar의 전경 요소 색상입니다. | +| radius | `double?` | circle avatar의 반경입니다. | +| minRadius | `double?` | circle avatar의 최소 반경입니다. | +| maxRadius | `double?` | circle avatar의 최대 반경입니다. | + +## 예제 JSON + +```json +{ + "type": "circleAvatar", + "backgroundColor": "#FF0000", + "foregroundColor": "#FFFFFF", + "backgroundImage": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/companies/bettrdo.jpg", + "radius": 50, + "child": { + "type": "text", + "data": "A" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/circular_progress_indicator.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/circular_progress_indicator.md new file mode 100644 index 00000000..fa16f74b --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/circular_progress_indicator.md @@ -0,0 +1,30 @@ +# CircularProgressIndicator + +Stac circularProgressIndicator를 사용하면 JSON을 통해 Flutter CircularProgressIndicator 위젯을 구축할 수 있습니다. +Flutter의 CircularProgressIndicator 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-----------------|-------------|--------------------------------------------------------------------| +| value | `double` | 이 진행 표시기의 진행률입니다. | +| backgroundColor | `String` | 진행 표시기로 채워지는 트랙의 16진수 색상입니다. | +| color | `String` | 진행 표시기의 16진수 색상입니다. | +| strokeWidth | `double` | 진행 표시기의 너비입니다. | +| strokeAlign | `double` | 진행 표시기에서 획의 상대 위치입니다. | +| semanticsLabel | `String` | 위젯의 텍스트 설명을 제공합니다. | +| semanticsValue | `String` | 위젯의 텍스트 설명을 제공합니다. | +| strokeCap | `StrokeCap` | 진행 표시기의 선 끝 부분입니다. | + + +## 예제 JSON + +```json +{ + "type": "circularProgressIndicator", + "color": "#541204", + "strokeWidth": 6, + "backgroundColor": "#FFD700", + "strokeCap": "round" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/clip_oval.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/clip_oval.md new file mode 100644 index 00000000..2cd8a830 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/clip_oval.md @@ -0,0 +1,28 @@ +# ClipOval + +Stac ClipOval을 사용하면 JSON을 통해 Flutter ClipOval 위젯을 구축할 수 있습니다. 이 위젯은 타원형 모양을 사용하여 자식을 클리핑하며, 원형 또는 타원형 UI 요소를 만드는 데 유용합니다. +Flutter의 ClipOval 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/ClipOval-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Default | Description | +|--------------|------------------------|-------------|-------------------------------------------------------------| +| clipBehavior | `Clip` | `antiAlias` | 콘텐츠가 타원을 벗어날 때의 클리핑 동작입니다. | +| child | `Map` | Required | 타원형 모양으로 클리핑할 위젯입니다. | + + +## 예제 JSON + +```json +{ + "type": "clipOval", + "clipBehavior": "antiAlias", + "child": { + "type": "image", + "src": "https://placehold.co/600x400", + "width": 200, + "height": 200, + "fit": "cover" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/clip_rrect.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/clip_rrect.md new file mode 100644 index 00000000..1f6990f9 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/clip_rrect.md @@ -0,0 +1,149 @@ +# ClipRRect + +Stac의 `ClipRRect` widget을 사용하면 둥근 직사각형을 사용하여 자식을 클리핑할 수 있습니다. 이는 둥근 모서리가 있는 UI 요소를 만들고자 할 때 유용합니다. + +## 사용법 + +```json +{ + "type": "clipRRect", + "borderRadius": 8.0, + "clipBehavior": "antiAlias", + "child": { + "type": "container", + "color": "#FF0000", + "height": 100, + "width": 100 + } +} +``` + +## 속성 + +| 속성 | 타입 | 기본값 | 설명 | +|----------|------|---------|-------------| +| `borderRadius` | `StacBorderRadius` | `StacBorderRadius()` (모든 모서리 0) | 둥근 모서리의 border radius입니다. 단일 값, 4개 값의 목록 또는 개별 모서리 값이 있는 객체로 지정할 수 있습니다. | +| `clipBehavior` | `Clip` | `antiAlias` | 콘텐츠가 둥근 직사각형을 벗어날 때의 클리핑 동작입니다. | +| `child` | `Widget` | 필수 | 둥근 모서리로 클리핑할 widget입니다. | + +## BorderRadius 형식 옵션 + +`borderRadius` 속성은 여러 형식으로 지정할 수 있습니다: + +### 단일 값 (모든 모서리에 적용) + +```json +{ + "type": "clipRRect", + "borderRadius": 8.0, + "child": { ... } +} +``` + +### 목록 형식 (topLeft, topRight, bottomLeft, bottomRight) + +```json +{ + "type": "clipRRect", + "borderRadius": [8.0, 16.0, 8.0, 16.0], + "child": { ... } +} +``` + +### 객체 형식 (각 모서리를 개별적으로 지정) + +```json +{ + "type": "clipRRect", + "borderRadius": { + "topLeft": 8.0, + "topRight": 16.0, + "bottomLeft": 8.0, + "bottomRight": 16.0 + }, + "child": { ... } +} +``` + +## Clip Behavior 옵션 + +`clipBehavior` 속성은 다음 값을 허용합니다: + +- `"antiAlias"` (기본값): 더 부드러운 가장자리를 위해 안티 앨리어싱을 사용하여 클리핑합니다 +- `"hardEdge"`: 더 날카로운 가장자리를 위해 안티 앨리어싱 없이 클리핑합니다 +- `"antiAliasWithSaveLayer"`: 오프스크린 버퍼를 사용한 안티 앨리어싱 클리핑입니다 (더 높은 품질이지만 느림) +- `"none"`: 클리핑 없음 (ClipRRect에는 권장하지 않음) + +## 예제 JSON + +### 기본 둥근 Container + +```json +{ + "type": "clipRRect", + "borderRadius": 12.0, + "child": { + "type": "container", + "color": "#2196F3", + "height": 100, + "width": 200 + } +} +``` + +### 둥근 Image + +```json +{ + "type": "clipRRect", + "borderRadius": 8.0, + "child": { + "type": "image", + "src": "https://example.com/image.jpg", + "width": 200, + "height": 200, + "fit": "cover" + } +} +``` + +### 다른 모서리 반경을 가진 Card + +```json +{ + "type": "clipRRect", + "borderRadius": { + "topLeft": 20.0, + "topRight": 20.0, + "bottomLeft": 0.0, + "bottomRight": 0.0 + }, + "child": { + "type": "container", + "color": "#FFFFFF", + "padding": 16.0, + "child": { + "type": "column", + "children": [ + { + "type": "text", + "data": "Card Title", + "style": { + "fontSize": 18.0, + "fontWeight": "bold" + } + }, + { + "type": "text", + "data": "Card content goes here" + } + ] + } + } +} +``` + +## 관련 Widget + +- [Container](container.md) - ClipRRect의 자식으로 자주 사용됩니다 +- [Card](card.md) - elevation과 둥근 모서리가 있는 미리 스타일이 지정된 container입니다 diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/colored_box.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/colored_box.md new file mode 100644 index 00000000..bb5a06ca --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/colored_box.md @@ -0,0 +1,24 @@ +# ColoredBox + +Stac Colored Box를 사용하면 JSON을 통해 Flutter colored box 위젯을 구축할 수 있습니다. +Flutter의 colored box 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/ColoredBox-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------|-------------------------|--------------------------------------------------| +| color | `String` | 박스의 배경을 칠할 색상입니다. | +| child | `Map?` | colored box 안에 표시할 위젯입니다. | + +## 예제 JSON + +```json +{ + "type": "coloredBox", + "color": "#FF0000", + "child": { + "type": "text", + "data": "Hello, World!" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/column.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/column.md new file mode 100644 index 00000000..39011d8b --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/column.md @@ -0,0 +1,42 @@ +# Column + +Stac Column을 사용하면 JSON을 사용하여 Flutter column 위젯을 빌드할 수 있습니다. +Flutter의 column 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/Column-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|--------------------|------------------------------|-----------------------------------------------------------------------------------| +| mainAxisAlignment | `MainAxisAlignment` | 자식 요소들이 주축을 따라 배치되는 방식. 기본값은 `MainAxisAlignment.start`. | +| crossAxisAlignment | `CrossAxisAlignment` | 자식 요소들이 교차축을 따라 배치되는 방식. 기본값은 `CrossAxisAlignment.center`. | +| mainAxisSize | `MainAxisSize` | 주축에서 차지할 공간의 크기. 기본값은 `MainAxisSize.max`. | +| textDirection | `TextDirection?` | 정렬을 해결하는 데 사용할 텍스트 방향. | +| verticalDirection | `VerticalDirection` | 자식 요소들을 배치하는 데 사용할 수직 방향. 기본값은 `VerticalDirection.down`. | +| spacing | `double` | 자식 요소들 간의 간격. 기본값은 `0`. | +| children | `List>` | column 내에 표시할 위젯 목록. 기본값은 빈 목록. | + +## 예제 JSON + +```json +{ + "type": "column", + "mainAxisAlignment": "center", + "crossAxisAlignment": "start", + "mainAxisSize": "min", + "textDirection": "ltr", + "verticalDirection": "up", + "spacing": 10, + "children": [ + { + "type": "text", + "data": "Hello, World!" + }, + { + "type": "container", + "width": 100, + "height": 100, + "color": "#FF0000" + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/container.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/container.md new file mode 100644 index 00000000..42fa6e38 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/container.md @@ -0,0 +1,56 @@ +# Container + +Stac container를 사용하면 JSON을 사용하여 Flutter container widget을 구축할 수 있습니다. +Flutter의 container widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/Container-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------------------|------------------------|---------------------------------------------------| +| alignment | `StacAlignment` | Container 내에서 child의 정렬 방식입니다. | +| padding | `StacEdgeInsets` | Child 주위에 적용할 padding입니다. | +| decoration | `StacBoxDecoration` | Child 뒤에 그릴 decoration입니다. | +| foregroundDecoration | `StacBoxDecoration` | Child 앞에 그릴 decoration입니다. | +| color | `String` | Child 뒤에 그릴 hex color입니다. | +| width | `double` | Container의 너비입니다. | +| height | `double` | Container의 높이입니다. | +| constraints | `StacBoxConstraints` | Container에 적용할 추가 constraints입니다. | +| margin | `StacEdgeInsets` | Container 주위에 적용할 margin입니다. | +| child | `Map` | Container의 child widget입니다. | +| clipBehavior | `Clip` | Container의 clip 동작 방식입니다. | + + +## 예제 JSON + +```json +{ + "type": "container", + "alignment": "center", + "padding": { + "top": 16.0, + "bottom": 16.0, + "left": 16.0, + "right": 16.0 + }, + "decoration": { + "color": "#FF5733", + "borderRadius": { + "topLeft": 16.0, + "topRight": 16.0, + "bottomLeft": 16.0, + "bottomRight": 16.0 + } + }, + "width": 200.0, + "height": 200.0, + "child": { + "type": "text", + "data": "Hello, World!", + "style": { + "color": "#FFFFFF", + "fontSize": 24.0 + } + } +} +``` + diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/custom_scroll_view.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/custom_scroll_view.md new file mode 100644 index 00000000..8cc436ce --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/custom_scroll_view.md @@ -0,0 +1,47 @@ +# CustomScrollView + +Stac CustomScrollView를 사용하면 JSON을 통해 Flutter CustomScrollView widget을 구성할 수 있습니다. +Flutter의 CustomScrollView widget에 대한 자세한 내용은 +[공식 문서](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|-------------------------|-------------------------------------|----------------------------------------------------------------------------------------------------------| +| slivers | `List>` | viewport 내부에 배치할 sliver들입니다. | +| scrollDirection | `Axis` | scroll view가 스크롤되는 축입니다. 기본값은 `Axis.vertical`입니다. | +| reverse | `bool` | scroll view가 역방향으로 스크롤되는지 여부입니다. 기본값은 `false`입니다. | +| padding | `StacEdgeInsets?` | child를 삽입할 공간의 양입니다. | +| primary | `bool?` | 이것이 부모와 연결된 기본 scroll view인지 여부입니다. | +| physics | `StacScrollPhysics?` | scroll view가 사용자 입력에 어떻게 반응해야 하는지를 정의합니다. | +| dragStartBehavior | `DragStartBehavior` | drag 시작 동작이 처리되는 방식을 결정합니다. 기본값은 `DragStartBehavior.start`입니다. | +| clipBehavior | `Clip` | 이 옵션에 따라 콘텐츠가 잘립니다(또는 잘리지 않습니다). 기본값은 `Clip.hardEdge`입니다. | +| restorationId | `String?` | scroll view의 상태를 저장하고 복원하기 위한 복원 ID입니다. | +| keyboardDismissBehavior | `ScrollViewKeyboardDismissBehavior` | scroll view가 키보드를 해제하는 방법을 구성합니다. 기본값은 `ScrollViewKeyboardDismissBehavior.manual`입니다. | + +## 예제 JSON + +```json +{ + "type": "customScrollView", + "slivers": [ + { + "type": "sliverAppBar", + "title": { + "type": "text", + "data": "SliverAppBar" + }, + "leading": { + "type": "iconButton", + "icon": { + "type": "icon", + "iconType": "material", + "icon": "menu" + }, + "onPressed": {} + }, + "backgroundColor": "primary" + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/drawer.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/drawer.md new file mode 100644 index 00000000..63e55da1 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/drawer.md @@ -0,0 +1,54 @@ +# Drawer + +Stac Drawer를 사용하면 JSON을 이용하여 Flutter Drawer widget을 구성할 수 있습니다. +Flutter의 Drawer widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/Drawer-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|------------------|---------------------|--------------------------------------------------------------------| +| backgroundColor | `String?` | drawer의 배경색입니다. | +| elevation | `double?` | drawer를 배치할 z-coordinate입니다. | +| shadowColor | `String?` | drawer 그림자의 색상입니다. | +| surfaceTintColor | `String?` | drawer의 surface tint 색상입니다. | +| shape | `StacShapeBorder?` | drawer의 모양입니다. | +| width | `double?` | drawer의 너비입니다. | +| child | `Map?` | 트리에서 이 widget 아래에 있는 widget입니다. | +| semanticLabel | `String?` | drawer의 semantic label입니다. | +| clipBehavior | `Clip?` | drawer의 clip 동작입니다. | + +## 예제 JSON + +```json +{ + "type": "drawer", + "backgroundColor": "#FFFFFF", + "elevation": 16.0, + "shadowColor": "#000000", + "surfaceTintColor": "#F2F2F2", + "shape": { + "type": "roundedRectangleBorder", + "borderRadius": 16 + }, + "width": 304.0, + "semanticLabel": "Navigation Drawer", + "clipBehavior": "antiAlias", + "child": { + "type": "column", + "children": [ + { + "type": "text", + "data": "Drawer Header" + }, + { + "type": "text", + "data": "Item 1" + }, + { + "type": "text", + "data": "Item 2" + } + ] + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/dropdown_menu.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/dropdown_menu.md new file mode 100644 index 00000000..766805e3 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/dropdown_menu.md @@ -0,0 +1,82 @@ +# DropdownMenu + +Stac DropdownMenu를 사용하면 JSON을 통해 Flutter DropdownMenu widget을 구성할 수 있습니다. +Flutter의 DropdownMenu widget에 대한 자세한 내용은 +[공식 문서](https://api.flutter.dev/flutter/material/DropdownMenu-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|----------------------|----------------------------------|--------------------------------------------------------| +| dropdownMenuEntries | `List` | dropdown menu에 표시할 항목들입니다. | +| initialSelection | `dynamic` | 초기 선택 값입니다. | +| enabled | `bool` | dropdown menu가 활성화되어 있는지 여부입니다. 기본값은 `true`입니다. | +| label | `Map?` | dropdown menu에 표시할 label입니다. | +| leadingIcon | `Map?` | dropdown menu의 시작 부분에 표시할 아이콘입니다. | +| trailingIcon | `Map?` | dropdown menu의 끝 부분에 표시할 아이콘입니다. | +| hintText | `String?` | 선택되지 않았을 때 표시할 힌트 텍스트입니다. | +| errorText | `String?` | 오류가 있을 때 표시할 오류 텍스트입니다. | +| width | `double?` | dropdown menu의 너비입니다. | +| menuHeight | `double?` | dropdown menu의 높이입니다. | +| inputDecorationTheme | `StacInputDecorationTheme?` | input decoration에 사용할 테마입니다. | +| textStyle | `StacTextStyle?` | dropdown menu에 사용할 텍스트 스타일입니다. | +| enableFilter | `bool` | 필터링을 활성화할지 여부입니다. 기본값은 `true`입니다. | +| enableSearch | `bool` | 검색을 활성화할지 여부입니다. 기본값은 `true`입니다. | +| requestFocusOnTap | `bool` | 탭할 때 포커스를 요청할지 여부입니다. 기본값은 `true`입니다. | + +# DropdownMenuEntry + +Stac DropdownMenuEntry를 사용하면 JSON을 통해 Flutter DropdownMenuEntry widget을 구성할 수 있습니다. +Flutter의 DropdownMenuEntry widget에 대한 자세한 내용은 +[공식 문서](https://api.flutter.dev/flutter/material/DropdownMenuEntry-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|--------------|--------------------------|----------------------------------------------------------| +| value | `dynamic` | 이 항목과 연결된 값입니다. | +| label | `String` | 이 항목에 표시할 label입니다. | +| enabled | `bool` | 이 항목이 활성화되어 있는지 여부입니다. 기본값은 `true`입니다. | +| leadingIcon | `Map?` | 이 항목의 시작 부분에 표시할 아이콘입니다. | +| trailingIcon | `Map?` | 이 항목의 끝 부분에 표시할 아이콘입니다. | +| style | `StacButtonStyle?` | 이 항목에 사용할 스타일입니다. | + +## 예제 JSON + +```json +{ + "type": "dropdownMenu", + "label": { + "type": "text", + "data": "Select an option" + }, + "hintText": "Please select", + "width": 200, + "dropdownMenuEntries": [ + { + "value": "option1", + "label": "Option 1", + "leadingIcon": { + "type": "icon", + "iconData": "home" + } + }, + { + "value": "option2", + "label": "Option 2", + "leadingIcon": { + "type": "icon", + "iconData": "settings" + } + }, + { + "value": "option3", + "label": "Option 3", + "leadingIcon": { + "type": "icon", + "iconData": "favorite" + } + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/dynamic_view.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/dynamic_view.md new file mode 100644 index 00000000..fb47925f --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/dynamic_view.md @@ -0,0 +1,419 @@ +# Dynamic View + +## 개요 + +`dynamicView` widget을 사용하면 API에서 데이터를 가져와서 템플릿을 사용하여 렌더링할 수 있습니다. 이 강력한 기능은 원격 데이터 소스를 기반으로 동적 콘텐츠 렌더링을 가능하게 하므로, 커스텀 코드를 작성하지 않고도 데이터 기반 UI를 만들기에 완벽합니다. + +## 기능 + +- 모든 REST API 엔드포인트에서 데이터 가져오기 +- placeholder 구문을 사용하여 템플릿에 데이터 적용 +- 점 표기법과 배열 인덱싱을 사용하여 중첩된 데이터 추출 +- 단일 객체와 데이터 목록 모두 처리 +- itemTemplate 기능을 사용하여 항목 목록 렌더링 +- 로딩 및 오류 상태 사용자 정의 +- 복잡한 API 응답 내에서 특정 데이터 경로 타겟팅 + +## 속성 + +| Property | Type | 필수 여부 | Description | +| ------------- | ---------------------- | --------- | ----------------------------------------------------------- | +| request | `StacNetworkRequest` | 예 | API 요청 구성 (url, method, headers 등) | +| template | `Map` | 예 | API 응답의 데이터로 렌더링할 템플릿 | +| targetPath | `String` | 아니오 | API 응답에서 특정 데이터를 추출할 경로 | +| resultTarget | `String` | 아니오 | 템플릿에 데이터를 적용할 때 사용할 키 이름 | +| loaderWidget | `Map` | 아니오 | 데이터를 로딩하는 동안 표시할 커스텀 widget | +| errorWidget | `Map` | 아니오 | 오류가 발생했을 때 표시할 커스텀 widget | +| itemTemplate | `Map` | 아니오 | API 응답의 항목 목록에서 각 항목을 렌더링할 템플릿 | +| emptyTemplate | `Map` | 아니오 | API 응답에 빈 목록이 포함된 경우 렌더링할 템플릿 | + +## 기본 사용법 + +```json +{ + "type": "dynamicView", + "request": { + "url": "https://api.example.com/user/1", + "method": "get" + }, + "template": { + "type": "text", + "data": "Hello, {{name}}!" + } +} +``` + +## 데이터 Placeholder + +이중 중괄호 `{{placeholder}}`를 사용하여 API 응답의 데이터를 템플릿에 삽입합니다: + +- 중첩된 데이터의 경우 점 표기법을 사용합니다: `{{user.address.city}}` +- 배열 요소의 경우 인덱스 표기법을 사용합니다: `{{users[0].name}}` 또는 결합된 경로: `{{items.0.title}}` +- 객체 내의 배열 요소의 경우 결합된 표기법을 사용합니다: `{{data.users[2].profile.name}}` + +## 예제 + +### 로딩 및 오류 상태가 있는 사용자 프로필 예제 + +```json +{ + "type": "dynamicView", + "request": { + "url": "https://dummyjson.com/users/1", + "method": "get" + }, + "loaderWidget": { + "type": "center", + "child": { + "type": "column", + "children": [ + { + "type": "text", + "data": "Loading..." + }, + { + "type": "circularProgressIndicator" + } + ] + } + }, + "errorWidget": { + "type": "center", + "child": { + "type": "text", + "data": "Error fetching user profile" + } + }, + "template": { + "type": "column", + "children": [ + { + "type": "container", + "padding": 16, + "child": { + "type": "column", + "crossAxisAlignment": "start", + "children": [ + { + "type": "image", + "src": "{{image}}", + "width": 100, + "height": 100 + }, + { + "type": "text", + "style": { + "fontSize": 24, + "fontWeight": "w700" + }, + "data": "{{firstName}} {{lastName}}" + }, + { + "type": "sizedBox", + "height": 8 + }, + { + "type": "text", + "style": { + "fontSize": 16, + "color": "#666666" + }, + "data": "Email: {{email}}" + }, + { + "type": "text", + "style": { + "fontSize": 16, + "color": "#666666" + }, + "data": "Phone: {{phone}}" + } + ] + } + } + ] + } +} +``` + +### itemTemplate을 사용한 목록 예제 + +API가 항목 목록을 반환할 때, `itemTemplate` 속성을 사용하여 각 항목을 어떻게 렌더링할지 정의합니다: + +```json +{ + "type": "dynamicView", + "request": { + "url": "https://dummyjson.com/users", + "method": "get" + }, + "targetPath": "users", + "template": { + "type": "listView", + "itemTemplate": { + "type": "listTile", + "title": { + "type": "text", + "data": "{{firstName}} {{lastName}}" + }, + "subtitle": { + "type": "text", + "data": "{{email}}" + }, + "leading": { + "type": "circleAvatar", + "backgroundImage": "{{image}}" + } + } + } +} +``` + +### 빈 상태 처리 + +API가 빈 목록을 반환할 때 사용자 친화적인 메시지를 표시하려면 `emptyTemplate` 속성을 사용합니다: + +```json +{ + "type": "dynamicView", + "request": { + "url": "https://api.example.com/products", + "method": "get" + }, + "targetPath": "products", + "template": { + "type": "gridView", + "crossAxisCount": 2, + "itemTemplate": { + "type": "card", + "child": { + "type": "column", + "children": [ + { + "type": "image", + "src": "{{image_url}}" + }, + { + "type": "text", + "data": "{{name}}" + }, + { + "type": "text", + "data": "${{price}}" + } + ] + } + } + }, + "emptyTemplate": { + "type": "center", + "child": { + "type": "column", + "mainAxisSize": "min", + "children": [ + { + "type": "icon", + "icon": "shopping_cart", + "size": 64, + "color": "#9E9E9E" + }, + { + "type": "container", + "height": 16 + }, + { + "type": "text", + "data": "No products available", + "style": { + "fontSize": 18, + "fontWeight": "bold", + "color": "#424242" + } + }, + { + "type": "container", + "height": 8 + }, + { + "type": "text", + "data": "Check back later for new products!", + "style": { + "fontSize": 14, + "color": "#757575" + } + }, + { + "type": "container", + "height": 24 + }, + { + "type": "elevatedButton", + "child": { + "type": "text", + "data": "Refresh" + }, + "onPressed": { + "actionType": "navigate", + "route": "/refresh" + } + } + ] + } + } +} +``` + +## Empty Template 동작 + +`emptyTemplate`은 다음과 같은 경우에 자동으로 트리거됩니다: + +1. **직접 빈 배열**: API 응답이 빈 배열 `[]`인 경우 +2. **타겟 경로의 빈 배열**: 지정된 `targetPath`의 데이터가 빈 배열인 경우 +3. **중첩된 데이터의 빈 배열**: API 응답이 중첩된 객체 내에 빈 배열을 포함하는 경우 + +### Empty Template을 트리거하는 API 응답 예제 + +#### 시나리오 1: 직접 빈 배열 + +```json +[] +``` + +#### 시나리오 2: 타겟 경로의 빈 배열 + +```json +{ + "success": true, + "data": [], + "message": "No results found" +} +``` + +#### 시나리오 3: 중첩된 구조의 빈 배열 + +```json +{ + "response": { + "users": [], + "total": 0 + } +} +``` + +## 고급 사용법 + +### 중첩된 데이터 추출 + +`targetPath` 속성을 사용하여 복잡한 API 응답에서 특정 데이터를 추출합니다: + +```json +{ + "type": "dynamicView", + "request": { + "url": "https://api.example.com/data", + "method": "get" + }, + "targetPath": "response.data.items", + "template": { + "type": "column", + "children": [ + { + "type": "text", + "data": "Items loaded: {{length}}" + } + ] + } +} +``` + +### resultTarget 사용 + +`resultTarget` 속성을 사용하면 템플릿에 데이터를 적용할 때 사용할 키 이름을 지정할 수 있습니다. 이는 템플릿에서 특정 이름으로 데이터를 참조하고자 할 때 유용합니다: + +```json +{ + "type": "dynamicView", + "request": { + "url": "https://api.example.com/products", + "method": "get" + }, + "targetPath": "data.featured", + "resultTarget": "product", + "template": { + "type": "card", + "child": { + "type": "column", + "children": [ + { + "type": "text", + "data": "{{product.name}}" + }, + { + "type": "text", + "data": "Price: ${{product.price}}" + } + ] + } + } +} +``` + +### 커스텀 헤더 + +API 요청에 커스텀 헤더를 추가합니다: + +```json +{ + "type": "dynamicView", + "request": { + "url": "https://api.example.com/protected-resource", + "method": "get", + "headers": { + "Authorization": "Bearer your-token-here", + "Content-Type": "application/json" + } + }, + "template": { + "type": "text", + "data": "Data loaded successfully!" + } +} +``` + +### targetPath에서 배열 인덱싱 + +targetPath에서 특정 배열 요소에 액세스할 수 있습니다: + +```json +{ + "type": "dynamicView", + "request": { + "url": "https://api.example.com/posts", + "method": "get" + }, + "targetPath": "data.posts[0]", + "template": { + "type": "text", + "data": "Featured Post: {{title}}" + } +} +``` + +## 모범 사례 + +1. 복잡한 API 응답에서 필요한 데이터만 추출하려면 `targetPath`를 사용하세요 +2. 목록 데이터의 경우 각 항목을 어떻게 렌더링할지 정의하기 위해 항상 `itemTemplate` 속성을 사용하세요 +3. **빈 API 응답을 우아하게 처리하기 위해 목록 기반 뷰에 항상 `emptyTemplate`을 제공하세요** +4. 정보를 제공하고 실행 가능한 빈 상태를 디자인하세요 - 명확한 메시징과 새로고침 버튼과 같은 관련 작업을 포함하세요 +5. 가능한 경우 템플릿을 모듈화하고 재사용 가능하게 유지하세요 +6. API 요청이 실패한 경우를 위해 UI 디자인에서 적절한 오류 처리를 사용하세요 +7. 빈 상태의 경우 앱의 디자인 시스템과 일치하는 적절한 아이콘과 색상을 사용하세요 +8. 더 나은 사용자 경험을 위해 커스텀 `loaderWidget`과 `errorWidget`을 제공하세요 +9. 템플릿에서 특정 이름으로 데이터를 참조해야 할 때 `resultTarget`을 사용하세요 + +## 제한 사항 + +- API 엔드포인트는 JSON 데이터를 반환해야 합니다 +- 매우 큰 데이터셋의 경우 성능 문제를 피하기 위해 페이지네이션을 고려하거나 항목 수를 제한하세요 +- 복잡한 데이터 변환은 템플릿 시스템 외부의 커스텀 코드가 필요할 수 있습니다 +- placeholder 구문의 중첩된 배열 액세스는 예제에 표시된 형식으로 제한됩니다 diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/elevated_button.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/elevated_button.md new file mode 100644 index 00000000..98600e0e --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/elevated_button.md @@ -0,0 +1,39 @@ +# ElevatedButton + +Stac Elevated Button을 사용하면 JSON을 사용하여 Flutter elevated button widget을 빌드할 수 있습니다. +Flutter의 elevated button widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/ElevatedButton-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|---------------|-------------------------|---------------------------------------------------------------| +| onPressed | `Map?` | 버튼을 탭할 때 호출되는 callback입니다. | +| onLongPress | `Map?` | 버튼을 길게 누를 때 호출되는 callback입니다. | +| onHover | `Map?` | 버튼 위에 마우스를 올릴 때 호출되는 callback입니다. | +| onFocusChange | `Map?` | 버튼의 focus가 변경될 때 호출되는 callback입니다. | +| style | `StacButtonStyle?` | 버튼에 적용할 style입니다. | +| autofocus | `bool` | 페이지가 로드될 때 버튼에 focus를 맞출지 여부입니다. 기본값은 `false`입니다. | +| clipBehavior | `Clip` | 콘텐츠를 자르는 방법을 결정합니다. 기본값은 `Clip.none`입니다. | +| child | `Map` | 버튼 내부에 표시할 widget입니다. | + +## 예제 JSON + +```json +{ + "type": "elevatedButton", + "onPressed": {}, + "onLongPress": {}, + "onHover": {}, + "onFocusChange": {}, + "style": { + "backgroundColor": "primary", + "foregroundColor": "#FFFFFF" + }, + "autofocus": false, + "clipBehavior": "none", + "child": { + "type": "text", + "data": "Click Me!" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/expanded.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/expanded.md new file mode 100644 index 00000000..88f778a9 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/expanded.md @@ -0,0 +1,24 @@ +# Expanded + +Stac Expanded를 사용하면 JSON을 통해 Flutter expanded widget을 구성할 수 있습니다. +Flutter의 expanded widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/Expanded-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------|-------------------------|------------------------------------------------------------| +| flex | `int` | expanded widget에 사용할 flex 인수입니다. 기본값은 `1`입니다. | +| child | `Map?` | expanded widget 내부에 표시할 widget입니다. | + +## 예제 JSON + +```json +{ + "type": "expanded", + "flex": 2, + "child": { + "type": "text", + "data": "Hello, World!" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/filled_button.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/filled_button.md new file mode 100644 index 00000000..689a230e --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/filled_button.md @@ -0,0 +1,39 @@ +# FilledButton + +Stac Filled Button을 사용하면 JSON을 통해 Flutter filled button widget을 구성할 수 있습니다. +Flutter의 filled button widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/FilledButton-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|---------------|--------------------------|--------------------------------------------------------------------------| +| onPressed | `Map?` | 버튼을 탭할 때 호출되는 콜백입니다. | +| onLongPress | `Map?` | 버튼을 길게 누를 때 호출되는 콜백입니다. | +| onHover | `Map?` | 버튼 위에 마우스를 올릴 때 호출되는 콜백입니다. | +| onFocusChange | `Map?` | 버튼의 포커스가 변경될 때 호출되는 콜백입니다. | +| style | `StacButtonStyle?` | 버튼에 적용할 스타일입니다. | +| autofocus | `bool` | 페이지가 로드될 때 버튼이 포커스를 받아야 하는지 여부입니다. 기본값은 `false`입니다. | +| clipBehavior | `Clip` | 콘텐츠를 자르는 방법을 결정합니다. 기본값은 `Clip.none`입니다. | +| child | `Map` | 버튼 내부에 표시할 widget입니다. | + +## 예제 JSON + +```json +{ + "type": "filledButton", + "onPressed": {}, + "onLongPress": {}, + "onHover": {}, + "onFocusChange": {}, + "style": { + "backgroundColor": "#FFC107", + "foregroundColor": "#000000" + }, + "autofocus": false, + "clipBehavior": "none", + "child": { + "type": "text", + "data": "Click Me!" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/fitted_box.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/fitted_box.md new file mode 100644 index 00000000..72925489 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/fitted_box.md @@ -0,0 +1,35 @@ +# FittedBox + +Stac FittedBox를 사용하면 JSON을 통해 Flutter FittedBox widget을 구성할 수 있습니다. +Flutter의 FittedBox widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/FittedBox-class.html)를 참조하세요. + +--- + +## 속성 + +| 속성 | 타입 | 설명 | +|----------------|-----------------------------|---------------------------------------------------------------------------| +| `fit` | `BoxFit` | child가 박스 내에 어떻게 맞춰져야 하는지를 정의합니다. 기본값은 `BoxFit.contain`입니다. | +| `alignment` | `StacAlignmentDirectional` | 박스 내에서 child를 정렬합니다. 기본값은 `StacAlignmentDirectional.center`입니다. | +| `clipBehavior` | `Clip` | 콘텐츠를 자를지 여부와 방법을 지정합니다. 기본값은 `Clip.none`입니다. | +| `child` | `Map?` | 위치 지정 및 크기 조정될 child widget으로, JSON 객체로 표현됩니다. | + +--- + +## 예제 JSON + +```json +{ + "type": "fittedBox", + "fit": "contain", + "alignment": "center", + "child": { + "type": "text", + "data": "Hello, World!", + "style": { + "fontSize": 20, + "color": "#000000" + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/flexible.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/flexible.md new file mode 100644 index 00000000..e555eb4c --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/flexible.md @@ -0,0 +1,26 @@ +# Flexible + +Stac Flexible을 사용하면 JSON을 사용하여 Flutter flexible widget을 빌드할 수 있습니다. +Flutter의 flexible widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/Flexible-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|----------|-------------------------|------------------------------------------------------------------| +| child | `Map?` | flexible widget 내부에 표시할 widget입니다. | +| flex | `int` | flexible widget에 사용할 flex factor입니다. 기본값은 `1`입니다. | +| fit | `FlexFit` | child가 사용 가능한 공간에 어떻게 배치될지 지정합니다. 기본값은 `FlexFit.loose`입니다. | + +## 예제 JSON + +```json +{ + "type": "flexible", + "flex": 2, + "fit": "tight", + "child": { + "type": "text", + "data": "Hello, World!" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/floating_action_button.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/floating_action_button.md new file mode 100644 index 00000000..9afd4f22 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/floating_action_button.md @@ -0,0 +1,71 @@ +# FloatingActionButton + +Stac Floating Action Button을 사용하면 JSON을 사용하여 Flutter floating action button widget을 빌드할 수 있습니다. +Flutter의 floating action button widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------------------|----------------------------|----------------------------------------------------------------| +| onPressed | `Map?` | 버튼을 탭했을 때 호출되는 callback입니다. | +| textStyle | `StacTextStyle?` | 버튼의 label에 적용할 text style입니다. | +| buttonType | `FloatingActionButtonType` | floating action button의 타입입니다. 기본값은 `FloatingActionButtonType.small`입니다. | +| autofocus | `bool` | 페이지가 로드될 때 버튼에 focus를 맞출지 여부입니다. 기본값은 `false`입니다. | +| icon | `Map?` | 버튼 내부에 표시할 icon입니다. | +| backgroundColor | `String?` | 버튼을 칠할 색상입니다. | +| foregroundColor | `String?` | 버튼의 icon을 칠할 색상입니다. | +| focusColor | `String?` | 버튼에 input focus가 있을 때 칠할 색상입니다. | +| hoverColor | `String?` | pointer가 버튼 위에 있을 때 칠할 색상입니다. | +| splashColor | `String?` | 버튼을 눌렀을 때 splash 효과를 칠할 색상입니다. | +| extendedTextStyle | `StacTextStyle?` | extended 버튼의 label에 적용할 text style입니다. | +| elevation | `double?` | 버튼의 elevation입니다. | +| focusElevation | `double?` | 버튼에 input focus가 있을 때의 elevation입니다. | +| hoverElevation | `double?` | pointer가 버튼 위에 있을 때의 elevation입니다. | +| disabledElevation | `double?` | 버튼이 비활성화되었을 때의 elevation입니다. | +| highlightElevation | `double?` | 버튼을 눌렀을 때의 elevation입니다. | +| extendedIconLabelSpacing | `double?` | extended 버튼에서 icon과 label 사이의 간격입니다. | +| enableFeedback | `bool?` | 음향 및/또는 햅틱 피드백을 제공할지 여부입니다. | +| tooltip | `String?` | 사용자가 버튼을 길게 누를 때 표시할 텍스트입니다. | +| heroTag | `Object?` | hero animation에 사용할 tag입니다. | +| child | `Map` | 버튼 내부에 표시할 widget입니다. | + +## 예제 JSON + +```json +{ + "type": "floatingActionButton", + "onPressed": {}, + "textStyle": { + "fontSize": 16, + "color": "#FFFFFF" + }, + "buttonType": "small", + "autofocus": false, + "icon": { + "type": "icon", + "icon": "add" + }, + "backgroundColor": "#FFC107", + "foregroundColor": "#000000", + "focusColor": "#FF5722", + "hoverColor": "#FF9800", + "splashColor": "#FFEB3B", + "extendedTextStyle": { + "fontSize": 14, + "color": "#FFFFFF" + }, + "elevation": 6.0, + "focusElevation": 8.0, + "hoverElevation": 10.0, + "disabledElevation": 2.0, + "highlightElevation": 12.0, + "extendedIconLabelSpacing": 8.0, + "enableFeedback": true, + "tooltip": "Add Item", + "heroTag": "fab1", + "child": { + "type": "text", + "data": "Add" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/form.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/form.md new file mode 100644 index 00000000..ee9bd87e --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/form.md @@ -0,0 +1,65 @@ +# Form + +Stac Form을 사용하면 JSON을 이용하여 Flutter form widget을 구축할 수 있습니다. +Flutter의 form widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/Form-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------------|-------------------------|-----------------------------------------------------------------------------| +| autovalidateMode | `AutovalidateMode?` | 자동 검증을 제어하는 모드입니다. | +| child | `Map` | form 내부에 표시할 widget입니다. | + +## 예제 JSON + +```json +{ + "type": "form", + "autovalidateMode": "always", + "child": { + "type": "column", + "children": [ + { + "type": "textFormField", + "id": "username", + "decoration": { + "labelText": "Username" + } + }, + { + "type": "textFormField", + "id": "password", + "decoration": { + "labelText": "Password" + } + }, + { + "type": "filledButton", + "child": { + "type": "text", + "data": "Submit" + }, + "onPressed": { + "actionType": "validateForm", + "isValid": { + "actionType": "networkRequest", + "url": "https://dummyjson.com/auth/login", + "method": "post", + "contentType": "application/json", + "body": { + "username": { + "actionType": "getFormValue", + "id": "username" + }, + "password": { + "actionType": "getFormValue", + "id": "password" + } + } + } + } + } + ] + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/fractionally_sized_box.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/fractionally_sized_box.md new file mode 100644 index 00000000..2c054720 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/fractionally_sized_box.md @@ -0,0 +1,32 @@ +# FractionallySizedBox + +Stac FractionallySizedBox를 사용하면 JSON을 사용하여 Flutter fractionally sized box widget을 빌드할 수 있습니다. +Flutter의 fractionally sized box widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------|-------------------------|----------------------------------------------------------| +| alignment | `StacAlignment?` | fractionally sized box 내에서 child의 정렬 방식입니다. | +| widthFactor | `double?` | 사용 가능한 너비 중 사용할 비율입니다. | +| heightFactor | `double?` | 사용 가능한 높이 중 사용할 비율입니다. | +| child | `Map?` | fractionally sized box 내부에 표시할 widget입니다. | + +## 예제 JSON + +```json +{ + "type": "fractionallySizedBox", + "alignment": "center", + "widthFactor": 0.5, + "heightFactor": 0.5, + "child": { + "type": "container", + "color": "#FF5733", + "child": { + "type": "text", + "data": "Hello, World!" + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/gesture_detector.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/gesture_detector.md new file mode 100644 index 00000000..e664e7e4 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/gesture_detector.md @@ -0,0 +1,208 @@ +# GestureDetector + +Stac의 `GestureDetector` widget을 사용하면 애플리케이션 내에서 다양한 제스처와 사용자 상호작용을 감지할 수 있습니다. 이 widget은 Flutter의 네이티브 GestureDetector widget을 래핑하여 터치 이벤트, 탭, 드래그 등을 처리할 수 있는 JSON 기반 인터페이스를 제공합니다. + +## 사용법 + +Stac JSON에서 GestureDetector를 사용하려면 widget 타입을 "gestureDetector"로 지정하고 처리하려는 제스처 콜백과 함께 자식 widget을 제공합니다. + +```json +{ + "type": "gestureDetector", + "child": { + "type": "container", + "color": "#2196F3", + "width": 200, + "height": 200, + "alignment": "center", + "child": { + "type": "text", + "data": "Tap me!", + "style": { + "color": "#FFFFFF", + "fontSize": 20 + } + } + }, + "onTap": { + "actionType": "showSnackBar", + "content": { + "type": "text", + "data": "This is a Snackbar" + } + } +} +``` + +## 속성 + +### 자식 Widget + +| Property | Type | Description | +|----------|------|-------------| +| `child` | Widget | 제스처에 반응할 widget입니다 | + +### 탭 제스처 + +| Property | Type | Description | +|----------|------|-------------| +| `onTapDown` | Action | 포인터가 화면에 접촉할 때 호출됩니다 | +| `onTapUp` | Action | 포인터가 화면 접촉을 멈출 때 호출됩니다 | +| `onTap` | Action | 탭이 발생할 때 호출됩니다 | +| `onTapCancel` | Action | 탭이 취소될 때 호출됩니다 | +| `onDoubleTapDown` | Action | 포인터가 잠재적인 더블 탭에서 화면에 접촉할 때 호출됩니다 | +| `onDoubleTap` | Action | 더블 탭이 발생할 때 호출됩니다 | +| `onDoubleTapCancel` | Action | 더블 탭이 취소될 때 호출됩니다 | + +### 보조 및 3차 탭 제스처 + +| Property | Type | Description | +|----------|------|-------------| +| `onSecondaryTap` | Action | 보조 탭이 발생할 때 호출됩니다 (예: 마우스 오른쪽 클릭) | +| `onSecondaryTapDown` | Action | 보조 포인터가 화면에 접촉할 때 호출됩니다 | +| `onSecondaryTapUp` | Action | 보조 포인터가 화면 접촉을 멈출 때 호출됩니다 | +| `onSecondaryTapCancel` | Action | 보조 탭이 취소될 때 호출됩니다 | +| `onTertiaryTapDown` | Action | 3차 포인터가 화면에 접촉할 때 호출됩니다 | +| `onTertiaryTapUp` | Action | 3차 포인터가 화면 접촉을 멈출 때 호출됩니다 | +| `onTertiaryTapCancel` | Action | 3차 탭이 취소될 때 호출됩니다 | + +### 롱 프레스 제스처 + +| Property | Type | Description | +|----------|------|-------------| +| `onLongPressDown` | Action | 포인터가 잠재적인 롱 프레스에서 화면에 접촉할 때 호출됩니다 | +| `onLongPressCancel` | Action | 롱 프레스가 취소될 때 호출됩니다 | +| `onLongPress` | Action | 롱 프레스가 발생할 때 호출됩니다 | +| `onLongPressStart` | Action | 롱 프레스가 시작될 때 호출됩니다 | +| `onLongPressMoveUpdate` | Action | 롱 프레스 이동 업데이트가 발생할 때 호출됩니다 | +| `onLongPressUp` | Action | 롱 프레스 업이 발생할 때 호출됩니다 | +| `onLongPressEnd` | Action | 롱 프레스가 끝날 때 호출됩니다 | + +### 보조 및 3차 롱 프레스 제스처 + +| Property | Type | Description | +|----------|------|-------------| +| `onSecondaryLongPressDown` | Action | 보조 포인터가 잠재적인 롱 프레스에서 화면에 접촉할 때 호출됩니다 | +| `onSecondaryLongPressCancel` | Action | 보조 롱 프레스가 취소될 때 호출됩니다 | +| `onSecondaryLongPress` | Action | 보조 롱 프레스가 발생할 때 호출됩니다 | +| `onSecondaryLongPressStart` | Action | 보조 롱 프레스가 시작될 때 호출됩니다 | +| `onSecondaryLongPressMoveUpdate` | Action | 보조 롱 프레스 이동 업데이트가 발생할 때 호출됩니다 | +| `onSecondaryLongPressUp` | Action | 보조 롱 프레스 업이 발생할 때 호출됩니다 | +| `onSecondaryLongPressEnd` | Action | 보조 롱 프레스가 끝날 때 호출됩니다 | +| `onTertiaryLongPressDown` | Action | 3차 포인터가 잠재적인 롱 프레스에서 화면에 접촉할 때 호출됩니다 | +| `onTertiaryLongPressCancel` | Action | 3차 롱 프레스가 취소될 때 호출됩니다 | +| `onTertiaryLongPress` | Action | 3차 롱 프레스가 발생할 때 호출됩니다 | +| `onTertiaryLongPressStart` | Action | 3차 롱 프레스가 시작될 때 호출됩니다 | +| `onTertiaryLongPressMoveUpdate` | Action | 3차 롱 프레스 이동 업데이트가 발생할 때 호출됩니다 | +| `onTertiaryLongPressUp` | Action | 3차 롱 프레스 업이 발생할 때 호출됩니다 | +| `onTertiaryLongPressEnd` | Action | 3차 롱 프레스가 끝날 때 호출됩니다 | + +### 드래그 제스처 + +| Property | Type | Description | +|----------|------|-------------| +| `onVerticalDragDown` | Action | 포인터가 화면에 접촉하고 수직 드래그를 시작할 수 있을 때 호출됩니다 | +| `onVerticalDragStart` | Action | 포인터가 수직 드래그를 시작할 때 호출됩니다 | +| `onVerticalDragUpdate` | Action | 포인터가 수직 드래그를 업데이트할 때 호출됩니다 | +| `onVerticalDragEnd` | Action | 포인터가 수직 드래그를 끝낼 때 호출됩니다 | +| `onVerticalDragCancel` | Action | 수직 드래그가 취소될 때 호출됩니다 | +| `onHorizontalDragDown` | Action | 포인터가 화면에 접촉하고 수평 드래그를 시작할 수 있을 때 호출됩니다 | +| `onHorizontalDragStart` | Action | 포인터가 수평 드래그를 시작할 때 호출됩니다 | +| `onHorizontalDragUpdate` | Action | 포인터가 수평 드래그를 업데이트할 때 호출됩니다 | +| `onHorizontalDragEnd` | Action | 포인터가 수평 드래그를 끝낼 때 호출됩니다 | +| `onHorizontalDragCancel` | Action | 수평 드래그가 취소될 때 호출됩니다 | + +### Force Press 제스처 + +| Property | Type | Description | +|----------|------|-------------| +| `onForcePressStart` | Action | force press가 시작될 때 호출됩니다 | +| `onForcePressPeak` | Action | force press가 최대 압력에 도달할 때 호출됩니다 | +| `onForcePressUpdate` | Action | force press가 업데이트될 때 호출됩니다 | +| `onForcePressEnd` | Action | force press가 끝날 때 호출됩니다 | + +### 기타 속성 + +| Property | Type | 기본값 | Description | +|----------|------|---------|-------------| +| `excludeFromSemantics` | boolean | false | 시맨틱 트리에서 제스처를 제외할지 여부입니다 | +| `dragStartBehavior` | string | "start" | 드래그가 공식적으로 시작되는 시점을 결정합니다 ("start" 또는 "down") | + +## 예제 JSON + +### 간단한 탭 예제 + +```json +{ + "type": "gestureDetector", + "onTap": { + "actionType": "navigate", + "routeName": "/details" + }, + "child": { + "type": "container", + "padding": 16, + "color": "#E0E0E0", + "child": { + "type": "text", + "data": "Navigate to Details" + } + } +} +``` + +### 드래그 예제 + +```json +{ + "type": "gestureDetector", + "onHorizontalDragEnd": { + "actionType": "handleSwipe" + }, + "child": { + "type": "container", + "width": 200, + "height": 200, + "color": "#F5F5F5", + "alignment": "center", + "child": { + "type": "text", + "data": "Swipe horizontally" + } + } +} +``` + +### 롱 프레스 예제 + +```json +{ + "type": "gestureDetector", + "onLongPress": { + "actionType": "showDialog", + "title": "Long Press Detected", + "content": "You performed a long press on the widget." + }, + "child": { + "type": "container", + "padding": 16, + "decoration": { + "color": "#4CAF50", + "borderRadius": 8 + }, + "child": { + "type": "text", + "data": "Long press me", + "style": { + "color": "#FFFFFF" + } + } + } +} +``` + +## Action 처리 + +Stac GestureDetector의 각 제스처 콜백은 제스처가 감지되었을 때 수행할 작업을 정의하는 action 객체를 허용합니다. 이는 내비게이션 작업, 다이얼로그 표시, 커스텀 함수 실행 또는 Stac 애플리케이션에서 지원하는 기타 작업일 수 있습니다. + +Action에 대한 자세한 내용은 [Actions 문서](../actions/)를 참조하세요. diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/grid_view.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/grid_view.md new file mode 100644 index 00000000..571aefd4 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/grid_view.md @@ -0,0 +1,76 @@ +# GridView + +Stac GridView를 사용하면 JSON을 사용하여 Flutter GridView widget을 빌드할 수 있습니다. +Flutter의 GridView widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/GridView-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------------------|-------------------------------------|-----------------------------------------------------------------------------| +| scrollDirection | `Axis` | grid가 스크롤되는 축입니다. 기본값은 `Axis.vertical`입니다. | +| reverse | `bool` | grid가 역방향으로 스크롤되는지 여부입니다. 기본값은 `false`입니다. | +| primary | `bool` | 이것이 primary scroll view인지 여부입니다. 기본값은 `false`입니다. | +| physics | `StacScrollPhysics?` | scroll view의 physics입니다. | +| shrinkWrap | `bool` | scrollDirection의 scroll view 범위가 표시되는 콘텐츠에 의해 결정되어야 하는지 여부입니다. 기본값은 `false`입니다. | +| padding | `StacEdgeInsets?` | grid를 inset할 공간의 양입니다. | +| crossAxisCount | `int?` | cross axis의 children 수입니다. | +| mainAxisSpacing | `double` | main axis의 children 사이의 간격입니다. 기본값은 `0.0`입니다. | +| crossAxisSpacing | `double` | cross axis의 children 사이의 간격입니다. 기본값은 `0.0`입니다. | +| childAspectRatio | `double` | 각 child의 cross-axis 대 main-axis 범위의 비율입니다. 기본값은 `1.0`입니다. | +| mainAxisExtent | `double?` | main axis에서 각 child의 범위입니다. | +| addAutomaticKeepAlives | `bool` | automatic keep-alive를 추가할지 여부입니다. 기본값은 `true`입니다. | +| addRepaintBoundaries | `bool` | repaint boundary를 추가할지 여부입니다. 기본값은 `true`입니다. | +| addSemanticIndexes | `bool` | semantic index를 추가할지 여부입니다. 기본값은 `true`입니다. | +| cacheExtent | `double?` | 콘텐츠가 캐시되는 범위입니다. | +| children | `List>` | 트리에서 이 widget 아래에 있는 widget들입니다. 기본값은 빈 list입니다. | +| semanticChildCount | `int?` | semantic 목적을 위한 children의 수입니다. | +| dragStartBehavior | `DragStartBehavior` | drag 시작 동작입니다. 기본값은 `DragStartBehavior.start`입니다. | +| keyboardDismissBehavior | `ScrollViewKeyboardDismissBehavior` | keyboard dismiss 동작입니다. 기본값은 `ScrollViewKeyboardDismissBehavior.manual`입니다. | +| restorationId | `String?` | scroll offset을 저장하고 복원하기 위한 restoration ID입니다. | +| clipBehavior | `Clip` | grid의 clip 동작입니다. 기본값은 `Clip.hardEdge`입니다. | + +## 예제 JSON + +```json +{ + "type": "gridView", + "scrollDirection": "vertical", + "reverse": false, + "primary": false, + "physics": { + "type": "scrollPhysics", + "name": "bouncing" + }, + "shrinkWrap": false, + "padding": { + "left": 10, + "top": 10, + "right": 10, + "bottom": 10 + }, + "crossAxisCount": 2, + "mainAxisSpacing": 10.0, + "crossAxisSpacing": 10.0, + "childAspectRatio": 1.0, + "mainAxisExtent": 100.0, + "addAutomaticKeepAlives": true, + "addRepaintBoundaries": true, + "addSemanticIndexes": true, + "cacheExtent": 100.0, + "children": [ + { + "type": "text", + "data": "Item 1" + }, + { + "type": "text", + "data": "Item 2" + } + ], + "semanticChildCount": 2, + "dragStartBehavior": "start", + "keyboardDismissBehavior": "manual", + "restorationId": "grid_view_1", + "clipBehavior": "hardEdge" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/icon.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/icon.md new file mode 100644 index 00000000..0f14aa68 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/icon.md @@ -0,0 +1,30 @@ +# Icon + +Stac Icon을 사용하면 JSON을 사용하여 Flutter icon widget을 빌드할 수 있습니다. +Flutter의 icon widget에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/Icon-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|---------------|------------------|------------------------------------------------------| +| icon | `String` | 표시할 icon의 이름입니다. | +| iconType | `IconType` | icon의 타입입니다 (material, cupertino). 기본값은 `material`입니다. | +| size | `double?` | icon의 크기입니다. | +| color | `String?` | icon의 색상입니다. | +| semanticLabel | `String?` | icon의 semantic label입니다. | +| textDirection | `TextDirection?` | icon의 text direction입니다. | + +> 참고: 사용 가능한 icon을 확인하려면 [Icon utils](https://github.com/StacDev/stac/blob/dev/packages/stac/lib/src/utils/icon_utils.dart)를 참조하세요. + +## 예제 JSON + +```json +{ + "type": "icon", + "icon": "home", + "size": 24.0, + "color": "#000000", + "semanticLabel": "Home Icon", + "textDirection": "ltr" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/icon_button.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/icon_button.md new file mode 100644 index 00000000..22f455a0 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/icon_button.md @@ -0,0 +1,72 @@ +# IconButton + +Stac Icon Button을 사용하면 JSON을 통해 Flutter icon button 위젯을 생성할 수 있습니다. +Flutter의 icon button 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/IconButton-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------------|-------------------------|------------------------------------------------------------------------------------| +| iconSize | `double?` | 버튼 내부 아이콘의 크기입니다. | +| padding | `StacEdgeInsets?` | 버튼 내부의 패딩입니다. | +| alignment | `StacAlignment?` | 버튼 내에서 아이콘을 정렬하는 방법입니다. | +| splashRadius | `double?` | 스플래시 효과의 반경입니다. | +| color | `String?` | 아이콘을 칠할 색상입니다. | +| focusColor | `String?` | 버튼이 입력 포커스를 가질 때 칠할 색상입니다. | +| hoverColor | `String?` | 포인터가 버튼 위에 있을 때 칠할 색상입니다. | +| highlightColor | `String?` | 버튼이 눌렸을 때 칠할 색상입니다. | +| splashColor | `String?` | 버튼이 눌렸을 때 스플래시 효과를 칠할 색상입니다. | +| disabledColor | `String?` | 버튼이 비활성화되었을 때 아이콘을 칠할 색상입니다. | +| onPressed | `Map?` | 버튼이 탭될 때 호출되는 콜백입니다. | +| autofocus | `bool` | 페이지가 로드될 때 버튼에 포커스를 맞출지 여부입니다. 기본값은 `false`입니다. | +| tooltip | `String?` | 사용자가 버튼을 길게 누를 때 표시할 텍스트입니다. | +| enableFeedback | `bool?` | 음향 및/또는 햅틱 피드백을 제공할지 여부입니다. | +| constraints | `StacBoxConstraints?` | 버튼의 제약 조건입니다. | +| style | `StacButtonStyle?` | 버튼에 적용할 스타일입니다. | +| isSelected | `bool?` | 버튼이 선택되었는지 여부입니다. | +| selectedIcon | `Map?` | 버튼이 선택되었을 때 표시할 아이콘입니다. | +| icon | `Map?` | 버튼 내부에 표시할 아이콘입니다. | + +## 예제 JSON + +```json +{ + "type": "iconButton", + "iconSize": 24.0, + "padding": { + "left": 8.0, + "top": 8.0, + "right": 8.0, + "bottom": 8.0 + }, + "alignment": "center", + "splashRadius": 20.0, + "color": "#000000", + "focusColor": "#FFC107", + "hoverColor": "#FF9800", + "highlightColor": "#FF5722", + "splashColor": "#FFEB3B", + "disabledColor": "#BDBDBD", + "onPressed": {}, + "autofocus": false, + "tooltip": "Add Item", + "enableFeedback": true, + "constraints": { + "minWidth": 48.0, + "minHeight": 48.0 + }, + "style": { + "backgroundColor": "#FFC107", + "foregroundColor": "#000000" + }, + "isSelected": false, + "selectedIcon": { + "type": "icon", + "icon": "check" + }, + "icon": { + "type": "icon", + "icon": "add" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/image.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/image.md new file mode 100644 index 00000000..d535229b --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/image.md @@ -0,0 +1,40 @@ +# Image + +`Image` widget을 사용하면 JSON을 통해 Flutter 앱에서 이미지를 표시할 수 있습니다. 이 widget은 asset, 파일, 네트워크 URL 등 여러 소스의 이미지를 지원하며, 정렬, 색상, 너비, 높이, 크기 조정과 같은 사용자 정의 옵션을 제공합니다. + +동등한 Flutter widget과 속성에 대해 자세히 알아보려면 [Image에 대한 공식 Flutter 문서](https://api.flutter.dev/flutter/widgets/Image-class.html)를 참조하세요. + +## 속성 + +| 속성 | 타입 | 설명 | +|-------------|------------------|-----------------------------------------------------------------------------------------| +| `src` | `String` | 이미지의 소스입니다. 예를 들어, 네트워크 이미지의 URL, 파일 이미지의 파일 경로 또는 asset 경로입니다. | +| `alignment` | `StacAlignment` | 컨테이너 내에서 이미지의 정렬입니다. 기본값은 `StacAlignment.center`입니다. | +| `imageType` | `StacImageType` | 이미지 소스의 유형: `file`, `network` 또는 `asset`입니다. 기본값은 `StacImageType.network`입니다. | +| `color` | `String?` | 이미지와 블렌딩할 색상으로, 16진수 형식으로 제공됩니다 (예: 빨간색의 경우 `#FF0000`). | +| `width` | `double?` | 논리적 픽셀 단위의 이미지 너비입니다. | +| `height` | `double?` | 논리적 픽셀 단위의 이미지 높이입니다. | +| `fit` | `BoxFit?` | 레이아웃 중 할당된 공간에 이미지를 어떻게 맞출지 지정합니다. | + +## Enum: StacImageType + +| 값 | 설명 | +|-----------|--------------------------------------------| +| `file` | 로컬 파일에서 이미지를 불러옵니다. | +| `network` | 네트워크 URL에서 이미지를 불러옵니다. | +| `asset` | Flutter의 asset 번들에서 이미지를 불러옵니다. | + +## 예제 JSON + +```json +{ + "type": "image", + "src": "https://example.com/image.png", + "alignment": "center", + "imageType": "network", + "color": "#FFFFFF", + "width": 200.0, + "height": 100.0, + "fit": "contain" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/ink_well.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/ink_well.md new file mode 100644 index 00000000..45b4ebe0 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/ink_well.md @@ -0,0 +1,71 @@ +# InkWell + +**Stac InkWell**을 사용하면 JSON을 통해 Flutter `InkWell` 위젯을 생성할 수 있습니다. +Flutter의 `InkWell` 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/InkWell-class.html)를 참조하세요. + + +## 속성 +| Property | Type | Description | +|-------------------------|------------------------------|-----------------------------------------------------------------------------| +| `child` | `Map?` | 이 InkWell 아래의 위젯입니다. | +| `onTap` | `Map?` | 사용자가 InkWell을 탭할 때 호출됩니다. | +| `onDoubleTap` | `Map?` | 사용자가 InkWell을 더블 탭할 때 호출됩니다. | +| `onLongPress` | `Map?` | 사용자가 오랫동안 누르고 있을 때 호출됩니다. | +| `onTapDown` | `Map?` | 탭 제스처가 시작될 때 호출됩니다. | +| `onTapUp` | `Map?` | 탭 제스처가 떼어질 때 호출됩니다. | +| `onTapCancel` | `Map?` | 탭 제스처가 중단될 때 호출됩니다. | +| `onSecondaryTap` | `Map?` | 보조 탭(예: 데스크톱에서 오른쪽 클릭)에 대해 호출됩니다. | +| `onSecondaryTapUp` | `Map?` | 보조 탭이 떼어질 때 호출됩니다. | +| `onSecondaryTapDown` | `Map?` | 보조 탭 제스처가 시작될 때 호출됩니다. | +| `onSecondaryTapCancel` | `Map?` | 보조 탭 제스처가 중단될 때 호출됩니다. | +| `onHighlightChanged` | `Map?` | InkWell 하이라이트가 변경될 때(눌린 상태) 호출됩니다. | +| `onHover` | `Map?` | 포인터가 위젯 영역에 진입하거나 벗어날 때 호출됩니다. | +| `mouseCursor` | `StacMouseCursor?` | InkWell 위로 마우스를 가져갈 때 마우스 커서를 정의합니다. | +| `focusColor` | `String?` | 포커스 하이라이트의 색상입니다. | +| `hoverColor` | `String?` | 포인터가 InkWell 위에 있을 때의 색상입니다. | +| `highlightColor` | `String?` | InkWell이 눌렸을 때의 색상입니다. | +| `overlayColor` | `String?` | 자식 위의 리플 효과 색상입니다. | +| `splashColor` | `String?` | 리플의 스플래시 색상입니다. | +| `radius` | `double?` | 스플래시 반경을 정의합니다. | +| `borderRadius` | `StacBorderRadius?` | 리플 효과에 대한 둥근 모서리를 설정합니다. | +| `customBorder` | `StacBorder?` | 클리핑 및 리플에 대한 사용자 정의 테두리 모양입니다. | +| `enableFeedback` | `@Default(true) bool` | 탭할 때 피드백(예: 소리, 진동)을 재생할지 여부입니다. | +| `excludeFromSemantics` | `@Default(false) bool` | 스크린 리더와 같은 접근성 도구에서 제외할지 여부입니다. | +| `canRequestFocus` | `@Default(true) bool` | 이 위젯이 포커스를 요청할 수 있는지 여부입니다. | +| `onFocusChange` | `Map?` | 포커스가 변경될 때의 콜백입니다. | +| `autofocus` | `@Default(false) bool` | 위젯이 빌드될 때 자동으로 포커스됩니다. | +| `hoverDuration` | `StacDuration?` | 호버 애니메이션 효과의 지속 시간입니다. | + +## 예제 JSON + +```json +{ + "type": "inkWell", + "child": { + "type": "padding", + "padding": { + "top": 20, + "bottom": 20, + "right": 20, + "left": 20 + }, + "child": { + "type": "text", + "data": "Hello, World! from Inkwell", + "textAlign": "center" + } + }, + "splashColor": "#E1BEE7", + "borderRadius": { + "topLeft": 20, + "topRight": 20, + "bottomLeft": 20, + "bottomRight": 20 + }, + "radius": 20, + "hoverDuration": { + "seconds": 10 + }, + "onTap": {} +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/limited_box.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/limited_box.md new file mode 100644 index 00000000..facc525e --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/limited_box.md @@ -0,0 +1,48 @@ +# Limited Box + +Stac LimitedBox를 사용하면 JSON을 통해 Flutter LimitedBox 위젯을 생성할 수 있습니다. +Flutter의 LimitedBox 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/LimitedBox-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------|-------------------------|------------------------------------------------------------------------------------------------------| +| `maxHeight` | `double` | 부모의 높이가 무제한일 때 자식의 최대 높이입니다. 기본값은 `double.infinity`입니다. | +| `maxWidth` | `double` | 부모의 너비가 무제한일 때 자식의 최대 너비입니다. 기본값은 `double.infinity`입니다. | +| `child` | `Map?` | JSON 객체로 표현된 자식 위젯입니다. | + +--- + +## 예제 JSON + +### Example 1: Limited Box with Default Constraints + +```json +{ + "type": "limitedBox", + "child": { + "type": "container", + "width": 100, + "height": 100, + "color": "#FF0000" + } +} +``` + +### Example 2: Limited Box with Custom Constraints + +```json +{ + "type": "limitedBox", + "maxHeight": 200.0, + "maxWidth": 300.0, + "child": { + "type": "text", + "data": "Hello, World! from Limited Box", + "style": { + "fontSize": 16, + "color": "#000000" + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/linear_progress_indicator.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/linear_progress_indicator.md new file mode 100644 index 00000000..4eb9fd1e --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/linear_progress_indicator.md @@ -0,0 +1,35 @@ +# LinearProgressIndicator + +Stac linearProgressIndicator를 사용하면 JSON을 통해 Flutter LinearProgressIndicator 위젯을 생성할 수 있습니다. +Flutter의 LinearProgressIndicator 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-----------------|---------------------|--------------------------------------------------------------------| +| value | `double` | 이 progress indicator의 진행률입니다. | +| backgroundColor | `String` | progress indicator에 의해 채워지는 트랙의 16진수 색상입니다. | +| color | `String` | progress indicator의 16진수 색상입니다. | +| minHeight | `double` | progress indicator의 높이입니다. | +| semanticsLabel | `String` | 위젯에 대한 텍스트 설명을 제공합니다. | +| semanticsValue | `String` | 위젯에 대한 텍스트 설명을 제공합니다. | +| borderRadius | `StacBorderRadius` | progress indicator의 테두리 반경입니다. | + + +## 예제 JSON + +```json +{ + "type": "linearProgressIndicator", + "color": "#541204", + "minHeight": 6, + "backgroundColor": "#FFD700", + "borderRadius": { + "topLeft": 10, + "topRight": 10, + "bottomLeft": 10, + "bottomRight": 10 + } +} +``` + diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/list_tile.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/list_tile.md new file mode 100644 index 00000000..d6884ea6 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/list_tile.md @@ -0,0 +1,131 @@ +# ListTile + +Stac list tile을 사용하면 JSON을 통해 Flutter list tile 위젯을 생성할 수 있습니다. +Flutter의 list tile 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/material/ListTile-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------------|-----------------------|-----------------------------------------------------------------------------------------------------------------| +| onTap | `Map` | 사용자가 이 list tile을 탭할 때 호출됩니다. | +| onLongPress | `Map` | 사용자가 이 list tile을 길게 누를 때 호출됩니다. | +| leading | `Map` | 제목 앞에 표시할 위젯입니다. | +| title | `Map` | list tile의 주요 콘텐츠입니다. | +| subtitle | `Map` | 제목 아래에 표시되는 추가 콘텐츠입니다. | +| trailing | `Map` | 제목 뒤에 표시할 위젯입니다. | +| isThreeLine | `bool` | 이 list tile이 세 줄의 텍스트를 표시하도록 의도되었는지 여부입니다. | +| dense | `bool` | 이 list tile이 수직으로 밀집된 목록의 일부인지 여부입니다. | +| style | `ListTileStyle` | 제목에 사용되는 글꼴을 정의합니다. | +| selectedColor | `String` | list tile이 선택될 때 아이콘과 텍스트에 사용되는 색상을 정의합니다. | +| iconColor | `String` | leading 및 trailing 아이콘의 기본 색상을 정의합니다. | +| textColor | `String` | 제목, 부제목, leading 및 trailing의 텍스트 색상을 정의합니다. | +| contentPadding | `StacEdgeInsets` | tile의 내부 패딩입니다. | +| enabled | `bool` | 이 list tile이 상호작용 가능한지 여부입니다. | +| selected | `bool` | 이 tile이 활성화되어 있으면 아이콘과 텍스트가 동일한 색상으로 렌더링됩니다. | +| focusColor | `String` | 입력 포커스가 있을 때 tile의 Material 색상입니다. | +| hoverColor | `String` | 포인터가 위에 있을 때 tile의 Material 색상입니다. | +| autoFocus | `bool` | 해당 범위에서 현재 포커스된 다른 노드가 없을 때 이 위젯이 초기 포커스로 선택될 경우 true입니다. | +| tileColor | `String` | selected가 false일 때 ListTile의 배경색을 정의합니다. | +| selectedTileColor | `String` | selected가 true일 때 ListTile의 배경색을 정의합니다. | +| enableFeedback | `bool` | 감지된 제스처가 음향 및/또는 햅틱 피드백을 제공해야 하는지 여부입니다. | +| horizontalTitleGap | `double` | 제목과 leading/trailing 위젯 사이의 수평 간격입니다. | +| minVerticalPadding | `double` | 제목 및 부제목 위젯의 상하단에 대한 최소 패딩입니다. | +| minLeadingWidth | `double` | ListTile.leading 위젯에 할당된 최소 너비입니다. | + +## 예제 JSON + +```json +{ + "type": "column", + "mainAxisAlignment": "start", + "crossAxisAlignment": "center", + "children": [ + { + "type": "sizedBox", + "height": 12 + }, + { + "type": "listTile", + "leading": { + "type": "image", + "src": "https://cdn-icons-png.flaticon.com/512/3135/3135715.png" + }, + "title": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Andrew Symonds", + "style": { + "fontSize": 18 + } + } + }, + "subtitle": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Andrew Symonds was an Australian international cricketer, who played all three formats as a batting all-rounder. Commonly nicknamed \"Roy\", he was a key member of two World Cup winning squads. Symonds played as a right-handed, middle order batsman and alternated between medium pace and off-spin", + "style": { + "fontSize": 14 + } + } + }, + "trailing": { + "type": "icon", + "iconType": "material", + "icon": "more_vert", + "size": 24 + } + }, + { + "type": "sizedBox", + "height": 12 + }, + { + "type": "listTile", + "leading": { + "type": "image", + "src": "https://cdn-icons-png.flaticon.com/512/3135/3135715.png" + }, + "title": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Adam Gilchrist", + "style": { + "fontSize": 18 + } + } + }, + "subtitle": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Adam Craig Gilchrist is an Australian cricket commentator and former international cricketer and captain of the Australia national cricket team. He was an attacking left-handed batsman and record-breaking wicket-keeper", + "style": { + "fontSize": 14 + } + } + }, + "trailing": { + "type": "icon", + "iconType": "material", + "icon": "more_vert", + "size": 24 + } + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/listview.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/listview.md new file mode 100644 index 00000000..e4a4fbb7 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/listview.md @@ -0,0 +1,207 @@ +# List View + +Stac listview를 사용하면 JSON을 통해 Flutter listview 위젯을 생성할 수 있습니다. +Flutter의 listview 위젯에 대한 자세한 내용은 [공식 문서](https://api.flutter.dev/flutter/widgets/ListView-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------------------|-------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------| +| scrollDirection | `Axis` | 스크롤 뷰의 오프셋이 증가하는 축입니다. | +| reverse | `bool` | 스크롤 뷰가 읽기 방향으로 스크롤되는지 여부입니다. | +| primary | `bool` | 이것이 기본 스크롤 뷰인지 여부입니다. | +| physics | `StacScrollPhysics` | 스크롤 뷰가 사용자 입력에 어떻게 응답해야 하는지입니다. | +| shrinkWrap | `bool` | scrollDirection에서 스크롤 뷰의 범위가 보고 있는 콘텐츠에 의해 결정되어야 하는지 여부입니다. | +| padding | `StacEdgeInsets` | 자식들을 삽입할 공간의 양입니다. | +| addAutomaticKeepAlives | `bool` | 자식이 더 이상 보이지 않을 때 자동으로 유지(캐시)되어야 하는지 여부를 결정하여 상태를 보존합니다. | +| addRepaintBoundaries | `bool` | 각 자식 위젯을 RepaintBoundary로 래핑하여 불필요한 다시 그리기를 줄여 렌더링을 최적화할지 여부를 결정합니다. | +| addSemanticIndexes | `bool` | 접근성 도구가 목록 항목의 순서와 구조를 이해할 수 있도록 자식에게 의미론적 인덱스를 할당할지 여부를 결정합니다. | +| cacheExtent | `double` | 뷰포트는 사용자가 스크롤할 때 곧 보이게 될 항목을 캐시하기 위해 보이는 영역 전후에 영역을 가집니다. | +| children | `List>` | 트리에서 이 위젯 아래의 위젯들입니다. | +| separator | `Map` | 각 목록 항목 쌍 사이에 표시할 위젯을 정의합니다. | +| semanticChildCount | `int` | 의미론적 정보에 기여할 자식의 수입니다. | +| dragStartBehavior | `DragStartBehavior` | 드래그 시작 동작이 처리되는 방식을 결정합니다. | +| keyboardDismissBehavior | `ScrollViewKeyboardDismissBehavior` | 이 ScrollView가 키보드를 자동으로 해제하는 방법을 정의합니다. | +| restorationId | `String` | 스크롤 가능한 항목의 스크롤 오프셋을 저장하고 복원하기 위한 복원 ID입니다. | +| clipBehavior | `Clip` | 이 옵션에 따라 콘텐츠가 클리핑됩니다(또는 클리핑되지 않습니다). | + +## 예제 JSON + +```json +{ + "type": "listView", + "shrinkWrap": true, + "separator": { + "type": "container", + "height": 10 + }, + "children": [ + { + "type": "listTile", + "leading": { + "type": "container", + "height": 50, + "width": 50, + "color": "#165FC7", + "child": { + "type": "column", + "mainAxisAlignment": "center", + "crossAxisAlignment": "center", + "children": [ + { + "type": "text", + "data": "1", + "style": { + "fontSize": 21 + } + } + ] + } + }, + "title": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Item 1", + "style": { + "fontSize": 18 + } + } + }, + "subtitle": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Item description", + "style": { + "fontSize": 14 + } + } + }, + "trailing": { + "type": "icon", + "iconType": "material", + "icon": "more_vert", + "size": 24 + } + }, + { + "type": "listTile", + "leading": { + "type": "container", + "height": 50, + "width": 50, + "color": "#165FC7", + "child": { + "type": "column", + "mainAxisAlignment": "center", + "crossAxisAlignment": "center", + "children": [ + { + "type": "text", + "data": "2", + "style": { + "fontSize": 21 + } + } + ] + } + }, + "title": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Item 2", + "style": { + "fontSize": 18 + } + } + }, + "subtitle": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Item description", + "style": { + "fontSize": 14 + } + } + }, + "trailing": { + "type": "icon", + "iconType": "material", + "icon": "more_vert", + "size": 24 + } + }, + { + "type": "listTile", + "leading": { + "type": "container", + "height": 50, + "width": 50, + "color": "#165FC7", + "child": { + "type": "column", + "mainAxisAlignment": "center", + "crossAxisAlignment": "center", + "children": [ + { + "type": "text", + "data": "3", + "style": { + "fontSize": 21 + } + } + ] + } + }, + "title": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Item 3", + "style": { + "fontSize": 18 + } + } + }, + "subtitle": { + "type": "padding", + "padding": { + "top": 10 + }, + "child": { + "type": "text", + "data": "Item description", + "style": { + "fontSize": 14 + } + } + }, + "trailing": { + "type": "icon", + "iconType": "material", + "icon": "more_vert", + "size": 24 + } + } + ] +} +``` + diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/network_widget.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/network_widget.md new file mode 100644 index 00000000..42e26fe9 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/network_widget.md @@ -0,0 +1,24 @@ +# NetworkWidget + +Stac NetworkWidget을 사용하면 네트워크 요청을 수행하고 JSON을 사용하여 응답에 기반한 위젯을 렌더링하는 위젯을 빌드할 수 있습니다. + +## 속성 + +| Property | Type | Description | +|----------|-----------------------|--------------------------------------| +| request | `StacNetworkRequest` | 네트워크 요청 구성입니다. | + +## 예제 JSON + +```json +{ + "type": "networkWidget", + "request": { + "url": "https://api.example.com/data", + "method": "get", + "headers": { + "Authorization": "Bearer token" + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/opacity.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/opacity.md new file mode 100644 index 00000000..9bdb6197 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/opacity.md @@ -0,0 +1,41 @@ +# Opacity + +Stac opacity를 사용하면 JSON을 사용하여 Flutter Opacity 위젯을 빌드할 수 있습니다. +Flutter의 Opacity 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Opacity-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------|------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| opacity | `double` | 자식의 가시성을 제어하는 0.0과 1.0 사이의 불투명도 값으로, 0.0은 완전히 투명(보이지 않음)이고 1.0은 완전히 불투명(보임)입니다. | +| child | `Map` | opacity의 자식 위젯입니다. | + +## 예제 JSON + +```json +{ + "type": "scaffold", + "appBar": { + "type": "appBar", + "title": { + "type": "text", + "data": "Opacity" + } + }, + "body": { + "type": "center", + "child": { + "type": "opacity", + "opacity": 0.5, + "child": { + "type": "text", + "data": "Opacity Widget", + "style": { + "fontSize": 23, + "fontWeight": "w600" + } + } + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/outlined_button.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/outlined_button.md new file mode 100644 index 00000000..034d6e04 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/outlined_button.md @@ -0,0 +1,39 @@ +# OutlinedButton + +Stac Outlined Button을 사용하면 JSON을 사용하여 Flutter outlined button 위젯을 빌드할 수 있습니다. +Flutter의 outlined button 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/OutlinedButton-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|---------------|-------------------------|------------------------------------------------------------------------------------| +| onPressed | `Map?` | 버튼이 탭될 때 호출되는 콜백입니다. | +| onLongPress | `Map?` | 버튼이 길게 눌렸을 때 호출되는 콜백입니다. | +| onHover | `Map?` | 버튼 위에 마우스를 올렸을 때 호출되는 콜백입니다. | +| onFocusChange | `Map?` | 버튼의 포커스가 변경될 때 호출되는 콜백입니다. | +| style | `StacButtonStyle?` | 버튼에 적용할 스타일입니다. | +| autofocus | `bool` | 페이지가 로드될 때 버튼에 포커스를 맞출지 여부입니다. 기본값은 `false`입니다. | +| clipBehavior | `Clip` | 콘텐츠를 클리핑하는 방법을 결정합니다. 기본값은 `Clip.none`입니다. | +| child | `Map` | 버튼 내부에 표시할 위젯입니다. | + +## 예제 JSON + +```json +{ + "type": "outlinedButton", + "onPressed": {}, + "onLongPress": {}, + "onHover": {}, + "onFocusChange": {}, + "style": { + "backgroundColor": "#FFFFFF", + "foregroundColor": "#000000" + }, + "autofocus": false, + "clipBehavior": "none", + "child": { + "type": "text", + "data": "Click Me!" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/padding.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/padding.md new file mode 100644 index 00000000..93990bf3 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/padding.md @@ -0,0 +1,30 @@ +# Padding + +Stac padding을 사용하면 JSON을 사용하여 Flutter padding 위젯을 빌드할 수 있습니다. +Flutter의 padding 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Padding-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| padding | `StacEdgeInsets` | 자식을 삽입할 공간의 양입니다. 예시: 균일한 패딩을 위한 `"padding": 12`, 특정 측면을 위한 `"padding": {"left": 0, "right": 0}`, 또는 왼쪽, 위, 오른쪽, 아래를 위한 `{"padding": [8, 12, 8, 12]}`. | +| child | `Map` | 트리에서 이 위젯 아래의 위젯입니다. | + +## 예제 JSON + +```json +{ + "type": "padding", + "padding": { + "left": 0, + "right": 0 + }, + "child": { + "type": "container", + "color": "#672BFF", + "clipBehavior": "hardEdge", + "height": 75, + "width": 700 + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/page_view.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/page_view.md new file mode 100644 index 00000000..deea8fee --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/page_view.md @@ -0,0 +1,78 @@ +# PageView + +Stac PageView를 사용하면 JSON을 사용하여 Flutter PageView 위젯을 빌드할 수 있습니다. +Flutter의 PageView 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/PageView-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|------------------------|------------------------------|-------------------------------------------------------------------------------| +| scrollDirection | `Axis` | 페이지 뷰가 스크롤되는 축입니다. 기본값은 `Axis.horizontal`입니다. | +| reverse | `bool` | 페이지 뷰가 역방향으로 스크롤되는지 여부입니다. 기본값은 `false`입니다. | +| physics | `StacScrollPhysics?` | 스크롤 뷰의 물리입니다. | +| pageSnapping | `bool` | 페이지 뷰가 페이지 경계에 스냅되어야 하는지 여부입니다. 기본값은 `true`입니다. | +| onPageChanged | `Map?` | 페이지가 변경될 때 호출되는 콜백입니다. | +| dragStartBehavior | `DragStartBehavior` | 드래그 시작 동작입니다. 기본값은 `DragStartBehavior.start`입니다. | +| allowImplicitScrolling | `bool` | 암묵적 스크롤을 허용할지 여부입니다. 기본값은 `false`입니다. | +| restorationId | `String?` | 스크롤 오프셋을 저장하고 복원하기 위한 복원 ID입니다. | +| clipBehavior | `Clip` | 페이지 뷰의 클립 동작입니다. 기본값은 `Clip.hardEdge`입니다. | +| padEnds | `bool` | 페이지 뷰의 끝을 패딩할지 여부입니다. 기본값은 `true`입니다. | +| initialPage | `int` | 표시할 초기 페이지입니다. 기본값은 `0`입니다. | +| keepPage | `bool` | 현재 페이지를 저장할지 여부입니다. 기본값은 `true`입니다. | +| viewportFraction | `double` | 각 페이지가 차지해야 하는 뷰포트의 비율입니다. 기본값은 `1.0`입니다. | +| children | `List>` | 트리에서 이 위젯 아래의 위젯들입니다. 기본값은 빈 리스트입니다. | + +## 예제 JSON + +```json +{ + "type": "pageView", + "children": [ + { + "type": "container", + "color": "#D9D9D9", + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Page 1", + "style": { + "fontSize": 23, + "fontWeight": "w400" + } + } + } + }, + { + "type": "container", + "color": "#FC3F1B", + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Page 2", + "style": { + "fontSize": 23, + "fontWeight": "w400" + } + } + } + }, + { + "type": "container", + "color": "#D9D9D9", + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Page 3", + "style": { + "fontSize": 23, + "fontWeight": "w400" + } + } + } + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/placeholder.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/placeholder.md new file mode 100644 index 00000000..f64518be --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/placeholder.md @@ -0,0 +1,32 @@ +# Placeholder + +Stac `Placeholder` 위젯을 사용하면 JSON을 사용하여 Flutter Placeholder 위젯을 빌드할 수 있습니다. +이는 Flutter UI에서 플레이스홀더 역할을 하는 상자를 그리는 데 사용됩니다. 일반적으로 위젯이 아직 추가되지 않은 영역을 나타내거나 레이아웃 제약을 디버깅하는 데 사용됩니다. + +`Placeholder` 위젯에 대해 자세히 알아보려면 [공식 Flutter 문서](https://api.flutter.dev/flutter/widgets/Placeholder-class.html)를 참조하세요. + +--- + +## 속성 + +| Property | Type | Description | +|------------------|-------------------------|---------------------------------------------------------------------------------------------------------| +| `color` | `String?` | 자식 뒤에 칠할 16진수 색상입니다. 기본값은 `#455A64` (Blue Grey 700)입니다. | +| `strokeWidth` | `double?` | 플레이스홀더 상자를 그리는 데 사용되는 선의 너비입니다. 기본값은 `2.0`입니다. | +| `fallbackWidth` | `double?` | 플레이스홀더가 무한 너비 상황에 있을 때 사용할 너비입니다. 기본값은 `400.0`입니다. | +| `fallbackHeight` | `double?` | 플레이스홀더가 무한 높이 상황에 있을 때 사용할 높이입니다. 기본값은 `400.0`입니다. | +| `child` | `Map?` | 플레이스홀더 상자 내부에 표시될 위젯입니다. | + +--- + +## 예제 JSON + +```json +{ + "type": "placeholder", + "color": "#455A64", + "strokeWidth": 2.0, + "fallbackWidth": 400.0, + "fallbackHeight": 400.0 +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/positioned.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/positioned.md new file mode 100644 index 00000000..3397f663 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/positioned.md @@ -0,0 +1,91 @@ +# Positioned + +Stac Positioned를 사용하면 JSON을 사용하여 Flutter positioned 위젯을 빌드할 수 있습니다. +Flutter의 positioned 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Positioned-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------------|-------------------------|---------------------------------------------------------------------------------------------| +| positionedType | `StacPositionedType?` | positioned 위젯의 타입입니다. `directional`, `fill` 또는 `fromRect`이 될 수 있습니다. | +| left | `double?` | 부모의 왼쪽 가장자리로부터의 거리입니다. | +| top | `double?` | 부모의 위쪽 가장자리로부터의 거리입니다. | +| right | `double?` | 부모의 오른쪽 가장자리로부터의 거리입니다. | +| bottom | `double?` | 부모의 아래쪽 가장자리로부터의 거리입니다. | +| width | `double?` | 자식의 너비입니다. | +| height | `double?` | 자식의 높이입니다. | +| start | `double?` | 부모의 시작 가장자리로부터의 거리입니다 (`directional` 타입용). | +| end | `double?` | 부모의 끝 가장자리로부터의 거리입니다 (`directional` 타입용). | +| textDirection | `TextDirection` | `start`와 `end`를 해석하는 데 사용할 텍스트 방향입니다. 기본값은 `TextDirection.ltr`입니다. | +| rect | `StacRect?` | 자식을 배치할 사각형입니다 (`fromRect` 타입용). | +| child | `Map?` | positioned 위젯 내부에 표시할 위젯입니다. | + +## 예제 JSON + +```json +{ + "type": "positioned", + "left": 10, + "top": 20, + "right": 30, + "bottom": 40, + "child": { + "type": "text", + "data": "Hello, World!" + } +} +``` + +## Example JSON for \`directional\` + +```json +{ + "type": "positioned", + "positionedType": "directional", + "start": 10, + "top": 20, + "width": 100, + "height": 50, + "textDirection": "ltr", + "child": { + "type": "text", + "data": "Hello, World!" + } +} +``` + +### Example JSON for \`fill\` + +```json +{ + "type": "positioned", + "positionedType": "fill", + "left": 10, + "top": 20, + "right": 30, + "bottom": 40, + "child": { + "type": "text", + "data": "Hello, World!" + } +} +``` + +### Example JSON for fromRect + +```json +{ + "type": "positioned", + "positionedType": "fromRect", + "rect": { + "left": 10, + "top": 20, + "right": 110, + "bottom": 70 + }, + "child": { + "type": "text", + "data": "Hello, World!" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/radio_group.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/radio_group.md new file mode 100644 index 00000000..36bf4dbb --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/radio_group.md @@ -0,0 +1,99 @@ +# RadioGroup + +Stac radioGroup을 사용하면 JSON을 사용하여 Flutter Radio 위젯들을 빌드할 수 있습니다. +Flutter의 Radio 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/Radio-class.html)를 참조하세요. + +## RadioGroup Properties + +| Property | Type | Description | +|------------|------------------------|------------------------------------------------------------| +| id | `String` | 라디오의 선택된 값을 저장하는 데 사용될 id입니다. | +| groupValue | `dynamic` | 라디오 버튼 그룹의 현재 선택된 값입니다. | +| child | `Map` | radioGroup의 자식입니다. | + +## Radio Properties + +| Property | Type | Description | +|----------------------------|-------------------------|-----------------------------------------------------------------------------------------------------------------| +| radioType | `StacRadioType` | 라디오의 타입입니다. | +| value | `dynamic` | 이 라디오가 나타내는 값입니다. | +| mouseCursor | `StacMouseCursor` | 마우스 포인터가 라디오에 진입하거나 위에 있을 때의 커서입니다. | +| toggleable | `bool` | 선택된 상태에서 선택 취소하려면 true로 설정합니다. | +| activeColor | `String` | 이 라디오 버튼이 선택되었을 때 사용할 색상입니다. | +| inactiveColor | `String` | 이 라디오 버튼이 선택되지 않았을 때 사용할 색상입니다. | +| fillColor | `String` | 모든 WidgetStates에서 라디오 버튼을 채우는 색상입니다. | +| focusColor | `String` | 라디오에 입력 포커스가 있을 때 Material의 색상입니다. | +| hoverColor | `String` | 포인터가 위에 있을 때 라디오의 Material 색상입니다. | +| overlayColor | `String` | 라디오의 Material 색상입니다. | +| splashRadius | `double` | 원형 Material 잉크 반응의 스플래시 반경입니다. | +| materialTapTargetSize | `MaterialTapTargetSize` | 탭 대상의 최소 크기를 구성합니다. | +| visualDensity | `StacVisualDensity` | 라디오의 레이아웃이 얼마나 컴팩트할지 정의합니다. | +| autofocus | `bool` | 현재 범위에서 다른 노드에 포커스가 없을 때 이 위젯이 초기 포커스로 선택될지 여부입니다. | +| useCheckmarkStyle | `bool` | 라디오가 체크박스 스타일로 표시될지 아니면 기본 iOS 라디오 스타일로 표시될지 제어합니다. | +| useCupertinoCheckmarkStyle | `bool` | iOS 스타일 라디오에서 체크마크 스타일을 사용할지 제어합니다. | + + +## 예제 JSON + +```json +{ + "type": "radioGroup", + "child": { + "type": "column", + "children": [ + { + "type": "listTile", + "leading": { + "type": "radio", + "radioType": "adaptive", + "value": "1", + "groupValue": "1" + }, + "title": { + "type": "text", + "data": "Male", + "align": "center", + "style": { + "fontSize": 21 + } + } + }, + { + "type": "listTile", + "leading": { + "type": "radio", + "radioType": "adaptive", + "value": "2", + "groupValue": "1" + }, + "title": { + "type": "text", + "data": "Female", + "align": "center", + "style": { + "fontSize": 21 + } + } + }, + { + "type": "listTile", + "leading": { + "type": "radio", + "radioType": "adaptive", + "value": "3", + "groupValue": "1" + }, + "title": { + "type": "text", + "data": "Other", + "align": "center", + "style": { + "fontSize": 21 + } + } + } + ] + } +} +``` + diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/refresh_indicator.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/refresh_indicator.md new file mode 100644 index 00000000..1a0e9de1 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/refresh_indicator.md @@ -0,0 +1,33 @@ +# RefreshIndicator + +Stac RefreshIndicator를 사용하면 JSON을 사용하여 Flutter RefreshIndicator 위젯을 빌드할 수 있습니다. +Flutter의 RefreshIndicator 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/RefreshIndicator-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-----------------|-------------------------------|------------------------------------------------------------------------------------------------------------------------------------------| +| child | `Map?` | 트리에서 이 위젯 아래의 위젯입니다. | +| displacement | `double` | 자식의 위쪽 또는 아래쪽 가장자리에서 새로고침 표시기가 시작되는 거리입니다. 기본값은 `40`입니다. | +| edgeOffset | `double` | 표시기가 시작되는 오프셋입니다. 기본값은 `0`입니다. | +| onRefresh | `Map?` | 사용자가 새로고침 표시기를 충분히 드래그하여 앱을 새로고침하고 싶다는 것을 나타낼 때 호출되는 콜백입니다. | +| color | `String?` | 새로고침 표시기의 색상입니다. | +| backgroundColor | `String?` | 새로고침 표시기의 배경색입니다. | +| semanticsLabel | `String?` | 새로고침 표시기의 의미론적 레이블입니다. | +| semanticsValue | `String?` | 새로고침 표시기의 의미론적 값입니다. | +| strokeWidth | `double` | 새로고침 표시기의 스트로크 너비입니다. 기본값은 `RefreshProgressIndicator.defaultStrokeWidth`입니다. | +| triggerMode | `RefreshIndicatorTriggerMode` | 새로고침 표시기가 트리거될 때를 제어하는 모드입니다. 기본값은 `RefreshIndicatorTriggerMode.onEdge`입니다. | + +## 예제 JSON + +```json +{ + "type": "refreshIndicator", + "onRefresh": { + "actionType": "request", + "url": "https://raw.githubusercontent.com/StacDev/stac/main/examples/stac_gallery/assets/json/list_view_example.json", + "method": "get", + "contentType": "application/json" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/row.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/row.md new file mode 100644 index 00000000..b025d7e6 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/row.md @@ -0,0 +1,43 @@ +# Row + +Stac row를 사용하면 JSON을 사용하여 Flutter row 위젯을 빌드할 수 있습니다. +Flutter의 row 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Row-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------------|-----------------------------|-----------------------------------------------------------------------------------------------------------------------| +| mainAxisAlignment | `MainAxisAlignment` | 주축을 따라 자식들을 배치하는 방법입니다. | +| crossAxisAlignment | `CrossAxisAlignment` | 교차축을 따라 자식들을 배치하는 방법입니다. | +| mainAxisSize | `MainAxisSize` | 주축에서 차지해야 할 공간의 크기입니다. | +| textDirection | `TextDirection` | 자식들을 가로로 배치할 순서와 가로 방향에서 시작과 끝을 해석하는 방법을 결정합니다. | +| spacing | `double` | 주축의 자식들 사이에 배치할 공간의 크기입니다. | +| children | `List>` | 트리에서 이 위젯 아래의 위젯들입니다. | + +## 예제 JSON + +```json +{ + "type": "row", + "mainAxisAlignment": "center", + "crossAxisAlignment": "center", + "spacing": 12, + "children": [ + { + "type": "image", + "src": "https://images.pexels.com/photos/2718416/pexels-photo-2718416.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "width": 100 + }, + { + "type": "image", + "src": "https://images.pexels.com/photos/121629/pexels-photo-121629.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "width": 100 + }, + { + "type": "image", + "src": "https://images.pexels.com/photos/1414642/pexels-photo-1414642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2", + "width": 100 + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/safe_area.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/safe_area.md new file mode 100644 index 00000000..f55e6b66 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/safe_area.md @@ -0,0 +1,32 @@ +# SafeArea + +Stac `SafeArea`를 사용하면 JSON을 사용하여 Flutter SafeArea 위젯을 빌드할 수 있습니다. +Flutter의 SafeArea 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/SafeArea-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|---------------------------|------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------| +| child | `Map` | SafeArea의 자식 위젯입니다. | +| left | `bool` | 왼쪽의 시스템 침입을 피할지 여부입니다. | +| top | `bool` | 일반적으로 시스템 상태 표시줄인 화면 상단의 시스템 침입을 피할지 여부입니다. | +| right | `bool` | 오른쪽의 시스템 침입을 피할지 여부입니다. | +| bottom | `bool` | 화면 하단의 시스템 침입을 피할지 여부입니다. | +| minimum | `StacEdgeInsets` | 적용할 최소 패딩입니다. | +| maintainBottomViewPadding | `bool` | SafeArea가 하단 MediaQueryData.padding 대신 하단 MediaQueryData.viewPadding을 유지해야 하는지 지정합니다. 기본값은 false입니다. | + +## 예제 JSON + +```json +{ + "type": "safeArea", + "child": { + "type": "text", + "data": "Hello, World!", + "style": { + "color": "#FFFFFF", + "fontSize": 24.0 + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/scaffold.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/scaffold.md new file mode 100644 index 00000000..eb4c5e4f --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/scaffold.md @@ -0,0 +1,79 @@ +# Scaffold + +Stac Scaffold를 사용하면 JSON을 사용하여 Flutter scaffold 위젯을 빌드할 수 있습니다. +Flutter의 scaffold 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/Scaffold-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------------------------|--------------------------------------|-----------------------------------------------------------------------------------------| +| appBar | `Map?` | scaffold의 앱 바 위젯입니다. | +| body | `Map?` | scaffold의 본문 위젯입니다. | +| floatingActionButton | `Map?` | scaffold의 플로팅 액션 버튼 위젯입니다. | +| floatingActionButtonLocation | `StacFloatingActionButtonLocation?` | 플로팅 액션 버튼의 위치입니다. | +| persistentFooterButtons | `List>?` | scaffold의 지속적인 푸터 버튼들입니다. | +| drawer | `Map?` | scaffold의 드로어 위젯입니다. | +| endDrawer | `Map?` | scaffold의 끝 드로어 위젯입니다. | +| bottomNavigationBar | `Map?` | scaffold의 하단 내비게이션 바 위젯입니다. | +| bottomSheet | `Map?` | scaffold의 하단 시트 위젯입니다. | +| backgroundColor | `String?` | scaffold의 배경색입니다. | +| resizeToAvoidBottomInset | `bool?` | scaffold가 하단 삽입을 피하기 위해 크기를 조정해야 하는지 여부입니다. | +| primary | `bool` | scaffold가 기본 scaffold인지 여부입니다. 기본값은 `true`입니다. | +| drawerDragStartBehavior | `DragStartBehavior` | 드로어의 드래그 시작 동작입니다. 기본값은 `DragStartBehavior.start`입니다. | +| extendBody | `bool` | 본문이 scaffold의 하단 패딩으로 확장되어야 하는지 여부입니다. 기본값은 `false`입니다. | +| extendBodyBehindAppBar | `bool` | 본문이 앱 바 뒤로 확장되어야 하는지 여부입니다. 기본값은 `false`입니다. | +| drawerScrimColor | `String?` | 드로어의 스크림 색상입니다. | +| drawerEdgeDragWidth | `double?` | 드로어의 가장자리 드래그 영역 너비입니다. | +| drawerEnableOpenDragGesture | `bool` | 드로어를 드래그 제스처로 열 수 있는지 여부입니다. 기본값은 `true`입니다. | +| endDrawerEnableOpenDragGesture | `bool` | 끝 드로어를 드래그 제스처로 열 수 있는지 여부입니다. 기본값은 `true`입니다. | +| restorationId | `String?` | scaffold의 상태를 저장하고 복원하기 위한 복원 ID입니다. | + +## 예제 JSON + +```json +{ + "type": "scaffold", + "appBar": { + "type": "appBar", + "title": { + "type": "text", + "data": "App Bar Title" + } + }, + "body": { + "type": "center", + "child": { + "type": "text", + "data": "Hello, World!" + } + }, + "floatingActionButton": { + "type": "floatingActionButton", + "child": { + "type": "icon", + "icon": "add" + }, + "onPressed": { + "type": "function", + "name": "onFabPressed" + } + }, + "backgroundColor": "#FFFFFF", + "drawer": { + "type": "drawer", + "child": { + "type": "column", + "children": [ + { + "type": "text", + "data": "Drawer Item 1" + }, + { + "type": "text", + "data": "Drawer Item 2" + } + ] + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/single_child_scroll_view.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/single_child_scroll_view.md new file mode 100644 index 00000000..a159908c --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/single_child_scroll_view.md @@ -0,0 +1,48 @@ +# SingleChildScrollView + +Stac SingleChildScrollView를 사용하면 JSON을 사용하여 Flutter SingleChildScrollView 위젯을 빌드할 수 있습니다. +Flutter의 SingleChildScrollView 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------------------|-------------------------------------|---------------------------------------------------------------------------------------------------------------------| +| scrollDirection | `Axis` | 스크롤 뷰가 스크롤되는 축입니다. 기본값은 `Axis.vertical`입니다. | +| reverse | `bool` | 스크롤 뷰가 역방향으로 스크롤되는지 여부입니다. 기본값은 `false`입니다. | +| padding | `StacEdgeInsets?` | 자식을 삽입할 공간의 양입니다. | +| primary | `bool?` | 이것이 부모와 연결된 기본 스크롤 뷰인지 여부입니다. | +| physics | `StacScrollPhysics?` | 스크롤 뷰가 사용자 입력에 응답하는 방법입니다. | +| child | `Map?` | 트리에서 이 위젯 아래의 위젯입니다. | +| dragStartBehavior | `DragStartBehavior` | 드래그 시작 동작이 처리되는 방식을 결정합니다. 기본값은 `DragStartBehavior.start`입니다. | +| clipBehavior | `Clip` | 이 옵션에 따라 콘텐츠가 클리핑됩니다(또는 클리핑되지 않습니다). 기본값은 `Clip.hardEdge`입니다. | +| restorationId | `String?` | 스크롤 뷰의 상태를 저장하고 복원하기 위한 복원 ID입니다. | +| keyboardDismissBehavior | `ScrollViewKeyboardDismissBehavior` | 스크롤 뷰가 키보드를 닫는 방법을 구성합니다. 기본값은 `ScrollViewKeyboardDismissBehavior.manual`입니다. | + +## 예제 JSON + +```json +{ + "type": "singleChildScrollView", + "child": { + "type": "column", + "children": [ + { + "type": "text", + "data": "Hello World!" + }, + { + "type": "text", + "data": "This is a SingleChildScrollView widget." + }, + { + "type": "text", + "data": "You can scroll vertically." + }, + { + "type": "text", + "data": "You can also scroll horizontally." + } + ] + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/sized_box.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/sized_box.md new file mode 100644 index 00000000..2210ee4e --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/sized_box.md @@ -0,0 +1,21 @@ +# SizedBox + +Stac sizedBox를 사용하면 JSON을 사용하여 Flutter sizedBox 위젯을 빌드할 수 있습니다. +Flutter의 sizedBox 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/SizedBox-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------|-------------------------|--------------------------------------| +| width | `double?` | SizedBox의 너비 | +| height | `double?` | SizedBox의 높이 | +| child | `Map?` | SizedBox 내부의 자식 위젯 | + +## 예제 JSON + +```json +{ + "type": "sizedBox", + "height": 25 +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/slider.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/slider.md new file mode 100644 index 00000000..6c1b2120 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/slider.md @@ -0,0 +1,57 @@ +# Slider + +Stac slider를 사용하면 JSON을 사용하여 Flutter Slider 위젯을 빌드할 수 있습니다. +Flutter의 Slider 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/Slider-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------------------|------------------------|-----------------------------------------------------------------------------------------------------------------| +| id | `String` | 슬라이더의 선택된 값을 저장하는 데 사용될 id입니다. | +| sliderType | `StacSliderType` | 슬라이더의 타입입니다. | +| value | `double` | 이 슬라이더에 대해 현재 선택된 값입니다. | +| secondaryTrackValue | `double` | 비활성 트랙 위에서 썸과 이 값 사이의 진행률을 그리는 데 사용되는 보조 트랙입니다. | +| onChanged | `Map` | 사용자가 슬라이더의 새 값을 선택하는 동안 드래그할 때 호출됩니다. | +| onChangeStart | `Map` | 사용자가 슬라이더의 새 값을 선택하기 시작할 때 호출됩니다. | +| onChangeEnd | `Map` | 사용자가 슬라이더의 새 값 선택을 완료했을 때 호출됩니다. | +| min | `double` | 사용자가 선택할 수 있는 최소값입니다. | +| max | `double` | 사용자가 선택할 수 있는 최대값입니다. | +| divisions | `int` | 이산 구간의 수입니다. | +| label | `String` | 슬라이더가 활성화되어 있을 때 슬라이더 위에 표시할 레이블 | +| activeColor | `String` | 슬라이더 트랙의 활성 부분에 사용할 색상입니다. | +| inactiveColor | `String` | 슬라이더 트랙의 비활성 부분의 색상입니다. | +| secondaryActiveColor | `String` | 썸과 secondaryTrackValue 사이의 슬라이더 트랙 부분에 사용할 색상 | +| thumbColor | `String` | 썸의 색상입니다. | +| overlayColor | `String` | 슬라이더 썸이 포커스, 호버 또는 드래그될 때를 나타내는 데 일반적으로 사용되는 하이라이트 색상입니다. | +| mouseCursor | `StacMouseCursor` | 마우스 포인터가 위젯에 진입하거나 위에 있을 때의 커서입니다. | +| autofocus | `bool` | 현재 범위에서 다른 노드에 포커스가 없을 때 이 위젯이 초기 포커스로 선택될지 여부입니다. | +| allowedInteraction | `SliderInteraction` | 사용자가 슬라이더와 상호작용할 수 있는 허용된 방법입니다. | + +## 예제 JSON + +```json +{ + "type": "scaffold", + "appBar": { + "type": "appBar", + "title": { + "type": "text", + "data": "Stac Slider" + } + }, + "body": { + "type": "form", + "child": { + "type": "center", + "child": { + "id": "example_slider", + "type": "slider", + "sliderType": "material", + "value": 20, + "max": 100, + "divisions": 5 + } + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/sliver_app_bar.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/sliver_app_bar.md new file mode 100644 index 00000000..dd97ab02 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/sliver_app_bar.md @@ -0,0 +1,74 @@ +# SliverAppBar + +Stac SliverAppBar를 사용하면 JSON을 사용하여 Flutter sliver app bar 위젯을 빌드할 수 있습니다. +Flutter의 app bar 위젯에 대해 자세히 알아보려면 +[공식 문서](https://api.flutter.dev/flutter/material/SliverAppBar-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|------------------------|------------------------------|-------------------------------------------------------------------------------------------------| +| leading | `Map?` | 타이틀 앞의 리딩 위젯입니다. | +| title | `Map?` | 타이틀 위젯입니다. | +| titleTextStyle | `StacTextStyle?` | 타이틀의 텍스트 스타일입니다. | +| toolbarTextStyle | `StacTextStyle?` | 툴바의 텍스트 스타일입니다. | +| shadowColor | `String?` | 앱 바 아래 그림자의 색상입니다. | +| backgroundColor | `String?` | 앱 바의 배경색입니다. | +| foregroundColor | `String?` | 앱 바의 전경 요소 색상입니다. | +| surfaceTintColor | `String?` | 앱 바의 표면 틴트 색상입니다. | +| actions | `List>` | 타이틀 뒤에 행으로 표시할 위젯 리스트입니다. 기본값은 빈 리스트입니다. | +| bottom | `Map?` | 앱 바의 하단 위젯입니다. | +| toolbarOpacity | `double` | 툴바의 불투명도입니다. 기본값은 `1.0`입니다. | +| bottomOpacity | `double` | 하단 위젯의 불투명도입니다. 기본값은 `1.0`입니다. | +| toolbarHeight | `double?` | 툴바의 높이입니다. | +| leadingWidth | `double?` | 리딩 위젯의 너비입니다. | +| primary | `bool` | 이 앱 바가 scaffold의 기본 앱 바인지 여부입니다. 기본값은 `true`입니다. | +| centerTitle | `bool?` | 타이틀을 중앙에 배치할지 여부입니다. | +| elevation | `double?` | 앱 바의 높이입니다. | +| scrolledUnderElevation | `double?` | 스크롤되어 아래에 있을 때 앱 바의 높이입니다. | +| flexibleSpace | `Map?` | 이 위젯은 툴바와 탭 바 뒤에 쌓입니다. | +| expandedHeight | `double?` | 완전히 확장되었을 때 앱 바의 크기입니다. | +| collapsedHeight | `double?` | 축소되었을 때 앱 바의 높이입니다. | +| titleSpacing | `double?` | 가로 축에서 타이틀 콘텐츠 주위의 간격입니다. | +| floating | `bool` | 사용자가 앱 바 쪽으로 스크롤하자마자 앱 바를 표시합니다. 기본값은 `false`입니다. | +| pinned | `bool` | 스크롤 뷰의 시작 부분에 앱 바를 표시합니다. 기본값은 `true`입니다. | +| snap | `bool` | AppBar의 스냅 동작을 제어합니다. 기본값은 `false`입니다. | +| stretch | `bool` | 앱 바가 오버스크롤 영역을 채우도록 늘어나야 하는지 여부입니다. 기본값은 `false`입니다. | +| stretchTriggerOffset | `double?` | `onStretchTrigger`를 활성화하는 데 필요한 오버스크롤의 오프셋입니다. | +| shape | `Map?` | 앱 바의 Material과 그 그림자의 모양입니다. | +| iconTheme | `Map?` | 툴바 아이콘에 사용할 색상, 불투명도 및 크기입니다. | +| actionsIconTheme | `Map?` | 앱 바의 액션에 나타나는 아이콘에 사용할 색상, 불투명도 및 크기입니다. | +| actionsPadding | `Map?` | 액션과 AppBar 끝 사이의 패딩입니다. | + +## 예제 JSON + +```json +{ + "type": "sliverAppBar", + "title": { + "type": "text", + "data": "SliverAppBar" + }, + "leading": { + "type": "iconButton", + "icon": { + "type": "icon", + "iconType": "material", + "icon": "menu" + }, + "onPressed": {} + }, + "backgroundColor": "primary", + "actions": [ + { + "type": "iconButton", + "icon": { + "type": "icon", + "iconType": "cupertino", + "icon": "heart_solid" + }, + "onPressed": {} + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/spacer.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/spacer.md new file mode 100644 index 00000000..bd63b70e --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/spacer.md @@ -0,0 +1,19 @@ +# Spacer + +Stac Spacer를 사용하면 JSON을 사용하여 Flutter spacer 위젯을 빌드할 수 있습니다. +Flutter의 spacer 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Spacer-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|----------|-------|---------------------------------------------------------| +| flex | `int` | spacer에 사용할 flex 팩터입니다. 기본값은 `1`입니다. | + +## 예제 JSON + +```json +{ + "type": "spacer", + "flex": 2 +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/stack.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/stack.md new file mode 100644 index 00000000..6e8f1994 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/stack.md @@ -0,0 +1,38 @@ +# Stack + +Stac Stack을 사용하면 JSON을 사용하여 Flutter stack 위젯을 빌드할 수 있습니다. +Flutter의 stack 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Stack-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|---------------|------------------------------|----------------------------------------------------------------------------------------------------------------------| +| alignment | `StacAlignmentDirectional` | 위치가 지정되지 않고 부분적으로 위치가 지정된 자식들을 정렬하는 방법입니다. 기본값은 `StacAlignmentDirectional.topStart`입니다. | +| clipBehavior | `Clip` | 콘텐츠를 클리핑하는 방법입니다. 기본값은 `Clip.hardEdge`입니다. | +| fit | `StackFit` | 위치가 지정되지 않은 자식들의 크기를 조정하는 방법입니다. 기본값은 `StackFit.loose`입니다. | +| textDirection | `TextDirection?` | 정렬을 해결하는 데 사용할 텍스트 방향입니다. | +| children | `List>` | 스택 내부에 표시할 위젯 리스트입니다. 기본값은 빈 리스트입니다. | + +## 예제 JSON + +```json +{ + "type": "stack", + "alignment": "center", + "clipBehavior": "antiAlias", + "fit": "expand", + "textDirection": "ltr", + "children": [ + { + "type": "text", + "data": "Hello, World!" + }, + { + "type": "container", + "width": 100, + "height": 100, + "color": "#FF0000" + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/switch.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/switch.md new file mode 100644 index 00000000..b4acf889 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/switch.md @@ -0,0 +1,65 @@ +# Switch + +Stac `Switch` 위젯을 사용하면 JSON을 사용하여 Flutter Switch 위젯을 빌드할 수 있습니다. +Flutter의 Switch 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/Switch-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-----------------------|-------------------------|-----------------------------------------------------------------------------------------------------------------| +| switchType | `StacSwitchType` | Switch의 타입입니다. | +| value | `bool` | 이 스위치가 켜져 있는지 꺼져 있는지 여부입니다. | +| onChanged | `Map` | 사용자가 스위치를 켜거나 끌 때 호출됩니다. | +| autofocus | `bool` | 현재 범위에서 다른 노드에 포커스가 없을 때 이 위젯이 초기 포커스로 선택될지 여부입니다. | +| activeThumbColor | `String` | 이 스위치가 켜져 있을 때 사용할 색상입니다. | +| activeTrackColor | `String` | 이 스위치가 켜져 있을 때 트랙에 사용할 색상입니다. | +| focusColor | `String` | 버튼에 입력 포커스가 있을 때의 색상입니다. | +| hoverColor | `String` | 포인터가 위에 있을 때 버튼의 색상입니다. | +| inactiveThumbColor | `String` | 이 스위치가 꺼져 있을 때 썸에 사용할 색상입니다. | +| inactiveTrackColor | `String` | 이 스위치가 꺼져 있을 때 트랙에 사용할 색상입니다. | +| onLabelColor | `String` | 스위치가 켜져 있을 때 접근성 레이블에 사용할 색상입니다. | +| offLabelColor | `String` | 스위치가 꺼져 있을 때 접근성 레이블에 사용할 색상입니다. | +| splashRadius | `double` | 원형 잉크 반응의 스플래시 반경입니다. | +| dragStartBehavior | `DragStartBehavior` | 드래그 시작 동작이 처리되는 방식을 결정합니다. | +| overlayColor | `StacMaterialColor` | 스위치의 색상입니다. | +| thumbColor | `StacMaterialColor` | 이 Switch의 썸 색상입니다. | +| trackColor | `StacMaterialColor` | 이 Switch의 트랙 색상입니다. | +| materialTapTargetSize | `MaterialTapTargetSize` | 탭 대상의 최소 크기를 구성합니다. | +| trackOutlineColor | `StacMaterialColor` | 이 Switch의 트랙 아웃라인 색상입니다. | +| thumbIcon | `Map` | 이 스위치의 썸에 사용할 아이콘입니다. | +| inactiveThumbImage | `String` | 스위치가 꺼져 있을 때 이 스위치의 썸에 사용할 이미지입니다. | +| activeThumbImage | `String` | 스위치가 켜져 있을 때 이 스위치의 썸에 사용할 이미지입니다. | +| applyTheme | `bool` | 주변 테마 데이터를 적용할지 여부입니다. | +| applyCupertinoTheme | `bool` | 주변 테마 데이터를 적용할지 여부입니다. | + +## 예제 JSON + +### Example 1: Cupertino Switch + +```json +{ + "type": "switch", + "switchType": "cupertino", + "value": true +} +``` + +### Example 2: Adaptive Switch + +```json +{ + "type": "switch", + "switchType": "adaptive", + "value": true +} +``` + +### Example 3: Material Switch + +```json +{ + "type": "switch", + "switchType": "material", + "value": false +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/tab_bar.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/tab_bar.md new file mode 100644 index 00000000..78d084ba --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/tab_bar.md @@ -0,0 +1,126 @@ +# TabBar + +Stac TabBar를 사용하면 JSON을 사용하여 Flutter TabBar 위젯을 빌드할 수 있습니다. +Flutter의 TabBar 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/TabBar-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------------------------------|-------------------------------|-----------------------------------------------------------------------------| +| tabs | `List>` | 탭 바에 표시할 탭들입니다. | +| initialIndex | `int` | 선택된 탭의 초기 인덱스입니다. 기본값은 `0`입니다. | +| isScrollable | `bool` | 탭 바가 스크롤 가능한지 여부입니다. 기본값은 `false`입니다. | +| padding | `StacEdgeInsets?` | 탭 바의 패딩입니다. | +| indicatorColor | `String?` | 탭 표시기의 색상입니다. | +| automaticIndicatorColorAdjustment | `bool` | 표시기 색상을 자동으로 조정할지 여부입니다. 기본값은 `true`입니다. | +| indicatorWeight | `double` | 탭 표시기의 두께입니다. 기본값은 `2.0`입니다. | +| indicatorPadding | `StacEdgeInsets?` | 탭 표시기의 패딩입니다. | +| indicator | `StacBoxDecoration?` | 탭 표시기의 데코레이션입니다. | +| indicatorSize | `TabBarIndicatorSize?` | 탭 표시기의 크기입니다. | +| labelColor | `String?` | 선택된 탭 레이블의 색상입니다. | +| labelStyle | `StacTextStyle?` | 선택된 탭 레이블의 텍스트 스타일입니다. | +| labelPadding | `StacEdgeInsets?` | 선택된 탭 레이블의 패딩입니다. | +| unselectedLabelColor | `String?` | 선택되지 않은 탭 레이블의 색상입니다. | +| unselectedLabelStyle | `StacTextStyle?` | 선택되지 않은 탭 레이블의 텍스트 스타일입니다. | +| dragStartBehavior | `DragStartBehavior` | 드래그 시작 동작입니다. 기본값은 `DragStartBehavior.start`입니다. | +| enableFeedback | `bool?` | 탭에 대한 피드백을 활성화할지 여부입니다. | +| physics | `StacScrollPhysics?` | 탭 바의 스크롤 물리입니다. | +| tabAlignment | `TabAlignment?` | 탭의 정렬입니다. | + +# DefaultTabController + +Stac DefaultTabController를 사용하면 JSON을 사용하여 Flutter DefaultTabController 위젯을 빌드할 수 있습니다. +Flutter의 DefaultTabController 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/DefaultTabController-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------|------------------------|---------------------------------------------------------| +| length | `int` | 탭의 수입니다. | +| initialIndex | `int` | 선택된 탭의 초기 인덱스입니다. 기본값은 `0`입니다. | +| child | `Map` | 트리에서 이 위젯 아래의 위젯입니다. | + +# Tab + +Stac Tab을 사용하면 JSON을 사용하여 Flutter Tab 위젯을 빌드할 수 있습니다. +Flutter의 Tab 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/Tab-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------|-------------------------|--------------------------------------------------| +| text | `String?` | 탭에 표시할 텍스트입니다. | +| icon | `Map?` | 탭에 표시할 아이콘입니다. | +| iconMargin | `StacEdgeInsets?` | 아이콘 주위의 마진입니다. | +| height | `double?` | 탭의 높이입니다. | +| child | `Map?` | 트리에서 이 위젯 아래의 위젯입니다. | + + +# TabBarView + +Stac TabBarView를 사용하면 JSON을 사용하여 Flutter TabBarView 위젯을 빌드할 수 있습니다. +Flutter의 TabBarView 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/TabBarView-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------------|------------------------------|-------------------------------------------------------------------------------| +| children | `List>` | 각 탭에 표시할 위젯들입니다. | +| initialIndex | `int` | 선택된 탭의 초기 인덱스입니다. 기본값은 `0`입니다. | +| dragStartBehavior | `DragStartBehavior` | 드래그 시작 동작입니다. 기본값은 `DragStartBehavior.start`입니다. | +| physics | `StacScrollPhysics?` | 탭 바 뷰의 스크롤 물리입니다. | +| viewportFraction | `double` | 각 페이지가 차지해야 하는 뷰포트의 비율입니다. 기본값은 `1.0`입니다. | +| clipBehavior | `Clip` | 클립 동작입니다. 기본값은 `Clip.hardEdge`입니다. | + +## 예제 JSON + +```json +{ + "type": "defaultTabController", + "length": 3, + "child": { + "type": "scaffold", + "appBar": { + "type": "appBar", + "title": { + "type": "text", + "data": "Tabbar" + }, + "bottom": { + "type": "tabBar", + "tabs": [ + { + "type": "tab", + "text": "Red" + }, + { + "type": "tab", + "text": "Red" + }, + { + "type": "tab", + "text": "Red" + } + ] + } + }, + "body": { + "type": "tabBarView", + "children": [ + { + "type": "container", + "color": "#D9D9D9" + }, + { + "type": "container", + "color": "#FC3F1B" + }, + { + "type": "container", + "color": "#D9D9D9" + } + ] + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/table.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/table.md new file mode 100644 index 00000000..6095fe72 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/table.md @@ -0,0 +1,155 @@ +# Table + +StacTable을 사용하면 JSON을 사용하여 Flutter Table 위젯을 빌드할 수 있습니다. +Flutter의 Table 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Table-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------------------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| columnWidths | `Map?` | 열별로 열 너비를 결정합니다. 특정 열 항목에 null 너비가 있는 경우 `defaultColumnWidth`가 사용됩니다. [`StacTableColumnWidth`](./../styles_and_attributes/table_column_width)를 참조하세요. | +| defaultColumnWidth | `StacTableColumnWidth?` | 기본 열 너비를 결정합니다. 기본값은 `flexColumnWidth`입니다. [`StacTableColumnWidth`](./../styles_and_attributes/table_column_width)를 참조하세요. | +| textDirection | `TextDirection?` | 열이 정렬되는 방향을 결정합니다. `rtl` 또는 `ltr`이 될 수 있습니다. 기본값은 `rtl`입니다. | +| border | `StacTableBorder?` | `StacTable`의 테두리 스타일을 정의합니다. [`StacTableBorder`](./../styles_and_attributes/table_border)를 참조하세요. | +| defaultVerticalAlignment | `TableCellVerticalAlignment?` | verticalAlignment을 지정하지 않는 셀의 verticalAlignment을 정의합니다. `top`, `middle`, `bottom`, `baseline`, `fill`, `intrinsicHeight`이 될 수 있습니다. 기본값은 `top`입니다. | +| textBaseLine | `TextBaseline?` | verticalAlignment이 `baseline`일 때 사용할 텍스트 베이스라인을 정의합니다. `alphabetic` 또는 `ideographic`이 될 수 있습니다. 기본값은 없습니다. | +| children | `List` | 테이블에 채워질 행들입니다. [`StacTableRow`](./table_row)를 참조하세요. | + +## Example + +```json +{ + "type": "table", + "columnWidths": { + "1": { + "type": "fixedColumnWidth", + "value": 200 + } + }, + "defaultColumnWidth": { + "type": "flexColumnWidth", + "value": 1 + }, + "textDirection": "ltr", + "defaultVerticalAlignment": "bottom", + "border": { + "type": "tableBorder", + "top": { + "color": "#428AF5", + "width": 1.0 + }, + "right": { + "color": "#428AF5", + "width": 1.0 + }, + "bottom": { + "color": "#428AF5", + "width": 1.0 + }, + "left": { + "color": "#428AF5", + "width": 1.0 + }, + "borderRadius": 16 + }, + "children": [ + { + "type": "tableRow", + "children": [ + { + "type": "tableCell", + "child": { + "type": "container", + "color": "#40000000", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Header 1" + } + } + } + }, + { + "type": "tableCell", + "child": { + "type": "container", + "color": "#40000000", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Header 2" + } + } + } + }, + { + "type": "tableCell", + "child": { + "type": "container", + "color": "#40000000", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Header 3" + } + } + } + } + ] + }, + { + "type": "tableRow", + "children": [ + { + "type": "tableCell", + "child": { + "type": "sizedBox", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Row 1, Cell 1" + } + } + } + }, + { + "type": "tableCell", + "child": { + "type": "sizedBox", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Row 1, Cell 2" + } + } + } + }, + { + "type": "tableCell", + "child": { + "type": "sizedBox", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Row 1, Cell 3" + } + } + } + } + ] + }, + ] + } +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/table_cell.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/table_cell.md new file mode 100644 index 00000000..cec19217 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/table_cell.md @@ -0,0 +1,31 @@ +# TableCell +StacTableCell을 사용하면 JSON을 사용하여 Flutter TableCell 위젯을 정의할 수 있습니다. +Flutter의 TableCell 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/TableCell-class.html)를 참조하세요. + +## Properties + +| Property | Type | Description | +|-------------------|-------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------| +| verticalAlignment | `TableCellVerticalAlignment?` | 테이블 셀의 수직 정렬을 정의합니다. `top`, `middle`, `bottom`, `baseline`, `fill`, `intrinsicHeight`이 될 수 있습니다. 기본값은 `top`입니다. | +| child | `Map` | 테이블 셀의 자식 위젯입니다. | + +## Example + +```json +{ + "type": "tableCell", + "verticalAlignment": "top", + "child": { + "type": "container", + "color": "#40000000", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Header 1" + } + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/table_row.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/table_row.md new file mode 100644 index 00000000..c6f79741 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/table_row.md @@ -0,0 +1,66 @@ +# TableRow + +StacTableRow를 사용하면 JSON을 사용하여 Flutter TableRow 위젯을 정의할 수 있습니다. +Flutter의 TableRow 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/TableRow-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|------------|------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------| +| decoration | `StacDecoration?` | 이 행 뒤에 그려질 데코레이션을 정의합니다. `StacDecoration`을 참조하세요. | +| children | `List>` | 이 행의 셀을 구성하는 위젯들을 정의합니다. [`StacTableCell`](./table_cell)을 사용하여 행의 각 셀의 개별 정렬을 제어하세요. | + +## Example + +```json +{ + "type": "tableRow", + "children": [ + { + "type": "tableCell", + "child": { + "type": "container", + "color": "#40000000", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Header 1" + } + } + } + }, + { + "type": "tableCell", + "child": { + "type": "container", + "color": "#40000000", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Header 2" + } + } + } + }, + { + "type": "tableCell", + "child": { + "type": "container", + "color": "#40000000", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Header 3" + } + } + } + } + ] +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text.md new file mode 100644 index 00000000..7a90d5eb --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text.md @@ -0,0 +1,34 @@ +# Text + +Stac text를 사용하면 JSON을 사용하여 Flutter text 위젯을 빌드할 수 있습니다. +Flutter의 text 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Text-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-----------------|-----------------------|----------------------------------------------------| +| data | `String` | 표시할 텍스트입니다. | +| children | `List` | 표시할 텍스트 스팬의 리스트입니다. | +| style | `StacTextStyle?` | 텍스트에 적용할 스타일입니다. | +| textAlign | `TextAlign?` | 텍스트의 정렬입니다. | +| textDirection | `TextDirection?` | 텍스트의 방향입니다. | +| softWrap | `bool?` | 텍스트가 소프트 줄바꿈에서 끊어져야 하는지 여부입니다. | +| overflow | `TextOverflow?` | 시각적 오버플로우를 처리하는 방법입니다. | +| textScaleFactor | `double?` | 각 논리 픽셀에 대한 폰트 픽셀 수입니다. | +| maxLines | `int?` | 표시할 최대 줄 수입니다. | +| semanticsLabel | `String?` | 텍스트의 의미론적 레이블입니다. | +| textWidthBasis | `TextWidthBasis?` | 텍스트의 너비 기준입니다. | +| selectionColor | `String?` | 텍스트 선택의 색상입니다. | + +## 예제 JSON + +```json +{ + "type": "text", + "data": "Hello, World!", + "style": { + "color": "#FFFFFF", + "fontSize": 24.0 + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text_button.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text_button.md new file mode 100644 index 00000000..ed499a47 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text_button.md @@ -0,0 +1,40 @@ +# TextButton + +Stac Text Button을 사용하면 JSON을 사용하여 Flutter text button 위젯을 빌드할 수 있습니다. +Flutter의 text button 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/TextButton-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|------------------|-------------------------|------------------------------------------------------------------------------------| +| onPressed | `Map?` | 버튼이 탭될 때 호출되는 콜백입니다. | +| onLongPress | `Map?` | 버튼이 길게 눌렸을 때 호출되는 콜백입니다. | +| onHover | `Map?` | 버튼 위에 마우스를 올렸을 때 호출되는 콜백입니다. | +| onFocusChange | `Map?` | 버튼의 포커스가 변경될 때 호출되는 콜백입니다. | +| style | `StacButtonStyle?` | 버튼에 적용할 스타일입니다. | +| autofocus | `bool` | 페이지가 로드될 때 버튼에 포커스를 맞출지 여부입니다. 기본값은 `false`입니다. | +| clipBehavior | `Clip` | 콘텐츠를 클리핑하는 방법을 결정합니다. 기본값은 `Clip.none`입니다. | +| isSemanticButton | `bool` | 이 하위 트리가 버튼을 나타내는지 결정합니다. 기본값은 `true`입니다. | +| child | `Map` | 버튼 내부에 표시할 위젯입니다. | + +## 예제 JSON + +```json +{ + "type": "textButton", + "onPressed": {}, + "onLongPress": {}, + "onHover": {}, + "onFocusChange": {}, + "style": { + "backgroundColor": "#FFC107", + "foregroundColor": "#000000" + }, + "autofocus": false, + "clipBehavior": "none", + "child": { + "type": "text", + "data": "Click Me!" + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text_field.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text_field.md new file mode 100644 index 00000000..915d982f --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text_field.md @@ -0,0 +1,51 @@ +# TextField + +Stac TextField를 사용하면 JSON을 사용하여 Flutter text field 위젯을 빌드할 수 있습니다. Flutter의 text field 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/TextField-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------------|-----------------------------|--------------------------------------------------------------------------------| +| decoration | `StacInputDecoration?` | 텍스트 필드 주위에 표시할 데코레이션입니다. | +| initialValue | `String` | 텍스트 필드에 설정될 초기 값입니다. | +| keyboardType | `StacTextInputType?` | 텍스트 편집에 사용할 키보드 유형입니다. | +| textInputAction | `TextInputAction?` | 키보드에 사용할 액션 버튼입니다. | +| textCapitalization | `TextCapitalization` | 텍스트를 대문자로 표시하는 방법입니다. | +| style | `StacTextStyle?` | 편집 중인 텍스트에 사용할 스타일입니다. | +| textAlign | `TextAlign` | 텍스트를 가로로 정렬하는 방법입니다. | +| textAlignVertical | `StacTextAlignVertical?` | 텍스트를 세로로 정렬하는 방법입니다. | +| textDirection | `TextDirection?` | 텍스트가 흐르는 방향입니다. | +| readOnly | `bool` | 텍스트 필드가 읽기 전용인지 여부입니다. | +| showCursor | `bool?` | 커서를 표시할지 여부입니다. | +| expands | `bool` | 텍스트 필드가 부모를 채우도록 확장되어야 하는지 여부입니다. | +| autofocus | `bool` | 다른 것에 이미 포커스가 맞춰져 있지 않은 경우 텍스트 필드에 자동으로 포커스를 맞출지 여부입니다. | +| obscuringCharacter | `String` | 텍스트를 가릴 때 사용할 문자입니다. | +| maxLines | `int?` | 텍스트가 차지할 최대 줄 수입니다. | +| minLines | `int?` | 텍스트가 차지할 최소 줄 수입니다. | +| maxLength | `int?` | 텍스트 필드에 허용되는 최대 문자 수입니다. | +| obscureText | `bool` | 편집 중인 텍스트를 숨길지 여부입니다. | +| enableSuggestions | `bool` | 사용자가 입력할 때 입력 제안을 표시할지 여부입니다. | +| enabled | `bool?` | 텍스트 필드가 활성화되어 있는지 여부입니다. | +| cursorWidth | `double` | 커서의 너비입니다. | +| cursorHeight | `double?` | 커서의 높이입니다. | +| cursorColor | `String?` | 커서의 색상입니다. | +| hintText | `String?` | 텍스트 필드가 비어 있을 때 표시할 힌트 텍스트입니다. | +| inputFormatters | `List` | 텍스트 필드에 적용할 입력 포매터 리스트입니다. | + +## 예제 JSON + +```json +{ + "type": "textField", + "initialValue": "Enter text here", + "decoration": { + "hintText": "Enter your name" + }, + "style": { + "color": "#000000", + "fontSize": 16.0 + }, + "textAlign": "center", + "obscureText": false, + "maxLength": 50 +} diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text_form_field.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text_form_field.md new file mode 100644 index 00000000..6f41f7d1 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/text_form_field.md @@ -0,0 +1,77 @@ +# TextFormField + +Stac TextFormField를 사용하면 JSON을 사용하여 Flutter TextFormField 위젯을 빌드할 수 있습니다. +Flutter의 TextFormField 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/TextFormField-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|-------------------------------|---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------| +| id | `String?` | 텍스트 폼 필드의 식별자입니다. | +| compareId | `String?` | 다른 텍스트 폼 필드와 비교할 식별자입니다. | +| decoration | `StacInputDecoration?` | 텍스트 폼 필드 주위에 표시할 데코레이션입니다. | +| initialValue | `String?` | 텍스트 폼 필드의 초기 값입니다. | +| keyboardType | `StacTextInputType?` | 텍스트 편집에 사용할 키보드 유형입니다. | +| textInputAction | `TextInputAction?` | 키보드에 사용할 액션 버튼입니다. | +| textCapitalization | `TextCapitalization` | 텍스트를 대문자로 표시하는 방법입니다. 기본값은 `TextCapitalization.none`입니다. | +| style | `StacTextStyle?` | 텍스트에 사용할 스타일입니다. | +| textAlign | `TextAlign` | 텍스트를 정렬하는 방법입니다. 기본값은 `TextAlign.start`입니다. | +| textAlignVertical | `StacTextAlignVertical?` | 텍스트를 세로로 정렬하는 방법입니다. | +| textDirection | `TextDirection?` | 텍스트의 방향입니다. | +| readOnly | `bool` | 텍스트 폼 필드가 읽기 전용인지 여부입니다. 기본값은 `false`입니다. | +| showCursor | `bool?` | 커서를 표시할지 여부입니다. | +| autofocus | `bool` | 다른 것에 이미 포커스가 맞춰져 있지 않은 경우 텍스트 폼 필드에 자동으로 포커스를 맞출지 여부입니다. 기본값은 `false`입니다. | +| obscuringCharacter | `String` | 텍스트를 가리는 데 사용할 문자입니다. 기본값은 `•`입니다. | +| maxLines | `int?` | 텍스트의 최대 줄 수입니다. | +| minLines | `int?` | 텍스트의 최소 줄 수입니다. | +| maxLength | `int?` | 텍스트의 최대 문자 수입니다. | +| obscureText | `bool?` | 텍스트를 가릴지 여부입니다. | +| autocorrect | `bool` | 자동 수정을 활성화할지 여부입니다. 기본값은 `true`입니다. | +| smartDashesType | `SmartDashesType?` | 사용할 스마트 대시 유형입니다. | +| smartQuotesType | `SmartQuotesType?` | 사용할 스마트 따옴표 유형입니다. | +| maxLengthEnforcement | `MaxLengthEnforcement?` | 최대 길이 제한을 적용하는 방법입니다. | +| expands | `bool` | 텍스트 폼 필드가 부모를 채우도록 확장되어야 하는지 여부입니다. 기본값은 `false`입니다. | +| keyboardAppearance | `Brightness?` | 키보드의 외관입니다. | +| scrollPadding | `StacEdgeInsets` | 스크롤할 때 텍스트 폼 필드를 삽입할 공간의 양입니다. 기본값은 `StacEdgeInsets(bottom: 20, top: 20, left: 20, right: 20)`입니다. | +| restorationId | `String?` | 텍스트 폼 필드의 상태를 저장하고 복원하기 위한 복원 ID입니다. | +| enableIMEPersonalizedLearning | `bool` | IME에서 개인화된 학습을 활성화할지 여부입니다. 기본값은 `true`입니다. | +| enableSuggestions | `bool` | 제안을 활성화할지 여부입니다. 기본값은 `true`입니다. | +| enabled | `bool?` | 텍스트 폼 필드가 활성화되어 있는지 여부입니다. | +| cursorWidth | `double` | 커서의 너비입니다. 기본값은 `2`입니다. | +| cursorHeight | `double?` | 커서의 높이입니다. | +| cursorColor | `String?` | 커서의 색상입니다. | +| hintText | `String?` | 표시할 힌트 텍스트입니다. | +| autovalidateMode | `AutovalidateMode?` | 자동 유효성 검사에 사용할 모드입니다. | +| inputFormatters | `List` | 텍스트에 적용할 입력 포매터 리스트입니다. 기본값은 빈 리스트입니다. | +| validatorRules | `List` | 텍스트에 적용할 유효성 검사 규칙 리스트입니다. 기본값은 빈 리스트입니다. | + +## 예제 JSON + +```json +{ + "type": "textFormField", + "id": "email", + "autovalidateMode": "onUserInteraction", + "validatorRules": [ + { + "rule": "isEmail", + "message": "Please enter a valid email" + } + ], + "style": { + "fontSize": 16, + "fontWeight": "w400", + "height": 1.5 + }, + "decoration": { + "hintText": "Email", + "filled": true, + "fillColor": "#FFFFFF", + "border": { + "type": "outlineInputBorder", + "borderRadius": 8, + "color": "#24151D29" + } + } +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/vertical_divider.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/vertical_divider.md new file mode 100644 index 00000000..45a1b7fc --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/vertical_divider.md @@ -0,0 +1,27 @@ +# Vertical Divider + +Stac Vertical Divider를 사용하면 JSON을 사용하여 Flutter vertical divider 위젯을 빌드할 수 있습니다. +Flutter의 vertical divider 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/material/VerticalDivider-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|------------|--------------|----------------------------------------------------| +| width | `StacDouble?` | 구분선의 너비입니다. | +| thickness | `StacDouble?` | 구분선의 두께입니다. | +| indent | `StacDouble?` | 구분선을 들여쓸 공간의 양입니다. | +| endIndent | `StacDouble?` | 끝에서 구분선을 들여쓸 공간의 양입니다. | +| color | `String?` | 구분선의 색상입니다. | + +## 예제 JSON + +```json +{ + "type": "verticalDivider", + "width": 20, + "thickness": 4, + "indent": 10, + "endIndent": 10, + "color": "#21814C" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/visibility.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/visibility.md new file mode 100644 index 00000000..c06f4b93 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/visibility.md @@ -0,0 +1,55 @@ +# Visibility + +Stac Visibility를 사용하면 JSON을 사용하여 Flutter Visibility 위젯을 빌드할 수 있습니다. +Flutter의 Visibility 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Visibility-class.html)를 참조하세요. + +--- + +## 속성 + +| Property | Type | Description | +|-------------------------|-------------------------|---------------------------------------------------------------------------------------------------| +| `child` | `Map` | `visible`이 `true`일 때 표시될 위젯입니다. | +| `replacement` | `Map?` | `visible`이 `false`일 때 표시할 위젯입니다. 기본값은 빈 위젯입니다 (`SizedBox.shrink`). | +| `visible` | `bool` | 자식이 보이는지 여부입니다. 기본값은 `true`입니다. | +| `maintainState` | `bool` | 위젯이 숨겨져 있을 때 상태를 유지할지 여부입니다. 기본값은 `false`입니다. | +| `maintainAnimation` | `bool` | 위젯이 숨겨져 있을 때 애니메이션을 유지할지 여부입니다. 기본값은 `false`입니다. | +| `maintainSize` | `bool` | 위젯이 숨겨져 있을 때 크기를 유지할지 여부입니다. 기본값은 `false`입니다. | +| `maintainSemantics` | `bool` | 위젯이 숨겨져 있을 때 의미론을 유지할지 여부입니다. 기본값은 `false`입니다. | +| `maintainInteractivity` | `bool` | 위젯이 숨겨져 있을 때 상호작용성을 유지할지 여부입니다. 기본값은 `false`입니다. | + +--- + +## 예제 JSON + +### Example 1: Basic Visibility + +```json +{ + "type": "visibility", + "child": { + "type": "text", + "data": "I am visible!" + }, + "visible": true +} +``` + +### Example 2: Hidden with Replacement + +```json +{ + "type": "visibility", + "child": { + "type": "text", + "data": "I am hidden!" + }, + "replacement": { + "type": "container", + "color": "#FF5733", + "width": 50, + "height": 50 + }, + "visible": false +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/webview.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/webview.md new file mode 100644 index 00000000..04c8be5d --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/webview.md @@ -0,0 +1,53 @@ +# WebView + +Stac WebView를 사용하면 JSON을 사용하여 앱에 WebView 위젯을 표시할 수 있습니다. [webview_flutter](https://pub.dev/packages/webview_flutter) 플러그인을 기반으로 합니다. + +## Usage + +1. pubspec.yaml 파일에 `stac_webview`를 종속성으로 추가합니다. + +프로젝트 루트에서 다음 명령을 실행하여 플러그인을 설치합니다: + +```bash +flutter pub add stac_webview +``` + +또는 `pubspec.yaml` 파일에 수동으로 추가합니다: + +```yaml + dependencies: + stac_webview: +``` + +2. Stac 초기화에 `StacWebViewParser`를 추가합니다. + +```dart +void main() async { + await Stac.initialize( + parsers: const [ + StacWebViewParser(), + ], + ); + + runApp(const MyApp()); +} +``` +## 속성 + +| Property | Type | Description | +|-------------------|------------------|-----------------------------------------------------------------------------------------| +| `url` | `String` | `WebView`에 로드할 URL입니다. | +| `javaScriptMode` | `JavaScriptMode` | JavaScript 실행이 활성화되어 있는지 설정합니다. 기본값은 `JavaScriptMode.unrestricted`입니다. | +| `backgroundColor` | `String` | `WebView`의 배경색입니다. 기본값은 `#FFFFFF`입니다. | +| `userAgent` | `String?` | `WebView`의 사용자 에이전트입니다. | +| `enableZoom` | `bool` | `WebView`에 대해 줌이 활성화되어 있는지 설정합니다. 기본값은 `false`입니다. | +| `layoutDirection` | `TextDirection` | `WebView`의 레이아웃 방향입니다. 기본값은 `TextDirection.ltr`입니다. | + +## 예제 JSON + +```json +{ + "type": "webView", + "url": "https://github.com/StacDev/stac" +} +``` diff --git a/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/wrap.md b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/wrap.md new file mode 100644 index 00000000..fd3cab74 --- /dev/null +++ b/website/i18n/ko/docusaurus-plugin-content-docs/current/widgets/wrap.md @@ -0,0 +1,97 @@ +# Wrap + +Stac wrap을 사용하면 JSON을 사용하여 Flutter wrap 위젯을 빌드할 수 있습니다. +Flutter의 wrap 위젯에 대해 자세히 알아보려면 [공식 문서](https://api.flutter.dev/flutter/widgets/Wrap-class.html)를 참조하세요. + +## 속성 + +| Property | Type | Description | +|--------------------|------------------------------|-----------------------------------------------------------------------------------------------------------------------| +| Axis | `Axis` | 주축으로 사용할 방향입니다. | +| alignment | `WrapAlignment` | 런 내의 자식들을 주축에 배치하는 방법입니다. | +| spacing | `double` | 주축의 런에서 자식들 사이에 배치할 공간의 크기입니다. | +| runAlignment | `WrapAlignment` | 런 자체를 교차축에 배치하는 방법입니다. | +| runSpacing | `double` | 교차축에서 런 자체 사이에 배치할 공간의 크기입니다. | +| crossAxisAlignment | `WrapCrossAxisAlignment` | 런 내의 자식들을 교차축에서 서로 정렬하는 방법입니다. | +| textDirection | `TextDirection` | 자식들을 가로로 배치할 순서와 가로 방향에서 시작과 끝을 해석하는 방법을 결정합니다. | +| verticalDirection | `VerticalDirection` | 자식들을 세로로 배치할 순서와 세로 방향에서 시작과 끝을 해석하는 방법을 결정합니다. | +| clipBehavior | `Clip` | 이 옵션에 따라 콘텐츠가 클리핑됩니다(또는 클리핑되지 않습니다). | +| children | `List>` | 트리에서 이 위젯 아래의 위젯들입니다. | + +## 예제 JSON + +```json +{ + "type": "wrap", + "spacing": 8.0, + "runSpacing": 4.0, + "children": [ + { + "type": "container", + "color": "#FFCDD2", + "width": 100, + "height": 100, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "1", + "style": { + "color": "#FFFFFF" + } + } + } + }, + { + "type": "container", + "color": "#F8BBD0", + "width": 100, + "height": 100, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "2", + "style": { + "color": "#FFFFFF" + } + } + } + }, + { + "type": "container", + "color": "#E1BEE7", + "width": 100, + "height": 100, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "3", + "style": { + "color": "#FFFFFF" + } + } + } + }, + { + "type": "container", + "color": "#D1C4E9", + "width": 100, + "height": 100, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "4", + "style": { + "color": "#FFFFFF" + } + } + } + }, + ] + } +``` + + diff --git a/website/i18n/ko/docusaurus-theme-classic/footer.json b/website/i18n/ko/docusaurus-theme-classic/footer.json new file mode 100644 index 00000000..f2f78b13 --- /dev/null +++ b/website/i18n/ko/docusaurus-theme-classic/footer.json @@ -0,0 +1,46 @@ +{ + "link.title.Docs": { + "message": "문서", + "description": "The title of the footer links column with title=Docs in the footer" + }, + "link.title.Community": { + "message": "커뮤니티", + "description": "The title of the footer links column with title=Community in the footer" + }, + "link.title.More": { + "message": "더보기", + "description": "The title of the footer links column with title=More in the footer" + }, + "link.item.label.Get Started": { + "message": "시작하기", + "description": "The label of footer link with label=Get Started linking to /" + }, + "link.item.label.Widgets": { + "message": "위젯", + "description": "The label of footer link with label=Widgets linking to /category/stac-widgets" + }, + "link.item.label.Actions": { + "message": "액션", + "description": "The label of footer link with label=Actions linking to /category/stac-actions" + }, + "link.item.label.Website": { + "message": "웹사이트", + "description": "The label of footer link with label=Website linking to https://stac.dev/" + }, + "link.item.label.LinkedIn": { + "message": "LinkedIn", + "description": "The label of footer link with label=LinkedIn linking to https://www.linkedin.com/company/stacdev" + }, + "link.item.label.X": { + "message": "X", + "description": "The label of footer link with label=X linking to https://x.com/stac_dev" + }, + "link.item.label.GitHub": { + "message": "GitHub", + "description": "The label of footer link with label=GitHub linking to https://github.com/StacDev/stac" + }, + "copyright": { + "message": "Copyright © 2025 Stac", + "description": "The footer copyright" + } +} diff --git a/website/i18n/ko/docusaurus-theme-classic/navbar.json b/website/i18n/ko/docusaurus-theme-classic/navbar.json new file mode 100644 index 00000000..7a3e902a --- /dev/null +++ b/website/i18n/ko/docusaurus-theme-classic/navbar.json @@ -0,0 +1,22 @@ +{ + "title": { + "message": "Stac", + "description": "The title in the navbar" + }, + "logo.alt": { + "message": "Stac 로고", + "description": "The alt text of navbar logo" + }, + "item.label.Docs": { + "message": "문서", + "description": "Navbar item with label Docs" + }, + "item.label.Playground": { + "message": "Playground", + "description": "Navbar item with label Playground" + }, + "item.label.GitHub": { + "message": "GitHub", + "description": "Navbar item with label GitHub" + } +} diff --git a/website/package.json b/website/package.json index 81a37ac9..1a0fa46f 100644 --- a/website/package.json +++ b/website/package.json @@ -5,6 +5,7 @@ "scripts": { "docusaurus": "docusaurus", "start": "docusaurus start", + "start:all": "docusaurus start --locale en --locale ko", "build": "docusaurus build", "swizzle": "docusaurus swizzle", "deploy": "docusaurus deploy",