# Chakra UI 디자인 시스템 ## Chakra UI 디자인 시스템 인터페이스 미리보기 빈 필드 유효성 검사, 저장 실패 시뮬레이션, 입력값 유지, 로컬 저장 확인, 테마 전환을 살펴보세요. ## Chakra UI 디자인 시스템 디자인 참고 자료 Chakra UI 3.37.0 기본 테마 참고 자료와 명시적으로 구분한 OpenDesign 애플리케이션 토큰입니다. rem 값은 루트 글꼴 크기를 기준으로 하며, 픽셀 환산값은 16px를 가정합니다. 전체 내보내기 테마가 아닌, 실제 작업에 참고할 일부 항목입니다. ### 기본 시맨틱 색상 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | bg | white / black | 밝은 모드/어두운 모드 페이지 캔버스. | | bg.panel | white / gray.950 | 밝은 모드/어두운 모드 카드 표면. | | bg.subtle | gray.50 / gray.950 | 절제된 표면. | | fg | black / gray.50 | 기본 텍스트. | | fg.muted | gray.600 / gray.400 | 보조 텍스트. | | border | gray.200 / gray.800 | 패널 및 컨트롤 경계선. | | fg.error | red.500 / red.400 | 오류 텍스트. | | bg.error | red.50 / red.950 | 오류 표면. | | teal.fg | teal.700 / teal.300 | 옅은 청록색 표면 위의 텍스트. | | teal.subtle | teal.100 / teal.900 | 현재 단계 스타일. | ### 이 예제에서 사용하는 기본 색상 값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | gray.50 | #fafafa | 밝은 캔버스. | | gray.200 | #e4e4e7 | 밝은 테두리. | | gray.800 | #27272a | 어두운 테두리. | | gray.950 | #111111 | 어두운 캔버스. | | teal.700 | #0c5d56 | 사용자 지정 밝은 모드 동작에서 이 값을 참조합니다. | | teal.300 | #5eead4 | 사용자 지정 어두운 모드 동작에서 이 값을 참조합니다. | ### 기본 간격 중 일부 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | spacing.1 | 0.25rem / 4px | 상태 표시 영역의 세로 패딩. | | spacing.2 | 0.5rem / 8px | 인라인 컨트롤 간격. | | spacing.3 | 0.75rem / 12px | 동작 그룹 간격. | | spacing.4 | 1rem / 16px | 작은 뷰포트의 패딩. | | spacing.6 | 1.5rem / 24px | 폼 필드 간 간격. | | spacing.8 | 2rem / 32px | 주요 레이아웃 간격. | | spacing.10 | 2.5rem / 40px | 사용 가능한 더 넓은 간격. | | spacing.12 | 3rem / 48px | 사용 가능한 섹션 간격. | ### 기본 타이포그래피 중 일부 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | fonts.body / fonts.heading | Inter, system fallbacks | 글꼴 토큰만으로는 Inter를 다운로드하지 않습니다. | | fontSizes.xs | 0.75rem | 예제 주석. | | fontSizes.sm | 0.875rem | 도움말 텍스트. | | fontSizes.md | 1rem | 입력란 및 일반 본문 텍스트. | | fontSizes.lg | 1.125rem | 사용 가능한 더 큰 본문 크기. | | fontSizes.xl | 1.25rem | 카드 제목. | | fontSizes.2xl | 1.5rem | 예제 제목. | | fontWeights.medium / semibold | 500 / 600 | 레이블 계층 구조. | | lineHeights.shorter / moderate | 1.25 / 1.5 | 제목/문단 간격. | | letterSpacings.wide | 0.025em | 작은 보조 제목. | ### 기본 모서리 반경 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | radii.sm | 0.25rem / 4px | 좁은 모서리. | | radii.md | 0.375rem / 6px | 이 예제의 상태 칩. | | radii.lg | 0.5rem / 8px | 적당한 둥글기. | | radii.xl | 0.75rem / 12px | 이 예제의 프로필 카드. | | radii.full | 9999px | 필 형태의 모서리. 폼에는 사용하지 않습니다. | ### 기본 반응형 중단점 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | sm | 480px | 동작 행을 가로로 배치할 수 있습니다. | | md | 768px | 진행률 열을 폼 옆에 배치합니다. | | lg | 1024px | 사용 가능한 와이드 레이아웃 중단점. | | xl | 1280px | 사용 가능한 데스크톱 중단점. | | 2xl | 1536px | 사용 가능한 초광폭 중단점. | ### 애플리케이션 시맨틱 토큰: 아래에서 정의 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | workspace.canvas | gray.50 / gray.950 | 사용자 지정 라이트/다크 캔버스 매핑입니다. | | workspace.action | brand.700 / brand.300 | 사용자 지정 액션 배경색입니다. 브랜드 프리미티브는 theme.js에 선언합니다. | | workspace.onAction | white / gray.950 | 배경색에 맞춘 사용자 지정 액션 텍스트 색상입니다. | ## Chakra UI 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Chakra UI 디자인 시스템 v3: 구성, 토큰, 컴포넌트 ### 기존 테마 객체를 전달하는 대신 시스템을 만드세요 > 구현은 세 계층으로 구성됩니다. theme.js는 디자인 결정을 정의하고, main.jsx는 그 결과로 만들어진 시스템을 제공하며, App.jsx는 양식을 구성합니다. createSystem(defaultConfig, config)는 기본 컴포넌트 레시피를 유지하면서 애플리케이션 구성을 병합합니다. 사용자 지정 시스템을 처음부터 만들려면 더 많은 정의가 필요하므로, 여기서는 기본값을 확장하는 방식을 의도적으로 선택했습니다. 미리보기에는 그려 넣은 대체 요소가 아니라 Chakra 컴포넌트를 사용합니다. 사이드바는 애플리케이션 전용 순서형 진행 목록이며, Chakra Steps 컴포넌트가 탑재되었다는 의미는 아닙니다. 프로필 카드, 필드, 선택 상자, 알림, 버튼은 Chakra 컴포넌트를 기본으로 조합해 구성합니다. 지원 사양 읽기 ### 각 계층에 포함되는 항목 - tokens: 예시에 사용된 두 가지 브랜드 색상을 비롯한 재사용 가능한 프리미티브 값입니다. - semanticTokens: 개별 화면과 무관하게 workspace.action처럼 조건에 따라 달라지는 역할을 정의합니다. - recipes: 재사용 가능한 컴포넌트 변형입니다. 애플리케이션의 React 상태에 따라 양식이 오류, 대기, 실패 또는 확인 상태가 됩니다. ## Chakra UI 디자인 시스템의 프리미티브 색상과 시맨틱 테마 역할 ### 표현 방식이 달라지는 곳에는 역할을 사용하세요 bg.panel과 fg.muted는 각각 표면과 텍스트의 역할을 나타내며, 기본 값은 gray.950과 gray.400입니다. 참고 표에는 라이트/다크 모드에서 각 값이 어떻게 적용되는지 나와 있습니다. 데모에서 문서 루트를 라이트와 다크 사이에서 전환하면 각 Field나 Card를 다시 작성하지 않아도 조건부 값이 적용됩니다. 이 로컬 전환 기능은 의도적으로 설정을 저장하거나 시스템 기본 설정과 연동하지 않습니다. workspace.* 역할은 애플리케이션에서 추가한 것입니다. 밝은 표면에는 짙은 청록색 액션을, 어두운 표면에는 옅은 청록색 액션을 선택하고, 각각에 맞는 텍스트 색상도 지정합니다. 이는 공식 Chakra 토큰 이름이 아닙니다. 색상 쌍을 테마에 함께 두면 다크 모드에서 버튼 배경만 바뀌고 레이블은 흰색으로 남는 문제를 방지할 수 있습니다. 지원 사양 읽기 ### 참조 구문은 컴포넌트의 축약 구문과 다릅니다 토큰 정의 안에서는 전체 참조 경로 {colors.gray.950}를 사용합니다. 스타일 prop에서 bg="workspace.canvas"는 color 범주 안에서 해석됩니다. 복합 CSS 값에서는 전체 토큰 경로를 다시 사용해야 합니다. 이러한 차이를 이해하면 일반 문자열을 테마 참조로 잘못 해석하는 일을 방지할 수 있습니다. ``` ``` 코드 참조 ## Chakra UI 디자인 시스템: 명시적 토큰으로 구성하는 읽기 쉬운 글자 크기 체계 ### 이 구성에 글자 크기 체계를 적용하세요 제목에는 fontSize="2xl"과 lineHeight="shorter"를 사용하고, 카드 제목에는 xl, 도움말 텍스트에는 sm, 예시 주석에는 xs를 사용합니다. 의미상 제목 단계는 바꾸지 않으면서 이러한 선택으로 계층을 만듭니다. 화면 제목은 h1이고 양식 제목은 h2입니다. 일반적인 양식 콘텐츠에는 기본 본문 크기를 유지합니다. Chakra의 기본 본문 및 제목 글꼴 스택은 Inter로 시작하고 플랫폼 글꼴을 대체 글꼴로 사용합니다. 이 독립형 데모는 외부 글꼴을 요청하지 않으므로 운영체제에 따라 렌더링되는 대체 글꼴이 달라질 수 있습니다. 정확한 타이포그래피가 필요하다면 적절한 라이선스가 있는 글꼴을 로컬에서 제공하세요. 글꼴 토큰만 설정해도 글꼴 파일이 제공되는 것은 아닙니다. 지원 사양 읽기 ### 타이포그래피와 의미를 분리하세요 현재 단계 칩은 간결한 메타데이터이지 주요 안내 문구가 아닙니다. 필수 입력 및 오류 메시지는 필드 옆에 읽기 쉬운 크기로 표시합니다. 오버라인의 자간을 변경해도 양식 레이블은 영향을 받지 않으며, 긴 워크스페이스 이름은 입력란 안에 유지해 주변 카드의 너비가 바뀌지 않도록 합니다. ## Chakra UI 디자인 시스템: Field, NativeSelect, Card, Alert 조합하기 ### Field는 스타일이 지정된 입력란이 아니라 관계를 나타냅니다 Field.Root는 레이블, 컨트롤, 도움말, 오류를 하나로 묶습니다. 필수 표시와 RequiredIndicator는 필수 입력임을 알리고, invalid는 오류 상태를 제어합니다. 이 예시에서는 React를 통해 입력값을 제어하고, workspace-name 오류를 Field.ErrorText에 표시합니다. 분리된 문단에 오류 스타일을 따로 지정하지 않습니다. 팀 규모에는 NativeSelect.Root, NativeSelect.Field, NativeSelect.Indicator를 사용합니다. 옵션이 적고 고정된 경우에도 네이티브 선택 동작을 유지할 수 있습니다. 검색 가능한 원격 결과를 제공하는 것처럼 동작하지는 않습니다. 그런 기능에는 다른 컨트롤과 데이터 상호작용 방식이 필요합니다. 지원 사양 읽기 ### 피드백은 별도의 구성 요소로 만듭니다 Card.Header에는 양식의 정체성을 나타내는 내용을, Card.Body에는 편집 가능한 내용을 넣습니다. Alert.Root는 오류 또는 성공 상태를 지정하고, Alert.Indicator는 아이콘을 제공하며, Alert.Content는 제목과 설명을 묶습니다. 저장 실패 알림은 필드 유효성 검사와 별개입니다. 워크스페이스 이름이 유효해도 시뮬레이션된 제출이 실패할 수 있기 때문입니다. 지원 사양 읽기 ## Chakra UI 디자인 시스템: 간격 토큰과 반응형 스타일 prop 적용하기 ### 구체적인 간격 정책 필드 그룹 사이에는 gap="6", 액션 사이에는 gap="3", 진행 열과 양식 사이에는 gap="8"을 사용합니다. 페이지 패딩은 md에서 p="4"에서 p="8"로 바뀝니다. 루트 글꼴 크기가 16px일 때 각각 24px, 12px, 32px, 16px, 32px에 해당합니다. rem 기반 값은 사용자의 루트 글꼴 크기에 따라 조정됩니다. 카드에는 rounded="xl"을, 상태 칩에는 rounded="md"를 사용합니다. 큰 컨테이너와 작은 레이블은 형태가 다르므로 반경도 의도적으로 다르게 설정했습니다. 이러한 사용 방식을 모든 Chakra 애플리케이션에 적용해야 하는 기본 규칙으로 해석하지 마세요. 지원 사양 읽기 ### md에서 구성을 변경하세요 md 미만에서는 그리드가 한 열로 표시되고, md부터는 220px 너비의 진행 열 옆에 유연한 양식 열이 배치됩니다. minmax(0, 1fr)을 사용하면 그리드 안에서 양식 열이 줄어들 수 있습니다. 액션 스택은 sm에서 변경됩니다. 이러한 객체 값은 모바일 우선 재정의이며 기기를 감지하는 기능이 아닙니다. ``` … … ``` 코드 참조 ## Chakra UI 디자인 시스템: 유효성 검사, 로딩, 복구 연결하기 ### 미리보기 상태 머신 공백을 제거한 이름을 제출하면 유효하지 않은 상태가 되고 입력란에 포커스가 이동합니다. 유효한 이름을 제출하면 대기 상태가 되며, 편집이 비활성화되고 Button의 loadingText가 표시됩니다. 로컬 타이머가 끝난 뒤 실패 체크박스의 선택 여부에 따라 실패 또는 완료 상태가 표시됩니다. 어느 경우에도 네트워크 요청을 보내거나 데이터를 저장하지 않습니다. 실패 결과가 표시되어도 제어되는 이름과 선택한 크기는 그대로 유지됩니다. 실패 시뮬레이션을 끄면 다시 시도할 수 있습니다. 완료되면 프로필 필드가 비활성화되고 첫 번째 진행 상태 칩이 바뀝니다. Reset을 누르면 편집 상태로 돌아갑니다. 이 예제는 화면에 표시되는 상태 조합을 보여 주며, 백엔드 저장 동작을 보장하지는 않습니다. 지원 사양 읽기 ### 순서대로 상태 확인하기 1. 양식을 초기화한 뒤 이름을 입력하지 않고 제출해 필드 메시지와 포커스가 이동한 입력란을 확인합니다. 2. 이름을 입력하고 저장 실패 시뮬레이션을 켠 뒤 제출합니다. 오류가 표시된 뒤에도 값이 유지되는지 확인합니다. 3. 실패 시뮬레이션을 끄고 다시 제출합니다. 확인 요약을 살펴본 뒤 표시 스타일을 변경합니다. ## Chakra UI 네이티브 시맨틱을 합성 과정에서도 유지하는 디자인 시스템 ### 유효성 검사와 진행 상태를 명확하게 전달합니다 이 예제는 noValidate를 사용해 브라우저의 기본 유효성 검사 UI 대신 사용자 지정 Field 오류 경로를 보여 줍니다. Field를 사용해 레이블과 입력란의 연결을 유지하고, 유효하지 않은 첫 번째 입력란에 포커스를 둡니다. 대기 중인 작업은 라이브 상태 영역으로 알립니다. 스피너만으로 상태를 전달하지 않습니다. 진행 목록에는 순서 있는 목록 시맨틱을 사용하고, 활성 항목에는 aria-current="step"을 적용합니다. 사용할 수 없는 화면으로 연결되는 가짜 링크는 넣지 않았습니다. 미리보기의 두 번째와 세 번째 단계는 맥락을 설명하는 용도이며 클릭할 수 없습니다. 이를 통해 예제의 범위를 명확히 보여 줍니다. 지원 사양 읽기 ### 포커스는 사용자 지정 동작 레시피의 일부입니다 온보딩 변형에는 오프셋을 포함한 명시적인 focus-visible 윤곽선을 정의했습니다. 어두운 화면 스타일로 전환하면 동작 역할과 함께 윤곽선 역할도 바뀝니다. 네이티브 체크박스와 선택 상자는 키보드로 조작할 수 있습니다. 컴포넌트 수준의 예제만으로 전체 온보딩 제품의 접근성을 보장할 수는 없으므로, 이를 사용하는 애플리케이션에서도 포커스, 필드 알림, 확대/축소, 스크린 리더 출력을 확인하세요. ## Chakra UI 디자인 시스템 레시피, Provider 연결, 버전 경계 ### Button을 확장하고 Status는 로컬에서 정의합니다 온보딩용 Button 변형은 theme.recipes.button에 추가합니다. 구성에서 defaultConfig를 확장하므로 outline 같은 기존 변형도 계속 사용할 수 있습니다. 상태 칩은 defineRecipe와 useRecipe를 사용해 로컬에서 정의합니다. 상태별 변형은 current, complete, waiting을 서로 다른 의미 역할에 연결합니다. 이는 애플리케이션 컴포넌트이며 Chakra에서 내보내는 컴포넌트가 아닙니다. 단일 요소 레시피는 스타일 객체 하나를 반환합니다. Field처럼 여러 부분으로 이루어진 컴포넌트는 각 부분을 함께 테마에 적용할 때 슬롯 레시피가 필요합니다. 버튼 스타일 레시피를 Field 전체에 적용하면 레이블, 입력 컨트롤, 오류 메시지를 각각 제어할 수 없습니다. 지원 사양 읽기 ### 제공된 파일을 함께 사용하세요 설정 명령을 사용해 Vite React 프로젝트를 만들고, 기본 App 및 main 모듈을 아래 예제로 바꾼 다음 theme.js를 추가합니다. JSX 예제에서는 JavaScript을 사용하므로 사용자 지정 토큰 및 변형 이름에 TypeScript 선언을 생성할 필요가 없습니다. TypeScript로 적용할 경우 테마 파일을 대상으로 Chakra CLI typegen을 실행해야 합니다. v2의 extendTheme 설정을 가져오거나 이 v3 Provider에 theme={...}을 전달하지 마세요. 실제 루트에서는 ChakraProvider value={system}을 사용합니다. 이 예제에는 두 번째 색상 모드 Provider를 의도적으로 추가하지 않았습니다. 독립적인 미리보기에는 로컬 light/dark 클래스 전환으로 충분하지만, 실제 앱에서는 환경설정 저장과 서버 렌더링 지원이 필요할 수 있습니다. 지원 사양 읽기 ## Chakra UI 테마와 양식을 함께 확인하는 디자인 시스템 ### 이 예제로 확인할 수 있는 항목 검토에 적합한 단위는 두 가지 화면 스타일의 프로필 카드 전체입니다. 레이블, 입력란, 도움말 텍스트, 유효성 오류, 대기 중 버튼, 실패 알림, 성공 요약이 모두 포함됩니다. 버튼 하나만으로는 의미에 맞지 않는 배경이나 레이블과 연결되지 않은 오류 상태를 발견할 수 없습니다. 기준 표의 규칙을 실제 인터페이스에 적용된 값과 비교합니다. 사용자 지정 청록색 동작 스타일은 기본 윤곽선 동작 스타일과 달라야 하고, 간격 6은 필드 사이에 적용되어야 하며, md 아래에서는 그리드가 한 열로 바뀌어야 합니다. 이러한 확인을 통해 문서의 규칙과 렌더링 결과를 연결할 수 있습니다. ### 예제에서 다루지 않는 항목 미리보기에는 계정 생성, 초대 전송, 데이터 저장, 인증, 다른 온보딩 화면과의 연동 기능이 없습니다. 타이머는 시뮬레이션임을 명시합니다. 실제 엔드포인트를 연결할 때는 여기서 보여 준 필드 상태와 요청 상태의 구분을 유지하고, 타이머를 요청으로 바꾸세요. 또한 완료가 로컬에서 수락된 상태인지, 원격 저장이 끝난 상태인지, 완전히 활성화된 상태인지 정의해야 합니다. ## Chakra UI 디자인 시스템 컴포넌트 예제 ### theme.js — 원시 토큰, 의미 역할, 레시피 예제에서 사용하는 전체 애플리케이션 테마입니다. 워크스페이스 역할과 온보딩 변형은 새로 추가한 항목이며, defaultConfig는 Chakra의 기본 테마를 제공합니다. ``` import { createSystem, defaultConfig, defineConfig, defineRecipe } from '@chakra-ui/react'; export const statusRecipe = defineRecipe({ base: { display: 'inline-flex', px: '2', py: '1', rounded: 'md', fontSize: 'xs', fontWeight: 'semibold' }, variants: { state: { current: { bg: 'teal.subtle', color: 'teal.fg' }, complete: { bg: 'bg.success', color: 'fg.success' }, waiting: { bg: 'bg.muted', color: 'fg.muted' }, }, }, defaultVariants: { state: 'waiting' }, }); const config = defineConfig({ theme: { tokens: { colors: { brand: { 700: { value: '#0c5d56' }, 300: { value: '#5eead4' } } } }, semanticTokens: { colors: { 'workspace.canvas': { value: { base: '{colors.gray.50}', _dark: '{colors.gray.950}' } }, 'workspace.action': { value: { base: '{colors.brand.700}', _dark: '{colors.brand.300}' } }, 'workspace.onAction': { value: { base: '{colors.white}', _dark: '{colors.gray.950}' } }, } }, recipes: { button: defineRecipe({ variants: { variant: { onboarding: { bg: 'workspace.action', color: 'workspace.onAction', _hover: { opacity: 0.9 }, _focusVisible: { outline: '2px solid', outlineColor: 'workspace.action', outlineOffset: '2px' }, }, } } }), }, }, }); export const system = createSystem(defaultConfig, config); ``` 코드 참조 - 브랜드 값은 참조된 청록색 원시 토큰과 의도적으로 일치시켰습니다. - 상태 레시피는 로컬에서 정의하고, Button 변형은 시스템에 등록합니다. ### App.jsx — 네이티브 양식 및 상태 예제 전체 미리보기에서 사용하는 실제 React 구성입니다. 테마 전환, Field 유효성 검사, 네이티브 선택 상자, 대기 중 피드백, 실패 시뮬레이션, 확인, 초기화가 포함됩니다. ``` import React, { useEffect, useRef, useState } from 'react'; import { Box, Button, Card, Field, Grid, Heading, Input, NativeSelect, Stack, Text, Alert, chakra, useRecipe } from '@chakra-ui/react'; import { statusRecipe } from './theme'; function Status({ state, children }) { const recipe = useRecipe({ recipe: statusRecipe }); return {children}; } export default function App() { const [dark, setDark] = useState(false); useEffect(() => { document.documentElement.className = dark ? 'dark' : 'light'; }, [dark]); const [name, setName] = useState('Northstar Studio'); const [size, setSize] = useState('2–10'); const [invalid, setInvalid] = useState(false); const [phase, setPhase] = useState('editing'); const [simulateFailure, setSimulateFailure] = useState(false); const nameInput = useRef(null); const pending = phase === 'pending'; const complete = phase === 'complete'; const save = (event) => { event.preventDefault(); if (!name.trim()) { setInvalid(true); nameInput.current?.focus(); return; } setInvalid(false); setPhase('pending'); window.setTimeout(() => setPhase(simulateFailure ? 'failed' : 'complete'), 600); }; return CHAKRA UI · NATIVE SPECIMENSet up your workspace {complete ? 'Complete' : 'Current'}1. Workspace profileName and team size Next2. Invite your teamAvailable in the full product Optional3. Connect toolsComplete this later Scale in this specimenField gap 6 · Card padding 6
Page gap 8 · Radius xl Workspace profileThe name appears on your team's workspace.
Workspace name {setName(e.target.value);setInvalid(false);}} autoComplete='organization' /> Use a name your teammates will recognize. Enter a workspace name. Team size setSize(e.target.value)}> Used only for this local preview summary. {phase === 'failed' && Demo save failedYour values are still here. Turn off failure simulation and retry.} {complete && Profile confirmed in this preview{name.trim()} · {size} people. Nothing was sent or stored.} {pending ? 'Simulating a response. No network request is made.' : complete ? 'Profile step complete. Reset to try another state.' : 'Try an empty name, a failed save, or a different appearance.'}
Actual Chakra UI 3.37.0 components. Custom workspace semantic tokens and button recipe. Memory-only demonstration. ; } ``` 코드 참조 - 요청을 보내지 않습니다. 600ms 지연은 대기 중 UI를 보여 주기 위한 것입니다. - 다음 단계는 맥락을 나타내는 레이블이며, 실제로 이동하지 않습니다. ## Chakra UI 디자인 시스템 에이전트 설정 ### 구현 시작점 설치된 Vite 릴리스와 Chakra가 지원하는 Node.js를 사용하세요. Chakra는 Node 20 이상을 안내합니다. 이 블록에서는 터미널 명령과 src/main.jsx를 구분합니다. 전체 테마 및 App 파일은 위에 제공되어 있으므로 숨겨진 Provider 코드 조각이나 외부 CSS는 필요하지 않습니다. ``` # Terminal: create a JavaScript React application npm create vite@latest chakra-profile -- --template react cd chakra-profile npm install npm install @chakra-ui/react@3.37.0 @emotion/react # Save the two complete examples as src/theme.js and src/App.jsx. # Replace src/main.jsx with: import React from 'react'; import { createRoot } from 'react-dom/client'; import { ChakraProvider } from '@chakra-ui/react'; import { system } from './theme'; import App from './App'; createRoot(document.getElementById('root')).render(); # Start from the project directory: npm run dev ``` ### 프로젝트를 위한 프롬프트 ``` Chakra UI 3.37.0과 제공된 theme.js 및 App.jsx를 시작점으로 사용하세요. workspace 의미 역할, Field 구성, 기본 select, 잘못된 입력과 제출 실패의 구분을 유지하세요. 시뮬레이션 타이머만 실제 영속성 API으로 교체하고, 결과가 확인되기 전에 프로필을 완료로 표시하지 마세요. 키보드 포커스, 반응형 base/md 레이아웃, 라이트/다크 값을 유지하세요. 새 토큰이나 레시피 변형이 있다면 설명하세요. ``` ## Chakra UI 디자인 시스템의 출처와 범위 문서화된 Chakra UI v3 기반을 사용하는 OpenDesign의 공식 구현 가이드입니다. 기본 토큰 참조와 애플리케이션별 workspace 역할을 구분합니다. 기본 제공 미리보기는 로컬 상태를 보여주는 예시로, workspace 데이터를 저장하거나 온보딩 여정 전체를 구현하지 않습니다. - 아키텍처 Chakra UI 공식 아키텍처 참고 자료 - 토큰 Chakra UI 공식 토큰 참고 자료 - 시맨틱 Chakra UI 공식 시맨틱 참고 자료 - 색상 Chakra UI 공식 색상 참고 자료 - 간격 Chakra UI 공식 간격 참고 자료 - 타이포그래피 Chakra UI 공식 타이포그래피 참고 자료 - 모서리 반경 Chakra UI 공식 모서리 반경 참고 자료 - 중단점 Chakra UI 공식 중단점 참고 자료 - 레시피 Chakra UI 공식 레시피 참고 자료 - 사용자 지정 레시피 Chakra UI 공식 사용자 지정 레시피 참고 자료 - Field Chakra UI 공식 Field 참고 자료 - Button Chakra UI 공식 버튼 참고 자료 - 카드 Chakra UI 공식 카드 참고 자료 - 기본 select Chakra UI 공식 기본 select 참고 자료 - 알림 Chakra UI 공식 알림 참고 자료 - 반응형 Chakra UI 공식 반응형 참고 자료 - 설치 Chakra UI 공식 설치 참고 자료 ## Chakra UI 디자인 시스템 관련 리소스 ### CoreUI 실제 5.9 테마 변수, 네이티브 탭, 체크박스를 이용한 일괄 선택, 그리고 마지막 로컬 보관 작업을 되돌릴 수 있는 지속형 토스트를 사용해 만든 CoreUI 검토 대기열입니다. ### daisyUI CSS 네이티브 초대장 제작 도구로, daisyUI의 시맨틱 테마 5종, 쌍을 이루는 콘텐츠 색상, 라디오 버튼 그룹, 범위 입력 컨트롤, 브라우저 유효성 검사, 실제 대화상자를 통한 검토 단계를 보여 줍니다. ### Element Plus Element Plus의 실제 Transfer 모델, 필터, 비활성화 옵션을 사용해 모듈 선택 작업대를 구성하세요. 검증된 색상, 글자 크기, 컨트롤 치수를 적용하세요. - [구현 레퍼런스](https://chakra-ui.com/docs/components/field) - [출처](https://chakra-ui.com/docs/theming/colors) - [출처](https://chakra-ui.com/docs/theming/spacing) - [출처](https://chakra-ui.com/docs/theming/typography) - [출처](https://chakra-ui.com/docs/theming/radii) - [출처](https://chakra-ui.com/docs/theming/breakpoints) - [출처](https://chakra-ui.com/docs/theming/semantic-tokens) - [지원 사양 읽기](https://chakra-ui.com/docs/theming/overview) - [지원 사양 읽기](https://chakra-ui.com/docs/theming/semantic-tokens) - [코드 참조](https://chakra-ui.com/docs/theming/tokens) - [지원 사양 읽기](https://chakra-ui.com/docs/theming/typography) - [지원 사양 읽기](https://chakra-ui.com/docs/components/field) - [지원 사양 읽기](https://chakra-ui.com/docs/components/alert) - [지원 사양 읽기](https://chakra-ui.com/docs/theming/spacing) - [코드 참조](https://chakra-ui.com/docs/styling/responsive-design) - [지원 사양 읽기](https://chakra-ui.com/docs/components/button) - [지원 사양 읽기](https://chakra-ui.com/docs/theming/recipes) - [코드 참조](https://chakra-ui.com/docs/theming/overview) - [코드 참조](https://chakra-ui.com/docs/components/field) - [아키텍처 Chakra UI 공식 아키텍처 참고 자료](https://chakra-ui.com/docs/theming/overview) - [토큰 Chakra UI 공식 토큰 참고 자료](https://chakra-ui.com/docs/theming/tokens) - [시맨틱 Chakra UI 공식 시맨틱 참고 자료](https://chakra-ui.com/docs/theming/semantic-tokens) - [색상 Chakra UI 공식 색상 참고 자료](https://chakra-ui.com/docs/theming/colors) - [간격 Chakra UI 공식 간격 참고 자료](https://chakra-ui.com/docs/theming/spacing) - [타이포그래피 Chakra UI 공식 타이포그래피 참고 자료](https://chakra-ui.com/docs/theming/typography) - [모서리 반경 Chakra UI 공식 모서리 반경 참고 자료](https://chakra-ui.com/docs/theming/radii) - [중단점 Chakra UI 공식 중단점 참고 자료](https://chakra-ui.com/docs/theming/breakpoints) - [레시피 Chakra UI 공식 레시피 참고 자료](https://chakra-ui.com/docs/theming/recipes) - [사용자 지정 레시피 Chakra UI 공식 사용자 지정 레시피 참고 자료](https://chakra-ui.com/docs/theming/customization/recipes) - [Field Chakra UI 공식 Field 참고 자료](https://chakra-ui.com/docs/components/field) - [Button Chakra UI 공식 버튼 참고 자료](https://chakra-ui.com/docs/components/button) - [카드 Chakra UI 공식 카드 참고 자료](https://chakra-ui.com/docs/components/card) - [기본 select Chakra UI 공식 기본 select 참고 자료](https://chakra-ui.com/docs/components/native-select) - [알림 Chakra UI 공식 알림 참고 자료](https://chakra-ui.com/docs/components/alert) - [반응형 Chakra UI 공식 반응형 참고 자료](https://chakra-ui.com/docs/styling/responsive-design) - [설치 Chakra UI 공식 설치 참고 자료](https://chakra-ui.com/docs/get-started/installation)