Merge pull request #237 from forestream/feat-landing

Feat landing

Author: owjs3901

README.md

@@ -82,31 +82,28 @@ Devup UI is a CSS in JS preprocessor that does not require runtime.
 Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
 We develop a preprocessor that considers all grammatical cases.
 
-```jsx
-// Before
-<Box bg={"red"}/>
-// After
-<Box className={"d0"}/>
+```typescript
+const before = <Box bg={"red"}/>
+
+const after = <div className="d0"/>
 ```
 
 Variables are fully supported.
 
-```jsx
-// Before
-<Box bg={colorVariable}/>
-// After
-<Box className={"d0"} style={{
+```typescript
+const before = <Box bg={colorVariable}/>
+
+const after = <div className="d0" style={{
     "--d0": colorVariable
 }}/>
 ```
 
 Various expressions and responsiveness are also fully supported.
 
-```jsx
-// Before
-<Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-// After
-<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
+```typescript
+const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
+
+const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
     "--d2": variable
 }}/>
 ```
@@ -130,7 +127,7 @@ Support Theme with Typing
 }
 ```
 
-```jsx
+```typescript
 // Type Safe
 <Text color="$text"/>
 ```
@@ -139,11 +136,10 @@ Support Responsive And Pseudo Selector
 
 You can use responsive and pseudo selector.
 
-```jsx
+```typescript
 // Responsive with Selector
-<Box _hover={{bg: ["red", "blue"]}}/>
+const box = <Box _hover={{bg: ["red", "blue"]}}/>
 
 // Same
-<Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
-
+const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```

README_ko.md

@@ -82,31 +82,28 @@ Devup UI는 런타임이 필요 없는 CSS in JS 전처리기입니다.
 Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 원천적으로 제거합니다.
 모든 문법적 경우의 수를 고려하여 전처리기를 개발합니다.
 
-```jsx
-// Before
-<Box bg={"red"}/>
-// After
-<Box className={"d0"}/>
+```typescript
+const before = <Box bg={"red"}/>
+
+const after = <div className="d0"/>
 ```
 
 변수 사용도 완전히 지원합니다.
 
-```jsx
-// Before
-<Box bg={colorVariable}/>
-// After
-<Box className={"d0"} style={{
+```typescript
+const before = <Box bg={colorVariable}/>
+
+const after = <div className="d0" style={{
     "--d0": colorVariable
 }}/>
 ```
 
 다양한 표현식과 반응형도 모두 지원합니다.
 
-```jsx
-// Before
-<Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-// After
-<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
+```typescript
+const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
+
+const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
     "--d2": variable
 }}/>
 ```
@@ -130,7 +127,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
 }
 ```
 
-```jsx
+```typescript
 // Type Safe
 <Text color="$text"/>
 ```
@@ -139,11 +136,10 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
 
 물론 동시 사용도 가능합니다.
 
-```jsx
+```typescript
 // Responsive with Selector
-<Box _hover={{bg: ["red", "blue"]}}/>
+const box = <Box _hover={{bg: ["red", "blue"]}}/>
 
 // Same
-<Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
-
+const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```

apps/landing/devup.json

@@ -31,7 +31,7 @@
                 "footerText": "#51575F",
                 "menuHover": "#F6F4FF",
                 "menuActive": "#EAE8FC",
-                "captionBold": "#878594",
+                "captionBold": "#7C7B8E",
                 "search": "#9C50FF",
                 "kakaoButton": "#DE9800",
                 "kakaoButtonHover": "#C98900",
@@ -67,7 +67,7 @@
                 "footerText": "#FFFFFF",
                 "menuHover": "#3C404B",
                 "menuActive": "#283259",
-                "captionBold": "#878594",
+                "captionBold": "#9C9BA9",
                 "search": "#6FA4FF",
                 "kakaoButton": "#A3740D",
                 "kakaoButtonHover": "#C98900",
@@ -526,6 +526,14 @@
                 "fontSize": "12px",
                 "lineHeight": 1.4,
                 "letterSpacing": "-0.03em"
+            },
+            "bodyBold": {
+                "fontFamily": "Pretendard",
+                "fontStyle": "normal",
+                "fontWeight": 700,
+                "fontSize": "16px",
+                "lineHeight": 1.5,
+                "letterSpacing": "-0.03em"
             }
         }
     }

apps/landing/next.config.ts

@@ -1,7 +1,13 @@
 import { DevupUI } from '@devup-ui/next-plugin'
 import createMDX from '@next/mdx'
+import remarkGfm from 'remark-gfm'
 
