[feat/MAT-585] 문제풀이 도구 toolbar New version + 디렉토리 분리#321
Draft
[feat/MAT-585] 문제풀이 도구 toolbar New version + 디렉토리 분리#321
Conversation
- ProblemDrawingToolbar: floating 캡슐 toolbar 신설. 펼침/축소 (229×62 / 62×62), Undo/Redo/Pen/Eraser, primary-200 selected. - 4 모서리 snap: 1초 long-press 후 drag. 3×3 zone 분할에서 모서리 zone 안 release 시에만 corner 변경, 그 외엔 원래 모서리로 복귀. - 자동 collapse: DrawingCanvas onStrokeStart 시 collapsed=true, collapsed 단일 버튼 탭으로 expand. - ProblemScreen: Header / BottomActionBar 사이 본문 wrapper 분리, toolbar overlay 영역 한정 (X 버튼·액션바 충돌 회피). - drawing.tsx: pan.onBegin stylus 진입 시점 onStrokeStart 호출 (textMode 분기 다음, 그리기 모드에서만 fire). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
6 tasks
Contributor
There was a problem hiding this comment.
Pull request overview
문제풀이 화면(ProblemScreen)에서 사용하던 기존 필기 도구 toolbar를 새 floating 캡슐형(toolbar new version)으로 교체하고, 필기 시작 시 자동으로 접히는 동작 및 4모서리 스냅 드래그 UX를 추가합니다. 변경은 ProblemScreen 레이아웃(overlay 영역 분리)과 DrawingCanvas에 onStrokeStart 콜백을 추가하는 방식으로 코드베이스에 자연스럽게 연결됩니다.
Changes:
ProblemDrawingToolbar를 새 스펙(229×62 / 62×62) 기반 floating 캡슐 UI로 교체하고, 1초 long-press 후 드래그 + 4-corner snap 동작을 구현ProblemScreen에서 toolbar overlay 영역을 본문 wrapper로 한정하고,onStrokeStart시 toolbar 자동 collapse 처리DrawingCanvas에onStrokeStart?: () => voidprop을 추가하고 stylus/mouse begin 시점에 트리거되도록 연결
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| apps/native/src/features/student/scrap/utils/skia/drawing.tsx | stylus/mouse stroke 시작 시점에 onStrokeStart를 호출할 수 있도록 prop 및 pan begin 로직 확장 |
| apps/native/src/features/student/problem/screens/ProblemScreen.tsx | 본문 wrapper(overlay 영역) 분리 + toolbar collapsed 상태/레이아웃 측정 + stroke 시작 시 자동 collapse 연결 |
| apps/native/src/features/student/problem/components/ProblemDrawingToolbar.tsx | 새 floating 캡슐 toolbar UI/애니메이션/제스처(롱프레스 드래그 & 코너 스냅) 구현 및 collapsed/expanded 렌더링 분기 추가 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- ProblemDrawingToolbar: snapToCorner nested ternary 를 vertical/horizontal 분리 + template literal cast 로 리팩토링 (unicorn/no-nested-ternary). - ProblemScreen: handleToolbarAreaLayout prettier 포매팅 정리. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- apps/native/src/features/student/problem/components/floating-toolbar/ - shared.tsx: 상수, Corner, ToolbarButton, ToolbarDivider, ColorSwatch, cornerXY - useFloatingToolbarSnap.ts: 1초 long-press + drag + 4-corner snap + opacity gate hook - ProblemDrawingToolbar.tsx: hook 사용 + initialCorner prop. 색상 prop 제거. - index.ts: 배럴 - ProblemScreen import 경로 갱신. - 기존 ProblemDrawingToolbar.tsx 삭제. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
b0nsu
changed the title
- useFloatingToolbarSnap: 첫 measure 시 isFirstMount ref 로 즉시 위치 set (spring 없이) → 좌상단→corner spring 비행 + opacity flash 둘 다 해결. - snapToCorner 분기: next === corner 면 직접 spring (effect 안 트리거되므로), next !== corner 면 setCorner 만 호출 (effect 가 spring 담당) → spring 중복 호출 제거. - ProblemDrawingToolbar: Animated.View 에 pointerEvents 게이트 추가 (measured 전 invisible 영역의 GestureDetector 가 터치 가로채지 않도록). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
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.
Summary
문제풀이(
ProblemScreen) 의 도구 toolbar 를 New version 으로 교체. Figma 6124:51953 spec 기준 펼침 / 축소 floating 캡슐, Undo/Redo + Pen/Eraser, 4 모서리 snap(1초 long-press + drag),DrawingCanvas.onStrokeStart시 자동 collapse. 후속으로 PointingScreen 도 같은 toolbar pattern 을 쓰게 되어floating-toolbar/디렉토리로 분리 + snap 로직 hook 추출.Linear
Changes
apps/native/src/features/student/problem/components/floating-toolbar/shared.tsx— 공유 상수 (BUTTON_SIZE / PADDING / GAP / SCREEN_MARGIN / SPRING / LONG_PRESS_MS / COLOR_* / TOOLBAR_H / SHADOW),Corner타입,cornerXYhelper, 공유 atom (ToolbarButton/ToolbarDivider/ColorSwatch).apps/native/src/features/student/problem/components/floating-toolbar/useFloatingToolbarSnap.ts— 1초 long-press + drag, 3×3 zone 모서리 snap, opacity gate 게이트 (측정 전 invisible). 입력:containerWidth/Height,toolbarWidth,initialCorner. 반환:composedGesture,animatedStyle,ready.apps/native/src/features/student/problem/components/floating-toolbar/ProblemDrawingToolbar.tsx— hook + shared 사용. Undo/Redo + divider + Pen/Eraser.initialCorner(default'bottom-left').apps/native/src/features/student/problem/components/floating-toolbar/index.ts— 배럴.apps/native/src/features/student/problem/screens/ProblemScreen.tsx— 본문 wrapper(flex-1) 분리, toolbar overlay 영역 한정 (X 버튼·액션바 충돌 회피).toolbarCollapsedstate,DrawingCanvas.onStrokeStart→collapsed=true. import 경로floating-toolbar/배럴로 갱신.apps/native/src/features/student/scrap/utils/skia/drawing.tsx—onStrokeStart콜백 prop 추가.pan.onBeginstylus 통과 후 호출. textMode 분기 다음에 두어 텍스트 모드에서는 fire 안 됨.ScreenShot
Testing
cd apps/native && pnpm exec prettier --check— cleancd apps/native && pnpm exec eslint— 0 errors (사전 존재 warning 만)cd apps/native && pnpm exec tsc --noEmit— 0 errorRisk / Impact
ProblemScreenbody layout,DrawingCanvas.onStrokeStartprop 추가.PointingDrawingToolbar를 같은 폴더에 추가하는 것을 전제로 하지만, 본 PR 자체는 ProblemScreen 만 사용 — mat-658 머지 전에도 안전하게 머지 가능.drawing.tsx6줄(prop +pan.onBegin호출) 을 새 패키지@repo/pointer-native-drawing의DrawingCanvasProps+useRnghPanAdapter.handleInteractionBegin안으로 옮기는 follow-up 필요.feat/MAT-658-pointing-drawing-toolbar([feat/MAT-658] 포인팅 화면 필기 toolbar 연결 #320) base 를 develop 으로 자동/수동 rebase.