[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 12-4

BoardList 생성 / BoardList style 생성

import React, { FC, useState } from "react";
import { useTypedSelector } from "../../hooks/redux";
import SideForm from "./SideForm/SideForm";
import { FiPlusCircle } from "react-icons/fi";
import { addButton, addSection, container, title } from "./BoardList.css";

type TBoardListProps = {
  activeBoardId: string;
  setActiveBoardId: React.Dispatch<React.SetStateAction<string>>;
};

const BoardList: FC<TBoardListProps> = ({ 
  activBoardId, 
  setActivBoardId 
}) => {

  // header 내 게시판 리스트
  const { boardArray } = useTypedSelector((state) => state.boards);
  const [isFormOpen, setIsFormOpen] = useState(false);

  return (
    <div className={container}>
      {/* header 내 게시판 리스트 UI */}
      <div className={title}>게시판:</div>
      {boardArray.map((board, idx) => (
        <div key={board.boardId}>
          <div>{board.boardName}</div>
        </div>
      ))}
      {/* 게시판 추가 버튼 UI */}
      <div className={addSection}>
        {
          isFormOpen ? 
            <SideForm setIsFormOpen={setIsFormOpen}></SideForm>
          : <FiPlusCircle className={addButton} onClick={()=> setIsFormOpen(!isFormOpen)}/>
        }
      </div>
    </div>
  );
};

export default BoardList;

import { style } from "@vanilla-extract/css";
import { vars } from "../../App.css";


export const container = style({
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  flexWrap: 'wrap', // wrap 설정시 width를 줄일 경우 아래로 내려가도록 설정
  rowGap: 15, // space 확보
  minHeight: 'max-content',
  padding: vars.spacing.big2,
  backgroundColor: vars.color.mainDarker
})
export const title = style({
  color: vars.color.brightText,
  fontSize: vars.fontSizing.T2,
  marginRight: vars.spacing.big1,

})
export const addButton = style({
  color: vars.color.brightText,
  fontSize: vars.fontSizing.T2,
  cursor: 'pointer',
  marginLeft: vars.spacing.big1,
  ":hover": {
    opacity: 0.8
  }
})
export const boardItem = style({
  color: vars.color.brightText,
  fontSize: vars.fontSizing.T3,
  backgroundColor: vars.color.mainFaded,
  padding: vars.spacing.md,
  borderRadius: 10,
  cursor: 'pointer',
  marginRight:vars.spacing.big1,
  ":hover":{
    opacity: 0.8,
    transform: "scale(1.03)"
  }
})
export const boardItemActive = style({

})
export const addSection = style({

})
export const smallTitle = style({

})