#111 💄Design: 메인페이지 디자인 수정 (#119)

* 💄Design: 메인페이지 디자인 수정

* 🐛Fix: github workflows 수정

.github/workflows/lint-check.yml

@@ -0,0 +1,15 @@
+name: lint check
+
+on: pull_request
+
+jobs:
+  eslint-test:
+    name: eslint test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18.18.0'
+      - run: npm install
+      - run: npm run lint

.github/workflows/type-check.yml

@@ -0,0 +1,15 @@
+name: type check
+
+on: pull_request
+
+jobs:
+  type-test:
+    name: type test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18.18.0'
+      - run: npm install
+      - run: npm run typecheck

src/App.tsx

@@ -1,6 +1,5 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import '@aws-amplify/ui-react/styles.css';
-import { withAuthenticator } from '@aws-amplify/ui-react';
 import { Amplify } from 'aws-amplify';
 import awsConfig from './awsConfig';
 import MainLayout from './components/layout/MainLayout';
@@ -48,4 +47,4 @@ const App = () => {
   );
 };
 
-export default withAuthenticator(App);
+export default App;

src/components/home/MainDesign.tsx

@@ -4,33 +4,35 @@ import * as L from '@/styles/layout/layout.style';
 
 const MainDesign = () => {
   return (
-    <S.TopTriangleContainer>
+    <>
+      <S.TopTriangleContainer>
+        <S.TopText>
+          개인회고와 팀 회고 템플릿을 동시에 제공하는 회괴 웹페이지입니다. <br />
+          우리는 개인과 팀이 모두 발전할 수 있도록, <br />
+          과거의 경험을 효과적으로 되새기고 배우는 것을 지원합니다.
+        </S.TopText>
+        <S.BottomText>
+          과거를 회고하며 미래로 나아가는 과정을 촉진하는 의미를 가진 이름으로 <br />
+          &apos; Past&apos; (과거)와 &apos;Forward &apos;(앞으로 나아가다)를 결합하여 비전을 표현합니다.
+        </S.BottomText>
+      </S.TopTriangleContainer>
       <S.BrandContainer>
-        <img src={logo} style={{ marginTop: '150px', marginLeft: '80px', width: '300px', zIndex: '999' }} />
+        <img src={logo} style={{ paddingLeft: '80px', width: '300px' }} />
         <S.BrandTextBox>
-          <S.BrandSmallText style={{ marginLeft: '30%' }}>Moving</S.BrandSmallText>
+          <S.BrandSmallText style={{ paddingLeft: '20%' }}>Moving</S.BrandSmallText>
           <L.LogoText color="white" style={{ fontSize: '70px' }}>
             Forward
           </L.LogoText>
         </S.BrandTextBox>
         <S.BrandTextBox>
-          <S.BrandSmallText style={{ marginLeft: '45%' }}>From the</S.BrandSmallText>
+          <S.BrandSmallText style={{ paddingLeft: '45%' }}>From the</S.BrandSmallText>
           <L.LogoText color="white" style={{ fontSize: '70px' }}>
             Past
           </L.LogoText>
         </S.BrandTextBox>
         <S.StartedFreeButton>Get Started for Free</S.StartedFreeButton>
       </S.BrandContainer>
-      <S.TopText style={{ marginLeft: '70%' }}>
-        개인회고와 팀 회고 템플릿을 동시에 제공하는 회괴 웹페이지입니다. <br />
-        우리는 개인과 팀이 모두 발전할 수 있도록, <br />
-        과거의 경험을 효과적으로 되새기고 배우는 것을 지원합니다.
-      </S.TopText>
-      <S.BottomText>
-        과거를 회고하며 미래로 나아가는 과정을 촉진하는 의미를 가진 이름으로 <br />
-        &apos; Past&apos; (과거)와 &apos;Forward &apos;(앞으로 나아가다)를 결합하여 비전을 표현합니다.
-      </S.BottomText>
-    </S.TopTriangleContainer>
+    </>
   );
 };
 

src/components/layout/parts/LogoBox.tsx

@@ -2,12 +2,12 @@ import Logo from '@/../public/logo.svg';
 import * as S from '@/styles/layout/layout.style';
 const LogoBox = () => {
   return (
-    <S.LogoBox>
+    <>
       <S.LogoText color="brand" href="/#">
         <img src={Logo} />
         Past Forward
       </S.LogoText>
-    </S.LogoBox>
+    </>
   );
 };
 

src/styles/Home/home.style.ts

@@ -1,53 +1,50 @@
 import styled from 'styled-components';
 
-export const TopTriangleContainer = styled.div`
-  position: relative;
-  background-color: white;
-  min-width: 1200px;
-  height: 1000px;
-`;
-
 export const TopText = styled.p`
-  margin-top: 100px;
-  margin-left: 800px;
+  margin-top: 50px;
+  margin-left: 55%;
   color: #111b47;
 `;
 
 export const BottomText = styled.p`
-  margin-top: 400px;
-  margin-left: 100px;
+  margin-top: 30%;
+  margin-left: 5%;
   color: #111b47;
 `;
 
 export const BrandContainer = styled.div`
-  position: absolute;
-  width: 100%;
-  height: 800px;
-  clip-path: polygon(0 49%, 0 0, 100% 47%, 100% 100%);
+  clip-path: polygon(0 0, 100% 48%, 100% 100%, 0 56%);
   background: rgb(2, 0, 36);
   background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(28, 28, 101, 1) 37%, rgba(36, 123, 218, 1) 100%);
+  padding: 10% 5%;
 `;
 
 export const BrandSmallText = styled.p`
   color: white;
   font-size: 40px;
-  margin-top: 40px;
-  margin-right: 10px;
+  padding-top: 50px;
 `;
 
 export const BrandTextBox = styled.div`
   display: flex;
-  flex-direction: row;
 `;
 
 export const StartedFreeButton = styled.button`
   background-color: white;
   color: #111b47;
   font-size: 30px;
-  padding: 10px 20px;
+  padding: 10px 40px;
   margin-left: 70%;
   border-radius: 10px;
   &:hover {
     background-color: #ababab;
   }
 `;
+export const TopTriangleContainer = styled.div`
+  position: absolute;
+  width: 100%;
+`;
+
+export const Container = styled.div`
+  margin: 0 auto;
+`;

src/styles/layout/layout.style.ts

@@ -88,7 +88,7 @@ export const LogoText = styled.a<ColorProps>`
   font-size: 30px;
   font-weight: bold;
   border: 20px;
-  padding: 10px 5px;
+  padding: 10px 20px;
   text-decoration: none;
   padding-top: 10px;
 `;