diff --git a/index.html b/index.html index 139cd28..3b9b0fd 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ dataLayer.push(arguments); } gtag("js", new Date()); - gtag("config", import.meta.env.VITE_GOOGLE_ANALYTICS); + gtag("config", "%import.meta.env.VITE_GOOGLE_ANALYTICS%"); 2024 경북대 대동제, 하푸르나 diff --git a/src/assets/daegun.png b/src/assets/daegun.png new file mode 100644 index 0000000..b46b313 Binary files /dev/null and b/src/assets/daegun.png differ diff --git a/src/assets/donggun.png b/src/assets/donggun.png new file mode 100644 index 0000000..05e60c1 Binary files /dev/null and b/src/assets/donggun.png differ diff --git a/src/assets/dongpil.png b/src/assets/dongpil.png new file mode 100644 index 0000000..035756a Binary files /dev/null and b/src/assets/dongpil.png differ diff --git a/src/assets/hyoeun.png b/src/assets/hyoeun.png new file mode 100644 index 0000000..718a1c6 Binary files /dev/null and b/src/assets/hyoeun.png differ diff --git a/src/assets/jeongsik.png b/src/assets/jeongsik.png new file mode 100644 index 0000000..a498529 Binary files /dev/null and b/src/assets/jeongsik.png differ diff --git a/src/assets/jiwoong.png b/src/assets/jiwoong.png new file mode 100644 index 0000000..fd1b88c Binary files /dev/null and b/src/assets/jiwoong.png differ diff --git a/src/assets/junhyeok.png b/src/assets/junhyeok.png new file mode 100644 index 0000000..216728d Binary files /dev/null and b/src/assets/junhyeok.png differ diff --git a/src/components/display/Card.styled.ts b/src/components/display/Card.styled.ts new file mode 100644 index 0000000..4396616 --- /dev/null +++ b/src/components/display/Card.styled.ts @@ -0,0 +1,99 @@ +import styled from "styled-components"; + +export const SectionWrapper = styled.div` + background: #ffffff; + padding: 20px; + width: 70%; + margin-bottom: 30px; + + display: flex; + flex-direction: column; + align-items: center; + + border: 1px solid #d4d2e3; + border-radius: 24px; +`; + +export const TopSection = styled.div` + display: flex; + align-items: center; + width: 100%; +`; + +export const Photo = styled.img` + width: 70px; + height: 70px; + border-radius: 50%; + object-fit: cover; + margin-right: 20px; +`; + +export const MemberInfo = styled.div` + display: flex; + flex-direction: column; + gap: 2px; +`; + +export const MiddleSection = styled.div` + width: 100%; + padding: 10px 0; +`; + +export const Description = styled.div` + margin-top: 6px; + list-style: none; + padding-left: 0; + + li { + position: relative; + margin-bottom: 3px; + padding-left: 20px; + + &::before { + content: ""; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 6px; + height: 6px; + background-color: #adabc3; + border-radius: 50%; + } + } +`; + +export const BottomSection = styled.div` + width: 100%; + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + padding: 0; +`; + +export const Contact = styled.div` + display: flex; + gap: 10px; + flex-wrap: wrap; +`; + +export const IconLink = styled.a` + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 5px 10px; + background-color: #f2f2f2; + border-radius: 20px; + color: #5d5a88; + text-decoration: none; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + font-family: "MesloLGS NF", monospace; +`; + +export const SocialIcon = styled.div` + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; +`; diff --git a/src/components/display/Card.tsx b/src/components/display/Card.tsx new file mode 100644 index 0000000..e66d1b5 --- /dev/null +++ b/src/components/display/Card.tsx @@ -0,0 +1,96 @@ +import { FaInstagram, FaLinkedin, FaGithub } from "react-icons/fa"; + +import { Text } from "../typography/Text"; +import { + SectionWrapper, + TopSection, + Photo, + MemberInfo, + MiddleSection, + Description, + BottomSection, + Contact, + IconLink, +} from "./Card.styled"; + +interface ICard { + name: string; + dept: string; + role: string; + photo: string; + description: string[]; + contact: { + instagram?: string; + linkedin?: string; + github?: string; + }; + team: string; +} + +const Card: React.FC = ({ photo, name, dept, role, description, contact }) => { + const instagramURL = contact.instagram ? `https://instagram.com/${contact.instagram}` : null; + const linkedinURL = contact.linkedin ? `https://linkedin.com/in/${contact.linkedin}` : null; + const githubURL = contact.github ? `https://github.com/${contact.github}` : null; + + return ( + <> + + + + + + {name} + + + {dept} + + + {role} + + + + + + {description.map((item, index) => ( +
  • + + {item} + +
    • + ))} +     +     + + + {instagramURL && ( + + + + {contact.instagram} + + + )} + {linkedinURL && ( + + + + {contact.linkedin} + + + )} + {githubURL && ( + + + + {contact.github} + + + )} + + +     + + ); +}; + +export default Card; diff --git a/src/components/display/Countdown.tsx b/src/components/display/Countdown.tsx index f1b3be4..6ffbf38 100644 --- a/src/components/display/Countdown.tsx +++ b/src/components/display/Countdown.tsx @@ -28,7 +28,7 @@ export const Countdown: React.FC = ({ targetDate }) => { 축제까지 남은 시간 - + {displayTime} diff --git a/src/components/typography/Text.tsx b/src/components/typography/Text.tsx index 6c48ae9..6a72bb3 100644 --- a/src/components/typography/Text.tsx +++ b/src/components/typography/Text.tsx @@ -11,6 +11,8 @@ export const Text = styled.span` font-size: ${(props) => { switch (props.size) { + case "xxs": + return "12px"; case "xs": return "14px"; case "s": @@ -20,6 +22,8 @@ export const Text = styled.span` case "l": return "22px"; case "xl": + return "28px"; + case "xxl": return "40px"; default: return props.size; diff --git a/src/constants/contributors.json b/src/constants/contributors.json new file mode 100644 index 0000000..538f23d --- /dev/null +++ b/src/constants/contributors.json @@ -0,0 +1,81 @@ +[ + { + "name": "김대건", + "dept": "컴퓨터학부 20", + "role": "멋쟁이사자처럼 12기 회장", + "photo": "daegun", + "description": ["지도 페이지 개발", "기여한 부분 2", "기여한 부분 3"], + "contact": { + "instagram": "toothless.kid" + }, + "team": "Front-End" + }, + { + "name": "이효은", + "dept": "컴퓨터학부 21", + "role": "멋쟁이사자처럼 12기 운영진", + "photo": "hyoeun", + "description": ["웹 페이지 디자인", "", "기여한 부분 3"], + "contact": { + "instagram": "hyon__er" + }, + "team": "Front-End" + }, + { + "name": "조동필", + "dept": "컴퓨터학부 19", + "role": "멋쟁이사자처럼 12기 운영진", + "photo": "dongpil", + "description": ["웹 페이지 디자인", "기여한 부분 2", "기여한 부분 3"], + "contact": { + "instagram": "j0_dph" + }, + "team": "Front-End" + }, + { + "name": "채준혁", + "dept": "컴퓨터학부 21", + "role": "멋쟁이사자처럼 12기 운영진", + "photo": "junhyeok", + "description": ["메인 페이지 개발", "만든이들 페이지 개발 2", "웹 페이지 디자인"], + "contact": { + "instagram": "junyeokk_", + "linkedin": "junhyeokchae", + "github": "junyeokk" + }, + "team": "Front-End" + }, + { + "name": "이동건", + "dept": "컴퓨터학부 20", + "role": "멋쟁이사자처럼 12기 운영진", + "photo": "donggun", + "description": ["기여한 부분 1", "기여한 부분 2", "기여한 부분 3"], + "contact": { + "instagram": "thismovinggun" + }, + "team": "Back-End" + }, + { + "name": "전지웅", + "dept": "컴퓨터학부 19", + "role": "멋쟁이사자처럼 12기 운영진", + "photo": "jiwoong", + "description": ["기여한 부분 1", "기여한 부분 2", "기여한 부분 3"], + "contact": { + "instagram": "dnd._.hihi" + }, + "team": "Back-End" + }, + { + "name": "최정식", + "dept": "컴퓨터학부 21", + "role": "멋쟁이사자처럼 12기 운영진", + "photo": "jeongsik", + "description": ["기여한 부분 1", "기여한 부분 2", "기여한 부분 3"], + "contact": { + "instagram": "siksik__choi" + }, + "team": "Back-End" + } +] diff --git a/src/pages/ContributorPage.styled.ts b/src/pages/ContributorPage.styled.ts new file mode 100644 index 0000000..2e10a4f --- /dev/null +++ b/src/pages/ContributorPage.styled.ts @@ -0,0 +1,32 @@ +import styled from "styled-components"; + +export const DefaultGap = styled.div` + margin-top: 120px; +`; + +export const TextContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-top: 50px; + text-align: center; + line-height: 1.5; + + span { + margin-bottom: 10px; + } +`; + +export const PositionContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 40px 0; +`; + +export const PositionTextWrapper = styled.div` + margin-bottom: 20px; + font-family: "MesloLGS NF", monospace; +`; diff --git a/src/pages/ContributorPage.styled.tsx b/src/pages/ContributorPage.styled.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/ContributorPage.tsx b/src/pages/ContributorPage.tsx index 741114b..749b976 100644 --- a/src/pages/ContributorPage.tsx +++ b/src/pages/ContributorPage.tsx @@ -1,3 +1,64 @@ +import { Text } from "@/components/typography/Text"; + +import daegun from "@/assets/daegun.png"; +import donggun from "@/assets/donggun.png"; +import dongpil from "@/assets/dongpil.png"; +import hyoeun from "@/assets/hyoeun.png"; +import jeongsik from "@/assets/jeongsik.png"; +import jiwoong from "@/assets/jiwoong.png"; +import junhyeok from "@/assets/junhyeok.png"; + +import contributors from "@/constants/contributors.json"; + +import Card from "../components/display/Card"; +import { DefaultGap, TextContainer, PositionContainer, PositionTextWrapper } from "./ContributorPage.styled"; + +const imageMap: { [key: string]: string } = { + daegun, + hyoeun, + dongpil, + junhyeok, + donggun, + jiwoong, + jeongsik, +}; +const teams = ["Front-End", "Back-End"]; + export default function ContributorPage() { - return <>; + const renderContributors = (team: string): JSX.Element[] => + contributors + .filter((contributor) => contributor.team === team) + .map((contributor, index) => ); + + return ( + <> + + + + + 만든이들 + + + 2024 경북대 대동제 홈페이지를 위해
    + 컴퓨터학부 멋쟁이사자처럼 운영진에서
    + 학생 분들의 편의를 위해 제작하게 되었습니다.
    +
    + 이번 축제가 오랜만에 이루어지는 만큼
    + 더 즐겁고 행복한 축제가 되셨으면 좋겠습니다. +
    +     +     + + {teams.map((team) => ( + + + + {team} + + + {renderContributors(team)} + + ))} + + ); } diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 063b3fb..d1db25d 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,4 +1,4 @@ -import React, { useRef } from "react"; +import { useRef } from "react"; import { ButtonList } from "@/components/display/ButtonList"; import { Countdown } from "@/components/display/Countdown"; @@ -9,7 +9,7 @@ import { PageContainer, MainContent, StyledImage, ElementContainer } from "@/pag import mainPageImage from "@/assets/main_page.jpg"; -const HomePage: React.FC = () => { +export default function HomePage() { const quickAccessRef = useRef(null); const scrollToQuickAccess = () => { @@ -46,6 +46,4 @@ const HomePage: React.FC = () => { ); -}; - -export default HomePage; +} diff --git a/tsconfig.json b/tsconfig.json index a5b7112..d702beb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,31 +1,31 @@ { - "compilerOptions": { - "target": "ES2020", - "useDefineForClassFields": true, - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "module": "ESNext", - "skipLibCheck": true, + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, - /* Bundler mode */ - "moduleResolution": "bundler", - "allowImportingTsExtensions": true, - "resolveJsonModule": true, - "isolatedModules": true, - "noEmit": true, - "jsx": "react-jsx", + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, - /* Folder Link */ - "baseUrl": ".", - "paths": { - "@/*": ["src/*"] - } - }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] + /* Folder Link */ + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] }