/wanted-codestates-project-6-3

듀얼 셀렉터

Primary LanguageJavaScript

[Project 2] 로그프레소 - 듀얼셀렉터

🔗 배포 주소


⚙개발 환경


📝명세 분석

https://www.notion.so/2-64f4df5cb2014f8d909b654bb278b06a#7ed777bad004420a84efcaa95126e0bf


🧑 참여 멤버

  • 손한빈: 전체 스타일 구현 및 리팩토링
  • 김도연 : 아이템 순서 이동 구현
  • 정규용: 아이템 순서 이동 구현
  • 유혜정: 소메뉴 기능 구현
  • 유지수 : 아이템 이동 버튼 및 다중 선택 구현
  • 박세은 : 아이템 이동 버튼 구현

🕹 설치 및 시작방법

# install dependencies
 $ npm install

# serve with hot reload at localhost:3000
 $ npm start

🖥️ 구현 목록

📌 아이템 순서 이동

  • 드래그앤드롭으로 아이템의 순서 변경

순서이동

📌 다중 선택

  • Shift키를 누르면 시작부터 끝까지 선택됨
  • Ctrl키를 누르면 동시에 다중 선택 가능

다중선택

📌 아이템 이동버튼

  • 초기화
  • 모든 아이템 이동
  • 선택된 아이템만 이동

아이템이동

📌 검색

  • 엔터를 누르면 텍스트가 포함된 모든 아이템을 나열

검색기능

📌 소메뉴

  • 타이틀 제목 수정
  • 하나씩만 옮기기 → 다중선택 불가
  • 아이템 크기 조절
  • 영역 크기 조절

소메뉴


🗂 프로젝트 구조

📁src
│  App.js
│  constances.js
│  index.css
│  index.js
│  
├─📁components
│	│ Button.js
│	│ Input.js
│	│ ListItem.js
│	│ Popover.js
│	│ Radio.js
│	│ Selector.js
│	│ Setting.js
│	│ StackedList.js
│       │ Title.js
│       └─Toggle.js
│              └─📁icons
│
├─📁hooks
│      useDragAndDrop.js
│
└─📁utils
	moveItems.js