update App layout

swlab-main/src/App.jsx

 // @ts-nocheck
 import './styles/index.scss'
+import styled from 'styled-components'
 import Banner from './components/Banner'
 import Header from './components/Header'
 import Section from './components/Section'
@@ -8,62 +9,74 @@ import Footer from './components/Footer'
 
 function App () {
   return (
-    <>
-      <Header />
-      <Banner />
-      <Section title='Products' gap='3rem' display='grid'>
-        <Card
-          title='BXM'
-          subTitle='Business eXcellence Framework'
-          mainDesc='고성능 Java 애플리케이션 개발 및 운영 프레임워크'
-          subDesc={[
-            '고성능 아키텍처',
-            '안정적 시스템',
-            '개발 생산성과 품질 향상',
-            '확장성',
-            '클라우드 지원',
-          ]}/>
-        <Card
-          title='BXCM'
-          subTitle='Business eXcellence Cloud Framework'
-          mainDesc='구조화된 Cloud Native Framework'
-          subDesc={[
-            '시스템 구축 전 과정 지원',
-            '보안',
-            '표준화 및 개발 생산성',
-            'MSA 환경의 보상거래 패턴 지원',
-            '안정적 시스템 운영',
-            '거래 패턴 지원',
-            'Regulation을 위한 Layer',
-            '표준전문 거래제어',
-          ]}/>
-        <Card
-          title='BXI'
-          subTitle='Business eXcellence Integrator'
-          mainDesc='대내외 인터페이스 통합 솔루션'
-          subDesc={[
-            'BXI-FEP: 대외시스템 연계',
-            'BXI-EAI: 대내시스템 연계',
-            'BXI-MCI: 단말 연계',
-          ]}/>
-        <Card
-          title='BXCP'
-          subTitle='Business eXcellence Cloud Platform'
-          mainDesc='지속적 혁신이 가능한 Cloud Native DevOps Platform'
-          subDesc={[
-            'Kubernetes Multi-Cluster',
-            'Multi-Tenancy',
-            '애플리케이션 빌드 & 배포 표준 템플릿',
-            '애플리케이션 운영 & 관리 표준 템플릿',
-            '안정적 운영',
-            '시스템 통합 관리',
-            '사용자 통계',
-            '다양한 모니터링',
-          ]}/>
-      </Section>
+    <Root>
+      <Main>
+        <Header />
+        <Banner />
+        <Section title='Products' gap='3rem' display='grid'>
+          <Card
+            title='BXM'
+            subTitle='Business eXcellence Framework'
+            mainDesc='고성능 Java 애플리케이션 개발 및 운영 프레임워크'
+            subDesc={[
+              '고성능 아키텍처',
+              '안정적 시스템',
+              '개발 생산성과 품질 향상',
+              '확장성',
+              '클라우드 지원',
+            ]}/>
+          <Card
+            title='BXCM'
+            subTitle='Business eXcellence Cloud Framework'
+            mainDesc='구조화된 Cloud Native Framework'
+            subDesc={[
+              '시스템 구축 전 과정 지원',
+              '보안',
+              '표준화 및 개발 생산성',
+              'MSA 환경의 보상거래 패턴 지원',
+              '안정적 시스템 운영',
+              '거래 패턴 지원',
+              'Regulation을 위한 Layer',
+              '표준전문 거래제어',
+            ]}/>
+          <Card
+            title='BXI'
+            subTitle='Business eXcellence Integrator'
+            mainDesc='대내외 인터페이스 통합 솔루션'
+            subDesc={[
+              'BXI-FEP: 대외시스템 연계',
+              'BXI-EAI: 대내시스템 연계',
+              'BXI-MCI: 단말 연계',
+            ]}/>
+          <Card
+            title='BXCP'
+            subTitle='Business eXcellence Cloud Platform'
+            mainDesc='지속적 혁신이 가능한 Cloud Native DevOps Platform'
+            subDesc={[
+              'Kubernetes Multi-Cluster',
+              'Multi-Tenancy',
+              '애플리케이션 빌드 & 배포 표준 템플릿',
+              '애플리케이션 운영 & 관리 표준 템플릿',
+              '안정적 운영',
+              '시스템 통합 관리',
+              '사용자 통계',
+              '다양한 모니터링',
+            ]}/>
+        </Section>
+      </Main>
       <Footer />
-    </>
+    </Root>
   )
 }
 
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`
+const Main = styled.main`
+  flex-grow: 1;
+`
+
 export default App