feat: 대시보드 fixed header 적용

Nexters · Aug 21, 2024 · 75a998a · 75a998a
1 parent eb57aff
commit 75a998a
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/app/(main)/dashboard/page.tsx b/src/app/(main)/dashboard/page.tsx
@@ -38,9 +38,9 @@ export default async function Page() {
   const sortedInvitations = invitations.toSorted(sortByUpdatedAtDescending);
 
   return (
-    <div className="flex h-dvh flex-col overflow-hidden">
+    <div>
       {/* header */}
-      <header className="flex h-20 items-center px-4 lg:px-6">
+      <header className="sticky inset-x-0 top-0 z-50 mx-auto flex h-20 w-full max-w-7xl items-center bg-background/70 px-7 backdrop-blur sm:px-14">
         <Link className="flex items-center justify-center" href="/">
           <LogoTextIcon />
           <span className="sr-only">Invi</span>
@@ -54,7 +54,7 @@ export default async function Page() {
       <div className="flex flex-1 overflow-hidden">
         <main className="relative isolate w-full flex-1 overflow-y-auto">
           {/* 템플릿 목록 */}
-          <div className="mx-auto max-w-7xl p-14">
+          <div className="mx-auto max-w-7xl p-14 px-7 sm:px-14">
             <div className="relative flex items-start justify-between gap-4">
               <div className="flex w-full max-w-[80ch] flex-col gap-3">
                 <h2 className="truncate text-2xl font-bold tracking-tight">
@@ -70,7 +70,7 @@ export default async function Page() {
           </div>
           {/* 초대장 목록 */}
           {!!sortedInvitations.length && (
-            <div className="mx-auto max-w-7xl p-14">
+            <div className="mx-auto max-w-7xl p-14 px-7 sm:px-14">
               <div className="relative flex items-start justify-between gap-4">
                 <div className="flex w-full max-w-[80ch] flex-col gap-3">
                   <h2 className="truncate text-2xl font-bold tracking-tight">