Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Typography

기본적인 텍스트 표시 컴포넌트입니다.

import { Typography } from 'sud-ui';

사용할 때

기본적인 텍스트 표시 컴포넌트입니다.

사용예제

다람쥐 헌 쳇바퀴에 타고파

Basic Usage

기본적인 사용 방법입니다.

import { Typography, Card, Segmented, Input } from "sud-ui";
import { useState, useEffect } from "react";

const weightData = {
  pretendard: [
    { label: "T", value: "T" },
    { label: "EL", value: "EL" },
    { label: "L", value: "L" },
    { label: "R", value: "R" },
    { label: "M", value: "M" },
    { label: "SB", value: "SB" },
    { label: "B", value: "B" },
    { label: "Black", value: "Black" }
  ],
  gmarket: [
    { label: "Light", value: "Light" },
    { label: "Medium", value: "Medium" },
    { label: "Bold", value: "Bold" }
  ],
  suite: [
    { label: "L", value: "L" },
    { label: "R", value: "R" },
    { label: "M", value: "M" },
    { label: "SM", value: "SM" },
    { label: "B", value: "B" },
    { label: "H", value: "H" }
  ],
  intelone: [{ label: "Medium", value: "Medium" }]
};

const sizeData = [
  { label: "xs", value: "xs" },
  { label: "sm", value: "sm" },
  { label: "base", value: "base" },
  { label: "lg", value: "lg" },
  { label: "xl", value: "xl" },
  { label: "2xl", value: "2xl" },
  { label: "3xl", value: "3xl" },
  { label: "4xl", value: "4xl" }
];

export default function App() {
  const [font, setFont] = useState("pretendard");
  const [weight, setWeight] = useState(weightData[font][0].value);
  const [size, setSize] = useState("3xl");
  const [color, setColor] = useState("");

  useEffect(() => {
    setWeight(weightData[font][0].value);
  }, [font]);

  return (
    <div className="flex flex-col gap-[10px] items-center justify-center">
      <Card style={{ width: "100%" }} shadow="none">
        <div className="flex flex-col gap-[10px]">
          <Segmented
            block
            options={[
              { label: "Pretendard", value: "pretendard" },
              { label: "Gmarket Sans", value: "gmarket" },
              { label: "SUITE", value: "suite" },
              { label: "IntelOneMono-Medium", value: "intelone" }
            ]}
            value={font}
            onChange={(value) => setFont(value)}
          />
          <Segmented
            block
            options={weightData[font]}
            value={weight}
            onChange={(value) => setWeight(value)}
          />
          <Segmented
            block
            options={sizeData}
            value={size}
            onChange={(value) => setSize(value)}
          />
          <Input
            style={{ width: "100%" }}
            shadow="none"
            placeholder="Enter text color(palette value or HEX code. ex: #000000, forest, orange...)"
            value={color}
            onChange={(e) => setColor(e.target.value)}
          />
        </div>
      </Card>
      <div className="flex flex-col justify-center items-center gap-[10px]">
        {font === "intelone" ? (
          <Typography as="p" size={size} code color={color}>
            The quick brown fox jumps over the lazy dog
          </Typography>
        ) : (
          <Typography as="p" size={size} {...{ [font]: weight }} color={color}>
            The quick brown fox jumps over the lazy dog
          </Typography>
        )}
      </div>
    </div>
  )
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

children

텍스트 내용

ReactNode

pretendard

Pretendard 폰트 두께

Black

gmarket

Gmarket 폰트 두께

Light

Medium

Bold

suite

SUITE 폰트 두께

code

코드 폰트 사용 여부

boolean

false

fontFamily

커스텀 폰트 패밀리

string

size

폰트 크기

base

2xl

3xl

4xl

base

weight

폰트 두께

light

normal

medium

semibold

bold

normal

렌더링할 HTML 요소

span

color

텍스트 색상(palette값 또는 HEX code)

string

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

개인정보 처리방침

서비스 약관