Repository navigation
[fix] 카드 탭 지연을 없애고 버튼 hover가 터치 누름 피드백을 덮지 않게 한다 - #2259
Open
seongwon030 wants to merge 2 commits into
Open
seongwon030 wants to merge 2 commits into
seongwon030 wants to merge 2 commits into
Conversation
- handleClick이 $isClicked로 카드를 scale(1.05)로 키운 뒤 setTimeout 150ms가 지나야 이동해서, 탭할 때마다 반응이 늦고 :active 축소와 반대로 커졌다 - 지연과 $isClicked 상태를 지우고 트래킹 직후 이동한다. hover scale(1.03)·:active scale(0.98)은 그대로 둔다
- 터치 기기는 첫 탭에 :hover를 적용해서, animated 버튼은 탭할 때마다 pulse 애니메이션이 돌며 :active의 scale(0.95)를 덮고 배경색도 hover 색으로 남았다 - hover 블록을 @media (hover: hover)로 감싼다
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 21 minutes. View limit details
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Claude finished @seongwon030's task in 26s —— View job harry 리뷰 총평리뷰 기준에 걸리는 부분이 없어서 통과예요. 👍
참고로 Playwright로 수정 전후 수치를 비교하고, 실기기 체감은 확인하지 못했다고 적어 둔 점도 좋았어요. |
![diboreview-e2e-bot[bot]](https://avatars.githubusercontent.com/in/5274969?s=60&v=4){kind=small}
🎨 UI 변경사항을 확인해주세요
3개 스토리 변경 · 전체 193개 스토리 · 67개 컴포넌트 |
This branch was successfully deployed
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.
Close #2258
문제
탭했을 때 반응이 늦거나 누를 때의 피드백이 가려지는 곳이 두 군데 있다.
ClubCard:handleClick이 카드를scale(1.05)로 키우고setTimeout150ms가 지난 뒤에 이동한다. 메인·구독 목록에서 가장 자주 누르는 요소인데 매번 늦게 반응하고, 누르는 동안의:active(0.98 축소)와 반대로 커진다Button: 터치 기기는 첫 탭에:hover를 적용한다. 그래서animated버튼은 탭할 때마다 0.4초 pulse가 돌며:active의scale(0.95)를 덮고, 배경도 hover 색으로 남는다해결
ClubCard: 150ms 지연과$isClicked상태를 지우고, 트래킹 직후 바로 이동한다. hoverscale(1.03)과:activescale(0.98)은 그대로 둔다Button: hover 블록을@media (hover: hover)로 감싼다(#2255와 같은 방식)검증
Playwright로 수정 전후를 비교했다.
Button강제:hover배경, 데스크톱rgb(75,75,75)rgb(75,75,75)Button강제:hover배경, iPhone 13 에뮬rgb(75,75,75)rgb(58,58,58)(기본색)typecheck·eslint 통과,--findRelatedTestsjest 7개 스위트(49개) 통과animated버튼은 관리자 화면에만 있어 직접 띄우지 않았다영향 범위
Button을 쓰는 학생·관리자 화면 전부: 데스크톱 hover는 그대로이고, 터치에서는 탭한 뒤 hover 배경과 pulse가 남지 않는다.styled(Button)로 확장한Filter·SocialLoginButton등이 따로 건 hover는 바뀌지 않는다