feat(client): 사이드바 구글 프로필 추가

apps/client/src/shared/apis/axios.ts

@@ -71,3 +71,13 @@ export const deleteRemindArticle = async (id: number) => {
   const response = await apiRequest.delete(`/api/v1/articles/${id}`);
   return response;
 };
+
+export const getGoogleProfile = async () => {
+  const { data } = await apiRequest.get('/api/v2/users/me/google-profile');
+  return data.data;
+};
+
+export const getMyProfile = async () => {
+  const { data } = await apiRequest.get('/api/v2/users/me');
+  return data.data;
+};

apps/client/src/shared/apis/queries.ts

@@ -16,6 +16,8 @@ import {
   getArticleDetail,
   getAcorns,
   deleteRemindArticle,
+  getGoogleProfile,
+  getMyProfile,
 } from '@shared/apis/axios';
 import { AxiosError } from 'axios';
 import {
@@ -136,3 +138,18 @@ export const useGetPageMeta = (url: string) => {
     retry: false,
   });
 };
+
+export const useGetGoogleProfile = () => {
+  return useQuery({
+    queryKey: ['googleProfile'],
+    queryFn: getGoogleProfile,
+    staleTime: Infinity,
+  });
+};
+
+export function useGetMyProfile() {
+  return useQuery({
+    queryKey: ['myProfile'],
+    queryFn: getMyProfile,
+  });
+}

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

@@ -0,0 +1,81 @@
+import { Icon } from '@pinback/design-system/icons';
+import { Button } from '@pinback/design-system/ui';
+import formatRemindTime from '@shared/utils/formatRemindTime';
+import { useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface ProfilePopupProps {
+  open: boolean;
+  onClose: () => void;
+  profileImage: string | null;
+  email: string;
+  name: string;
+  remindTime?: string;
+}
+
+export default function ProfilePopup({
+  open,
+  onClose,
+  profileImage,
+  email,
+  name,
+  remindTime,
+}: ProfilePopupProps) {
+  const navigate = useNavigate();
+  const popupRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (popupRef.current && !popupRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+
+    if (open) document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('email');
+    navigate('/onboarding');
+  };
+
+  return (
+    <div className="fixed inset-0 z-[2000] flex items-start justify-start pl-[19rem] pt-[7rem]">
+      <div
+        ref={popupRef}
+        className="common-shadow flex w-[26rem] flex-col items-center rounded-[1.2rem] bg-white pb-[2.4rem] pt-[3.2rem]"
+      >
+        <div className="mb-[0.8rem] flex h-[13.2rem] w-[13.2rem] items-center justify-center overflow-hidden rounded-full bg-gray-100">
+          {profileImage ? (
+            <img
+              src={profileImage}
+              alt="프로필"
+              className="h-full w-full object-cover"
+            />
+          ) : (
+            <div className="h-full w-full bg-gray-200" />
+          )}
+        </div>
+
+        <p className="sub1-sb">{name}</p>
+        <p className="body4-r text-font-gray-3 mt-[0.8rem]">{email}</p>
+
+        <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 className="caption2-m">{formatRemindTime(remindTime)}</span>
+        </div>
+
+        <div className="w-full px-[7.6rem]">
+          <Button variant="secondary" size="small" onClick={handleLogout}>
+            로그아웃
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -16,14 +16,18 @@ import {
   useGetArcons,
   usePutCategory,
   useDeleteCategory,
+  useGetGoogleProfile,
+  useGetMyProfile,
 } from '@shared/apis/queries';
 import { useEffect, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
+import ProfilePopup from '../profilePopup/ProfilePopup';
 
 export function Sidebar() {
   const [newCategoryName, setNewCategoryName] = useState('');
   const [toastIsOpen, setToastIsOpen] = useState(false);
+  const [profileOpen, setProfileOpen] = useState(false);
 
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -33,6 +37,15 @@ export function Sidebar() {
   const { mutate: createCategory } = usePostCategory();
   const { data, isPending } = useGetArcons();
   const { mutate: deleteCategory } = useDeleteCategory();
+  const { data: googleProfileData } = useGetGoogleProfile();
+  const { data: myProfile } = useGetMyProfile();
+
+  const profileImageUrl = googleProfileData?.googleProfile || null;
+
+  const chippiImageUrl = myProfile?.profileImage ?? null;
+  const profileEmail = myProfile?.email ?? '';
+  const profileName = myProfile?.name ?? '';
+  const remindAt = myProfile?.remindAt ?? 'AM 09:00';
 
   const {
     activeTab,
@@ -76,9 +89,7 @@ export function Sidebar() {
         queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] });
         close();
       },
-      onError: () => {
-        setToastIsOpen(true);
-      },
+      onError: () => setToastIsOpen(true),
     });
   };
 
@@ -92,9 +103,7 @@ export function Sidebar() {
           close();
           moveNewCategory(id);
         },
-        onError: () => {
-          setToastIsOpen(true);
-        },
+        onError: () => setToastIsOpen(true),
       }
     );
   };
