Merge pull request #89 from billilge/fix/#77-mobile-main-error-fix

hyeonjin6530 · web-flow · commit 34ea37636601 · 2025-03-03T15:40:44.000+09:00
[Fix/#77] 모바일 메인 검색창 클릭시 확대되는 현상 / 알림 디자인 및 로직 수정
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -28,6 +28,14 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: React.PropsWithChildren) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        {/* viewport metadata에 추가 했을 시, 경고가 떠서 이쪽에 적었고 head태그를 사용하려면 title도 필요하여 title도 추가하게 되었습니다. */}
+        <meta
+          name="viewport"
+          content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
+        />
+        <title>빌릴게</title>
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
         suppressHydrationWarning
diff --git a/src/app/mobile/main/_components/MainHeader/index.tsx b/src/app/mobile/main/_components/MainHeader/index.tsx
@@ -10,9 +10,7 @@ import { getNotificationCount } from '@/apis/notification';
 export default function MainHeader() {
   const router = useRouter();
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const [notificationCount, setNotificationCount] = useState<number | null>(
-    null,
-  );
+  const [notificationCount, setNotificationCount] = useState(0);
   const [user, setUser] = useState<{
     name: string;
     id: string;
@@ -52,9 +50,9 @@ export default function MainHeader() {
             onClick={() => router.push('/mobile/notification')}
           >
             <IconAlarm />
-            {notificationCount && (
-              <div className="absolute -right-0.5 -top-0.5 flex h-[13px] w-[13px] items-center justify-center rounded-full bg-warning text-caption-2_midi text-white-primary">
-                {notificationCount}
+            {notificationCount > 0 && (
+              <div className="absolute -top-0.5 left-2.5 flex h-[13px] w-fit min-w-[13px] items-center justify-center rounded-full bg-warning px-0.5 text-caption-2_midi text-white-primary">
+                {notificationCount > 99 ? '99+' : notificationCount}
               </div>
             )}
           </button>
