diff --git a/public/images/member_banner.png b/public/images/member_banner.png new file mode 100644 index 0000000..e78d848 Binary files /dev/null and b/public/images/member_banner.png differ diff --git a/public/images/members/lead.png b/public/images/members/lead.png new file mode 100644 index 0000000..510c879 Binary files /dev/null and b/public/images/members/lead.png differ diff --git a/public/svg/icons/member/futureCircle.svg b/public/svg/icons/member/futureCircle.svg new file mode 100644 index 0000000..0dadf87 --- /dev/null +++ b/public/svg/icons/member/futureCircle.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/svg/icons/member/futureDotLine.svg b/public/svg/icons/member/futureDotLine.svg new file mode 100644 index 0000000..0510743 --- /dev/null +++ b/public/svg/icons/member/futureDotLine.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svg/icons/member/shortDotLine.svg b/public/svg/icons/member/shortDotLine.svg new file mode 100644 index 0000000..b477eb8 --- /dev/null +++ b/public/svg/icons/member/shortDotLine.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/svg/member_header.svg b/public/svg/member_header.svg new file mode 100644 index 0000000..205017a --- /dev/null +++ b/public/svg/member_header.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/member/page.tsx b/src/app/member/page.tsx index bade14e..fbfc452 100644 --- a/src/app/member/page.tsx +++ b/src/app/member/page.tsx @@ -1,11 +1,25 @@ import React from 'react'; +import MemberHeader from '@/components/member/header/MemberHeader'; + +import GenerationPage from '@/components/member/generation/GenerationPage'; export const metadata = { title: 'Member', }; const MemberPage = () => { - return
Member 페이지입니당
; + return ( +
+ {/* -----------------------------------------------*/} + {/* -------------------- 배너 --------------------*/} + {/* -----------------------------------------------*/} + + {/* -----------------------------------------------*/} + {/* ----------- 타임라인 및 GDSC세대별 페이지-------------*/} + {/* -----------------------------------------------*/} + +
+ ); }; export default MemberPage; diff --git a/src/components/member/generation/GenerationPage.tsx b/src/components/member/generation/GenerationPage.tsx new file mode 100644 index 0000000..c0cde02 --- /dev/null +++ b/src/components/member/generation/GenerationPage.tsx @@ -0,0 +1,53 @@ +'use client'; +import LeadIntro from '@/components/member/introduce/LeadIntro'; +import MemberIntro from '@/components/member/introduce/MemberIntro'; +import TimeLine from '@/components/member/timeline/TimeLine'; +import { useState } from 'react'; +import RecruitHeader from '@/components/recruit/header/RecruitHeader'; + +const GenerationPage = () => { + const [selectedTimelineIndex, setSelectedTimelineIndex] = useState(1); + + return ( +
+ {/* -----------------------------------------------*/} + {/* -------------------- 타임라인 --------------------*/} + {/* -----------------------------------------------*/} + + + {selectedTimelineIndex === 2 ? ( +
+ {/* -----------------------------------------------*/} + {/* -------------------- 모집 페이지 --------------------*/} + {/* -----------------------------------------------*/} + +
+ ) : ( +
+ {/* -----------------------------------------------*/} + {/* -------------------- 리드 소개 --------------------*/} + {/* -----------------------------------------------*/} + + {/* -----------------------------------------------*/} + {/* -------------------- DevRel --------------------*/} + {/* -----------------------------------------------*/} + + {/* -----------------------------------------------*/} + {/* -------------------- Web/App --------------------*/} + {/* -----------------------------------------------*/} + + {/* -----------------------------------------------*/} + {/* -------------------- Server/Cloud --------------------*/} + {/* -----------------------------------------------*/} + + {/* -----------------------------------------------*/} + {/* -------------------- Al/ML --------------------*/} + {/* -----------------------------------------------*/} + +
+ )} +
+ ); +}; + +export default GenerationPage; diff --git a/src/components/member/header/MemberHeader.tsx b/src/components/member/header/MemberHeader.tsx new file mode 100644 index 0000000..c371948 --- /dev/null +++ b/src/components/member/header/MemberHeader.tsx @@ -0,0 +1,47 @@ +import BannerSvg from 'public/svg/member_header.svg'; +import BannerPng from 'public/images/member_banner.png'; +import Image from 'next/image'; + +/** + * @description + * 멤버 페이지 헤더 컴포넌트 + * @component MemberHeader + * @returns {JSX.Element} MemberHeader + * @since 2024.04.18 + */ +/** + * Renders the header component for the member section. + * @returns The rendered header component. + */ +const MemberHeader = () => { + return ( +
+
+ +
+
+
+ BannerPng +
+
+
+ ); +}; + +export default MemberHeader; diff --git a/src/components/member/introduce/LeadIntro.tsx b/src/components/member/introduce/LeadIntro.tsx new file mode 100644 index 0000000..14f979d --- /dev/null +++ b/src/components/member/introduce/LeadIntro.tsx @@ -0,0 +1,43 @@ +import Image from 'next/image'; + +const LeadIntro = () => { + return ( +
+ +
+
+
+ lead +
+ +
+
Lead
+
+
서희찬
+
컴퓨터공학과
+
+
+
+
+ 안녕하세요! GDSC DGU Lead 서희찬입니다. +
+ GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다. + 많은 관심 부탁드립니다! 감사합니다. +
+
+
+
+
+ +
+ ); +}; + +export default LeadIntro; \ No newline at end of file diff --git a/src/components/member/introduce/MemberIntro.tsx b/src/components/member/introduce/MemberIntro.tsx new file mode 100644 index 0000000..2451df4 --- /dev/null +++ b/src/components/member/introduce/MemberIntro.tsx @@ -0,0 +1,58 @@ +import ProfileBox from '@/components/member/profilebox/ProfileBox'; +import { DEVREL_MEMBERS } from '@/constants/member/devRel'; +import { WEBAPP_MEMBERS } from '@/constants/member/webApp'; +import { AIML_MEMBERS } from '@/constants/member/AIML'; +import { SERVER_MEMBERS } from '@/constants/member/serverCloud'; + +/** + * @description + * 팀 멤버들을 소개하는 컴포넌트로, 사용자가 선택한 팀 카테고리에 따라 다른 팀 멤버 정보를 보여줍니다. + * 각 팀 카테고리에 해당하는 멤버 정보는 상수로 정의된 배열에서 가져옵니다. + * @component MemberIntro + * @param {string} title - 선택된 팀 카테고리의 이름 (예: 'Web/App', 'Server/Cloud', 'AI/ML', 'DevRel') + * @returns {JSX.Element} 각 팀 멤버의 프로필을 나타내는 ProfileBox 컴포넌트가 포함된 시각적 인터페이스 + * @since 2024.04.18 + */ +const MemberIntro = ({ title }: { title: string }) => { + interface Member { + id: number; + name: string; + role: string; + department: string; + description: string; + image: string; + } + + let memberType: Member[] | undefined; + + if (title === 'Web/App') memberType = WEBAPP_MEMBERS; + else if (title === 'Server/Cloud') memberType = SERVER_MEMBERS; + else if (title === 'AI/ML') memberType = AIML_MEMBERS; + else if (title === 'DevRel') memberType = DEVREL_MEMBERS; + + return ( +
+
+
+
{title}
+
+
+ +
+
+ {memberType && + memberType.map((member, index) => ( +
+ +
+ ))} +
+
+
+
+ ); +}; +export default MemberIntro; diff --git a/src/components/member/profilebox/ProfileBox.tsx b/src/components/member/profilebox/ProfileBox.tsx new file mode 100644 index 0000000..ccab8c7 --- /dev/null +++ b/src/components/member/profilebox/ProfileBox.tsx @@ -0,0 +1,30 @@ +import Image from 'next/image'; + +const ProfileBox = ({ member }: { member: any }) => { + return ( +
+
+
+ {member.name} +
+
+
{member.name}
+
{member.role}
+
+
{member.department}
+
+
+
{member.description}
+
+
+ ); +}; + +export default ProfileBox; diff --git a/src/components/member/timeline/TimeLine.tsx b/src/components/member/timeline/TimeLine.tsx new file mode 100644 index 0000000..b0056e9 --- /dev/null +++ b/src/components/member/timeline/TimeLine.tsx @@ -0,0 +1,87 @@ +'use client'; +import React, { useState, useRef, useEffect } from 'react'; +import Circle from 'public/svg/icons/member/futureCircle.svg'; +import FutureDotLine from 'public/svg/icons/member/futureDotLine.svg'; +import ShortDotLine from 'public/svg/icons/member/shortDotLine.svg'; +import { TIME_LINE } from '@/constants/member/timeLine'; + +/** + * @description + * 타임라인 인터랙티브 컴포넌트로, 사용자는 타임라인의 각 지점을 클릭하여 선택할 수 있습니다. + * 선택된 지점의 정보를 부모 컴포넌트에 전달합니다. + * @component TimeLine + * @param {function} onSelectIndex - 선택된 인덱스를 부모 컴포넌트로 전달하는 함수. + * @returns {JSX.Element} The TimeLine interactive component. + * @since 2024.04.18 + */ +const TimeLine = ({ + onSelectIndex, +}: { + onSelectIndex: (index: number) => void; +}) => { + const [selected, setSelected] = useState(1); + + const handleCircleClick = (index: any) => { + if (index === 0) return; + setSelected(index); + onSelectIndex(index); // Pass the selected index up to the parent component + }; + + const scrollContainer = useRef(null); + + const getCircleColor = (index: any) => { + if (index === selected) return '#FB8C00'; + if (index < selected) return '#FFCC80'; + return '#9FA4A8'; + }; + + const getTextColor = (index: any) => { + if (index === selected) return '#FFFFFF'; + return '#9FA4A8'; + }; + + return ( +
+
+
+ {TIME_LINE.map((item, index) => ( + +
+ +
+ {item.generate} +
+
+ {item.date} +
+
+ {index < TIME_LINE.length - 1 && ( + + )} + + ))} + +
+
+
+ ); +}; + +export default TimeLine; diff --git a/src/constants/member/.keep b/src/constants/member/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/src/constants/member/AIML.ts b/src/constants/member/AIML.ts new file mode 100644 index 0000000..bf527ae --- /dev/null +++ b/src/constants/member/AIML.ts @@ -0,0 +1,95 @@ +export const AIML_MEMBERS = [ + { + id: 1, + name: '이선호', + role: 'Core', + department: 'AI/ML', + description: 'Focused on core system architecture and backend development.', + image: '/images/members/lead.png', + }, + { + id: 2, + name: '김윤지', + role: 'Core', + department: 'AI/ML', + description: + 'Leads the core development team with a focus on innovation and performance.', + image: '/images/members/lead.png', + }, + { + id: 3, + name: '김현진', + role: 'General', + department: '산업시스템공학과', + description: + 'Works on user interface design and user experience optimization.', + image: '/images/members/lead.png', + }, + { + id: 4, + name: '남경현', + role: 'General', + department: '산업시스템공학과', + description: + 'Implements digital marketing strategies to enhance product visibility.', + image: '/images/members/lead.png', + }, + { + id: 5, + name: '양나은', + role: 'General', + department: '융합소프트웨어, 화공생물공학과', + description: 'Provides customer support and technical assistance.', + image: '/images/members/lead.png', + }, + { + id: 6, + name: '이다원', + role: 'General', + department: '컴퓨터공학전공', + description: 'Ensures software quality through rigorous testing.', + image: '/images/members/lead.png', + }, + { + id: 7, + name: '이윤주', + role: 'General', + department: '인공지능학과', + description: + 'Conducts research to keep the team updated with the latest tech trends.', + image: '/images/members/lead.png', + }, + { + id: 8, + name: '한상훈', + role: 'General', + department: '멀티미디어공학과', + description: + 'Manages recruitment and ensures a healthy workplace environment.', + image: '/images/members/lead.png', + }, + { + id: 9, + name: '한종원', + role: 'General', + department: '산업시스템공학과', + description: 'Oversees financial operations and budget planning.', + image: '/images/members/lead.png', + }, + { + id: 10, + name: '홍민기', + role: 'General', + department: '컴퓨터공학전공', + description: 'Coordinates day-to-day operational activities.', + image: '/images/members/lead.png', + }, + { + id: 11, + name: '이재윤', + role: 'General', + department: '멀티미디어공학과', + description: 'Coordinates day-to-day operational activities.', + image: '/images/members/lead.png', + }, +]; diff --git a/src/constants/member/devRel.ts b/src/constants/member/devRel.ts new file mode 100644 index 0000000..89ed245 --- /dev/null +++ b/src/constants/member/devRel.ts @@ -0,0 +1,29 @@ +export const DEVREL_MEMBERS = [ + { + id: 1, + name: '심서현', + role: 'Core', + department: '학과', + description: + 'GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다.많은 관심 부탁드립니다! 감사합니다.', + image: '/images/members/lead.png', + }, + { + id: 2, + name: '이승현', + role: 'Core', + department: '학과', + description: + 'GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다.많은 관심 부탁드립니다! 감사합니다.', + image: '/images/members/lead.png', + }, + { + id: 3, + name: '이다연', + role: 'Core', + department: '학과', + description: + 'GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다.많은 관심 부탁드립니다! 감사합니다.', + image: '/images/members/lead.png', + }, +]; diff --git a/src/constants/member/serverCloud.ts b/src/constants/member/serverCloud.ts new file mode 100644 index 0000000..37e81bf --- /dev/null +++ b/src/constants/member/serverCloud.ts @@ -0,0 +1,95 @@ +export const SERVER_MEMBERS = [ + { + id: 1, + name: '박상준', + role: 'Core', + department: 'Server/Cloud', + description: 'Focused on core system architecture and backend development.', + image: '/images/members/lead.png', + }, + { + id: 2, + name: '손형준', + role: 'Core', + department: 'Server/Cloud', + description: + 'Leads the core development team with a focus on innovation and performance.', + image: '/images/members/lead.png', + }, + { + id: 3, + name: '강산아', + role: 'General', + department: '스포츠문화학과', + description: + 'Works on user interface design and user experience optimization.', + image: '/images/members/lead.png', + }, + { + id: 4, + name: '강승준', + role: 'General', + department: '멀티미디어공학과', + description: + 'Implements digital marketing strategies to enhance product visibility.', + image: '/images/members/lead.png', + }, + { + id: 5, + name: '고나연', + role: 'General', + department: '컴퓨터공학전공', + description: 'Provides customer support and technical assistance.', + image: '/images/members/lead.png', + }, + { + id: 6, + name: '김재니', + role: 'General', + department: '정보통신공학과', + description: 'Ensures software quality through rigorous testing.', + image: '/images/members/lead.png', + }, + { + id: 7, + name: '윤창섭', + role: 'General', + department: '정보통신공학과', + description: + 'Conducts research to keep the team updated with the latest tech trends.', + image: '/images/members/lead.png', + }, + { + id: 8, + name: '장동겸', + role: 'General', + department: '컴퓨터공학전공', + description: + 'Manages recruitment and ensures a healthy workplace environment.', + image: '/images/members/lead.png', + }, + { + id: 9, + name: '임은서', + role: 'General', + department: '정보통신공학과', + description: 'Oversees financial operations and budget planning.', + image: '/images/members/lead.png', + }, + { + id: 10, + name: '정구연', + role: 'General', + department: '컴퓨터공학전공', + description: 'Coordinates day-to-day operational activities.', + image: '/images/members/lead.png', + }, + { + id: 11, + name: '임정우', + role: 'General', + department: '정보통신공학과', + description: 'Coordinates day-to-day operational activities.', + image: '/images/members/lead.png', + }, +]; diff --git a/src/constants/member/timeLine.ts b/src/constants/member/timeLine.ts new file mode 100644 index 0000000..c318b4e --- /dev/null +++ b/src/constants/member/timeLine.ts @@ -0,0 +1,14 @@ +export const TIME_LINE = [ + { + generate: 'start', + date: '2023.7', + }, + { + generate: '1st', + date: '2023.9', + }, + { + generate: '2nd', + date: '2024.9', + }, +]; diff --git a/src/constants/member/webApp.ts b/src/constants/member/webApp.ts new file mode 100644 index 0000000..166b298 --- /dev/null +++ b/src/constants/member/webApp.ts @@ -0,0 +1,95 @@ +export const WEBAPP_MEMBERS = [ + { + id: 1, + name: '정원호', + role: 'Core', + department: 'Web/App', + description: 'Focused on core system architecture and backend development.', + image: '/images/members/lead.png', + }, + { + id: 2, + name: '이상돈', + role: 'Core', + department: 'Web/App', + description: + 'Leads the core development team with a focus on innovation and performance.', + image: '/images/members/lead.png', + }, + { + id: 3, + name: '김민성', + role: 'General', + department: '멀티미디어소프트웨어공학전공', + description: + 'Works on user interface design and user experience optimization.', + image: '/images/members/lead.png', + }, + { + id: 4, + name: '박정민', + role: 'General', + department: '산업시스템공학과', + description: + 'Implements digital marketing strategies to enhance product visibility.', + image: '/images/members/lead.png', + }, + { + id: 5, + name: '유다현', + role: 'General', + department: '경영정보학과', + description: 'Provides customer support and technical assistance.', + image: '/images/members/lead.png', + }, + { + id: 6, + name: '이나경', + role: 'General', + department: '컴퓨터공학전공', + description: 'Ensures software quality through rigorous testing.', + image: '/images/members/lead.png', + }, + { + id: 7, + name: '이다은', + role: 'General', + department: '컴퓨터공학전공', + description: + 'Conducts research to keep the team updated with the latest tech trends.', + image: '/images/members/lead.png', + }, + { + id: 8, + name: '이도형', + role: 'General', + department: '컴퓨터공학전공', + description: + 'Manages recruitment and ensures a healthy workplace environment.', + image: '/images/members/lead.png', + }, + { + id: 9, + name: '이창준', + role: 'General', + department: '불교학부, 컴퓨터공학전공', + description: 'Oversees financial operations and budget planning.', + image: '/images/members/lead.png', + }, + { + id: 10, + name: '정은지', + role: 'General', + department: '컴퓨터공학전공', + description: 'Coordinates day-to-day operational activities.', + image: '/images/members/lead.png', + }, + { + id: 11, + name: '황현정', + role: 'General', + department: '컴퓨터공학전공', + description: 'Coordinates day-to-day operational activities.', + image: '/images/members/lead.png', + }, +]; diff --git a/tailwind.config.ts b/tailwind.config.ts index 31ace5d..7a5c3d0 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,7 @@ import type { Config } from 'tailwindcss'; const config: Config = { + content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}', @@ -34,6 +35,12 @@ const config: Config = { animation: { fadeIn: 'fadeIn 1s forwards', }, + spacing: { + '4.75': '19px' // 19px를 나타내는 키를 추가합니다. + }, + width: { + '70rem': '70rem', // '70rem'이라는 key로 70rem 너비를 설정 + }, }, }, plugins: [],