Feat: 멤버 페이지 구현

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 <div className="w-4/5 px-10">Member 페이지입니당</div>;
+  return (
+    <main className="w-4/5 px-0.625rem flex flex-col items-center justify-center">
+      {/* -----------------------------------------------*/}
+      {/* -------------------- 배너 --------------------*/}
+      {/* -----------------------------------------------*/}
+      <MemberHeader />
+      {/* -----------------------------------------------*/}
+      {/* ----------- 타임라인 및 GDSC세대별 페이지-------------*/}
+      {/* -----------------------------------------------*/}
+      <GenerationPage />
+    </main>
+  );
 };
 
 export default MemberPage;

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 (
+    <div>
+      {/* -----------------------------------------------*/}
+      {/* -------------------- 타임라인 --------------------*/}
+      {/* -----------------------------------------------*/}
+      <TimeLine onSelectIndex={setSelectedTimelineIndex} />
+
+      {selectedTimelineIndex === 2 ? (
+        <div>
+          {/* -----------------------------------------------*/}
+          {/* -------------------- 모집 페이지 --------------------*/}
+          {/* -----------------------------------------------*/}
+          <RecruitHeader />
+        </div>
+      ) : (
+        <div>
+          {/* -----------------------------------------------*/}
+          {/* -------------------- 리드 소개 --------------------*/}
+          {/* -----------------------------------------------*/}
+          <LeadIntro />
+          {/* -----------------------------------------------*/}
+          {/* -------------------- DevRel --------------------*/}
+          {/* -----------------------------------------------*/}
+          <MemberIntro title="DevRel" />
+          {/* -----------------------------------------------*/}
+          {/* -------------------- Web/App --------------------*/}
+          {/* -----------------------------------------------*/}
+          <MemberIntro title="Web/App" />
+          {/* -----------------------------------------------*/}
+          {/* -------------------- Server/Cloud --------------------*/}
+          {/* -----------------------------------------------*/}
+          <MemberIntro title="Server/Cloud" />
+          {/* -----------------------------------------------*/}
+          {/* -------------------- Al/ML --------------------*/}
+          {/* -----------------------------------------------*/}
+          <MemberIntro title="AI/ML" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GenerationPage;

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 (
+    <div>
+      <div className="w-full flex justify-center mt-[5rem] mb-[5rem]">
+        <BannerSvg style={{ height: '100%' }} />
+      </div>
+      <div
+        className="flex justify-center"
+        style={{ width: '100%', maxWidth: '[70rem]' }}
+      >
+        <div
+          style={{
+            position: 'relative',
+            width: '[70rem]',
+            height: '[39.375rem]',
+          }}
+        >
+          <Image
+            src={BannerPng}
+            alt="BannerPng"
+            priority
+            width={1120}
+            height={630}
+            layout="fixed"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MemberHeader;

src/components/member/introduce/LeadIntro.tsx

@@ -0,0 +1,43 @@
+import Image from 'next/image';
+
+const LeadIntro = () => {
+    return (
+        <div>
+
+<div className="w-70rem flex justify-center mt-20 mb-20">
+  <div className="flex">
+    <div>
+      <Image
+        src="/images/members/lead.png"
+        alt="lead"
+        width={352}
+        height={200}
+        priority
+
+      />
+    </div>
+
+    <div className="flex flex-col justify-center ml-[2rem]">
+      <div className="text-4xl mb-[1.25rem]">Lead</div>
+      <div className='flex'>
+      <div className="text-3xl mr-[0.5rem]">서희찬</div>
+      <div className="text-2xl mb-[1.25rem]">컴퓨터공학과</div>
+      </div>
+      <div className="flex items-center text-lg">
+        <div className="w-1 h-12 bg-white mr-2.5"></div>
+        <div>
+          안녕하세요! GDSC DGU Lead 서희찬입니다.
+          <br/>
+          GDSC DGU는 많은 학우분들과 함께 성장하고 싶습니다.
+          많은 관심 부탁드립니다! 감사합니다.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+        </div>
+    );
+};
+
+export default LeadIntro;

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 (
+    <div>
+      <div className="w-70rem flex-col justify-center mb-[2rem]">
+        <div className="w-70rem flex flex-col justify-center mt-20 mb-20">
+          <div className="text-4xl mb-[0.75rem]">{title}</div>
+          <hr className="border-t-[1px] border-[#3E4348] my-1" />
+        </div>
+
+        <div className="w-[70rem] flex justify-center mt-20 mb-20 overflow-hidden">
+          <div className="flex flex-wrap justify-start w-full">
+            {memberType &&
+              memberType.map((member, index) => (
+                <div
+                  key={member.id}
+                  className="w-full md:w-1/3 p-4 flex justify-center"
+                >
+                  <ProfileBox member={member} />
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default MemberIntro;

src/components/member/profilebox/ProfileBox.tsx

@@ -0,0 +1,30 @@
+import Image from 'next/image';
+
+const ProfileBox = ({ member }: { member: any }) => {
+  return (
+    <div>
+      <div className="flex flex-col items-start bg-[#1C1D1F] pl-[1rem] pr-[1rem] pt-[1.25rem] pb-[1.25rem] w-[22rem]">
+        <div className="flex mb-[1rem]">
+          <Image
+            className="mr-[1rem]"
+            src={member.image}
+            alt={member.name}
+            width={64}
+            height={64}
+            priority
+          />
+          <div className="flex-col">
+            <div className="flex">
+              <div className="mt-2 mr-[0.5rem]">{member.name}</div>
+              <div className="mt-2">{member.role}</div>
+            </div>
+            <div className="mt-1">{member.department}</div>
+          </div>
+        </div>
+        <div>{member.description}</div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileBox;

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 (
+    <div>
+      <div className="w-full flex justify-center mt-20 mb-20">
+        <div className="flex">
+          {TIME_LINE.map((item, index) => (
+            <React.Fragment key={index}>
+              <div className="px-4.75 flex flex-col items-center justify-center space-y-2">
+                <button
+                  onClick={() => handleCircleClick(index)}
+                  style={{
+                    border: 'none',
+                    background: 'none',
+                    cursor: 'pointer',
+                  }}
+                >
+                  <div style={{ color: getCircleColor(index) }}>
+                    <Circle />
+                  </div>
+                </button>
+                <div
+                  className="border-solid text-zinc-500 text-sm font-medium"
+                  style={{ fontSize: '14px', color: getTextColor(index) }}
+                >
+                  {item.generate}
+                </div>
+                <div
+                  className="border-solid text-zinc-500 text-xs font-medium"
+                  style={{ fontSize: '12px', color: getTextColor(index) }}
+                >
+                  {item.date}
+                </div>
+              </div>
+              {index < TIME_LINE.length - 1 && (
+                <ShortDotLine style={{ fill: '#FFCC80' }} />
+              )}
+            </React.Fragment>
+          ))}
+          <FutureDotLine style={{ fill: '#9FA4A8' }} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TimeLine;