[TIL] Week 13 리액트로 Task 생성 앱 만들기 4

👆🏻 Drag And Drop 기능 구현

🚨 강사님께서는 `react-beautiful-dnd`를 사용하셨지만 해당 라이브러리는 유지보수 중단된 라이브러리로 현재 리액트 버전과 맞지 않아 에러가 발생해 같은 기능을 제공하는 `@hello-pangea/dnd`를 사용했다.

GitHub - hello-pangea/dnd: 💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!

• 설치 `npm install @hello-pangea/dnd`

 

구조

• `<DragDropContext />`
  
  • 드래그드랍 기능을 사용하고 싶은 부분을 감싸주는 태그 
  • 사용 시 `onDragEnd` 필요
• `<Droppable />`
  • 드래그해서 드랍할 부분을 감싸주는 태그
  • 사용 시 `droppableId`필요
• `<Draggable />`
  • 드래그할 아이템을 감싸주는 태그
  • 사용 시 `draggableId`와 `index` 필요
• `provided.placeholder`
  • 드래그 작업이 자연스럽게 느껴지도록 추가 

 

task 앱에 적용해보기

// App.tsx
<div className={board}>
  <DragDropContext onDragEnd={handleDragEnd}>
    <ListContainer lists = {lists} boardId={getActiveBoard.boardId}/>
  </DragDropContext>
</div>

// List.tsx
return (
    <Droppable droppableId={list.listId}>
      {provided => (
        <div 
          {...provided.droppableProps}
          ref={provided.innerRef}
          className={listWrapper}
        >
          //...
          {provided.placeholder}
          // ...
        </div>
      )}
    </Droppable>
  )
  
  // Task.tsx
  return (
    <Draggable draggableId={id} index={index}>
      {provided => (
        <div 
          className={container}
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <div className={title}>{taskName}</div>
          <div className={description}>{taskDescription}</div>
        </div>
      )}
    </Draggable>
  )

먼저 라이브러리의 컴포넌트로 영역을 잡아주었다.
 

sort: (state, {payload}: PayloadAction<TSortAction>) => {
    // same list
    if(payload.droppableIdStart === payload.droppableIdEnd) {
        const list = state.boardArray[payload.boardIndex].lists.find(
            list => list.listId === payload.droppableIdStart
        )

        // 변경시키는 아이템을 배열에서 지워줌
        // return 값으로 지워진 아이템 잡아줌 
        const card = list?.tasks.splice(payload.droppableIndexStart, 1);
        list?.tasks.splice(payload.droppableIndexEnd, 0, ...card!);
    }

    // other list
    if(payload.droppableIdStart !== payload.droppableIdEnd) {
        const listStart = state.boardArray[payload.boardIndex].lists.find(
            list => list.listId === payload.droppableIdStart
        )

        const card = listStart?.tasks.splice(payload.droppableIndexStart, 1);
        const listEnd = state.boardArray[payload.boardIndex].lists.find(
            list => list.listId === payload.droppableIdEnd
        )
        listEnd?.tasks.splice(payload.droppableIndexEnd, 0, ...card!);
    }
}

드랍되었을 때 처리될 액션을 정의해 주었다.
같은 리스트안에서 드랍되었다면 순서를 바꿔주고
다른 리스트로 옮겨졌다면 해당 위치의 인덱스에 추가하도록 해주었다.
 
여기서 `...card!` 느낌표를 붙여준 이유는 undefined에 대한 에러가 발생해 undefined가 없다고 명시해준 것이다.
 

const handleDragEnd = (result: any) => {
    const {destination, source, draggableId} = result;

    const sourceList = lists.filter(
      list => list.listId === source.droppableId
    )[0];

    dispatch(
      sort({
        boardIndex: boards.findIndex(board => board.boardId === activeBoardId),
        draggableIdStart: source.droppableId,
        droppableIdEnd: destination.droppableId,
        droppableIndexStart: source.index,
        droppableIndexEnd: destination.index,
        draggableId
      })
    )

    dispatch(
      addLog({
        logId: v4(),
        logMessage: `
          리스트 "${sourceList.listName}"에서
          리스트 "${lists.filter(list=>list.listId === destination.droppableId)[0].listName}으로
          ${sourceList.tasks.filter(task => task.taskId === draggableId)[0].taskName}을 옮김.
          `,
        logAuthor: "User",
        logTimestamp: String(Date.now())
      })
    )
  }

마지막으로 onDragEnd에 넣어줄 메소드에 해당 액션을 추가해주면 완성

 

🗝️ 로그인 & 로그아웃

