Fix landing

apps/landing/devup.json

@@ -83,6 +83,14 @@
                     "letterSpacing": "-0.06em"
                 }
             ],
+            "mainTextSm": {
+                "fontFamily": "Spoqa Han Sans Neo",
+                "fontStyle": "normal",
+                "fontWeight": 500,
+                "fontSize": "24px",
+                "lineHeight": "normal",
+                "letterSpacing": "-0.06em"
+            },
             "braille": [
                 {
                     "fontFamily": "Spoqa Han Sans Neo",
@@ -99,7 +107,7 @@
                     "fontFamily": "Spoqa Han Sans Neo",
                     "fontStyle": "normal",
                     "fontWeight": 500,
-                    "fontSize": "20px",
+                    "fontSize": "22px",
                     "lineHeight": 1.8,
                     "letterSpacing": "-0.06em"
                 }
@@ -251,14 +259,27 @@
                     "letterSpacing": "-0.06em"
                 }
             ],
-            "gnbMenu": {
-                "fontFamily": "Spoqa Han Sans Neo",
-                "fontStyle": "normal",
-                "fontWeight": 500,
-                "fontSize": "18px",
-                "lineHeight": "normal",
-                "letterSpacing": "-0.06em"
-            },
+            "gnbMenu": [
+                {
+                    "fontFamily": "Spoqa Han Sans Neo",
+                    "fontStyle": "normal",
+                    "fontWeight": 500,
+                    "fontSize": "15px",
+                    "lineHeight": "normal",
+                    "letterSpacing": "-0.06em"
+                },
+                null,
+                null,
+                null,
+                {
+                    "fontFamily": "Spoqa Han Sans Neo",
+                    "fontStyle": "normal",
+                    "fontWeight": 500,
+                    "fontSize": "18px",
+                    "lineHeight": "normal",
+                    "letterSpacing": "-0.06em"
+                }
+            ],
             "docsMenu": [
                 {
                     "fontFamily": "Spoqa Han Sans Neo",

apps/landing/src/app/Trans.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Flex, Image, Input } from '@devup-ui/react'
+import { Flex, Image, Input, Text, VStack } from '@devup-ui/react'
 import { useEffect, useState } from 'react'
 
 export function Trans() {
@@ -9,81 +9,102 @@ export function Trans() {
   >(() => () => '')
   useEffect(() => {
     import('braillify').then((mod) => {
-      setTranslateToUnicode(() => mod.translateToUnicode)
+      setTranslateToUnicode(() => (input: string) => {
+        try {
+          return mod.translateToUnicode(input)
+        } catch (e) {
+          console.error(e)
+          return '점역할 수 없는 문자가 있습니다.'
+        }
+      })
     })
   }, [input])
   return (
-    <Flex
-      alignItems="center"
-      flexDirection={['column', null, null, 'row']}
-      gap={['12px', null, null, '30px']}
-      h={['auto', null, null, '500px']}
-    >
-      <Flex flex="1" h="100%" w="100%">
-        <Input
-          as="textarea"
-          bg="$containerBackground"
-          border="none"
-          borderRadius={['16px', null, null, '30px']}
-          color="$text"
-          h={['400px', null, null, 'auto']}
-          onChange={(e) => setInput(e.target.value)}
-          p={['16px', null, null, '40px']}
-          placeholder={
-            'braillify는 한글 점역을 빠르고 안정적으로 처리하는 Rust 기반 라이브러리입니다.\nNode.js, WebAssembly, Python 등 다양한 환경에서 사용할 수 있어요.\n점역하고 싶은 문장이나 단어를 여기에 입력해 직접 확인해보세요!'
-          }
-          resize="none"
-          selectors={{
-            '&::placeholder': {
-              color: '$text',
-              typography: 'braille',
-              opacity: 0.5,
-            },
-          }}
-          typography="braille"
-          value={input}
-          w="100%"
-        />
-      </Flex>
-      <Flex>
+    <VStack gap="30px">
+      <Flex alignItems="flex-start" gap="20px">
         <Image
-          display={['none', null, null, 'block']}
-          mr="10px"
-          src="/images/home/translate-arrow-circle.svg"
-          w="16px"
-        />
-        <Image
-          src="/images/home/translate-arrow.svg"
-          transform={['rotate(0deg)', null, null, 'rotate(-90deg)']}
-          w={['16px', null, null, '24px']}
+          alt="Finger point image"
+          src="/images/home/finger-point.svg"
+          w="28px"
         />
+        <Text color="$text" pos="relative" top="-2px" typography="mainTextSm">
+          직접 입력해 실시간 점자 번역을 체험해보세요!
+        </Text>
       </Flex>
-      <Flex flex="1" h="100%" w="100%">
-        <Input
-          as="textarea"
-          bg="$containerBackground"
-          border="none"
-          borderRadius={['16px', null, null, '30px']}
-          color="$text"
-          h={['400px', null, null, 'auto']}
-          p={['16px', null, null, '40px']}
-          placeholder={
-            '⠴⠃⠗⠁⠊⠇⠇⠊⠋⠽⠲⠉⠵ ⠚⠒⠈⠮ ⠨⠎⠢⠱⠁⠮ ⠠⠘⠐⠪⠈⠥ ⠣⠒⠨⠻⠨⠹⠪⠐⠥ ⠰⠎⠐⠕⠚⠉⠵ ⠴⠠⠗⠥⠌⠲ ⠈⠕⠘⠒ ⠐⠣⠕⠘⠪⠐⠎⠐⠕⠕⠃⠉⠕⠊⠲\n⠴⠠⠝⠕⠙⠑⠲⠚⠎⠂ ⠠⠺⠑⠃⠠⠁⠎⠎⠑⠍⠃⠇⠽⠂ ⠠⠏⠽⠹⠕⠝⠲ ⠊⠪⠶ ⠊⠣⠜⠶⠚⠒ ⠚⠧⠒⠈⠻⠝⠠⠎ ⠇⠬⠶⠚⠂ ⠠⠍ ⠕⠌⠎⠬⠲\n⠨⠎⠢⠱⠁⠚⠈⠥ ⠠⠕⠲⠵ ⠑⠛⠨⠶⠕⠉ ⠊⠒⠎⠐⠮ ⠱⠈⠕⠝ ⠕⠃⠐⠱⠁⠚⠗ ⠨⠕⠁⠨⠎⠃ ⠚⠧⠁⠟⠚⠗⠘⠥⠠⠝⠬⠖'
-          }
-          readOnly
-          resize="none"
-          selectors={{
-            '&::placeholder': {
-              color: '$text',
-              typography: 'braille',
-              opacity: 0.5,
-            },
-          }}
-          typography="braille"
-          value={translateToUnicode(input)}
-          w="100%"
-        />
+      <Flex
+        alignItems="center"
+        flexDirection={['column', null, null, 'row']}
+        gap={['12px', null, null, '30px']}
+        h={['auto', null, null, '500px']}
+      >
+        <Flex flex="1" h="100%" w="100%">
+          <Input
+            as="textarea"
+            bg="$containerBackground"
+            border="none"
+            borderRadius={['16px', null, null, '30px']}
+            color="$text"
+            h={['400px', null, null, 'auto']}
+            onChange={(e) => setInput(e.target.value)}
+            p={['16px', null, null, '40px']}
+            placeholder={
+              'braillify는 한글 점역을 빠르고 안정적으로 처리하는 Rust 기반 라이브러리입니다.\nNode.js, WebAssembly, Python 등 다양한 환경에서 사용할 수 있어요.\n\n점역하고 싶은 문장이나 단어를 여기에 입력해 직접 확인해보세요!'
+            }
+            resize="none"
+            selectors={{
+              '&::placeholder': {
+                color: '$text',
+                typography: 'braille',
+                opacity: 0.5,
+              },
+            }}
+            typography="braille"
+            value={input}
+            w="100%"
+          />
+        </Flex>
+        <Flex>
+          <Image
+            alt=""
+            display={['none', null, null, 'block']}
+            mr="10px"
+            src="/images/home/translate-arrow-circle.svg"
+            w="16px"
+          />
+          <Image
+            alt=""
+            src="/images/home/translate-arrow.svg"
+            transform={['rotate(0deg)', null, null, 'rotate(-90deg)']}
+            w={['16px', null, null, '24px']}
+          />
+        </Flex>
+        <Flex flex="1" h="100%" w="100%">
+          <Input
+            as="textarea"
+            bg="$containerBackground"
+            border="none"
+            borderRadius={['16px', null, null, '30px']}
+            color="$text"
+            h={['400px', null, null, 'auto']}
+            p={['16px', null, null, '40px']}
+            placeholder={
+              '⠴⠃⠗⠁⠊⠇⠇⠊⠋⠽⠲⠉⠵ ⠚⠒⠈⠮ ⠨⠎⠢⠱⠁⠮ ⠠⠘⠐⠪⠈⠥ ⠣⠒⠨⠻⠨⠹⠪⠐⠥ ⠰⠎⠐⠕⠚⠉⠵ ⠴⠠⠗⠥⠌⠲ ⠈⠕⠘⠒ ⠐⠣⠕⠘⠪⠐⠎⠐⠕⠕⠃⠉⠕⠊⠲\n⠴⠠⠝⠕⠙⠑⠲⠚⠎⠂ ⠠⠺⠑⠃⠠⠁⠎⠎⠑⠍⠃⠇⠽⠂ ⠠⠏⠽⠹⠕⠝⠲ ⠊⠪⠶ ⠊⠣⠜⠶⠚⠒ ⠚⠧⠒⠈⠻⠝⠠⠎ ⠇⠬⠶⠚⠂ ⠠⠍ ⠕⠌⠎⠬⠲\n\n⠨⠎⠢⠱⠁⠚⠈⠥ ⠠⠕⠲⠵ ⠑⠛⠨⠶⠕⠉ ⠊⠒⠎⠐⠮ ⠱⠈⠕⠝ ⠕⠃⠐⠱⠁⠚⠗ ⠨⠕⠁⠨⠎⠃ ⠚⠧⠁⠟⠚⠗⠘⠥⠠⠝⠬⠖'
+            }
+            readOnly
+            resize="none"
+            selectors={{
+              '&::placeholder': {
+                color: '$text',
+                typography: 'braille',
+                opacity: 0.5,
+              },
+            }}
+            typography="braille"
+            value={translateToUnicode(input)}
+            w="100%"
+          />
+        </Flex>
       </Flex>
-    </Flex>
+    </VStack>
   )
 }

apps/landing/src/app/docs/MenuItem.tsx

@@ -51,14 +51,15 @@ export function MenuItem(props: MenuItemProps) {
         color={selected ? '$title' : '$text'}
         flex="1"
         opacity={selected ? '1' : '0.8'}
-        typography={selected ? 'buttonLg' : 'button'}
+        typography={selected ? 'docsMenuBold' : 'docsMenu'}
       >
         {children}
       </Text>
     </Flex>
   )
   return to ? (
     <Link
+      aria-label={`${children} link`}
       className={css({
         textDecoration: 'none',
       })}

apps/landing/src/app/docs/OpenMenuItem.tsx

@@ -45,6 +45,7 @@ export function OpenMenuItem({
         </Text>
         {subMenu && (
           <Image
+            alt="Menu arrow icon"
             boxSize="16px"
             src="/images/docs/menu-arrow.svg"
             transform={open ? 'rotate(0deg)' : 'rotate(-90deg)'}
@@ -78,7 +79,7 @@ export function OpenMenuItem({
                     color={selected ? '$title' : '$text'}
                     flex="1"
                     opacity={selected ? '1' : '0.8'}
-                    typography={selected ? 'buttonLg' : 'button'}
+                    typography={selected ? 'docsMenuBold' : 'docsMenu'}
                   >
                     {children}
                   </Text>
@@ -88,6 +89,7 @@ export function OpenMenuItem({
               return to ? (
                 <Link
                   key={idx}
+                  aria-label={`${children} link`}
                   className={css({
                     textDecoration: 'none',
                   })}

apps/landing/src/app/docs/RightIndex.tsx

@@ -83,6 +83,7 @@ export function RightIndex() {
       </VStack>
       <Box bg="$border" h="1px" />
       <Link
+        aria-label="Edit this page"
         className={css({
           textDecoration: 'none',
           _hover: {
@@ -100,6 +101,7 @@ export function RightIndex() {
             color="$caption"
             flex="1"
             textAlign="right"
+            typography="docsSmall"
           >
             이 페이지 편집하기
           </Text>

apps/landing/src/app/docs/layout.tsx

@@ -15,7 +15,13 @@ export default function DocsLayout({
           <LeftMenu />
         </Box>
       </Box>
-      <Box className="markdown-body" color="$text" flex={1} px="60px" py="40px">
+      <Box
+        className="markdown-body"
+        color="$text"
+        flex={1}
+        px={['16px', null, null, '60px']}
+        py={['24px', null, null, '40px']}
+      >
         {children}
       </Box>
       <Box display={['none', null, null, 'initial']}>

apps/landing/src/app/layout.tsx

@@ -9,6 +9,39 @@ import Header from '@/components/Header'
 export const metadata: Metadata = {
   title: 'Braillify',
   description: '크로스플랫폼 한국어 점역 라이브러리',
+  keywords: [
+    '한글 점역',
+    '한글 점역 라이브러리',
+    '한글 점역 라이브러리 추천',
+    'Braillify',
+    '브레일리파이',
+    '점자 번역',
+    '점자 번역기',
+    '점자 통역',
+    '점자 통역기',
+    '점역기',
+    '점자 번역 라이브러리',
+    '점자 통역 라이브러리',
+    '점자 번역 라이브러리 추천',
+    '점자 통역 라이브러리 추천',
+    'braille translator',
+    '한글 점자',
+    '영어 점자',
+    '점역 서비스',
+    '점자 ↔ 한글',
+    '점자 ↔ 영어',
+    'braille english',
+    'braille korean',
+    'braille translator',
+  ],
+  openGraph: {
+    title: 'Braillify',
+    description: '크로스플랫폼 한국어 점역 라이브러리',
+    images: ['https://braillify.kr/og-image.png'],
+    siteName: 'Braillify',
+    type: 'website',
+    url: 'https://braillify.kr',
+  },
 }
 
 export default function RootLayout({
@@ -31,9 +64,6 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
         />
         <ThemeScript auto />
         <link href="/favicon.svg" rel="shortcut icon" />
-        <meta content="Braillify" property="og:title" />
-        <meta content="Braillify" property="og:description" />
-        <meta content="https://braillify.kr/og.png" property="og:image" />
       </head>
       <body
         className={css({