[ Feat ] Toggle Button 퍼블리싱

next.config.mjs

@@ -1,11 +1,13 @@
 /** @type {import('next').NextConfig} */
-import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
+import { createVanillaExtractPlugin } from "@vanilla-extract/next-plugin";
 const withVanillaExtract = createVanillaExtractPlugin();
 
 const nextConfig = {
   webpack(config) {
     // SVG imports를 처리하는 기존 규칙 가져오기
-    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
+    const fileLoaderRule = config.module.rules.find((rule) =>
+      rule.test?.test?.(".svg")
+    );
 
     config.module.rules.push(
       // svg imports 중 ?url로 끝나는 것에 대해서만 기존 규칙을 재적용
@@ -19,8 +21,8 @@ const nextConfig = {
         test: /\.svg$/i,
         issuer: fileLoaderRule.issuer,
         resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
-        use: ['@svgr/webpack'],
-      },
+        use: ["@svgr/webpack"],
+      }
     );
 
     // 처리가 완료된 *.svg를 무시하도록 파일 로더 규칙을 수정

package.json

@@ -13,14 +13,15 @@
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.15.5",
+    "@vanilla-extract/recipes": "^0.5.5",
     "jotai": "^2.9.3",
     "next": "14.2.8",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@svgr/webpack": "^8.1.0",
     "@biomejs/biome": "1.8.3",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import Providers from "@/components/common/Provider";
+import Providers from "@/components/common/Provider/Provider";
 import type { Metadata } from "next";
 import "./globals.css";
 

src/app/page.tsx

@@ -1,21 +1,16 @@
-import { IcnAlarm } from "@/assets/svgs";
-import AlarmUrl from "@/assets/svgs/icn_alarm.svg?url";
-import Image from "next/image";
+"use client";
+
+import ToggleButton from "@/components/common/ToggleButton/ToggleButton";
+import { useState } from "react";
 
 export default function Home() {
+  const [isClicked, setIsClicked] = useState(false);
+
   return (
     <div className="text-purple">
-      <IcnAlarm width={50} height={50} />
-      <Image width={50} height={50} src={AlarmUrl} alt="alarm" priority />
-      <img width={50} height={50} src={AlarmUrl.src} alt="alarm" />
-      <div
-        style={{
-          width: 50,
-          height: 50,
-          backgroundImage: `url(${AlarmUrl.src})`,
-          backgroundRepeat: "no-repeat",
-          backgroundSize: "cover",
-        }}
+      <ToggleButton
+        isSelected={isClicked}
+        onChange={() => setIsClicked((prev) => !prev)}
       />
     </div>
   );

src/components/common/ToggleButton/ToggleButton.css.ts

@@ -0,0 +1,51 @@
+import { recipe } from "@vanilla-extract/recipes";
+
+export const buttonStyle = recipe({
+  base: {
+    position: "relative",
+
+    appearance: "none",
+
+    width: "40px",
+    height: "24px",
+
+    padding: "2px",
+
+    borderRadius: "16px",
+    backgroundColor: "rgba(121, 130, 154, 1)",
+
+    cursor: "pointer",
+
+    ":before": {
+      content: "",
+
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+
+      zIndex: 1,
+
+      width: "20px",
+      height: "20px",
+      margin: "auto 0",
+
+      backgroundColor: "rgba(188, 192, 205, 1)",
+      borderRadius: "50%",
+
+      transition: "all .3s ease-out",
+    },
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: "rgba(102, 89, 255, 1)",
+
+        ":before": {
+          backgroundColor: "rgba(255, 255, 255, 1)",
+
+          transform: "translateX(16px)",
+        },
+      },
+    },
+  },
+});

src/components/common/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,27 @@
+import { buttonStyle } from "@/components/common/ToggleButton/ToggleButton.css";
+import type { ComponentPropsWithoutRef } from "react";
+
+interface ToggleButtonProps extends ComponentPropsWithoutRef<"input"> {
+  isSelected: boolean;
+  onChange: () => void;
+}
+
+const ToggleButton = ({
+  isSelected,
+  onChange,
+  ...props
+}: ToggleButtonProps) => {
+  return (
+    <input
+      type="checkbox"
+      role="switch"
+      aria-checked={isSelected}
+      checked={isSelected}
+      onChange={onChange}
+      className={buttonStyle({ active: isSelected })}
+      {...props}
+    />
+  );
+};
+
+export default ToggleButton;