Builder.shin

재택근무 전환 후 팀 컴포넌트 라이브러리 정비

배경

3월 초부터 전사 재택근무로 전환되면서 팀 협업 방식이 급격히 바뀌었다. 옆자리에서 바로 물어보던 것들을 Slack으로 확인해야 하고, 컴포넌트 사용법을 구두로 설명하기 어려워졌다.

기존 공통 컴포넌트 라이브러리는 PropTypes로 타입을 정의했지만, 실제 사용처에서 자동완성이나 타입 체크가 제대로 되지 않아 팀원들이 자주 물어보곤 했다.

진행 작업

1. TypeScript 마이그레이션

// Before: PropTypes
Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'secondary']),
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  onClick: PropTypes.func
};

// After: TypeScript
interface ButtonProps {
  variant: 'primary' | 'secondary';
  size: 'sm' | 'md' | 'lg';
  onClick?: () => void;
}

const Button: React.FC<ButtonProps> = ({ variant, size, onClick }) => {
  // ...
};

VSCode에서 자동완성이 제대로 동작하니 Slack 질문이 눈에 띄게 줄었다.

2. Storybook 문서화 강화

각 컴포넌트별로 Story를 작성하고 사용 예시를 추가했다. 재택 환경에서는 코드만으로 소통해야 하기 때문에 실행 가능한 예시가 중요했다.

export const Primary = () => (
  <Button variant="primary" size="md">
    Primary Button
  </Button>
);

export const AllVariants = () => (
  <div>
    <Button variant="primary">Primary</Button>
    <Button variant="secondary">Secondary</Button>
  </div>
);

결과

  • 컴포넌트 관련 질문 60% 감소
  • 잘못된 props 전달로 인한 런타임 에러 감소
  • Storybook URL 공유로 빠른 피드백 가능

재택근무로 인한 비동기 커뮤니케이션 환경에서는 문서화와 타입 안정성이 더욱 중요하다는 것을 체감했다.

재택근무 전환 후 팀 컴포넌트 라이브러리 정비