Merge pull request #32 from GDSC-DGU/feature/timeline

✨Feat: Timeline 피드백 반영, Footer 제작, 폰트, 색상, 반응형 적용

src/app/layout.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import Script from 'next/script';
 import { NotoSans } from './fonts';
 import Navigation from '@/components/navigation';
+import Footer from "@/components/layout/footer/Footer";
 
 export const metadata = {
   title: {
@@ -29,12 +30,13 @@ export default function RootLayout({
           //  max-w-[430px] mx-auto : 430px 이상일 때 가운데 정렬
           ['min-h-screen w-full'],
           ['shadow-xl'],
-          ['bg-[#050014]'],
+          ['bg-[#000000]'],
           ['text-white'],
         )}
       >
         <Navigation />
         <div className="flex justify-center">{children}</div>
+        <Footer />
       </body>
     </html>
   );

src/app/timeline/page.tsx

@@ -1,4 +1,3 @@
-// src/app/timeline/page.tsx
 'use client';
 import React, { useState } from 'react';
 import TimelineHeader from "@/components/timeline/header/TimelineHeader";
@@ -14,21 +13,23 @@ export default function TimelinePage() {
   };
 
   return (
-    <main className="w-full px-10">
-      <TimelineHeader />
-      <section className="w-4/5 flex flex-col mx-auto my-10">
-        <section className="w-full flex justify-start items-center gap-3">
-          {['1st', '2nd', '3rd'].map(generation => (
-            <GenerationButton
-              key={generation}
-              label={generation}
-              isActive={activeGeneration === generation}
-              onClick={() => handleButtonClick(generation)}
-            />
-          ))}
+    <main className="flex justify-center">
+      <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4">
+        <TimelineHeader />
+        <section className="mx-auto my-10">
+          <section className="flex justify-start items-center gap-3">
+            {['1st', '2st', '3st'].map(generation => (
+              <GenerationButton
+                key={generation}
+                label={generation}
+                isActive={activeGeneration === generation}
+                onClick={() => handleButtonClick(generation)}
+              />
+            ))}
+          </section>
         </section>
-      </section>
-      <TimelineMonthlyPart timelineData={TIMELINE_CARDS_INFO[activeGeneration]} />
+        <TimelineMonthlyPart timelineData={TIMELINE_CARDS_INFO[activeGeneration]} />
+      </div>
     </main>
   );
 };

src/components/layout/footer/Footer.tsx

