CSS 함수 사용 관련

[yuj2n]

🗣️ 논의 주제: [CSS 함수 사용]

📅 작성일: 04-18

🙋‍♂️ 작성자: 전유진

---

🧩 문제 상황 / 논의 배경

• 수진님의 PR을 확인하다가 스타일과 관련하여 css 함수에 JS 템플릿 리터럴로 스타일을 작성하는 방법과 객체로 선언하는 방법 중 어느 것으로 통일하는 것이 좋을 지에 대한 고민이 생김.
• 검색해보니 아래와 같은 이유로 템플릿 리터럴로 통합하는 것을 권장함.
  • 코드 일관성 (리뷰/리팩토링 시 혼란 ↓)
  • 컴포넌트끼리 스타일 재사용하거나 조합할 때 편함
  • css 함수 안에 넣을 땐 템플릿 리터럴이 더 자연스러움

---

🎯 논의 목표

• 템플릿 리터럴 vs 객체 스타일 작성 통일

---

📌 현재 제안된 안 또는 선택지

아래처럼 항목을 정리해주시고, 팀원들이 👍 로 투표할 수 있도록 하면 좋아요!

1. ✅ 템플릿 리터럴: [css` margin-top: 2rem; `;]
2. 💡 객체: [css({ marginTop: '2rem' })]
3. 📝 기타 의견 있음 → 댓글로 작성해주세요!

---

[pappaya109]

템플릿 리터럴을 베이스로하고 필요한 경우만 객체 사용하는 것으로 결정되었습니다

[yuj2n]

필요한 경우는

const Button = ({ primary }) => {
  const buttonStyle = css({
    backgroundColor: primary ? 'blue' : 'gray',
    color: 'white',
    padding: '10px',
    borderRadius: '5px',
  });

이러한 경우가 맞을까요?