Refactor(client): ProfilePopupPortal 컴포넌트 추가 및 변경

apps/client/src/shared/components/profilePopup/ProfilePopup.tsx

@@ -31,7 +31,9 @@ export default function ProfilePopup({
       }
     }
 
-    if (open) document.addEventListener('mousedown', handleClickOutside);
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [open, onClose]);
 
@@ -66,7 +68,7 @@ export default function ProfilePopup({
 
         <div className="text-font-gray-3 mb-[1.6rem] flex items-center gap-[0.2rem]">
           <Icon name="ic_clock_active" width={18} height={18} />
-          <span className="">리마인드 알람&nbsp;</span>
+          <span>리마인드 알람&nbsp;</span>
           <span className="caption2-m">{formatRemindTime(remindTime)}</span>
         </div>
 

apps/client/src/shared/components/profilePopup/ProfilePopupPortal.tsx

@@ -0,0 +1,34 @@
+import { createPortal } from 'react-dom';
+import ProfilePopup from './ProfilePopup';
+
+interface ProfilePopupPortalProps {
+  open: boolean;
+  onClose: () => void;
+  profileImage: string | null;
+  email: string;
+  name: string;
+  remindTime?: string;
+}
+
+export default function ProfilePopupPortal({
+  open,
+  onClose,
+  profileImage,
+  email,
+  name,
+  remindTime,
+}: ProfilePopupPortalProps) {
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(
+    <ProfilePopup
+      open={open}
+      onClose={onClose}
+      profileImage={profileImage}
+      email={email}
+      name={name}
+      remindTime={remindTime}
+    />,
+    document.body
+  );
+}

apps/client/src/shared/components/sidebar/Sidebar.tsx

@@ -22,7 +22,7 @@ import {
 import { useEffect, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import ProfilePopup from '../profilePopup/ProfilePopup';
+import ProfilePopupPortal from '../profilePopup/ProfilePopupPortal';
 
 export function Sidebar() {
   const [newCategoryName, setNewCategoryName] = useState('');
@@ -247,7 +247,7 @@ export function Sidebar() {
 
       {/* 팝업 영역 */}
 
-      <ProfilePopup
+      <ProfilePopupPortal
         open={profileOpen}
         onClose={() => setProfileOpen(false)}
         profileImage={chippiImageUrl}