🐛 Fix: client error on kakao login

KNU-AEYE · May 11, 2024 · 32ab2b3 · 32ab2b3
1 parent 5bf5742
commit 32ab2b3
Showing 1 changed file with 33 additions and 37 deletions.
diff --git a/aeye/app/(nav)/my/page.tsx b/aeye/app/(nav)/my/page.tsx
@@ -19,12 +19,8 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
   },
 }));
 
-function generateStringAvatar(name: string) {
-  return `${name?.split(" ")[0][0]}${name?.split(" ")[1][0]}`;
-}
-
 function ProfileAvatar() {
-  const [member, setMember] = useState<Member>();
+  const [member, setMember] = useState<Member | null>(null);
 
   useEffect(() => {
     fetchWithInterception("https://api.a-eye.live/member/detail", {
@@ -36,38 +32,38 @@ function ProfileAvatar() {
   }, []);
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        marginBottom: "20px",
-      }}
-    >
-      <Tooltip title="Update profile" placement="top-start">
-        <Avatar
-          alt="User member"
-          src={member?.profileUri}
-          sx={{
-            width: 100,
-            height: 100,
-            backgroundColor: "#f0f0f0", // Add background color
-            boxShadow: "0 2px 4px rgba(0,0,0,0.1)", // Add subtle shadow
-          }}
-        >
-          {generateStringAvatar(member?.name as string)}
-        </Avatar>
-      </Tooltip>
-      <Typography variant="h5" component="h2" style={{ marginTop: "12px" }}>
-        {member?.name}
-      </Typography>
-      <Typography style={{ color: "#666", marginBottom: "4px" }}>
-        {member?.email}
-      </Typography>
-      <Typography style={{ color: "#666", marginBottom: "4px" }}>
-        {member?.phone || "No phone number"}
-      </Typography>
-    </div>
+    member && (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          marginBottom: "20px",
+        }}
+      >
+        <Tooltip title="Update profile" placement="top-start">
+          <Avatar
+            alt="User member"
+            src={member.profileUri}
+            sx={{
+              width: 100,
+              height: 100,
+              backgroundColor: "#f0f0f0", // Add background color
+              boxShadow: "0 2px 4px rgba(0,0,0,0.1)", // Add subtle shadow
+            }}
+          />
+        </Tooltip>
+        <Typography variant="h5" component="h2" style={{ marginTop: "12px" }}>
+          {member.name}
+        </Typography>
+        <Typography style={{ color: "#666", marginBottom: "4px" }}>
+          {member.email}
+        </Typography>
+        <Typography style={{ color: "#666", marginBottom: "4px" }}>
+          {member.phone || "No phone number"}
+        </Typography>
+      </div>
+    )
   );
 }