feat: 랜딩 페이지에 MathLive 기반 수학 점역 데모 추가 및 한글·수학 탭 통합 - #177
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
left a comment
owjs3901
left a comment
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)']} |
There was a problem hiding this comment.
rotate(0deg) 는 null이라도 관계 없지 않나요?
There was a problem hiding this comment.
기능적인 의미는 없고, 원본 Trans.tsx의 구현 패턴을 따라 일관성을 유지하기 위해 작성했습니다. 다만 기능적으로는 null을 반환해도 동일한 동작이라, 말씀해 주신 대로 null로 변경하겠습니다.
| </DemoHeading> | ||
| <Flex | ||
| alignItems="center" | ||
| flexDirection={['column', null, null, 'row']} |
There was a problem hiding this comment.
Flex → VStack 제안 관련 의견입니다.
확인해보니 이 컨테이너는 수학 점역 데모를 추가하기 이전, 즉 main 기준에서도 원래 Flex로 되어 있었습니다 (Trans.tsx). 입력창과 결과창이 데스크톱에서는 가로로 나란히 놓여야 해서 flexDirection={['column', null, null, 'row']}(모바일 세로 / 데스크톱 가로)을 사용한 것으로 보입니다.
그래서 이 컨테이너를 VStack으로 바꾸더라도 flexDirection은 그대로 남게 됩니다. VStack을 적용하는 방식은 크게 세 가지가 있을 것 같습니다.
- 레이아웃을 항상 세로로 변경 — 데스크톱에서도 입력창·결과창을 세로로 쌓는 방식입니다. VStack의 이름과 동작이 일치하게 되지만, 데스크톱의 좌우 배치를 포기하는 디자인 변경이 됩니다.
- 모바일용 VStack + 데스크톱용 가로 컨테이너 분기 — 두 레이아웃을 각각 두고 화면 크기에 따라 display로 전환하는 방식입니다. 다만 입력창·화살표·결과창 서브트리를 중복 작성해야 하고, devup-ui에는 HStack이 없어 가로 쪽은 어차피 Flex를 쓰게 됩니다.
- flexDirection 유지 — 동작은 지금처럼(데스크톱 가로) 유지하면서 컴포넌트만 VStack으로 쓰는 방식입니다. 화면 결과는 동일하지만, "항상 세로"를 뜻하는 VStack이 데스크톱에서는 가로로 동작하게 되어 이름과 실제 동작이 어긋난다는 단점이 있습니다.
세 방법 모두 트레이드오프가 있어, 방향이 브레이크포인트마다 바뀌는 이 컨테이너에는 이름이 동작과 정직하게 맞는 Flex가 가장 적절하다고 생각합니다. 어떤 방향으로 갈지 의견 주시면 반영하겠습니다.
There was a problem hiding this comment.
우선 심도있게 고민해주셔서 감사합니다
다만 본 피드백은 매우 가벼운 피드백입니다
VStack을 쓰면
felxDirection={[null,null,null,'row']} 로 쓸 수 있습니다.
맨 앞의 column을 제거하기 위한 피드백입니다
| minH="25dvh" | ||
| onClick={() => fieldRef.current?.focus()} | ||
| p={['16px', null, null, '40px']} | ||
| w="100%" |
There was a problem hiding this comment.
이미 flex라서 w="100%"가 필요 없을거에요
| bg="$containerBackground" | ||
| borderRadius={['16px', null, null, '30px']} | ||
| cursor="text" | ||
| flexDirection="column" |
| style={{ | ||
| background: 'transparent', | ||
| border: 'none', | ||
| display: 'block', | ||
| fontSize: '28px', | ||
| width: '100%', | ||
| }} | ||
| /> |
There was a problem hiding this comment.
style 을 사용할 이유가 없습니다 css 를 사용하고나 as 를 사용해주세요
| <DemoHeading>직접 입력해 실시간 점자 번역을 체험해보세요!</DemoHeading> | ||
| <Flex | ||
| alignItems="center" | ||
| flexDirection={['column', null, null, 'row']} |
| # 랜딩 데모 한글/수학 탭 통합 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)으로 옮기며, 입력·출력 박스 크기를 동일하게 맞춘다. | ||
|
|
2 participants
개요
랜딩 페이지에 수학 점역 체험 데모를 추가하고, 기존 한글 점역 데모와 함께 '한글' / '수학' 탭 토글 하나로 통합했습니다. 사용자는 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 근거 테스트)이라 분리함.