@@ -105,9 +114,7 @@ export function Sidebar() {
         queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] });
         close();
       },
-      onError: () => {
-        setToastIsOpen(true);
-      },
+      onError: () => setToastIsOpen(true),
     });
   };
 
@@ -128,16 +135,34 @@ export function Sidebar() {
   return (
     <aside className="bg-white-bg sticky top-0 h-screen w-[24rem] border-r border-gray-300">
       <div className="flex h-full flex-col px-[0.8rem]">
-        <header className="px-[0.8rem] py-[2.8rem]">
+        {/* 헤더 */}
+        <header className="flex items-center justify-between px-[0.8rem] py-[2.8rem]">
           <Icon
             name="logo"
             aria-label="Pinback 로고"
             className="h-[2.4rem] w-[8.7rem] cursor-pointer"
           />
+
+          <button
+            type="button"
+            className="h-[3.6rem] w-[3.6rem] flex-shrink-0 overflow-hidden rounded-full border border-gray-200"
+            onClick={() => setProfileOpen(true)}
+          >
+            {profileImageUrl ? (
+              <img
+                src={profileImageUrl}
+                alt="프로필"
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div className="h-full w-full bg-gray-200" />
+            )}
+          </button>
         </header>
 
         <hr className="my-[0.8rem] border-gray-100" />
 
+        {/* 메뉴 영역 */}
         <div className="flex-1 overflow-y-auto">
           <SideItem
             icon="clock"
@@ -211,19 +236,30 @@ export function Sidebar() {
               acorns={acornCount}
               isActive={activeTab === 'level'}
               onClick={() => {
-                setSelectedCategoryId(null);
                 closeMenu();
+                setSelectedCategoryId(null);
                 goLevel();
               }}
             />
           )}
         </footer>
       </div>
 
+      {/* 팝업 영역 */}
+
+      <ProfilePopup
+        open={profileOpen}
+        onClose={() => setProfileOpen(false)}
+        profileImage={chippiImageUrl}
+        name={profileName}
+        email={profileEmail}
+        remindTime={remindAt}
+      />
+
       <PopupPortal
         popup={popup}
         onClose={handlePopupClose}
-        onChange={handleCategoryChange}
+        onChange={setNewCategoryName}
         onCreateConfirm={handleCreateCategory}
         onEditConfirm={(id) => handlePatchCategory(id)}
         onDeleteConfirm={(id) => handleDeleteCategory(id)}

apps/client/src/shared/hooks/useSidebarNav.ts

@@ -1,15 +1,39 @@
-import { useNavigate } from 'react-router-dom';
-import { useCallback, useState } from 'react';
+import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
+import { useCallback, useEffect, useState } from 'react';
 
 export type SidebarTab = 'mybookmark' | 'remind' | 'level';
 
 export function useSidebarNav() {
   const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+
   const [activeTab, setActiveTab] = useState<SidebarTab>('remind');
   const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(
     null
   );
 
+  useEffect(() => {
+    const path = location.pathname;
+
+    if (path.startsWith('/my-bookmarks')) {
+      setActiveTab('mybookmark');
+
+      const id = searchParams.get('id');
+      if (id) {
+        setSelectedCategoryId(Number(id));
+      } else {
+        setSelectedCategoryId(null);
+      }
+    } else if (path === '/' || path.startsWith('/remind')) {
+      setActiveTab('remind');
+      setSelectedCategoryId(null);
+    } else if (path.startsWith('/level')) {
+      setActiveTab('level');
+      setSelectedCategoryId(null);
+    }
+  }, [location.pathname, searchParams]);
+
   const goRemind = useCallback(() => {
     setActiveTab('remind');
     setSelectedCategoryId(null);

apps/client/src/shared/utils/formatRemindTime.ts

@@ -0,0 +1,22 @@
+function formatRemindTime(time: string | undefined): string {
+  if (!time) return '';
+
+  const [period, timePart] = time.split(' ');
+  const [hourStr, minute] = timePart.split(':');
+
+  let hour = Number(hourStr);
+
+  if (isNaN(hour)) return '';
+
+  if (period === 'PM') {
+    hour = hour === 12 ? 12 : hour - 12;
+  }
+
+  if (period === 'AM' && hour === 0) {
+    hour = 12;
+  }
+
+  return `${period} ${hour}:${minute}`;
+}
+
+export default formatRemindTime;