From ef8e63eb529586054bfa0b1f6b1bfe01a9db4c0e Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Mon, 9 Jun 2025 17:54:35 +0900
Subject: [PATCH] Refactor landing

---
 .../src/app/(detail)/docs/MenuItem.tsx        | 11 +++------
 .../src/app/(detail)/docs/OpenMenuItem.tsx    | 13 ++++-------
 apps/landing/src/app/FeatureCard.tsx          |  4 +---
 apps/landing/src/app/layout.tsx               | 23 ++++++++++++++++---
 apps/landing/src/app/page.tsx                 | 12 ++++------
 apps/landing/src/components/Discord.tsx       |  6 ++---
 apps/landing/src/components/Footer.tsx        | 23 ++++++++-----------
 .../src/components/Header/HeaderInput.tsx     |  4 +---
 apps/landing/src/components/Header/Menu.tsx   |  6 +----
 .../landing/src/components/Header/MobMenu.tsx |  5 ++--
 apps/landing/src/components/Header/index.tsx  | 11 ++++-----
 apps/landing/src/components/Logo.tsx          |  3 +--
 .../components/SearchModal/SearchContent.tsx  |  4 +---
 apps/landing/src/constants.ts                 |  2 --
 apps/landing/src/utils/is-root.ts             |  4 +---
 15 files changed, 55 insertions(+), 76 deletions(-)
 delete mode 100644 apps/landing/src/constants.ts

