Merge branch 'dev' into feature/seminar

GDSC-DGU · May 8, 2024 · d129179 · d129179
2 parents c663e62 + 469f967
commit d129179
Show file tree

Hide file tree

Showing 72 changed files with 1,908 additions and 476 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,8 @@
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18.2.0",
-        "react-icons": "^5.0.1"
+        "react-icons": "^5.0.1",
+        "swiper": "^11.1.1"
     },
     "devDependencies": {
         "@svgr/webpack": "^8.1.0",

diff --git a/public/favicon-black.ico b/public/favicon-black.ico
diff --git a/public/favicon-light.ico b/public/favicon-light.ico
diff --git a/public/images/main/aboutGDSC_map.png b/public/images/main/aboutGDSC_map.png
diff --git a/public/images/member_banner_up.png b/public/images/member_banner_up.png
diff --git a/public/images/member_header.png b/public/images/member_header.png
diff --git a/public/images/members/lead.png b/public/images/members/lead.png
diff --git a/public/svg/icons/common/right_arrow.svg b/public/svg/icons/common/right_arrow.svg
diff --git a/public/svg/recruit_banner2.svg b/public/svg/recruit_banner2.svg
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,13 +4,18 @@ 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: {
     template: '%s | GDSC DGU',
     default: 'GDSC DGU',
   },
+
   description: 'Google Developer Student Clubs 동국대학교',
+  icons: {
+    icon: '/favicon-black.ico',
+  },
 };
 
 export default function RootLayout({
@@ -21,20 +26,21 @@ export default function RootLayout({
   return (
     <html
       lang="ko"
-      className="flex w-screen justify-center  bg-[#000] tablet:text-[16px] text-[14px]"
+      className="flex w-screen justify-center  bg-[#000] tablet:text-[16px] text-[14px] "
     >
       <body
         className={clsx(
           [NotoSans.className],
           //  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>
+        <div className="pt-[5rem] flex justify-center">{children}</div>
+        <Footer />
       </body>
     </html>
   );

diff --git a/src/app/member/page.tsx b/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]">
       {/* -----------------------------------------------*/}
       {/* -------------------- 배너 --------------------*/}
       {/* -----------------------------------------------*/}

diff --git a/src/app/project/[id]/page.tsx b/src/app/project/[id]/page.tsx
@@ -1,22 +1,26 @@
+'use client';
+
 import ProjectContent from '@/components/project/content/ProjectContent';
 import ProjectIntroduction from '@/components/project/introduction/ProjectIntroduction';
+import { PROJECTS } from '@/constants/project/projects';
+import { ProjectData } from '@/interfaces/project/projectData';
 import React from 'react';
 
-export const metadata = {
-  title: 'Project Detail',
-};
+const ProjectDetailPage = ({ params }: { params: { id: string } }) => {
+  const projectData: ProjectData = PROJECTS.find(
+    (project) => project.id === Number(params.id),
+  )!;
 
-const ProjectDetailPage = () => {
   return (
-    <main className="w-full pb-[7.5rem]">
+    <main className="w-full flex flex-col items-center pb-[7.5rem]">
       {/* -----------------------------------------------*/}
       {/* -------------------- 프로젝트 소개 ---------------*/}
       {/* -----------------------------------------------*/}
-      <ProjectIntroduction />
+      <ProjectIntroduction projectData={projectData} />
       {/* -----------------------------------------------*/}
       {/* ------------------ 프로젝트 내용  ----------------*/}
       {/* -----------------------------------------------*/}
-      <ProjectContent />
+      <ProjectContent projectData={projectData} />
     </main>
   );
 };

diff --git a/src/app/project/page.tsx b/src/app/project/page.tsx
@@ -1,6 +1,6 @@
 import ProjectHeader from '@/components/project/header/ProjectHeader';
-import ProjectList from '@/components/project/list/ProjectList';
-import ProjectPagination from '@/components/project/pagination/ProjectPagination';
+import ProjectDesktopList from '@/components/project/list/ProjectDesktopList';
+import ProjectMobileList from '@/components/project/list/ProjectMobileList';
 import React from 'react';
 
 export const metadata = {
@@ -9,19 +9,23 @@ export const metadata = {
 
 const ProjectPage = () => {
   return (
-    <main className="w-full pb-[7.5rem]">
+    <main className="w-full flex flex-col items-center pb-[7.5rem]">
       {/* -----------------------------------------------*/}
       {/* -------------------- 제목 ----------------------*/}
       {/* -----------------------------------------------*/}
       <ProjectHeader />
       {/* -----------------------------------------------*/}
-      {/* ------------------ 프로젝트 리스트 ----------------*/}
+      {/* -------프로젝트 리스트 (페이지네이션) ----------------*/}
       {/* -----------------------------------------------*/}
-      <ProjectList />
+      <section className="hidden desktop:block w-dvw">
+        <ProjectDesktopList />
+      </section>
       {/* -----------------------------------------------*/}
-      {/* ------------------ 페이지네이션 ----------------*/}
+      {/* -------프로젝트 리스트 (무한 스크롤 ) ----------------*/}
       {/* -----------------------------------------------*/}
-      <ProjectPagination />
+      <section className="block desktop:hidden">
+        <ProjectMobileList />
+      </section>
     </main>
   );
 };

diff --git a/src/app/solutionChallenge/page.tsx b/src/app/solutionChallenge/page.tsx
@@ -1,5 +1,6 @@
-import ProjectList from '@/components/project/list/ProjectList';
+import ProjectList from '@/components/project/list/ProjectDesktopList';
 import SolutionChallengeHeader from '@/components/sollutionChallenge/header/SolutionChallengeHeader';
+import SolutionChallengeList from '@/components/sollutionChallenge/list/SolutionChallengeList';
 import SolutionChallengeTab from '@/components/sollutionChallenge/tab/SolutionChallengeTab';
 import React from 'react';
 
@@ -9,19 +10,15 @@ export const metadata = {
 
 const SolutionChallengePage = () => {
   return (
-    <main className="w-full pb-[7.5rem]">
+    <main className="w-full flex flex-col items-center pb-[7.5rem]">
       {/* -----------------------------------------------*/}
       {/* -------------------- 배너 ----------------------*/}
       {/* -----------------------------------------------*/}
       <SolutionChallengeHeader />
       {/* -----------------------------------------------*/}
-      {/* -------------------- 상단 탭 --------------------*/}
-      {/* -----------------------------------------------*/}
-      <SolutionChallengeTab />
-      {/* -----------------------------------------------*/}
       {/* ------------------ 프로젝트 리스트 ----------------*/}
       {/* -----------------------------------------------*/}
-      <ProjectList />
+      <SolutionChallengeList />
     </main>
   );
 };

diff --git a/src/app/timeline/page.tsx b/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>
   );
 };
diff --git a/src/components/home/aboutGDSC/AboutGDSC.tsx b/src/components/home/aboutGDSC/AboutGDSC.tsx
@@ -13,7 +13,7 @@ const NumberAbout: React.FC<{ label: string; number: string }> = ({
 const AboutGDSC = () => {
   return (
     <div className="w-full flex justify-center items-center">
-      <section className="w-full max-w-[1200px] tablet:px-10 px-4 py-40 flex flex-wrap flex-col gap-6 desktop:flex-row">
+      <section className="w-full max-w-[1200px] tablet:px-10 px-4 py-40 flex flex-wrap flex-col gap-6 tablet:flex-row">
         {/* 텍스트 */}
         <div className="flex flex-col mr-8 ">
           <p className="H3 pb-6">
@@ -44,7 +44,13 @@ const AboutGDSC = () => {
         </div>
 
         {/* 이미지 */}
-        <div className="flex-grow bg-red-900  h-[378px]"> </div>
+        <div className="desktop:flex-grow desktop:h-[378px] bg-red-100 desktop:w-auto w-full">
+          <div className="desktop:block hidden bg-cover h-full w-full bg-[url('/images/main/aboutGDSC_map.png')]" />
+          <img
+            className="desktop:hidden block object-contain w-full"
+            src="/images/main/aboutGDSC_map.png"
+          />
+        </div>
       </section>
     </div>
   );

diff --git a/src/components/home/activity/Activity.tsx b/src/components/home/activity/Activity.tsx
@@ -1,5 +1,13 @@
+'use client';
 import HomeTitle from '../title/HomeTitle';
 
+import { Navigation, Autoplay } from 'swiper/modules';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+
 const ActivityCard: React.FC<Activity> = ({ icon, title, description }) => {
   return (
     <div className="flex-grow">
@@ -89,10 +97,23 @@ const Activity = () => {
               <img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
               <img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
             </div>
-
             {/* 스크롤되는 부분 */}
 
-            {/* 스크롤되는 부분 */}
+            <Swiper
+              // navigation={true}
+              autoplay={{ delay: 2000 }}
+              modules={[Navigation, Autoplay]}
+              className="tablet:hidden flex w-full"
+              loop
+            >
+              {[1, 2, 3].map((item, index) => {
+                return (
+                  <SwiperSlide key={index}>
+                    <img className="w-[352px] h-[198px] flex-shrink-0 bg-red-900" />
+                  </SwiperSlide>
+                );
+              })}
+            </Swiper>
           </div>
           {/* 내용 */}
         </section>