corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(i18n): 사용자 문구 참조를 중앙화

Browse Source
This commit is contained in:
corpi
2026-03-10 13:32:37 +09:00
parent 92a509ebb6
commit 1717f335f0
44 changed files with 433 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/widgets/settings-panel/ui/SettingsPanelWidget.tsx
View File

@@ -5,10 +5,12 @@ import {
DEFAULT_PRESET_OPTIONS,
NOTIFICATION_INTENSITY_OPTIONS,
} from '@/shared/config/settingsOptions';
import { copy } from '@/shared/i18n';
import { useUserFocusPreferences } from '@/features/preferences';
import { cn } from '@/shared/lib/cn';
export const SettingsPanelWidget = () => {
const { settings } = copy;
const {
preferences,
isLoading,
@@ -22,12 +24,12 @@ export const SettingsPanelWidget = () => {
<div className="min-h-screen bg-[radial-gradient(circle_at_82%_0%,rgba(167,204,237,0.42),transparent_50%),radial-gradient(circle_at_12%_8%,rgba(191,219,254,0.4),transparent_46%),linear-gradient(170deg,#f8fafc_0%,#eef4fb_54%,#e8f1fa_100%)] text-brand-dark">
<div className="mx-auto w-full max-w-4xl px-4 pb-10 pt-6 sm:px-6">
<header className="mb-6 flex items-center justify-between rounded-xl border border-brand-dark/12 bg-white/72 px-4 py-3 backdrop-blur-sm">
<h1 className="text-xl font-semibold">Settings</h1>
<h1 className="text-xl font-semibold">{settings.title}</h1>
<Link
href="/app"
className="rounded-lg border border-brand-dark/16 px-3 py-1.5 text-xs text-brand-dark/82 transition hover:bg-white/90"
>
허브로
{copy.common.hub}
</Link>
</header>
@@ -35,13 +37,13 @@ export const SettingsPanelWidget = () => {
<section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
<div className="flex flex-wrap items-center justify-between gap-2">
<div>
<h2 className="text-base font-semibold text-brand-dark">Focus Preferences API</h2>
<h2 className="text-base font-semibold text-brand-dark">{settings.focusPreferencesApi}</h2>
<p className="mt-1 text-sm text-brand-dark/64">
{isLoading
? '저장된 설정을 불러오는 중이에요.'
? settings.loading
: isSaving
? '변경 사항을 저장하는 중이에요.'
: '변경 즉시 서버에 저장합니다.'}
? settings.saving
: settings.synced}
</p>
</div>
{saveStateLabel ? (
@@ -56,9 +58,9 @@ export const SettingsPanelWidget = () => {
<section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
<div className="flex items-center justify-between gap-3">
<div>
<h2 className="text-base font-semibold text-brand-dark">Reduce Motion</h2>
<h2 className="text-base font-semibold text-brand-dark">{settings.reduceMotionTitle}</h2>
<p className="mt-1 text-sm text-brand-dark/64">
전환 애니메이션을 최소화합니다. (UI 토글 목업)
{settings.reduceMotionDescription}
</p>
</div>
<button
@@ -88,8 +90,8 @@ export const SettingsPanelWidget = () => {
</section>
<section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
<h2 className="text-base font-semibold text-brand-dark">알림 강도</h2>
<p className="mt-1 text-sm text-brand-dark/64">집중 시작/종료 신호의 존재감을 선택합니다.</p>
<h2 className="text-base font-semibold text-brand-dark">{settings.notificationIntensityTitle}</h2>
<p className="mt-1 text-sm text-brand-dark/64">{settings.notificationIntensityDescription}</p>
<div className="mt-3 flex flex-wrap gap-2">
{NOTIFICATION_INTENSITY_OPTIONS.map((option) => (
<button
@@ -112,8 +114,8 @@ export const SettingsPanelWidget = () => {
</section>
<section className="rounded-xl border border-brand-dark/12 bg-white/78 p-4 backdrop-blur-sm">
<h2 className="text-base font-semibold text-brand-dark">기본 프리셋</h2>
<p className="mt-1 text-sm text-brand-dark/64">입장 시 자동 선택될 추천 세트를 고릅니다.</p>
<h2 className="text-base font-semibold text-brand-dark">{settings.defaultPresetTitle}</h2>
<p className="mt-1 text-sm text-brand-dark/64">{settings.defaultPresetDescription}</p>
<div className="mt-3 space-y-2">
{DEFAULT_PRESET_OPTIONS.map((preset) => (
<button