diff --git a/apps/landing/src/app/(detail)/docs/MenuItem.tsx b/apps/landing/src/app/(detail)/docs/MenuItem.tsx
index 66170220..2bd3e84d 100644
--- a/apps/landing/src/app/(detail)/docs/MenuItem.tsx
+++ b/apps/landing/src/app/(detail)/docs/MenuItem.tsx
@@ -3,7 +3,6 @@ import { Box, css, Flex, Text } from '@devup-ui/react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
-import { URL_PREFIX } from '../../../constants'
 import { OpenMenuItem } from './OpenMenuItem'
 
 export interface MenuItemProps {
@@ -19,12 +18,8 @@ export function MenuItem(props: MenuItemProps) {
   const { children, to, subMenu } = props
   const path = usePathname()
   const selected = to
-    ? path.startsWith(to) || path.startsWith(URL_PREFIX + to)
-    : !!subMenu?.some((item) =>
-        item.to
-          ? path.startsWith(URL_PREFIX + item.to) || path.startsWith(item.to)
-          : false,
-      )
+    ? path.startsWith(to)
+    : !!subMenu?.some((item) => (item.to ? path.startsWith(item.to) : false))
 
   if (subMenu) return <OpenMenuItem {...props} subMenu={subMenu} />
   const inner = (
@@ -61,7 +56,7 @@ export function MenuItem(props: MenuItemProps) {
       className={css({
         textDecoration: 'none',
       })}
-      href={URL_PREFIX + to}
+      href={to}
     >
       {inner}
     </Link>
diff --git a/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx b/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx
index ad0d215a..0f186488 100644
--- a/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx
+++ b/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx
@@ -4,7 +4,6 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Fragment, useReducer } from 'react'
 
-import { URL_PREFIX } from '../../../constants'
 import { MenuItemProps } from './MenuItem'
 
 export function OpenMenuItem({
@@ -14,9 +13,7 @@ export function OpenMenuItem({
   Required<Pick<MenuItemProps, 'subMenu'>>) {
   const path = usePathname()
   const selected = subMenu.some((item) =>
-    item.to
-      ? path.startsWith(URL_PREFIX + item.to) || path.startsWith(item.to)
-      : false,
+    item.to ? path.startsWith(item.to) : false,
   )
   const [open, handleOpen] = useReducer((state) => !state, selected)
   return (
@@ -45,7 +42,7 @@ export function OpenMenuItem({
         {subMenu && (
           <Image
             boxSize="16px"
-            src={URL_PREFIX + '/menu-arrow.svg'}
+            src="/menu-arrow.svg"
             transform={open ? 'rotate(0deg)' : 'rotate(-90deg)'}
             transition="transform 0.2s"
           />
@@ -56,9 +53,7 @@ export function OpenMenuItem({
           <Box borderRight="1px solid var(--border, #E0E0E0)" w="10px" />
           <VStack flex="1" gap="4px">
             {subMenu.map(({ children, to }, idx) => {
-              const selected = to
-                ? path.startsWith(to) || path.startsWith(URL_PREFIX + to)
-                : false
+              const selected = to ? path.startsWith(to) : false
               const inner = (
                 <Flex
                   _hover={{
@@ -90,7 +85,7 @@ export function OpenMenuItem({
                   className={css({
                     textDecoration: 'none',
                   })}
-                  href={URL_PREFIX + to}
+                  href={to}
                 >
                   {inner}
                 </Link>
diff --git a/apps/landing/src/app/FeatureCard.tsx b/apps/landing/src/app/FeatureCard.tsx
index ed0a21e6..bc39d945 100644
--- a/apps/landing/src/app/FeatureCard.tsx
+++ b/apps/landing/src/app/FeatureCard.tsx
@@ -1,7 +1,5 @@
 import { Flex, Image, Text, VStack } from '@devup-ui/react'
 
-import { URL_PREFIX } from '../constants'
-
 interface FeatureCardProps {
   title: string
   description: string
@@ -12,7 +10,7 @@ export function FeatureCard({ icon, description, title }: FeatureCardProps) {
   return (
     <Flex bg="$cardBg" borderRadius="20px" flex="1" gap="10px" p="24px">
       <Flex px="8px">
-        <Image boxSize="32px" src={URL_PREFIX + icon} />
+        <Image boxSize="32px" src={icon} />
       </Flex>
       <VStack flex="1" gap="10px">
         <Text color="$title" typography="h6">
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index 9e9a3f0f..af2272a8 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -7,7 +7,6 @@ import type { Metadata } from 'next'
 import { Footer } from '../components/Footer'
 import { Header } from '../components/Header'
 import { SearchModal } from '../components/SearchModal'
-import { URL_PREFIX } from '../constants'
 
 export const metadata: Metadata = {
   title: 'Devup UI',
@@ -22,10 +21,20 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `<!-- Google Tag Manager -->
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-PSRKC4QZ');</script>
+<!-- End Google Tag Manager -->`,
+          }}
+        />
         <ThemeScript auto />
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-        {URL_PREFIX && <base href={URL_PREFIX} />}
-        <link href={URL_PREFIX + '/favicon.ico'} rel="shortcut icon" />
+        <link href="/favicon.ico" rel="shortcut icon" />
       </head>
       <body
         className={css({
@@ -33,6 +42,14 @@ export default function RootLayout({
           color: '$text',
         })}
       >
+        <noscript>
+          <iframe
+            height="0"
+            src="https://www.googletagmanager.com/ns.html?id=GTM-PSRKC4QZ"
+            style={{ display: 'none', visibility: 'hidden' }}
+            width="0"
+          />
+        </noscript>
         <SearchModal />
         <Header />
         {children}
diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
index aed38ecd..8b5ffea6 100644
--- a/apps/landing/src/app/page.tsx
+++ b/apps/landing/src/app/page.tsx
@@ -4,12 +4,12 @@ import Link from 'next/link'
 import { CodeBoard } from '../components/CodeBoard'
 import { Container } from '../components/Container'
 import { Discord } from '../components/Discord'
-import { URL_PREFIX } from '../constants'
 import { FeatureCard } from './FeatureCard'
 
 export default function HomePage() {
   return (
     <>
+      <link href="https://devup-ui.com" rel="canonical" />
       <Box
         h="80dvh"
         pointerEvents="none"
@@ -66,7 +66,7 @@ export default function HomePage() {
       <Box pt={['100px', '150px']}>
         <VStack alignItems="center" gap="50px" maxW="800px" mx="auto">
           <VStack alignItems="center" gap="24px">
-            <Image h="50px" src={URL_PREFIX + '/icon.svg'} w="52px" />
+            <Image h="50px" src="/icon.svg" w="52px" />
             <Text color="$title" textAlign="center" typography="h1">
               Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
             </Text>
@@ -81,7 +81,7 @@ export default function HomePage() {
             className={css({
               textDecoration: 'none',
             })}
-            href={URL_PREFIX + '/docs/overview'}
+            href="/docs/overview"
           >
             <Flex
               _active={{
@@ -112,11 +112,7 @@ export default function HomePage() {
                 <Text color="$base" typography="buttonL">
                   Get started
                 </Text>
-                <Image
-                  bg="$base"
-                  boxSize="24px"
-                  maskImage={`url(${URL_PREFIX + '/arrow.svg'})`}
-                />
+                <Image bg="$base" boxSize="24px" maskImage="url(/arrow.svg)" />
               </Flex>
             </Flex>
           </Link>
diff --git a/apps/landing/src/components/Discord.tsx b/apps/landing/src/components/Discord.tsx
index c9e1bb3f..b0fe2435 100644
--- a/apps/landing/src/components/Discord.tsx
+++ b/apps/landing/src/components/Discord.tsx
@@ -1,14 +1,12 @@
 import { css, Flex, Image, Text, VStack } from '@devup-ui/react'
 import Link from 'next/link'
 
-import { URL_PREFIX } from '../constants'
-
 export function Discord() {
   return (
     <VStack
       alignItems="center"
       bgColor="$joinBg"
-      bgImage={`url(${URL_PREFIX}/discord-bg.svg)`}
+      bgImage="url(/discord-bg.svg)"
       bgPositionX={['-20vw', null, '-30%']}
       bgPositionY="bottom"
       bgSize={['contain', null, '70%']}
@@ -56,7 +54,7 @@ export function Discord() {
               <Text color="#FFF" typography="buttonLbold">
                 Join our Discord
               </Text>
-              <Image boxSize="24px" src={URL_PREFIX + '/outlink.svg'} />
+              <Image boxSize="24px" src="/outlink.svg" />
             </Flex>
           </Flex>
         </Link>
diff --git a/apps/landing/src/components/Footer.tsx b/apps/landing/src/components/Footer.tsx
index ce1aa959..67f683a7 100644
--- a/apps/landing/src/components/Footer.tsx
+++ b/apps/landing/src/components/Footer.tsx
@@ -1,8 +1,6 @@
 import { Box, css, Flex, Image, Text, VStack } from '@devup-ui/react'
 import Link from 'next/link'
 
-import { URL_PREFIX } from '../constants'
-
 export function Footer() {
   return (
     <Box as="footer" bg="$footerBg" px="16px" py={['30px', '60px']}>
@@ -15,7 +13,7 @@ export function Footer() {
           <VStack flex="1" gap={[1, 0]}>
             <Link
               className={css({ textDecoration: 'none' })}
-              href={URL_PREFIX + '/docs/overview'}
+              href="/docs/overview"
             >
               <Text color="$footerTitle" typography="buttonS">
                 Docs
@@ -24,7 +22,7 @@ export function Footer() {
             <VStack gap="14px">
               <Link
                 className={css({ textDecoration: 'none' })}
-                href={URL_PREFIX + '/docs/overview'}
+                href="/docs/overview"
               >
                 <Text color="$footerText" typography="footerMenu">
                   Overview
@@ -33,7 +31,7 @@ export function Footer() {
 
               <Link
                 className={css({ textDecoration: 'none' })}
-                href={URL_PREFIX + '/docs/installation'}
+                href="/docs/installation"
               >
                 <Text color="$footerText" typography="footerMenu">
                   Installation
@@ -41,7 +39,7 @@ export function Footer() {
               </Link>
               <Link
                 className={css({ textDecoration: 'none' })}
-                href={URL_PREFIX + '/docs/features'}
+                href="/docs/features"
               >
                 <Text color="$footerText" typography="footerMenu">
                   Features
@@ -49,7 +47,7 @@ export function Footer() {
               </Link>
               <Link
                 className={css({ textDecoration: 'none' })}
-                href={URL_PREFIX + '/docs/api/box'}
+                href="/docs/api/box"
               >
                 <Text color="$footerText" typography="footerMenu">
                   API
@@ -57,7 +55,7 @@ export function Footer() {
               </Link>
               <Link
                 className={css({ textDecoration: 'none' })}
-                href={URL_PREFIX + '/docs/devup/devup-json'}
+                href="/docs/devup/devup-json"
               >
                 <Text color="$footerText" typography="footerMenu">
                   Devup
@@ -66,10 +64,7 @@ export function Footer() {
             </VStack>
           </VStack>
           <VStack flex="1" gap="20px">
-            <Link
-              className={css({ textDecoration: 'none' })}
-              href={URL_PREFIX + '/team'}
-            >
+            <Link className={css({ textDecoration: 'none' })} href="/team">
               <Text color="$footerTitle" typography="buttonS">
                 Team
               </Text>
@@ -81,10 +76,10 @@ export function Footer() {
           flexDir={['column', 'row']}
           justifyContent="space-between"
         >
-          <Link href={URL_PREFIX + '/'}>
+          <Link href="/">
             <Image
               alt="white-logo"
-              src={URL_PREFIX + '/white-logo.svg'}
+              src="/white-logo.svg"
               w={['164px', '204px']}
             />
           </Link>
diff --git a/apps/landing/src/components/Header/HeaderInput.tsx b/apps/landing/src/components/Header/HeaderInput.tsx
index d9fd2097..83266dd9 100644
--- a/apps/landing/src/components/Header/HeaderInput.tsx
+++ b/apps/landing/src/components/Header/HeaderInput.tsx
@@ -1,7 +1,5 @@
 import { Flex, Image, Input } from '@devup-ui/react'
 
-import { URL_PREFIX } from '../../constants'
-
 export function HeaderInput(props: React.ComponentProps<'input'>) {
   return (
     <Flex
@@ -12,7 +10,7 @@ export function HeaderInput(props: React.ComponentProps<'input'>) {
       p="8px 8px 6px"
       w="100%"
     >
-      <Image boxSize="24px" src={URL_PREFIX + '/search.svg'} />
+      <Image boxSize="24px" src="/search.svg" />
       <Input
         _placeholder={{
           color: '$caption',
diff --git a/apps/landing/src/components/Header/Menu.tsx b/apps/landing/src/components/Header/Menu.tsx
index 836a6d46..2341ebe2 100644
--- a/apps/landing/src/components/Header/Menu.tsx
+++ b/apps/landing/src/components/Header/Menu.tsx
@@ -2,8 +2,6 @@
 import { Text } from '@devup-ui/react'
 import { usePathname } from 'next/navigation'
 
-import { URL_PREFIX } from '../../constants'
-
 interface MenuProps {
   children?: React.ReactNode
   keyword: string
@@ -11,9 +9,7 @@ interface MenuProps {
 
 export function Menu({ children, keyword }: MenuProps) {
   const path = usePathname()
-  const selected =
-    path.startsWith(`${URL_PREFIX}/${keyword}`) ||
-    path.startsWith(`/${keyword}`)
+  const selected = path.startsWith(`/${keyword}`)
   return (
     <Text
       _active={{
diff --git a/apps/landing/src/components/Header/MobMenu.tsx b/apps/landing/src/components/Header/MobMenu.tsx
index 6ba2b4bb..862fdebb 100644
--- a/apps/landing/src/components/Header/MobMenu.tsx
+++ b/apps/landing/src/components/Header/MobMenu.tsx
@@ -2,7 +2,6 @@ import { Box, css, Flex, Text } from '@devup-ui/react'
 import Link from 'next/link'
 
 import { LeftMenu } from '../../app/(detail)/docs/LeftMenu'
-import { URL_PREFIX } from '../../constants'
 import { HeaderInput } from './HeaderInput'
 import { HeaderInputWrap } from './HeaderInputWrap'
 import { MobMenuWrap } from './MobMenuWrap'
@@ -20,7 +19,7 @@ export function MobMenu() {
           className={css({
             textDecoration: 'none',
           })}
-          href={URL_PREFIX + '/docs/overview'}
+          href="/docs/overview"
         >
           <Flex alignItems="center" py="10px">
             <Text color="$title" textAlign="right" typography="buttonM">
@@ -33,7 +32,7 @@ export function MobMenu() {
           className={css({
             textDecoration: 'none',
           })}
-          href={URL_PREFIX + '/team'}
+          href="/team"
         >
           <Flex alignItems="center" py="10px">
             <Text color="$title" textAlign="right" typography="buttonM">
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
index 673c873d..92b5ffb7 100644
--- a/apps/landing/src/components/Header/index.tsx
+++ b/apps/landing/src/components/Header/index.tsx
@@ -2,7 +2,6 @@ import { Box, css, Flex } from '@devup-ui/react'
 import Link from 'next/link'
 import { Suspense } from 'react'
 
-import { URL_PREFIX } from '../../constants'
 import { Logo } from '../Logo'
 import { Discord } from './Discord'
 import { Github } from './Github'
@@ -46,7 +45,7 @@ export function Header() {
               textDecoration: 'none',
               ml: 4,
             })}
-            href={URL_PREFIX + '/'}
+            href="/"
           >
             <Logo />
           </Link>
@@ -59,7 +58,7 @@ export function Header() {
                   textDecoration: 'none',
                   ml: 4,
                 })}
-                href={URL_PREFIX + '/'}
+                href="/"
               >
                 <Logo />
               </Link>
@@ -71,7 +70,7 @@ export function Header() {
                   textDecoration: 'none',
                   ml: 4,
                 })}
-                href={URL_PREFIX + '/'}
+                href="/"
               >
                 <Logo />
               </Link>
@@ -85,7 +84,7 @@ export function Header() {
             className={css({
               textDecoration: 'none',
             })}
-            href={URL_PREFIX + '/docs/overview'}
+            href="/docs/overview"
           >
             <Menu keyword="docs">Docs</Menu>
           </Link>
@@ -95,7 +94,7 @@ export function Header() {
             className={css({
               textDecoration: 'none',
             })}
-            href={URL_PREFIX + '/team'}
+            href="/team"
           >
             <Menu keyword="team">Team</Menu>
           </Link>
diff --git a/apps/landing/src/components/Logo.tsx b/apps/landing/src/components/Logo.tsx
index 55861575..d3095c76 100644
--- a/apps/landing/src/components/Logo.tsx
+++ b/apps/landing/src/components/Logo.tsx
@@ -1,12 +1,11 @@
 import { Center, Flex, Image } from '@devup-ui/react'
 
-import { URL_PREFIX } from '../constants'
 import { LogoText } from './LogoText'
 
 export function Logo() {
   return (
     <Flex alignItems="center" gap={[2, null, 4]} h={[7, '42px']}>
-      <Image h="100%" src={URL_PREFIX + '/logo.svg'} />
+      <Image h="100%" src="/logo.svg" />
       <Center h={[5, null, '42px']}>
         <LogoText />
       </Center>
diff --git a/apps/landing/src/components/SearchModal/SearchContent.tsx b/apps/landing/src/components/SearchModal/SearchContent.tsx
index ff473b06..412f574f 100644
--- a/apps/landing/src/components/SearchModal/SearchContent.tsx
+++ b/apps/landing/src/components/SearchModal/SearchContent.tsx
@@ -4,8 +4,6 @@ import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import { Fragment, useEffect, useMemo, useState } from 'react'
 
-import { URL_PREFIX } from '../../constants'
-
 export function SearchContent() {
   const query = useSearchParams().get('query')
   const [data, setData] = useState<
@@ -17,7 +15,7 @@ export function SearchContent() {
   >()
   useEffect(() => {
     if (query) {
-      fetch(URL_PREFIX + '/search.json')
+      fetch('/search.json')
         .then((response) => response.json())
         .then(
           (
diff --git a/apps/landing/src/constants.ts b/apps/landing/src/constants.ts
deleted file mode 100644
index 02b411ba..00000000
--- a/apps/landing/src/constants.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const URL_PREFIX =
-  process.env.NODE_ENV === 'production' ? '/devup-ui' : ''
diff --git a/apps/landing/src/utils/is-root.ts b/apps/landing/src/utils/is-root.ts
index 3b0ced54..027957c2 100644
--- a/apps/landing/src/utils/is-root.ts
+++ b/apps/landing/src/utils/is-root.ts
@@ -1,5 +1,3 @@
-import { URL_PREFIX } from '../constants'
-
 export function isRoot(path: string) {
-  return URL_PREFIX + '/' === path || '/' === path
+  return '/' === path
 }