💅 style: 헤더 컴포넌트 레이아웃 상단 고정을 위해 스타일 수정 #15

dnd-side-project · Aug 4, 2024 · 5fb3089 · 5fb3089
1 parent 989c7cd
commit 5fb3089
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 14 deletions.
diff --git a/src/layout/Mobile/MobileHeader/MobileHeader.tsx b/src/layout/Mobile/MobileHeader/MobileHeader.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 const MobileHeader: FC<Props> = ({ label, onClick }) => {
   return (
-    <header className="flex h-[44px] w-full items-center justify-between bg-gray-scale-0 px-[10px] text-gray-900">
+    <header className="fixed top-0 flex h-[44px] w-full max-w-none items-center justify-between bg-gray-scale-0 px-[10px] text-gray-900 lg:max-w-[450px]">
       <button type="button" onClick={onClick}>
         <ArrowLeftSmallIcon width={24} height={24} />
       </button>

diff --git a/src/layout/Mobile/MobileHeader/MobileHomeHeader.tsx b/src/layout/Mobile/MobileHeader/MobileHomeHeader.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 
 import { AlarmIcon, CameraIcon, SearchIcon } from "../../../components/icons";
@@ -6,7 +8,7 @@ interface Props {}
 
 const MobileHomeHeader: FC<Props> = ({}) => {
   return (
-    <header className="flex h-[44px] w-full items-center justify-between bg-gray-scale-0 px-[10px] text-gray-900">
+    <header className="fixed top-0 flex h-[44px] w-full max-w-none items-center justify-between bg-gray-scale-0 px-[10px] text-gray-900 lg:max-w-[450px]">
       <button type="button" onClick={() => {}}>
         <CameraIcon width={24} height={24} />
       </button>

diff --git a/src/layout/Mobile/MobileHeader/MobileSearchHeader.stories.tsx b/src/layout/Mobile/MobileHeader/MobileSearchHeader.stories.tsx
@@ -10,13 +10,7 @@ const meta: Meta<typeof MobileSearchHeader> = {
     layout: "centered",
   },
 
-  argTypes: {
-    label: {
-      control: {
-        type: "text",
-      },
-    },
-  },
+  argTypes: {},
 };
 
 export default meta;
@@ -28,7 +22,5 @@ export const Default: Story = {
       <MobileSearchHeader {...args} />
     </div>
   ),
-  args: {
-    label: "TEXT",
-  },
+  args: {},
 };
diff --git a/src/layout/Mobile/MobileHeader/MobileSearchHeader.tsx b/src/layout/Mobile/MobileHeader/MobileSearchHeader.tsx
@@ -1,15 +1,17 @@
+"use client";
+
 import Link from "next/link";
 import React, { FC } from "react";
 
-import SearchInput from "@/components/common/Input/SearchInput";
+import SearchInput from "@/components/core/Input/SearchInput";
 
 import { ArrowLeftSmallIcon } from "../../../components/icons";
 
 interface Props {}
 
 const MobileSearchHeader: FC<Props> = ({}) => {
   return (
-    <header className="flex h-[60px] w-full items-center justify-between bg-gray-scale-0 px-[10px] text-gray-900">
+    <header className="fixed top-0 flex h-[60px] w-full max-w-none items-center justify-between bg-gray-scale-0 px-[10px] text-gray-900 lg:max-w-[450px]">
       <Link href="/" className="pr-[8px]">
         <ArrowLeftSmallIcon width={24} height={24} />
       </Link>