Add Automatic Seasonal Themes and Theme Controls

eslint.config.mjs

@@ -54,17 +54,20 @@ export default [
       'react/jsx-uses-react': 'off',
       'react/jsx-uses-vars': 'error',
       'react/prop-types': 0,
-      camelcase: [
-        'error',
-        { properties: 'always', ignoreDestructuring: true },
-      ],
+      camelcase: ['error', { properties: 'always', ignoreDestructuring: true }],
       'simple-import-sort/imports': 'error',
       'simple-import-sort/exports': 'error',
       'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/exhaustive-deps': [
-        'warn',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+  {
+    files: ['src/app/components/seasonal/SummerLensFlareEffect.tsx'],
+    rules: {
+      'react/no-unknown-property': [
+        'error',
         {
-          additionalHooks: 'useRecoilCallback',
+          ignore: ['dispose', 'object'],
         },
       ],
     },

index.html

@@ -14,6 +14,7 @@
     <meta name="msapplication-TileColor" content="#FFFFFF">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="theme-color" content="#FFFFFF">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover" />
     <meta name="google" content="notranslate">
     <title>버스하냥 - 한양대 ERICA 셔틀버스 시간표 서비스</title>
@@ -77,25 +78,39 @@
       height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <script>
-      var meta = document.createElement('meta')
-      meta.name = 'theme-color'
-      if (window.localStorage.getItem('theme') === 'dark') {
-        meta.content = '#27272A'
-        document.body.style.backgroundColor = '#27272A'
-      } else if (window.localStorage.getItem('theme') === 'christmas') {
-        meta.content = '#b23e3e'
-        document.body.style.backgroundColor = '#b23e3e'
-      } else if (window.localStorage.getItem('theme') === 'spring') {
-        meta.content = '#fff4f4'
-        document.body.style.backgroundColor = '#fff4f4'
-      } else if (window.localStorage.getItem('theme') === 'frozen') {
-        meta.content = '#eff8ff'
-        document.body.style.backgroundColor = '#eff8ff'
-      } else {
-        meta.content = '#FFFFFF'
-        document.body.style.backgroundColor = '#FFFFFF'
-      }
-      document.getElementsByTagName('head')[0].appendChild(meta)
+      ;(() => {
+        const seasonal = /^(christmas|spring|summer|autumn|winter)$/
+        const normalize = (theme) =>
+          theme === 'frozen' ? 'winter' : seasonal.test(theme) ? theme : null
+        const automatic = () => {
+          const [month, day] = new Intl.DateTimeFormat('en-US', {
+            timeZone: 'Asia/Seoul', month: '2-digit', day: '2-digit',
+          }).format(new Date()).split('/').map(Number)
+          const monthDay = month * 100 + day
+          return monthDay >= 1215 && monthDay <= 1226 ? 'christmas'
+            : monthDay >= 1107 || monthDay < 204 ? 'winter'
+            : monthDay >= 807 ? 'autumn'
+            : monthDay >= 505 ? 'summer' : 'spring'
+        }
+
+        const storedTheme = window.localStorage.getItem('theme')
+        const storedSeason = normalize(storedTheme)
+        const preference = window.localStorage.getItem('seasonalThemeEnabled')
+        const enabled = preference === 'true' ||
+          (preference !== 'false' && storedSeason !== null)
+        const manual = '%DEV%' === 'true' && enabled
+          ? normalize(window.localStorage.getItem('manualSeasonalTheme')) || storedSeason
+          : null
+        const theme = storedTheme === 'dark' ? 'dark'
+          : enabled ? manual || automatic() : 'light'
+        const color = ({
+          dark: '#27272A', christmas: '#b23e3e', spring: '#fff4f4',
+          summer: '#8ed4ea', autumn: '#fff8ef', winter: '#eff8ff',
+        })[theme] || '#FFFFFF'
+
+        document.body.style.backgroundColor = color
+        document.querySelector('meta[name="theme-color"]').content = color
+      })()
     </script>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>

package.json

@@ -13,26 +13,27 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
+    "@emotion/is-prop-valid": "1.4.0",
     "@qwik.dev/partytown": "^0.14.0",
     "@tanstack/react-query": "^5.100.14",
     "@tw-classed/react": "^2.0.0",
     "@types/node": "^22.19.19",
     "axios": "^1.16.1",
     "dayjs": "^1.11.21",
+    "godlights": "1.0.0",
     "i18next": "^26.3.0",
     "i18next-browser-languagedetector": "^8.2.1",
     "i18next-http-backend": "^4.0.0",
+    "motion": "12.43.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-i18next": "^17.0.8",
-    "react-icons": "^5.6.0",
     "react-router-dom": "^7.16.0",
     "react-simple-pull-to-refresh": "patch:react-simple-pull-to-refresh@npm%3A1.3.4#~/.yarn/patches/react-simple-pull-to-refresh-npm-1.3.4-4e4715c092.patch",
     "react-snowfall": "patch:react-snowfall@npm%3A2.4.0#~/.yarn/patches/react-snowfall-npm-2.4.0-3cb562b551.patch",
     "react-spinners": "^0.17.0",
     "react-tiny-fab": "^4.0.4",
     "react-transition-group": "^4.4.5",
-    "recoil": "^0.7.7",
     "vite-plugin-svgr": "^5.2.0"
   },
   "devDependencies": {