🐛 Fix: subscription status update

aeye/app/(nav)/my/ProfileAvatar.tsx

@@ -34,8 +34,8 @@ export default function ProfileAvatar() {
           sx={{
             width: 100,
             height: 100,
-            backgroundColor: "#f0f0f0", // Add background color
-            boxShadow: "0 2px 4px rgba(0,0,0,0.1)", // Add subtle shadow
+            backgroundColor: "#f0f0f0",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
           }}
         />
         <Typography variant="h5" component="h2" style={{ marginTop: "12px" }}>

aeye/app/(nav)/my/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRecoilValue } from "recoil";
 import { memberState } from "@/app/recoil-states";
 import { Alert, Box, Grid, Switch, FormControlLabel } from "@mui/material";
@@ -21,19 +21,23 @@ function AddPhoneNumberInfo() {
   );
 }
 
-function SubscribtionSwitch() {
+function SubscriptionSwitch() {
   const profile = useRecoilValue(memberState);
-  const [isSubscribed, setIsSubscribed] = useState(
-    profile?.subscribeDailyReport
+  const [isSubscribed, setIsSubscribed] = useState<boolean>(
+    profile?.subscribeDailyReport || false
   );
 
+  useEffect(() => {
+    if (profile) {
+      setIsSubscribed(profile.subscribeDailyReport);
+    }
+  }, [profile]);
+
   const handleToggle = () => {
     setIsSubscribed(!isSubscribed);
     fetchWithInterception("https://api.a-eye.live/member/subscribe", {
       method: "PUT",
-    })
-      .then((response) => response.json())
-      .then((jsonData) => console.log(jsonData));
+    });
   };
   return (
     <FormControlLabel
@@ -56,7 +60,7 @@ export default function MyPage() {
         <Grid item xs={12} sm={8} md={6}>
           <AddPhoneNumberInfo />
           <ProfileAvatar />
-          <SubscribtionSwitch />
+          <SubscriptionSwitch />
           <ProfileMenu />
         </Grid>
       </Grid>