dev-five-git · owjs3901 · Jan 20, 2025 · Jan 20, 2025
diff --git a/.changeset/popular-bags-itch.md b/.changeset/popular-bags-itch.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Add group selector
diff --git a/.changeset/strong-parents-change.md b/.changeset/strong-parents-change.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Add group selector, Support conditional expression for typography
diff --git a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
@@ -1,109 +1,90 @@
-import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
+import { VStack } from '@devup-ui/react'
+
+import { URL_PREFIX } from '../../../constants'
+import { MenuItem } from './MenuItem'
 
 export function LeftMenu() {
   return (
     <VStack gap="6px" h="1008px" p="20px 16px" w="220px">
-      <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-        <Text flex="1" opacity="0.8" typography="buttonSmid">
-          개요
-        </Text>
-      </Flex>
-      <Flex
-        alignItems="center"
-        bg="$menuActive"
-        borderRadius="6px"
-        gap="10px"
-        p="6px 10px"
+      <MenuItem to={URL_PREFIX + '/docs/overview'}>Overview</MenuItem>
+      <MenuItem to={URL_PREFIX + '/docs/installation'}>Installation</MenuItem>
+      <MenuItem to={URL_PREFIX + '/docs/features'}>Features</MenuItem>
+      <MenuItem
+        subMenu={[
+          {
+            to: URL_PREFIX + '/docs/api/box',
+            children: 'Box',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/button',
+            children: 'Button',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/input',
+            children: 'Input',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/input',
+            children: 'Text',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/image',
+            children: 'Image',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/flex',
+            children: 'Flex',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/v-stack',
+            children: 'VStack',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/center',
+            children: 'Center',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/css',
+            children: 'css',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/style-props',
+            children: 'Style Props',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/selector',
+            children: 'Selector',
+          },
+          {
+            to: URL_PREFIX + '/docs/api/group-selector',
+            children: 'Group Selector',
+          },
+        ]}
+      >
+        API
+      </MenuItem>
+      <MenuItem
+        subMenu={[
+          {
+            to: URL_PREFIX + '/docs/devup/devup-json',
+            children: 'What is devup?',
+          },
+          {
+            to: URL_PREFIX + '/docs/devup/colors',
+            children: 'Colors',
+          },
+          {
+            to: URL_PREFIX + '/docs/devup/typography',
+            children: 'Typography',
+          },
+          {
+            to: URL_PREFIX + '/docs/devup/breakpoints',
+            children: 'Breakpoints',
+          },
+        ]}
       >
-        <Box bg="$primary" boxSize="8px" />
-        <Text flex="1" typography="buttonS">
-          설치
-        </Text>
-      </Flex>
-      <Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
-        <Text flex="1" opacity="0.8" typography="buttonSmid">
-          개념
-        </Text>
-        <Image boxSize="16px" src="/menu-arrow.svg" />
-      </Flex>
-      <Flex gap="8px">
-        <Box borderColor="$border" w="10px" />
-        <VStack flex="1" gap="6px">
-          <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1" opacity="0.8" typography="buttonSmid">
-              유틸리티 퍼스트
-            </Text>
-          </Flex>
-          <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1" opacity="0.8" typography="buttonSmid">
-              하이브리드 접근 방식
-            </Text>
-          </Flex>
-          <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1" opacity="0.8" typography="buttonSmid">
-              헤드리스 컴포넌트
-            </Text>
-          </Flex>
-        </VStack>
-      </Flex>
-      <Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
-        <Text flex="1" opacity="0.8" typography="buttonSmid">
-          구성 요소
-        </Text>
-        <Image boxSize="16px" src="/menu-arrow.svg" />
-      </Flex>
-      <Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
-        <Text flex="1" opacity="0.8" typography="buttonSmid">
-          API
-        </Text>
-        <Image boxSize="16px" src="/menu-arrow.svg" />
-      </Flex>
-      <Flex gap="8px">
-        <Box borderColor="$border" w="10px" />
-        <VStack flex="1" gap="6px">
-          <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1" opacity="0.8" typography="buttonSmid">
-              스타일이 지정됨
-            </Text>
-          </Flex>
-          <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1" opacity="0.8" typography="buttonSmid">
-              CSS
-            </Text>
-          </Flex>
-        </VStack>
-      </Flex>
-      <Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
-        <Text flex="1" opacity="0.8" typography="buttonSmid">
-          테마
-        </Text>
-        <Image boxSize="16px" src="/menu-arrow.svg" />
-      </Flex>
-      <Flex gap="8px">
-        <Box borderColor="$border" w="10px" />
-        <VStack flex="1" gap="6px">
-          <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1" opacity="0.8" typography="buttonSmid">
-              테마 사용자 정의
-            </Text>
-          </Flex>
-          <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1" opacity="0.8" typography="buttonSmid">
-              테마 토큰
-            </Text>
-          </Flex>
-          <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1" opacity="0.8" typography="buttonSmid">
-              중단점
-            </Text>
-          </Flex>
-          <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1" opacity="0.8" typography="buttonSmid">
-              구성 요소 테마
-            </Text>
-          </Flex>
-        </VStack>
-      </Flex>
+        Devup
+      </MenuItem>
     </VStack>
   )
 }
