✨Feat: Member 피드백 반영, 폰트, 색상, 반응형, favicon

package.json

@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "clsx": "^2.1.0",
+        "framer-motion": "^11.1.7",
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18.2.0",

src/app/layout.tsx

@@ -10,7 +10,11 @@ export const metadata = {
     template: '%s | GDSC DGU',
     default: 'GDSC DGU',
   },
+
   description: 'Google Developer Student Clubs 동국대학교',
+  icons: {
+    icon: '/favicon-black.ico',
+  },
 };
 
 export default function RootLayout({

src/app/member/page.tsx

@@ -9,7 +9,7 @@ export const metadata = {
 
 const MemberPage = () => {
   return (
-    <main className="w-4/5 px-0.625rem flex flex-col items-center justify-center">
+    <main className="flex flex-col items-center justify-center w-full pl-[1rem] pr-[1rem] sm:w-full md:w-100/125]lg:w-full xl:w-[75rem]">
       {/* -----------------------------------------------*/}
       {/* -------------------- 배너 --------------------*/}
       {/* -----------------------------------------------*/}

src/components/member/generation/GenerationPage.tsx

@@ -1,48 +1,61 @@
 'use client';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import TimeLine from '@/components/member/timeline/TimeLine';
 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);
 
+  // 애니메이션 variants
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
   return (
-    <div>
-      {/* -----------------------------------------------*/}
-      {/* -------------------- 타임라인 --------------------*/}
-      {/* -----------------------------------------------*/}
-      <TimeLine onSelectIndex={setSelectedTimelineIndex} />
+    <div className="w-full flex-col justify-center mt-[5rem] mb-[5rem]">
+      <motion.div
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, amount: 0.3 }}
+        variants={itemVariants}
+      >
+        <TimeLine onSelectIndex={setSelectedTimelineIndex} />
+      </motion.div>
 
       {selectedTimelineIndex === 2 ? (
-        <div>
-          {/* -----------------------------------------------*/}
-          {/* -------------------- 모집 페이지 --------------------*/}
-          {/* -----------------------------------------------*/}
+        <motion.div
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.3 }}
+          variants={itemVariants}
+        >
           <RecruitHeader />
-        </div>
+        </motion.div>
       ) : (
         <div>
-          {/* -----------------------------------------------*/}
-          {/* -------------------- 리드 소개 --------------------*/}
-          {/* -----------------------------------------------*/}
-          <LeadIntro />
-          {/* -----------------------------------------------*/}
-          {/* -------------------- DevRel --------------------*/}
-          {/* -----------------------------------------------*/}
+          <motion.div
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true, amount: 0.3 }}
+            variants={itemVariants}
+          >
+            <LeadIntro />
+          </motion.div>
+
           <MemberIntro title="DevRel" />
-          {/* -----------------------------------------------*/}
-          {/* -------------------- Web/App --------------------*/}
-          {/* -----------------------------------------------*/}
+
           <MemberIntro title="Web/App" />
-          {/* -----------------------------------------------*/}
-          {/* -------------------- Server/Cloud --------------------*/}
-          {/* -----------------------------------------------*/}
+
           <MemberIntro title="Server/Cloud" />
-          {/* -----------------------------------------------*/}
-          {/* -------------------- Al/ML --------------------*/}
-          {/* -----------------------------------------------*/}
+
           <MemberIntro title="AI/ML" />
         </div>
       )}

src/components/member/header/MemberHeader.tsx

@@ -1,6 +1,8 @@
-import BannerSvg from 'public/svg/member_header.svg';
-import BannerPng from 'public/images/member_banner.png';
+'use client';
+import BannerHead from 'public/images/member_header.png';
+import BannerPng from 'public/images/member_banner_up.png';
 import Image from 'next/image';
