feat: vanilla-extract 추가

[qkrdmstlr3]

🤔 문제 및 해결방안

• VanillaExtract와 터보팩이 호환되지 않아 터보팩을 사용하지 않습니다.

✍️ 구현 설명

• VanillaExtract 설정 및 간단한 예제 파일 생성

📷 이미지 첨부 (Option)

⚠️ 유의할 점! (Option)

[banhogu]

Good~!

[banhogu]

classNames or clsx도 설치해야되지 않나

[hjy0951]

p2) recipe 활용하거나 배열로 합성 가능해서 크게 상관없을수도 있겠다는 생각도 드는데, 요소에 id나 class를 사용하는 경우 때문에 그런가??

[banhogu]

p2) recipe 사용법 찾아보니까, 설치 안해도 되겠다.
근데 useState 같은 상태에 따라 스타일이 동적으로 변하게 될 경우

// styles.css.ts
export const button = recipe({
  base: { padding: '8px 16px' },
  variants: {
    size: {
      large: { fontSize: '20px' },
      small: { fontSize: '12px' },
    },
    isActive: {
      true: { backgroundColor: 'blue', color: 'white' },
      false: { backgroundColor: 'gray', color: 'black' },
    },
  },
  defaultVariants: { isActive: false },
});

export default function DynamicButton() {
  const [isActive, setIsActive] = useState(false);

  return (
    <button
      className={button({ size: 'large', isActive })}
      onClick={() => setIsActive((prev) => !prev)}
    >
      버튼
    </button>
  );
}

이렇게 작성될텐데, 이러면 스타일에 상태 전달을 해야 돼서, 스타일쪽에서 넘겨 받는 상태값이 많아질수록 변수 관리가
복잡해지고, 버튼처럼 공통 컴포넌트로 만든다고 해도 각자 작업하는 컴포넌트에서 사용할 때 넘겨주는 useState 변수명을 팀 내 컨벤션으로 다같이 맞춰야 하는건가?
그리고 매번 recipe를 작성 하는건 공수가 크니까 디자인팀에도 최대한 컴포넌트 재사용 할 수 있게 일관된 디자인 가이드로 신경써서 만들어달라고 해야되겠네 (사실 잘 모름 맞나?)

@hjy0951 @thwjddlqslek @qkrdmstlr3

[hjy0951]

음 지금 당장은 상태에 따른 스타일링이 많이 들어갈까 싶기는 한데, 내일 같이 이야기해봐도 좋겠다

나는 사실 버튼이나 타이포 등등 공통 컴포넌트는 상태에 따른 스타일링이 어느 정도 범위가 정해져있다고 생각해서 크게 문제 없을 거라고 생각했었어!

우선 변수명 같은 경우에는 크게 컨벤션을 정하거나 할 필요는 없는 것 같은게 객체에 key-value로 값을 넣어주는거라 { isActive: isClicked } 같이 이런 방식으로 넣어주면 괜찮지 않을까?

[qkrdmstlr3]

그리고 매번 recipe를 작성 하는건 공수가 크니까 디자인팀에도 최대한 컴포넌트 재사용 할 수 있게 일관된 디자인 가이드로 신경써서 만들어달라고 해야되겠네 (사실 잘 모름 맞나?)

나는 초기 단계에서 재사용성을 고려하긴 어려울 것 같고, 우리가 맞춰야 하지 않을까라는 생각이야

[hjy0951]

고생하셨습니다! 👍

[hjy0951]

p2) recipe 활용하거나 배열로 합성 가능해서 크게 상관없을수도 있겠다는 생각도 드는데, 요소에 id나 class를 사용하는 경우 때문에 그런가??

[thwjddlqslek]

수고하셨습니다!