Skip to content

Commit

Permalink
award 페이지 리팩토링
Browse files Browse the repository at this point in the history
  • Loading branch information
happyhyep committed Jan 12, 2024
1 parent 6de04fa commit 12011be
Show file tree
Hide file tree
Showing 7 changed files with 181 additions and 111 deletions.
39 changes: 39 additions & 0 deletions src/assets/css/common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
95 changes: 65 additions & 30 deletions src/assets/css/pages/awards.scss
Original file line number Diff line number Diff line change
@@ -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%;
}
}
}
1 change: 1 addition & 0 deletions src/assets/css/variable.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ $colorBlack: #000000;

$colorGray100: #333333;
$colorGray200: #888888;
$colorGray300: #808080;

$colorBrown100: #53354A;

Expand Down
12 changes: 12 additions & 0 deletions src/components/AwardBox.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";

const AwardBox = (props: any) => {
return (
<div className="box">
<img alt="award-img" src={props.img}></img>
<div>{props.text}</div>
</div>
);
};

export default AwardBox;
2 changes: 1 addition & 1 deletion src/components/common/DashTitle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const DashTitle = (props: any) => {
return (
<div className="dash-title">
<div className="dash-line" />
<div className="introduce-page-title-font">{props.name}</div>
<div className="title-font">{props.name}</div>
<div className="dash-line" />
</div>
);
Expand Down
118 changes: 38 additions & 80 deletions src/pages/Awards.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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 (
<>
<NavBar></NavBar>
{/*<motion.div*/}
{/* className="bar"*/}
{/* style={{*/}
{/* scaleX: scrollYProgress,*/}
{/* position: "fixed",*/}
{/* top: 0,*/}
{/* left: 0,*/}
{/* bottom: 0,*/}
{/* right: 0,*/}
{/* width: "100%",*/}
{/* height: "5px",*/}
{/* transformOrigin: 0,*/}
{/* transform: "translate3d(0, 0, 0)",*/}
{/* background: "#000000",*/}
{/* }}*/}
{/*/>*/}
{/*<div className={`award-box-container ${isBoxShown ? "" : "active"}`}>*/}
{/* <Box className="award4-box">*/}
{/* <AwardImg alt="award_money" src={award_money}></AwardImg>*/}
{/* <div*/}
{/* style={{*/}
{/* display: "flex",*/}
{/* justifyContent: "center",*/}
{/* marginBottom: "3%",*/}
{/* }}*/}
{/* >*/}
{/* 성적우수 장학, 밝은사회 장학, SW중심대학 장학 ... 외 다수 장학 수혜*/}
{/* </div>*/}
{/* </Box>*/}
{/*</div>*/}
{/*<div className="award-box-container">*/}
{/* <Box className="award3-box">*/}
{/* <AwardImg alt="award_sanjose" src={award_sanjose}></AwardImg>*/}
{/* <div*/}
{/* style={{*/}
{/* display: "flex",*/}
{/* justifyContent: "center",*/}
{/* marginBottom: "3%",*/}
{/* }}*/}
{/* >*/}
{/* 2023 San Jose State University Enterpreneurship Award 최우수*/}
{/* </div>*/}
{/* </Box>*/}
{/*</div>*/}
{/*<div style={{ display: "flex", justifyContent: "center" }}>*/}
{/* <Box className="award2-box">*/}
{/* <AwardImg alt="award_dcom" src={award_dcom}></AwardImg>*/}
{/* <div*/}
{/* style={{*/}
{/* display: "flex",*/}
{/* justifyContent: "center",*/}
{/* marginBottom: "3%",*/}
{/* }}*/}
{/* >*/}
{/* 2022 경희대학교 소프트웨어융합대학 동아리대항전 최우수*/}
{/* </div>*/}
{/* </Box>*/}
{/*</div>*/}
{/*<div style={{ display: "flex", justifyContent: "center" }}>*/}
{/* <Box className="award1-box">*/}
{/* <AwardImg alt="award_edu" src={award_edu}></AwardImg>*/}
{/* <div*/}
{/* style={{*/}
{/* display: "flex",*/}
{/* justifyContent: "center",*/}
{/* marginBottom: "3%",*/}
{/* }}*/}
{/* >*/}
{/* 2021 대학생 교육기부 공모전 장작 더하기 장려상*/}
{/* </div>*/}
{/* </Box>*/}
{/*</div>*/}
<Footer />
</>
<Layout>
<section className="awards-page">
<TopBar color="#000000" />
{awardsList &&
awardsList.map((el, index) => {
return <AwardBox img={el.img} text={el.name} />;
})}
</section>
</Layout>
);
}

Expand Down
25 changes: 25 additions & 0 deletions src/types/type.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,34 @@
import { STACK_NAME } from "src/types/enum";

export interface EducationData {
period: string | undefined;
name: string;
}

export interface AwardData {
key: string;
name: string;
img: string;
}

export interface SelectOptionInterface {
value: string;
label: string;
}

export interface ProjectDataInterface {
idx: number;
img: string;
title: string;
subtitle: string;
user: string | null;
strongStacks: STACK_NAME[];
stacks: STACK_NAME[] | null;
desc: string[];
isHaveWeb: boolean;
isHaveGithub: boolean;
isHaveVideo: boolean;
webLink: string | null;
githubLink: string | null;
videoLink: string | null;
}

0 comments on commit 12011be

Please sign in to comment.