Refactor: 프로필 컴포넌트를 modal에서 popover로 변경, 알림 컴포넌트에서 테스트 버튼 제거

This commit is contained in:
홍창기 2024-09-30 19:41:22 +09:00
parent 689477192a
commit f81e6e8d16
3 changed files with 75 additions and 11 deletions

View File

@ -9,7 +9,7 @@ import useGetAndSaveFcmTokenQuery from '@/queries/auth/useGetAndSaveFcmTokenQuer
import useResetFcmTokenQuery from '@/queries/auth/useResetFcmTokenQuery';
import useGetAlarmListQuery from '@/queries/alarms/useGetAlarmListQuery';
import useResetAlarmListQuery from '@/queries/alarms/useResetAlarmListQuery';
import useCreateAlarmTestQuery from '@/queries/alarms/useCreateAlarmTestQuery';
// import useCreateAlarmTestQuery from '@/queries/alarms/useCreateAlarmTestQuery';
import useReadAlarmQuery from '@/queries/alarms/useReadAlarmQuery';
import useDeleteAlarmQuery from '@/queries/alarms/useDeleteAlarmQuery';
import useDeleteAllAlarmQuery from '@/queries/alarms/useDeleteAllAlarmQuery';
@ -19,14 +19,14 @@ export default function AlarmPopover() {
const resetFcmToken = useResetFcmTokenQuery();
const resetAlarmList = useResetAlarmListQuery();
const createAlarmTest = useCreateAlarmTestQuery();
// const createAlarmTest = useCreateAlarmTestQuery();
const readAlarm = useReadAlarmQuery();
const deleteAlarm = useDeleteAlarmQuery();
const deleteAllAlarm = useDeleteAllAlarmQuery();
const handleCreateAlarmTest = () => {
createAlarmTest.mutate();
};
// const handleCreateAlarmTest = () => {
// createAlarmTest.mutate();
// };
const handleReadAlarm = (alarmId: number) => {
readAlarm.mutate(alarmId);
@ -84,7 +84,7 @@ export default function AlarmPopover() {
return (
<Popover>
<PopoverTrigger asChild>
<button className="flex items-center justify-center p-2">
<button className="flex items-center justify-center p-2 pr-0.5">
<Bell className="h-4 w-4 cursor-pointer text-black sm:h-5 sm:w-5" />
<div className={cn('mt-[14px] h-1.5 w-1.5 rounded-full', unread ? 'bg-orange-500' : 'bg-transparent')}></div>
</button>
@ -98,12 +98,12 @@ export default function AlarmPopover() {
>
<div className="flex w-full items-center p-3">
<h2 className="body-strong flex-1"></h2>
<button
{/* <button
className="body-small p-1 text-gray-400"
onClick={handleCreateAlarmTest}
>
</button>
</button> */}
{/* {unread ? (
<button
className="body-small p-1"
@ -120,7 +120,7 @@ export default function AlarmPopover() {
</button>
)} */}
<button
className="body-small p-1 text-red-500"
className="body-small-strong p-1 text-red-500"
onClick={handleDeleteAllAlarm}
>

View File

@ -0,0 +1,64 @@
import { useState } from 'react';
import { User } from 'lucide-react';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import useAuthStore from '@/stores/useAuthStore';
import useLogoutQuery from '@/queries/auth/useLogoutQuery';
import { Button } from '../ui/button';
export default function ProfilePopover() {
const profile = useAuthStore((state) => state.profile);
const { nickname, profileImage } = profile || { nickname: '', profileImage: '' };
const logoutMutation = useLogoutQuery();
const [isLoggingOut, setIsLoggingOut] = useState<boolean>(false);
const handleLogout = async () => {
setIsLoggingOut(true);
logoutMutation.mutate(undefined, {
// onSuccess: () => {
// onClose();
// },
});
};
return (
<Popover>
<PopoverTrigger asChild>
<button className="flex items-center justify-center p-2">
<User className="h-4 w-4 cursor-pointer text-black sm:h-5 sm:w-5" />
</button>
</PopoverTrigger>
<PopoverContent
className="w-80 overflow-hidden rounded-lg p-0"
align="end"
sideOffset={14}
alignOffset={0}
>
<div className="m-4 flex flex-col gap-4">
<div className="flex items-center gap-3">
{profileImage ? (
<img
src={profileImage}
alt={`${nickname}'s profile`}
className="h-12 w-12 rounded-full"
/>
) : (
<div className="h-12 w-12 rounded-full bg-gray-300"></div>
)}
<div className="subheading">{nickname || 'Guest'}</div>
</div>
<div className="w-full">
<Button
variant="blue"
className="w-full"
onClick={handleLogout}
disabled={isLoggingOut}
>
{isLoggingOut ? '로그아웃 중...' : '로그아웃'}
</Button>
</div>
</div>
</PopoverContent>
</Popover>
);
}

View File

@ -1,10 +1,10 @@
import { cn } from '@/lib/utils';
import { useLocation, Link } from 'react-router-dom';
import UserProfileModal from './UserProfileModal';
import WorkspaceNavigation from './WorkspaceNavigation';
import useAuthStore from '@/stores/useAuthStore';
import { Suspense } from 'react';
import AlarmPopover from './AlarmPopover';
import ProfilePopover from './ProfilePopover';
export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
@ -41,7 +41,7 @@ export default function Header({ className, ...props }: HeaderProps) {
{!isHomePage && profile && (
<div className="flex items-center gap-2">
<AlarmPopover />
<UserProfileModal />
<ProfilePopover />
</div>
)}
</header>