Supaplate Docs
🇬🇧🇰🇷

Features

Settings

Supaplate에는 사용자가 선호하는 언어와 원하는 테마(라이트 또는 다크 모드)를 선택할 수 있는 설정 기능이 포함되어 있습니다.

이 섹션에서는 이러한 기능의 작동 방식과 환경 설정 방법을 설명합니다.

Settings

작동 방식

언어 및 테마 설정 값은 쿠키에 저장됩니다.

app/root.tsx 파일의 loader 함수에는 쿠키를 읽고 locale 과 theme 값을 가져오는 코드가 포함되어 있습니다.

export async function loader({ request }: Route.LoaderArgs) {
  // ...
  const [{ getTheme }, locale] = await Promise.all([
    themeSessionResolver(request),
    i18next.getLocale(request),
  ])
  return {
    theme: getTheme(),
    locale,
  }
}

이 두 값은 app/root.tsx 파일의 <html> 태그 lang 및 className 속성에 설정됩니다.

<html
  lang={data?.locale ?? 'en'}
  className={cn(theme ?? '', 'h-full')}
  dir={i18n.dir()}
>
  // ...
</html>

언어 설정(Locale)

언어 설정은 i18next로 구동됩니다.

i18next는 <html>태그의lang` 속성을 사용하여 어떤 언어를 사용할지 결정합니다.

번역 파일

번역 파일은 ./app/locales 디렉토리에 저장됩니다.

파일 이름은 언어 코드의 이름을 따라서 지정됩니다.

├── 📄en.ts
├── 📄es.ts
└── 📄ko.ts

각 파일 안에는 번역하려는 문자열에 대한 번역을 넣을 수 있습니다.

// en.ts
const en = {
  home: {
    title: 'Supaplate',
    subtitle: "It's time to build!",
  },
  ...
}

// es.ts
const es: Translation = {
  home: {
    title: 'Supaplate',
    subtitle: 'Es hora de construir!',
  },
  ...
}

const ko: Translation = {
  home: {
    title: "슈파플레이트",
    subtitle: "빌드하는 시간이야!",
  },
  ...
};

번역 사용하기

번역을 사용하려면 useTranslation 훅을 사용하면 됩니다.

import { useTranslation } from 'react-i18next'

import i18next from '~/core/lib/i18next.server'

export const meta: Route.MetaFunction = ({ data }) => {
  return [
    { title: data?.title },
    { name: 'description', content: data?.subtitle },
  ]
}

export async function loader({ request }: Route.LoaderArgs) {
  const t = await i18next.getFixedT(request)
  return {
    title: t('home.title'),
    subtitle: t('home.subtitle'),
  }
}

export default function Home() {
  const { t } = useTranslation()

  return <div>{t('home.title')}</div>
}

타입 안전성

타입 안전성을 보장하기 위해, './app/locales/types.ts' 파일에서 내보낸 Translation 타입을 사용할 수 있습니다.

export type Translation = {
  home: {
    title: string
    subtitle: string
  }
}

새 번역을 추가할 때 항상 먼저 Translation 타입에 추가하세요. 이렇게 하면 번역 파일에 추가하는 것을 잊었을 때 에러가 발생합니다.

테마 설정

다크 모드를 추가하려면 Tailwind CSS의 dark 수정자를 사용하면 됩니다.

<div className="dark:bg-black"> ... </div>

Tailwind CSS의 다크 모드에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

설정 수정하기

/core/components/ 디렉토리에는 lang-switcher.tsx와 theme-switcher.tsx라는 두 개의 컴포넌트가 있습니다.

이 컴포넌트들은 애플리케이션에서 원하는 위치에 배치할 수 있으며, 기본적으로 네비게이션 바에 표시됩니다.

lang-switcher.tsx는 애플리케이션의 언어를 변경하기 위해 검색 매개변수에 새 언어 설정(locale)을 포함하여 /api/settings/locale 경로로 POST 요청을 보냅니다.

그리고 theme-switcher.tsx는 검색 매개변수의 새 테마를 포함하여 /api/settings/theme 경로로 POST 요청을 보내 애플리케이션의 테마를 변경합니다.

설정 비활성화하기

설정 기능을 사용하지 않으려면 lang-switcher.tsx 또는 theme-switcher.tsx 구성 요소와 설정을 변경하는 데 사용되는 경로를 숨기면 됩니다.

Previous
Users
Next
Cron Jobs