From a17c7b87d36ae430380f73194a92c0545cb3ffc8 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Mon, 27 Jan 2025 22:22:38 +0900
Subject: [PATCH 1/2] Add color

---
 packages/react/src/types/props/svg.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/types/props/svg.ts b/packages/react/src/types/props/svg.ts
index f290f7f9..d7fea9ab 100644
--- a/packages/react/src/types/props/svg.ts
+++ b/packages/react/src/types/props/svg.ts
@@ -1,10 +1,11 @@
 import type { Property } from 'csstype'
 
 import type { ResponsiveValue } from '../responsive-value'
+import type { DevupThemeColors } from '../theme'
 
 export interface DevupUiSvgProps {
-  fill?: ResponsiveValue<Property.Fill>
-  stroke?: ResponsiveValue<Property.Stroke>
+  fill?: ResponsiveValue<Property.Fill | keyof DevupThemeColors>
+  stroke?: ResponsiveValue<Property.Stroke | keyof DevupThemeColors>
   strokeWidth?: ResponsiveValue<Property.StrokeWidth>
   strokeOpacity?: ResponsiveValue<Property.StrokeOpacity>
 }

From dd72d5cdaf6499b205919607ee4e693f6e59a338 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Mon, 27 Jan 2025 22:31:40 +0900
Subject: [PATCH 2/2] Add suspense

---
 .../src/components/Header/HeaderWrap.tsx      | 41 ++++++++++++-------
 apps/landing/src/components/Header/index.tsx  | 31 ++++++++------
 2 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/apps/landing/src/components/Header/HeaderWrap.tsx b/apps/landing/src/components/Header/HeaderWrap.tsx
index c14ee62b..d0f0778d 100644
--- a/apps/landing/src/components/Header/HeaderWrap.tsx
+++ b/apps/landing/src/components/Header/HeaderWrap.tsx
@@ -2,11 +2,11 @@
 
 import { Box, Flex } from '@devup-ui/react'
 import { usePathname, useSearchParams } from 'next/navigation'
+import { Suspense } from 'react'
 
 export function HeaderWrap({ children }: { children: React.ReactNode }) {
   const path = usePathname()
   const isRoot = path === '/'
-  const menu = useSearchParams().get('menu') === '1'
   return (
     <Box
       pos={isRoot ? 'fixed' : 'sticky'}
@@ -17,20 +17,31 @@ export function HeaderWrap({ children }: { children: React.ReactNode }) {
       w="100%"
       zIndex={1}
     >
-      <Flex
-        alignItems="center"
-        bg="$containerBackground"
-        borderRadius={isRoot ? [null, null, '16px'] : undefined}
-        boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
-        h={['50px', null, '70px']}
-        justifyContent="space-between"
-        maxW={isRoot ? '1440px' : '100%'}
-        mx="auto"
-        pl={[menu ? null : 4, 5, '40px']}
-        pr={[null, 5, '40px']}
-      >
-        {children}
-      </Flex>
+      <Suspense>
+        <HeaderWrapInner>{children}</HeaderWrapInner>
+      </Suspense>
     </Box>
   )
 }
+
+function HeaderWrapInner({ children }: { children: React.ReactNode }) {
+  const path = usePathname()
+  const isRoot = path === '/'
+  const menu = useSearchParams().get('menu') === '1'
+  return (
+    <Flex
+      alignItems="center"
+      bg="$containerBackground"
+      borderRadius={isRoot ? [null, null, '16px'] : undefined}
+      boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
+      h={['50px', null, '70px']}
+      justifyContent="space-between"
+      maxW={isRoot ? '1440px' : '100%'}
+      mx="auto"
+      pl={[menu ? null : 4, 5, '40px']}
+      pr={[null, 5, '40px']}
+    >
+      {children}
+    </Flex>
+  )
+}
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
index 0573478f..3d900507 100644
--- a/apps/landing/src/components/Header/index.tsx
+++ b/apps/landing/src/components/Header/index.tsx
@@ -1,5 +1,6 @@
 import { css, Flex } from '@devup-ui/react'
 import Link from 'next/link'
+import { Suspense } from 'react'
 
 import { URL_PREFIX } from '../../constants'
 import { Logo } from '../Logo'
@@ -31,16 +32,18 @@ export function Header() {
   return (
     <HeaderWrap>
       <Flex alignItems="center" gap="16px">
-        <MobMenuWrapper openChildren={top}>
-          <Link
-            className={css({
-              textDecoration: 'none',
-            })}
-            href={URL_PREFIX + '/'}
-          >
-            <Logo />
-          </Link>
-        </MobMenuWrapper>
+        <Suspense>
+          <MobMenuWrapper openChildren={top}>
+            <Link
+              className={css({
+                textDecoration: 'none',
+              })}
+              href={URL_PREFIX + '/'}
+            >
+              <Logo />
+            </Link>
+          </MobMenuWrapper>
+        </Suspense>
       </Flex>
       <Flex alignItems="center" display={['none', null, 'flex']} gap="10px">
         <Flex alignItems="center" px="24px">
@@ -75,9 +78,11 @@ export function Header() {
         gap="10px"
         p="10px"
       >
-        <MobMenuButton>
-          <MobMenu />
-        </MobMenuButton>
+        <Suspense fallback={<MobMenu />}>
+          <MobMenuButton>
+            <MobMenu />
+          </MobMenuButton>
+        </Suspense>
       </Flex>
     </HeaderWrap>
   )