+import { motion } from 'framer-motion';
 
 /**
  * @description
@@ -16,30 +18,41 @@ import Image from 'next/image';
 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]' }}
+      <motion.div
+        className="w-full flex justify-center mt-[5rem] mb-[5rem]"
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        transition={{ duration: 1 }}
+        viewport={{ once: true, amount: 0.2 }}
       >
-        <div
-          style={{
-            position: 'relative',
-            width: '[70rem]',
-            height: '[39.375rem]',
-          }}
-        >
+        <div style={{ maxWidth: '701px', width: '100%' }}>
+          <Image
+            src={BannerHead}
+            alt="GDSC 사이트 멤버 페이지 배너 텍스트 이미지"
+            priority
+            width={1400}
+            height={630}
+            layout="responsive"
+          />
+        </div>
+      </motion.div>
+      <motion.div
+        className="w-full flex justify-center"
+        initial={{ y: 30, opacity: 0 }}
+        whileInView={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.5 }}
+        viewport={{ once: true, amount: 0.2 }}
+      >
+        <div style={{ width: '100%' }}>
           <Image
             src={BannerPng}
-            alt="BannerPng"
+            alt="GDSC 멤버들 단체사진"
             priority
-            width={1120}
+            width={1400}
             height={630}
-            layout="fixed"
           />
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 };

src/components/member/introduce/LeadIntro.tsx

@@ -1,43 +1,47 @@
 import Image from 'next/image';
+import { LEAD } from '@/constants/member/lead';
+import React from 'react';
 
 const LeadIntro = () => {
-    return (
-        <div>
-
-<div className="w-70rem flex justify-center mt-20 mb-20">
-  <div className="flex">
+  return (
     <div>
-      <Image
-        src="/images/members/lead.png"
-        alt="lead"
-        width={352}
-        height={200}
-        priority
-
-      />
-    </div>
+      <div className="flex justify-start mt-20 mb-20">
+        <div className="flex flex-col bigTablet:flex-row w-full ">
+          <div className="bigTablet:w-[22rem] w-full ">
+            <div
+              style={{ position: 'relative', width: '100%', height: '200px' }}
+            >
+              <Image
+                src="/images/members/lead.png"
+                alt="DGU GDSC Lead 사진"
+                layout="fill" // 부모 컨테이너를 채움
+                objectFit="cover" // 너비는 반응형으로 조절되고, 높이는 고정되며 이미지가 컨테이너에 맞춰 잘릴 수 있음
+                priority
+                className="rounded-[0.25rem]"
+              />
+            </div>
+          </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 className="flex flex-col justify-center ml-[0rem] mt-[1.75rem] bigTablet:ml-[2rem]  bigTablet:mt-[0rem]">
+            <div className="H4 mb-[1.25rem]">Lead</div>
+            <div className="flex flex">
+              <div className="H6 mr-[0.5rem]">{LEAD.name}</div>
+              <div className="B1 mb-[1.25rem]">{LEAD.department}</div>
+            </div>
+            <div className="B2 flex items-center">
+              <div className="w-1 h-full bg-white mr-2.5"></div>
+              {LEAD.description.split('\n').map((line, index) => (
+                <React.Fragment key={index}>
+                  {line}
+                  <br />
+                </React.Fragment>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</div>
-
-        </div>
-    );
+  );
 };
 
-export default LeadIntro;
+export default LeadIntro;

src/components/member/introduce/MemberIntro.tsx

@@ -1,8 +1,10 @@
+'user client';
 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';
+import { motion } from 'framer-motion';
 
 /**
  * @description
@@ -13,6 +15,7 @@ import { SERVER_MEMBERS } from '@/constants/member/serverCloud';
  * @returns {JSX.Element} 각 팀 멤버의 프로필을 나타내는 ProfileBox 컴포넌트가 포함된 시각적 인터페이스
  * @since 2024.04.18
  */
+
 const MemberIntro = ({ title }: { title: string }) => {
   interface Member {
     id: number;
@@ -30,29 +33,52 @@ const MemberIntro = ({ title }: { title: string }) => {
   else if (title === 'AI/ML') memberType = AIML_MEMBERS;
   else if (title === 'DevRel') memberType = DEVREL_MEMBERS;
 
+  // 애니메이션 variants
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.5 },
+    },
+  };
+
   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 className="w-full flex-col flex-end">
+        <div className="w-full flex flex-col justify-start mt-20">
+          <div className="H4">{title}</div>
+          <hr className="border-t-[1px] border-mono_700 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">
+        <div className="w-full flex justify-start overflow-hidden">
+          <div className="h-full flex flex-wrap justify-start items-start w-full">
             {memberType &&
               memberType.map((member, index) => (
-                <div
+                <motion.div
                   key={member.id}
-                  className="w-full md:w-1/3 p-4 flex justify-center"
+                  initial="hidden"
+                  whileInView="visible"
+                  viewport={{ once: true, amount: 0.3 }}
+                  variants={itemVariants}
+                  className={`w-full bigTablet:w-1/2 mainDesktop:w-1/3 flex pt-[2rem] justify-center items-start ${
+                    (index + 1) % 2 === 0
+                      ? 'bigTablet:pr-0 bigTablet:pt-[2rem]'
+                      : 'bigTablet:pr-[2rem] bigTablet:pt-[2rem]'
+                  } ${
+                    (index + 1) % 3 === 0
+                      ? 'mainDesktop:pr-0 mainDesktop:pt-[2rem]'
+                      : 'mainDesktop:pr-[2rem] mainDesktop:pt-[2rem]'
+                  } overflow-hidden`}
                 >
                   <ProfileBox member={member} />
-                </div>
+                </motion.div>
               ))}
           </div>
         </div>
       </div>
     </div>
   );
 };
+
 export default MemberIntro;