USERS {number}
- ))} - - ) -} \ No newline at end of file + return ( + <> + {ScrollTestPTag.map((number) => ( +USERS {number}
+ ))} + + ); +} diff --git a/src/components/display/dashboard/index.js b/src/components/display/dashboard/index.js index 6354db8..86784a3 100644 --- a/src/components/display/dashboard/index.js +++ b/src/components/display/dashboard/index.js @@ -1,5 +1,5 @@ -export { default as DashboardAdmin } from './Admin' -export { default as DashboardExecutive } from './Executive' -export { default as DashboardHistory } from './History' -export { default as DashboardHome } from './Home' -export { default as DashboardUsers } from './Users' +export { default as DashboardAdmin } from './Admin'; +export { default as DashboardExecutive } from './Executive'; +export { default as DashboardHistory } from './History'; +export { default as DashboardHome } from './Home'; +export { default as DashboardUsers } from './Users'; diff --git a/src/components/forms/Button.jsx b/src/components/forms/Button.jsx index 075fda6..91bd491 100644 --- a/src/components/forms/Button.jsx +++ b/src/components/forms/Button.jsx @@ -2,11 +2,10 @@ // 코드 작성자 : GiHhub @whitedev77773 // 외부 라이브러리에서 import -import styled from "styled-components" +import styled from 'styled-components'; // 사용자가 생성한 컴포넌트 및 JS파일 import - /** * Flat / Outline / Translucent * 위 버튼들의 부모로 사용되는 요소입니다. @@ -14,136 +13,132 @@ import styled from "styled-components" * @type {styled.button} */ const IButton = styled.button` - position: relative; - cursor: pointer; - overflow: hidden; + position: relative; + cursor: pointer; + overflow: hidden; - width: ${(props) => props.$width ?? "fit-content"}; - height: ${(props) => props.$height ?? "fit-content"}; - padding: 15px 30px; - border-radius: 12px; + width: ${(props) => props.$width ?? 'fit-content'}; + height: ${(props) => props.$height ?? 'fit-content'}; + padding: 15px 30px; + border-radius: 12px; - border: none; - outline: none; - color: ${(props) => { - if (props.$text_color?.startsWith("--")) { - return `var(${props.$text_color});`; - } - else { - return props.$text_color ?? "white"; - } - }}; - font-weight: 700; + border: none; + outline: none; + color: ${(props) => { + if (props.$text_color?.startsWith('--')) { + return `var(${props.$text_color});`; + } else { + return props.$text_color ?? 'white'; + } + }}; + font-weight: 700; - box-sizing: border-box; + box-sizing: border-box; - &:after { - z-index: 10; - position: absolute; - content: ""; - top: 0; left: 0; - width: 100%; - height: 100%; - transition: background-color 0.2s ease-out; - background-color: #ffffff00; - } + &:after { + z-index: 10; + position: absolute; + content: ''; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: background-color 0.2s ease-out; + background-color: #ffffff00; + } - &:hover:after { - background-color: #ffffff10; - } + &:hover:after { + background-color: #ffffff10; + } - &:active:after { - background-color: #ffffff20; - } -` + &:active:after { + background-color: #ffffff20; + } +`; /** * 플랫 버튼입니다. * @type {styled.button} */ const FlatButton = styled(IButton)` - background-color: ${(props) => { - if (props.$color?.startsWith("--")) { - return `var(${props.$color});`; - } - else { - return props.$color ?? "var(--transparent-button-background)"; - } - }}; -` + background-color: ${(props) => { + if (props.$color?.startsWith('--')) { + return `var(${props.$color});`; + } else { + return props.$color ?? 'var(--transparent-button-background)'; + } + }}; +`; /** * 라운드 버튼입니다. * @type {styled.button} */ const RoundedButton = styled(IButton)` - border-radius: 1000px; - background-color: ${(props) => { - if (props.$color?.startsWith("--")) { - return `var(${props.$color});`; - } - else { - return props.$color ?? "var(--primary-color)"; - } - }}; -` + border-radius: 1000px; + background-color: ${(props) => { + if (props.$color?.startsWith('--')) { + return `var(${props.$color});`; + } else { + return props.$color ?? 'var(--primary-color)'; + } + }}; +`; /** * 아웃 라인 버튼입니다. * @type {styled.button} */ const OutlineButton = styled(IButton)` - background-color: transparent; - border: 2px solid ${(props) => { - if (props.$color?.startsWith("--")) { - return `var(${props.$color});`; - } - else { - return props.$color ?? "var(--primary-color)"; - } - }}; - color: ${(props) => { - if (props.$text_color?.startsWith("--")) { - return `var(${props.$text_color});`; - } - else { - return props.$text_color ?? "var(--primary-color)"; - } + background-color: transparent; + border: 2px solid + ${(props) => { + if (props.$color?.startsWith('--')) { + return `var(${props.$color});`; + } else { + return props.$color ?? 'var(--primary-color)'; + } }}; -` + color: ${(props) => { + if (props.$text_color?.startsWith('--')) { + return `var(${props.$text_color});`; + } else { + return props.$text_color ?? 'var(--primary-color)'; + } + }}; +`; /** * 아웃 라인 버튼입니다. * @type {styled.button} */ const TranslucentButton = styled(IButton)` - &:before { - z-index: 10; - position: absolute; - content: ""; - top: 0; left: 0; - width: 100%; - height: 100%; - background-color: ${(props) => { - if (props.$color?.startsWith("--")) { - return `var(${props.$color});`; - } - else { - return props.$color ?? "var(--primary-text-color)"; - } - }}; - opacity: 0.05; - } - background-color: transparent; - color: ${(props) => { - if (props.$text_color?.startsWith("--")) { - return `var(${props.$text_color});`; - } - else { - return props.$text_color ?? "var(--primary-text-color)"; - } + &:before { + z-index: 10; + position: absolute; + content: ''; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: ${(props) => { + if (props.$color?.startsWith('--')) { + return `var(${props.$color});`; + } else { + return props.$color ?? 'var(--primary-text-color)'; + } }}; -` + opacity: 0.05; + } + background-color: transparent; + color: ${(props) => { + if (props.$text_color?.startsWith('--')) { + return `var(${props.$text_color});`; + } else { + return props.$text_color ?? 'var(--primary-text-color)'; + } + }}; +`; /** * 폼 작성용 버튼 컴포넌트 @@ -152,18 +147,66 @@ const TranslucentButton = styled(IButton)` * @param {string} height fit-content | 16px | string * @param {any} children 버튼에 표시될 요소 */ -export const Button = ({ type="flat", width, height, color, text_color, onClick, children }) => { - switch (type) { - case "flat": - return{children}
-{children}
+
-
-
- src/component/typograph/Text.jsx
- {"<Text />"}
- {'<Text />'}
- 텍스트를 추가할 때 사용하는 컴포넌트입니다. size, weight, color를 속성로 받습니다.
-
-
-
-
- src/component/forms/Checkbox.jsx
- {"<Checkbox />"}
- 폼 작성용 체크박스입니다. size, color를 속성로 받습니다.
-
-
-
-
- src/component/forms/Toggle.jsx
- {"<Toggle />"}
- 폼 작성용 토글 버튼입니다. size, color를 속성로 받습니다.
-
-
+ return (
+
-
-
- );
-}
+import React from 'react';
+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',
+};
+
+const BackFirst = styled.div`
+ width: 100vw;
+ height: 100vh;
+ position: relative;
+ 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 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 headerStyle = {
+ fontFamily: 'NanumSquareNeo',
+ fontWeight: 700,
+ color: '#fff',
+ fontSize: '2em',
+};
+
+const subtitleStyle = {
+ fontFamily: 'NanumSquareNeo',
+ fontWeight: 600,
+ color: '#fff',
+ fontSize: '1em',
+ paddingTop: '15px',
+};
+
+export default function Section1() {
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/Section2.jsx b/src/pages/Section2.jsx
index 305af51..4714870 100644
--- a/src/pages/Section2.jsx
+++ b/src/pages/Section2.jsx
@@ -1,156 +1,161 @@
-import React from 'react';
-import bg_img from "../assets/Section2_bg_img.png";
-import lock_icon from "../assets/kert_logos/White_incline_Lock.png";
-import "../font/main_font.css";
-import styled from "styled-components";
-import { Container } from "../components/forms/Container";
-import { Text, Span } from "../components/typograph/Text";
-import { Checkbox } from "../components/forms/Checkbox";
-import { Toggle } from "../components/forms/Toggle";
-
-const bg_Style = {
- width: '100vw',
- height: '100vh',
- display: 'flex',
- alignItems: 'center',
- fontSize: '2em',
- opacity: 0.9,
- backgroundImage: `url(${bg_img})`,
- backgroundSize: 'cover',
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center center',
- position: 'relative',
-};
-
-const overlayStyle = {
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- backgroundColor: 'rgba(0, 0, 0, 0.78)',
- zIndex: 1,
-};
-
-const Title = styled(Span).attrs({ id: "title", $size: "sxl", $weight: "heavy", $color: "--primary-text-color" })`
- margin-bottom: 12px;
-`;
-
-const contentStyle = {
- position: 'relative',
- zIndex: 1,
- textAlign: 'flex-start',
- color: '#fff',
- fontFamily: 'NanumSquareNeo',
- padding: '20px',
-};
-
-const lockIconStyle = {
- width: '100%',
- height: '100%',
- objectFit: 'contain', // Maintains aspect ratio
-};
-
-const lockIconOverlayStyle = {
- position: 'absolute',
- bottom: 0,
- left: 0,
- width: '100%',
- height: '50%', // Adjust as necessary
- background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%)',
-};
-
-const textStyle = {
- marginBottom: '20px',
- lineHeight: '1.5',
- transform: 'translateX(65%)',
- fontFamily:'NanumSquareNeo',
- fontWeight:'extrabold',
-};
-
-const minitextStyle = {
- marginBottom: '1px',
- lineHeight: '1.5',
- transform: 'translateX(65%)',
- fontFamily:'NanumSquareNeo',
- fontWeight:'extrabold',
-};
-
-const statItemStyle = {
- margin: '30px', // Adjust margin for spacing between items
- textAlign: 'center',
- fontFamily:'NanumSquareNeo',
- opacity: 0.6,
- justifyContent: 'center',
-};
-
-const DateStyle = {
- fontSize: '3em',
- backgroundImage: 'linear-gradient(to right, #FFFFFF, #6F8CB8)',
- WebkitBackgroundClip: 'text',
- backgroundClip: 'text',
- color: 'transparent',
- fontWeight: 'bold',
-};
-
-const containerStyle = {
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- marginTop: '20px',
- transform: 'translateX(50%)',
-};
-
-const lockIconContainerStyle = {
- position: 'absolute',
- bottom: '-60px', //이미지 아래로
- left: '50%',
- transform: 'translateX(85%)',
- width: '500px',
- height: '500px',
- display: 'flex',
- zIndex: 1,
- opacity: 0.9,
- overflow: 'hidden', // This ensures the gradient overlay is properly contained
-};
-
-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
-};
-
-export default function MainPage() {
- return (
-
-
-
- Education Content of KERT
- KERT, 이런 걸 배워요
-
- KERT는 보안과 관련된 다양한 활동이 준비돼있어요.
- 가입 후 다양한 분야 지식을 습득할 수 있어요.
-
-
-
-
- Web 기초
-
- 웹 서버 코드를 작성/수정하고 브라우저 개발자 도구로 분석해요.
- 통신 프로토콜, 쿠키, 세션 등 Web 동작 방식을 배워요.
-
-
-
- 암호학 Crypto
-
- AES, 비/대칭키 등 유저와 서버 간의 통신에서 사용하는 암호화 방식을 배우고,
- 암호화된 데이터를 복호화해요.
-
-
-
- 리버싱 Reversing
-
- IDA, Ghidra 등의 도구로 소프트웨어의 동작 원리를 분석하고
- 발생할 수 있는 보안 취약점을 찾는 기술을 배워요.
-
-
-
- 리눅스 Linux
-
- WSL를 이용한 Netcat 연습, 리눅스의 명령어를 습득하여
- 다양한 모의 해킹, CTF의 문제를 풀어볼 수 있어요.
-
-
-
-
-
- );
-}
+import React from 'react';
+import bg_img from '../assets/Section4_bg_img.png';
+import styled from 'styled-components';
+import { Text, Span } from '../components/typograph/Text';
+import web from '../assets/icons/Web.png';
+import Crypto from '../assets/icons/Crypto.png';
+import Reversing from '../assets/icons/Reversing.png';
+import Linux from '../assets/icons/Linux.png';
+import '../font/main_font.css';
+
+// Dev문서 타이틀 양식 가져오기
+const Title = styled(Span).attrs({
+ id: 'title',
+ $size: 'sxl',
+ $weight: 'heavy',
+ $color: '--primary-text-color',
+})`
+ margin-bottom: 12px;
+`;
+
+// Container for the left content
+const LeftContentContainr = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+ padding: 0 50px;
+`;
+
+// Container to wrap the left and right content containers
+const ContentWrapper = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 0 10%;
+`;
+
+// MainPage 양식과 호환될 수 있도록 바탕 설정
+const BackFirstStyle = styled.div`
+ width: 100vw;
+ height: 100vh;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-position: center center;
+ background-image: url(${bg_img});
+ background-size: cover;
+`;
+
+// Container for the right content boxes
+const RightContentContainer = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ justify-content: flex-start;
+ margin-left: 100px;
+ gap: 20px; /* GroupBox 간의 간격을 설정 */
+ margin-top: 20px; /* 상단 간격 추가 */
+ margin-bottom: 20px; /* 하단 간격 추가 */
+`;
+
+const GroupBox = styled.div`
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 20px;
+ gap: 20px;
+ width: 250px;
+ height: auto;
+
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+ backdrop-filter: blur(5px);
+ border-radius: 20px;
+
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+`;
+
+const HeaderIcon = styled.img`
+ display: block;
+ width: 50px;
+ height: 50px;
+ margin-bottom: 30px; /* HeaderIcon과 GroupTitle 사이의 간격 설정 */
+`;
+
+const GroupTitle = styled.div`
+ width: 100%;
+ font-family: 'NanumSquare';
+ font-style: normal;
+ font-weight: 800;
+ font-size: 20px;
+ line-height: 29px;
+ color: #ffffff;
+ text-align: left;
+`;
+
+const GroupContent = styled.div`
+ width: 100%;
+ font-family: 'NanumSquare';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 13px;
+ line-height: 18px;
+ color: rgba(255, 255, 255, 0.5);
+ text-align: left;
+`;
+
+export default function Section1() {
+ return (
+
+
+
+
+ Education Content of KERT
+
+ KERT, 이런 걸 배워요
+
+ KERT는 보안과 관련된 다양한 활동이 준비돼있어요. 가입 후 다양한 분야
+ 지식을 습득할 수 있어요.
+
+
+
+
+
+ Web 기초
+
+
+ 웹 서버 코드를 작성/수정하고 브라우저 개발자 도구로 분석해요. 통신
+ 프로토콜, 쿠키, 세션 등 Web 동작 방식을 배워요.
+
+
+
+
+ 암호학 Crypto
+
+
+ AES, 비/대칭키 등 유저와 서버 간의 통신에서 사용하는 암호화 방식을
+ 배우고, 암호화된 데이터를 복호화해요.
+
+
+
+
+ 리버싱 Reversing
+
+
+ IDA, Ghidra 등의 도구로 소프트웨어의 동작 원리를 분석하고 발생할
+ 수 있는 보안 취약점을 찾는 기술을 배워요.
+
+
+
+
+ 리눅스 Linux
+
+
+ WSL를 이용한 Netcat 연습, 리눅스의 명령어를 습득하여 다양한 모의
+ 해킹, CTF의 문제를 풀어볼 수 있어요.
+
+
+
+
+
+ );
+}
diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
index 3e715aa..89e2243 100644
--- a/src/pages/SignUp.jsx
+++ b/src/pages/SignUp.jsx
@@ -2,15 +2,15 @@ import { useState } from 'react';
import axios from 'axios';
// import { useNavigate } from 'react-router-dom';
-import "../styles/SignUp.css";
+import '../styles/SignUp.css';
-export default function SignUp () {
- const [username, setUsername] = useState("");
- const [mail, setMail] = useState("");
- const [password, setPassword] = useState("");
- const [student, setStudenet] = useState("");
- const [major, setMajor] = useState("");
- const [generation, setGE] = useState("");
+export default function SignUp() {
+ const [username, setUsername] = useState('');
+ const [mail, setMail] = useState('');
+ const [password, setPassword] = useState('');
+ const [student, setStudenet] = useState('');
+ const [major, setMajor] = useState('');
+ const [generation, setGE] = useState('');
// const navigate = useNavigate();
const handleSignUp = async () => {
@@ -25,18 +25,18 @@ export default function SignUp () {
};
// 서버로 회원가입 정보를 전송합니다.
- const response = await axios.post("155.230.118.35", userData);
- console.log("Sign up successful:", response.data);
+ const response = await axios.post('155.230.118.35', userData);
+ console.log('Sign up successful:', response.data);
// 회원가입 성공 시 ~page로 이동합니다.
// navigate("/page");
} catch (error) {
- console.error("Error:", error);
+ console.error('Error:', error);
}
- alert("회원가입 요청이 완료되었습니다!");
+ alert('회원가입 요청이 완료되었습니다!');
};
-
- return (
+
+ return (
);
}
-
diff --git a/src/stores/dashboard.js b/src/stores/dashboard.js
index 22430be..7c99513 100644
--- a/src/stores/dashboard.js
+++ b/src/stores/dashboard.js
@@ -1,14 +1,13 @@
import { create } from 'zustand';
-
const useDashboard = create((set) => ({
- SelectedDashboardMenu: "",
- moveHome: () => set((state) => ({ SelectedDashboardMenu: "home" })),
- moveHistory: () => set((state) => ({ SelectedDashboardMenu: "history" })),
- moveExecutive: () => set((state) => ({ SelectedDashboardMenu: "executive" })),
- moveAdmin: () => set((state) => ({ SelectedDashboardMenu: "admin" })),
- moveUsers: () => set((state) => ({ SelectedDashboardMenu: "users" })),
- notFound: () => set((state) => ({ SelectedDashboardMenu: "" })),
+ SelectedDashboardMenu: '',
+ moveHome: () => set((state) => ({ SelectedDashboardMenu: 'home' })),
+ moveHistory: () => set((state) => ({ SelectedDashboardMenu: 'history' })),
+ moveExecutive: () => set((state) => ({ SelectedDashboardMenu: 'executive' })),
+ moveAdmin: () => set((state) => ({ SelectedDashboardMenu: 'admin' })),
+ moveUsers: () => set((state) => ({ SelectedDashboardMenu: 'users' })),
+ notFound: () => set((state) => ({ SelectedDashboardMenu: '' })),
}));
-
-export default useDashboard;
\ No newline at end of file
+
+export default useDashboard;
diff --git a/src/styles/SignUp.css b/src/styles/SignUp.css
index d0193fd..193e1f9 100644
--- a/src/styles/SignUp.css
+++ b/src/styles/SignUp.css
@@ -1,293 +1,292 @@
.SignUp {
- background-color: #ffffff;
- display: flex;
- flex-direction: row;
- justify-content: center;
- width: 100%;
+ background-color: #ffffff;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
}
.SignUp .div {
- background-color: #ffffff;
- height: 1080px;
- /* overflow: hidden; */
- position: relative;
- width: 1920px;
+ background-color: #ffffff;
+ height: 1080px;
+ /* overflow: hidden; */
+ position: relative;
+ width: 1920px;
}
.SignUp .middleSide {
- background-color: #ffffff;
- height: 980px;
- left: 0;
- /* position: absolute; */
- top: 0px;
- width: 1920px;
+ background-color: #ffffff;
+ height: 980px;
+ left: 0;
+ /* position: absolute; */
+ top: 0px;
+ width: 1920px;
}
.SignUp .view {
- background-color: #ffffff;
- height: 939px;
- left: 727px;
- position: relative;
- top: 0px;
- width: 466px;
+ background-color: #ffffff;
+ height: 939px;
+ left: 727px;
+ position: relative;
+ top: 0px;
+ width: 466px;
}
.SignUp .text-signup {
- color: #000000;
- font-family: "Inter-Bold", Helvetica;
- font-size: 55px;
- font-weight: 650;
- left: 89px;
- letter-spacing: 0;
- line-height: normal;
- position: absolute;
- text-align: center;
- top: 150px;
- width: 288px;
+ color: #000000;
+ font-family: 'Inter-Bold', Helvetica;
+ font-size: 55px;
+ font-weight: 650;
+ left: 89px;
+ letter-spacing: 0;
+ line-height: normal;
+ position: absolute;
+ text-align: center;
+ top: 150px;
+ width: 288px;
}
.SignUp .input-name {
- align-items: flex-start;
- background-color: #ffffff;
- border: 2px solid;
- border-color: #000000;
- border-radius: 15px;
- display: flex;
- gap: 10px;
- height: 50px;
- left: 52px;
- opacity: 0.3;
- overflow: hidden;
- padding: 10px;
- position: absolute;
- top: 290px;
- width: 350px;
- font-size: 30px;
+ align-items: flex-start;
+ background-color: #ffffff;
+ border: 2px solid;
+ border-color: #000000;
+ border-radius: 15px;
+ display: flex;
+ gap: 10px;
+ height: 50px;
+ left: 52px;
+ opacity: 0.3;
+ overflow: hidden;
+ padding: 10px;
+ position: absolute;
+ top: 290px;
+ width: 350px;
+ font-size: 30px;
}
.SignUp .input-name::placeholder {
- font-size: 25px;
- padding: 10px;
+ font-size: 25px;
+ padding: 10px;
}
.SignUp .input-mail {
- align-items: flex-start;
- background-color: #ffffff;
- border: 2px solid;
- border-color: #000000;
- border-radius: 15px;
- display: flex;
- gap: 10px;
- height: 50px;
- opacity: 0.3;
- overflow: hidden;
- padding: 10px;
- left: 52px;
- position: absolute;
- top: 380px;
- width: 350px;
- font-size: 30px;
+ align-items: flex-start;
+ background-color: #ffffff;
+ border: 2px solid;
+ border-color: #000000;
+ border-radius: 15px;
+ display: flex;
+ gap: 10px;
+ height: 50px;
+ opacity: 0.3;
+ overflow: hidden;
+ padding: 10px;
+ left: 52px;
+ position: absolute;
+ top: 380px;
+ width: 350px;
+ font-size: 30px;
}
-
.SignUp .input-mail::placeholder {
- font-size: 25px;
- padding: 10px;
+ font-size: 25px;
+ padding: 10px;
}
.SignUp .input-pw {
- align-items: flex-start;
- background-color: #ffffff;
- border: 2px solid;
- border-color: #000000;
- border-radius: 15px;
- display: flex;
- gap: 10px;
- height: 50px;
- opacity: 0.3;
- overflow: hidden;
- padding: 10px;
- left: 52px;
- position: absolute;
- top: 470px;
- width: 350px;
- font-size: 30px;
+ align-items: flex-start;
+ background-color: #ffffff;
+ border: 2px solid;
+ border-color: #000000;
+ border-radius: 15px;
+ display: flex;
+ gap: 10px;
+ height: 50px;
+ opacity: 0.3;
+ overflow: hidden;
+ padding: 10px;
+ left: 52px;
+ position: absolute;
+ top: 470px;
+ width: 350px;
+ font-size: 30px;
}
.SignUp .input-pw::placeholder {
- font-size: 25px;
- padding: 10px;
+ font-size: 25px;
+ padding: 10px;
}
.SignUp .input-sn {
- align-items: flex-start;
- background-color: #ffffff;
- border: 2px solid;
- border-color: #000000;
- border-radius: 15px;
- display: flex;
- gap: 10px;
- height: 50px;
- opacity: 0.3;
- overflow: hidden;
- padding: 10px;
- left: 52px;
- position: absolute;
- top: 560px;
- width: 350px;
- font-size: 30px;
+ align-items: flex-start;
+ background-color: #ffffff;
+ border: 2px solid;
+ border-color: #000000;
+ border-radius: 15px;
+ display: flex;
+ gap: 10px;
+ height: 50px;
+ opacity: 0.3;
+ overflow: hidden;
+ padding: 10px;
+ left: 52px;
+ position: absolute;
+ top: 560px;
+ width: 350px;
+ font-size: 30px;
}
.SignUp .input-sn::placeholder {
- font-size: 25px;
- padding: 10px;
+ font-size: 25px;
+ padding: 10px;
}
.SignUp .input-major {
- align-items: flex-start;
- background-color: #ffffff;
- border: 2px solid;
- border-color: #000000;
- border-radius: 15px;
- display: flex;
- gap: 10px;
- height: 50px;
- opacity: 0.3;
- overflow: hidden;
- padding: 10px;
- left: 52px;
- position: absolute;
- top: 650px;
- width: 350px;
- font-size: 30px;
+ align-items: flex-start;
+ background-color: #ffffff;
+ border: 2px solid;
+ border-color: #000000;
+ border-radius: 15px;
+ display: flex;
+ gap: 10px;
+ height: 50px;
+ opacity: 0.3;
+ overflow: hidden;
+ padding: 10px;
+ left: 52px;
+ position: absolute;
+ top: 650px;
+ width: 350px;
+ font-size: 30px;
}
.SignUp .input-major::placeholder {
- font-size: 25px;
- padding: 10px;
+ font-size: 25px;
+ padding: 10px;
}
.SignUp .input-ge {
- align-items: flex-start;
- background-color: #ffffff;
- border: 2px solid;
- border-color: #000000;
- border-radius: 15px;
- display: flex;
- gap: 10px;
- height: 50px;
- opacity: 0.3;
- overflow: hidden;
- padding: 10px;
- left: 52px;
- position: absolute;
- top: 740px;
- width: 350px;
- font-size: 30px;
+ align-items: flex-start;
+ background-color: #ffffff;
+ border: 2px solid;
+ border-color: #000000;
+ border-radius: 15px;
+ display: flex;
+ gap: 10px;
+ height: 50px;
+ opacity: 0.3;
+ overflow: hidden;
+ padding: 10px;
+ left: 52px;
+ position: absolute;
+ top: 740px;
+ width: 350px;
+ font-size: 30px;
}
.SignUp .input-ge::placeholder {
- font-size: 25px;
- padding: 10px;
+ font-size: 25px;
+ padding: 10px;
}
.SignUp .click-button {
- background-color: #000000;
- border-radius: 50px;
- border: none;
- height: 70px;
- left: 52px;
- position: absolute;
- top: 880px;
- width: 375px;
+ background-color: #000000;
+ border-radius: 50px;
+ border: none;
+ height: 70px;
+ left: 52px;
+ position: absolute;
+ top: 880px;
+ width: 375px;
- color: #ffffff;
- font-family: "Inter-Thin", Helvetica;
- font-size: 25px;
- font-weight: 500;
+ color: #ffffff;
+ font-family: 'Inter-Thin', Helvetica;
+ font-size: 25px;
+ font-weight: 500;
}
.SignUp .click-button:hover {
- border: 2px solid #000000;
- transition: all 0.2s ease-out;
- cursor: pointer;
+ border: 2px solid #000000;
+ transition: all 0.2s ease-out;
+ cursor: pointer;
}
.SignUp .signUp {
- width: 150px;
- height: 40px;
- top: 720px;
- left: 160px;
- position: absolute;
+ width: 150px;
+ height: 40px;
+ top: 720px;
+ left: 160px;
+ position: absolute;
}
.SignUp .text-signUp {
- color: #373737;
- font-family: "Inter-Thin", Helvetica;
- font-size: 23px;
- font-weight: 100;
- width: 150px;
- height: 40px;
- left: 0;
- letter-spacing: 0;
- line-height: normal;
- position: absolute;
- text-align: center;
- text-decoration: underline;
- top: -1px;
+ color: #373737;
+ font-family: 'Inter-Thin', Helvetica;
+ font-size: 23px;
+ font-weight: 100;
+ width: 150px;
+ height: 40px;
+ left: 0;
+ letter-spacing: 0;
+ line-height: normal;
+ position: absolute;
+ text-align: center;
+ text-decoration: underline;
+ top: -1px;
}
.SignUp .text-signUp:hover {
- cursor: pointer;
+ cursor: pointer;
}
.SignUp .view-right {
- height: 22px;
- left: 1583px;
- position: absolute;
- top: 39px;
- width: 244px;
+ height: 22px;
+ left: 1583px;
+ position: absolute;
+ top: 39px;
+ width: 244px;
}
.SignUp .SignUp {
- height: 22px;
- left: 177px;
- position: absolute;
- top: 0;
- width: 67px;
+ height: 22px;
+ left: 177px;
+ position: absolute;
+ top: 0;
+ width: 67px;
}
.SignUp .text-sign {
- color: #373737;
- font-family: "Inter-Thin", Helvetica;
- font-size: 11px;
- font-weight: 100;
- left: 0;
- letter-spacing: 0;
- line-height: normal;
- position: absolute;
+ color: #373737;
+ font-family: 'Inter-Thin', Helvetica;
+ font-size: 11px;
+ font-weight: 100;
+ left: 0;
+ letter-spacing: 0;
+ line-height: normal;
+ position: absolute;
}
.SignUp .Login {
- height: 22px;
- left: 90px;
- position: absolute;
- top: 0;
- width: 50px;
+ height: 22px;
+ left: 90px;
+ position: absolute;
+ top: 0;
+ width: 50px;
}
.SignUp .view-middle {
- height: 30px;
- left: 530px;
- position: absolute;
- top: 35px;
- width: 808px;
+ height: 30px;
+ left: 530px;
+ position: absolute;
+ top: 35px;
+ width: 808px;
}
.SignUp .view-left {
- height: 61px;
- left: 74px;
- position: absolute;
- top: 19px;
- width: 113px;
+ height: 61px;
+ left: 74px;
+ position: absolute;
+ top: 19px;
+ width: 113px;
}
diff --git a/src/styles/dark.css b/src/styles/dark.css
index f3528d9..38049a6 100644
--- a/src/styles/dark.css
+++ b/src/styles/dark.css
@@ -1,18 +1,18 @@
:root {
- /* 이미지 url */
- --vertical-logo-url: url("/logo/white_vertical.png");
- --sqaure-logo-url: url("/logo/white_square.png");
- --text-logo-url: url("/logo/white_text.png");
+ /* 이미지 url */
+ --vertical-logo-url: url('/logo/white_vertical.png');
+ --sqaure-logo-url: url('/logo/white_square.png');
+ --text-logo-url: url('/logo/white_text.png');
- /* Figma 참고해서 컬러 사용 */
- --primary-text-color: #FFFFFF;
- --secondary-text-color: #83878B;
- --body-background: #080F17;
- --nav-background: #080F17 !important;
- --container-primary-background: #080F17;
- --container-secondary-background: #FFFFFF0F;
- --container-border: #273341;
- --footer-background: #000000;
- --transparent-button-background: #FFFFFF0F;
- --transparent-button-background-focus: #FFFFFF1C;
-}
\ No newline at end of file
+ /* Figma 참고해서 컬러 사용 */
+ --primary-text-color: #ffffff;
+ --secondary-text-color: #83878b;
+ --body-background: #080f17;
+ --nav-background: #080f17 !important;
+ --container-primary-background: #080f17;
+ --container-secondary-background: #ffffff0f;
+ --container-border: #273341;
+ --footer-background: #000000;
+ --transparent-button-background: #ffffff0f;
+ --transparent-button-background-focus: #ffffff1c;
+}
diff --git a/src/styles/font.css b/src/styles/font.css
index 4121159..b93622c 100644
--- a/src/styles/font.css
+++ b/src/styles/font.css
@@ -1,34 +1,64 @@
@font-face {
- font-family: 'NanumSquareNeo';
- font-weight: 300;
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot);
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf) format("truetype");
+ font-family: 'NanumSquareNeo';
+ font-weight: 300;
+ src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot);
+ src:
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.eot?#iefix)
+ format('embedded-opentype'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff)
+ format('woff'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.ttf)
+ format('truetype');
}
@font-face {
- font-family: 'NanumSquareNeo';
- font-weight: 400;
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
+ font-family: 'NanumSquareNeo';
+ font-weight: 400;
+ src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
+ src:
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix)
+ format('embedded-opentype'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff)
+ format('woff'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf)
+ format('truetype');
}
@font-face {
- font-family: 'NanumSquareNeo';
- font-weight: 700;
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf) format("truetype");
+ font-family: 'NanumSquareNeo';
+ font-weight: 700;
+ src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot);
+ src:
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.eot?#iefix)
+ format('embedded-opentype'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff)
+ format('woff'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.ttf)
+ format('truetype');
}
@font-face {
- font-family: 'NanumSquareNeo';
- font-weight: 800;
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot);
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf) format("truetype");
+ font-family: 'NanumSquareNeo';
+ font-weight: 800;
+ src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot);
+ src:
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.eot?#iefix)
+ format('embedded-opentype'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff)
+ format('woff'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.ttf)
+ format('truetype');
}
@font-face {
- font-family: 'NanumSquareNeo';
- font-weight: 900;
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot);
- src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf) format("truetype");
+ font-family: 'NanumSquareNeo';
+ font-weight: 900;
+ src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot);
+ src:
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.eot?#iefix)
+ format('embedded-opentype'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff)
+ format('woff'),
+ url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.ttf)
+ format('truetype');
}
diff --git a/src/styles/global.js b/src/styles/global.js
index c6a8cba..e814a5f 100644
--- a/src/styles/global.js
+++ b/src/styles/global.js
@@ -1,4 +1,4 @@
-import { createGlobalStyle } from "styled-components";
+import { createGlobalStyle } from 'styled-components';
export const GlobalStyle = createGlobalStyle`
:root {
@@ -39,4 +39,4 @@ export const GlobalStyle = createGlobalStyle`
*::-webkit-scrollbar-corner {
background: transparent;
}
-`;
\ No newline at end of file
+`;
diff --git a/src/styles/light.css b/src/styles/light.css
index 0de0705..17ccc02 100644
--- a/src/styles/light.css
+++ b/src/styles/light.css
@@ -1,18 +1,18 @@
:root {
- /* 이미지 url */
- --vertical-logo-url: url("/logo/black_vertical.png");
- --sqaure-logo-url: url("/logo/black_square.png");
- --text-logo-url: url("/logo/black_text.png");
+ /* 이미지 url */
+ --vertical-logo-url: url('/logo/black_vertical.png');
+ --sqaure-logo-url: url('/logo/black_square.png');
+ --text-logo-url: url('/logo/black_text.png');
- /* Figma 참고해서 컬러 사용 */
- --primary-text-color: #000000;
- --secondary-text-color: #6F767D;
- --body-background: #FFFFFF;
- --nav-background: #F6F8FC;
- --container-primary-background: #FFFFFF;
- --container-secondary-background: #0000000F;
- --container-border: #CED1D6;
- --footer-background: #EAF1FB;
- --transparent-button-background: #0000000F;
- --transparent-button-background-focus: #0000001C;
-}
\ No newline at end of file
+ /* Figma 참고해서 컬러 사용 */
+ --primary-text-color: #000000;
+ --secondary-text-color: #6f767d;
+ --body-background: #ffffff;
+ --nav-background: #f6f8fc;
+ --container-primary-background: #ffffff;
+ --container-secondary-background: #0000000f;
+ --container-border: #ced1d6;
+ --footer-background: #eaf1fb;
+ --transparent-button-background: #0000000f;
+ --transparent-button-background-focus: #0000001c;
+}
- 인자 및 상세 설명
- props의 값이 --로 시작하면 css 변수로 감지합니다. (다른 컴포넌트 참고)
- 색상 관련 props의 값이 --로 시작하면 css 변수로 감지합니다. (다른 컴포넌트 참고)
- size : xs || s || m || l || xl || string ?? m
- weight : light || regular || bold || extrabold || heavy ?? regular
- color : --primary-text-color || #ffffff || white || string ?? --primary-text-color
-
-
- 코드 사용 예시
-
- {"xs 사이즈 및 bold 굵기의 텍스트입니다. "}
- {"l 사이즈의 텍스트입니다. "}
- {"xl 사이즈 및 색이 #000000인 텍스트입니다. "}
- {'xs 사이즈 및 bold 굵기의 텍스트입니다. '}
- {'l 사이즈의 텍스트입니다. '}
- {'xl 사이즈 및 색이 #000000인 텍스트입니다. '}
-
- 실행 예시
-
-
-
- [12px] 이건 xs 사이즈입니다.
- [14px] 이건 s 사이즈입니다.
- [16px] 이건 m 사이즈입니다.
- [20px] 이건 l 사이즈입니다.
- [24px] 이건 xl 사이즈입니다.
- [28px] 이건 sxl 사이즈입니다.
-
-
- [Light] 이건 light 굵기입니다.
- [Regular] 이건 regular 굵기입니다.
- [Bold] 이건 bold 굵기입니다.
- [ExtraBold] 이건 extrabold 굵기입니다.
- [Heavy] 이건 heavy 굵기입니다.
-
-
-
- 인자 및 상세 설명
- props의 값이 --로 시작하면 css 변수로 감지합니다. (다른 컴포넌트 참고)
- size : s || m || l || string ?? m
- color : --primary-color || #ffffff || white || string ?? --primary-color
-
-
- 코드 사용 예시
-
- {"
- {"
- {" alert(\"체크 박스가 \" + e.target.checked + \"로 변한 것도 감지해요.\")} />"}
-
- 실행 예시
-
-
-
- alert("체크 박스가 " + e.target.checked + "로 변한 것도 감지할 수 있어요.")} />
-
-
-
-
-
- 인자 및 상세 설명
- props의 값이 --로 시작하면 css 변수로 감지합니다. (다른 컴포넌트 참고)
- size : s || m || l || string ?? m
- color : --primary-color || #ffffff || white || string ?? --primary-color
-
-
- 코드 사용 예시
-
- {"
- {"
- {" alert(\"토글 버튼이 \" + e.target.checked + \"로 변한 것도 감지해요.\")} />"}
-
- 실행 예시
-
-
-
- alert("토글 버튼이 " + e.target.checked + "로 변한 것도 감지할 수 있어요.")} />
-
-
-
-
-
+
+
+ src/component/typograph/Text.jsx
+ {'<Text />'}
+ {'<Text />'}
+
+ 텍스트를 추가할 때 사용하는 컴포넌트입니다. size, weight, color를
+ 속성로 받습니다.
+
+
+
+
+
+ src/component/forms/Checkbox.jsx
+ {'<Checkbox />'}
+
+ 폼 작성용 체크박스입니다. size, color를 속성로 받습니다.
+
+
+
+
+
+ src/component/forms/Toggle.jsx
+ {'<Toggle />'}
+
+ 폼 작성용 토글 버튼입니다. size, color를 속성로 받습니다.
+
+
+
+
+ );
}
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index 1ff031a..0f62056 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState, useRef } from 'react';
-import bg_img from "../assets/background_img.png";
-import kert_logo from "../assets/kert_logos/White_Icon.png";
+import bg_img from '../assets/background_img.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';
@@ -12,159 +12,166 @@ import '../font/main_font.css';
const DIVIDER_HEIGHT = 5;
const back_first_Style = {
- width: '100vw',
- height: '100vh',
- position: 'relative',
- overflow: 'hidden',
+ width: '100vw',
+ height: '100vh',
+ position: 'relative',
+ overflow: 'hidden',
};
const pageStyle = {
- width: '100vw',
- height: '100vh',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- fontSize: '3em',
- color: '#fff',
+ width: '100vw',
+ height: '100vh',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ fontSize: '3em',
+ color: '#fff',
};
const dividerStyle = {
- height: `${DIVIDER_HEIGHT}px`,
- backgroundColor: 'transparent',
+ height: `${DIVIDER_HEIGHT}px`,
+ backgroundColor: 'transparent',
};
export default function MainPage() {
- const outerDivRef = useRef();
- const [scrollIndex, setScrollIndex] = useState(1);
+ const outerDivRef = useRef();
+ const [scrollIndex, setScrollIndex] = useState(1);
- useEffect(() => {
- const wheelHandler = (e) => {
- e.preventDefault();
- const { deltaY } = e;
- const { scrollTop } = outerDivRef.current;
- const pageHeight = window.innerHeight;
+ useEffect(() => {
+ const wheelHandler = (e) => {
+ e.preventDefault();
+ const { deltaY } = e;
+ const { scrollTop } = outerDivRef.current;
+ const pageHeight = window.innerHeight;
- if (deltaY > 0) {
- // Scroll down
- if (scrollTop >= 0 && scrollTop < pageHeight) {
- outerDivRef.current.scrollTo({
- top: pageHeight + DIVIDER_HEIGHT,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(2);
- } else if (scrollTop >= pageHeight && scrollTop < pageHeight * 2) {
- outerDivRef.current.scrollTo({
- top: pageHeight * 2 + DIVIDER_HEIGHT * 2,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(3);
- } else if (scrollTop >= pageHeight * 2 && scrollTop < pageHeight * 3) {
- outerDivRef.current.scrollTo({
- top: pageHeight * 3 + DIVIDER_HEIGHT * 3,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(4);
- } else if (scrollTop >= pageHeight * 3 && scrollTop < pageHeight * 4) {
- outerDivRef.current.scrollTo({
- top: pageHeight * 4 + DIVIDER_HEIGHT * 4,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(5);
- } else if (scrollTop >= pageHeight * 4 && scrollTop < pageHeight * 5) {
- outerDivRef.current.scrollTo({
- top: pageHeight * 5 + DIVIDER_HEIGHT * 5,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(6);
- } else if (scrollTop >= pageHeight * 5 && scrollTop < pageHeight * 6) {
- outerDivRef.current.scrollTo({
- top: pageHeight * 6 + DIVIDER_HEIGHT * 6,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(7);
- }
- } else {
- // Scroll up
- if (scrollTop >= pageHeight * 6 && scrollTop < pageHeight * 7) {
- outerDivRef.current.scrollTo({
- top: pageHeight * 5 + DIVIDER_HEIGHT * 5,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(6);
- } else if (scrollTop >= pageHeight * 5 && scrollTop < pageHeight * 6) {
- outerDivRef.current.scrollTo({
- top: pageHeight * 4 + DIVIDER_HEIGHT * 4,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(5);
- } else if (scrollTop >= pageHeight * 4 && scrollTop < pageHeight * 5) {
- outerDivRef.current.scrollTo({
- top: pageHeight * 3 + DIVIDER_HEIGHT * 3,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(4);
- } else if (scrollTop >= pageHeight * 3 && scrollTop < pageHeight * 4) {
- outerDivRef.current.scrollTo({
- top: pageHeight * 2 + DIVIDER_HEIGHT * 2,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(3);
- } else if (scrollTop >= pageHeight * 2 && scrollTop < pageHeight * 3) {
- outerDivRef.current.scrollTo({
- top: pageHeight + DIVIDER_HEIGHT,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(2);
- } else if (scrollTop >= pageHeight && scrollTop < pageHeight * 2) {
- outerDivRef.current.scrollTo({
- top: 0,
- left: 0,
- behavior: 'smooth',
- });
- setScrollIndex(1);
- }
- }
- };
+ if (deltaY > 0) {
+ // Scroll down
+ if (scrollTop >= 0 && scrollTop < pageHeight) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight + DIVIDER_HEIGHT,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(2);
+ } else if (scrollTop >= pageHeight && scrollTop < pageHeight * 2) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight * 2 + DIVIDER_HEIGHT * 2,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(3);
+ } else if (scrollTop >= pageHeight * 2 && scrollTop < pageHeight * 3) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight * 3 + DIVIDER_HEIGHT * 3,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(4);
+ } else if (scrollTop >= pageHeight * 3 && scrollTop < pageHeight * 4) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight * 4 + DIVIDER_HEIGHT * 4,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(5);
+ } else if (scrollTop >= pageHeight * 4 && scrollTop < pageHeight * 5) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight * 5 + DIVIDER_HEIGHT * 5,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(6);
+ } else if (scrollTop >= pageHeight * 5 && scrollTop < pageHeight * 6) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight * 6 + DIVIDER_HEIGHT * 6,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(7);
+ }
+ } else {
+ // Scroll up
+ if (scrollTop >= pageHeight * 6 && scrollTop < pageHeight * 7) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight * 5 + DIVIDER_HEIGHT * 5,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(6);
+ } else if (scrollTop >= pageHeight * 5 && scrollTop < pageHeight * 6) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight * 4 + DIVIDER_HEIGHT * 4,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(5);
+ } else if (scrollTop >= pageHeight * 4 && scrollTop < pageHeight * 5) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight * 3 + DIVIDER_HEIGHT * 3,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(4);
+ } else if (scrollTop >= pageHeight * 3 && scrollTop < pageHeight * 4) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight * 2 + DIVIDER_HEIGHT * 2,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(3);
+ } else if (scrollTop >= pageHeight * 2 && scrollTop < pageHeight * 3) {
+ outerDivRef.current.scrollTo({
+ top: pageHeight + DIVIDER_HEIGHT,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(2);
+ } else if (scrollTop >= pageHeight && scrollTop < pageHeight * 2) {
+ outerDivRef.current.scrollTo({
+ top: 0,
+ left: 0,
+ behavior: 'smooth',
+ });
+ setScrollIndex(1);
+ }
+ }
+ };
- const outerDivRefCurrent = outerDivRef.current;
- outerDivRefCurrent.addEventListener('wheel', wheelHandler);
- return () => {
- outerDivRefCurrent.removeEventListener('wheel', wheelHandler);
- };
- }, []);
+ const outerDivRefCurrent = outerDivRef.current;
+ outerDivRefCurrent.addEventListener('wheel', wheelHandler);
+ return () => {
+ outerDivRefCurrent.removeEventListener('wheel', wheelHandler);
+ };
+ }, []);
- return (
-
+ 인자 및 상세 설명
+
+ props의 값이 --로 시작하면 css 변수로 감지합니다. (다른 컴포넌트
+ 참고)
+
+
+ 색상 관련 props의 값이 --로 시작하면 css 변수로 감지합니다. (다른
+ 컴포넌트 참고)
+
+
+ size : xs || s || m || l || xl || string ?? m
+
+
+ weight : light || regular || bold || extrabold || heavy ?? regular
+
+
+ color : --primary-text-color || #ffffff || white || string ??
+ --primary-text-color
+
+
+
+ 코드 사용 예시
+
+
+ {
+ 'xs 사이즈 및 bold 굵기의 텍스트입니다. '
+ }
+
+ {'l 사이즈의 텍스트입니다. '}
+
+ {
+ 'xl 사이즈 및 색이 #000000인 텍스트입니다. '
+ }
+
+
+ {
+ 'xs 사이즈 및 bold 굵기의 텍스트입니다. '
+ }
+
+ {'l 사이즈의 텍스트입니다. '}
+
+ {
+ 'xl 사이즈 및 색이 #000000인 텍스트입니다. '
+ }
+
+
+ 실행 예시
+
+
+
+
+ [12px] 이건 xs 사이즈입니다.
+
+
+ [14px] 이건 s 사이즈입니다.
+
+
+ [16px] 이건 m 사이즈입니다.
+
+
+ [20px] 이건 l 사이즈입니다.
+
+
+ [24px] 이건 xl 사이즈입니다.
+
+
+ [28px] 이건 sxl 사이즈입니다.
+
+
+
+
+ [Light] 이건 light 굵기입니다.
+
+
+ [Regular] 이건 regular 굵기입니다.
+
+
+ [Bold] 이건 bold 굵기입니다.
+
+
+ [ExtraBold] 이건 extrabold 굵기입니다.
+
+
+ [Heavy] 이건 heavy 굵기입니다.
+
+
+
+
+ 인자 및 상세 설명
+
+ props의 값이 --로 시작하면 css 변수로 감지합니다. (다른 컴포넌트
+ 참고)
+
+ size : s || m || l || string ?? m
+
+ color : --primary-color || #ffffff || white || string ??
+ --primary-color
+
+
+
+ 코드 사용 예시
+
+ {'
+ {'
+
+ {
+ ' alert("체크 박스가 " + e.target.checked + "로 변한 것도 감지해요.")} />'
+ }
+
+
+ 실행 예시
+
+
+
+
+ alert(
+ '체크 박스가 ' +
+ e.target.checked +
+ '로 변한 것도 감지할 수 있어요.',
+ )
+ }
+ />
+
+
+
+
+
+ 인자 및 상세 설명
+
+ props의 값이 --로 시작하면 css 변수로 감지합니다. (다른 컴포넌트
+ 참고)
+
+ size : s || m || l || string ?? m
+
+ color : --primary-color || #ffffff || white || string ??
+ --primary-color
+
+
+
+ 코드 사용 예시
+
+ {'
+ {'
+
+ {
+ ' alert("토글 버튼이 " + e.target.checked + "로 변한 것도 감지해요.")} />'
+ }
+
+
+ 실행 예시
+
- )
+
+
+
+ alert(
+ '토글 버튼이 ' +
+ e.target.checked +
+ '로 변한 것도 감지할 수 있어요.',
+ )
+ }
+ />
+
+
+
+
-
- );
+ return (
+
- Page 5
-
-
-
- Page 6
-
-
-
- Page 7
-
-
+
+ );
}
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
index c2fd55b..6bba396 100644
--- a/src/pages/NotFound.jsx
+++ b/src/pages/NotFound.jsx
@@ -1,18 +1,14 @@
// 정의되지 않은 페이지를 접속했을 때 보이는 페이지입니다.
-import { useEffect } from "react";
+import { useEffect } from 'react';
-import useDashboard from "../stores/dashboard";
+import useDashboard from '../stores/dashboard';
export default function NotFound() {
- const { notFound } = useDashboard();
+ const { notFound } = useDashboard();
- useEffect(() => {
- notFound();
- }, []);
+ useEffect(() => {
+ notFound();
+ }, []);
- return (
- <>
- 찾을 수 없는 페이지
-
- )
-}
\ No newline at end of file
+ return <>찾을 수 없는 페이지;
+}
diff --git a/src/pages/Section1.jsx b/src/pages/Section1.jsx
index c847eaf..4c3ba5d 100644
--- a/src/pages/Section1.jsx
+++ b/src/pages/Section1.jsx
@@ -1,90 +1,94 @@
-import React from 'react';
-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',
-};
-
-const BackFirst = styled.div`
- width: 100vw;
- height: 100vh;
- position: relative;
- 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 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 headerStyle = {
- fontFamily: 'NanumSquareNeo',
- fontWeight: 700,
- color: '#fff',
- fontSize: '2em',
-};
-
-const subtitleStyle = {
- fontFamily: 'NanumSquareNeo',
- fontWeight: 600,
- color: '#fff',
- fontSize: '1em',
- paddingTop: '15px',
-};
-
-export default function Section1() {
- return (
-
+ Page 5
+
+
+
+ Page 6
+
+
+
+ Page 7
+
+
-
-
-
- KERT
KNU Computer Emergency Response Team
- 
-
-
+
+
+
+ KERT
+
+
+ KNU Computer Emergency Response Team
+
+
+
+
-
-
- );
-}
+import React from 'react';
+import bg_img from '../assets/Section2_bg_img.png';
+import lock_icon from '../assets/kert_logos/White_incline_Lock.png';
+import '../font/main_font.css';
+import styled from 'styled-components';
+import { Container } from '../components/forms/Container';
+import { Text, Span } from '../components/typograph/Text';
+import { Checkbox } from '../components/forms/Checkbox';
+import { Toggle } from '../components/forms/Toggle';
+
+const bg_Style = {
+ width: '100vw',
+ height: '100vh',
+ display: 'flex',
+ alignItems: 'center',
+ fontSize: '2em',
+ opacity: 0.9,
+ backgroundImage: `url(${bg_img})`,
+ backgroundSize: 'cover',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ position: 'relative',
+};
+
+const overlayStyle = {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ backgroundColor: 'rgba(0, 0, 0, 0.78)',
+ zIndex: 1,
+};
+
+const Title = styled(Span).attrs({
+ id: 'title',
+ $size: 'sxl',
+ $weight: 'heavy',
+ $color: '--primary-text-color',
+})`
+ margin-bottom: 12px;
+`;
+
+const contentStyle = {
+ position: 'relative',
+ zIndex: 1,
+ textAlign: 'flex-start',
+ color: '#fff',
+ fontFamily: 'NanumSquareNeo',
+ padding: '20px',
+};
+
+const lockIconStyle = {
+ width: '100%',
+ height: '100%',
+ objectFit: 'contain', // Maintains aspect ratio
+};
+
+const lockIconOverlayStyle = {
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ width: '100%',
+ height: '50%', // Adjust as necessary
+ background:
+ 'linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%)',
+};
+
+const textStyle = {
+ marginBottom: '20px',
+ lineHeight: '1.5',
+ transform: 'translateX(65%)',
+ fontFamily: 'NanumSquareNeo',
+ fontWeight: 'extrabold',
+};
+
+const minitextStyle = {
+ marginBottom: '1px',
+ lineHeight: '1.5',
+ transform: 'translateX(65%)',
+ fontFamily: 'NanumSquareNeo',
+ fontWeight: 'extrabold',
+};
+
+const statItemStyle = {
+ margin: '30px', // Adjust margin for spacing between items
+ textAlign: 'center',
+ fontFamily: 'NanumSquareNeo',
+ opacity: 0.6,
+ justifyContent: 'center',
+};
+
+const DateStyle = {
+ fontSize: '3em',
+ backgroundImage: 'linear-gradient(to right, #FFFFFF, #6F8CB8)',
+ WebkitBackgroundClip: 'text',
+ backgroundClip: 'text',
+ color: 'transparent',
+ fontWeight: 'bold',
+};
+
+const containerStyle = {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginTop: '20px',
+ transform: 'translateX(50%)',
+};
+
+const lockIconContainerStyle = {
+ position: 'absolute',
+ bottom: '-60px', //이미지 아래로
+ left: '50%',
+ transform: 'translateX(85%)',
+ width: '500px',
+ height: '500px',
+ display: 'flex',
+ zIndex: 1,
+ opacity: 0.9,
+ overflow: 'hidden', // This ensures the gradient overlay is properly contained
+};
+
+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,
+};
+
+export default function MainPage() {
+ return (
+
-
- 보안에 진심인 사람들이 모여,
- 경북대학교의 보안을 지킵니다.
-
-
- 
-
-
-
-
-
-
-
- KERT가 개설된 지
-
- 27년
-
-
-
- 가입한 인원
-
- 61명
-
+
+
+ );
+}
diff --git a/src/pages/Section3.jsx b/src/pages/Section3.jsx
index f461d0d..e96ecda 100644
--- a/src/pages/Section3.jsx
+++ b/src/pages/Section3.jsx
@@ -1,173 +1,186 @@
-import React from 'react';
-import bg_img from "../assets/Section3_bg_img.png";
-import Hspace from "../assets/HSpace.png";
-import KUCIS from "../assets/KUCIS.png";
-import CCA from "../assets/CCA.png";
-import Computer from "../assets/Computer.png"
-import GroupCard from "../assets/GroupCard.png"
-import styled from "styled-components";
-import { Text, Span } from "../components/typograph/Text";
-import "../font/main_font.css";
-
-//Dev문서 타이틀 양식 가져오기
-const Title = styled(Span).attrs({ id: "title", $size: "sxl", $weight: "heavy", $color: "--primary-text-color" })`
- margin-bottom: 12px;
-`;
-
-//Dev문서 서브타이틀 양식 가져오기
-const SubTitle = styled(Span).attrs({
- $size: "l", $weight: "bold"
-})`
- margin-bottom: 10px;
-`;
-
-//MainPage 양식과 호환될 수 있도록 바탕 설정
-const back_first_Style = {
- width: '100vw',
- height: '100vh',
- position: 'relative',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- backgroundPosition: 'center center',
- backgroundImage: `url(${bg_img})`,
- backgroundSize: 'cover', // Ensure background covers entire area
-};
-
-//배경 중 작성될 텍스트 컨테이너 스타일 설정
-const textContainerStyle = {
- fontFamily: 'NanumSquareNeo',
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
- textAlign: 'center',
- paddingTop: '9%',
- position: 'absolute',
- top: '0',
- color: '#FFFFFF',
-};
-
-
-//그룹카드 grid 배치 설정
-const groupCardsContainerStyle = {
- display: 'grid',
- gridTemplateColumns: 'repeat(2, 1fr)', // 2열 그리드 유지
- gridGap: '40px', // 카드 사이의 간격을 40px로 설정
- width: '85%',
- maxWidth: '2000px',
- marginTop: '4em',
-};
-
-//GroupCard Image 크기 및 스타일 설정
-const groupCardStyle = {
- position: 'relative',
- display: 'flex',
- alignItems: 'center',
- gap: 20,
- backgroundImage: `url(${GroupCard})`,
- backgroundSize: 'cover',
- padding: '35px 25px 15px 25px', // 패딩을 25px로 확대하여 카드 내 공간을 더 넓게 설정
- height: 155,
- width: 250,
- backdropFilter: 'blur(10px)',
-};
-
-//각 그룹카드에 넣을 로고 이미지 양식
-const GroupCardLogo = {
- width: 72,
- height: 72,
- marginRight: '10px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'flex-start',
-};
-
-//그룹카드 상단에 있는 이름 양식. Figma에서 들고왔어영
-const GroupCardName = {
- fontFamily: 'NanumSquareNeo',
- fontSize: 15,
- fontWeight: 300,
- marginBottom: '0.7em',
- position: 'absolute',
- top: 10,
- left: 20,
-};
-
-const groupCardContent = {
- display: 'flex',
- flexDirection: 'column',
- textAlign: 'left',
- alignItems: 'flex-start',
- justifyContent: 'center',
-};
-
-//그룹카드안에 가입날짜 양식! Figma에서 들고왔어영
-const GroupCardDate = {
- fontFamily: 'NanumSquareNeo',
- fontWeight: 300,
- fontSize: '0.5em',
- color: 'rgba(255, 255, 255, 0.5)',
- marginTop:'0.8em',
- marginBottom: '3em',
-};
-
-//그룹카드안에 해시태그 양식. Figma에서 들고왔어영
-const GroupCardHashTag = {
- fontFamily: 'NanumSquareNeo',
- fontSize: '0.35em',
- color: 'rgba(255, 255, 255, 0.5)',
-};
-
-export default function Section1() {
- return (
-
+
+
+ 보안에 진심인 사람들이 모여,
+
+
+ +
경북대학교의 보안을 지킵니다.
+
+
+
+
+
+
+
+
+
+ KERT가 개설된 지
+ 27년
+
+
+ 가입한 인원
+ 61명
+
-
- );
-}
-
-
+import React from 'react';
+import bg_img from '../assets/Section3_bg_img.png';
+import Hspace from '../assets/HSpace.png';
+import KUCIS from '../assets/KUCIS.png';
+import CCA from '../assets/CCA.png';
+import Computer from '../assets/Computer.png';
+import GroupCard from '../assets/GroupCard.png';
+import styled from 'styled-components';
+import { Text, Span } from '../components/typograph/Text';
+import '../font/main_font.css';
+
+//Dev문서 타이틀 양식 가져오기
+const Title = styled(Span).attrs({
+ id: 'title',
+ $size: 'sxl',
+ $weight: 'heavy',
+ $color: '--primary-text-color',
+})`
+ margin-bottom: 12px;
+`;
+
+//Dev문서 서브타이틀 양식 가져오기
+const SubTitle = styled(Span).attrs({
+ $size: 'l',
+ $weight: 'bold',
+})`
+ margin-bottom: 10px;
+`;
+
+//MainPage 양식과 호환될 수 있도록 바탕 설정
+const back_first_Style = {
+ width: '100vw',
+ height: '100vh',
+ position: 'relative',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundPosition: 'center center',
+ backgroundImage: `url(${bg_img})`,
+ backgroundSize: 'cover', // Ensure background covers entire area
+};
+
+//배경 중 작성될 텍스트 컨테이너 스타일 설정
+const textContainerStyle = {
+ fontFamily: 'NanumSquareNeo',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ textAlign: 'center',
+ paddingTop: '9%',
+ position: 'absolute',
+ top: '0',
+ color: '#FFFFFF',
+};
+
+//그룹카드 grid 배치 설정
+const groupCardsContainerStyle = {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(2, 1fr)', // 2열 그리드 유지
+ gridGap: '40px', // 카드 사이의 간격을 40px로 설정
+ width: '85%',
+ maxWidth: '2000px',
+ marginTop: '4em',
+};
+
+//GroupCard Image 크기 및 스타일 설정
+const groupCardStyle = {
+ position: 'relative',
+ display: 'flex',
+ alignItems: 'center',
+ gap: 20,
+ backgroundImage: `url(${GroupCard})`,
+ backgroundSize: 'cover',
+ padding: '35px 25px 15px 25px', // 패딩을 25px로 확대하여 카드 내 공간을 더 넓게 설정
+ height: 155,
+ width: 250,
+ backdropFilter: 'blur(10px)',
+};
+
+//각 그룹카드에 넣을 로고 이미지 양식
+const GroupCardLogo = {
+ width: 72,
+ height: 72,
+ marginRight: '10px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+};
+
+//그룹카드 상단에 있는 이름 양식. Figma에서 들고왔어영
+const GroupCardName = {
+ fontFamily: 'NanumSquareNeo',
+ fontSize: 15,
+ fontWeight: 300,
+ marginBottom: '0.7em',
+ position: 'absolute',
+ top: 10,
+ left: 20,
+};
+
+const groupCardContent = {
+ display: 'flex',
+ flexDirection: 'column',
+ textAlign: 'left',
+ alignItems: 'flex-start',
+ justifyContent: 'center',
+};
+
+//그룹카드안에 가입날짜 양식! Figma에서 들고왔어영
+const GroupCardDate = {
+ fontFamily: 'NanumSquareNeo',
+ fontWeight: 300,
+ fontSize: '0.5em',
+ color: 'rgba(255, 255, 255, 0.5)',
+ marginTop: '0.8em',
+ marginBottom: '3em',
+};
+
+//그룹카드안에 해시태그 양식. Figma에서 들고왔어영
+const GroupCardHashTag = {
+ fontFamily: 'NanumSquareNeo',
+ fontSize: '0.35em',
+ color: 'rgba(255, 255, 255, 0.5)',
+};
+
+export default function Section1() {
+ return (
+
- 우리 모두 함께해요
- KERT는 HSpace와 KUCIS/CCA의 소속으로 가입되어 수준 높은 활동을 외부에서 체험할 수 있어요.
-
-
-
-
- 
-
- HSpace
-
- HSpace
-
- 가입일자: 2024.7.6 (D+20)
- #Hackers #space
-
- 
-
- KUCIS
-
- KUCIS
-
- 가입일자: 2024.7.6 (D+20)
- #대학생정보보호동아리 #KISA
-
- 
-
- CCA
-
- CCA
-
-
- 가입일자: 2024.7.6 (D+20)
- #전국사이버보안동아리연합
-
- 
-
- 컴퓨터학부
-
- 컴퓨터학부
-
-
- 가입일자: 2024.7.6 (D+20)
- #IT대학 #천재들의모임
-
+
+ );
+}
diff --git a/src/pages/Section4.jsx b/src/pages/Section4.jsx
index 8bee9f1..ece1169 100644
--- a/src/pages/Section4.jsx
+++ b/src/pages/Section4.jsx
@@ -1,157 +1,172 @@
-import React from 'react';
-import bg_img from "../assets/Section4_bg_img.png";
-import styled from "styled-components";
-import { Text, Span } from "../components/typograph/Text";
-import web from "../assets/icons/Web.png";
-import Crypto from "../assets/icons/Crypto.png";
-import Reversing from "../assets/icons/Reversing.png";
-import Linux from "../assets/icons/Linux.png";
-import "../font/main_font.css";
-
-// Dev문서 타이틀 양식 가져오기
-const Title = styled(Span).attrs({ id: "title", $size: "sxl", $weight: "heavy", $color: "--primary-text-color" })`
- margin-bottom: 12px;
-`;
-
-// Container for the left content
-const LeftContentContainr = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
- padding: 0 50px;
-`;
-
-// Container to wrap the left and right content containers
-const ContentWrapper = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
- padding: 0 10%;
-`;
-
-// MainPage 양식과 호환될 수 있도록 바탕 설정
-const BackFirstStyle = styled.div`
- width: 100vw;
- height: 100vh;
- position: relative;
- display: flex;
- justify-content: center;
- align-items: center;
- background-position: center center;
- background-image: url(${bg_img});
- background-size: cover;
-`;
-
-// Container for the right content boxes
-const RightContentContainer = styled.div`
- display: flex;
- flex-wrap: wrap;
- align-items: flex-start;
- justify-content: flex-start;
- margin-left: 100px;
- gap: 20px; /* GroupBox 간의 간격을 설정 */
- margin-top: 20px; /* 상단 간격 추가 */
- margin-bottom: 20px; /* 하단 간격 추가 */
-`;
-
-const GroupBox = styled.div`
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding: 20px;
- gap: 20px;
- width: 250px;
- height: auto;
-
- background: rgba(255, 255, 255, 0.1);
- box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
- backdrop-filter: blur(5px);
- border-radius: 20px;
-
- flex: none;
- order: 0;
- flex-grow: 0;
-`;
-
-const HeaderIcon = styled.img`
- display: block;
- width: 50px;
- height: 50px;
- margin-bottom: 30px; /* HeaderIcon과 GroupTitle 사이의 간격 설정 */
-`;
-
-const GroupTitle = styled.div`
- width: 100%;
- font-family: 'NanumSquare';
- font-style: normal;
- font-weight: 800;
- font-size: 20px;
- line-height: 29px;
- color: #FFFFFF;
- text-align: left;
-`;
-
-const GroupContent = styled.div`
- width: 100%;
- font-family: 'NanumSquare';
- font-style: normal;
- font-weight: 400;
- font-size: 13px;
- line-height: 18px;
- color: rgba(255, 255, 255, 0.5);
- text-align: left;
-`;
-
-export default function Section1() {
- return (
-
+ 우리 모두 함께해요
+
+ {' '}
+ KERT는 HSpace와 KUCIS/CCA의 소속으로 가입되어 수준 높은 활동을
+ 외부에서 체험할 수 있어요.
+
+
+
+
+
+
+
+ HSpace
+
+
+ HSpace
+
+
+ 가입일자: 2024.7.6 (D+20)
+ #Hackers #space
+
+
+
+ KUCIS
+
+
+ KUCIS
+
+
+ 가입일자: 2024.7.6 (D+20)
+ #대학생정보보호동아리 #KISA
+
+
+
+ CCA
+
+
+ CCA
+
+
+ 가입일자: 2024.7.6 (D+20)
+ #전국사이버보안동아리연합
+
+
+
+ 컴퓨터학부
+
+
+ 컴퓨터학부
+
+
+ 가입일자: 2024.7.6 (D+20)
+ #IT대학 #천재들의모임
+
@@ -45,69 +45,70 @@ export default function SignUp () {
{/* name */}
setUsername(e.target.value)}
+ className="input-name"
+ type="text"
+ placeholder="이름"
+ value={username}
+ onChange={(e) => setUsername(e.target.value)}
/>
{/* e-mail */}
-
+
setMail(e.target.value)}
+ className="input-mail"
+ type="mail"
+ placeholder="mail"
+ value={mail}
+ onChange={(e) => setMail(e.target.value)}
/>
{/* pw */}
setPassword(e.target.value)}
+ className="input-pw"
+ type="password"
+ placeholder="비밀번호"
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
/>
{/* student number */}
setStudenet(e.target.value)}
+ className="input-sn"
+ type="student"
+ placeholder="학번"
+ value={student}
+ onChange={(e) => setStudenet(e.target.value)}
/>
- {/* major */}
+ {/* major */}
setMajor(e.target.value)}
+ className="input-major"
+ type="major"
+ placeholder="전공"
+ value={major}
+ onChange={(e) => setMajor(e.target.value)}
/>
- {/* generation */}
+ {/* generation */}
setGE(e.target.value)}
+ className="input-ge"
+ type="generation"
+ placeholder="기수"
+ value={generation}
+ onChange={(e) => setGE(e.target.value)}
/>
-
-
+
+