KERT-core · Village-GG-Water · Oct 11, 2024 · Oct 7, 2024 · Oct 7, 2024 · Oct 9, 2024
diff --git a/src/App.jsx b/src/App.jsx
@@ -27,6 +27,8 @@ import Login from './pages/Login';
 import SignUp from './pages/SignUp';
 import MyPage from './pages/MyPage';
 
+import History from './pages/History';
+
 export default function App() {
   // location.key을 통해 화면 전환 시 컴포넌트 충돌/중복 방지 용으로 사용됩니다.
   const location = useLocation();
@@ -40,6 +42,7 @@ export default function App() {
           <Routes>
             <Route path="/" element={<MainLayout />}>
               <Route index path="/" element={<MainPage />} />
+              <Route path="/history" element={<History />} />
               <Route path="/developer" element={<DevDocument />} />
               <Route path="/board">
                 <Route index path="/board" element={<Board />} />

diff --git a/src/components/display/ShapeBackground.jsx b/src/components/display/ShapeBackground.jsx
@@ -0,0 +1,122 @@
+import styled, { keyframes } from 'styled-components';
+
+const rotate = ($startAngle, $direction) => keyframes`
+  0% {
+    transform: rotate(${$startAngle}deg);
+  }
+  100% {
+    transform: rotate(${$startAngle + ($direction === 'counterclockwise' ? -360 : 360)}deg);
+  }
+`;
+
+const Container = styled.div.attrs({ className: 'shape-background' })`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: max(118vw, 195vh);
+  height: max(118vw, 195vh);
+`;
+
+const Shape = styled.div`
+  position: absolute;
+  ${({ $top }) => $top && `top: ${$top};`}
+  ${({ $left }) => $left && `left: ${$left};`}
+  ${({ $right }) => $right && `right: ${$right};`}
+  ${({ $bottom }) => $bottom && `bottom: ${$bottom};`}
+
+  width: ${({ size }) => size || '200px'};
+  height: ${({ size }) => size || '200px'};
+  border-radius: ${({ radius }) => radius || '20px'};
+  background-color: ${({ color }) => color || '#213EA6'};
+
+  opacity: 0.03;
+  overflow: hidden;
+
+  animation: ${({ $startAngle, $direction }) => rotate($startAngle, $direction)}
+    ${({ speed }) => speed || '75s'} linear infinite;
+
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #ffffff00, #ffffffff);
+  }
+`;
+
+const shapes = [
+  // vw 계산: Figma 픽셀값 / 2265
+  // vh 계산: Figma 픽셀값 / 2104
+  <Shape
+    key={0}
+    color="#0019FF"
+    size="25vw"
+    $top="2.8vw"
+    $left="6vw"
+    radius="2.6vw"
+    $startAngle={15}
+  />,
+  <Shape
+    key={1}
+    color="#00FF85"
+    size="7.8vw"
+    $top="20vw"
+    $left="50vw"
+    radius="1.7vw"
+    $startAngle={-6}
+    $direction="counterclockwise"
+    speed="90s"
+  />,
+  <Shape
+    key={2}
+    color="#00F0FF"
+    size="11vw"
+    $top="11.5vw"
+    $right="14.8vw"
+    radius="1.9vw"
+    $startAngle={-15}
+    speed="80s"
+  />,
+  <Shape
+    key={3}
+    color="#7000FF"
+    size="23.8vw"
+    $top="38.6vw"
+    $right="0vw"
+    radius="100%"
+    $startAngle={-15}
+    speed="50s"
+  />,
+  <Shape
+    key={4}
+    color="#00F0FF"
+    size="5.1vw"
+    $top="65vw"
+    $right="32vw"
+    radius="1vw"
+    $startAngle={15}
+  />,
+  <Shape
+    key={5}
+    color="#0019FF"
+    size="25vw"
+    $top="55vw"
+    $left="20vw"
+    radius="2.6vw"
+    $startAngle={-30}
+    $direction="counterclockwise"
+  />,
+  <Shape
+    key={6}
+    color="#0019FF"
+    size="8.1vw"
+    $top="48.3vw"
+    $right="50.6vw"
+    radius="100%"
+  />,
+];
+
+export const ShapeBackground = () => {
+  return <Container>{shapes.map((shape) => shape)}</Container>;
+};
diff --git a/src/pages/History.jsx b/src/pages/History.jsx
@@ -0,0 +1,200 @@
+import styled from 'styled-components';
+import { ShapeBackground } from '../components/display/ShapeBackground';
+import { Text, Span } from '../components/typograph/Text';
+import React, { useEffect, useRef, useState } from 'react';
+
+const BackgroundWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+
+  & > div.shape-background {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+
+const Title = styled(Span).attrs({
+  $weight: 'extrabold',
+})`
+  font-size: clamp(36px, 4vw, 40px);
+  word-break: keep-all;
+`;
+
+const Description = styled(Span).attrs({
+  $weight: 'light',
+  $color:"rgba(255, 255, 255, 0.7)"
+})`
+  font-size: clamp(16px, 2vw, 18px);
+  word-break: keep-all;
+  margin-top: 10px; 
+`;
+
+const Year = styled(Span).attrs({
+  $weight: 'bold',
+})`
+  font-size: clamp(36px, 4vw, 40px);
+  word-break: keep-all;
+  color: ${(props) => props.$color || '#FFFFFF'}; 
+
+`
+
+const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0px;
+  gap: 12px;
+
+  position: absolute;
+  width: 378px;
+  height: 96px;
+  left: calc(50% - 189px);
+  top: 150px;
+`;
+
+
+const YearHistoryContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 50px; 
+  width: 100%;
+`;
+
+
+const HistoryFrame = styled.div`
+  display: flex;
+  flex-direction: column; 
+  align-items: flex-start;
+  padding: 0px;
+  gap: 50px; 
+
+  position: absolute; 
+  top: 300px;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+
+const HistoryCardContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-content: flex-start;
+  padding: 0px;
+  gap: 20px;
+
+  width: 700px;
+`;
+
+const HistoryCard = styled.div`
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 20px;
+  gap: 10px;
+
+  width: auto; 
+  height: 58px;
+
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), inset 4px 4px 20px rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+
+  border-radius: 10px;
+`;
+
+const Month = styled(Span).attrs((props) => ({
+  $weight: 'bold',
+  $color: props.$color || '#FFFFFF', 
+}))`
+  font-size: clamp(18px, 2vw, 12px);
+  word-break: keep-all;
+  color: ${(props) => props.$color}; 
+`;
+
+const HistoryContent = styled(Span).attrs((props) => ({
+  $weight: 'regular',
+  $color: props.$color || '#FFFFFF', 
+}))`
+  font-size: clamp(14px, 2vw, 12px);
+  word-break: keep-all;
+  color: ${(props) => props.$color}; 
+`;
+
+
+
+
+export default function History() {
+
+  return (
+    <BackgroundWrapper>
+      <TitleContainer>
+        <Title>KERT 연혁</Title>
+        <Description>KERT는 매년 성장하는 동아리입니다</Description>
+      </TitleContainer>
+
+      {/*Histroy 전체 컨테이너 시작 지점입니다. */}
+      <HistoryFrame>
+        {/* 2024 */}
+
+        <YearHistoryContainer>
+          <Year>2024</Year>
+          <HistoryCardContainer>
+            <HistoryCard>
+              <Month>4월</Month>
+              <HistoryContent>전국 사이버 보안 연합 CCA 소속</HistoryContent>
+            </HistoryCard>
+            <HistoryCard>
+              <Month>5월</Month>
+              <HistoryContent>정보 보호 대학 동아리 연합 KUCIS 소속</HistoryContent>
+            </HistoryCard>
+          </HistoryCardContainer>
+        </YearHistoryContainer>
+
+
+        {/* 2023 */}
+        <YearHistoryContainer>
+          <Year $color="rgba(255, 255, 255, 0.3)">2023</Year>
+          <HistoryCardContainer>
+            <HistoryCard>
+              <Month $color="rgba(255, 255, 255, 0.4)">3월</Month>
+              <HistoryContent $color="rgba(255, 255, 255, 0.4)" >HSpace 파트너쉽 체결</HistoryContent>
+            </HistoryCard>
+          </HistoryCardContainer>
+        </YearHistoryContainer>
+
+        {/* 2021 */}
+        <YearHistoryContainer>
+          <Year $color="rgba(255, 255, 255, 0.3)">2021</Year>
+          <HistoryCardContainer>
+            <HistoryCard>
+              <Month $color="rgba(255, 255, 255, 0.4)">9월</Month>
+              <HistoryContent $color="rgba(255, 255, 255, 0.4)" >제2회 KOSPO 웹서비스 정보 보안 경진대회 최우수상</HistoryContent>
+            </HistoryCard>
+          </HistoryCardContainer>
+        </YearHistoryContainer>
+
+        {/*2018*/}
+        <YearHistoryContainer>
+          <Year $color="rgba(255, 255, 255, 0.3)">2018</Year>
+          <HistoryCardContainer>
+            <HistoryCard>
+              <Month $color="rgba(255, 255, 255, 0.4)">4월</Month>
+              <HistoryContent $color="rgba(255, 255, 255, 0.4)" >Naver D2 Campus Parter 선정</HistoryContent>
+            </HistoryCard>
+          </HistoryCardContainer>
+        </YearHistoryContainer>
+
+
+      </HistoryFrame>
+
+      <ShapeBackground />
+    </BackgroundWrapper>
+  );
+}
diff --git a/src/pages/Section6.jsx b/src/pages/Section6.jsx
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-
 import { Span } from '../components/typograph/Text';
 import GraphSVG from '../assets/graph.svg';
 import { Link } from 'react-router-dom';