Todae

Todae

시작하기

Todae를 설치하고, 스타일시트를 한 번 로드하고, 앱을 프로바이더로 감쌉니다. Next.js 앱은 Todae의 파트를 클라이언트 컴포넌트 안에 둡니다.

이 페이지의 내용

설치

npm install @tounsoo/todae

Todae에는 React 19가 필요하고, 타입에는 TypeScript 6 이상이 필요합니다. create-next-app 16으로 만든 앱은 TypeScript 5로 시작하므로 npm이 피어 의존성 오류(ERESOLVE)로 멈춥니다. Next.js의 ESLint 설정이 쓰는 typescript-eslint는 6.1보다 낮은 TypeScript를 지원하므로, TypeScript 6.0을 Todae와 함께 설치하세요.

npm install @tounsoo/todae typescript@~6.0

스타일시트 로드

Todae의 스타일시트는 CSS 진입 파일에서 한 번 import합니다.

@import '@tounsoo/todae/todae.css';

Todae의 CSS는 todae 캐스케이드 레이어에 있고, 어떤 레이어에도 속하지 않은 CSS는 Todae의 일반 선언을 이깁니다. 그래서 * { padding: 0; }이나 a { text-decoration: none; } 같은 앱 자체 리셋은 Todae 버튼의 패딩과 링크의 밑줄을 지웁니다. Tailwind CSS 없이 만든 Next.js 앱의 globals.css에는 둘 다 있습니다. CSS 레이어에 나온 대로 리셋은 todae보다 앞에 이름을 둔 레이어에 넣고, Tailwind CSS를 쓴다면 Todae를 Tailwind의 리셋과 유틸리티 사이에 둡니다. postcss-import는 패키지의 exports를 읽지 않으므로, 그것을 쓸 때는 @tounsoo/todae/dist/todae.css를 import합니다. Tailwind CSS 4나 postcss-import 없이 Next.js를 쓴다면 스타일시트는 아래 Next.js 섹션에 나온 대로 import합니다.

앱 감싸기

import { Button, DensityProvider, ThemeProvider } from '@tounsoo/todae';

export function App() {
  return (
    <ThemeProvider appearance="system">
      <DensityProvider density="comfortable">
        <Button.Root>Save</Button.Root>
      </DensityProvider>
    </ThemeProvider>
  );
}

appearance="system"은 사용자의 라이트 또는 다크 설정을 따릅니다. 두 프로바이더는 모두 선택 사항입니다. 없으면 페이지는 라이트, comfortable입니다. Next.js에서는 다음 섹션에 나온 대로 이 코드를 클라이언트 컴포넌트에 둡니다.

Next.js

메인 진입점 @tounsoo/todae는 클라이언트 모듈입니다. 루트 레이아웃 같은 Server Component는 그 프로바이더는 렌더링할 수 있지만 Button.Root 같은 파트는 렌더링할 수 없습니다. 파트가 그곳에서 undefined가 되어 "Element type is invalid" 오류로 렌더링이 실패합니다. 파트는 'use client'로 시작하는 파일에서 씁니다.

'use client';

import { Button } from '@tounsoo/todae';

export function SaveButton() {
  return <Button.Root>Save</Button.Root>;
}

Stack과 Text 같은 일부 컴포넌트에는 Server Component가 렌더링할 수 있는 진입점도 있습니다. 예를 들어 @tounsoo/todae/stack입니다. 각 컴포넌트 페이지에 그 이름이 나옵니다.

Next.js는 CSS 파일이 import한 스타일시트를 그 파일보다 먼저 로드합니다. Tailwind CSS 4나 postcss-import가 그것을 인라인으로 넣을 때는 예외입니다. 그래서 둘 다 없다면 CSS 레이어에 나온 대로 @layer 문을 layers.css 같은 별도 파일에 쓰고, globals.css의 리셋은 reset 레이어로 옮깁니다.

@layer reset, todae;

그다음 루트 레이아웃에서 파일을 그 순서대로 import하고, globals.css에 Todae CSS의 @import가 있다면 지웁니다.

import type { ReactNode } from 'react';
import { ThemeProvider } from '@tounsoo/todae';
import './layers.css';
import '@tounsoo/todae/todae.css';
import './globals.css';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider appearance="system">{children}</ThemeProvider>
      </body>
    </html>
  );
}

날짜와 시각

Calendar, 날짜와 시각 선택기, 그 텍스트 도우미는 전역 Temporal 객체를 쓰고, Todae는 그 폴리필을 포함하지 않습니다. 브라우저에 Temporal이 없다면 temporal-polyfill/global 같은 폴리필을 전역으로 로드하세요. 어떤 파트에 필요하고 없으면 어떻게 되는지는 네이티브 플랫폼에 있습니다.

다음 단계

  • Todae로 디자인 시스템 만들기는 회사 토큰을 Todae 토큰 위에 쌓고 파트를 감싸는 방법을 설명합니다.
  • 토큰은 Todae가 제공하는 모든 토큰을 나열합니다.
  • MCP 서버는 AI 에이전트에 Todae의 컴포넌트, 토큰, 토큰 빌드를 제공합니다.