From 9d9a97a3e8fb939f27832a9302b991ddb81249f8 Mon Sep 17 00:00:00 2001 From: E-jiwoo Date: Mon, 12 Feb 2024 17:16:48 +0900 Subject: [PATCH] =?UTF-8?q?ADD=20::=20move=20histories=20page=20-=20?= =?UTF-8?q?=ED=97=A4=EB=8D=94=EC=97=90=EC=84=9C=20=ED=8C=80=20=EC=97=B0?= =?UTF-8?q?=ED=98=81=20=EB=88=84=EB=A5=BC=20=EC=8B=9C=20histories=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header/index.js | 37 ++++++++-------- src/components/Header/style.js | 65 ++-------------------------- src/datas/header.json | 10 ++--- src/pages/index.js | 77 ++++++++++++++++------------------ 4 files changed, 64 insertions(+), 125 deletions(-) diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 4f43d24..8f0820f 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -4,7 +4,7 @@ import black_logo from "../../assets/black_logo.svg"; import white_logo from "../../assets/white_logo.svg"; import header from "../../datas/header.json"; -const Header = ({activeSection, onHeaderClick}) => { +const Header = ({ activeSection, onHeaderClick }) => { return ( @@ -13,7 +13,7 @@ const Header = ({activeSection, onHeaderClick}) => { activeSection === "introduce" || activeSection === "culture" || activeSection === "projects" || - activeSection === "history" || + activeSection === "histories" || activeSection === "member" ? black_logo : white_logo @@ -22,24 +22,23 @@ const Header = ({activeSection, onHeaderClick}) => { /> {header.map((item) => ( - - - {item.title} - - - ))} + + + {item.title} + + + ))} - ); diff --git a/src/components/Header/style.js b/src/components/Header/style.js index 483df2f..1cce234 100644 --- a/src/components/Header/style.js +++ b/src/components/Header/style.js @@ -8,7 +8,7 @@ export const HeaderContainer = styled.div` props.activeSection === "introduce" || props.activeSection === "culture" || props.activeSection === "projects" || - props.activeSection === "history" || + props.activeSection === "histories" || props.activeSection === "member" ? "rgba(255, 255, 255, 0.06)" : "rgba(62, 61, 63, 0.30)"}; @@ -53,71 +53,14 @@ export const MenuItem = styled.li` `; export const Text = styled.div` - display:flex; -` -export const Url = styled.a` - text-decoration : none; -` - -export const Logo = styled.img` - width: 170px; - height: 20px; - margin-right: 500px; -`; - -/*import styled from "styled-components"; - -export const HeaderContainer = styled.div` - position: fixed; - top: 0; - z-index: 1000; - background-color: ${(props) => - props.activeSection === "introduce" || - props.activeSection === "culture" || - props.activeSection === "projects" || - props.activeSection === "history" || - props.activeSection === "member" - ? "rgba(255, 255, 255, 0.06)" - : "rgba(62, 61, 63, 0.30)"}; - border-bottom: 1px solid rgba(62, 61, 63, 0.3); - backdrop-filter: blur(5px); -`; - -export const Menu = styled.ul` display: flex; - align-items: center; - color: black; - width: 100vw; - height: 60px; - font-size: 20px; - font-weight: 600; - margin-left: 170px; `; - -export const MenuItem = styled.li` - list-style-type: none; - margin-right: 30px; - cursor: pointer; - position: relative; - - color: ${(props) => (props.className === "active" ? "black" : "white")}; - - &:hover::before { - content: ""; - position: absolute; - top: -8px; - left: -12px; - right: -12px; - bottom: -8px; - background: rgba(238, 238, 238, 0.6); - z-index: -1; - border-radius: 6px; - } +export const Url = styled.a` + text-decoration: none; `; export const Logo = styled.img` width: 170px; height: 20px; - margin-right: 570px; + margin-right: 500px; `; -*/ diff --git a/src/datas/header.json b/src/datas/header.json index c1c07ba..26a6012 100644 --- a/src/datas/header.json +++ b/src/datas/header.json @@ -1,7 +1,7 @@ [ - { "id": 0, "title": "팀 소개", "to": "/#introduce" }, - { "id": 1, "title": "팀 문화", "to": "/#culture" }, - { "id": 2, "title": "프로젝트", "to": "/#projects" }, - { "id": 3, "title": "팀 연혁", "to": "/#history" }, - { "id": 4, "title": "팀원 소개", "to": "/#member" } + { "id": 0, "title": "팀 소개", "to": "/#introduce" }, + { "id": 1, "title": "팀 문화", "to": "/#culture" }, + { "id": 2, "title": "프로젝트", "to": "/#projects" }, + { "id": 3, "title": "팀 연혁", "to": "/#histories" }, + { "id": 4, "title": "팀원 소개", "to": "/#member" } ] diff --git a/src/pages/index.js b/src/pages/index.js index 6683b90..7d3403c 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,24 +1,24 @@ import React, { useEffect, useRef, useState } from "react"; import { ThemeProvider, createGlobalStyle } from "styled-components"; -import Header from "../components/Header" -import Main from "./Layouts/Main" +import Header from "../components/Header"; +import Main from "./Layouts/Main"; import { Swiper, SwiperSlide } from "swiper/react"; -import { Mousewheel, HashNavigation, Navigation } from 'swiper/modules'; -import 'swiper/css' +import { Mousewheel, HashNavigation, Navigation } from "swiper/modules"; +import "swiper/css"; import Introduce from "./Layouts/Introduce"; import Histories from "./Layouts/Histories"; import Projects from "./Layouts/Projects"; import Culture from "./Layouts/Culture"; -import Member from "./Layouts/Member" +import Member from "./Layouts/Member"; import Wind from "./Layouts/Wind"; -import Footer from "./Layouts/Footer" +import Footer from "./Layouts/Footer"; const Home = () => { const [activeSection, setActiveSection] = useState(""); - const [iTextNumber, setITextNumber] = useState(0) - const [cTextNumber, setCTextNumber] = useState(0) + const [iTextNumber, setITextNumber] = useState(0); + const [cTextNumber, setCTextNumber] = useState(0); return ( @@ -42,38 +42,35 @@ const Home = () => { - { - iTextNumber >= 5 ? - <> - - - - { - cTextNumber >= 3 ? - <> - - - - - - - - - - - - - -