💄 Fix double header in mobile ui

src/components/EventCard.tsx

@@ -121,7 +121,7 @@ export default function EventCard({
       key={`card-${publicId}`}
       className="w-full rounded-lg border border-border"
     >
-      <Link to={`/event/${publicId}`}>
+      <Link to={`/event/${publicId}`} state={{ fromHome: true }}>
         <div className="flex flex-col px-4 pt-4 pb-3 gap-3">
           <h1>{title}</h1>
           <div className="flex flex-col gap-1">
@@ -151,7 +151,7 @@ export default function EventCard({
         </div>
       </Link>
       <div className="flex flex-col px-6 pt-3 pb-2 gap-1 bg-muted w-full rounded-b-lg items-start">
-        <Link to={`/event/${publicId}`}>
+        <Link to={`/event/${publicId}`} state={{ fromHome: true }}>
           <div className="flex gap-1.5">
             <Clock stroke="#757575" width="16" />
             <span className="body-base">

src/components/Header.tsx

@@ -2,12 +2,14 @@ import ProfileButton from '@/components/ProfileButton';
 import { Button } from '@/components/ui/button';
 import useAuth from '@/hooks/useAuth';
 import useAuthStore from '@/hooks/useAuthStore';
+import useLayoutStore from '@/hooks/useLayoutStore';
 import { useEffect } from 'react';
 import { Link, useLocation } from 'react-router';
 
 export default function Header() {
   const { user, handleLogout, refreshUser } = useAuth();
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+  const isSubheaderActive = useLayoutStore((state) => state.isSubheaderActive);
   const setRedirectUrl = useAuthStore((state) => state.setRedirectUrl);
   const location = useLocation();
 
@@ -37,7 +39,9 @@ export default function Header() {
   }, [isLoggedIn, refreshUser]);
 
   return (
-    <header className="sticky top-0 z-40 flex w-full h-16 justify-center border-b box-content bg-white">
+    <header
+      className={`sticky top-0 z-40 w-full h-16 justify-center border-b box-content bg-white ${isSubheaderActive ? 'hidden md:flex' : 'flex'}`}
+    >
       <div className="flex w-full h-full items-center justify-between px-6 sm:w-screen-sm md:w-screen-md lg:w-screen-lg xl:max-w-screen-xl">
         <Link
           to="/"

src/components/ProfileButton.tsx

@@ -33,8 +33,8 @@ export default function ProfileButton({
           <UserAvatar
             name={user.name}
             imageUrl={user.profileImage}
-            className="w-8 h-8 sm:w-10 sm:h-10 border-2"
-            fallbackClassName="font-semibold text-md sm:text-lg"
+            className="w-8 h-8 md:w-10 md:h-10 border-2"
+            fallbackClassName="font-semibold text-md md:text-lg"
           />
         </button>
       </DropdownMenuTrigger>

src/components/Subheader.tsx

@@ -16,7 +16,9 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import useLayoutStore from '@/hooks/useLayoutStore';
 import { ChevronLeftIcon, EllipsisVertical } from 'lucide-react';
+import { useEffect } from 'react';
 
 type DropdownOptions = {
   onEditClick: () => void;
@@ -32,6 +34,15 @@ export default function Subheader({
   onBackClick: () => void;
   dropdownOptions?: DropdownOptions;
 }) {
+  const setSubheaderActive = useLayoutStore(
+    (state) => state.setSubheaderActive
+  );
+
+  useEffect(() => {
+    setSubheaderActive(true);
+    return () => setSubheaderActive(false);
+  }, [setSubheaderActive]);
+
   return (
     <header className="w-full flex justify-center">
       <div className="max-w-2xl w-full flex justify-between items-center pl-2 pr-6 py-3">

src/components/ui/alert-dialog.tsx

@@ -53,7 +53,7 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-6 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-md',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-6 rounded-lg border p-6 shadow-lg duration-200 md:max-w-md',
           className
         )}
         {...props}
@@ -89,7 +89,7 @@ function AlertDialogFooter({
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        'flex flex-col-reverse gap-2 md:flex-row md:justify-end',
         className
       )}
       {...props}

src/hooks/useLayoutStore.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface LayoutState {
+  isSubheaderActive: boolean;
+  setSubheaderActive: (active: boolean) => void;
+}
+
+const useLayoutStore = create<LayoutState>((set) => ({
+  isSubheaderActive: false,
+  setSubheaderActive: (active) => set({ isSubheaderActive: active }),
+}));
+
+export default useLayoutStore;

src/routes/EventMain.tsx

@@ -9,7 +9,7 @@ import {
   X,
 } from 'lucide-react';
 import { type ComponentProps, useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router';
+import { useLocation, useNavigate, useParams } from 'react-router';
 import { toast } from 'sonner';
 
 // Hooks
@@ -44,7 +44,9 @@ import { formatEventDate, getRemainingTime } from '@/utils/date';
 export default function EventMain() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const location = useLocation();
   const queryClient = useQueryClient();
+  const fromHome = location.state?.fromHome;
   const { user, isLoggedIn } = useAuth();
   const { removeGuestRegistration } = useAuthStore();
 
@@ -158,14 +160,18 @@ export default function EventMain() {
   return (
     <div className="flex flex-col pb-40">
       {/* 1. 상단 네비게이션 */}
-      {view === 'ADMIN' && (
+      {(fromHome || view === 'ADMIN') && (
         <Subheader
-          title="상세보기"
+          title={event.title}
           onBackClick={() => navigate('/')}
-          dropdownOptions={{
-            onEditClick: () => navigate('edit'),
-            onDeleteClick: onDeleteClick,
-          }}
+          dropdownOptions={
+            view === 'ADMIN'
+              ? {
+                  onEditClick: () => navigate('edit'),
+                  onDeleteClick: onDeleteClick,
+                }
+              : undefined
+          }
         />
       )}
 

src/routes/EventRegister.tsx

@@ -79,7 +79,7 @@ export default function EventRegister() {
   return (
     <div className="min-h-screen relative pb-25">
       {/* 1. 상단 네비게이션 */}
-      <Subheader title="정보 입력" onBackClick={() => navigate(-1)} />
+      <Subheader title="모임 신청하기" onBackClick={() => navigate(-1)} />
 
       {/* 2. 메인 콘텐츠 */}
       <div className="max-w-2xl min-w-[320px] mx-auto w-[90%] flex flex-col items-start gap-10 mt-6">

src/routes/Guests.tsx

@@ -108,22 +108,22 @@ export default function Guests() {
           page.participants.map((guest) => (
             <div
               key={guest.registrationId}
-              className="flex items-center justify-between w-full gap-2 sm:gap-4"
+              className="flex items-center justify-between w-full gap-2 md:gap-4"
             >
-              <div className="flex items-center gap-3 sm:gap-4 min-w-0 flex-1">
+              <div className="flex items-center gap-3 md:gap-4 min-w-0 flex-1">
                 <UserAvatar name={guest.name} imageUrl={guest.profileImage} />
 
                 <div className="flex flex-col min-w-0 flex-1">
-                  <span className="text-lg sm:text-xl font-bold text-black truncate">
+                  <span className="text-lg md:text-xl font-bold text-black truncate">
                     {guest.name}
                   </span>
                   {guest.email ? (
-                    <span className="text-sm sm:text-lg text-gray-400 truncate">
+                    <span className="text-sm md:text-lg text-gray-400 truncate">
                       {guest.email}
                     </span>
                   ) : null}
                   {guest.status === 'WAITLISTED' && (
-                    <span className="text-sm sm:text-lg text-blue-400 font-semibold truncate">
+                    <span className="text-sm md:text-lg text-blue-400 font-semibold truncate">
                       대기 {guest.waitingNum}번
                     </span>
                   )}
@@ -136,7 +136,7 @@ export default function Guests() {
                   <AlertDialogTrigger asChild>
                     <Button
                       variant="secondary"
-                      className="bg-[#333333] hover:bg-black text-white rounded-lg px-3 py-2 sm:px-4 sm:py-3 h-auto text-sm sm:text-base font-bold shrink-0"
+                      className="bg-[#333333] hover:bg-black text-white rounded-lg px-3 py-2 md:px-4 md:py-3 h-auto text-sm md:text-base font-bold shrink-0"
                     >
                       강제취소
                     </Button>