Make test case filter ui sticky

forestream · forestream · commit db8bb6ab6120 · 2025-10-30T12:09:24.000+09:00
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import { Box, css, globalCss, ThemeScript } from '@devup-ui/react'
+import { Box, globalCss, ThemeScript } from '@devup-ui/react'
 import type { Metadata } from 'next'
 
 import Footer from '@/components/Footer'
@@ -52,13 +52,21 @@ globalCss({
     maxWidth: '100vw',
     overflowX: 'hidden',
   },
+  body: {
+    maxHeight: '100vh',
+    background: '#373634',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    fontFamily: 'Spoqa Han Sans Neo, Arial, Helvetica, sans-serif',
+  },
   '*': {
     boxSizing: 'border-box',
     padding: 0,
     margin: 0,
   },
   a: {
     color: 'var(--link)',
+    textDecoration: 'none',
   },
   '::placeholder': {
     fontFamily: 'Spoqa Han Sans Neo, Arial, Helvetica, sans-serif',
@@ -86,22 +94,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         <ThemeScript auto />
         <link href="/favicon.svg" rel="shortcut icon" />
       </head>
-      <body
-        className={css({
-          background: '#373634',
-          WebkitFontSmoothing: 'antialiased',
-          MozOsxFontSmoothing: 'grayscale',
-          fontFamily: 'Spoqa Han Sans Neo, Arial, Helvetica, sans-serif',
-          selectors: {
-            '& a': {
-              textDecoration: 'none',
-            },
-            '& *::placeholder': {
-              fontFamily: 'Spoqa Han Sans Neo, Arial, Helvetica, sans-serif',
-            },
-          },
-        })}
-      >
+      <body>
         <noscript>
           <iframe
             height="0"
@@ -110,7 +103,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
             width="0"
           />
         </noscript>
-        <Box bg="$background">
+        <Box bg="$background" pos="relative">
           <Header />
           {children}
         </Box>
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
@@ -27,14 +27,16 @@ export default function Header() {
   const pathname = usePathname()
 
   const isIntersectingHome = pathname === '/' && isIntersecting
+  const isTestCase = pathname === '/test-case'
 
   return (
     <>
       <Box
+        bg={isTestCase ? '$background' : 'transparent'}
         h={['60px', null, null, '100px']}
         left="0"
         p={['4px', null, null, '10px']}
-        position="fixed"
+        position="sticky"
         right="0"
         top="0"
         w="100%"
@@ -159,7 +161,7 @@ export default function Header() {
           </Flex>
         </Flex>
       </Box>
-      <Box ref={headerRef} h={['60px', null, null, '100px']} />
+      <Box ref={headerRef} h="0" />
       <Suspense>
         <MobileMenu />
       </Suspense>
diff --git a/apps/landing/src/components/test-case/TestCaseFilterContainer.tsx b/apps/landing/src/components/test-case/TestCaseFilterContainer.tsx
@@ -13,9 +13,12 @@ export function TestCaseFilterContainer({
   const isList = options.type === 'list'
   return (
     <VStack
+      bg="$background"
       gap="12px"
       mb={[isList ? '30px' : '40px', null, null, '40px']}
+      pos="sticky"
       px={['16px', null, null, '60px']}
+      top="100px"
     >
       {children}
     </VStack>
