Typography Components

Typography Components 구현

Typescript & Tailwind CSS 사용해 만든 재사용 가능한 Typography Components 구현
→ 다양한 텍스트 스타일을 효율적으로 관리하고, 코드 중복을 줄이며, 유지보수성을 높여보자!

1. 컴포넌트 설계

Typography 컴포넌트는 필요한 텍스트 스타일을 variant로 전달받아 스타일을 매핑하고, 추가적으로 className으로 사용자 정의 스타일을 적용할 수 있도록 함

import React, {ReactNode} from "react";

interface TypographyProps {
  variant: "headingL" | "headingM" | "headingS" | "subHeadingL" | "subHeadingM" ; // 텍스트 스타일
	children: ReactNode; // 텍스트 내용
	className?: string; // 추가 스타일링을 위한 클래스
}

const Typography: React.FC<TypographyProps> = ({
  variant, 
  children, 
  className,
}) => {
  // 스타일 매핑
  const variants = {
    headingL: 'font-black text-[60px] leading-[60px]',
    headingM: 'font-extrabold text-[50px] leading-[50px]',
    headingS: 'font-extrabold text-[30px] leading-[40px]',
    subHeadingL: 'font-bold text-[40px] leading-[30px]',
    subHeadingM: 'font-bold text-[20px]leading-[20px]'
    ...
  };
  
  // variant에 따른 클래스 적용
  const variantClass = variants[variant];
  
  return <span className={`${variantClass} ${className}`}>{children}</span>;
};

export default Typography;  

• 주요 속성
  variant : 텍스트 스타일을 결정하는 핵심 속성
  className: TailwindCSS 유틸리티 클래스를 추가하여 스타일을 확장할 수 있음
  children: 컴포넌트 내부에 렌더링될 텍스트를 받음
  variants: TailwindCSS 스타일을 선언적으로 관리하는 객체

---

2. 컴포넌트 활용 예시

Typography 컴포넌트를 활용하여 다양한 텍스트 스타일을 쉽게 적용할 수 있음

import Typography from '@/components/Typography";

export default function Page() {
  retrun (
    <div>
    	<Typography variant="headingL">HeadingL</Typography>
    	<Typography variant="subHeadingL">subHeadingL</Typography>
    	<Typography variant="subHeadingM" className="text-blue-500 underline">
    		subHeadingM에 스타일링 추가
    	</Typography>
    </div>
  );
}

---

3. 컴포넌트 리팩토링

스타일 외부화
→ 컴포넌트 내부에 스타일을 직접 작성하는 대신, 외부 파일로 분리하여 작성

// typographyStyle.ts

export const typographyStyles = {
  headingL: 'font-black text-[60px] leading-[60px]',
  headingM: 'font-extrabold text-[50px] leading-[50px]',
  headingS: 'font-extrabold text-[30px] leading-[40px]',
  subHeadingL: 'font-bold text-[40px] leading-[30px]',
  subHeadingM: 'font-bold text-[20px]leading-[20px] ',
  ...
};

위와 같이 따로 작성하고, Typohgraphy 컴포넌트에서 불러와서 사용

import { typographyStyles } from "@/styles/typographyStyles";

const variantClass = typographyStyles[variant];
...

리팩토링된 Typogrpahy 컴포넌트

import React, { ReactNode } from "react";
import { typographyStyles } from "@/styles/typographyStyles";

interface TypographyProps {
  variant: keyof typeof typographyStyles; // 스타일 키에 따라 자동 타입 추론
  children: ReactNode;
  className?: string;
}

const Typography: React.FC<TypographyProps> = ({
  variant,
  children,
  className,
}) => {
  const variantClass = typographyStyles[variant];

  return <span className={`${variantClass} ${className}`}>{children}</span>;
};

export default Typography;

---

4. 최종 사용 예시

import Typography from '@/components/Typography";

export default function Page() {
  retrun (
    <div>
    	<Typography variant="headingL">HeadingL</Typography>
    	<Typography variant="subHeadingL">subHeadingL</Typography>
    	<Typography variant="subHeadingM" className="text-blue-500 underline">
    		subHeadingM에 스타일링 추가
    	</Typography>
    </div>
  );
}

---

개발하면서 느낀점

Typography 컴포넌트를 구현하면서, 단순히 텍스트 스타일을 적용하는 것을 넘어 재사용성, 유연성, 그리고 가독성을 높이기 위한 고민을 하였다.

• 재사용성: variant로 다양한 텍스트 스타일을 선언적으로 관리하며 코드 중복을 줄이고, 스타일을 외부 파일로 분리해 유지보수성과 일관성을 높일 수 있었다.

• 유연성: className을 통해 기본 스타일을 유지하면서 필요에 따라 덮어씌우거나 확장할 수 있어 다양한 요구사항에 유연하게 대응할 수 있었다.

• 가독성: 스타일을 외부로 분리하고 Typescript의 자동 타입 추론(keyof typeof)을 활용하면서 코드가 깔끔해지고 유지보수가 쉬워졌다.

→ 이번 구현은 단순히 컴포넌트를 완성하는 것을 넘어, 더 효율적이고 관리하기 쉬운 코드를 작성할 수 있을지에 대한 생각을 많이 하게 되었다.