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

Feature/mainpage 메인 기능 완료

src/pages/DevDocument.jsx

@@ -1,12 +1,9 @@
 // DevDocument.jsx
 // 코드 작성자 : GiHhub @whitedev77773
-
 // 외부 라이브러리에서 import
 import React from 'react';
 import styled from 'styled-components';
-
 // 사용자가 생성한 컴포넌트 및 JS파일 import
-
 import { Container } from '../components/forms/Container';
 import { Text, Span } from '../components/typograph/Text';
 import { Checkbox } from '../components/forms/Checkbox';

src/pages/MainPage.jsx

@@ -1,41 +1,181 @@
 import React, { useEffect, useState, useRef } from 'react';
-import bg_img from '../assets/background_img.png';
+import { Text } from '../components/typograph/Text';
+import { Link } from 'react-router-dom';
+import Github from "../assets/icons/Github.png";
+import Instagream from "../assets/icons/Instagram.png";
+import Facebook from "../assets/icons/Facebook.png";
+import Youtube from "../assets/icons/Youtube.png";
 import kert_logo from '../assets/kert_logos/White_Icon.png';
 import Section2 from './Section2.jsx';
 import Section1 from './Section1.jsx';
 import Section3 from './Section3.jsx';
 import Section4 from './Section4.jsx';
+import Section5 from "./Section5.jsx";
+import Section6 from "./Section6.jsx";
+import Section7 from "./Section7.jsx";
 import '../font/main_font.css';
+import styled from 'styled-components';
 
-//스크롤바 기능 구현
-//section 파일로 화면 렌더링
+// Constants for styling and functionality
 const DIVIDER_HEIGHT = 5;
 
+// Styles for main container and footer
 const back_first_Style = {
   width: '100vw',
   height: '100vh',
   position: 'relative',
   overflow: 'hidden',
 };
 
-const pageStyle = {
+const dividerStyle = {
+  height: `${DIVIDER_HEIGHT}px`,
+  backgroundColor: 'transparent',
+};
+
+const footerStyle = (showFooter) => ({
+  position: 'fixed',
+  bottom: 0,
   width: '100vw',
-  height: '100vh',
+  height: '150px',
+  backgroundColor: '#333',
+  color: '#fff',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  fontSize: '3em',
-  color: '#fff',
-};
+  textAlign: 'center',
+  zIndex: 1000,
+  transition: 'opacity 0.3s ease',
+  opacity: showFooter ? 1 : 0,
+});
+
+const Footer = styled.footer`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0 20px;
+  width: 100%;
+  height: 150px;
+  background-color: #000;
+  z-index: 1000;
+  transition: opacity 0.3s ease;
+  opacity: ${({ showFooter }) => (showFooter ? 1 : 0)};
+  position: fixed;
+  bottom: 0;
+`;
+
+const LogoAddressCopyrightContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0px;
+  gap: 10px;
+  width: 500px;
+  height: 100px;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+`;
+
+const LogoAddressContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  width: 100%;
+`;
+
+const AddressText = styled.div`
+  font-family: 'NanumSquare Neo';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  color: #ffffff;
+`;
+
+const Logo = styled.div`
+  height: 40px;
+  background-image: url(${kert_logo});
+  background-repeat: no-repeat;
+  background-size: contain;
+  width: 50px;
+  margin-bottom: 5px;
+`;
+
+const CopyrightText = styled.div`
+  font-family: 'NanumSquare Neo';
+  font-style: normal;
+  font-weight: 200;
+  font-size: 12px;
+  color: #83878b;
+`;
+
+const HreyferContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0;
+  gap: 12px;
+
+  margin: 0 auto;
+  width: 500px;
+  height: 150px;
+
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+`;
+
+
+const TextHreyfer=styled(Link)`
+  font-family: 'NanumSquare Neo';
+  font-style: normal;
+  font-weight: 200;
+  font-size: 11px;
+  line-height: 18px;
+  color: #83878B;
+  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 */
+  padding: 0;
+`;
+
+const SNSIcon = styled.a`
+  width: 20px;
+  height: 20px;
+  background-color: #080f17;
+  border-radius: 50%;
+  background-image: url(${props => props.backgroundImage});
+  background-size: contain;
+  background-repeat: no-repeat;
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+
 
