From 951788296798db3cda0fc38037f662086f93b23d Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Mon, 20 Jan 2025 17:29:57 +0900
Subject: [PATCH] Base landing

---
 apps/landing/public/menu-arrow.svg            |   5 +
 .../src/app/(detail)/{ => docs}/LeftMenu.tsx  |   8 +-
 .../src/app/(detail)/docs/RightIndex.tsx      |  68 ++++++++++++
 apps/landing/src/app/(detail)/docs/layout.tsx |  22 ++++
 .../src/app/(detail)/docs/overview/page.mdx   |  14 +++
 apps/landing/src/app/(detail)/layout.tsx      |  22 ----
 apps/landing/src/app/(detail)/team/layout.tsx |  15 +++
 apps/landing/src/app/(detail)/team/page.mdx   |  14 +++
 apps/landing/src/app/layout.tsx               |   2 +
 apps/landing/src/app/page.tsx                 |  37 ++++---
 apps/landing/src/components/DetailHeader.tsx  |  63 -----------
 apps/landing/src/components/Discord.tsx       |  33 +++---
 .../src/components/Header/HeaderWrap.tsx      |  42 ++++++++
 apps/landing/src/components/Header/index.tsx  | 102 +++++++++++-------
 apps/landing/src/mdx-components.tsx           |   7 ++
 15 files changed, 300 insertions(+), 154 deletions(-)
 create mode 100644 apps/landing/public/menu-arrow.svg
 rename apps/landing/src/app/(detail)/{ => docs}/LeftMenu.tsx (94%)
 create mode 100644 apps/landing/src/app/(detail)/docs/RightIndex.tsx
 create mode 100644 apps/landing/src/app/(detail)/docs/layout.tsx
 create mode 100644 apps/landing/src/app/(detail)/docs/overview/page.mdx
 delete mode 100644 apps/landing/src/app/(detail)/layout.tsx
 create mode 100644 apps/landing/src/app/(detail)/team/layout.tsx
 create mode 100644 apps/landing/src/app/(detail)/team/page.mdx
 delete mode 100644 apps/landing/src/components/DetailHeader.tsx
 create mode 100644 apps/landing/src/components/Header/HeaderWrap.tsx
 create mode 100644 apps/landing/src/mdx-components.tsx

