📚 Part 2 Board List, List Container 생성하기

---

📌 Board List Style 생성하기

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

export const container = style({
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap',
    rowGap: 15,
    minHeight: 'max-content',
    padding: vars.spacing.big2,
    backgroundColor: vars.color.mainDarker
})

flexDirection이 row일 때(기본값)는 아이템이 가로 방향으로 흐름. (좌에서 우로)
만약 column일 경우 아이템이 세로 방향으로 흐름(상에서 하로) alignItems: center 해주면 수직으로 중앙에 맞춰줌

• flexWrap : 복수행 flex 컨테이너 지정할 때 사용함.

📌 SideForm 생성하기

const handleClick = () => {
	setIsFormOpen(!isFormOpen);
    inputRef.current?.focus();
}
 // 생략
 <div className={addSection}>
	{
		isFormOpen ?
			<SideForm inputRef={inputRef} setIsFormOpen={setIsFormOpen} />
          :
            <FiPlusCircle className={addButton} onClick={handleClick} />
	}
</div>

바로 포커스 안 잡힘

const handleClick = () => {
	setIsFormOpen(!isFormOpen);
    setTimeout(() => {
      inputRef.current?.focus();
    }, 0);
}

이렇게 해도 됨

실제로 할 때에는 SlideForm.tsx에서

autoRef

만 써도 바로 포커스 잡힘

📌 SideForm Style 생성하기

npm i --save-dev @types/uuid

추가로 설치해주기 (유니크한 아이디 만들기 위함)

blur가 onClick보다 먼저 발생하므로 onMouseDown 사용하기

onmousedown > moseup > click