[Trouble Shooting] facepaint 사용 관련 이슈

[Insung-Jo]

🐞 문제 상황 (Problem Description)

문제1 : 반응형을 적용하는 과정에서 아래와 같은 문제 발생

• media에서는 ${}rem 이 방식을 사용할 수 없는 문제.
• 타입에 따라서 조건부 스타일링을 진행하려고 했는데 적용되지 않는 문제

---

💻 환경 정보 (Environment)

• 브라우저: (예: Chrome 123)
• 프론트엔드 프레임워크: (예: React 18, Vite 사용)
• 배포 환경: (예: Vercel)
• API 서버: (예: 외부 REST API, 수정 불가)

---

🔍 발생 원인 분석 (Investigation)

• 미디어는 객체 형태로 들어가기 때문에 해당 방식을 사용할 수 없음
• 조건문 방식을 type의 형태를 비교하는 조건문을 작성했지만 넘어오는 것은 높이와 너비만 넘어오기 때문에 해당 부분은 무조건 undefiend만 리턴되는 것을 확인

---

🛠 시도해본 해결 방법 (Attempts)

• 미디어는 객체 형태로 들어가기 때문에 기존 ${}rem 이 방식이 안되기 때문에 rem으로 리턴 할 로직 구현 => 오히려 복잡해짐

const toRem = (string) => `${string}rem`;

• type 속성 없앤 후 다시 렌더링 해봄 => 높이에 undefined가 나오는 현상을 발견

• 찾아보니 mobile Size에는 높이가 반영이 되어 있지 않은 타입도 존재 => ?? (널 병합 연산자)을 사용하여 해결

---

✅ 최종 해결 방법 (Final Solution)

• 기존 sizeMap에 해당 rem 값을 부여하여 불필요한 로직이 없어지고 코드가 간결해짐

  const sizeMap = {
    modal: { width: '29.5rem', height: '4.2rem', fontSize: '1.4rem' },
    modalChart: { width: '47.7rem', height: '4.2rem', mobileWidth: '32.7rem', fontSize: '1.4rem' },
    carousel: {
      width: '23.4rem',
      height: '4rem',
      mobileWidth: '14.2rem',
      mobileHeight: '3.1rem',
      fontSize: '1.3rem',
    },
    vote: { width: '12rem', height: '3.2rem', fontSize: '2rem' },
    landing: { width: '47.7rem', height: '4.8rem', mobileWidth: '23rem', fontSize: '1.4rem' },
    error: {
      height: '4.2rem',
      fontSize: '1.4rem',
    },

• ?? (널 병합 연산자)를 사용하면서 해당 값이 비어있을 경우 기존의 높이를 반영하는 것으로 변경

// customButton.styles.js
  width: ${size.mobileWidth ?? size.width}; 
  height: ${size.mobileHeight ?? size.height};
  ${media({
    width: [size.mobileWidth ?? size.width, size.mobileWidth ?? size.width, size.width, size.width],
    height: [
      size.mobileHeight ?? size.height,
      size.mobileHeight ?? size.height,
      size.height,
      size.height,
    ],
  })};

---

💡 알게 된 점 (Lessons Learned)

• 이번에 emotion을 사용하면서 템플릿 리터럴 방식을 많이 사용하다 보니 다른 라이브러리를 사용 했을 때 대처 방식이 미흡 했었던 거 같다.
• 다음에는 사용 하기 전 공식 문서나 사용 방식을 좀 더 조사하여 사전에 일어날 일을 방지 해야 겠다.