[QA] 레이아웃 이슈

apps/landing/devup.json

@@ -35,7 +35,16 @@
                 "search": "#9C50FF",
                 "kakaoButton": "#DE9800",
                 "kakaoButtonHover": "#C98900",
-                "kakaoButtonActive": "#B77D00"
+                "kakaoButtonActive": "#B77D00",
+                "imageBorder": "#C8C7D1",
+                "imageDropdown": "#ECECEC",
+                "imagePlaceholder": "#999999",
+                "imageDate": "#C9C9C9",
+                "imageDateNone": "#F2F2F2",
+                "imageProgress": "#DADADA",
+                "imageMenuBg": "#FBFBFB",
+                "imageMenuSelect": "#EDECF7",
+                "starBg": "#F7F8FF"
             },
             "dark": {
                 "primary": "#6670F9",
@@ -71,7 +80,16 @@
                 "search": "#6FA4FF",
                 "kakaoButton": "#A3740D",
                 "kakaoButtonHover": "#C98900",
-                "kakaoButtonActive": "#E09900"
+                "kakaoButtonActive": "#E09900",
+                "imageBorder": "#4D4C53",
+                "imageDropdown": "#3A3A3A",
+                "imagePlaceholder": "#4C4C4C",
+                "imageDate": "#636363",
+                "imageDateNone": "#343333",
+                "imageProgress": "#444444",
+                "imageMenuBg": "#262626",
+                "imageMenuSelect": "#3F3F3F",
+                "starBg": "#232323"
             }
         },
         "typography": {

apps/landing/script.js

@@ -5,16 +5,21 @@ const files = await glob('src/**/*.mdx')
 const q = []
 for await (const file of files) {
   q.push(
-    readFile(file).then((content) => {
+    readFile(file, {
+      encoding: 'utf-8',
+    }).then((content) => {
       const titleIndex = content.toString().indexOf('#')
+      if (content.trim().length === 0 || titleIndex === -1) {
+        return null
+      }
+      const fileName = file.split(/[/\\]/).pop()
+
       return {
         text: content.toString().substring(titleIndex),
-        title: /# (.*)/.exec(content.toString())[1],
-        url:
-          '/devup-ui/' +
-          file
-            .replace(/src[/\\]app[/\\]\(detail\)[/\\]/, '')
-            .replace('page.mdx', ''),
+        title: /(#)+ (.*)/.exec(content.toString())[1],
+        url: file
+          .replace(/src[/\\]app[/\\]\(detail\)[/\\]/, '')
+          .replace(fileName, ''),
       }
     }),
   )

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

@@ -9,16 +9,16 @@ export function LeftMenu() {
       <MenuItem
         subMenu={[
           { to: '/components/button', children: 'Button' },
-          { to: '/components/text-box', children: 'Text box' },
-          { to: '/components/text-area', children: 'Text area' },
+          { to: '/components/textbox', children: 'Textbox' },
+          { to: '/components/textarea', children: 'Textarea' },
           { 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/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' },
@@ -38,7 +38,7 @@ export function LeftMenu() {
           { to: '/components/header', children: 'Header' },
           { to: '/components/confirm', children: 'Confirm' },
           { to: '/components/snackbar', children: 'Snackbar' },
-          { to: '/components/bottom-sheet', children: 'Bottom sheet' },
+          { to: '/components/bottom-sheet', children: 'Bottom Sheet' },
         ]}
       >
         Layout

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

@@ -20,7 +20,7 @@ export default async function MdxCard({
   const content = await readFile(
     join(
       process.cwd(),
-      'src/app/(detail)/components',
+      'src/app/(detail)/components/[component]',
       src ?? 'button/demo/Variants.tsx',
     ),
     {
@@ -30,6 +30,10 @@ export default async function MdxCard({
   // extract comment
   const comment = content.match(/\/\*\*[\s\S]*?\*\//)?.[0]
   const code = content.replace('\n' + comment!, '')
+  const normalizedCode = code
+    .split('\n')
+    .map((line) => line.replaceAll('  ', '    '))
+    .join('\n')
   const normalizedComment = comment
     ?.replace(/\/\*\*|\*\//g, '')
     ?.replace(/^\s*\*\s*/gm, '')
@@ -64,8 +68,8 @@ export default async function MdxCard({
           {normalizedComment ?? ''}
         </ReactMarkdown>
       </VStack>
-      <MdxCardFooter>
-        <Code language="typescript" value={code} />
+      <MdxCardFooter code={normalizedCode}>
+        <Code language="typescript" value={normalizedCode} />
       </MdxCardFooter>
     </Card>
   )

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

@@ -1,16 +1,27 @@
 'use client'
 
-import { Box, Center, Flex, Text, VStack } from '@devup-ui/react'
+import { Box, Center, Flex, Image, Text, VStack } from '@devup-ui/react'
 import { useState } from 'react'
 
 import IconCode from '@/components/icons/IconCode'
 
 export default function MdxCardFooter({
+  code,
   children,
 }: {
+  code: string
   children: React.ReactNode
 }) {
   const [isOpen, setIsOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard
+      .writeText(code)
+      .then(() => setCopied(true))
+      .catch(() => setCopied(false))
+  }
+
   return (
     <VStack justifyContent="flex-end" maxH="600px" maxW="100%">
       <Flex
@@ -41,9 +52,50 @@ export default function MdxCardFooter({
         </Center>
       </Flex>
       {isOpen && (
-        <Box borderTop="1px solid $border" overflow="auto" px="24px" py="16px">
-          {children}
-        </Box>
+        <>
+          <Box h="0" pos="relative" w="100%">
+            <Center
+              _active={{
+                borderColor: '$primary',
+                bg: '$menuActive',
+              }}
+              _hover={{
+                borderColor: '$primary',
+                bg: '$menuHover',
+              }}
+              bg="$containerBackground"
+              border="1px solid transparent"
+              borderRadius="4px"
+              boxShadow="0 2px 6px 0 $shadow"
+              cursor="pointer"
+              gap="8px"
+              onClick={handleCopy}
+              p="8px"
+              pos="absolute"
+              right="16px"
+              top="16px"
+              transition="all 0.125s ease-in-out"
+            >
+              <Image
+                aspectRatio="1"
+                boxSize="20px"
+                src={copied ? '/icons/copied.svg' : '/icons/copy-code.svg'}
+              />
+              <Text color="$captionBold" typography="caption">
+                Copy
+              </Text>
+            </Center>
+          </Box>
+          <Box
+            borderTop="1px solid $border"
+            h="100%"
+            overflow="auto"
+            px="24px"
+            py="16px"
+          >
+            {children}
+          </Box>
+        </>
       )}
     </VStack>
   )

apps/landing/src/app/(detail)/components/[component]/bottom-sheet/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/bottom-sheet/index.mdx

@@ -0,0 +1 @@
+`Bottom Sheet` component displays content in a slide-up panel from the bottom of the screen. 

apps/landing/src/app/(detail)/components/button/demo/Icon.tsx → apps/landing/src/app/(detail)/components/[component]/button/demo/Icon.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@devup-ui/components'
 import { Box, css, Flex } from '@devup-ui/react'
 
-import IconDelete from '../IconDelete'
+import IconDelete from '../../IconDelete'
 
 /**
  * **Icon**

apps/landing/src/app/(detail)/components/button/Button.mdx → apps/landing/src/app/(detail)/components/[component]/button/index.mdx

@@ -1,5 +1 @@
-**Button**
-
-#### Button
-
 `Button` component is used to handle user interactions.

apps/landing/src/app/(detail)/components/[component]/checkbox/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/checkbox/index.mdx

@@ -0,0 +1 @@
+`Checkbox` component allows users to select multiple options. 

apps/landing/src/app/(detail)/components/[component]/color-picker/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/color-picker/index.mdx

@@ -0,0 +1 @@
+`Color Picker` component allows users to select colors from a color palette. 

apps/landing/src/app/(detail)/components/[component]/confirm/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/confirm/index.mdx

@@ -0,0 +1 @@
+`Confirm` component displays a confirmation dialog to users. 

apps/landing/src/app/(detail)/components/[component]/date-picker/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/date-picker/index.mdx

@@ -0,0 +1 @@
+`Date Picker` component allows users to select a date from a calendar interface. 

apps/landing/src/app/(detail)/components/[component]/dropdown/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/dropdown/index.mdx

@@ -0,0 +1 @@
+`Dropdown` component displays a list of options that can be toggled. 

apps/landing/src/app/(detail)/components/[component]/footer/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/footer/index.mdx

@@ -0,0 +1 @@
+`Footer` component displays the bottom section of a page. 

apps/landing/src/app/(detail)/components/[component]/header/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/header/index.mdx

@@ -0,0 +1 @@
+`Header` component displays the top navigation area of a page. 

apps/landing/src/app/(detail)/components/[component]/input/Api.mdx

@@ -0,0 +1,13 @@
+###### API
+`Input` props extends the input HTML attributes. 
+
+<div style={{ width: '100%', overflow: 'auto'}}>
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| **variant** | The variant of the input | `'primary' \| 'default'` | `'default'` |
+| **size** | The size of the input | `'sm' \| 'md' \| 'lg'` | `'md'` |
+| **placeholder** | Placeholder text for the input | `string` | `undefined` |
+| **type** | The type of input | `'text' \| 'password' \| 'email' \| 'number'` | `'text'` |
+| **disabled** | Whether the input is disabled | `boolean` | `false` |
+| **error** | Whether the input has an error state | `boolean` | `false` |
+</div> 

apps/landing/src/app/(detail)/components/[component]/input/index.mdx

@@ -0,0 +1 @@
+`Input` component is used to handle text input from users. 

apps/landing/src/app/(detail)/components/[component]/label/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/label/index.mdx

@@ -0,0 +1 @@
+`Label` component provides text labels for form elements. 

apps/landing/src/app/(detail)/components/[component]/menu/Api.mdx

@@ -0,0 +1 @@
+

apps/landing/src/app/(detail)/components/[component]/menu/index.mdx

@@ -0,0 +1 @@
+`Menu` component displays a list of navigation options.