From 7e66f768cfe5ed08adde51fb88aefa032002a7d5 Mon Sep 17 00:00:00 2001 From: SeyeonJang Date: Sun, 18 Aug 2024 19:01:50 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20[#57]=20MainPage=20UI,=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/assets/mainpage.svg | 156 ++++++++++++++++++ FITple-Frontend/src/App.jsx | 2 + .../src/pages/MainPage/MainPage.jsx | 20 +++ .../src/pages/MainPage/MainPage.style.js | 52 ++++++ 4 files changed, 230 insertions(+) create mode 100644 FITple-Frontend/assets/mainpage.svg create mode 100644 FITple-Frontend/src/pages/MainPage/MainPage.jsx create mode 100644 FITple-Frontend/src/pages/MainPage/MainPage.style.js diff --git a/FITple-Frontend/assets/mainpage.svg b/FITple-Frontend/assets/mainpage.svg new file mode 100644 index 0000000..32c8fc9 --- /dev/null +++ b/FITple-Frontend/assets/mainpage.svg @@ -0,0 +1,156 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx index 5298897..cc845ff 100644 --- a/FITple-Frontend/src/App.jsx +++ b/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 ( <> {/* Navbar 없는 layout */} }> + }/> {/* 로그인페이지 */} } /> {/* 회원가입페이지 */} diff --git a/FITple-Frontend/src/pages/MainPage/MainPage.jsx b/FITple-Frontend/src/pages/MainPage/MainPage.jsx new file mode 100644 index 0000000..e93a498 --- /dev/null +++ b/FITple-Frontend/src/pages/MainPage/MainPage.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Container, Header, Logo, Button, ImageWrapper } from './MainPage.style'; +import fitpleLogo from '../../../assets/Logo.svg'; +import mainPageImage from '../../../assets/mainpage.svg'; + +const MainPage = () => { + return ( + +
+ + +
+ + Main Page + + + ); +}; + +export default MainPage; diff --git a/FITple-Frontend/src/pages/MainPage/MainPage.style.js b/FITple-Frontend/src/pages/MainPage/MainPage.style.js new file mode 100644 index 0000000..91332fb --- /dev/null +++ b/FITple-Frontend/src/pages/MainPage/MainPage.style.js @@ -0,0 +1,52 @@ +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; + background-color: #fff; + border-bottom: 1px solid #e0e0e0; +`; + +export const Logo = styled.img` + height: 40px; +`; + +export const Button = styled.button` + background-color: #007bff; + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 4px; + 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; + } +`; From 4645b92a9c3234c87f3057fc3d9c6a14ae64cea6 Mon Sep 17 00:00:00 2001 From: SeyeonJang Date: Sun, 18 Aug 2024 19:34:37 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20[#57]=20=EB=B2=84=ED=8A=BC,=20?= =?UTF-8?q?=EB=A1=9C=EA=B3=A0=20UI=20=EB=94=94=ED=85=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/src/pages/MainPage/MainPage.jsx | 9 ++++++--- .../src/pages/MainPage/MainPage.style.js | 16 ++++++++++++++-- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/FITple-Frontend/src/pages/MainPage/MainPage.jsx b/FITple-Frontend/src/pages/MainPage/MainPage.jsx index e93a498..596b66b 100644 --- a/FITple-Frontend/src/pages/MainPage/MainPage.jsx +++ b/FITple-Frontend/src/pages/MainPage/MainPage.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Container, Header, Logo, Button, ImageWrapper } from './MainPage.style'; +import { Container, Header, LogoContainer, Logo, MainText, Button, ImageWrapper } from './MainPage.style'; import fitpleLogo from '../../../assets/Logo.svg'; import mainPageImage from '../../../assets/mainpage.svg'; @@ -7,8 +7,11 @@ const MainPage = () => { return (
- - + + + FITple + +
Main Page diff --git a/FITple-Frontend/src/pages/MainPage/MainPage.style.js b/FITple-Frontend/src/pages/MainPage/MainPage.style.js index 91332fb..28deaaf 100644 --- a/FITple-Frontend/src/pages/MainPage/MainPage.style.js +++ b/FITple-Frontend/src/pages/MainPage/MainPage.style.js @@ -12,21 +12,33 @@ export const Header = styled.header` display: flex; justify-content: space-between; align-items: center; - padding: 16px; + 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: 4px; + border-radius: 20px; cursor: pointer; font-size: 16px; From 3cfad296da3801a4706ced968515084bcfffd6ea Mon Sep 17 00:00:00 2001 From: SeyeonJang Date: Sun, 18 Aug 2024 19:46:49 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20[#57]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=A0=84=ED=99=98=EB=90=98=EB=8A=94=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FITple-Frontend/src/pages/MainPage/MainPage.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/FITple-Frontend/src/pages/MainPage/MainPage.jsx b/FITple-Frontend/src/pages/MainPage/MainPage.jsx index 596b66b..e830f3c 100644 --- a/FITple-Frontend/src/pages/MainPage/MainPage.jsx +++ b/FITple-Frontend/src/pages/MainPage/MainPage.jsx @@ -2,8 +2,14 @@ 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'); + }; -const MainPage = () => { return (
@@ -11,7 +17,7 @@ const MainPage = () => { FITple - +
Main Page