[Feat/#21] Spacing & Divider 컴포넌트 구현

[ocahs9]

🔥 Related Issues

• close [ Feat ] Spacing, Devider 구현 #21

✅ 작업 리스트

• Spacing 구현
• Divider 구현
• biome이 type을 제대로 import 해오지 못하고, type type type 과 같은 문제를 일으켜 비활성화 했습니다.

🔧 작업 내용

📣 리뷰어에게 어떠신가요?

• 바닐라 익스트랙트에서 동적 변수를 통한 스타일링을 위해서는 createVar() 뿐만 아니라 assignInlineVars 를 사용해야하기 때문에 @vanilla-extract/dynamic 를 추가로 설치했습니다.
• 바닐라 익스트랙트의 스타일링을 위해서는 반드시 .css.ts 파일로 분리하여 작성해야 합니다. (rule)
• 동적 변수 스타일링이 아닌 다양한 variants를 적용하기 위해서는 recipe()을 사용했습니다. 이를 위해 @vanilla-extract/recipe를 설치했습니다.
• 간단히 말해, recipe는 정해진 스타일 변형을 위한 규격화된 방식, assignInlineVar는 컴포넌트가 렌더링될 때 동적으로 값이 할당하는 방식이라고 생각하시면 됩니다.

사용방법은 간단합니다.

위, 아래로 간격을 주고 싶을 때 을 사용하는데, marginBottom이라는 prop에 rem 단위의 값을 숫자(형식은 문자열)만 입력하면 됩니다. 위의 예시는 10rem의 간격을 주었습니다. (prop은 optional, default 값은 1(rem))

는 size 라는 prop에 "large" | "small" 중 하나를 주면 됩니다. (prop은 optional, default 값은 "large")

📸 스크린샷 / GIF / Link

사용한 모습 (예시, main에 있는건 언제든 지워도 좋습니다.)

[ocahs9]

간단하기도 하고, import 문제를 빠르게 반영하기 위해 우선 머지시켜두겠습니다!