UI Component 개발

리액트에서 마퀴를 구현할 상황이 생겨서 간단하게 구현해보았다. 내가 원하는 효과는 다음과 같았다.오른쪽에서 왼쪽으로 흘러가는 마퀴일정한 간격을 두고 반복되는 텍스트가 등장뒤따라오는 텍스트가 맨 왼쪽에 다다르면 3초간 인터벌다시 애니메이션필요한 package들은 다음과

리액트에서 음악 재생바를 만들 일이 있어서 만들어 보았다. 은근 신경써야 할 부분들이 많아서 재밌었던 개발! 일단 슥슥 생각나는 대로 작성한 거라 코드가 꽤나 많이 복잡하다. 코드는 정리해서 따로 올려보도록 해야겠다. 개발 포인트 보기엔 쉬워보였는데 디테일한 UX

저번 포스팅에서는 전체적으로 어떤 부분이 포인트가 됐는지를 짚었다면, 이번 포스팅에서는 실제 코드를 보면서 짚어보자.물론,, 지금 만든 코드가 그렇게 만족스럽지는 않다. 나는 이 컴포넌트를 uncontrolled component로 만들고 싶었지만 뭔가 그렇게 만들 수

이번엔 토글 버튼을 만들어 보려고 한다. 토글 버튼이라고 해야할진 모르겠지만 머.. 둘 중 하나의 상태를 왔다갔다 하는 거니까 ^_^ 초기 버전 Framer Motion LayoutId 버튼을 클릭하면 뒷 배경이 왔다갔다 하는 효과를 볼 수 있다. 이것은 fr

Bottom Sheet? Drawer? 부르는 명칭이 정확하진 않지만 머 여튼 이런 식으로 하단에 위치해있고, 드래그를 하면 추가적인 정보를 확인할 수 있는 UI를 일컫는다. 보통 모바일 앱에서 많이 사용하는 UI! 이번에도 역시 많은 삽질을 했다 ... 😇 차

Framer motion의 Reorder를 이용해서 순서를 바꿀 수 있는 ListItem이면서, 옆으로 슬라이드 하면 Delete Button이 나타나는 UI Component를 만들어보려고 한다. 슬라이드라는 말보다 적확한 말로 표현하고 싶은데,, 이런 UI는 기능

이런 식의 UI Component를 무어라 부르는지 모르겠지만,, 찾아보니 Long Press (Context) Menu가 제일 비슷한 것 같고, 짧게는 Pressable Component라고 하는 것 같다! (React-native 에선 그러던데)그러므로 구현해보는

이전 포스트에서 Long Press Menu를 구현해보았다. 그런데,, 실제로 써먹으려고 하니까 좀 <span style="color:현재는 이 두 개가 같이 엮여서 구현되어 있는데, 이는 유연성을 가지지 못한다.TriggerButton과 ContextMenu가

Tab Component를 만들어보자

이전 포스트에서 중첩된 상태에서의 컴포넌트 드래그를 구현했었는데, 막상 사용하려고 보니 한 케이스를 생각하지 못했다. 바로 같은 축을 가지는 중첩 상태가 있는 것. 그러니까, 부모도 Y 드래그고 자식도 Y 드래그인 상태를 생각하지 못했다(...) 하지만 뭐 그렇다

겹쳐져 있는 상태의 드래그 컴포넌트를 다뤄야 할 상황이 생겼다. 좀 더 구체적으로는 다음과 같은 상황이다.콘텐츠 영역 안에 가로로 드래그가 가능한 컴포넌트가 존재하고, 그 위로는 세로로 드래그가 가능한 부모가 존재하는 상황이다. 예를 들면 인스타그램과 같은 느낌! 피드