-const withMDX = createMDX({})
+const withMDX = createMDX({
+  options: {
+    remarkPlugins: [remarkGfm],
+  },
+  extension: /\.mdx?$/,
+})
 
 export default withMDX(
   DevupUI(

apps/landing/package.json

@@ -11,28 +11,31 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "body-scroll-lock": "3.1.5",
-    "@devup-ui/react": "workspace:*",
     "@devup-ui/components": "workspace:*",
+    "@devup-ui/react": "workspace:*",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.3.4",
     "@types/mdx": "^2.0.13",
+    "body-scroll-lock": "3.1.5",
+    "clsx": "^2.1.1",
     "next": "^15.3.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-markdown": "8.0.6",
     "react-syntax-highlighter": "^15.6.1",
+    "remark-gfm": "^4.0.1",
     "sanitize.css": "^13.0.0"
   },
   "devDependencies": {
-    "@types/body-scroll-lock": "^3.1.2",
     "@devup-ui/next-plugin": "workspace:*",
+    "@types/body-scroll-lock": "^3.1.2",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "typescript": "^5",
     "glob": "^11.0.3",
-    "remark": "^15.0.1"
+    "remark": "^15.0.1",
+    "typescript": "^5"
   }
 }

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

@@ -1,6 +1,10 @@
 import { VStack } from '@devup-ui/react'
 
-export default function Card({ children }: { children: React.ReactNode }) {
+export default function Card({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
   return (
     <VStack
       _active={{
@@ -13,8 +17,11 @@ export default function Card({ children }: { children: React.ReactNode }) {
       bg="$containerBackground"
       border="1px solid $border"
       borderRadius="10px"
+      className={className}
       cursor="pointer"
+      styleOrder={1}
       transition="all 0.2s ease"
+      {...props}
     >
       {children}
     </VStack>

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

@@ -8,45 +8,43 @@ export function LeftMenu() {
       <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' },
+          { to: '/components/button', children: 'Button' },
+          { to: '/components/text-box', children: 'Text box' },
+          { to: '/components/text-area', children: 'Text area' },
+          { to: '/components/dropdown', children: 'Dropdown' },
+          { to: '/components/radio', children: 'Radio' },
+          { to: '/components/checkbox', children: 'Checkbox' },
+          { to: '/components/stepper', children: 'Stepper' },
+          { to: '/components/toggle', children: 'Toggle' },
+          { to: '/components/slider', children: 'Slider' },
+          { to: '/components/date-picker', children: 'Date picker' },
+          { to: '/components/color-picker', children: 'Color picker' },
+          { to: '/components/uploader', children: 'Uploader' },
+          { to: '/components/pagination', children: 'Pagination' },
+          { to: '/components/progress-bar', children: 'Progress Bar' },
+          { to: '/components/search', children: 'Search' },
+          { to: '/components/select', children: 'Select' },
+          { to: '/components/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' },
+          { to: '/components/footer', children: 'Footer' },
+          { to: '/components/tooltip', children: 'Tooltip' },
+          { to: '/components/tab', children: 'Tab' },
+          { to: '/components/menu', children: 'Menu' },
+          { to: '/components/header', children: 'Header' },
+          { to: '/components/confirm', children: 'Confirm' },
+          { to: '/components/snackbar', children: 'Snackbar' },
+          { to: '/components/bottom-sheet', children: 'Bottom sheet' },
         ]}
       >
         Layout
       </MenuItem>
       <MenuItem
-        subMenu={[
-          { to: '/components/theme/theme-button', children: 'Theme Button' },
-        ]}
+        subMenu={[{ to: '/components/theme-button', children: 'Theme Button' }]}
       >
         Theme
       </MenuItem>

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

@@ -0,0 +1,72 @@
+import { readFile } from 'node:fs/promises'
+import { join } from 'node:path'
+
+import { Box, css, VStack } from '@devup-ui/react'
+import ReactMarkdown from 'react-markdown'
+
+import { Code } from '@/components/Code'
+import { _components } from '@/mdx-components'
+
+import Card from './Card'
+import MdxCardFooter from './MdxCardFooter'
+
+export default async function MdxCard({
+  src,
+  demo,
+}: {
+  src: string
+  demo: React.ReactNode
+}) {
+  const content = await readFile(
+    join(
+      process.cwd(),
+      'src/app/(detail)/components',
+      src ?? 'button/demo/Variants.tsx',
+    ),
+    {
+      encoding: 'utf-8',
+    },
+  )
+  // extract comment
+  const comment = content.match(/\/\*\*[\s\S]*?\*\//)?.[0]
+  const code = content.replace('\n' + comment!, '')
+  const normalizedComment = comment
+    ?.replace(/\/\*\*|\*\//g, '')
+    ?.replace(/^\s*\*\s*/gm, '')
+
+  return (
+    <Card
+      className={css({
+        _active: {
+          transform: 'none',
+        },
+        _hover: {
+          boxShadow: 'none',
+        },
+        borderRadius: '10px',
+        border: '1px solid $border',
+        bg: '$containerBackground',
+        maxW: '100%',
+        flexShrink: 0,
+        cursor: 'default',
+        mb: '20px',
+        _lastChild: {
+          mb: '0',
+        },
+        typography: 'bodyReg',
+        color: '$text',
+        whiteSpace: 'pre-wrap',
+      })}
+    >
+      <VStack gap="30px" px="24px" py="32px">
+        <Box>{demo}</Box>
+        <ReactMarkdown components={_components}>
+          {normalizedComment ?? ''}
+        </ReactMarkdown>
+      </VStack>
+      <MdxCardFooter>
+        <Code language="typescript" value={code} />
+      </MdxCardFooter>
+    </Card>
+  )
+}