diff --git a/src/components/common/Text/Text.tsx b/src/components/common/Text/Text.tsx index 30c4acb..ed4e699 100644 --- a/src/components/common/Text/Text.tsx +++ b/src/components/common/Text/Text.tsx @@ -17,7 +17,11 @@ export default function Text({ return ( {markdown ? ( - {String(children)} + + + {String(children)} + + ) : ( children )} @@ -30,3 +34,94 @@ const StyledText = styled.div<{ $font: string; $color: string }>` color: ${({ theme, $color }) => theme.colors[$color]}; white-space: pre-wrap; `; + +const MarkdownWrapper = styled.div` + line-height: 1.4; /* 전체 줄 간격을 좁힘 */ + font-size: 16px; + color: #333; + + h1, + h2, + h3 { + margin: 0.5em 0 0.3em 0; /* 위-아래 여백을 최소화 */ + font-weight: bold; + } + + h1 { + font-size: 1.5em; + } + + h2 { + font-size: 1.3em; + } + + h3 { + font-size: 1.2em; + } + + p { + margin: 0.2em 0; /* 문단의 위아래 여백을 최소화 */ + } + + ul, + ol { + padding-left: 1.8em; /* 리스트 들여쓰기 최소화 */ + margin: 0.2em 0; /* 리스트 위아래 여백을 줄임 */ + list-style: disc; + } + + li { + margin-bottom: 0.1em; /* 리스트 항목 간 여백을 줄임 */ + line-height: 1.4; /* 리스트 줄 간격 */ + } + + strong { + font-weight: bold; + margin-right: 0.1em; /* 강조된 텍스트와 다음 요소의 간격 최소화 */ + } + + hr { + margin: 0.8em 0; /* 수평선 위아래 여백 최소화 */ + border: none; + border-top: 1px solid #eaeaea; + } + + blockquote { + margin: 0.3em 0; /* 인용문 여백 최소화 */ + padding: 0.3em 0.8em; + background: #f9f9f9; + border-left: 3px solid #ccc; + color: #555; + } + + code { + background: #f5f5f5; + border: 1px solid #e1e1e1; + padding: 0.1em 0.2em; + border-radius: 3px; + font-family: "Courier New", Courier, monospace; + font-size: 0.95em; + } + + pre { + background: #f5f5f5; + border: 1px solid #e1e1e1; + padding: 0.6em; /* 코드블록 패딩을 줄임 */ + border-radius: 4px; + overflow-x: auto; + margin: 0.3em 0; + } +`; + +// 마크다운 스타일 컴포넌트 +const markdownStyles = { + h1: (props: any) =>

{props.children}

, + h2: (props: any) =>

{props.children}

, + h3: (props: any) =>

{props.children}

, + p: (props: any) =>

{props.children}

, + ul: (props: any) => , + ol: (props: any) =>
    {props.children}
, + li: (props: any) =>
  • {props.children}
  • , + blockquote: (props: any) =>
    {props.children}
    , + hr: () =>
    , +}; diff --git a/src/pages/prompt/components/ResultSection.tsx b/src/pages/prompt/components/ResultSection.tsx index 3c8820b..b1e37d7 100644 --- a/src/pages/prompt/components/ResultSection.tsx +++ b/src/pages/prompt/components/ResultSection.tsx @@ -155,6 +155,7 @@ export const ResultSection: React.FC = () => { font="b2_16_med" color={"G_700"} key={index} + markdown={true} > {res.response}