[01.23] 리액트를 이용한 Task 생성 앱 만들기 4

2025.01.21 - [웹 개발 공부하기] - [01.20] 리액트를 이용한 Task 생성 앱 만들기

2025.01.27 - [웹 개발 공부하기] - [01.21] 리액트를 이용한 Task 생성 앱 만들기 2

2025.01.28 - [웹 개발 공부하기] - [01.22] 리액트를 이용한 Task 생성 앱 만들기 3

💥 Drag And Drop 기능

우선, DragDrop 기능을 위해 react-beautiful-dnd 라이브러리를 설치했었다.

하지만, 최근 React 버전이 바뀌게 되면서 새로운 오류들이 많이 나오고 있는 추세다.

그 중, 하나가 react-beautiful-dnd 도 포함이었는데, 구글링을 해보니,

react-beautiful-dnd 대신 @hello-pangea/dnd 를 많이 쓰는 걸 알게됐다.

동일한 기능을 제공하고, 구성 요소 이름을 변경하거나 다르게 구현할 필요가 없기 때문에 react-beautiful-dnd 사용하는 그대로,

사용할 수 있어서 좋다고 추천을 많이 하고 있었다.

그래서 나도 @hello-pangea/dnd 를 설치해서 사용하기로 했다.

 

우선, App.tsx에서 board 클래스 밑에 DragDropContext를 넣어준다.

물론, react-beautiful-dnd 또는 @hello-pangea-dnd 를 import 해주어야한다.

(보통 깔려있으면 알아서 import 된다. import가 자동으로 안 되면 라이브러리 설치를 제대로 했는 지 확인해보자.)

DragDropContext의 onDragEnd 이벤트를 보면 handleDragEnd 가 보일 것이다.

이건 아직 설정을 안 했기 때문에 Drag는 가능하지만 DragEnd의 기능은 되지 않을 것으로 판단된다.

그 다음은, List.tsx에서 전체 div코드를 Droppable로 감싸주어야 한다.

droppableId는 list의 listId로 설정해주고, 그 밑에 provided => ( 로 전체 코드를 감싸준다.

그리고 밑에를 보면 {provided.placeholder} 라는 코드가 있는데,

이는 DragDrop 기능을 좀 더 자연스럽게 해주기 위해 공간을 만들어주는 것이다.

그리고 마지막으로 Task.tsx 파일에서도

 Draggable, provided로 전체코드를 감싸준다.

그럼 이렇게 Task들을 Drag해서 원하는 List에 넣을 수 있게 된다.

지금은 DragEnd 기능을 완성해놓지 않았기 때문에 마우스를 떼면 본인 자리로 다시 돌아간다.

일단, Drag가 되는 지부터 보기 위해 스크린샷을 찍어왔다.

💥 DragEnd 기능 + sort 로직 생성

onDragEnd 이벤트의 handleDragEnd 코드이다.

boardsSlice에 sort 라는 것이 있는데 아직 이 sort 로직은 생성하지 않아서

역시나 drag 후 마우스를 떼면 다시 본인 자리로 돌아간다.

대신 addLog도 넣어놨기 때문에 옮기면 바로 활동로그가 찍힌다.

잘 동작하는 지 활동로그를 봐보겠다.

logMessage가 조금 복잡해 보였는데 이렇게 보니까 어떤 건지 정확히 알 것 같다.

이제 sort 로직을 생성해보겠다.

sort 로직은 같은 리스트에서 옮길 때, 다른 리스트에서 옮길 때 2가지의 방법을 위해

나누어서 로직을 짰다. // same list 와 //other list로 보면된다.

splice를 이용해서 변경시키는 아이템을 배열에서 지워주고 return 값으로 지워진 아이템을 잡아주었다.

그럼 이렇게 같은 list가 아니어도 다른 list에서도 옮길 수 있게 된다.

 

💥 Firebase 이용해서 로그인, 로그아웃 기능 구현하기

firebase 홈페이지에서 알려주는대로 firebase.ts 를 만들어서 해당 코드를 넣어준다.

app 변수는 외부에서도 사용할 예정이기 때문에 export를 꼭 해준다.

 

그리고나서, 로그아웃&로그인 아이콘 버튼에 onClick 이벤트를 넣어준다.

난 이렇게 handleLogIn과 handleLogOut 으로 만들어주었다.

해당 버튼의 onClick 이벤트에 넣어주면 된다.

로그인된 후엔 로그인 버튼이 안 보여야하고, 로그아웃 한 뒤엔 로그아웃 버튼이 안 보여야 하기 때문에

isAuth 로 분기처리를 해주었다.

isAuth엔 useAuth 함수를 넣어주었다.

그리고, 로그인 시에 redux store에 유저의 데이터를 넣기 위해

userSlice.ts도 따로 만들어 주었다.

이렇게 setUser와 removeUser로 나누어서, 로그인 시엔 해당 유저의 데이터를 저장해놓고,

로그아웃을 하게되면 해당 유저의 데이터를 ' ' 로 초기화 하게 만들었다.

그럼 이렇게 로그인 시엔, 로그인 팝업창이 뜨게된다!

나는 firebase에서 구글 로그인만 되게 하였다.

이렇게 로그인 후엔, 로그아웃 버튼만 보이는 걸 볼 수 있다.

 

배포까지 완료했다!

자꾸 버전문제로 충돌하는 것 같아서 결국 npm install --force로 하긴 했지만...

그래도 최종적으로는 배포가 완료됐다.

https://react-test-app-2-fe1dc.web.app/

Vite + React + TS

 

해당 사이트를 들어가면 만든 걸 볼 수가 있다 :)