Skip to content

Commit

Permalink
Merge branch 'develop' of https://github.com/Bamdoliro/o_o into feat/#39
Browse files Browse the repository at this point in the history
  • Loading branch information
@seonghoon07
seonghoon07 committed Feb 12, 2024
2 parents 3bca3ba + 9d9a97a commit f4a1798
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 125 deletions.
37 changes: 18 additions & 19 deletions src/components/Header/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<S.HeaderContainer activeSection={activeSection}>
<S.Menu>
Expand All @@ -13,7 +13,7 @@ const Header = ({activeSection, onHeaderClick}) => {
activeSection === "introduce" ||
activeSection === "culture" ||
activeSection === "projects" ||
activeSection === "history" ||
activeSection === "histories" ||
activeSection === "member"
? black_logo
: white_logo
Expand All @@ -22,24 +22,23 @@ const Header = ({activeSection, onHeaderClick}) => {
/>
<S.Text>
{header.map((item) => (
<S.Url href={item.to} key={item.id} onClick={onHeaderClick}>
<S.MenuItem
className={
activeSection === "introduce" ||
activeSection === "culture" ||
activeSection === "projects" ||
activeSection === "history" ||
activeSection === "member"
? "active"
: ""
}
>
{item.title}
</S.MenuItem>
</S.Url>
))}
<S.Url href={item.to} key={item.id} onClick={onHeaderClick}>
<S.MenuItem
className={
activeSection === "introduce" ||
activeSection === "culture" ||
activeSection === "projects" ||
activeSection === "histories" ||
activeSection === "member"
? "active"
: ""
}
>
{item.title}
</S.MenuItem>
</S.Url>
))}
</S.Text>

</S.Menu>
</S.HeaderContainer>
);
Expand Down
65 changes: 4 additions & 61 deletions src/components/Header/style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)"};
Expand Down Expand Up @@ -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;
`;
*/
10 changes: 5 additions & 5 deletions src/datas/header.json
View file
Original file line number Diff line number Diff line change
@@ -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" }
]
77 changes: 37 additions & 40 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<ThemeProvider theme={{ activeSection }}>
Expand All @@ -43,38 +43,35 @@ const Home = () => {
<SwiperSlide data-hash="introduce">
<Introduce textNumber={iTextNumber} setTextNumber={setITextNumber} />
</SwiperSlide>
{
iTextNumber >= 5 ?
<>
<SwiperSlide data-hash="culture">
<Culture textNumber={cTextNumber} setTextNumber={setCTextNumber} />
</SwiperSlide>
{
cTextNumber >= 3 ?
<>
<SwiperSlide data-hash="projects">
<Projects />
</SwiperSlide>
<SwiperSlide data-hash="histories">
<Histories />
</SwiperSlide>
<SwiperSlide data-hash="member">
<Member />
</SwiperSlide>
<SwiperSlide data-hash="wind">
<Wind />
</SwiperSlide>
<SwiperSlide data-hash="footer">
<Footer />
</SwiperSlide>
</>
:
null
}
</>
:
null
}
{iTextNumber >= 5 ? (
<>
<SwiperSlide data-hash="culture">
<Culture
textNumber={cTextNumber}
setTextNumber={setCTextNumber}
/>
</SwiperSlide>
{cTextNumber >= 3 ? (
<>
<SwiperSlide data-hash="projects">
<Projects />
</SwiperSlide>
<SwiperSlide data-hash="histories">
<Histories />
</SwiperSlide>
<SwiperSlide data-hash="member">
<Member />
</SwiperSlide>
<SwiperSlide data-hash="wind">
<Wind />
</SwiperSlide>
<SwiperSlide data-hash="footer">
<Footer />
</SwiperSlide>
</>
) : null}
</>
) : null}
</Swiper>
</ThemeProvider>
);
Expand Down

0 comments on commit f4a1798

Please sign in to comment.