diff --git a/src/assets/backend.png b/src/assets/backend.png new file mode 100644 index 0000000..295d255 Binary files /dev/null and b/src/assets/backend.png differ diff --git a/src/assets/big_logo.png b/src/assets/big_logo.png new file mode 100644 index 0000000..33cd665 Binary files /dev/null and b/src/assets/big_logo.png differ diff --git a/src/assets/card icon.png b/src/assets/card icon.png new file mode 100644 index 0000000..8cbca76 Binary files /dev/null and b/src/assets/card icon.png differ diff --git a/src/assets/carousel 1.png b/src/assets/carousel 1.png new file mode 100644 index 0000000..67ae234 Binary files /dev/null and b/src/assets/carousel 1.png differ diff --git a/src/assets/carousel 2.png b/src/assets/carousel 2.png new file mode 100644 index 0000000..c1a627a Binary files /dev/null and b/src/assets/carousel 2.png differ diff --git a/src/assets/carousel 3.png b/src/assets/carousel 3.png new file mode 100644 index 0000000..aa2f2ff Binary files /dev/null and b/src/assets/carousel 3.png differ diff --git a/src/assets/footer icon.png b/src/assets/footer icon.png new file mode 100644 index 0000000..ff8fe6a Binary files /dev/null and b/src/assets/footer icon.png differ diff --git a/src/assets/forntend.png b/src/assets/forntend.png new file mode 100644 index 0000000..5b392cc Binary files /dev/null and b/src/assets/forntend.png differ diff --git a/src/assets/hero banner1.png b/src/assets/hero banner1.png new file mode 100644 index 0000000..582a257 Binary files /dev/null and b/src/assets/hero banner1.png differ diff --git a/src/assets/hero banner2.png b/src/assets/hero banner2.png new file mode 100644 index 0000000..4cf9192 Binary files /dev/null and b/src/assets/hero banner2.png differ diff --git a/src/assets/hero banner3.png b/src/assets/hero banner3.png new file mode 100644 index 0000000..588907c Binary files /dev/null and b/src/assets/hero banner3.png differ diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..f5dcb15 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/assets/open_study.png b/src/assets/open_study.png new file mode 100644 index 0000000..4654038 Binary files /dev/null and b/src/assets/open_study.png differ diff --git a/src/assets/private.png b/src/assets/private.png new file mode 100644 index 0000000..a2216bd Binary files /dev/null and b/src/assets/private.png differ diff --git a/src/assets/private_study.png b/src/assets/private_study.png new file mode 100644 index 0000000..39e54fd Binary files /dev/null and b/src/assets/private_study.png differ diff --git a/src/assets/rangking.png b/src/assets/rangking.png new file mode 100644 index 0000000..8452d7e Binary files /dev/null and b/src/assets/rangking.png differ diff --git a/src/components/main/Banner.jsx b/src/components/main/Banner.jsx new file mode 100644 index 0000000..cc8b65b --- /dev/null +++ b/src/components/main/Banner.jsx @@ -0,0 +1,65 @@ +import styled from "styled-components"; +import bannerIcon1 from "../../assets/hero banner1.png"; +import bannerIcon2 from "../../assets/hero banner2.png"; +import bannerIcon3 from "../../assets/hero banner3.png"; + +const Banner = () => { + return ( + + + + 이제 혼자 + bannerIcon1가 아닌 +
+ + bannerIcon2 + 퀴즈업 + + 과 함께 CS면접 준비하고 취업하자! + + + + + ); +}; + +const BannerWrapper = styled.div` + width: 100%; + height: 537px; + margin: 31px 0 62px; + background-color: #5263ff; + display: flex; + justify-content: center; + align-items: center; +`; + +const BannerContent = styled.div` + display: flex; + align-items: center; +`; + +const BannerText = styled.span` + width: 570px; + height: 227px; + margin-right: 50px; + padding: 0 267px 85.3px 0; + font-family: Inter; + font-size: 50px; + font-weight: 600; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: left; + color: #fff; +`; + +const BannerText2 = styled.span` + color: #b6ff6d; +`; + +const BannerIcon3 = styled.img` + width: 542px; + height: 476px; +`; +export default Banner; diff --git a/src/components/main/Description.jsx b/src/components/main/Description.jsx new file mode 100644 index 0000000..8c2859a --- /dev/null +++ b/src/components/main/Description.jsx @@ -0,0 +1,195 @@ +import styled from "styled-components"; +import LogoImg from "../../assets/big_logo.png"; +import Carousel1 from "../../assets/carousel 1.png"; +import Carousel2 from "../../assets/carousel 2.png"; +import Carousel3 from "../../assets/carousel 3.png"; + +const Description = () => { + return ( + + + + 퀴즈업 + CS전공지식 공유 서비스 + + + {/* quiz up 설명 */} + + + 면접 한방 해결 + 문제집 + + + 내가 직접 만드는 나만의 CS문제집부터 +
다른 회원들의 다양한 문제집까지 +
+ 쏙쏙 골라 학습할 수 있어요. + + + + 인기 만점 BEST + 오늘의 랭킹 + + + 오늘 가장 많이 학습한 문제집과 +
스터디방의 BEST 3위를 확인하고 +
직접 학습해여 CS면접에 대비해보세요. + + + + 함께라서 든든한 + 스터디방 + + + 스터디방을 통해 CS지식을 공유하며 +
다양한 관점으로 정답의 폭을 넓히고,
+ 이달의 BEST3인에 도전해보세요. + + + + + + + ); +}; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +const ContentContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 20px; +`; + +const LogoIcon = styled.img` + width: 144px; + height: 145.8px; + object-fit: contain; + margin-bottom: 20px; +`; + +const LogoText = styled.span` + width: 267px; + height: 96px; + margin-top: 20px; + font-family: Inter; + font-size: 45px; + font-weight: 600; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #fff; +`; + +const Text = styled.span` + width: 300px; + height: 96px; + font-family: Inter; + font-size: 25px; + font-weight: 600; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #fff; +`; + +const BoxContainer = styled.div` + display: flex; + justify-content: center; + gap: 20px; + margin-bottom: 50px; +`; + +const Box = styled.div` + width: 418px; + width: 418px; + height: 580px; + padding: 37px 50px 71px 49px; + border-radius: 15px; + border: solid 1px #656565; + background-color: #24252a; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +`; + +const BoxTitle = styled.div` + width: 300px; + height: 60px; + font-family: Inter; + font-size: 45px; + font-weight: bold; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: ${(props) => props.color}; +`; + +const BoxSubTitle = styled.span` + width: 319px; + height: 60px; + font-family: Inter; + font-size: 16px; + font-weight: bold; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #fff; +`; + +const BoxImg1 = styled.img` + width: 261.8px; + height: 170px; + margin: 54px 21.2px 54px 36px; + object-fit: contain; +`; +const BoxImg2 = styled.img` + width: 321px; + height: 195.8px; + margin: 34px 0 48.2px; + object-fit: contain; +`; + +const BoxImg3 = styled.img` + width: 336px; + height: 129px; + margin: 83px 0 66px; + object-fit: contain; +`; + +const BoxText = styled.span` + width: 300px; + height: 81px; + font-family: Inter; + font-size: 16px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #fff; +`; + +const Line = styled.div` + width: 1314px; + height: 1px; + margin: 95px 303px 60px; + background-color: #5f5f5f; +`; + +export default Description; diff --git a/src/components/main/Ranking.jsx b/src/components/main/Ranking.jsx new file mode 100644 index 0000000..cc37713 --- /dev/null +++ b/src/components/main/Ranking.jsx @@ -0,0 +1,308 @@ +import styled from "styled-components"; +import RankingIcon from "../../assets/rangking.png"; +import CardIcon from "../../assets/card icon.png"; +import FrontendIcon from "../../assets/forntend.png"; +import BackendIcon from "../../assets/backend.png"; +import OpenStudyIcon from "../../assets/open_study.png"; +import PrivateStudyIcon from "../../assets/private_study.png"; +import LockIcon from "../../assets/lock.png"; +import { useNavigate } from "react-router-dom"; +import useToolTip from "../../hooks/useTooltip"; +import useModal from "../../hooks/useModal"; + +const Ranking = () => { + const navigate = useNavigate(); + + const Tooltip = useToolTip(""); + + const { openModal, Modal } = useModal(); + + // open modal + const handleModal = () => { + openModal(); + }; + + return ( + + + 오늘의 랭킹 + + 오늘 가장 많이 학습된 문제집과 인기 스터디방을 추천드려요. + + + + + + 문제집 + + + + + +
navigate("/front/:worklistid")}> + 디자인패턴 문제집 모음집 +
+ + + + + +
navigate("/back/:worklistid")}> + 디자인패턴 문제집 모음집 +
+ + + + + +
navigate("/back/:worklistid")}> + 디자인패턴 문제집 모음집 +
+ + + + + +
navigate("/front/:worklistid")}> + 디자인패턴 문제집 모음집 +
+ + + + + +
navigate("/front/:worklistid")}> + 디자인패턴 문제집 모음집 +
+ + + + + + + + 스터디방 + + + + + +
싱글톤패턴 문제 완벽 대비
{" "} + + + + + + +
navigate("/study/:studyroomid")}> + 싱글톤패턴 문제 완벽 대비 +
{" "} + + + + + +
싱글톤패턴 문제 완벽 대비
{" "} + + + + + + +
navigate("/study/:studyroomid")}> + 싱글톤패턴 문제 완벽 대비 +
{" "} + + + + + +
navigate("/study/:studyroomid")}> + 싱글톤패턴 문제 완벽 대비 +
{" "} + + + + + + + {/* 비공개 스터디방일 경우 modal */} + + +
+ + 이 스터디방은 비공개입니다. 가입코드를 입력해주세요. + + +
+ + + + ); +}; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +const Icon = styled.img` + width: 67px; + height: 67px; + margin-top: 50px; + margin-bottom: 50px; + object-fit: contain; +`; + +const Title = styled.div` + width: 267px; + height: 96px; + font-family: Inter; + font-size: 45px; + font-weight: 600; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #fff; +`; + +const Description = styled.div` + width: 800px; + height: 96px; + margin-bottom: 72px; + font-family: Inter; + font-size: 25px; + font-weight: 600; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: center; + color: #fff; +`; + +const ContentWrapper = styled.div` + display: flex; +`; + +const ItemWrapper = styled.div``; + +const ItemHeader = styled.div` + display: flex; + flex-direction: space-between; + align-items: center; + width: 615px; + height: 74px; + margin: 0 20px; + padding: 20px 20px 20px 30px; + background-color: ${(props) => props.color}; + border-radius: 13px 13px 0px 0px; +`; + +const ItemTitle = styled.span` + font-family: Inter; + font-size: 28px; + font-weight: 600; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: left; + color: #000; + margin-left: 20px; +`; + +const ItemIcon = styled.img` + width: 82px; + height: 22px; + margin-left: 380px; + object-fit: contain; +`; + +const ItemBody = styled.div` + width: 615px; + height: 330px; + margin: 0 20px; + padding: 20px 20px 20px 30px; + background-color: #fff; + border-radius: 0px 0px 13px 13px; +`; + +const Item = styled.div` + display: flex; + align-items: center; + cursor: pointer; + margin-bottom: 20px; + font-family: Inter; + font-size: 20px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: normal; + letter-spacing: normal; + text-align: left; + color: #000; +`; + +const ItemImage = styled.img` + width: 65px; + height: 19px; + margin-right: 20px; + object-fit: contain; +`; + +const Line = styled.div` + width: 615px; + height: 1.5px; + margin: 18.5px 0 19px; + background-color: #ddd; +`; + +const LockImg = styled.img` + width: 13.3px; + height: 17.5px; + flex-grow: 0; + color: #fa9600; + margin-left: 10px; +`; + +const ModalContent = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 100%; + margin-top: 60px; + font-size: 14px; + text-align: center; +`; + +const ModalBody = styled.div` + margin-bottom: 20px; + color: #c7c7c7; + text-align: center; +`; + +const CodeInput = styled.input` + border: none; + outline: none; + font-size: 18px; + width: 266px; + height: 37px; + padding: 4px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + border-radius: 5px; + background: linear-gradient(to bottom, #636363, #6363634d); + + &::placeholder { + color: #acacac; + font-size: 18px; + } +`; + +export default Ranking; diff --git a/src/hooks/useTooltip.js b/src/hooks/useTooltip.js new file mode 100644 index 0000000..eb9a66b --- /dev/null +++ b/src/hooks/useTooltip.js @@ -0,0 +1,66 @@ +import { useState } from "react"; +import styled from "styled-components"; +import help from "../assets/help.png"; + +const useToolTip = (defaultDescription) => { + const [hover, setHover] = useState(false); + + const handleMouseEnter = () => { + setHover(true); + }; + + const handleMouseLeave = () => { + setHover(false); + }; + + const TooltipComponent = ({ description }) => ( + + + + {description} + + + ); + + return TooltipComponent; +}; + +const TooltipContainer = styled.div` + position: relative; + display: inline-block; + padding: 4px 7px 3px; + + &:hover .description { + display: block; + } +`; + +const HelpImg = styled.img` + display: block; +`; + +const Description = styled.div` + display: none; + position: absolute; + background-color: #3f424e; + color: #fff; + font-family: Inter; + font-size: 10px; + font-weight: 500; + font-stretch: normal; + font-style: normal; + line-height: 1.7; + letter-spacing: normal; + text-align: left; + margin-bottom: 15px; + padding: 3px; + top: 100%; + left: 50%; + transform: translateX(-50%); + white-space: nowrap; +`; + +export default useToolTip; diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx index 6583dde..f405ada 100644 --- a/src/pages/Main.jsx +++ b/src/pages/Main.jsx @@ -1,5 +1,22 @@ +import styled from "styled-components"; +import Banner from "../components/main/Banner"; +import Description from "../components/main/Description"; +import Ranking from "../components/main/Ranking"; + const Main = () => { - return
메인페이지입니다
; + return ( + + + + + + + + ); }; +const Wrapper = styled.div` + margin: 0 auto; +`; + export default Main; diff --git a/src/shared/Footer.jsx b/src/shared/Footer.jsx index 425d3f7..1ca5a28 100644 --- a/src/shared/Footer.jsx +++ b/src/shared/Footer.jsx @@ -1,29 +1,44 @@ import styled from "styled-components"; +import FooterIcon from "../assets/footer icon.png"; export default function Footer() { return ( - (주) 퀴즈업 - - (주) 퀴즐렛 Copyrights ⓒ all rights reserved Quizup - Planner & Designer 김소민 Frontend 정서연 Frontend 한지수 Backend 이건희 - + + (주) 퀴즈업 + + (주) 퀴즐렛 Copyrights ⓒ all rights reserved Quizup + + Planner & Designer 김소민 Frontend 정서연 Frontend 한지수 Backend + 이건희 + + + + footer-icon ); -} +} const Wrapper = styled.footer` - height: 103px; - width: 1090px; - margin-bottom: 50px; - margin-top: 130px; + margin: 0; display: flex; + gap: 88px; + padding: 51px 0 90px 0; + background-color: #24252a; + margin-top: 188px; + justify-content: center; +`; + +const ContentWrapper = styled.div` + display: flex; + gap: 20px; flex-direction: column; - gap: 32px; + margin-left: 30px; + margin-right: 250px; `; const QuizUP = styled.div` - color: #5263FF; + color: #5263ff; font-size: 18px; font-weight: 600; `; @@ -35,6 +50,12 @@ const Info = styled.div` `; const Text = styled.div` - color: #A8A8A8; + color: #a8a8a8; font-size: 15px; -`; \ No newline at end of file +`; + +const Img = styled.img` + width: 328px; + height: 137px; + margin-right: 30px; +`; diff --git a/src/shared/Header.jsx b/src/shared/Header.jsx index 8501e7e..923f44e 100644 --- a/src/shared/Header.jsx +++ b/src/shared/Header.jsx @@ -3,6 +3,7 @@ import styled from "styled-components"; import { NavLink, useNavigate } from "react-router-dom"; import "../assets/fonts/font.css"; import Alarm from "../components/alarm/Alarm"; +import LogoImage from "../assets/logo.png"; const Header = () => { const userEmail = sessionStorage.getItem("userEmail"); @@ -12,7 +13,9 @@ const Header = () => { return ( - navigate("/")}>Quiz up + navigate("/")}> + logo + @@ -27,11 +30,11 @@ const Header = () => { + + 스터디방 + {isLoggedIn ? ( <> - - 스터디방 - @@ -42,10 +45,10 @@ const Header = () => { ) : ( <> - 로그인 + 로그인 - 회원가입 + 회원가입 )} @@ -69,16 +72,12 @@ const Wrapper = styled.header` } `; const Logo = styled.div` - font-family: "Unbounded"; - color: #5263ff; - font-size: 35px; - white-space: nowrap; - position: absolute; - left: 9vw; - @media (max-width: 1765px) { - position: static; - } + width: 176px; + height: 84px; + margin: 0 88px 31px 151px; + object-fit: contain; `; + const NavContainer = styled.nav` display: flex; max-width: 1090px; diff --git a/src/shared/Router.js b/src/shared/Router.js index 5afcd8c..ed2c108 100644 --- a/src/shared/Router.js +++ b/src/shared/Router.js @@ -22,6 +22,7 @@ import { WorkMake, } from "../pages"; import Header from "./Header"; +import Footer from "./Footer"; const Router = () => { return ( @@ -58,6 +59,7 @@ const Router = () => { /> } /> +