feat: 랜딩 페이지에 MathLive 기반 수학 점역 데모 추가 및 한글·수학 탭 통합

.gitignore

@@ -53,3 +53,9 @@ tarpaulin-report.html
 tarpaulin-report.json
 **/tarpaulin-report.html
 **/tarpaulin-report.json
+
+# superpowers 작업 산출물(플랜 문서 등) — 저장소에 커밋하지 않는다.
+docs/superpowers/
+
+# superpowers 로컬 작업 디렉터리.
+.superpowers/

apps/landing/package.json

@@ -17,6 +17,7 @@
     "braillify": "workspace:*",
     "clsx": "^2.1.1",
     "katex": "^0.17.0",
+    "mathlive": "^0.110.0",
     "next": "16.2.10",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",

apps/landing/public/mathlive/LICENSE.txt

@@ -0,0 +1,22 @@
+The KaTeX_*.woff2 font files in ./fonts are redistributed from the MathLive
+package (https://github.com/arnog/mathlive) under the MIT License below.
+
+Copyright (c) 2017 - present Arno Gourdol. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the "Software"), 
+to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+and/or sell copies of the Software, and to permit persons to whom the 
+Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+DEALINGS IN THE SOFTWARE.

apps/landing/src/app/DemoArrow.tsx

@@ -0,0 +1,24 @@
+import { Flex, Image } from '@devup-ui/react'
+
+/** 입력 박스와 출력 박스 사이의 방향 화살표. 한글·수학 데모가 공유한다. */
+export function DemoArrow() {
+  return (
+    <Flex alignSelf="center">
+      {/* 데스크톱에서만 보이는 원형 장식. 화살표와 중복 안내되지 않도록 장식으로 둔다. */}
+      <Image
+        alt=""
+        display={['none', null, null, 'block']}
+        mr="10px"
+        role="presentation"
+        src="/images/home/translate-arrow-circle.svg"
+        w="16px"
+      />
+      <Image
+        alt="점역 결과 방향"
+        src="/images/home/translate-arrow.svg"
+        transform={[null, null, null, 'rotate(-90deg)']}
+        w={['16px', null, null, '24px']}
+      />
+    </Flex>
+  )
+}

apps/landing/src/app/DemoHeading.tsx

@@ -0,0 +1,29 @@
+import { Box, Flex, Text } from '@devup-ui/react'
+
+/** 데모 섹션 상단의 손가락 아이콘 + 안내 문구. 한글·수학 데모가 공유한다. */
+export function DemoHeading({ children }: { children: string }) {
+  return (
+    <Flex
+      alignItems="flex-start"
+      gap={['10px', null, null, '20px']}
+      justifyContent={['center', null, null, 'flex-start']}
+    >
+      <Box
+        aria-hidden="true"
+        bg="$text"
+        flexShrink={0}
+        h={['20px', null, null, '32px']}
+        maskImage="url(/images/home/finger-point.svg)"
+        maskPosition="center"
+        maskRepeat="no-repeat"
+        maskSize="contain"
+        // 아이콘 원본 비율(28x32)상 h=20px 의 이론 폭은 17.5px 이다.
+        // maskSize=contain 이라 박스를 18px 로 잡아도 아이콘은 늘어나지 않는다.
+        w={['18px', null, null, '28px']}
+      />
+      <Text color="$text" pos="relative" top="-2px" typography="mainTextSm">
+        {children}
+      </Text>
+    </Flex>
+  )
+}

apps/landing/src/app/DemoTabs.tsx

