diff --git a/spirograph/src/App.js b/spirograph/src/App.js index e023075..6703c67 100644 --- a/spirograph/src/App.js +++ b/spirograph/src/App.js @@ -10,6 +10,7 @@ import LastPage from "./pages/spiro/LastPage.jsx"; import SaleListPage from "./pages/SaleList/index"; import BrandingPage from "./pages/brandingPage/index"; import BusinessPage from "./pages/businessPage/index"; +import ContactPage from "./pages/contactPage/index.jsx"; function App() { return ( @@ -19,11 +20,12 @@ function App() { } /> } /> } /> + } /> + } /> } /> } /> } /> - diff --git a/spirograph/src/assets/newSymbol.svg b/spirograph/src/assets/newSymbol.svg new file mode 100644 index 0000000..731bf63 --- /dev/null +++ b/spirograph/src/assets/newSymbol.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/spirograph/src/components/Header/Header.jsx b/spirograph/src/components/Header/Header.jsx index 6563920..91b3ac3 100644 --- a/spirograph/src/components/Header/Header.jsx +++ b/spirograph/src/components/Header/Header.jsx @@ -9,19 +9,21 @@ export const Header = () => {
-
+
-
navigate("./LogicPage")} > Symbol Logic -
+
diff --git a/spirograph/src/components/NavBar/Navbar.jsx b/spirograph/src/components/NavBar/Navbar.jsx index 975b178..19fa0d9 100644 --- a/spirograph/src/components/NavBar/Navbar.jsx +++ b/spirograph/src/components/NavBar/Navbar.jsx @@ -4,8 +4,8 @@ import * as S from "./styles"; import styled from "styled-components"; import { useNavigate } from "react-router-dom"; import Horizon from "../../components/NavBar/horizon"; -import Logo from "../../assets/brandingImg/Logoo.svg"; -const ImageWrapper = styled.div` +import Logo from "../../assets/newSymbol.svg"; +const ImageWrapper = styled.button` display: flex; width: 100%; //원래 1.69 @@ -66,23 +66,54 @@ const Navbar = () => { return ( - logo + logo { + navigate("/"); + }} + /> - Symbol Logic + + { + navigate("/branding"); + }} + > + Symbol Logic + - About + { + navigate("/branding"); + }} + > + About + - Business Model + { + navigate("/business"); + }} + > + Business Model + - Contact + { + navigate("/contact"); + }} + > + Contact + diff --git a/spirograph/src/components/NavBar/styles.jsx b/spirograph/src/components/NavBar/styles.jsx index c161a4f..58f0d2b 100644 --- a/spirograph/src/components/NavBar/styles.jsx +++ b/spirograph/src/components/NavBar/styles.jsx @@ -8,7 +8,6 @@ export const NavBar = styled.nav` flex-direction: row; /* margin-top: 2rem; */ height: 5vh; - position: fixed; top: 0; width: 100%; transition: top 0.3s; diff --git a/spirograph/src/components/NavbarMain.jsx b/spirograph/src/components/NavbarMain.jsx new file mode 100644 index 0000000..1d90109 --- /dev/null +++ b/spirograph/src/components/NavbarMain.jsx @@ -0,0 +1,136 @@ +import React, { useState, useEffect } from "react"; + +import * as S from "./NavBar/styles"; +import styled from "styled-components"; +import { useNavigate } from "react-router-dom"; +import Horizon from "../../components/NavBar/horizon"; +import Logo from "../../assets/newSymbol.svg"; +const ImageWrapper = styled.button` + display: flex; + width: 100%; + //원래 1.69 + margin-right: 2rem; + //원래 2.77rem + margin-left: 2.5rem; + height: 100%; +`; +const Image = styled.img` + display: block; + width: auto; +`; +const Group = styled.div` + display: flex; + flex-direction: column; + width: 100%; + margin-right: 1.25rem; + margin-bottom: 7.94rem; + text-align: start; + &:hover { + background-color: #fff; + transition: background-color 0.8s; + } +`; +const NavbarMain = () => { + const navigate = useNavigate(); + const [topOffset, setTopOffset] = useState(0); + const [lastScrollY, setLastScrollY] = useState(0); + + function handleClick() { + console.log("NavMenu가 클릭!"); + navigate("/about"); + } + + //NavBar 효과 + useEffect(() => { + const handleScroll = () => { + const currentScrollY = window.scrollY; + if (currentScrollY === 0) { + // 스크롤 위치가 0이면 고정 + setTopOffset(20); + } else if (currentScrollY > lastScrollY) { + // 스크롤 다운 + setTopOffset(-60); // navBar를 40px 위로 이동 + } else { + // 스크롤 업 + setTopOffset(0); // navBar를 맨 위에 붙이기 + } + setLastScrollY(currentScrollY); + }; + + window.addEventListener("scroll", handleScroll); + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, [lastScrollY]); + return ( + + + logo { + navigate("/"); + }} + /> + + + + + { + navigate("/branding"); + }} + > + Symbol Logic + + + + + { + navigate("/branding"); + }} + > + About + + + + + { + navigate("/business"); + }} + > + Business Model + + + + + { + navigate("/contact"); + }} + > + Contact + + + + + Shop + + + + + Model Graphic {">"}{" "} + + + + ); +}; + +export default NavbarMain; diff --git a/spirograph/src/components/Sketch/Sketch.jsx b/spirograph/src/components/Sketch/Sketch.jsx index 9a65444..085814c 100644 --- a/spirograph/src/components/Sketch/Sketch.jsx +++ b/spirograph/src/components/Sketch/Sketch.jsx @@ -311,24 +311,29 @@ const Sketch = ({
{isEnd && ( -
- - +
+
+ {/*
+ 홈으로 가기 +
+ AI를 활용하여 자신의 취향을 담아
더 멋진 심볼을 만들어 + 보아요! +
+
*/} + +
)}
diff --git a/spirograph/src/components/Sketch/Sketch.scss b/spirograph/src/components/Sketch/Sketch.scss index e1c2eb7..761638a 100644 --- a/spirograph/src/components/Sketch/Sketch.scss +++ b/spirograph/src/components/Sketch/Sketch.scss @@ -20,12 +20,14 @@ margin-bottom: 9vh; .button1, - .button2, + .button2 { + height: 20vh; + } .button3 { position: relative; display: flex; width: 17.5vw; /* 336 / 1920 * 100 */ - height: 7.78vh; /* 84 / 1080 * 100 */ + height: 10vh; /* 84 / 1080 * 100 */ padding: 2.59vw 4.11vh; flex-direction: column; justify-content: center; diff --git a/spirograph/src/pages/SaleList/index.jsx b/spirograph/src/pages/SaleList/index.jsx index ded0cc0..30e8730 100644 --- a/spirograph/src/pages/SaleList/index.jsx +++ b/spirograph/src/pages/SaleList/index.jsx @@ -4,6 +4,11 @@ import Nav from "../../components/NavBar/Navbar"; import BIcon from "../../assets/saleListImg/Bicon.svg"; import HorizonLine from "./horizonLine"; import Graph1 from "../../assets/saleListImg/graphh1.png"; +import Graph2 from "../../assets/saleListImg/graph2.png"; +import Graph3 from "../../assets/saleListImg/graph3.png"; +import Graph4 from "../../assets/saleListImg/graph4.png"; +import Graph5 from "../../assets/saleListImg/graph5.png"; +import Graph6 from "../../assets/saleListImg/graphh1.png"; const SaleListPage = () => { return ( @@ -33,7 +38,7 @@ const SaleListPage = () => { - + @@ -66,7 +71,7 @@ const SaleListPage = () => { - + @@ -99,7 +104,7 @@ const SaleListPage = () => { - + @@ -132,7 +137,7 @@ const SaleListPage = () => { - + @@ -165,7 +170,7 @@ const SaleListPage = () => { - + @@ -198,7 +203,7 @@ const SaleListPage = () => { - + diff --git a/spirograph/src/pages/SaleList/styles.jsx b/spirograph/src/pages/SaleList/styles.jsx index 5a1e23a..ef0a316 100644 --- a/spirograph/src/pages/SaleList/styles.jsx +++ b/spirograph/src/pages/SaleList/styles.jsx @@ -57,21 +57,25 @@ export const Card = styled.div` justify-content: center; font-size: 1rem; text-align: center; + margin: 0 1rem; `; export const ImgWrapper = styled.div` display: flex; align-items: center; justify-content: center; - width: 100%; + width: 19rem; + height: 27rem; flex: "1 0 auto"; + object-fit: contain; `; export const Img = styled.img` - width: 100%; - height: 100%; + width: 19rem; + height: 27rem; display: flex; align-items: center; justify-content: center; + object-fit: contain; `; export const TextWrapper = styled.div` text-align: start; diff --git a/spirograph/src/pages/businessPage/index.jsx b/spirograph/src/pages/businessPage/index.jsx index 53f5185..270c4c0 100644 --- a/spirograph/src/pages/businessPage/index.jsx +++ b/spirograph/src/pages/businessPage/index.jsx @@ -38,7 +38,7 @@ const whiteImages = [ { src: Thirteen, alt: "13" }, { src: Fourteen, alt: "14" }, ]; -export default function BrandingPage() { +export default function BusinessPage() { const navigate = useNavigate(); const Container = styled.div` diff --git a/spirograph/src/pages/contactPage/index.jsx b/spirograph/src/pages/contactPage/index.jsx new file mode 100644 index 0000000..1013e06 --- /dev/null +++ b/spirograph/src/pages/contactPage/index.jsx @@ -0,0 +1,11 @@ +import * as React from "react"; +import Nav from "../../components/NavBar/Navbar"; +import Bar from "../../components/UnderBar/Bar"; +export default function ContactPage() { + return ( + <> +