dev-five-git · owjs3901 · Jan 28, 2025 · Jan 28, 2025 · Jan 28, 2025 · Jan 28, 2025
diff --git a/apps/landing/devup.json b/apps/landing/devup.json
diff --git a/apps/landing/src/app/(detail)/docs/RightIndex.tsx b/apps/landing/src/app/(detail)/docs/RightIndex.tsx
@@ -1,65 +1,131 @@
-import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
+'use client'
+import { Box, css, Flex, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useEffect, useState } from 'react'
 
-import { URL_PREFIX } from '../../../constants'
+function IndexMenu({
+  children,
+  selected,
+  sub,
+  onClick,
+}: {
+  children: React.ReactNode
+  selected?: boolean
+  sub?: boolean
+  onClick?: () => void
+}) {
+  return (
+    <Flex
+      alignItems="center"
+      cursor="pointer"
+      gap="10px"
+      onClick={onClick}
+      p={sub ? '4px 10px 4px 30px' : '4px 10px'}
+      role="group"
+    >
+      {selected && <Box bg="$primary" borderRadius="50%" boxSize="6px" />}
+      <Text
+        _groupHover={{ opacity: '0.8' }}
+        color={selected ? '$primary' : '$text'}
+        flex="1"
+        opacity={selected ? '0.8' : '0.6'}
+        typography="captionBold"
+      >
+        {children}
+      </Text>
+    </Flex>
+  )
+}
 
 export function RightIndex() {
+  const pathname = usePathname()
+  const editUrl = `https://github.com/dev-five-git/devup-ui/tree/main/apps/landing/src/app/(detail)/docs${pathname.split('docs')[1]}/page.mdx`
+  const [menus, setMenus] = useState<
+    {
+      text: string
+      sub?: boolean
+      onClick?: () => void
+    }[]
+  >([])
+  useEffect(() => {
+    const elements = document.querySelectorAll(
+      '.markdown-body h1, .markdown-body h2',
+    )
+    const menus = []
+    for (let i = 0; i < elements.length; i++) {
+      const element = elements[i]
+      const text = element.textContent!
+      menus.push({
+        text,
+        sub: element.tagName === 'H2',
+        onClick: () => {
+          element.scrollIntoView({ behavior: 'smooth' })
+        },
+      })
+    }
+    setMenus(menus)
+  }, [pathname])
+
   return (
     <VStack gap="16px" p="20px 16px" w="200px">
       <VStack>
-        <Flex alignItems="center" gap="10px" p="6px 0px">
+        <Flex alignItems="center" gap="10px" py="6px">
           <Text color="$text" flex="1" typography="captionBold">
             Contents
           </Text>
         </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Box bg="$primary" borderRadius="100%" boxSize="6px" />
+        {menus.map((menu) => (
+          <IndexMenu key={menu.text} onClick={menu.onClick} sub={menu.sub}>
+            {menu.text}
+          </IndexMenu>
+        ))}
+      </VStack>
+      <Box bg="$border" h="1px" />
+      <Link
+        className={css({
+          textDecoration: 'none',
+          _hover: {
+            textDecoration: 'underline',
+            textDecorationColor: '$text',
+          },
+        })}
+        href={editUrl}
+        role="group"
+        target="_blank"
+      >
+        <Flex gap="4px">
           <Text
-            color="$primary"
+            _groupHover={{ color: '$text' }}
+            color="$caption"
             flex="1"
-            opacity="0.8"
-            typography="captionBold"
+            textAlign="right"
+            typography="small"
           >
-            Installation
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px 30px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            General Guides
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px 30px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            Framework Guides
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            Next Steps
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            Playground
-          </Text>
-        </Flex>
-        <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Text color="$text" flex="1" opacity="0.6" typography="caption">
-            Acknowledgement
+            Edit this page
           </Text>
+          <svg
+            className={css({
+              color: '$caption',
+              _groupHover: { color: '$text' },
+            })}
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.3344 8.0656H12.1499V5.34691L9.02246 8.48087L8.18399 7.64415L11.3037 4.51788H8.60216V3.33334H13.3344V8.0656Z"
+              fill="currentColor"
+            />
+            <path
+              d="M11.49 9.29411V12.8235H3.84297V5.17647H7.37239V4H3.84297C3.19592 4 2.6665 4.52941 2.6665 5.17647V12.8235C2.6665 13.4706 3.19592 14 3.84297 14H11.49C12.1371 14 12.6665 13.4706 12.6665 12.8235V9.29411H11.49Z"
+              fill="currentColor"
+            />
+          </svg>
         </Flex>
-      </VStack>
-      <Box bg="undefined" h="1px" />
-      <Flex gap="4px">
-        <Text color="$caption" flex="1" textAlign="right" typography="small">
-          Edit this page
-        </Text>
-        <Image
-          bg="$caption"
-          boxSize="16px"
-          maskImage={`url(${URL_PREFIX}/outlink.svg)`}
-          maskSize="100%"
-        />
-      </Flex>
+      </Link>
     </VStack>
   )
 }
