feat: useDraggable 훅 생성

[tkyoun0421]

개요

ProjectCard 컴포넌트의 UI/UX를 대폭 개선하고, 재사용 가능한 드래그 스크롤 기능을 구현했습니다. 사용자 경험을 향상시키기 위해 현대적인 디자인과 인터랙티브한 기능들을 추가하고, 컴포넌트 재사용성을 크게 향상시켰습니다.

변경 사항

• 새로운 기능 추가
• 버그 수정
• 리팩토링
• 문서 수정

구현 내용

• ProjectCard 컴포넌트 완전 리뉴얼

  • Material-UI theme.ts에 맞춘 일관된 디자인 시스템 적용
  • 호버 효과와 부드러운 애니메이션 추가 (translateY, 그림자 효과)
  • 카드 최대 크기 제한으로 단일 카드 시 과도한 확장 방지
  • 지원자 수 표시 기능 추가

• DragScrollContainer 래퍼 컴포넌트 구현

  • 재사용 가능한 드래그 스크롤 컨테이너 컴포넌트 생성
  • children만 전달하면 자동으로 드래그 스크롤 기능 적용
  • 우측 fade-out 그라디언트 자동 생성
  • 간단한 API로 어디서든 쉽게 사용 가능

• useDraggable 훅 드래그 동작 개선

  • 드래그 민감도 최적화 (2배 → 1.5배)
  • 드래그 중 텍스트 선택 방지 및 커서 변경
  • 드래그 후 클릭 이벤트 방지로 의도치 않은 동작 차단
  • useCallback 활용한 성능 최적화
  • 브라우저 호환성 개선 (passive: false 옵션 추가)

• 코드 구조 개선 및 리팩토링

  • 중복된 스타일 컴포넌트 제거 (TechStackContainer, TechStackSection)
  • 컴포넌트 간 관심사 분리 및 단일 책임 원칙 적용
  • 타입 안정성 향상 (ReactNode 타입 사용)

• 사용자 프로필 컴포넌트 추가

  • UserProfileAvatar, UserProfileWithNamePosition 컴포넌트 생성
  • 반응형 디자인에 따른 조건부 렌더링 구현

• 스타일링 최적화

  • CSS-in-JS 최적화 및 성능 개선
  • 일관된 색상 팔레트 및 타이포그래피 적용
  • 반응형 breakpoints 활용한 적응형 디자인

개발 후기 및 개선사항

이번 작업에서 배운 점

• Material-UI의 styled-components와 theme 시스템을 활용한 체계적인 디자인 구현 방법
• 마우스 드래그 이벤트를 활용한 커스텀 스크롤 인터랙션 구현 기법
• React hooks를 활용한 로직 분리와 재사용성 향상 방법
• 래퍼 컴포넌트 패턴을 통한 복잡한 기능의 추상화 및 재사용성 극대화

어려웠던 점 / 에로사항

• 전체 영역에서 드래그 스크롤이 작동하도록 하는 UX 최적화 과정
• 드래그와 클릭 이벤트 충돌 방지 로직 구현
• 다양한 디바이스(데스크톱, 태블릿, 모바일)에서 일관된 사용자 경험 제공
• CSS 스크롤바 숨김 처리 시 브라우저별 호환성 고려
• TypeScript 타입 에러 해결 과정에서의 컴포넌트 구조 재설계

다음에 개선하고 싶은 점

• 기술 스택이 매우 많을 때의 성능 최적화 (가상화 고려)
• 드래그 스크롤 시 관성 스크롤 효과 추가
• 접근성(a11y) 개선 - 키보드 네비게이션 지원
• DragScrollContainer의 스크롤 방향 옵션 추가 (세로 스크롤 지원)

팀원들과 공유하고 싶은 팁

• DragScrollContainer 활용: <DragScrollContainer>{children}</DragScrollContainer> 형태로 간단히 드래그 스크롤 기능 적용 가능
• useDraggable 훅 직접 사용: 더 세밀한 제어가 필요한 경우 훅을 직접 사용하여 커스터마이징 가능
• theme.spacing() 활용: rem 단위 기반의 일관된 간격 시스템 사용으로 디자인 일관성 확보
• 컴포넌트 추상화: 복잡한 로직을 래퍼 컴포넌트로 추상화하면 재사용성과 유지보수성이 크게 향상됨

[czmcm5]

와 정말 빠르세요 고생하셨습니다!

[czmcm5]

제가 놓친 부분이 있었나보군요! 등록 api에 추가하도록 하겠습니다.

[tkyoun0421]

스탠딩 미팅에서 같이 맞춰봐야 할 것 같아요!

[czmcm5]

좋습니다~

[namee-h]

고생하셨어용 ! 👏🏻