Merge pull request #185 from Soohyuniii/feat/Header-고정-작업

feat: header 고정

Author: Soohyuniii

src/components/header/Header.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { useLocation } from "react-router-dom";
 import SubHeader from "@/components/header/SubHeader";
 import MainHeader from "@/components/header/MainHeader";
@@ -7,25 +8,35 @@ type HeaderProps = {
   title?: string;
   showPreviousIcon?: boolean;
   showShareIcon?: boolean;
+  children?: ReactNode;
 };
 
 const Header = ({
   title = "",
   showPreviousIcon = true,
-  showShareIcon = false
+  showShareIcon = false,
+  children
 }: HeaderProps) => {
   const { pathname } = useLocation();
   const { isLoggedIn } = useAuthStore();
   const isHomepage = pathname === "/";
 
-  return isHomepage ? (
-    <MainHeader isLoggedIn={isLoggedIn} />
-  ) : (
-    <SubHeader
-      title={title}
-      showPreviousIcon={showPreviousIcon}
-      showShareIcon={showShareIcon}
-    />
+  return (
+    <>
+      <div className="fixed z-50 w-[360px] bg-white md:w-[375px] lg:w-[500px]">
+        {isHomepage ? (
+          <MainHeader isLoggedIn={isLoggedIn} />
+        ) : (
+          <SubHeader
+            title={title}
+            showPreviousIcon={showPreviousIcon}
+            showShareIcon={showShareIcon}
+          />
+        )}
+      </div>
+
+      <div className="pt-14">{children}</div>
+    </>
   );
 };
 

src/components/modal/ActionConfirmModal.tsx

@@ -19,10 +19,13 @@ const ActionConfirmModal = ({
 }: AlertProps) => {
   return (
     <div
-      className="absolute inset-0 z-50 flex items-center justify-center bg-black/50"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
       onClick={onCancel}
     >
-      <div className="flex h-[200px] w-[294px] flex-col items-center justify-center rounded-2xl bg-white">
+      <div
+        className="flex h-[200px] w-[294px] flex-col items-center justify-center rounded-2xl bg-white"
+        onClick={(e) => e.stopPropagation()}
+      >
         <h3 className="text-2xl font-bold">{title}</h3>
         <p className="mt-[9px] text-center text-xl font-medium">
           {message.map((line, index) => (