Typography Component 개발

[sean2337]

Typography 개발

---

🏄🏼‍♂️‍ Summary (요약)

• 동적 태그 삽입을 통한 Typography Typography Component 개발

🫨 Describe your Change (변경사항)

• src/component/typhography/index.tsx
• src/style/variable.ts

🧐 Issue number and link (참고)

• Dynamic Tag를 통한 Typography Component #29

📚 Reference (참조)

다이나믹 태그와 디자인 토큰을 props로 받아 간단하게 Text를 사용할 수 있도록 개발했습니다.
=> 디자인 토큰 관련 파일에 경우 확정이 아니라 아직 디자인 나올때까지 임시 삽입본입니다.

• Props

1. as?: React.ElementType; => 태그를 삽입합니다.
2. variant?: keyof typeof DESIGN_SYSTEM_TEXT; => 텍스트 버전을 삽입합니다.
3. color?: keyof typeof DESIGN_SYSTEM_COLOR; => 텍스트 컬러를 삽입합니다.
4. children: string; => 텍스트를 삽입합니다.

• 사용 예시

<Typography as="h1" variant="E1">
    이건 h1
</Typography>
<Typography as="h2" variant="E2">
    이건 h2
</Typography>
<Typography as="p" variant="T1" color="red800">
    이건 p
</Typography>
<div>
    <Typography>이건 span</Typography>
    <Typography>이건 span</Typography>
</div>

[leeminhee119]

너무 좋습니다 🍀

[donghunee]

Suggested change

	type TypographyProps = {
	as?: React.ElementType;
	variant?: keyof typeof DESIGN_SYSTEM_TEXT;
	color?: keyof typeof DESIGN_SYSTEM_COLOR;
	children: string;
	};
	type TextTags = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
	type TypographyProps = {
	as?: Extract<React.ElementType,TextTags>;
	variant?: keyof typeof DESIGN_SYSTEM_TEXT;
	color?: keyof typeof DESIGN_SYSTEM_COLOR;
	children: string;
	};

현재는 모든 태그를 넣을 수 있도록 되어 있는데, 다음과 같이 TextTag로 타입을 한정 시키는 것도 괜찮아 보입니다~!!

[sean2337]

Extract라는 교집합 문법이 있군요!! 하나 또 알아갑니다~!!

[donghunee]

해당 방법은 처음 접해보네요~!! 덕분에 지식이 늘었습니다 👍👍👍

[klmhyeonwoo]

ㅇ.. 이거야.. 우리가 썼던 장점들의 집합체.. ✨

[donghunee]

수고 많으셨습니다:)

[klmhyeonwoo]

ㅇ.. 이거야.. 우리가 썼던 장점들의 집합체.. ✨