즐거운 프론트엔드 개발 – 코드 블록 테스트

const AttendanceAlarm = ({ data }: Props) => {
  const { query } = useRouter();
  const { mutate } = useSWRConfig();

  const userId = query?.[HWAHAE_USER_ID] as string;
  const sessionId = query?.[HWAHAE_SESSION_ID] as string;
  const deviceId = query?.[HWAHAE_DEVICE_ID] as string;
  const uri = `${apiRoutes.users}/${userId}${apiRoutes.push}${apiRoutes.subscriptions}`;
  const isAlarmOn = data.attendance;
  const initialAlarmState = useRef(isAlarmOn);

  useDebounce(
    async () => {
      if (initialAlarmState.current !== isAlarmOn) {
        await requestPushSubscriptions(isAlarmOn);
        initialAlarmState.current = isAlarmOn;
      }
    },
    DEBOUNCE_WAIT_MS,
    [isAlarmOn],
  );

  const requestPushSubscriptions = async (value: boolean) => {
    try {
      await axiosWithAuth.post<{
        success: boolean;
      }>(
        uri,
        { type: PushTypeEnum.attendance, value },
        {
          headers: {
            ...(userId && { [HWAHAE_USER_ID]: userId }),
            ...(sessionId && { [HWAHAE_SESSION_ID]: sessionId }),
            ...(deviceId && { [HWAHAE_DEVICE_ID]: deviceId }),
          },
        },
      );

      mutate(
        {
          ...data,
          [PushTypeEnum.attendance]: value,
        },
        { rollbackOnError: true, revalidate: false },
      );
      alert(
        value
          ? '화해에서 보내는 출석체크 알림 수신을 동의하셨습니다.'
          : '화해에서 보내는 출석체크 알림 수신을 거부하셨습니다.',
      );
    } catch (error) {
      errorAction(error);
    }
  };

  const toggleAlarm = () => {
    mutate(
      uri,
      {
        ...data,
        [PushTypeEnum.attendance]: !isAlarmOn,
      },
      { revalidate: false },
    );
  };

  return (
    
      <strong>출석체크 놓치고 싶지 않다면?</strong>
      <button>
        알림 설정
         {}}
          checked={isAlarmOn}
          css={switchStyle}
        />
      </button>
    
  );
};

export default AttendanceAlarm;