feat: 랜딩 페이지에 MathLive 기반 수학 점역 데모 추가 및 한글·수학 탭 통합 - #177
Open
jessieyeon wants to merge 11 commits into
Open
Conversation
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- MathTransInput: 박스 전체 클릭 시 math-field 포커스(TransInput과 동일 동작) - readArg: 미종료 중괄호 내용 보존, 제어기호 인자 균형 유지 - DemoChrome: 한글·수학 데모 공통 헤딩/화살표 컴포넌트 추출 - DemoTabs: type=button, aria-controls, role=tabpanel, 좌우 화살표 키 이동 - MathTransInput: latex 상태를 부모에서 단일 관리(controlled), placeholder 흐름 배치로 매직 넘버 제거 - 입출력 박스를 동일 flex-basis 2단 구조로 맞춰 크기(498×500) 통일 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
owjs3901
requested changes
Jul 27, 2026
owjs3901
left a comment
owjs3901
left a comment
Contributor
There was a problem hiding this comment.
superpowers 를 gitignore에 추가요망
| alt="" | ||
| role="presentation" | ||
| src="/images/home/translate-arrow.svg" | ||
| transform={['rotate(0deg)', null, null, 'rotate(-90deg)']} |
Contributor
There was a problem hiding this comment.
rotate(0deg) 는 null이라도 관계 없지 않나요?
Author
There was a problem hiding this comment.
기능적인 의미는 없고, 원본 Trans.tsx의 구현 패턴을 따라 일관성을 유지하기 위해 작성했습니다. 다만 기능적으로는 null을 반환해도 동일한 동작이라, 말씀해 주신 대로 null로 변경하는 것이 더 나을까요?
| </DemoHeading> | ||
| <Flex | ||
| alignItems="center" | ||
| flexDirection={['column', null, null, 'row']} |
| minH="25dvh" | ||
| onClick={() => fieldRef.current?.focus()} | ||
| p={['16px', null, null, '40px']} | ||
| w="100%" |
Contributor
There was a problem hiding this comment.
이미 flex라서 w="100%"가 필요 없을거에요
| bg="$containerBackground" | ||
| borderRadius={['16px', null, null, '30px']} | ||
| cursor="text" | ||
| flexDirection="column" |
Comment on lines
+136
to
+143
| style={{ | ||
| background: 'transparent', | ||
| border: 'none', | ||
| display: 'block', | ||
| fontSize: '28px', | ||
| width: '100%', | ||
| }} | ||
| /> |
Contributor
There was a problem hiding this comment.
style 을 사용할 이유가 없습니다 css 를 사용하고나 as 를 사용해주세요
| <DemoHeading>직접 입력해 실시간 점자 번역을 체험해보세요!</DemoHeading> | ||
| <Flex | ||
| alignItems="center" | ||
| flexDirection={['column', null, null, 'row']} |
Comment on lines
+1
to
+6
| # 랜딩 데모 한글/수학 탭 통합 Implementation Plan | ||
|
|
||
| > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. | ||
|
|
||
| **Goal:** 홈페이지의 한글 점역 데모와 수학 점역 데모(두 개의 세로 섹션)를 '한글'/'수학' 탭 토글 하나로 통합하고, 수학 안내문을 왼쪽(입력창 placeholder)으로 옮기며, 입력·출력 박스 크기를 동일하게 맞춘다. | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
개요
랜딩 페이지에 수학 점역 체험 데모를 추가하고, 기존 한글 점역 데모와 함께 '한글' / '수학' 탭 토글 하나로 통합했습니다. 사용자는 MathLive 화면 수식 키보드로 수식을 WYSIWYG 편집하고, 자동 생성된 LaTeX가 실시간으로 한국 수학 점자로 변환되는 것을 체험할 수 있습니다.
주요 변경
수학 점역 데모
mathlive@^0.110.0도입, MathLive 폰트를public/mathlive/fonts/에 self-host (braillify의 "외부 연결 없이 실행" 원칙 유지 — CDN 미사용)MathTransInput— MathLive<math-field>웹 컴포넌트 래퍼. SSR 회피(동적 import), 데스크톱에서도 가상 수식 키보드 노출(manual정책), 언마운트 시 키보드 자동 닫힘$...$로 감싸 기존 braillify WASMtranslateToUnicode에 전달 — 코어 엔진(libs/braillify) 무수정한글·수학 탭 통합
DemoTabs— '한글'/'수학' 탭 토글(기본 '한글'). WAI-ARIAtablist/tab/tabpanel, 좌우 화살표 키 이동 지원DemoChrome— 한글·수학 데모가 공유하는 헤딩/화살표 컴포넌트 추출세부 보정
\frac정규화: MathLive의 중괄호 생략 직렬화(\frac34)를 braillify가 인식하는\frac{3}{4}정규형으로 변환. 미종료 중괄호·제어기호 인자도 안전하게 처리검증
bun run build통과, 기존 테스트 스위트 14,165개 전부 통과(회귀 없음)학교→⠚⠁⠈⠬), 수학 변환(x²+1→⠭⠘⠼⠃⠢⠼⠁,¾→⠼⠙⠌⠼⠉), 탭 전환/화살표 키 이동, 가상 키보드 열림·닫힘, 다크 테마 가독성, 폰트 로컬 서빙(404 없음)알려진 후속 작업 (이 PR 범위 밖)
\frac34을 직접 분수로 인식하도록 일반화 — 현재는 랜딩측normalizeFracBraces로 경계에서 처리. 엔진 수정은 별도 서브시스템(Rust + PDF 근거 테스트)이라 분리함.