🎯 @vanilla-extract/css 라이브러리와 redux를 활용하여 Trello 화면을 구현합니다.

📗 Today I Learned

Trello 화면

• 상단: 현재 선택된 Board의 List 목록이 가로로 나열되어 있습니다. 각 리스트에는 Task 카드가 포함되어 있으며, 리스트와 카드의 추가 및 수정이 가능합니다.

  • 게시판 추가: 오른쪽 맨 위에 있는 버튼+을 클릭하면 새로운 보드가 추가됩니다.

  • 리스트 추가: + 새로운 리스트 등록 버튼을 누르면 새 리스트를 생성할 수 있습니다.

  • 작업 추가: 리스트 안의 + 새로운 일 등록 버튼을 누르면 Task를 추가할 수 있습니다.

• 하단: 이 게시판 삭제하기 버튼과 활동 목록 보이기 버튼이 있습니다.

  • 보드 삭제: 현재 선택된 Board를 삭제할 수 있습니다. (최소 1개의 게시판은 유지)

  • 활동 로그 확인: 삭제, 추가, 수정 등의 로그들이 기록됩니다.

---

App.tsx

// React 상태 관리를 위한 useState 임포트
import { useState } from 'react';

// CSS 모듈 스타일들 임포트
import {
  appContainer,
  board,
  buttons,
  deleteBoardButton,
  loggerButton,
} from './App.css';

// 하위 컴포넌트들 임포트
import BoardList from './components/BoardList/BoardList';
import ListsContainer from './components/ListsContainer/ListsContainer';
import ModalEdit from './components/ModalEdit/ModalEdit';
import LoggerModal from './components/LoggerModal/LoggerModal';

// 커스텀 훅: 타입이 지정된 Redux 디스패치 & 셀렉터 훅
import { useTypedDispatch, useTypedSelector } from './hooks/redux';

// Redux 슬라이스에서 액션 가져오기
import { deleteBoard } from './store/slices/boardsSlice';
import { addLog } from './store/slices/loggerSlice';

// 로그 ID 생성을 위한 라이브러리
import { v4 } from 'uuid';

function App() {
  // Redux 액션 실행용
  const dispatch = useTypedDispatch();
  
   // 지역 상태
  const [isLoggerOpen, setIsLoggerOpen] = useState(false);
  const [activeBoardId, setActiveBoardId] = useState('board-0');
  
  // 전역 상태
  const modalActive = useTypedSelector((state) => state.boards.modalActive);
  const boards = useTypedSelector((state) => state.boards.boardArray);

  // 현재 활성 보드 정보 가져오기
  const getActiveBoard = boards.filter(
    (board) => board.boardId === activeBoardId
  )[0];
 // 활성 보드의 리스트들 가져오기
  const lists = getActiveBoard.lists;

  // 게시판 삭제 함수
  const handleDeleteBoard = () => {
    if (boards.length > 1) {
      // Redux에 삭제 액션 디스패치
      dispatch(
        deleteBoard({
          boardId: getActiveBoard.boardId,
        })
      );
      
      // Redux에 로그 추가 액션 디스패치
      dispatch(
        addLog({
          logId: v4(),
          logMessage: `게시판 지우기 : ${getActiveBoard.boardName}`,
          logAuthor: 'User',
          logTimestamp: String(Date.now()),
        })
      );

      // 삭제 후 어떤 게시판을 보여줄지 결정
      const newIndexToSet = () => {
        const indexToBeDeleted = boards.findIndex(
          (board) => board.boardId === activeBoardId
        );
        return indexToBeDeleted === 0
          ? indexToBeDeleted + 1
          : indexToBeDeleted - 1;
      };

      // 새로운 보드 ID로 전환
      setActiveBoardId(boards[newIndexToSet()].boardId);
    } else {
      alert('최소 게시판 개수는 한 개입니다.');
    }
  };

  return (
    <div className={appContainer}>
      {isLoggerOpen && <LoggerModal setIsLoggerOpen={setIsLoggerOpen} />}
      {modalActive && <ModalEdit />}

      <BoardList
        activeBoardId={activeBoardId}
        setActiveBoardId={setActiveBoardId}
      />
      <div className={board}>
        <ListsContainer lists={lists} boardId={getActiveBoard.boardId} />
      </div>
      <div className={buttons}>
        <button className={deleteBoardButton} onClick={handleDeleteBoard}>
          이 게시판 삭제하기
        </button>
        <button
          className={loggerButton}
          onClick={() => setIsLoggerOpen(!isLoggerOpen)}
        >
          {isLoggerOpen ? '활동 목록 숨기기' : '활동 목록 보이기'}
        </button>
      </div>
    </div>
  );
}

