Feat: 토글 버튼 스위치로 형식으로 변경

ssumai-kr · Jul 18, 2024 · 9a33308 · 9a33308
1 parent 8f97ecf
commit 9a33308
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 37 deletions.
diff --git a/components/Layout/NavigationBar.tsx b/components/Layout/NavigationBar.tsx
@@ -15,18 +15,10 @@ import profileThumbnail from '@/public/image/profile-circle-icon-512x512-zxne30h
 export default function NavigationBar() {
   const [isDarkMode, setIsDarkMode] = useState(false);
 
-  useEffect(() => {
-    // Check if dark mode is already enabled in the user's preference
-    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    setIsDarkMode(isDark);
-    if (isDark) {
-      document.body.classList.add('dark');
-    }
-  }, []);
-
   const toggleDarkMode = () => {
     document.body.classList.toggle('dark');
     setIsDarkMode(!isDarkMode);
+    console.log(isDarkMode);
   };
 
   const { userData, isLoading } = useUserData();
@@ -70,34 +62,12 @@ export default function NavigationBar() {
       </div>
       {isLoggedIn ? (
         <div className="flex items-center gap-[15px]">
-          <div className="flex items-center">
-            <button
-              onClick={toggleDarkMode}
-              className="h-10 w-10 rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-300"
-            >
-              {isDarkMode ? (
-                <svg
-                  className="fill-yellow-500 block"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                  ></path>
-                </svg>
-              ) : (
-                <svg
-                  className="fill-violet-700 block"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
-                </svg>
-              )}
-            </button>
-          </div>
+          <input
+            type="checkbox"
+            name="checkbox"
+            className="switch"
+            onClick={toggleDarkMode}
+          ></input>
           <button onClick={toggleNotifyDropdown}>
             <div className="relative">
               <Image src={notificationIcon} alt="알림 아이콘" />
@@ -146,6 +116,12 @@ export default function NavigationBar() {
           <Link href="/signup" className="text-[14px]">
             회원가입
           </Link>
+          <input
+            type="checkbox"
+            name="checkbox"
+            className="switch"
+            onClick={toggleDarkMode}
+          ></input>
         </div>
       )}
     </div>

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,5 +1,6 @@
 import '@/styles/globals.css';
 import '@/styles/calendar.css';
+import '@/styles/togglebutton.css';
 import type { AppProps } from 'next/app';
 import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

diff --git a/styles/togglebutton.css b/styles/togglebutton.css
@@ -0,0 +1,158 @@
+.switch {
+    position: relative;
+    width: 65px;
+    height: 25px;
+    margin: 0px;
+    appearance: none;
+    -webkit-appearance: none;
+    background-color: #afb9c9;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 12.5px;
+    box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 0.7);
+    transition: background-image 0.7s ease-in-out;
+    outline: none;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .switch:checked {
+    background-color: #44474d;
+    background-size: cover;
+    transition: background-image 1s ease-in-out;
+  }
+
+  .switch:after {
+    content: '';
+    width: 23px;
+    height: 23px;
+    border-radius: 50%;
+    background-color: #fff;
+    position: absolute;
+    left: 1px;
+    top: 1px;
+    transform: translateX(0px);
+    animation: off 0.7s forwards cubic-bezier(.8, .5, .2, 1.4);
+    box-shadow: inset 2.5px -2.5px 2px rgba(53, 53, 53, 0.3);
+  }
+
+  @keyframes off {
+    0% {
+      transform: translateX(40px);
+      width: 23px;
+    }
+    50% {
+      width: 37.5px;
+      border-radius: 12.5px;
+    }
+    100% {
+      transform: translateX(0px);
+      width: 23px;
+    }
+  }
+
+  .switch:checked:after {
+    animation: on 0.7s forwards cubic-bezier(.8, .5, .2, 1.4);
+    box-shadow: inset -2.5px -2.5px 2px rgba(53, 53, 53, 0.3);
+  }
+
+  @keyframes on {
+    0% {
+      transform: translateX(0px);
+      width: 23px;
+    }
+    50% {
+      width: 37.5px;
+      border-radius: 12.5px;
+    }
+    100% {
+      transform: translateX(40px);
+      width: 23px;
+    }
+  }
+
+  .switch:checked:before {
+    content: '';
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    position: absolute;
+    left: 7.5px;
+    top: 7.5px;
+    transform-origin: 26.5px 5px;
+    background-color: transparent;
+    box-shadow: 2.5px -0.5px 0px #fff;
+    filter: blur(0px);
+    animation: sun 0.7s forwards ease;
+  }
+
+  @keyframes sun {
+    0% {
+      transform: rotate(170deg);
+      background-color: transparent;
+      box-shadow: 2.5px -0.5px 0px #fff;
+      filter: blur(0px);
+    }
+    50% {
+      background-color: transparent;
+      box-shadow: 2.5px -0.5px 0px #fff;
+      filter: blur(0px);
+    }
+    90% {
+      background-color: #f5daaa;
+      box-shadow: 0px 0px 5px #f5deb4,
+      0px 0px 10px #f5deb4,
+      0px 0px 15px #f5deb4,
+      inset 0px 0px 1px #efd3a3;
+      filter: blur(0.5px);
+    }
+    100% {
+      transform: rotate(0deg);
+      background-color: #f5daaa;
+      box-shadow: 0px 0px 5px #f5deb4,
+      0px 0px 10px #f5deb4,
+      0px 0px 15px #f5deb4,
+      inset 0px 0px 1px #efd3a3;
+      filter: blur(0.5px);
+    }
+  }
+
+  .switch:before {
+    content: '';
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    position: absolute;
+    left: 10px;
+    top: 9px;
+    filter: blur(0.5px);
+    background-color: #f5daaa;
+    box-shadow: 0px 0px 5px #f5deb4,
+    0px 0px 10px #f5deb4,
+    0px 0px 15px #f5deb4,
+    inset 0px 0px 1px #efd3a3;
+    transform-origin: 26.5px 5px;
+    animation: moon 0.7s forwards ease;
+  }
+
+  @keyframes moon {
+    0% {
+      transform: rotate(0deg);
+      filter: blur(0.5px);
+    }
+    50% {
+      filter: blur(0.5px);
+    }
+    90% {
+      background-color: transparent;
+      box-shadow: 2.5px -0.5px 0px #fff;
+      filter: blur(0px);
+    }
+    100% {
+      transform: rotate(170deg);
+      background-color: transparent;
+      box-shadow: 2.5px -0.5px 0px #fff;
+      filter: blur(0px);
+    }
+  }
+