diff --git a/apps/landing/public/menu-arrow.svg b/apps/landing/public/menu-arrow.svg
new file mode 100644
index 00000000..8ef65e2e
--- /dev/null
+++ b/apps/landing/public/menu-arrow.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M3.52876 6.69526C3.78911 6.43491 4.21122 6.43491 4.47157 6.69526L8.00016 10.2239L11.5288 6.69526C11.7891 6.43491 12.2112 6.43491 12.4716 6.69526C12.7319 6.95561 12.7319 7.37772 12.4716 7.63807L8.47157 11.6381C8.21122 11.8984 7.78911 11.8984 7.52876 11.6381L3.52876 7.63807C3.26841 7.37772 3.26841 6.95561 3.52876 6.69526Z"
+          fill="#A9A8B4"/>
+</svg>
diff --git a/apps/landing/src/app/(detail)/LeftMenu.tsx b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
similarity index 94%
rename from apps/landing/src/app/(detail)/LeftMenu.tsx
rename to apps/landing/src/app/(detail)/docs/LeftMenu.tsx
index 7363eb74..fbc79520 100644
--- a/apps/landing/src/app/(detail)/LeftMenu.tsx
+++ b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
@@ -24,7 +24,7 @@ export function LeftMenu() {
         <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
           개념
         </Text>
-        <Image boxSize="16px" src="menu icon" />
+        <Image boxSize="16px" src="/menu-arrow.svg" />
       </Flex>
       <Flex gap="8px">
         <Box borderColor="$border" w="10px" />
@@ -50,13 +50,13 @@ export function LeftMenu() {
         <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
           구성 요소
         </Text>
-        <Image boxSize="16px" src="menu icon" />
+        <Image boxSize="16px" src="/menu-arrow.svg" />
       </Flex>
       <Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
         <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
           API
         </Text>
-        <Image boxSize="16px" src="menu icon" />
+        <Image boxSize="16px" src="/menu-arrow.svg" />
       </Flex>
       <Flex gap="8px">
         <Box borderColor="$border" w="10px" />
@@ -77,7 +77,7 @@ export function LeftMenu() {
         <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
           테마
         </Text>
-        <Image boxSize="16px" src="menu icon" />
+        <Image boxSize="16px" src="/menu-arrow.svg" />
       </Flex>
       <Flex gap="8px">
         <Box borderColor="$border" w="10px" />
diff --git a/apps/landing/src/app/(detail)/docs/RightIndex.tsx b/apps/landing/src/app/(detail)/docs/RightIndex.tsx
new file mode 100644
index 00000000..72a633a3
--- /dev/null
+++ b/apps/landing/src/app/(detail)/docs/RightIndex.tsx
@@ -0,0 +1,68 @@
+import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
+
+export function RightIndex() {
+  return (
+    <VStack gap="16px" p="20px 16px" w="200px">
+      <VStack>
+        <Flex alignItems="center" gap="10px" p="6px 0px">
+          <Text color="$text" flex="1 0 0" typography="captionBold">
+            Contents
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap="10px" p="4px 10px">
+          <Box bg="$primary" borderRadius="100%" boxSize="6px" />
+          <Text
+            color="$primary"
+            flex="1 0 0"
+            opacity="0.8"
+            typography="captionBold"
+          >
+            Installation
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap="10px" p="4px 10px 30px">
+          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+            General Guides
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap="10px" p="4px 10px 30px">
+          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+            Framework Guides
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap="10px" p="4px 10px">
+          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+            Next Steps
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap="10px" p="4px 10px">
+          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+            Playground
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap="10px" p="4px 10px">
+          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+            Acknowledgement
+          </Text>
+        </Flex>
+      </VStack>
+      <Box bg="undefined" h="1px" />
+      <Flex gap="4px">
+        <Text
+          color="$caption"
+          flex="1 0 0"
+          textAlign="right"
+          typography="small"
+        >
+          Edit this page
+        </Text>
+        <Image
+          bg="$caption"
+          boxSize="16px"
+          maskImage="url(/outlink.svg)"
+          maskSize="100%"
+        />
+      </Flex>
+    </VStack>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/docs/layout.tsx b/apps/landing/src/app/(detail)/docs/layout.tsx
new file mode 100644
index 00000000..b2d0fb94
--- /dev/null
+++ b/apps/landing/src/app/(detail)/docs/layout.tsx
@@ -0,0 +1,22 @@
+import { Box, Flex } from '@devup-ui/react'
+
+import { LeftMenu } from './LeftMenu'
+import { RightIndex } from './RightIndex'
+
+export default function DetailLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <>
+      <Flex maxW="1440px" mx="auto">
+        <LeftMenu />
+        <Box flex={1} px="60px" py="40px">
+          {children}
+        </Box>
+        <RightIndex />
+      </Flex>
+    </>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/docs/overview/page.mdx b/apps/landing/src/app/(detail)/docs/overview/page.mdx
new file mode 100644
index 00000000..40415f35
--- /dev/null
+++ b/apps/landing/src/app/(detail)/docs/overview/page.mdx
@@ -0,0 +1,14 @@
+## What is Devup UI?
+a
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
diff --git a/apps/landing/src/app/(detail)/layout.tsx b/apps/landing/src/app/(detail)/layout.tsx
deleted file mode 100644
index 34d2f3bd..00000000
--- a/apps/landing/src/app/(detail)/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import 'sanitize.css'
-
-import { Flex } from '@devup-ui/react'
-
-import { DetailHeader } from '../../components/DetailHeader'
-import { LeftMenu } from './LeftMenu'
-
-export default function DetailLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode
-}>) {
-  return (
-    <>
-      <DetailHeader />
-      <Flex>
-        <LeftMenu />
-        {children}
-      </Flex>
-    </>
-  )
-}
diff --git a/apps/landing/src/app/(detail)/team/layout.tsx b/apps/landing/src/app/(detail)/team/layout.tsx
new file mode 100644
index 00000000..6815532f
--- /dev/null
+++ b/apps/landing/src/app/(detail)/team/layout.tsx
@@ -0,0 +1,15 @@
+import { Box } from '@devup-ui/react'
+
+export default function TeamLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <>
+      <Box mx="auto" p="40px 60px" w="1014px">
+        {children}
+      </Box>
+    </>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/team/page.mdx b/apps/landing/src/app/(detail)/team/page.mdx
new file mode 100644
index 00000000..788f860d
--- /dev/null
+++ b/apps/landing/src/app/(detail)/team/page.mdx
@@ -0,0 +1,14 @@
+## Team
+a
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
+## What is Devup UI?
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index a6b38098..2dfbca76 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -3,6 +3,7 @@ import 'sanitize.css'
 import type { Metadata } from 'next'
 
 import { Footer } from '../components/Footer'
+import { Header } from '../components/Header'
 
 export const metadata: Metadata = {
   title: 'Devup UI',
@@ -22,6 +23,7 @@ export default function RootLayout({
         />
       </head>
       <body>
+        <Header />
         {children}
         <Footer />
       </body>
diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
index dcaa936e..a26deb57 100644
--- a/apps/landing/src/app/page.tsx
+++ b/apps/landing/src/app/page.tsx
@@ -1,4 +1,5 @@
-import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
+import { Box, css, Flex, Image, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
 
 import { CodeBoard } from '../components/CodeBoard'
 import { Container } from '../components/Container'
@@ -26,22 +27,28 @@ export default function HomePage() {
               elementum.
             </Text>
           </VStack>
-          <Flex
-            alignItems="center"
-            bg="$text"
-            borderRadius="100px"
-            gap="20px"
-            p="16px 40px"
-            w="247px"
+          <Link
+            className={css`
+              text-decoration: none;
+            `}
+            href="/docs/overview"
           >
-            <Box bg="$secondary" borderRadius="100%" boxSize="10px" />
-            <Flex alignItems="center" gap="10px">
-              <Text color="$base" typography="buttonL">
-                Get started
-              </Text>
-              <Image boxSize="24px" src={IMAGE_PREFIX + '/arrow.svg'} />
+            <Flex
+              alignItems="center"
+              bg="$text"
+              borderRadius="100px"
+              gap="20px"
+              p="16px 40px"
+            >
+              <Box bg="$secondary" borderRadius="100%" boxSize="10px" />
+              <Flex alignItems="center" gap="10px">
+                <Text color="$base" typography="buttonL">
+                  Get started
+                </Text>
+                <Image boxSize="24px" src={IMAGE_PREFIX + '/arrow.svg'} />
+              </Flex>
             </Flex>
-          </Flex>
+          </Link>
         </VStack>
         <Box maxW="1200px" mx="auto" pb="100px" pt="80px">
           <CodeBoard />
diff --git a/apps/landing/src/components/DetailHeader.tsx b/apps/landing/src/components/DetailHeader.tsx
deleted file mode 100644
index 80eeb1cd..00000000
--- a/apps/landing/src/components/DetailHeader.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Flex, Image, Text, VStack } from '@devup-ui/react'
-
-export function DetailHeader() {
-  return (
-    <VStack
-      alignItems="center"
-      bg="$background"
-      borderColor="$border"
-      boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
-      pos="absolute"
-      px="240px"
-      w="1920px"
-    >
-      <Flex
-        alignItems="center"
-        borderRadius="16px"
-        h="70px"
-        justifyContent="space-between"
-        px="40px"
-      >
-        <Flex alignItems="center" gap="16px">
-          <Image h="24.27px" w="25.475px" />
-        </Flex>
-        <Flex alignItems="center" gap="10px">
-          <Flex alignItems="center" px="24px">
-            <Text color="$primary" typography="buttonLbold">
-              Docs
-            </Text>
-          </Flex>
-          <Flex alignItems="center" px="24px">
-            <Text color="$title" opacity="0.6" typography="buttonLsemiB">
-              Team
-            </Text>
-          </Flex>
-          <Flex
-            alignItems="center"
-            bg="$menuHover"
-            borderRadius="8px"
-            gap="10px"
-            p="8px 8px 8px 6px"
-            w="240px"
-          >
-            <Image boxSize="24px" opacity="0.6" src="icons" />
-            <Text color="$caption" typography="caption">
-              Search documentation...
-            </Text>
-          </Flex>
-          <Flex alignItems="center">
-            <Flex alignItems="center" px="10px">
-              <Image boxSize="24px" src="gnb icon" />
-            </Flex>
-            <Flex alignItems="center" px="10px">
-              <Image boxSize="24px" src="gnb icon" />
-            </Flex>
-            <Flex alignItems="center" px="10px">
-              <Image boxSize="24px" src="gnb icon" />
-            </Flex>
-          </Flex>
-        </Flex>
-      </Flex>
-    </VStack>
-  )
-}
diff --git a/apps/landing/src/components/Discord.tsx b/apps/landing/src/components/Discord.tsx
index 76aec6e6..eb6690bf 100644
--- a/apps/landing/src/components/Discord.tsx
+++ b/apps/landing/src/components/Discord.tsx
@@ -1,4 +1,5 @@
-import { Center, Flex, Image, Text, VStack } from '@devup-ui/react'
+import { Center, css, Flex, Image, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
 
 import { IMAGE_PREFIX } from '../constants'
 
@@ -21,19 +22,27 @@ export function Discord() {
             egestas consequat nibh.
           </Text>
         </VStack>
-        <Flex
-          alignItems="center"
-          bg="$buttonBlue"
-          borderRadius="100px"
-          p="16px 40px"
+        <Link
+          className={css`
+            text-decoration: none;
+          `}
+          href="https://discord.gg/BtNffusw"
+          target="_blank"
         >
-          <Flex alignItems="center" gap="10px">
-            <Text color="#FFF" typography="buttonLbold">
-              Join our Discord
-            </Text>
-            <Image boxSize="24px" src={IMAGE_PREFIX + '/outlink.svg'} />
+          <Flex
+            alignItems="center"
+            bg="$buttonBlue"
+            borderRadius="100px"
+            p="16px 40px"
+          >
+            <Flex alignItems="center" gap="10px">
+              <Text color="#FFF" typography="buttonLbold">
+                Join our Discord
+              </Text>
+              <Image boxSize="24px" src={IMAGE_PREFIX + '/outlink.svg'} />
+            </Flex>
           </Flex>
-        </Flex>
+        </Link>
       </VStack>
     </Center>
   )
diff --git a/apps/landing/src/components/Header/HeaderWrap.tsx b/apps/landing/src/components/Header/HeaderWrap.tsx
new file mode 100644
index 00000000..440c13df
--- /dev/null
+++ b/apps/landing/src/components/Header/HeaderWrap.tsx
@@ -0,0 +1,42 @@
+'use client'
+
+import { Box, Flex } from '@devup-ui/react'
+import { usePathname } from 'next/navigation'
+
+export function HeaderWrap({ children }: { children: React.ReactNode }) {
+  const path = usePathname()
+  if (path !== '/') {
+    return (
+      <Box pos="sticky" top={0} transition="all, 0.2s" w="100%" zIndex={1}>
+        <Flex
+          alignItems="center"
+          bg="$containerBackground"
+          boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
+          h="70px"
+          justifyContent="space-between"
+          mx="auto"
+          px="40px"
+        >
+          {children}
+        </Flex>
+      </Box>
+    )
+  }
+  return (
+    <Box position="fixed" top={5} transition="all, 0.2s" w="100%">
+      <Flex
+        alignItems="center"
+        bg="$containerBackground"
+        borderRadius="16px"
+        boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
+        h="70px"
+        justifyContent="space-between"
+        maxW="1440px"
+        mx="auto"
+        px="40px"
+      >
+        {children}
+      </Flex>
+    </Box>
+  )
+}
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
index 4de0c3dd..b4ccc0cb 100644
--- a/apps/landing/src/components/Header/index.tsx
+++ b/apps/landing/src/components/Header/index.tsx
@@ -1,49 +1,75 @@
-import { Box, Flex, Image, Text } from '@devup-ui/react'
+import { css, Flex, Image, Text } from '@devup-ui/react'
+import Link from 'next/link'
 
 import { IMAGE_PREFIX } from '../../constants'
-import { Container } from '../Container'
+import { HeaderWrap } from './HeaderWrap'
 
 export function Header() {
   return (
-    <Box position="fixed" top={5} w="100%">
-      <Container>
-        <Flex
-          alignItems="center"
-          bg="$containerBackground"
-          borderRadius="16px"
-          boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
-          h="70px"
-          justifyContent="space-between"
-          px="40px"
+    <HeaderWrap>
+      <Flex alignItems="center" gap="16px">
+        <Link
+          className={css`
+            text-decoration: none;
+          `}
+          href="/"
         >
-          <Flex alignItems="center" gap="16px">
-            <Image h="42px" src={IMAGE_PREFIX + '/logo.svg'} />
+          <Image h="42px" src={IMAGE_PREFIX + '/logo.svg'} />
+        </Link>
+      </Flex>
+      <Flex alignItems="center" gap="10px">
+        <Flex alignItems="center" px="24px">
+          <Link
+            className={css`
+              text-decoration: none;
+            `}
+            href="/docs/overview"
+          >
+            <Text color="$title" opacity="0.6" typography="buttonLsemiB">
+              Docs
+            </Text>
+          </Link>
+        </Flex>
+        <Flex alignItems="center" px="24px">
+          <Link
+            className={css`
+              text-decoration: none;
+            `}
+            href="/team"
+          >
+            <Text color="$title" opacity="0.6" typography="buttonLsemiB">
+              Team
+            </Text>
+          </Link>
+        </Flex>
+        <Flex alignItems="center">
+          <Flex alignItems="center" px="10px">
+            <Link
+              className={css`
+                text-decoration: none;
+              `}
+              href="https://github.com/dev-five-git/devup-ui"
+              target="_blank"
+            >
+              <Image boxSize="24px" src={IMAGE_PREFIX + '/github.svg'} />
+            </Link>
+          </Flex>
+          <Flex alignItems="center" px="10px">
+            <Link
+              className={css`
+                text-decoration: none;
+              `}
+              href="https://discord.gg/BtNffusw"
+              target="_blank"
+            >
+              <Image boxSize="24px" src={IMAGE_PREFIX + '/discord.svg'} />
+            </Link>
           </Flex>
-          <Flex alignItems="center" gap="10px">
-            <Flex alignItems="center" px="24px">
-              <Text color="$title" opacity="0.6" typography="buttonLsemiB">
-                Docs
-              </Text>
-            </Flex>
-            <Flex alignItems="center" px="24px">
-              <Text color="$title" opacity="0.6" typography="buttonLsemiB">
-                Team
-              </Text>
-            </Flex>
-            <Flex alignItems="center">
-              <Flex alignItems="center" px="10px">
-                <Image boxSize="24px" src={IMAGE_PREFIX + '/github.svg'} />
-              </Flex>
-              <Flex alignItems="center" px="10px">
-                <Image boxSize="24px" src={IMAGE_PREFIX + '/discord.svg'} />
-              </Flex>
-              <Flex alignItems="center" px="10px">
-                <Image boxSize="24px" src={IMAGE_PREFIX + '/light.svg'} />
-              </Flex>
-            </Flex>
+          <Flex alignItems="center" px="10px">
+            <Image boxSize="24px" src={IMAGE_PREFIX + '/light.svg'} />
           </Flex>
         </Flex>
-      </Container>
-    </Box>
+      </Flex>
+    </HeaderWrap>
   )
 }
diff --git a/apps/landing/src/mdx-components.tsx b/apps/landing/src/mdx-components.tsx
new file mode 100644
index 00000000..8ed99fb9
--- /dev/null
+++ b/apps/landing/src/mdx-components.tsx
@@ -0,0 +1,7 @@
+import type { MDXComponents } from 'mdx/types'
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  }
+}