Merge pull request #50 from KERT-core/feature/mainpage

Feature/mainpage :: Section7 media 코드 추가
KERT-core · Oct 7, 2024 · 9f20516 · 9f20516
2 parents 7537a09 + 72f0bc6
commit 9f20516
Show file tree

Hide file tree

Showing 11 changed files with 501 additions and 430 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "prettier": "^3.3.3",
-    "vite": "^5.3.4",
+    "vite": "^5.4.8",
     "vite-plugin-svgr": "^4.2.0"
   },
   "optionalDependencies": {

diff --git a/src/components/navigation/Navigation.jsx b/src/components/navigation/Navigation.jsx
@@ -1,7 +1,5 @@
 import styled from 'styled-components';
-
 import useTheme from '../../hooks/useTheme';
-
 import { Link } from 'react-router-dom';
 import { Toggle } from '../forms/Toggle';
 

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Text } from '../components/typograph/Text';
+import { Text, Span } from '../components/typograph/Text';
 import { Link } from 'react-router-dom';
 import Github from "../assets/icons/Github.png";
 import Instagream from "../assets/icons/Instagram.png";
@@ -27,11 +27,6 @@ const back_first_Style = {
   overflow: 'hidden',
 };
 
-const dividerStyle = {
-  height: `${DIVIDER_HEIGHT}px`,
-  backgroundColor: 'transparent',
-};
-
 const footerStyle = (showFooter) => ({
   position: 'fixed',
   bottom: 0,
@@ -63,6 +58,11 @@ const Footer = styled.footer`
   bottom: 0;
 `;
 
+const Divider = styled.div`
+  height: ${DIVIDER_HEIGHT}px;
+  background-color: transparent;
+`;
+
 const LogoAddressCopyrightContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -119,16 +119,15 @@ const HreyferContainer = styled.div`
   gap: 12px;
 
   margin: 0 auto;
-  width: 500px;
+  width: 700px;
   height: 150px;
 
   flex: none;
   order: 0;
   flex-grow: 0;
 `;
 
-
-const TextHreyfer=styled(Link)`
+const TextHreyfer = styled(Link)`
   font-family: 'NanumSquare Neo';
   font-style: normal;
   font-weight: 200;
@@ -137,19 +136,19 @@ const TextHreyfer=styled(Link)`
   color: #83878B;
   text-decoration: none;
 
-    &:focus, &:hover, &:visited, &:link, &:active {
-        text-decoration: none;
-    }
-`
+  &:focus, &:hover, &:visited, &:link, &:active {
+    text-decoration: none;
+  }
+`;
 
 const SNSLinkContainer = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-start;  /* Aligns icons to the left */
   align-items: center;
   gap: 50px;
-  width: 100%; /* Make sure the container stretches across the full width */
-  height: auto; /* Adjust the height to be dynamic */
+  width: 100%; 
+  height: auto; 
   padding: 0;
 `;
 
@@ -169,9 +168,6 @@ const SNSIcon = styled.a`
   }
 `;
 
-
-
-
 export default function MainPage() {
   const outerDivRef = useRef();
   const [scrollIndex, setScrollIndex] = useState(1);
@@ -300,17 +296,17 @@ export default function MainPage() {
         }}
       >
         <Section1 />
-        <div style={dividerStyle}></div>
+        <Divider />
         <Section2 />
-        <div style={dividerStyle}></div>
+        <Divider />
         <Section3 />
-        <div style={dividerStyle}></div>
+        <Divider />
         <Section4 />
-        <div style={dividerStyle}></div>
+        <Divider />
         <Section5 />
-        <div style={dividerStyle}></div>
+        <Divider />
         <Section6 />
-        <div style={dividerStyle}></div>
+        <Divider />
         <Section7 />
       </div>
       <Footer showFooter={showFooter}>
@@ -328,13 +324,12 @@ export default function MainPage() {
           <TextHreyfer to="https://hspace.io/login">HSpace</TextHreyfer>
           <Text size="xs" weight="light">오픈소스 라이선스</Text>
         </HreyferContainer>
-          <SNSLinkContainer>
-            <SNSIcon href="https://github.com/KERT-core" backgroundImage={Github} target="_blank" />
-            <SNSIcon href="https://youtube.com/@kert_knu593" backgroundImage={Youtube} target="_blank" />
-            <SNSIcon href="https://www.facebook.com/KNU.KERT" backgroundImage={Facebook} target="_blank" />
-            <SNSIcon href="https://instagram.com/knu_kert" backgroundImage={Instagream} target="_blank" />
-          </SNSLinkContainer>
-
+        <SNSLinkContainer>
+          <SNSIcon href="https://github.com/KERT-core" backgroundImage={Github} target="_blank" />
+          <SNSIcon href="https://youtube.com/@kert_knu593" backgroundImage={Youtube} target="_blank" />
+          <SNSIcon href="https://www.facebook.com/KNU.KERT" backgroundImage={Facebook} target="_blank" />
+          <SNSIcon href="https://instagram.com/knu_kert" backgroundImage={Instagream} target="_blank" />
+        </SNSLinkContainer>
       </Footer>
     </>
   );

diff --git a/src/pages/Section1.jsx b/src/pages/Section1.jsx
@@ -3,13 +3,7 @@ import bg_img from '../assets/background_img.png';
 import kert_logo from '../assets/kert_logos/White_Icon.png';
 import '../font/main_font.css';
 import styled from 'styled-components';
-
-const back_first_Style = {
-  width: '100vw',
-  height: '100vh',
-  position: 'relative',
-  overflow: 'hidden',
-};
+import { Text, Span } from '../components/typograph/Text';
 
 const BackFirst = styled.div`
   width: 100vw;
@@ -18,77 +12,86 @@ const BackFirst = styled.div`
   overflow: hidden;
 `;
 
-const backgroundStyle = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url(${bg_img})`,
-  backgroundSize: 'cover',
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center center',
-  filter: 'blur(12px)',
-  zIndex: -1,
-};
 
-const contentStyle = {
-  position: 'relative',
-  zIndex: 1,
-  textAlign: 'center',
-  paddingTop: '100px',
-};
+const Background = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.3),
+      rgba(0, 0, 0, 1)
+    ),
+    url(${bg_img});
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  filter: blur(12px);
+  z-index: -1;
+`;
 
-const logoContainerStyle = {
-  position: 'absolute',
-  bottom: '0',
-  left: '50%',
-  transform: 'translateX(-50%)',
-  width: '400px',
-  height: '200px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  zIndex: 1,
-};
 
-const blurredLogoStyle = {
-  width: '100%',
-  height: 'auto',
-  filter: 'brightness(30%) blur(6px)',
-  mixBlendMode: 'multiply',
-};
+const Content = styled.div`
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  padding-top: 100px;
+`;
+
+
+const LogoContainer = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 400px;
+  height: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+`;
 
