Merge branch 'fe/refactor/improve-design' into 'fe/develop'

Design: 디자인 개선 및 리팩토링 - S11P21S002-244

See merge request s11-s-project/S11P21S002!254

frontend/src/components/Header/AlarmPopover.tsx

@@ -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}
           >
             모두 삭제

frontend/src/components/Header/ProfilePopover.tsx

@@ -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>
+  );
+}

frontend/src/components/Header/index.tsx

@@ -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>

frontend/src/components/ProjectCreateModal/ProjectCreateForm.tsx

@@ -126,9 +126,9 @@ export default function ProjectCreateForm({ onSubmit }: { onSubmit: (data: Proje
                     {categories.map((category: string, index: number) => (
                       <div
                         key={index}
-                        className="flex items-center gap-1 rounded-full border-2 border-gray-700 px-2 py-1 text-gray-700"
+                        className="flex items-center gap-1 rounded-full bg-blue-500 py-1 pl-3 pr-2 text-white"
                       >
-                        <span>{category}</span>
+                        <span className="body-small">{category}</span>
                         <X
                           size={16}
                           className="cursor-pointer"