diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss index 600adb6..1fed386 100644 --- a/src/assets/css/common.scss +++ b/src/assets/css/common.scss @@ -30,4 +30,43 @@ html { border: 0.125rem dashed $colorBlack; margin: 8.75rem 0 8.75rem; } + .title-font { + margin: 0 8rem; + font-family: iceJaram-Rg; + font-size: 10rem; + line-height: 8.875rem; + text-align: center; + letter-spacing: 0.15em; + } +} + +.project-btn { + display: flex; + justify-content: center; + align-items: center; + + border-radius: 0.625rem; + border-width: 0.0625rem; + width: 12.5rem; + height: 3.75rem; + background-color: $colorGray100; + color: $colorWhite; + text-align: center; + text-decoration: none; + font-size: 1.5rem; + cursor: pointer; + + img { + width: 2rem; + margin-right: 0.375rem; + } +} + +.dim { + background-color: $colorBlack; + opacity: 0.2; + position: fixed; + width: 100%; + height: 100%; + z-index: 3; } \ No newline at end of file diff --git a/src/assets/css/pages/awards.scss b/src/assets/css/pages/awards.scss index 10e6e33..59a5716 100644 --- a/src/assets/css/pages/awards.scss +++ b/src/assets/css/pages/awards.scss @@ -1,34 +1,69 @@ -.award-box-container { - display: flex; - justify-content: center; - - - .award4-box { - transform: translateX(20%); - opacity: 0.1; - transition: .8s; - } - - //.award4-box.active { - // transform: translateX(0); - // opacity: 1; - //} -} -.award3-box { -} - -//.award3-box.active { -// transform: translateX(0); -// opacity: 1; +//.award-box-container { +// display: flex; +// justify-content: center; +// +// +// .award4-box { +// transform: translateX(20%); +// opacity: 0.1; +// transition: .8s; +// } +// +// //.award4-box.active { +// // transform: translateX(0); +// // opacity: 1; +// //} +//} +//.award3-box { +//} +// +////.award3-box.active { +//// transform: translateX(0); +//// opacity: 1; +////} +// +//@keyframes active-animation { +// 0% { +// opacity: 0; +// transform: translateX(20%); +// } +// 100% { +// opacity: 1; +// transform: translateX(0); +// } //} -@keyframes active-animation { - 0% { - opacity: 0; - transform: translateX(20%); - } - 100% { - opacity: 1; - transform: translateX(0); +.awards-page { + display: flex; + flex-direction: column; + align-items: center; + gap: 7.5rem; + padding: 7.5rem 0; + .box { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 70%; + gap: 5rem; + //margin-top: 3%; + padding: 3%; + background-color: $colorWhite; + border-radius: 2rem; + box-shadow: 0.375rem 0.375rem 2.5rem 0.75rem $colorGray300; + font-family: "Noto Sans KR"; + color: $colorBrown100; + img { + width: 50%; + //margin-top: 5%; + //margin-bottom: 3%; + } + div { + font-size: 2rem; + display: flex; + justify-content: center; + align-items: center; + //margin-bottom: 3%; + } } } \ No newline at end of file diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss index bfe8d5e..6afa55d 100644 --- a/src/assets/css/variable.scss +++ b/src/assets/css/variable.scss @@ -7,6 +7,7 @@ $colorBlack: #000000; $colorGray100: #333333; $colorGray200: #888888; +$colorGray300: #808080; $colorBrown100: #53354A; diff --git a/src/components/AwardBox.tsx b/src/components/AwardBox.tsx new file mode 100644 index 0000000..c9a84b6 --- /dev/null +++ b/src/components/AwardBox.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +const AwardBox = (props: any) => { + return ( +
+ award-img +
{props.text}
+
+ ); +}; + +export default AwardBox; diff --git a/src/components/common/DashTitle.tsx b/src/components/common/DashTitle.tsx index b35c087..4394e0e 100644 --- a/src/components/common/DashTitle.tsx +++ b/src/components/common/DashTitle.tsx @@ -4,7 +4,7 @@ const DashTitle = (props: any) => { return (
-
{props.name}
+
{props.name}
); diff --git a/src/pages/Awards.tsx b/src/pages/Awards.tsx index de3f165..f00272c 100644 --- a/src/pages/Awards.tsx +++ b/src/pages/Awards.tsx @@ -1,15 +1,17 @@ import React, { useState } from "react"; -import NavBar from "src/components/common/NavBar"; -import Footer from "src/components/common/Footer"; import award_sanjose from "src/assets/images/awards/award_sanjose.webp"; import award_dcom from "src/assets/images/awards/award_dcom.webp"; import award_edu from "src/assets/images/awards/award_edu.webp"; import award_money from "src/assets/images/awards/award_money.webp"; -import { motion, useScroll } from "framer-motion"; import { observer } from "src/utils/IntersectionObserver"; +import TopBar from "src/components/common/TopBar"; +import Layout from "src/components/layout/Layout"; +import AwardBox from "src/components/AwardBox"; +import { AwardData } from "src/types/type"; +import { useTranslation } from "react-i18next"; export default function Awards() { - const { scrollYProgress } = useScroll(); + const { t } = useTranslation(); // TODO redux로 관리해서 InsertsectionObserver 함수에서 상태 변화시키기 const [isBoxShown, setIsBoxShown] = useState(false); @@ -18,83 +20,39 @@ export default function Awards() { award4Box.forEach((el) => observer.observe(el)); + const awardsList: AwardData[] = [ + { + key: "money", + name: t("awards.money"), + img: award_money, + }, + { + key: "sanjose", + name: t("awards.sanjose"), + img: award_sanjose, + }, + { + key: "khu", + name: t("awards.khu"), + img: award_dcom, + }, + { + key: "edu", + name: t("awards.edu"), + img: award_edu, + }, + ]; + return ( - <> - - {/**/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/* 성적우수 장학, 밝은사회 장학, SW중심대학 장학 ... 외 다수 장학 수혜*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/* 2023 San Jose State University Enterpreneurship Award 최우수*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/* 2022 경희대학교 소프트웨어융합대학 동아리대항전 최우수*/} - {/*
*/} - {/* */} - {/**/} - {/*
*/} - {/* */} - {/* */} - {/* */} - {/* 2021 대학생 교육기부 공모전 장작 더하기 장려상*/} - {/*
*/} - {/* */} - {/**/} -