Add Reduce Animation Setting

src/app/services/settings.service.ts

@@ -12,15 +12,17 @@ export class SettingsService {
 
   // Signals for state
   private _language = signal<Language>('EN');
-  private _darkMode = signal<boolean>(true);
-  private _romanisation = signal<boolean>(false);
+  private _darkMode = signal<boolean>(false);
+  private _romanisation = signal<boolean>(true);
   private _userName = signal<string>('Guest');
+  private _reduceAnimation = signal<boolean>(false);
 
   // Public computed or read-only signals
   language = computed(() => this._language());
   darkMode = computed(() => this._darkMode());
   romanisation = computed(() => this._romanisation());
   userName = computed(() => this._userName());
+  reduceAnimation = computed(() => this._reduceAnimation());
 
   constructor() {
     this.request = inject(REQUEST);
@@ -28,30 +30,54 @@ export class SettingsService {
   }
 
   private initializeSettings() {
+    let parsedCookie: Record<string, string>;
     if (isPlatformBrowser(this.platformId)) {
-      // 클라이언트: 브라우저 API 사용
-      this._language.set((this.getCookie('lang') as Language) || 'EN');
-      this._darkMode.set(this.getCookie('darkMode') !== 'false');
-      this._romanisation.set(this.getCookie('romanisation') === 'true');
-      this._userName.set(this.getCookie('userName') || 'Guest');
+      parsedCookie = this.parseCookies(document.cookie);
     } else if (isPlatformServer(this.platformId)) {
       const cookieHeader = this.request?.headers.get('Cookie');
 
-      if (cookieHeader) {
-        const cookies = this.parseServerCookies(cookieHeader);
+      if (!cookieHeader) return;
+      parsedCookie = this.parseCookies(cookieHeader);
+    } else return;
 
-        // console.log(cookies);
-        if (cookies['lang']) this._language.set(cookies['lang'] as Language);
-        if (cookies['darkMode'] !== undefined) this._darkMode.set(cookies['darkMode'] !== 'false');
-        if (cookies['romanisation'] !== undefined) this._romanisation.set(cookies['romanisation'] === 'true');
-        if (cookies['userName']) this._userName.set(cookies['userName']);
-      }
-    }
+    const settings = {
+      lang: parsedCookie['lang'],
+      darkMode: parsedCookie['darkMode'],
+      romanisation: parsedCookie['romanisation'],
+      userName: parsedCookie['userName'],
+      reduceAnimation: parsedCookie['reduceAnimation'],
+    };
+
+    const windowDefined = typeof window !== 'undefined';
+
+    if (!settings.lang) {
+      this.setLanguage('EN');
+    } else this._language.set(settings.lang as Language);
+
+    if (settings.darkMode === undefined) {
+      const isDarkMode = windowDefined ?
+        window.matchMedia('(prefers-color-scheme: dark)').matches : false;
+      this.setDarkMode(isDarkMode);
+    } else this._darkMode.set(settings.darkMode === 'true');
+
+    if (settings.romanisation === undefined) {
+      this.setRomanisation(true);
+    } else this._romanisation.set(settings.romanisation === 'true');
+
+    if (!settings.userName) {
+      this.setUserName('Guest');
+    } else this._userName.set(settings.userName);
+
+    if (settings.reduceAnimation === undefined) {
+      const isReduceAnimation = windowDefined ?
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches : false;
+      this.setReduceAnimation(isReduceAnimation);
+    } else this._reduceAnimation.set(settings.reduceAnimation === 'true');
   }
 
-  private parseServerCookies(cookieString: string): Record<string, string> {
+  private parseCookies(cookieString: string): Record<string, string> {
     const cookies: Record<string, string> = {};
-    cookieString.split(';').forEach(c => {
+    cookieString.split(';').forEach((c) => {
       const [key, value] = c.trim().split('=');
       if (key && value) cookies[key] = decodeURIComponent(value);
     });
@@ -78,14 +104,9 @@ export class SettingsService {
     this.setCookie('userName', name);
   }
 
-  private getCookie(name: string): string | undefined {
-    if (isPlatformBrowser(this.platformId)) {
-      const value = `; ${document.cookie}`;
-      const parts = value.split(`; ${name}=`);
-      if (parts.length === 2) return parts.pop()?.split(';').shift();
-    }
-
-    return undefined;
+  setReduceAnimation(value: boolean) {
+    this._reduceAnimation.set(value);
+    this.setCookie('reduceAnimation', value.toString());
   }
 
   private setCookie(name: string, value: string) {