Feat overview

apps/landing/devup.json

@@ -38,7 +38,7 @@
                 "kakaoButtonActive": "#B77D00"
             },
             "dark": {
-                "primary": "#737FE4",
+                "primary": "#6670F9",
                 "secondary": "#2A4586",
                 "link": "#006BFF",
                 "text": "#EDEDED",
@@ -237,7 +237,7 @@
                 {
                     "fontFamily": "Pretendard",
                     "fontStyle": "normal",
-                    "fontWeight": 600,
+                    "fontWeight": 700,
                     "fontSize": "24px",
                     "lineHeight": 1.3,
                     "letterSpacing": "-0.03em"
@@ -350,7 +350,7 @@
                 {
                     "fontFamily": "Pretendard",
                     "fontStyle": "normal",
-                    "fontWeight": 600,
+                    "fontWeight": 700,
                     "fontSize": "30px",
                     "lineHeight": 1.3,
                     "letterSpacing": "-0.03em"
@@ -427,14 +427,27 @@
                     "letterSpacing": "-0.03em"
                 }
             ],
-            "captionBold": {
-                "fontFamily": "Pretendard",
-                "fontStyle": "normal",
-                "fontWeight": 700,
-                "fontSize": "14px",
-                "lineHeight": 1.3,
-                "letterSpacing": "-0.03em"
-            },
+            "captionBold": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "13px",
+                    "lineHeight": 1.3,
+                    "letterSpacing": "-0.03em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 700,
+                    "fontSize": "14px",
+                    "lineHeight": 1.3,
+                    "letterSpacing": "-0.03em"
+                }
+            ],
             "textSbold": {
                 "fontFamily": "Pretendard",
                 "fontStyle": "normal",
@@ -485,14 +498,27 @@
                     "letterSpacing": "-0.03em"
                 }
             ],
-            "bodyReg": {
-                "fontFamily": "Pretendard",
-                "fontStyle": "normal",
-                "fontWeight": 400,
-                "fontSize": "16px",
-                "lineHeight": 1.5,
-                "letterSpacing": "-0.03em"
-            },
+            "bodyReg": [
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "14px",
+                    "lineHeight": 1.5,
+                    "letterSpacing": "-0.03em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Pretendard",
+                    "fontStyle": "normal",
+                    "fontWeight": 400,
+                    "fontSize": "16px",
+                    "lineHeight": 1.5,
+                    "letterSpacing": "-0.03em"
+                }
+            ],
             "smallBold": {
                 "fontFamily": "Pretendard",
                 "fontStyle": "normal",

apps/landing/src/app/(detail)/components/Card.tsx

@@ -0,0 +1,22 @@
+import { VStack } from '@devup-ui/react'
+
+export default function Card({ children }: { children: React.ReactNode }) {
+  return (
+    <VStack
+      _active={{
+        boxShadow: 'none',
+        transform: 'scale(0.95)',
+      }}
+      _hover={{
+        boxShadow: '0 0 20px 0 rgba(0, 0, 0, 0.15)',
+      }}
+      bg="$containerBackground"
+      border="1px solid $border"
+      borderRadius="10px"
+      cursor="pointer"
+      transition="all 0.2s ease"
+    >
+      {children}
+    </VStack>
+  )
+}

apps/landing/src/app/(detail)/components/LeftMenu.tsx

@@ -0,0 +1,55 @@
+import { VStack } from '@devup-ui/react'
+
+import { MenuItem } from '../docs/MenuItem'
+
+export function LeftMenu() {
+  return (
+    <VStack gap="6px">
+      <MenuItem to="/components/overview">Overview</MenuItem>
+      <MenuItem
+        subMenu={[
+          { to: '/components/form/button', children: 'Button' },
+          { to: '/components/form/text-box', children: 'Text box' },
+          { to: '/components/form/text-area', children: 'Text area' },
+          { to: '/components/form/dropdown', children: 'Dropdown' },
+          { to: '/components/form/radio', children: 'Radio' },
+          { to: '/components/form/checkbox', children: 'Checkbox' },
+          { to: '/components/form/stepper', children: 'Stepper' },
+          { to: '/components/form/toggle', children: 'Toggle' },
+          { to: '/components/form/slider', children: 'Slider' },
+          { to: '/components/form/date-picker', children: 'Date picker' },
+          { to: '/components/form/color-picker', children: 'Color picker' },
+          { to: '/components/form/uploader', children: 'Uploader' },
+          { to: '/components/form/pagination', children: 'Pagination' },
+          { to: '/components/form/progress-bar', children: 'Progress Bar' },
+          { to: '/components/form/search', children: 'Search' },
+          { to: '/components/form/select', children: 'Select' },
+          { to: '/components/form/label', children: 'Label' },
+        ]}
+      >
+        Form
+      </MenuItem>
+      <MenuItem
+        subMenu={[
+          { to: '/components/layout/footer', children: 'Footer' },
+          { to: '/components/layout/tooltip', children: 'Tooltip' },
+          { to: '/components/layout/tab', children: 'Tab' },
+          { to: '/components/layout/menu', children: 'Menu' },
+          { to: '/components/layout/header', children: 'Header' },
+          { to: '/components/layout/confirm', children: 'Confirm' },
+          { to: '/components/layout/snackbar', children: 'Snackbar' },
+          { to: '/components/layout/bottom-sheet', children: 'Bottom sheet' },
+        ]}
+      >
+        Layout
+      </MenuItem>
+      <MenuItem
+        subMenu={[
+          { to: '/components/theme/theme-button', children: 'Theme Button' },
+        ]}
+      >
+        Theme
+      </MenuItem>
+    </VStack>
+  )
+}

apps/landing/src/app/(detail)/components/layout.tsx

@@ -0,0 +1,28 @@
+import { Box, Flex } from '@devup-ui/react'
+
+import { RightIndex } from '../docs/RightIndex'
+import { LeftMenu } from './LeftMenu'
+
+export default function Layout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <>
+      <Flex maxW="1920px" minH="calc(100vh - 500px)" mx="auto" w="100%">
+        <Box display={['none', null, 'initial']} p="20px 16px" w="220px">
+          <Box pos="sticky" top={['70px', null, '90px']}>
+            <LeftMenu />
+          </Box>
+        </Box>
+        <Box className="markdown-body" flex={1}>
+          {children}
+        </Box>
+        <Box display={['none', null, null, null, null, 'initial']}>
+          <Box pos="sticky" top={['50px', null, '70px']}>
+            <RightIndex />
+          </Box>
+        </Box>
+      </Flex>
+    </>
+  )
+}