Firebase | Google's Mobile and Web App Development Platform

파이어베이스를 통해 구글 로그인을 구현하려 한다.

우측 상단 `Go to console`로 들어가 파이어베이스 프로젝트를 생성한다.

자신의 프로젝트에 맞는 플랫폼으로 추가해주면 된다.
나는 리액트 웹이기 때문에 웹에 추가하기로 진행했다.

 

그 후 안내에 나오는 대로 SDK를 설치해준 후
`src/firebase.ts`에 위 코드를 추가해줬다.

`app` 객체를 다른 파일에서 사용하기 위해 export만 추가해주었다.

로그인 기능을 구현하기 위해 파이어베이스에서 인증 설정을 해줘야 한다.

다양한 방식을 선택할 수 있는데 우선 구글로 진행했다.

import { getAuth, GoogleAuthProvider, signInWithPopup } from 'firebase/auth'
import { app } from '../../firebase'

const auth = getAuth(app);
const provider = new GoogleAuthProvider();

const handleLogin = () => {
    signInWithPopup(auth, provider) // 팝업으로 로그인창 띄움 
    .then(userCredential => { // userCredential : 로그인한 유저 정보가 담김
      console.log(userCredential);
    })
  }

앞서 설치한 파이어베이스 SDK를 통해 팝업창으로 구글 로그인이 진행되도록 하였다.

콘솔로 확인해보면 로그인한 계정의 정보가 잘 받아져 오는 것을 볼 수 있다.
이제 이 안의 user에 있는 정보를 store에 저장해야 한다.

// userSlice.tsx
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    email: '',
    id: ''
}

const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        setUser: (state, action) => {
            state.email = action.payload.email;
            state.id = action.payload.id;
        }
    }
})

export const {setUser} = userSlice.actions;
export const userReducer = userSlice.reducer;

// BoardLisr.tsx
const handleLogin = () => {
    signInWithPopup(auth, provider)
    .then(userCredential => {
      console.log(userCredential);
      dispatch(
        setUser({
          email: userCredential.user.email,
          id: userCredential.user.uid
        })
      )
    })
    .catch(error => {
      console.log(error);
    })
  }

기본값은 빈 문자열로 두고 로그인할 때 이메일과 id값을 추가해주도록 했다.

// userSlice.ts
removeUser: (state) => {
            state.email = '';
            state.id = '';
        }

로그아웃은 반대로 다시 빈 문자열로 전환시킨다.

마지막으로 로그인 여부에 따라 버튼을 다르게 보여주기 위해 훅 하나를 추가한다.

import { useTypedSelector } from "./redux"

export function useAuth() {

    const { id, email } = useTypedSelector((state) => state.user);

    return {
        isAuth: !!email,
        email,
        id
    }
}

email에 값이 존재하면 isAuth를 true로 설정해 로그인한 상태임을 나타낸다.

const { isAuth } = useAuth();

const handleSignOut = () => {
    signOut(auth)
    .then(() => {
      dispatch(
        removeUser()
      )
    })
    .catch(error => {
      console.log(error);
    })
  }
  
return (
	{isAuth ?
    <GoSignOut className={addButton} onClick={handleSignOut}/>
    :
    <GoSignIn className={addButton} onClick={handleLogin}/>
  }
)

이제 isAuth에 따라 로그인 버튼과 로그아웃 버튼이 구분된다.

🌐 배포하기

배포역시 파이어베이스를 이용한다.

먼저 깃허브에 코드를 모두 올려준 후 터미널에서 `npm install -g firebase-tools`를 설치해준다.

`firebase login`으로 로그인을 해주고 배포를 위한 빌드파일을 만들기 위해 `npm run build`을 진행한다.

dist파일이 생성되었으면 빌드 준비 완료

 

이제 파이어베이스로 배포하기 위해 `firebase init`을 한다.

나오는 질문에 대해 위처럼 답해주면 된다.

 

두번째 질문에서 선택하는 것이 있는데 스페이스바로 선택을 한 후 엔터를 눌러야한다.

(여기서 계속 엔터누르다가 5번을 다시 했다 ..ㅎ)

 

설정을 다 해준 후 커밋, 푸쉬를 ㅡ진행하면 

깃허브 액션에 자동으로 올라가있다.

 

그런데 처음에 에러가 발생해서 보니

` .github\workflows\firebase-hosting-merge.yml`과 ` firebase-hosting-pull-request.yml` 파일에 

` - run: npm install && npm run build`이 빠져있었다. 

추가 후 다시 커밋, 푸쉬진행해보니

 

Vite + React + TS

 

성공 !