@@ -0,0 +1,79 @@
+'use client'
+import { Box, Flex, Text, VStack } from '@devup-ui/react'
+import { useRef, useState } from 'react'
+
+import { MathTrans } from './MathTrans'
+import { Trans } from './Trans'
+
+const TABS = [
+  { key: 'korean', label: '한글' },
+  { key: 'math', label: '수학' },
+] as const
+
+type DemoMode = (typeof TABS)[number]['key']
+
+const PANEL_ID = 'demo-panel'
+const tabId = (key: DemoMode) => `demo-tab-${key}`
+
+export function DemoTabs() {
+  const [mode, setMode] = useState<DemoMode>('korean')
+  const tabRefs = useRef<(HTMLElement | null)[]>([])
+
+  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
+    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return
+    e.preventDefault()
+    const dir = e.key === 'ArrowRight' ? 1 : -1
+    const next = (index + dir + TABS.length) % TABS.length
+    setMode(TABS[next].key)
+    tabRefs.current[next]?.focus()
+  }
+
+  return (
+    <VStack gap={['16px', null, null, '30px']} w="100%">
+      <Flex
+        aria-label="점역 데모 종류"
+        gap="10px"
+        justifyContent={['center', null, null, 'flex-start']}
+        role="tablist"
+      >
+        {TABS.map(({ key, label }, index) => (
+          <Text
+            key={key}
+            ref={(el: HTMLElement | null) => {
+              tabRefs.current[index] = el
+            }}
+            aria-controls={PANEL_ID}
+            aria-selected={mode === key}
+            as="button"
+            bg={mode === key ? '$text' : 'transparent'}
+            border="1px solid $text"
+            borderRadius="1000px"
+            color={mode === key ? '$background' : '$text'}
+            cursor="pointer"
+            id={tabId(key)}
+            onClick={() => setMode(key)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+            px={['20px', null, null, '28px']}
+            py={['8px', null, null, '10px']}
+            role="tab"
+            tabIndex={mode === key ? 0 : -1}
+            type="button"
+            typography="button"
+          >
+            {label}
+          </Text>
+        ))}
+      </Flex>
+      <Box
+        aria-labelledby={tabId(mode)}
+        display="flex"
+        flexDirection="column"
+        id={PANEL_ID}
+        role="tabpanel"
+        w="100%"
+      >
+        {mode === 'korean' ? <Trans /> : <MathTrans />}
+      </Box>
+    </VStack>
+  )
+}

apps/landing/src/app/MathTrans.tsx

@@ -0,0 +1,15 @@
+import { VStack } from '@devup-ui/react'
+
+import { DemoHeading } from './DemoHeading'
+import { MathTransPanel } from './MathTransPanel'
+
+export function MathTrans() {
+  return (
+    <VStack gap={['16px', null, null, '30px']}>
+      <DemoHeading>
+        수식도 점자가 됩니다. 수식 키보드로 입력해 수학 점역을 체험해보세요!
+      </DemoHeading>
+      <MathTransPanel />
+    </VStack>
+  )
+}