export default App;

상태 관리 기준: useState vs Redux

• 지역 상태

  • isLoggerOpen, activeBoardId : App 컴포넌트에서만 사용하기 때문에 useState를 사용하여 관리해줍니다.

• 전역 상태

  • modalActive, boards : 여러 컴포넌트에서 필요한 구조이기 때문에 Redux를 활용해서 관리해줍니다.

게시판 삭제 함수( handleDeleteBoard )

• handleDeleteBoard : 현재 활성화된 게시판을 삭제하고, 로그를 기록하며, 삭제 후 보여줄 게시판을 새로 설정합니다.

  • newIndexToSet: 삭제 대상이 첫 번째 보드면 다음 보드 보여주고, 아니면 이전 보드로 이동합니다.

---

App.css.ts

import { createGlobalTheme, style } from '@vanilla-extract/css';

export const vars = createGlobalTheme(':root', {
  color: {
    main: '#ffa726',
    mainDarker: '#f57c00',
    mainFaded: '#ffb74d',
    mainFadedBright: '#ffb74da6',
    list: 'rgb(235,236,240)',
    task: 'rgb(255,255,255)',
    taskHover: 'rgb(245,245,245)',
    brightText: 'rgb(255,255,255)',
    darkText: 'rgb(24,42,77)',
    secondaryDarkText: 'rgb(94,108,132)',
    secondaryDarkTextHover: 'rgb(218,219,226)',
    selectedTab: 'rgb(137,176,74)',
    updateButton: 'rgb(237,180,88)',
    deleteButton: 'rgb(237,51,88)',
  },
  fontSizing: {
    T1: '32px',
    T2: '24px',
    T3: '18px',
    T4: '14px',
    P1: '12px',
  },
  spacing: {
    small: '5px',
    medium: '10px',
    big1: '20px',
    big2: '15px',
    listSpacing: '30px',
  },
  font: {
    body: 'arial',
  },
  shadow: {
    basic: '4px 4px 8px 0px rgba(34, 60, 80, 0.2)',
  },
  minWidth: {
    list: '250px',
  },
});

export const appContainer = style({
  display: 'flex',
  flexDirection: 'column',
  minHeight: '100vh',
  height: 'max-content',
  width: '100vw',
});

export const board = style({
  display: 'flex',
  flexDirection: 'row',
  height: '100%',
});

export const buttons = style({
  marginTop: 'auto',
  paddingLeft: vars.spacing.big2,
});

export const deleteBoardButton = style({
  border: 'none',
  borderRadius: 5,
  width: 'max-content',
  marginTop: 'auto',
  marginLeft: 'auto',
  marginBottom: '30px',
  fontSize: vars.fontSizing.T4,
  padding: vars.spacing.big2,
  backgroundColor: vars.color.mainFaded,
  cursor: 'pointer',
  opacity: 0.6,
  minWidth: 150,
  ':hover': {
    opacity: 0.8,
  },
});

export const loggerButton = style({
  border: 'none',
  borderRadius: 5,
  width: 'max-content',
  marginTop: 'auto',
  marginLeft: '15px',
  marginRight: '30px',
  marginBottom: '30px',
  fontSize: vars.fontSizing.T4,
  padding: vars.spacing.big2,
  backgroundColor: vars.color.mainFaded,
  cursor: 'pointer',
  opacity: 0.6,
  minWidth: 150,
  ':hover': {
    opacity: 0.8,
  },
});

@vanilla-extract/css 라이브러리를 사용해 전역 테마( createGlobalTheme )와 각 컴포넌트의 스타일( style )을 타입 안전하게 정의합니다.

• createGlobalTheme : 전역 테마 변수를 선언함으로써 vars.color.main의 방식으로 재사용이 가능합니다.

---

✏️ 회고

전역 테마 설정 덕분에 디자인을 쉽게할 수 있어서 좋은 거 같고, useState와 Redux 사이에서 어떤 건 뭘 써야 하는지 더 고민해보면서 코드를 작성했던 것 같다.