fix: 토글 charkraUI 변경

DDD-Community · Jan 30, 2024 · 489fa1c · 489fa1c
1 parent 902f96e
commit 489fa1c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/components/atoms/Toggle.tsx b/src/components/atoms/Toggle.tsx
@@ -1,19 +1,27 @@
 import React from 'react';
-import ToggleOffImg from '@/assets/images/img_toggleoff.svg';
-import ToggleOnImg from '@/assets/images/img_toggleon.svg';
+import { extendTheme, ThemeProvider, CSSReset, Switch } from '@chakra-ui/react';
+
+const customTheme = extendTheme({
+  colors: {
+    primary2: {
+      500: '#3CAA8D',
+    },
+  },
+});
 
 const Toggle: React.FC<{
   isToggleOn?: boolean;
-  toggleState?: (e: React.MouseEvent) => void;
+  toggleState?: () => void;
 }> = ({ isToggleOn, toggleState }) => {
-  return isToggleOn ? (
-    <div className="mr-[-10px]" onClick={toggleState}>
-      <ToggleOnImg />
-    </div>
-  ) : (
-    <div onClick={toggleState}>
-      <ToggleOffImg />
-    </div>
+  return (
+    <ThemeProvider theme={customTheme}>
+      <CSSReset />
+      <Switch
+        colorScheme="primary2"
+        isChecked={isToggleOn}
+        onChange={toggleState}
+      />
+    </ThemeProvider>
   );
 };
 

diff --git a/src/pages/mypage/notification/index.tsx b/src/pages/mypage/notification/index.tsx
@@ -1,4 +1,4 @@
-import { Toggle, WhiteBox } from '@/components/atoms';
+import { Toggle } from '@/components/atoms';
 import Header from '@/components/organisms/Header';
 import { type NextPage } from 'next';
 
@@ -9,13 +9,13 @@ const NotificationPage: NextPage = () => {
       <section
         className={`flex flex-col gap-[20px] min-h-screen p-20 bg-gray1`}
       >
-        <WhiteBox className="p-[18px]">
+        <div className="flex flex-col justify-center items-center gap-22 p-32  w-full bg-white rounded-12 p-[18px]">
           <div className="w-full flex justify-between items-center">
             <div className="heading4-semibold">알림 허용</div>
             <Toggle />
           </div>
-        </WhiteBox>
-        <WhiteBox className="p-[18px]">
+        </div>
+        <div className="flex flex-col justify-center items-center gap-22 p-32  w-full bg-white rounded-12 p-[18px]">
           <label className="w-full text-gray6">알림</label>
           <div className="w-full flex justify-between items-center">
             <div className="flex flex-col gap-[10px]">
@@ -31,7 +31,7 @@ const NotificationPage: NextPage = () => {
             </div>
             <Toggle />
           </div>
-        </WhiteBox>
+        </div>
       </section>
     </div>
   );