✨ Feat: 스티커 선택박스로 드래그 이동, 리사이즈 - #56
Conversation
…resize # Conflicts: # apps/web/src/pages/board/ui/BoardCanvas.test.tsx # apps/web/src/pages/board/ui/BoardCanvas.tsx
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
퀵메뉴의 이름 변경하기 부분이 Html이냐 Konva냐에 따라 구현이 달라질 것 같아서 뱃지가 Konva로 바뀐 뒤에 그 위에서 편집 UI를 구현하는 게 이후 또 수정 안 해도 돼서 나을 것 같아요..!
뱃지 Konva 전환을 먼저 진행해주시면, 그 이후에 제가 편집 기능을 만들게요!
이 부분 고려해서 다른 기능(퀵메뉴) 먼저 구현하고 있겠습니다.
scale 0 관련해서는,
스티커가 scale 0이 될 때까지 줄어들어서 아예 안 보이게 되는 것보다는 최소 크기 정책이 꼭 있어야 할 것 같아요.
이후 테스트해보면서 적당한 크기까지만 줄어들도록 수정하는 방향도 좋아 보여요! 😊
수고하셨습니다~!
| const isEditMode = mode === 'move'; | ||
| // 편집 모드를 벗어나면 선택도 같이 해제된 것으로 취급 | ||
| const selectedId = isEditMode ? selectedStickerId : null; |
There was a problem hiding this comment.
스티커 선택한 채로 편집 모드로 나갔다가 다시 편집 모드로 돌아오면, 클릭 안 했는데 이전에 선택했던 스티커가 다시 선택된 상태로 보일 수 있을 것 같아요!
모드 벗어날 때 setSelectedStickerId(null)도 같이 호출해서 선택 해제되게 하는 건 어떨까요?
There was a problem hiding this comment.
고생하셨습니다!
동작이 좀 복잡해서 정책만 잘 세우면 코드는 금방 짤 것 같아요.
이 기능이 깔끔하게 동작하려면 어떤 것들이 필요할지 생각해보면 좋을 것 같습니다!
레이어 정책 / 뱃지 동작? (스티커와 독립인지 별개인지) / 저장 정책 등등.. 결정하면 좋을 것 같습니다.
일단 보드 편집 메뉴에 손가락 아이콘이 있는데 저는 이걸 눌러야 이제 드래그랑 크기조절이 가능했으면 좋겠어요. 해당 메뉴를 온오프 토글처럼 사용하는 느낌. 이러면 저장 시점도 명확해 질 것 같고요! 복구도 매우 쉬울 것 같습니다
여기서는 지금 범위인 리사이즈랑 레이어만 잘 잡고가는것이 좋아보이는데 어떠세요?
There was a problem hiding this comment.
서버 응답 전에 캐시 먼저 갱신하는데 실패했을 때 대응이 빠져있어요.
보드 쿼리 staletime이 55분이라 복구가 힘들 것 같단 점도 유의해야합니다.
실패 시 보드쿼리 무효화정도 넣어주면 좋을 것 같아요
There was a problem hiding this comment.
단순히 zindex 를 최대로 하는건 좀 빈약해 보입니다!
정책을 잘 잡아야 할 것 같은데 더 좋은 방법들이 있을 것 같아요.
선택한 스티커의 zindex 를 제일 크게 하는것을 유지한다면 스티커 개수만큼의 인덱스만 활용하되 가장 마지막에 터치한것을 제일 큰 인덱스로 교체하고, 나머지는 한칸씩 앞으로 당기는 방식 정도가 있을 것 같아요.
구현한다면 스티커 배열 자체를 인덱스 오더대로 짜는 느낌??
아무튼 깔끔한 정책이 필요해보입니다!
There was a problem hiding this comment.
말씀하신 방식 저도 구현 전에 검토했던 방식인데 지금 방식(최대+1)으로 간거는 아래 이유였습니다. 저도 고민돼서 클로드랑 대화했었거든요. 😂
- 선택한 스티커 하나만 갱신하면 돼서 쓰기 범위가 작고, 여러 스티커를 한꺼번에 재정렬하는 로직이 없어 동시 편집 시 레이스 컨디션 위험이 적음
- zIndex는 정렬 키로만 쓰여서 값이 촘촘할 필요가 없음. 계속 커져도실질적으로 문제가 안 되고, JS 숫자 범위상 오버플로 걱정도 없음
빈약해 보인다는 포인트가 값이 계속 커지는 것 자체라면, 정책이 없었다기보다는 쓰기 범위 최소화를 선택했다고 할 수 있습니닷..
바꾸는건 어렵지않을것같아서 그래도 바꾸는게 나을것같으면 바꿀게요!
There was a problem hiding this comment.
리사이즈와 회전을 나누어 취급할 필요가 있을까요? 어렵다면 그냥 합치는것도 나쁘지 않다 생각합니다!
There was a problem hiding this comment.
사실 제 구현방향이었던.... 코너 핸들 하나로 이 드래그가 리사이즈인지 회전인지 구분하려면 각도 추적·임계값·모드 전환 로직이 붙어서 꽤 복잡해질 것 같아 분리했었어요. (약간 굿노드 도형 회전 느낌)
근데 방금받은 스티커 동작 프로토타입보니까, 리사이즈/회전을 구분할 필요가 없어져서 말씀하신 방향대로 자연스럽게 합쳐질듯합니다.
이 pr에서 작업할지 뒤에 따로 작업할지 고민중.... 버리는 코드가 꽤 생겨가지고여
말씀하손가락 아이콘을 온오프 토글로 해서 그 모드에서만 드래그·리사이즈 가능한 구조는 이미 이렇게 되어 있어요! 틀바에서 손가락아이콘 모드일 때만 스티커가 draggable + 선택박스가 뜨고, 그 모드가 아니면 스티커를 탭해도 드래그 대신 Recap 화면으로 넘어갑니다. 저장 시점은 그 모드 안에서 드래그/리사이즈가 끝나는 시점에 일어나는데, 모드를 나갈 때 한 번에 몰아서 저장하면 사용자가 모드 안나가고 앱 나가거나 이탈할때 아무것도 저장 안될 것 같아서 그 모드 안에서 일어나는건 다 행위 끝나면 바로 저장요청가게 해놨어요. 그런 점에서 복구 용이성도 지금 방식이 더 좋은 것 같다고 생각은 하는데 요청을 너무 많이 보낼 수는 있을 것 같긴해요. 문제 있는것같으면 바꿔도 됩니다! |
좋습니다~ 하면서 개선해봐요 |
…resize # Conflicts: # apps/web/src/pages/board/BoardPage.tsx
|
이 pr 우선 머지 잠시 미루겠습니다.!! 지금까지 다 konva로 만들었고 뱃지까지 konva 전환할 생각이었는데, 혹시 급하게 머지 필요한 부분 있거나, 문제 있어 보이면 알려주세요! 참고로 나중에 붙일 드로잉 기능은 이 결정이랑 상관없이 캔버스를 유지하든 말든 어차피 별도의 캔버스 레이어로 가야 해서 문제 없습니다 |
3 participants
🔍 PR 요약
보드 편집 모드에서 스티커를 선택하면 선택박스가 뜨고, 드래그로 이동하거나 모서리를 드래그해 크기를 조절할 수 있게 함. 선택한 스티커는 항상 다른 스티커보다 위로 보이도록 zIndex를 올림.
🧾 관련 이슈
🧠 의도 및 배경
원래 이슈에는 핀치 제스처로 크기와 회전을 동시에 조정하는 걸로 돼 있었는데, 실제로 만들면서 한 제스처 안에서 리사이즈인지 회전인지 구분하는 로직이 꽤 복잡해질 것 같아서 범위를 나눴습니다. 이번 PR은 모서리 드래그로 리사이즈하는 것까지만 포함하고, 회전은 별도 이슈로 분리해서 이어서 진행할 예정입니다.
🛠️ 주요 변경 사항
리뷰어가 특히 봐줬으면 하는 부분 / 애매하거나 확인이 필요한 지점
제목뱃지 크기는 스티커를 리사이즈해도 같이 커지지 않음
제목뱃지가 다른 스티커의 사진보다 항상 위에 뜨는 문제가 있습니다
react-konva-utils의Html이 zIndex 값과 무관하게 항상 canvas보다 위에 그려지는 라이브러리 구조 때문입니😭 뱃지-뱃지 간, 뱃지-선택박스 간 순서는 zIndex로 맞췄는데, 뱃지-다른스티커의 사진 순서는 나중에 뱃지를 Konva 도형(Rect+Text)으로 바꿔야 완전히 해결되는데, 이건 별도 작업으로 분리할 예정입니다.@cchaeyoung 채영님이 작업 중인 퀵메뉴(제목변경) 기능이
StickerBadge/Sticker/SelectBox를 건드리는지 질문 들비니다. 건드린다면 뱃지 Konva 전환 작업과 충돌할 수 있어서, 그 경우엔 채영님 작업이 끝난 뒤에 제가 일괄 반영하는 쪽으로 조율하려고 합니다!리사이즈 최소/최대 크기 제한이 아직 없습니다(기획 미정).
🚨 트러블슈팅
Sticker와SelectBox가 같은 스티커의 이미지를 각자 따로 불러오고 있었는데, (SelectBox가 테두리를 스티커 사진 크기랑 똑같이 맞추는 데에 사용함)Sticker가 이미 불러온 이미지를 콜백으로 부모에 알려주고SelectBox가 그걸 재사용하도록 바꿔서 중복 로드를 없앰📸 스크린샷
2026-08-07.2.45.02.mov