-const dividerStyle = {
-  height: `${DIVIDER_HEIGHT}px`,
-  backgroundColor: 'transparent',
-};
 
 export default function MainPage() {
   const outerDivRef = useRef();
   const [scrollIndex, setScrollIndex] = useState(1);
+  const [showFooter, setShowFooter] = useState(false);
 
   useEffect(() => {
     const wheelHandler = (e) => {
@@ -135,6 +275,10 @@ export default function MainPage() {
           setScrollIndex(1);
         }
       }
+
+      // Footer 표시 여부 결정
+      const shouldShowFooter = scrollTop >= pageHeight * 6; // Display after Section 7
+      setShowFooter(shouldShowFooter);
     };
 
     const outerDivRefCurrent = outerDivRef.current;
@@ -145,33 +289,53 @@ export default function MainPage() {
   }, []);
 
   return (
-    <div
-      ref={outerDivRef}
-      style={{
-        ...back_first_Style,
-        overflowY: 'scroll',
-        scrollSnapType: 'y mandatory',
-      }}
-    >
-      <Section1 />
-      <div style={dividerStyle}></div>
-      <Section2 />
-      <div style={dividerStyle}></div>
-      <Section3 />
-      <div style={dividerStyle}></div>
-      <Section4 />
-      <div style={dividerStyle}></div>
-      <div style={{ ...pageStyle, backgroundColor: 'rgba(50, 50, 50, 1)' }}>
-        Page 5
-      </div>
-      <div style={dividerStyle}></div>
-      <div style={{ ...pageStyle, backgroundColor: 'rgba(75, 75, 75, 1)' }}>
-        Page 6
+    <>
+      <div
+        ref={outerDivRef}
+        style={{
+          ...back_first_Style,
+          overflowY: 'scroll',
+          scrollSnapType: 'y mandatory',
+          paddingBottom: '150px', // Footer 공간을 위해 padding 추가
+        }}
+      >
+        <Section1 />
+        <div style={dividerStyle}></div>
+        <Section2 />
+        <div style={dividerStyle}></div>
+        <Section3 />
+        <div style={dividerStyle}></div>
+        <Section4 />
+        <div style={dividerStyle}></div>
+        <Section5 />
+        <div style={dividerStyle}></div>
+        <Section6 />
+        <div style={dividerStyle}></div>
+        <Section7 />
       </div>
-      <div style={dividerStyle}></div>
-      <div style={{ ...pageStyle, backgroundColor: 'rgba(100, 100, 100, 1)' }}>
-        Page 7
-      </div>
-    </div>
+      <Footer showFooter={showFooter}>
+        <LogoAddressCopyrightContainer>
+          <LogoAddressContainer>
+            <Logo />
+            <AddressText>대구광역시 북구 대학로80(경북대학교)</AddressText>
+          </LogoAddressContainer>
+          <CopyrightText>Copyright 2024. KERT from KNU all rights reserved.</CopyrightText>
+        </LogoAddressCopyrightContainer>
+        <HreyferContainer>
+          <TextHreyfer to="https://www.knu.ac.kr/wbbs/wbbs/main/main.action">경북대학교</TextHreyfer>
+          <TextHreyfer to="https://cse.knu.ac.kr/index.php">경북대학교 컴퓨터학부</TextHreyfer>
+          <TextHreyfer to="https://github.com/KERT-core">KERT 깃허브</TextHreyfer>
+          <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>
+
+      </Footer>
+    </>
   );
 }

src/pages/Section2.jsx

@@ -117,19 +117,19 @@ const lockIconContainerStyle = {
   display: 'flex',
   zIndex: 1,
   opacity: 0.9,
-  overflow: 'hidden', // This ensures the gradient overlay is properly contained
+  overflow: 'hidden', 
 };
 
 const statsStyle = {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'flex-start',
   fontSize: '0.5em',
-  marginTop: '20px', // Adjust margin to fit layout
-  transform: 'translateX(65%)',
-  opacity: 0.6,
+  marginTop: '20px',
+  flexDirection: 'column', // 요소 수직 정렬
 };
 
+
 export default function MainPage() {
   return (
     <div style={bg_Style}>