Merge pull request #24 from moyeothon/develop

deploy

src/Router.tsx

@@ -7,12 +7,14 @@ import Invite from "@pages/invite/Invite";
 import Personal from "@pages/personal/Personal";
 import Result from "@pages/result/Result";
 import Confirm from "@pages/confirm/Confirm";
+import Main from "@pages/main/Main";
 import Share from "@pages/share/Share";
 
 const Router: React.FC = () => {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/" element={<Main />} />
         <Route path="/login" element={<Login />} />
         <Route path="/create" element={<Create />} />
         <Route path="/test/:page" element={<Test />} />

src/components/common/button/Button.tsx

@@ -26,7 +26,7 @@ const Btn = styled.button<ButtonProps>`
   border: none;
   margin: 10px auto;
 
-  @media (max-width: 360px) {
+  @media (max-width: 380px) {
     width: 280px;
   }
 `;

src/pages/main/Main.tsx

@@ -0,0 +1,21 @@
+import * as S from "./style";
+import Button from "@components/common/button/Button";
+import background from "../../assets/background.png";
+
+const Main: React.FC = () => {
+  return (
+    <S.Container>
+      <S.Section>
+        <S.Background src={background} alt="배경" />
+        <S.TitleSection>
+          <S.Title>
+            팀과 나를 맞추는 동기화, <br /> Sync Up
+          </S.Title>
+          <Button link="/create" name="팀 SyncUp 시작하기" />
+        </S.TitleSection>
+      </S.Section>
+    </S.Container>
+  );
+};
+
+export default Main;

src/pages/main/style.ts

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: relative;
+`;
+
+export const Title = styled.h1`
+  color: #343a40;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 40px; /* 111.111% */
+  letter-spacing: -0.5px;
+`;
+
+export const Section = styled.div`
+  height: 100vh;
+`;
+
+export const TitleSection = styled.div`
+  position: absolute;
+  width: 70%;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10rem;
+`;
+
+export const Background = styled.img`
+  position: relative;
+  width: 540px;
+  height: 100%;
+`;

src/pages/share/Share.tsx

@@ -29,7 +29,7 @@ const Share = () => {
           name="김은혜"
           position="팀장"
           part="프론트엔드"
-          imgSrc="https://github.com/gracekim527.png"
+          imgSrc="/images/nemo.png"
           $background="transparent"
           $borderColor="#E1F0DA"
         />
@@ -39,20 +39,23 @@ const Share = () => {
           part="프론트엔드"
           $background="transparent"
           $borderColor="#E1F0DA"
+          imgSrc="/images/sara.png"
         />
         <ActivatedProfile
           name="이석원"
           position="팀원"
           part="백엔드"
           $background="transparent"
           $borderColor="#E1F0DA"
+          imgSrc="/images/idea.png"
         />
         <ActivatedProfile
           name="김현수"
           position="팀원"
           part="백엔드"
           $background="transparent"
           $borderColor="#E1F0DA"
+          imgSrc="/images/sir.png"
         />
       </S.ProfileContainer>
     </Container>