✨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 lg:w-full xl:w-[75rem]">
       {/* -----------------------------------------------*/}
       {/* -------------------- 배너 --------------------*/}
       {/* -----------------------------------------------*/}

src/components/member/animated/animatedBanner.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { motion } from 'framer-motion';
+
+interface AnimatedContainerProps {
+  children: ReactNode;
+  initialY?: number; // 초기 Y 위치는 선택적으로 설정할 수 있음
+}
+
+const AnimatedBanner: React.FC<AnimatedContainerProps> = ({
+  children,
+  initialY = 0, // 기본값으로 0을 사용하여 Y 변화 없음을 기본 설정
+}) => {
+  return (
+    <motion.div
+      className="w-full flex justify-center mt-[5rem] mb-[5rem]"
+      initial={{ y: initialY, opacity: 0 }}
+      whileInView={{ y: 0, opacity: 1 }}
+      transition={{ duration: 1 }}
+      viewport={{ once: true, amount: 0.2 }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default AnimatedBanner;

src/components/member/generation/GenerationPage.tsx

@@ -1,48 +1,63 @@
 '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.2 }}
+        variants={itemVariants}
+        transition={{ delay: 1 }} // 두 번째 컴포넌트의 delay를 1.5초로 설정
+      >
+        <TimeLine onSelectIndex={setSelectedTimelineIndex} />
+      </motion.div>
 
       {selectedTimelineIndex === 2 ? (
-        <div>
-          {/* -----------------------------------------------*/}
-          {/* -------------------- 모집 페이지 --------------------*/}
-          {/* -----------------------------------------------*/}
+        <motion.div
+          initial={{ y: 30, opacity: 0 }}
+          whileInView={{ y: 0, opacity: 1 }}
+          transition={{ duration: 1 }}
+          viewport={{ once: true, amount: 0.2 }}
+          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: 0, opacity: 0 }}
+        whileInView={{ y: 0, opacity: 1 }}
+        transition={{ duration: 1 }}
+        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;