perf: HomeContent ux improvement

src/components/Layout/HomeContent.js

@@ -52,7 +52,7 @@ function Section({children, background = null}) {
 
 function Header({children}) {
   return (
-    <h2 className="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl lg:max-w-xl">
+    <h2 className="leading-xl font-display text-primary dark:text-primary-dark font-semibold text-5xl lg:text-6xl -mt-4 mb-7 w-full max-w-3xl">
       {children}
     </h2>
   );
@@ -66,6 +66,15 @@ function Para({children}) {
   );
 }
 
+function Br({breakPointPrefix = 'lg'}) {
+  const breakPointClass = {
+    lg: 'lg:inline',
+    xl: 'xl:inline',
+  }[breakPointPrefix];
+
+  return <br className={cn('hidden', breakPointClass)} />;
+}
+
 function Center({children}) {
   return (
     <div className="px-5 lg:px-0 max-w-4xl lg:text-center text-white text-opacity-80 flex flex-col items-center justify-center">
@@ -160,7 +169,10 @@ export function HomeContent() {
 
         <Section background="left-card">
           <Center>
-            <Header>컴포넌트를 사용하여 사용자 인터페이스 만들기</Header>
+            <Header>
+              컴포넌트를 사용하여
+              <Br /> 사용자 인터페이스 만들기
+            </Header>
             <Para>
               React를 사용하면 컴포넌트라고 불리는 조각들을 사용하여 사용자
               인터페이스를 만들 수 있습니다. <Code>Thumbnail</Code>,{' '}
@@ -183,7 +195,10 @@ export function HomeContent() {
 
         <Section background="right-card">
           <Center>
-            <Header>코드와 마크업으로 컴포넌트 작성하기</Header>
+            <Header>
+              코드와 마크업으로
+              <Br /> 컴포넌트 작성하기
+            </Header>
             <Para>
               React 컴포넌트는 JavaScript 함수입니다. 조건부로 내용을 표시하려면{' '}
               <Code>if</Code> 문을 사용할 수 있습니다. 목록을 표시하려면 배열에{' '}
@@ -206,7 +221,10 @@ export function HomeContent() {
 
         <Section background="left-card">
           <Center>
-            <Header>필요한 곳에 상호작용 요소 추가하기</Header>
+            <Header>
+              필요한 곳에
+              <Br /> 상호작용 요소 추가하기
+            </Header>
             <Para>
               React 컴포넌트는 데이터를 받고 화면에 표시할 내용을 반환합니다.
               사용자가 입력란에 입력하는 것과 같이 상호작용에 응답하여 새
@@ -236,7 +254,10 @@ export function HomeContent() {
 
         <Section background="right-card">
           <Center>
-            <Header>프레임워크를 통해서 풀스택으로 만들기</Header>
+            <Header>
+              프레임워크를 통해서
+              <Br /> 풀스택으로 만들기
+            </Header>
             <Para>
               React는 라이브러리입니다. 컴포넌트를 함께 묶을 수 있지만, 라우팅과
               데이터를 가져오는 방법을 규정하지는 않습니다. React로 앱을
@@ -414,8 +435,11 @@ export function HomeContent() {
         <Section background="right-card">
           <div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
             <div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
-              <div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10">
-                <Header>새로운 기능이 준비되면 업그레이드 하기</Header>
+              <div className="w-full max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10">
+                <Header>
+                  새로운 기능에 맞춰
+                  <Br breakPointPrefix="xl" /> 업그레이드 하기
+                </Header>
                 <Para>
                   React는 변화에 신중하게 접근합니다. 모든 React 커밋은 10억 명
                   이상의 사용자가 있는 비즈니스에 크리티컬한 영역에서 테스트
@@ -502,7 +526,10 @@ export function HomeContent() {
               />
             </div>
             <Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
-            <Header>React 커뮤니티에 오신 것을 환영합니다.</Header>
+            <Header>
+              React 커뮤니티에
+              <Br /> 오신 것을 환영합니다.
+            </Header>
             <ButtonLink
               href={'/learn'}
               type="primary"