[React] React와 TypeScript로 구현하는 다양한 텍스트 들여쓰기 기법

이번 포스팅에서는 React 컴포넌트를 활용하여 텍스트 들여쓰기 효과를 다양하게 구현하는 방법을 소개합니다.

특히, 첫 번째 줄은 18px, 두 번째 줄부터는 36px 들여쓰기가 적용되는 "indentDouble" 타입을 포함한 여러 타입의 구현 예제를 제공하여, UI의 가독성을 높이는 데 도움이 될 것입니다.

import React from 'react';
import { Box, Typography } from '@material-ui/core';

interface FaqAnswer {
  type: 'br' | 'indent' | 'indentAll' | 'indentDouble' | string;
  text: string;
}

// 다중 텍스트 들여쓰기 구현 함수
const generateAnswer = (contents: FaqAnswer[], imageSrc?: string) => (
  <Box>
    {contents.map((content, index) => {
      if (content.type === 'br') return <br key={index} />;
      if (content.type === 'indent') {
        return (
          <Typography
            key={index}
            style={{
              display: 'block',
              width: '100%',
              textAlign: 'left',
              textIndent: '-17px',
              paddingLeft: '18px',
            }}
          >
            {t(content.text)}
          </Typography>
        );
      }
      if (content.type === 'indentAll') {
        return (
          <Typography
            key={index}
            style={{
              display: 'block',
              width: '100%',
              textAlign: 'left',
              paddingLeft: '18px',
            }}
          >
            {t(content.text)}
          </Typography>
        );
      }
      // 첫 번째 줄은 18px, 두 번째 줄부터는 36px 들여쓰기 적용 (더블 들여쓰기)
      if (content.type === 'indentDouble') {
        return (
          <Typography
            key={index}
            style={{
              display: 'block',
              width: '100%',
              textAlign: 'left',
              paddingLeft: '36px',  // 전체 블록에 36px 들여쓰기 적용
              textIndent: '-18px',  // 첫 줄에서 18px를 상쇄하여 첫 줄은 18px 들여쓰기
            }}
          >
            {t(content.text)}
          </Typography>
        );
      }
      return (
        <Typography key={index} style={{ paddingLeft: '2px' }}>
          {t(content.text)}
        </Typography>
      );
    })}
    {imageSrc && (
      <Box mt={2}>
        <img src={imageSrc} alt="Related illustration" />
      </Box>
    )}
  </Box>
);

export default generateAnswer;

 

위 코드에서는 다음과 같이 다양한 텍스트 들여쓰기 방식을 구현하였습니다.

• br: 줄바꿈 태그를 그대로 출력
• indent: 첫 줄 들여쓰기를 적용하여, 첫 줄만 다른 들여쓰기
• indentAll: 전체 텍스트에 동일한 들여쓰기를 적용
• indentDouble: 첫 줄은 18px 들여쓰기, 두 번째 줄부터는 36px 들여쓰기를 적용하여 더블 들여쓰기 효과를 제공

이 코드를 활용하여 프로젝트의 UI를 개선하시기 바라며, 추가적인 커스터마이징은 필요에 따라 조정할 수 있습니다.

 

 

---

사용 방법

• 번역 함수(t) 정의:
  • 본 예제에서는 단순 문자열 반환 함수로 정의하였으나, 실제 프로젝트에서는 i18n 등의 라이브러리를 통해 다국어 지원을 할 수 있습니다.
• FaqAnswer 인터페이스:
  • 각 텍스트 블록의 타입과 내용을 정의합니다.
  • type 값에 따라 br, indent, indentAll, indentDouble 등이 있으며, 필요에 따라 추가 타입을 사용할 수 있습니다.
• generateAnswer 함수:
  • 전달받은 배열(contents)에 따라 각 텍스트 블록을 렌더링합니다.
  • indentDouble 타입은 첫 번째 줄과 이후 줄에 서로 다른 들여쓰기를 적용합니다.
  • imageSrc가 전달되면 예시 이미지도 함께 렌더링됩니다.
• App 컴포넌트:
  • 예시 데이터(exampleContents)를 생성한 후, generateAnswer 함수를 호출하여 화면에 렌더링합니다.
  • 예시 이미지 URL도 함께 전달되어 텍스트 아래에 이미지를 표시합니다.

// 예시 데이터: 다양한 타입의 FaqAnswer 배열
const exampleContents: FaqAnswer[] = [
  {
    type: 'indentDouble',
    text: '이것은 indentDouble 타입의 예제 텍스트입니다. 첫 번째 줄은 18px 들여쓰기, 두 번째 줄부터는 36px 들여쓰기가 적용됩니다.',
  },
  { type: 'br', text: '' },
  {
    type: 'indent',
    text: '이것은 indent 타입의 예제 텍스트입니다. 첫 번째 줄에만 들여쓰기가 적용됩니다.',
  },
  { type: 'br', text: '' },
  {
    type: 'indentAll',
    text: '이것은 indentAll 타입의 예제 텍스트입니다. 전체 텍스트에 동일한 들여쓰기가 적용됩니다.',
  },
];

const App: React.FC = () => {
  return (
    <div style={{ padding: '20px' }}>
      {/* generateAnswer 함수를 호출하여 텍스트와 예시 이미지를 렌더링합니다 */}
      {generateAnswer(
        exampleContents,
        'https://via.placeholder.com/500x300.png?text=Example+Image'
      )}
    </div>
  );
};

export default App;