-const headerStyle = {
-  fontFamily: 'NanumSquareNeo',
-  fontWeight: 700,
-  color: '#fff',
-  fontSize: '2em',
-};
 
-const subtitleStyle = {
-  fontFamily: 'NanumSquareNeo',
-  fontWeight: 600,
-  color: '#fff',
-  fontSize: '1em',
-  paddingTop: '15px',
-};
+const BlurredLogo = styled.img`
+  width: 100%;
+  height: auto;
+  filter: brightness(30%) blur(6px);
+  mix-blend-mode: multiply;
+`;
+
+
+const Title = styled(Span).attrs({
+  $weight: 'extrabold',
+})`
+  font-size: clamp(36px, 4vw, 60px);
+  word-break: keep-all;
+  margin-Top:50px;
+  margin-Bottom:50px;
+`;
+
+const Subtitle = styled(Span).attrs({
+  $weight: 'regular',
+})`
+  font-size: clamp(16px, 2vw, 15px);
+  word-break: keep-all;
+  margin-Top:50px;
+  margin-Bottom:50px;
+`;
 
 export default function Section1() {
   return (
     <BackFirst>
-      <div style={backgroundStyle}></div>
-      <div style={contentStyle}>
-        <div style={headerStyle}>
-          <h1>KERT</h1>
-        </div>
-        <div style={subtitleStyle}>
-          <p>KNU Computer Emergency Response Team</p>
-        </div>
-      </div>
-      <div style={logoContainerStyle}>
-        <img src={kert_logo} alt="KERT Logo" style={blurredLogoStyle} />
-      </div>
+      <Background />
+      <Content>
+        <Title>KERT</Title>
+        <Subtitle>KNU Computer Emergency Response Team</Subtitle>
+      </Content>
+      <LogoContainer>
+        <BlurredLogo src={kert_logo} alt="KERT Logo" />
+      </LogoContainer>
     </BackFirst>
   );
 }