apps/landing/src/app/MathTransInput.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { css, Flex, Text, VStack } from '@devup-ui/react'
+import type { MathfieldElement } from 'mathlive'
+import { useEffect, useRef, useState } from 'react'
+
+import { normalizeFracBraces } from './normalizeFracBraces'
+
+declare global {
+  // 커스텀 엘리먼트를 JSX 에 등록하려면 React.JSX 네임스페이스 병합이 유일한 방법이다.
+  // oxlint-disable-next-line no-namespace
+  namespace React.JSX {
+    interface IntrinsicElements {
+      'math-field': React.DetailedHTMLProps<
+        React.HTMLAttributes<MathfieldElement>,
+        MathfieldElement
+      > & { 'math-virtual-keyboard-policy'?: 'auto' | 'manual' }
+    }
+  }
+}
+
+export function MathTransInput({
+  latex,
+  onLatexChange,
+  placeholder,
+}: {
+  latex: string
+  onLatexChange: (latex: string) => void
+  placeholder: string
+}) {
+  const [ready, setReady] = useState(false)
+  const fieldRef = useRef<MathfieldElement>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    import('mathlive').then(({ MathfieldElement }) => {
+      if (cancelled) return
+      MathfieldElement.fontsDirectory = '/mathlive/fonts'
+      MathfieldElement.soundsDirectory = null
+      setReady(true)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  useEffect(() => {
+    const field = fieldRef.current
+    if (!ready || !field) return
+    const show = () => window.mathVirtualKeyboard.show()
+    const hide = () => window.mathVirtualKeyboard.hide()
+    field.addEventListener('focusin', show)
+    field.addEventListener('focusout', hide)
+    return () => {
+      field.removeEventListener('focusin', show)
+      field.removeEventListener('focusout', hide)
+      window.mathVirtualKeyboard.hide()
+    }
+  }, [ready])
+
+  return (
+    // 폭 분배(flex)는 호출부가 맡는다. 바깥 Flex 에 padding 을 두지 않는 이유는
+    // flex-basis:0 이라도 flex 아이템의 border-box 크기가 padding 합보다 작아질 수
+    // 없어서, padding 이 있으면 그만큼 출력측 TransInput 보다 넓어지기 때문이다.
+    <Flex>
+      <VStack
+        bg="$containerBackground"
+        borderRadius={['16px', null, null, '30px']}
+        cursor="text"
+        gap="12px"
+        minH="25dvh"
+        onClick={() => fieldRef.current?.focus()}
+        p={['16px', null, null, '40px']}
+        w="100%"
+      >
+        <VStack flex="1" gap="8px">
+          {ready && (
+            <math-field
+              ref={fieldRef}
+              className={css({
+                background: 'transparent',
+                border: 'none',
+                display: 'block',
+                fontSize: '28px',
+                width: '100%',
+              })}
+              math-virtual-keyboard-policy="manual"
+              onInput={(e) =>
+                onLatexChange(
+                  normalizeFracBraces(
+                    (e.target as MathfieldElement).getValue(
+                      'latex-without-placeholders',
+                    ),
+                  ),
+                )
+              }
+            />
+          )}
+          {!latex && (
+            <Text
+              color="$text"
+              opacity={0.5}
+              pointerEvents="none"
+              typography="braille"
+              whiteSpace="pre-line"
+            >
+              {placeholder}
+            </Text>
+          )}
+        </VStack>
+        <Text
+          color="$text"
+          fontFamily="monospace"
+          minH="1.5em"
+          opacity={0.7}
+          wordBreak="break-all"
+        >
+          {latex ? `LaTeX: $${latex}$` : 'LaTeX가 자동으로 생성됩니다'}
+        </Text>
+      </VStack>
+    </Flex>
+  )
+}

apps/landing/src/app/MathTransPanel.tsx

@@ -0,0 +1,54 @@
+'use client'
+import { VStack } from '@devup-ui/react'
+import { useEffect, useState } from 'react'
+
+import { DemoArrow } from './DemoArrow'
+import { MathTransInput } from './MathTransInput'
+import { TransInput } from './TransInput'
+
+/** 수식 입력 → 수학 점자 출력. 상태를 쥔 부분만 클라이언트로 분리한다. */
+export function MathTransPanel() {
+  const [latex, setLatex] = useState('')
+  const [translateToUnicode, setTranslateToUnicode] = useState<
+    (input: string) => string
+  >(() => () => '')
+  useEffect(() => {
+    import('braillify').then((mod) => {
+      setTranslateToUnicode(() => (input: string) => {
+        try {
+          return mod.translateToUnicode(input)
+        } catch (e) {
+          console.error(e)
+          return '점역할 수 없는 수식이 포함되어 있습니다.'
+        }
+      })
+    })
+  }, [])
+
+  const braille = latex.trim() ? translateToUnicode(`$${latex}$`) : ''
+
+  return (
+    <VStack
+      flexDirection={[null, null, null, 'row']}
+      gap={['12px', null, null, '30px']}
+      h={['auto', null, null, '500px']}
+      // 좌우 박스가 폭을 반씩 나누도록 호출부에서 분배한다. 화살표(가운데)는 제외.
+      selectors={{
+        '&>*:first-child, &>*:last-child': { flex: 1, minWidth: 0 },
+      }}
+    >
+      <MathTransInput
+        latex={latex}
+        onLatexChange={setLatex}
+        placeholder="수식을 입력하면 이곳에 수학 점자가 표시됩니다."
+      />
+      <DemoArrow />
+      <TransInput
+        blurPlaceholder="예: 사분의 삼 → ⠼⠙⠌⠼⠉"
+        focusPlaceholder="예: 사분의 삼 → ⠼⠙⠌⠼⠉"
+        readOnly
+        value={braille}
+      />
+    </VStack>
+  )
+}