diff --git a/apps/landing/src/app/(detail)/docs/layout.tsx b/apps/landing/src/app/(detail)/docs/layout.tsx
@@ -14,7 +14,7 @@ export default function DetailLayout({
         <Box p="20px 16px" w="220px">
           <LeftMenu />
         </Box>
-        <Box flex={1} px="60px" py="40px">
+        <Box className="markdown-body" flex={1} px="60px" py="40px">
           {children}
         </Box>
         <RightIndex />

diff --git a/apps/landing/src/app/(detail)/team/TeamCard.tsx b/apps/landing/src/app/(detail)/team/TeamCard.tsx
@@ -0,0 +1,68 @@
+import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
+
+import { Github } from '../../../components/Header/Github'
+import { Insta } from '../../../components/Header/Insta'
+
+interface TeamCardProps {
+  userId: string
+  role: string
+  instaId?: string
+}
+
+export async function TeamCard({ userId, role, instaId }: TeamCardProps) {
+  const data = await fetch(`https://api.github.com/users/${userId}`).then(
+    (res) => res.json(),
+  )
+  const avatarUrl = data.avatar_url
+  const name = data.name
+  return (
+    <VStack
+      alignItems="flex-end"
+      bg="$background"
+      borderRadius="16px"
+      boxShadow="0px 0px 6px 0px rgba(0, 0, 0, 0.18)"
+      flex="1"
+      justifyContent="space-between"
+      overflow="hidden"
+      pb="24px"
+      pos="relative"
+    >
+      <Box bg="#eccafa" h="64px" pos="absolute" w="100%" />
+      <Flex
+        justifyContent="space-between"
+        mt="24px"
+        px="24px"
+        w="100%"
+        zIndex={1}
+      >
+        <VStack gap="12px">
+          <Image
+            bg="#eccafa"
+            borderRadius="100%"
+            boxSize="80px"
+            src={avatarUrl}
+          />
+          <VStack gap="4px">
+            <Text color="$title" typography="buttonLbold">
+              {name}
+            </Text>
+            <Text color="$caption" typography="caption">
+              {role}
+            </Text>
+          </VStack>
+        </VStack>
+        <Flex alignItems="end" gap="10px">
+          <Link href={`https://github.com/${userId}`} target="_blank">
+            <Github />
+          </Link>
+          {instaId && (
+            <Link href={`https://instagram.com/${instaId}`} target="_blank">
+              <Insta />
+            </Link>
+          )}
+        </Flex>
+      </Flex>
+    </VStack>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/team/page.mdx b/apps/landing/src/app/(detail)/team/page.mdx
@@ -1,14 +1,10 @@
-## 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?
+# Team
+
+We are a team committed to developing the most optimized CSS-in-JS solutions.
+
+---
+
+import {TeamCard} from "./TeamCard";
+
+<TeamCard role={"FULL-STACK"} userId={"owjs3901"} instaId={"owjs3901"}/>
+
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
       <head>
         <ThemeScript auto />
         <meta content="width=device-width, initial-scale=1.0" name="viewport" />
-        <base href={URL_PREFIX} />
+        {URL_PREFIX && <base href={URL_PREFIX} />}
         <link href={URL_PREFIX + '/favicon.ico'} rel="shortcut icon" />
       </head>
       <body

diff --git a/apps/landing/src/app/markdown.css b/apps/landing/src/app/markdown.css
@@ -1,3 +1,4 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
 
 table {
     border-collapse: collapse;