[refactor]알림 컨펌기능

Author: mtm-git1018

src/domains/mypage/components/EditNickName.tsx

@@ -9,7 +9,7 @@ import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 interface Props {
   open: boolean;
   onClose: () => void;
-  nickname:string
+  nickname: string;
   setNickName: (v: string) => void;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   editNickName: string;
@@ -25,14 +25,14 @@ function EditNickName({
   editNickName,
   setEditNickName,
 }: Props) {
-  const [defaultNickname,setDefaultNickname] = useState(nickname)
-  const { toastSuccess,toastError } = useToast();
+  const [defaultNickname, setDefaultNickname] = useState(nickname);
+  const { toastSuccess, toastError } = useToast();
 
   useEffect(() => {
-    setEditNickName(nickname)
-    setDefaultNickname(nickname)
-  }, [nickname,setEditNickName])
-  
+    setEditNickName(nickname);
+    setDefaultNickname(nickname);
+  }, [nickname, setEditNickName]);
+
   const handlesave = async () => {
     if (editNickName.length <= 1 || editNickName.length >= 8) {
       toastError('닉네임은 2글자 이상 입력해야합니다');
@@ -57,12 +57,11 @@ function EditNickName({
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEditNickName(e.target.value);
-
   };
 
   const handleDefaultNickname = () => {
-   setEditNickName(defaultNickname)
-  }
+    setEditNickName(defaultNickname);
+  };
 
   return (
     <ModalLayout

src/domains/mypage/components/ToggleBtn.tsx

@@ -1,12 +1,12 @@
 'use client';
 import { getApi } from '@/app/api/config/appConfig';
-import { useToast } from '@/shared/hook/useToast';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
+import AlarmConfirm from './pages/my-alarm/AlarmConfirm';
 
 function ToggleBtn() {
-  const [isClick, setIsClick] = useState<boolean | null>(null);
-  const { toastSuccess } = useToast();
+  const [isAlarm, setIsAlarm] = useState<boolean | null>(null);
+  const [isClick, setIsClick] = useState<boolean>(false);
 
   useEffect(() => {
     const fetchToggle = async () => {
@@ -16,7 +16,8 @@ function ToggleBtn() {
           credentials: 'include',
         });
         const json = await res.json();
-        setIsClick(json.data.enabled);
+        console.log(json);
+        setIsAlarm(json.data.enabled);
       } catch {
         console.error();
       }
@@ -25,36 +26,36 @@ function ToggleBtn() {
   }, []);
 
   const handleClick = async () => {
-    if (isClick === null) return;
-    const next = !isClick;
-    setIsClick(next);
-
-    await fetch(`${getApi}/me/notification-setting`, {
-      method: 'PATCH',
-      credentials: 'include',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        enabled: next,
-      }),
-    });
-    next ? toastSuccess('알림이 설정되었습니다.') : toastSuccess('알림이 해제되었습니다');
+    setIsClick(true);
   };
 
   return (
-    <button
-      className={clsx(
-        'rounded-full flex py-0.5 pl-[2px] w-17 h-7 duration-300',
-        isClick ? 'bg-tertiary' : 'bg-white'
+    <div>
+      {isClick && (
+        <AlarmConfirm
+          open={isClick}
+          onClose={() => setIsClick(false)}
+          state={isAlarm}
+          cancle={() => setIsClick(isClick)}
+          setIsAlarm={setIsAlarm}
+          setIsClick={setIsClick}
+        />
       )}
-      onClick={handleClick}
-    >
-      <div
+      <button
         className={clsx(
-          'rounded-full w-6 h-6 duration-300',
-          isClick ? 'bg-secondary translate-x-10' : 'bg-gray-dark'
+          'rounded-full flex py-0.5 pl-[2px] w-17 h-7 duration-300',
+          isAlarm ? 'bg-tertiary' : 'bg-white'
         )}
-      ></div>
-    </button>
+        onClick={handleClick}
+      >
+        <div
+          className={clsx(
+            'rounded-full w-6 h-6 duration-300',
+            isAlarm ? 'bg-secondary translate-x-10' : 'bg-gray-dark'
+          )}
+        ></div>
+      </button>
+    </div>
   );
 }
 export default ToggleBtn;

src/domains/mypage/components/pages/my-alarm/AlarmConfirm.tsx

@@ -0,0 +1,27 @@
+import { useConfirm } from '@/domains/mypage/hook/useConfirm';
+import ConfirmModal from '@/shared/components/modal-pop/ConfirmModal';
+import { Dispatch, SetStateAction } from 'react';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  state: boolean | null;
+  cancle: () => void;
+  setIsAlarm: Dispatch<SetStateAction<boolean | null>>;
+  setIsClick: Dispatch<SetStateAction<boolean>>;
+}
+
+function AlarmConfirm({ open, onClose, state, cancle, setIsAlarm, setIsClick }: Props) {
+  const { patchAlarm } = useConfirm(state, setIsAlarm, setIsClick);
+
+  return (
+    <ConfirmModal
+      open={open}
+      onClose={onClose}
+      description={state ? '알림을 해제하시겠습니까?' : '알림을 설정하시겠습니까?'}
+      onConfirm={patchAlarm}
+      onCancel={cancle}
+    ></ConfirmModal>
+  );
+}
+export default AlarmConfirm;

src/domains/mypage/hook/useConfirm.ts

@@ -0,0 +1,27 @@
+import { getApi } from '@/app/api/config/appConfig';
+import { useToast } from '@/shared/hook/useToast';
+import { Dispatch, SetStateAction } from 'react';
+
+export function useConfirm(
+  state: boolean | null,
+  setIsAlarm: Dispatch<SetStateAction<boolean | null>>,
+  setIsClick: Dispatch<SetStateAction<boolean>>
+) {
+  const { toastSuccess } = useToast();
+  const next = !state;
+  const patchAlarm = async () => {
+    await fetch(`${getApi}/me/notification-setting`, {
+      method: 'PATCH',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        enabled: next,
+      }),
+    });
+    setIsAlarm(next);
+    setIsClick(false);
+
+    (await next) ? toastSuccess('알림이 설정되었습니다.') : toastSuccess('알림이 해제되었습니다');
+  };
+  return { patchAlarm };
+}

src/domains/mypage/main/MySetting.tsx

@@ -5,6 +5,7 @@ import WithdrawModal from '@/domains/mypage/components/WithdrawModal';
 import TextButton from '@/shared/components/button/TextButton';
 import { useEffect, useState } from 'react';
 import useFetchProfile from '../api/fetchProfile';
+import AlarmConfirm from '../components/pages/my-alarm/AlarmConfirm';
 
 function MySetting() {
   const { profile } = useFetchProfile();
@@ -42,6 +43,7 @@ function MySetting() {
         </div>
         <div className="flex justify-between py-5">
           <h2>알람설정</h2>
+
           <ToggleBtn />
         </div>
       </div>

src/shared/components/Input-box/Input.tsx

@@ -13,7 +13,7 @@ import Button from '../button/Button';
 
 interface Props {
   placeholder: string;
-  value?: string
+  value?: string;
 
   type?: HTMLInputTypeAttribute;
   ref?: Ref<HTMLInputElement | null>;
@@ -44,7 +44,7 @@ function Input({
   type,
   ref,
   value,
- 
+
   size,
   variant = 'default',
   className,
@@ -62,7 +62,6 @@ function Input({
           className={`outline-none w-full flex-1 leading-${size}`}
           ref={ref}
           value={value}
-  
           onChange={onChange}
           {...rest}
         />