Merge pull request #401 from gsainfoteam/399-feature-dark-mode-icon-c…

…omponent

src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/mypage/ChangeDarkModeBox.tsx

@@ -1,49 +1,86 @@
 'use client';
 
+import clsx from 'clsx';
 import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
 
 import LogEvents from '@/api/log/log-events';
 import sendLog from '@/api/log/send-log';
-import Segmented from '@/app/components/shared/Segmented';
 import { PropsWithLng } from '@/app/i18next';
 import { useTranslation } from '@/app/i18next/client';
+import DarkModeIcon from '@/assets/icons/half-moon.svg';
+import LightModeIcon from '@/assets/icons/sun-light.svg';
+import SystemModeIcon from '@/assets/icons/system-outlined.svg';
 
 import MypageBox from './MypageBox';
 
 const ChangeDarkModeBox = ({ lng }: PropsWithLng) => {
   const { t } = useTranslation(lng);
 
+  const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <MypageBox>
       <div className="flex justify-between self-stretch">
         <div className="flex text-greyDark dark:text-dark_white">
           {t('mypage.darkModeSettings')}
         </div>
-        <Segmented
-          options={[
-            {
-              label: t('mypage.darkModeOptions.light'),
-              value: 'light',
-            },
-            {
-              label: t('mypage.darkModeOptions.dark'),
-              value: 'dark',
-            },
-            {
-              label: t('mypage.darkModeOptions.system'),
-              value: 'system',
-            },
-          ]}
-          value={theme ?? 'system'}
-          onChange={(newTheme) => {
-            sendLog(LogEvents.myClickMode, {
-              mode: newTheme,
-            });
-            setTheme(newTheme);
-          }}
-        />
+        {!mounted ? (
+          <span className="color-[var(--grey)]">
+            {t('mypage.loadingDarkModeSettings')}
+          </span>
+        ) : (
+          <div
+            className="flex items-center gap-4"
+            role="radiogroup"
+            aria-label={t('mypage.darkModeSettings')}
+          >
+            <button
+              onClick={() => setTheme('light')}
+              aria-label={t('mypage.darkModeOptions.light')}
+            >
+              <LightModeIcon
+                className={clsx(
+                  'h-6 transition-colors duration-300',
+                  theme === 'light'
+                    ? 'fill-[var(--primary)]'
+                    : 'fill-[var(--grey)]',
+                )}
+              />
+            </button>
+            <button
+              onClick={() => setTheme('dark')}
+              aria-label={t('mypage.darkModeOptions.dark')}
+            >
+              <DarkModeIcon
+                className={clsx(
+                  'h-6 transition-colors duration-300',
+                  theme === 'dark'
+                    ? 'fill-[var(--primary)]'
+                    : 'fill-[var(--grey)]',
+                )}
+              />
+            </button>
+            <button
+              onClick={() => setTheme('system')}
+              aria-label={t('mypage.darkModeOptions.system')}
+            >
+              <SystemModeIcon
+                className={clsx(
+                  'h-6 transition-colors duration-300',
+                  theme === 'system'
+                    ? 'fill-[var(--primary)] stroke-[var(--primary)]'
+                    : 'fill-[var(--grey)] stroke-[var(--grey)]',
+                )}
+              />
+            </button>
+          </div>
+        )}
       </div>
     </MypageBox>
   );

src/app/i18next/locales/en/translation.json

@@ -222,6 +222,7 @@
     "quit": "Withdrawal",
     "switchLanguage": "Enable English",
     "darkModeSettings": "Dark Mode Settings",
+    "loadingDarkModeSettings": "loading...",
     "darkModeOptions": {
       "light": "Light",
       "dark": "Dark",

src/app/i18next/locales/ko/translation.json

@@ -210,6 +210,7 @@
     "quit": "회원탈퇴",
     "switchLanguage": "언어 설정을 영어로 변경",
     "darkModeSettings": "다크 모드 설정",
+    "loadingDarkModeSettings": "불러오는 중...",
     "darkModeOptions": {
       "light": "라이트",
       "dark": "다크",