Turbo Frame

상황: Turbo Frame 탭 UI에서 빈 페이지 Rails 8에서 인터뷰 빌더를 만들고 있었다. 하나의 페이지 안에 “내 인터뷰 작성”, “전체 갤러리”, “인터뷰 결과” 같은 탭을 두고, 탭을 클릭하면 콘텐츠 영역만 바뀌는 SPA 느낌의 UI였다. 구조는 이랬다: <%# interview_app/show.html.erb — 탭 셸 %> <nav> <button onclick="switchTab('wizard')">내 인터뷰</button> <button onclick="switchTab('gallery')">갤러리</button> <button onclick="switchTab('result')">결과</button> </nav> <turbo-frame id="interview-rails-content" src="/interviews/wizard" loading="lazy"> <p>로딩 중...</p> </turbo-frame> 탭을 클릭하면 JavaScript로 railsFrame.src를 바꿔서 콘텐츠를 교체한다. wizard, gallery, show 세 뷰 모두 같은 turbo_frame_tag "interview-rails-content"로 감싸져 있어서 frame ID가 매칭되고, 콘텐츠가 자연스럽게 스왑된다. ...

스포츠 대회 관리 앱의 대시보드에 두 가지 기능을 추가하는 작업이었다. 카드 순서 DnD 변경 — 내 경기 / 대진표 / 경기 목록 카드를 원하는 순서로 재배치 카드 접기/펼치기 — 관심 없는 섹션을 접어 화면을 간결하게 각각은 단순해 보이지만, Turbo Frame lazy loading과 함께 동작해야 하고, 새로고침 후에도 상태가 유지되어야 한다는 조건이 붙으면 신경 쓸 게 늘어난다. 1. DnD 라이브러리 선택 처음에는 native HTML5 Drag & Drop API로 직접 구현했다. dragstart, dragover, drop 이벤트를 다 붙이고 DOM 조작으로 순서를 바꾸는 방식인데, 실제로 동작하게 만드는 건 어렵지 않다. ...