Skip to content

Commit 4145e24

Browse files
owjs3901owjs3901
authored
Merge pull request #8 from dev-five-git/fix-landing
Fix landing
2 parents a7b8a84 + 5e09c1d commit 4145e24

File tree

18 files changed

+383
-240
lines changed

18 files changed

+383
-240
lines changed

‎apps/landing/devup.json‎

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,14 @@
8383
"letterSpacing": "-0.06em"
8484
}
8585
],
86+
"mainTextSm": {
87+
"fontFamily": "Spoqa Han Sans Neo",
88+
"fontStyle": "normal",
89+
"fontWeight": 500,
90+
"fontSize": "24px",
91+
"lineHeight": "normal",
92+
"letterSpacing": "-0.06em"
93+
},
8694
"braille": [
8795
{
8896
"fontFamily": "Spoqa Han Sans Neo",
@@ -99,7 +107,7 @@
99107
"fontFamily": "Spoqa Han Sans Neo",
100108
"fontStyle": "normal",
101109
"fontWeight": 500,
102-
"fontSize": "20px",
110+
"fontSize": "22px",
103111
"lineHeight": 1.8,
104112
"letterSpacing": "-0.06em"
105113
}
@@ -251,14 +259,27 @@
251259
"letterSpacing": "-0.06em"
252260
}
253261
],
254-
"gnbMenu": {
255-
"fontFamily": "Spoqa Han Sans Neo",
256-
"fontStyle": "normal",
257-
"fontWeight": 500,
258-
"fontSize": "18px",
259-
"lineHeight": "normal",
260-
"letterSpacing": "-0.06em"
261-
},
262+
"gnbMenu": [
263+
{
264+
"fontFamily": "Spoqa Han Sans Neo",
265+
"fontStyle": "normal",
266+
"fontWeight": 500,
267+
"fontSize": "15px",
268+
"lineHeight": "normal",
269+
"letterSpacing": "-0.06em"
270+
},
271+
null,
272+
null,
273+
null,
274+
{
275+
"fontFamily": "Spoqa Han Sans Neo",
276+
"fontStyle": "normal",
277+
"fontWeight": 500,
278+
"fontSize": "18px",
279+
"lineHeight": "normal",
280+
"letterSpacing": "-0.06em"
281+
}
282+
],
262283
"docsMenu": [
263284
{
264285
"fontFamily": "Spoqa Han Sans Neo",

‎apps/landing/public/images/home/finger-point.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎apps/landing/src/app/Trans.tsx‎

Lines changed: 91 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client'
2-
import { Flex, Image, Input } from '@devup-ui/react'
2+
import { Flex, Image, Input, Text, VStack } from '@devup-ui/react'
33
import { useEffect, useState } from 'react'
44

55
export function Trans() {
@@ -9,81 +9,102 @@ export function Trans() {
99
>(() => () => '')
1010
useEffect(() => {
1111
import('braillify').then((mod) => {
12-
setTranslateToUnicode(() => mod.translateToUnicode)
12+
setTranslateToUnicode(() => (input: string) => {
13+
try {
14+
return mod.translateToUnicode(input)
15+
} catch (e) {
16+
console.error(e)
17+
return '점역할 수 없는 문자가 있습니다.'
18+
}
19+
})
1320
})
1421
}, [input])
1522
return (
16-
<Flex
17-
alignItems="center"
18-
flexDirection={['column', null, null, 'row']}
19-
gap={['12px', null, null, '30px']}
20-
h={['auto', null, null, '500px']}
21-
>
22-
<Flex flex="1" h="100%" w="100%">
23-
<Input
24-
as="textarea"
25-
bg="$containerBackground"
26-
border="none"
27-
borderRadius={['16px', null, null, '30px']}
28-
color="$text"
29-
h={['400px', null, null, 'auto']}
30-
onChange={(e) => setInput(e.target.value)}
31-
p={['16px', null, null, '40px']}
32-
placeholder={
33-
'braillify는 한글 점역을 빠르고 안정적으로 처리하는 Rust 기반 라이브러리입니다.\nNode.js, WebAssembly, Python 등 다양한 환경에서 사용할 수 있어요.\n점역하고 싶은 문장이나 단어를 여기에 입력해 직접 확인해보세요!'
34-
}
35-
resize="none"
36-
selectors={{
37-
'&::placeholder': {
38-
color: '$text',
39-
typography: 'braille',
40-
opacity: 0.5,
41-
},
42-
}}
43-
typography="braille"
44-
value={input}
45-
w="100%"
46-
/>
47-
</Flex>
48-
<Flex>
23+
<VStack gap="30px">
24+
<Flex alignItems="flex-start" gap="20px">
4925
<Image
50-
display={['none', null, null, 'block']}
51-
mr="10px"
52-
src="/images/home/translate-arrow-circle.svg"
53-
w="16px"
54-
/>
55-
<Image
56-
src="/images/home/translate-arrow.svg"
57-
transform={['rotate(0deg)', null, null, 'rotate(-90deg)']}
58-
w={['16px', null, null, '24px']}
26+
alt="Finger point image"
27+
src="/images/home/finger-point.svg"
28+
w="28px"
5929
/>
30+
<Text color="$text" pos="relative" top="-2px" typography="mainTextSm">
31+
직접 입력해 실시간 점자 번역을 체험해보세요!
32+
</Text>
6033
</Flex>
61-
<Flex flex="1" h="100%" w="100%">
62-
<Input
63-
as="textarea"
64-
bg="$containerBackground"
65-
border="none"
66-
borderRadius={['16px', null, null, '30px']}
67-
color="$text"
68-
h={['400px', null, null, 'auto']}
69-
p={['16px', null, null, '40px']}
70-
placeholder={
71-
'⠴⠃⠗⠁⠊⠇⠇⠊⠋⠽⠲⠉⠵ ⠚⠒⠈⠮ ⠨⠎⠢⠱⠁⠮ ⠠⠘⠐⠪⠈⠥ ⠣⠒⠨⠻⠨⠹⠪⠐⠥ ⠰⠎⠐⠕⠚⠉⠵ ⠴⠠⠗⠥⠌⠲ ⠈⠕⠘⠒ ⠐⠣⠕⠘⠪⠐⠎⠐⠕⠕⠃⠉⠕⠊⠲\n⠴⠠⠝⠕⠙⠑⠲⠚⠎⠂ ⠠⠺⠑⠃⠠⠁⠎⠎⠑⠍⠃⠇⠽⠂ ⠠⠏⠽⠹⠕⠝⠲ ⠊⠪⠶ ⠊⠣⠜⠶⠚⠒ ⠚⠧⠒⠈⠻⠝⠠⠎ ⠇⠬⠶⠚⠂ ⠠⠍ ⠕⠌⠎⠬⠲\n⠨⠎⠢⠱⠁⠚⠈⠥ ⠠⠕⠲⠵ ⠑⠛⠨⠶⠕⠉ ⠊⠒⠎⠐⠮ ⠱⠈⠕⠝ ⠕⠃⠐⠱⠁⠚⠗ ⠨⠕⠁⠨⠎⠃ ⠚⠧⠁⠟⠚⠗⠘⠥⠠⠝⠬⠖'
72-
}
73-
readOnly
74-
resize="none"
75-
selectors={{
76-
'&::placeholder': {
77-
color: '$text',
78-
typography: 'braille',
79-
opacity: 0.5,
80-
},
81-
}}
82-
typography="braille"
83-
value={translateToUnicode(input)}
84-
w="100%"
85-
/>
34+
<Flex
35+
alignItems="center"
36+
flexDirection={['column', null, null, 'row']}
37+
gap={['12px', null, null, '30px']}
38+
h={['auto', null, null, '500px']}
39+
>
40+
<Flex flex="1" h="100%" w="100%">
41+
<Input
42+
as="textarea"
43+
bg="$containerBackground"
44+
border="none"
45+
borderRadius={['16px', null, null, '30px']}
46+
color="$text"
47+
h={['400px', null, null, 'auto']}
48+
onChange={(e) => setInput(e.target.value)}
49+
p={['16px', null, null, '40px']}
50+
placeholder={
51+
'braillify는 한글 점역을 빠르고 안정적으로 처리하는 Rust 기반 라이브러리입니다.\nNode.js, WebAssembly, Python 등 다양한 환경에서 사용할 수 있어요.\n\n점역하고 싶은 문장이나 단어를 여기에 입력해 직접 확인해보세요!'
52+
}
53+
resize="none"
54+
selectors={{
55+
'&::placeholder': {
56+
color: '$text',
57+
typography: 'braille',
58+
opacity: 0.5,
59+
},
60+
}}
61+
typography="braille"
62+
value={input}
63+
w="100%"
64+
/>
65+
</Flex>
66+
<Flex>
67+
<Image
68+
alt=""
69+
display={['none', null, null, 'block']}
70+
mr="10px"
71+
src="/images/home/translate-arrow-circle.svg"
72+
w="16px"
73+
/>
74+
<Image
75+
alt=""
76+
src="/images/home/translate-arrow.svg"
77+
transform={['rotate(0deg)', null, null, 'rotate(-90deg)']}
78+
w={['16px', null, null, '24px']}
79+
/>
80+
</Flex>
81+
<Flex flex="1" h="100%" w="100%">
82+
<Input
83+
as="textarea"
84+
bg="$containerBackground"
85+
border="none"
86+
borderRadius={['16px', null, null, '30px']}
87+
color="$text"
88+
h={['400px', null, null, 'auto']}
89+
p={['16px', null, null, '40px']}
90+
placeholder={
91+
'⠴⠃⠗⠁⠊⠇⠇⠊⠋⠽⠲⠉⠵ ⠚⠒⠈⠮ ⠨⠎⠢⠱⠁⠮ ⠠⠘⠐⠪⠈⠥ ⠣⠒⠨⠻⠨⠹⠪⠐⠥ ⠰⠎⠐⠕⠚⠉⠵ ⠴⠠⠗⠥⠌⠲ ⠈⠕⠘⠒ ⠐⠣⠕⠘⠪⠐⠎⠐⠕⠕⠃⠉⠕⠊⠲\n⠴⠠⠝⠕⠙⠑⠲⠚⠎⠂ ⠠⠺⠑⠃⠠⠁⠎⠎⠑⠍⠃⠇⠽⠂ ⠠⠏⠽⠹⠕⠝⠲ ⠊⠪⠶ ⠊⠣⠜⠶⠚⠒ ⠚⠧⠒⠈⠻⠝⠠⠎ ⠇⠬⠶⠚⠂ ⠠⠍ ⠕⠌⠎⠬⠲\n\n⠨⠎⠢⠱⠁⠚⠈⠥ ⠠⠕⠲⠵ ⠑⠛⠨⠶⠕⠉ ⠊⠒⠎⠐⠮ ⠱⠈⠕⠝ ⠕⠃⠐⠱⠁⠚⠗ ⠨⠕⠁⠨⠎⠃ ⠚⠧⠁⠟⠚⠗⠘⠥⠠⠝⠬⠖'
92+
}
93+
readOnly
94+
resize="none"
95+
selectors={{
96+
'&::placeholder': {
97+
color: '$text',
98+
typography: 'braille',
99+
opacity: 0.5,
100+
},
101+
}}
102+
typography="braille"
103+
value={translateToUnicode(input)}
104+
w="100%"
105+
/>
106+
</Flex>
86107
</Flex>
87-
</Flex>
108+
</VStack>
88109
)
89110
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,15 @@ export function MenuItem(props: MenuItemProps) {
5151
color={selected ? '$title' : '$text'}
5252
flex="1"
5353
opacity={selected ? '1' : '0.8'}
54-
typography={selected ? 'buttonLg' : 'button'}
54+
typography={selected ? 'docsMenuBold' : 'docsMenu'}
5555
>
5656
{children}
5757
</Text>
5858
</Flex>
5959
)
6060
return to ? (
6161
<Link
62+
aria-label={`${children} link`}
6263
className={css({
6364
textDecoration: 'none',
6465
})}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export function OpenMenuItem({
4545
</Text>
4646
{subMenu && (
4747
<Image
48+
alt="Menu arrow icon"
4849
boxSize="16px"
4950
src="/images/docs/menu-arrow.svg"
5051
transform={open ? 'rotate(0deg)' : 'rotate(-90deg)'}
@@ -78,7 +79,7 @@ export function OpenMenuItem({
7879
color={selected ? '$title' : '$text'}
7980
flex="1"
8081
opacity={selected ? '1' : '0.8'}
81-
typography={selected ? 'buttonLg' : 'button'}
82+
typography={selected ? 'docsMenuBold' : 'docsMenu'}
8283
>
8384
{children}
8485
</Text>
@@ -88,6 +89,7 @@ export function OpenMenuItem({
8889
return to ? (
8990
<Link
9091
key={idx}
92+
aria-label={`${children} link`}
9193
className={css({
9294
textDecoration: 'none',
9395
})}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export function RightIndex() {
8383
</VStack>
8484
<Box bg="$border" h="1px" />
8585
<Link
86+
aria-label="Edit this page"
8687
className={css({
8788
textDecoration: 'none',
8889
_hover: {
@@ -100,6 +101,7 @@ export function RightIndex() {
100101
color="$caption"
101102
flex="1"
102103
textAlign="right"
104+
typography="docsSmall"
103105
>
104106
이 페이지 편집하기
105107
</Text>

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,13 @@ export default function DocsLayout({
1515
<LeftMenu />
1616
</Box>
1717
</Box>
18-
<Box className="markdown-body" color="$text" flex={1} px="60px" py="40px">
18+
<Box
19+
className="markdown-body"
20+
color="$text"
21+
flex={1}
22+
px={['16px', null, null, '60px']}
23+
py={['24px', null, null, '40px']}
24+
>
1925
{children}
2026
</Box>
2127
<Box display={['none', null, null, 'initial']}>

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

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,39 @@ import Header from '@/components/Header'
99
export const metadata: Metadata = {
1010
title: 'Braillify',
1111
description: '크로스플랫폼 한국어 점역 라이브러리',
12+
keywords: [
13+
'한글 점역',
14+
'한글 점역 라이브러리',
15+
'한글 점역 라이브러리 추천',
16+
'Braillify',
17+
'브레일리파이',
18+
'점자 번역',
19+
'점자 번역기',
20+
'점자 통역',
21+
'점자 통역기',
22+
'점역기',
23+
'점자 번역 라이브러리',
24+
'점자 통역 라이브러리',
25+
'점자 번역 라이브러리 추천',
26+
'점자 통역 라이브러리 추천',
27+
'braille translator',
28+
'한글 점자',
29+
'영어 점자',
30+
'점역 서비스',
31+
'점자 ↔ 한글',
32+
'점자 ↔ 영어',
33+
'braille english',
34+
'braille korean',
35+
'braille translator',
36+
],
37+
openGraph: {
38+
title: 'Braillify',
39+
description: '크로스플랫폼 한국어 점역 라이브러리',
40+
images: ['https://braillify.kr/og-image.png'],
41+
siteName: 'Braillify',
42+
type: 'website',
43+
url: 'https://braillify.kr',
44+
},
1245
}
1346

1447
export default function RootLayout({
@@ -31,9 +64,6 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
3164
/>
3265
<ThemeScript auto />
3366
<link href="/favicon.svg" rel="shortcut icon" />
34-
<meta content="Braillify" property="og:title" />
35-
<meta content="Braillify" property="og:description" />
36-
<meta content="https://braillify.kr/og.png" property="og:image" />
3767
</head>
3868
<body
3969
className={css({

0 commit comments

Comments
 (0)