Merge pull request #58 from UMC-FITple/feat/#57

Feat/#57 메인페이지 UI 생성

FITple-Frontend/src/App.jsx

@@ -27,12 +27,14 @@ import Layout from "./layout/Layout";
 import LayoutNavBlue from "./layout/LayoutNavBlue";
 import SearchMainPage from "./pages/SearchMainPage/SearchMainPage";
 import BrandPage from "./pages/BrandPage/BrandPage";
+import MainPage from "./pages/MainPage/MainPage";
 function App() {
   return (
     <>
       <Routes>
         {/* Navbar 없는 layout */}
         <Route element={<LayoutNonNav />}>
+          <Route path="/" element={<MainPage/>}/>
           {/* 로그인페이지 */}
           <Route path="/login" element={<LoginPage />} />
           {/* 회원가입페이지 */}

FITple-Frontend/src/pages/MainPage/MainPage.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Container, Header, LogoContainer, Logo, MainText, Button, ImageWrapper } from './MainPage.style';
+import fitpleLogo from '../../../assets/Logo.svg';
+import mainPageImage from '../../../assets/mainpage.svg';
+import { useNavigate } from "react-router-dom";
+
+function MainPage() {
+    const navigate = useNavigate();
+    const handleLoginClick = () => {
+        navigate('/login');
+    };
+
+    return (
+        <Container>
+        <Header>
+            <LogoContainer>
+                <Logo src={fitpleLogo} alt="Fitple Logo" />
+                <MainText>FITple</MainText>
+            </LogoContainer>
+            <Button onClick={handleLoginClick}>로그인 / 회원가입</Button>
+        </Header>
+        <ImageWrapper>
+            <img src={mainPageImage} alt="Main Page" />
+        </ImageWrapper>
+        </Container>
+    );
+};
+
+export default MainPage;

FITple-Frontend/src/pages/MainPage/MainPage.style.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden;
+`;
+
+export const Header = styled.header`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 120px;
+    background-color: #fff;
+    border-bottom: 1px solid #e0e0e0;
+`;
+
+export const LogoContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+`;
+
+export const Logo = styled.img`
+    height: 40px;
+`;
+
+export const MainText = styled.p`
+    font-size: 20px;
+    font-weight: 600;
+    margin-left: 10px;
+`;
+
+export const Button = styled.button`
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 16px;
+
+    &:hover {
+        background-color: #0056b3;
+    }
+`;
+
+export const ImageWrapper = styled.div`
+    width: 100%;
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f8f9fa;
+
+    img {
+        width: 100%;
+        height: auto;
+        display: block;
+    }
+`;