@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+import RightArrowIcon from 'public/svg/icons/common/right_arrow.svg';
+
+/**
+ * @description
+ * 레이아웃 Footer
+ * @component Footer
+ * @returns {JSX.Element} Footer
+ * @since 2024.04.26
+ */
+
+const Footer = () => {
+  const handlePress = () => {
+    console.log('Arrow clicked');
+  };
+
+  return (
+    <footer className="w-full py-10 bg-mono_900 flex desktop:pl-80 tablet:pl-20 pl-10">
+      <div className="flex justify-start items-start w-full gap-10">
+        <div>
+          <h1 className="F1">About Us</h1>
+          <p className="F2">Final Update 2023.10.02</p>
+          <div className="flex items-center">
+            <p className="F2">제작자 소개</p>
+            <button onClick={handlePress} className="ml-2 mt-[-2px]">
+              <RightArrowIcon />
+            </button>
+          </div>
+          <div className="mt-4">
+            <p className="F3">Copyright © GDSC DGU</p>
+          </div>
+        </div>
+        <div>
+          <h1 className="F1">Contact</h1>
+          <div className="contact-item">
+            <p className="F2 label-width">이메일</p>
+            <p className="F2">[email protected]</p>
+          </div>
+          <div className="contact-item">
+            <p className="F2 label-width">주소</p>
+            <p className="F2">서울특별시 중구 필동로1길 30</p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/timeline/button/GenerationButton.tsx

@@ -1,16 +1,14 @@
+import React from 'react';
+
 /* 
 기수별 버튼 컴포넌트(1st, 2nd, 3rd)
 */
-import React from 'react';
 
 const GenerationButton: React.FC<GenerationButtonProps> = ({ label, isActive, onClick }) => {
-  const borderColor = isActive ? 'white' : '#536E7B';
-  const textColor = isActive ? 'white' : '#536E7B';
-
   return (
     <button
-      className="w-10 h-8 bg-transparent border rounded-lg text-xs leading-4 px-2 py-1"
-      style={{ borderWidth: '1.5px', borderColor, color: textColor }}
+      className="border rounded-lg B2 px-3 py-0.5"
+      style={{ borderWidth: '1px', borderColor: isActive ? 'white' : '#536E7B', color: isActive ? 'white' : '#536E7B' }}
       onClick={() => onClick(label)}
     >
       {label}

src/components/timeline/card/TimelineCard.tsx

@@ -5,23 +5,21 @@ import { TimelineCardProps } from "@/interfaces/timeline/timelineCard";
 
 const TimelineCard: React.FC<TimelineCardProps> = ({ id, cardImageUrl, date, title, detail }) => {
   return (
-    <section className="w-1/2 max-w-[51%] overflow-hidden rounded-lg shadow-md relative mb-4 px-2">
+    <section className="w-full md:w-1/2 max-w-[100%] md:max-w-[50%] overflow-hidden rounded-lg shadow-md relative mb-4">
       <div className="w-full aspect-w-16 aspect-h-9">
         <Image
           src={cardImageUrl}
           alt={title}
-          layout='responsive'
           width={1600}
           height={900}
-          objectFit='cover'
           quality={100}
         />
-        <div className="absolute bottom-10 left-0 p-4">
-          <h3 className="text-xs text-white">{date}</h3>
-          <h3 className="text-sm text-white">{title}</h3>
+        <div className="relative bottom-20 left-5">
+          <h3 className="B2">{date}</h3>
+          <h3 className="B2">{title}</h3>
         </div>
       </div>
-      <p className="text-sm">{detail}</p>
+      <p className="B2 relative left-5">{detail}</p>
     </section>
   );
 };

src/components/timeline/header/DateHeader.tsx

@@ -1,18 +1,18 @@
+import { DateHeaderProps } from "@/interfaces/timeline/timelineDate";
+import React from 'react';
+
 /**
  * @description
  * 날짜 표시 헤더 컴포넌트
  * @component DateHeader
  * @returns {JSX.Element} DateHeader
  * @since 2024.04.17
  */
-// components/DateHeader.tsx
-import { DateHeaderProps } from "@/interfaces/timeline/timelineDate";
-import React from 'react';
+
 const DateHeader: React.FC<DateHeaderProps> = ({ date }) => {
   return (
-    <div className="w-full flex flex-col justify-center">
-      <div className="text-4xl mb-[0.75rem]">{date}</div>
-      <hr className="border-t-[1px] border-[#3E4348] my-1" />
+    <div className="w-full flex flex-col justify-center px-2">
+      <div className="H4">{date}</div>
     </div>
   );
 };

src/components/timeline/header/TimelineHeader.tsx

@@ -4,20 +4,18 @@
   * @component TimelineHeader
   * @returns {JSX.Element} TimelineHeader
   * @since 2024.04.17
-  */
- /**
-  * Renders the header component for the Timeline section.
   * @returns The rendered header component.
   */
 
  const TimelineHeader = () => {
   return (
-    <section className="w-4/5 flex flex-col mx-auto my-10">  
-      <div className="px-3 pt-10 text-5xl leading-[3.5rem]">Timeline</div>
-      <div className="px-3 pt-3 leading-[1.75rem]">우리가 함께한 시간</div>
-      <div className="w-full pt-6 border-b border-white border-solid"></div>
-    </section>
+    <>
+      <div className="px-3 pt-10 H3">Timeline</div> 
+      <div className="px-3 pt-3 H6">우리가 함께한 시간</div>
+      <div className="w-full pt-6 border-b border-solid"></div>
+  </>
   );
 };
-
-  export default TimelineHeader;
+
+export default TimelineHeader;
+

src/components/timeline/part/TimelineMonthlyPart.tsx

@@ -1,17 +1,17 @@
+import React from 'react';
+import groupByMonthYear from "@/utils/timeline/groupByMonthYear";
+import DateHeader from "../header/DateHeader";
+import TimelineMonthlyCardSection from "../section/TimelineMonthlyCardSection";
+import { TimelineCardProps } from "@/interfaces/timeline/timelineCard";
+
 /**
- * @description
  * 각 월별로 그룹화된 타임라인 카드 리스트 섹션 컴포넌트
  * ex) 2024 January 하고, 해당 월 카드 리스트 렌더링
  * @component
  * @param {TimelineCardProps[]} timelineData 
  * @returns {JSX.Element} 
  * @since 2024.04.18
  */
-import React from 'react';
-import groupByMonthYear from "@/utils/timeline/groupByMonthYear";
-import DateHeader from "../header/DateHeader";
-import TimelineMonthlyCardSection from "../section/TimelineMonthlyCardSection";
-import { TimelineCardProps } from "@/interfaces/timeline/timelineCard";
 
 interface TimelineMonthlyPartProps {
   timelineData: TimelineCardProps[];
@@ -23,8 +23,9 @@ const TimelineMonthlyPart: React.FC<TimelineMonthlyPartProps> = ({ timelineData
   return (
     <>
       {Object.entries(groupedData).map(([date, cards]) => (
-        <div key={date} className="w-4/5 mx-auto my-10">
+        <div key={date} className="mx-auto my-10 animate-fadeIn">
           <DateHeader date={date} />
+          <hr className="border-t-[1px] border-mono_700 my-1" />
           <TimelineMonthlyCardSection timelineData={cards} />
         </div>
       ))}

src/components/timeline/section/TimelineMonthlyCardSection.tsx

@@ -1,8 +1,16 @@
-// components/TimeLineCardListView.tsx
 import React from 'react';
 import TimelineCard from "../card/TimelineCard";
 import { TimelineCardList } from "@/interfaces/timeline/timelineCardList";
 
+/**
+ * @description
+ * 월별 타임라인 카드 리스트 섹션 컴포넌트
+ * @component
+ * @param {TimelineCardList} timelineData
+ * @returns {JSX.Element}
+ * @since 2024.04.18
+ */
+
 const TimelineMonthlyCardSection: React.FC<TimelineCardList> = ({ timelineData }) => {
   return (
     <div className="flex flex-wrap justify-start">

src/constants/member/timeLine.ts

@@ -8,7 +8,11 @@ export const TIME_LINE = [
     date: '2023.9',
   },
   {
-    generate: '2nd',
+    generate: '2st',
     date: '2024.9',
   },
+  {
+    generate: '3st',
+    date: '2025.9',
+  },
 ];