[FEAT-4] 전형 상세 선택지 가로 드래깅 구현

[qwer0114]

📝 PR 내용

수시,정시, 편입 상세 전형 중 수시, 정시 상세 전형 선택에 PC 에서도 모바일과 동일한 사용자 경험을 주도록 드래깅 스크롤이 가능하도록 구현하였습니다

✅ 작업 내용

DraggableScroller 컴포넌트를 통해 기존 메뉴 컴포넌트들을 감싸면 드래깅을 통해 스크롤이 가능합니다

<DraggableScroller>
          {data.map((option) => (
            <MenuList key={option.label}>
              <MenuList.Title title={`${option.label}전형`} />
              {option.children.map((menu) => (
                <TextMenu label={menu} key={menu} onClick={() => selectCategory(menu)} />
              ))}
            </MenuList>
          ))}
 </DraggableScroller>

현재 위와 같이 사용하고 있습니다

useDraggable 커스텀 훅을 통해 드래깅에 필요한 이벤트 리스너 함수들과 상태들을 분리했습니다.

📸 스크린 샷 / 영상 (선택

🤔 고민 했던 부분 (선택)

• 문제: 드래깅 스크롤 구현 후 드래깅이 모바일 환경과 달리 툭툭 끊기는 듯한 경험이 있었습니다

• 해결: 모바일 스크롤에는 관성을 적용하여 부드러운 사용자 경험을 준다는 사실을 확인하고 동일한 사용자 경험을 위해 관성 스크롤을 적용해보았습니다.

  자세한 해결 경험 및 코드 설명은 저희 노션 트러블 슈팅 문서에 작성해 두었으니 꼭 참고 부탁드립니다!

🔗 연관 이슈

• Closes [FEAT] - 상세 전형 선택 가로 드래깅 구현 #4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
maru-egg-fe-v2-client	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 3, 2025 1:33pm

[github-actions]

🚀 Storybook 링크: https://6789e91d8356b60e6b422469-bynqhjbabp.chromatic.com/

[swgvenghy]

고생하셨습니다!!