diff --git a/apps/landing/src/app/(detail)/docs/MenuItem.tsx b/apps/landing/src/app/(detail)/docs/MenuItem.tsx
@@ -0,0 +1,52 @@
+import { Box, css, Flex, Image, Text } from '@devup-ui/react'
+import Link from 'next/link'
+
+import { OpenMenuItem } from './OpenMenuItem'
+
+export interface MenuItemProps {
+  selected?: boolean
+  children?: React.ReactNode
+  to?: string
+  subMenu?: {
+    selected?: boolean
+    children?: React.ReactNode
+    to?: string
+  }[]
+}
+
+export function MenuItem(props: MenuItemProps) {
+  const { selected, children, to, subMenu } = props
+  if (subMenu) return <OpenMenuItem {...props} subMenu={subMenu} />
+  const inner = (
+    <Flex
+      alignItems="center"
+      bg={selected ? '$menuActive' : undefined}
+      borderRadius="6px"
+      gap="10px"
+      p="6px 10px"
+    >
+      {selected && <Box bg="$primary" borderRadius="100%" boxSize="8px" />}
+      <Text
+        color={selected ? '$title' : '$text'}
+        flex="1"
+        opacity={selected ? '1' : '0.8'}
+        typography={selected ? 'buttonS' : 'buttonSmid'}
+      >
+        {children}
+      </Text>
+      {subMenu && <Image boxSize="16px" src="/menu-arrow.svg" />}
+    </Flex>
+  )
+  return to ? (
+    <Link
+      className={css({
+        textDecoration: 'none',
+      })}
+      href={to}
+    >
+      {inner}
+    </Link>
+  ) : (
+    inner
+  )
+}
diff --git a/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx b/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx
@@ -0,0 +1,83 @@
+'use client'
+import { Box, css, Flex, Image, Text, VStack } from '@devup-ui/react'
+import Link from 'next/link'
+import { Fragment, useReducer } from 'react'
+
+import { MenuItemProps } from './MenuItem'
+
+export function OpenMenuItem({
+  selected,
+  children,
+  subMenu,
+}: Omit<MenuItemProps, 'subMenu' | 'to'> &
+  Required<Pick<MenuItemProps, 'subMenu'>>) {
+  const [open, handleOpen] = useReducer((state) => !state, false)
+  return (
+    <>
+      <Flex
+        alignItems="center"
+        bg={selected ? '$menuActive' : undefined}
+        borderRadius="6px"
+        cursor="pointer"
+        gap="10px"
+        onClick={handleOpen}
+        p="6px 10px"
+      >
+        {selected && <Box bg="$primary" borderRadius="100%" boxSize="8px" />}
+        <Text
+          color={selected ? '$title' : '$text'}
+          flex="1"
+          opacity={selected ? '1' : '0.8'}
+          typography={selected ? 'buttonS' : 'buttonSmid'}
+        >
+          {children}
+        </Text>
+        {subMenu && (
+          <Image
+            boxSize="16px"
+            src="/menu-arrow.svg"
+            transform={open ? 'rotate(0deg)' : 'rotate(-90deg)'}
+            transition="transform 0.2s"
+          />
+        )}
+      </Flex>
+      {open && (
+        <Flex gap="8px">
+          <Box borderRight="1px solid var(--border, #E0E0E0)" w="10px" />
+          <VStack flex="1" gap="4px">
+            {subMenu.map(({ children, to }, idx) => {
+              const inner = (
+                <Flex
+                  alignItems="center"
+                  bg="$menuActive"
+                  borderRadius="6px"
+                  gap="10px"
+                  p="10px"
+                >
+                  <Box bg="$primary" borderRadius="100%" boxSize="8px" />
+                  <Text color="$text" flex="1" typography="buttonS">
+                    {children}
+                  </Text>
+                </Flex>
+              )
+
+              return to ? (
+                <Link
+                  key={idx}
+                  className={css({
+                    textDecoration: 'none',
+                  })}
+                  href={to}
+                >
+                  {inner}
+                </Link>
+              ) : (
+                <Fragment key={idx}>{inner}</Fragment>
+              )
+            })}
+          </VStack>
+        </Flex>
+      )}
+    </>
+  )
+}
diff --git a/apps/landing/src/app/(detail)/docs/api/box/page.mdx b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
@@ -0,0 +1 @@
+# Box
diff --git a/apps/landing/src/app/(detail)/docs/api/button/page.mdx b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
@@ -0,0 +1 @@
+# Button
diff --git a/apps/landing/src/app/(detail)/docs/api/center/page.mdx b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
@@ -0,0 +1 @@
+# Center
diff --git a/apps/landing/src/app/(detail)/docs/api/css/page.mdx b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
@@ -0,0 +1 @@
+# css
diff --git a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
@@ -0,0 +1 @@
+# Flex
diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
@@ -0,0 +1 @@
+# Group Selector
diff --git a/apps/landing/src/app/(detail)/docs/api/image/page.mdx b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
@@ -0,0 +1 @@
+# Image
diff --git a/apps/landing/src/app/(detail)/docs/api/input/page.mdx b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
@@ -0,0 +1 @@
+# Input
diff --git a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
@@ -0,0 +1 @@
+# Selector
diff --git a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
@@ -0,0 +1 @@
+# Style Props
diff --git a/apps/landing/src/app/(detail)/docs/api/text/page.mdx b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
@@ -0,0 +1 @@
+# Text
diff --git a/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx b/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
@@ -0,0 +1 @@
+# VStack
diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
@@ -0,0 +1 @@
+# Breakpoints
diff --git a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
@@ -0,0 +1 @@
+# Colors
diff --git a/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx b/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
@@ -0,0 +1 @@
+# devup.json
diff --git a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
@@ -0,0 +1 @@
+# Typography
diff --git a/apps/landing/src/app/(detail)/docs/features/page.mdx b/apps/landing/src/app/(detail)/docs/features/page.mdx
@@ -0,0 +1 @@
+# Features
diff --git a/apps/landing/src/app/(detail)/docs/installation/page.mdx b/apps/landing/src/app/(detail)/docs/installation/page.mdx
@@ -0,0 +1,6 @@
+# Installation
+
+
+```bash
+npm install @deuvp-ui/react
+```
diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
@@ -28,9 +28,9 @@ export default function HomePage() {
             </Text>
           </VStack>
           <Link
-            className={css`
-              text-decoration: none;
-            `}
+            className={css({
+              textDecoration: 'none',
+            })}
             href={URL_PREFIX + '/docs/overview'}
           >
             <Flex