Project (3) 썸네일형 리스트형 [React] 전역 상태 충돌과 복잡성 제어 여러 상태가 서로 영향을 미칠 때 어떻게 관리해야 할까?대규모 애플리케이션의 UI 레이아웃은 수많은 상태들의 유기적인 결합체이다. 이번 프로젝트에서 사이드바, 헤더의 뷰 모드, AI 프롬프트 창 등 서로 공간을 차지하는 UI 요소들을 전역으로 관리하는 작업을 맡았다.처음에는 각 상태를 useState로 선언하고 useEffect로 연결하면 될 줄 알았다. 하지만 "AI 창을 켜면 사이드바가 닫혀야 하는데, 다시 끄면 사이드바가 안 돌아와요./ 페이지 이동했더니 갑자기 사이드바가 닫혀버려요." 등의 문제가 발생했다. 심지어 useEffect가 서로를 트리거하며 무한 루프에 빠지는 상황까지 발생했다.디자인 시안문제 상황1.1. 요구사항: 유기적으로 반응하는 레이아웃기획팀의 요구사항은 단순한 ON/OFF가 아.. [Design System] 버튼 컴포넌트의 확장성 문제 디자인 시스템에서의 공통 컴포넌트는 뭘까? 이번 프로젝트에서 디자인 시스템을 구축하며 가장 먼저 마주한 과제는 바로 Button 컴포넌트였다.처음에는 단순하게 생각했다. 디자인 시스템이니까, 어디서든 가져다 쓸 수 있도록 공통적이고 확장성 있게 만들면 되는 거 아냐?하지만 막상 구현에 들어가니, 이 확장성이라는 단어가 주는 무게감은 상당했다. 나는 원래 해당 컴포넌트를 사용하는 팀원이 간편하게 import할 수 있도록 분기처리를 통해 구현했었다. 그런데 이번 프로젝트에서 개발 도중에도 사이즈, 색상, 테두리, 상태(Disabled/Hover)... 지원해야 할 옵션이 늘어날수록 경우의 수는 기하급수적으로 늘어났고, 모든 것을 지원하면서도 코드는 깔끔하게 유지해야 한다는 모순적인 상황에 빠지게 되었다.특히.. [React] 확장성 있는 Toggle UI 구현기: Compound Component Pattern 도입 그냥 Props로 넘기면 되는 거 아냐?프로젝트 진행 중 뷰 모드 전환(Card View ↔ Tree View) 기능을 위한 Toggle 컴포넌트 개발이 필요했다. 기획 요구사항은 단순해 보였지만, UI 디테일과 확장성을 고려했을 때 일반적인 방식으로는 한계가 있었다.단일 컴포넌트 구조에서 발생한 문제를 Compound Component Pattern(컴파운드 컴포넌트 패턴)으로 해결해 보았다.문제 상황1.1. 요구사항 분석다형성: 카드/트리 뷰 외에도, 향후 다크/라이트 모드 등 다양한 맥락에서 재사용 가능해야 함.애니메이션: 선택된 항목으로 배경 슬라이더가 부드럽게 이동해야 함 (transition).유연한 UI: 각 항목은 텍스트일 수도, 아이콘일 수도, 둘 다일 수도 있음.접근성: 스크린 리더가 .. 이전 1 다음
