GDSC-DGU · seochan99 · May 4, 2024 · Apr 20, 2024 · Apr 21, 2024 · Apr 21, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,10 +10,12 @@
     },
     "dependencies": {
         "clsx": "^2.1.0",
+        "framer-motion": "^11.1.7",
         "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/public/svg/seminar/gdsc_logo.svg b/public/svg/seminar/gdsc_logo.svg
diff --git a/public/svg/seminar/presenter_profile_img.png b/public/svg/seminar/presenter_profile_img.png
diff --git a/public/svg/seminar/seminar_thumbnail_card.png b/public/svg/seminar/seminar_thumbnail_card.png
diff --git a/public/svg/seminar/translate_img.png b/public/svg/seminar/translate_img.png
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/seminar/[id]/page.tsx b/src/app/seminar/[id]/page.tsx
@@ -1,28 +1,32 @@
 'use client';
 
 import React from 'react';
-import { useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import SeminarDetailHeader from '@/components/seminar/seminarDetail/header/SeminarDetailHeader';
 import SeminarDetailBanner from '@/components/seminar/seminarDetail/banner/SeminarDetailBanner';
 import { SEMINAR_DATA } from '@/constants/seminar/seminarData';
 import SeminarDetailPdf from '@/components/seminar/seminarDetail/pdf/SeminarDetailPdf';
 import NotFoundPage from '@/app/not-found';
 import SeminarDetailReview from '@/components/seminar/seminarDetail/review/SeminarDetailReview';
+import { changePathtoNumber } from '@/hooks/seminar/changePathtoNumber';
 
 const SeminarDetailPage = () => {
-  const router = useRouter();
-  console.log(router);
-
+  const pathname = usePathname();
+  // 숫자 추출
+  var id = changePathtoNumber(pathname);
+
   // 객체 찾기
-  const seminar = SEMINAR_DATA.find(seminar => Number(seminar.id) === 1);
+  const seminar = SEMINAR_DATA.find(seminar => Number(seminar.id) === id);
 
-  if (!seminar) {
+  if (!id || !seminar) {
     // 세미나를 찾지 못한 경우
     return <NotFoundPage />;
   }
 
 
-  return <div className="w-4/5 px-10 my-20 mx-auto">
+  return <section className="flex justify-center">
+  <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4 bg-mono_black">
+     <div className="w-full">
     {/* header */}
     <SeminarDetailHeader key={`${seminar.id}_header`} data={seminar}/>
 
@@ -33,8 +37,12 @@ const SeminarDetailPage = () => {
     <SeminarDetailPdf key={`${seminar.id}_pdf`}/>
 
     {/* review */}
-    <SeminarDetailReview />
-  </div>;
+    <SeminarDetailReview key={`${seminar.id}_review`} />
+
+  </div>
+  <div className="h-[120px]"></div>
+  </div>
+  </section>;
 };
 
 export default SeminarDetailPage;
diff --git a/src/app/seminar/open/[id]/page.tsx b/src/app/seminar/open/[id]/page.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+import OpenSeminarDetailHeader from '@/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader';
+import OpenSeminarDetailBanner from '@/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner';
+import OpenSeminarDetailSeminars from '@/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars';
+import OpenSeminarDetailInformation from '@/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation';
+import { OPEN_SEMINAR_DATA } from '@/constants/seminar/openSeminarData';
+import NotFoundPage from '@/app/not-found';
+import { changeOpenPathtoNumber } from '@/hooks/seminar/changePathtoNumber';
+
+const OpenSeminarDetailPage = () => {
+  const pathname = usePathname();
+  // 숫자 추출
+  var id = changeOpenPathtoNumber(pathname);
+
+  // 객체 찾기
+  const seminar = OPEN_SEMINAR_DATA.find(seminar => Number(seminar.id) === id);
+
+  if (!seminar) {
+    // 세미나를 찾지 못한 경우
+    return <NotFoundPage />;
+  }
+
+  return <section className="flex justify-center">
+  <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4 bg-mono_black">
+     <div className="w-full">
+    {/* header */}
+    <OpenSeminarDetailHeader key={`${seminar.id}_header`} data={seminar}/>
+    {/* banner */}
+    <OpenSeminarDetailBanner key={`${seminar.id}_banner`} data={seminar}/>
+    {/* seminars */}
+    <OpenSeminarDetailSeminars key={`${seminar.id}_seminars`} data={seminar}/>
+     {/* information */}
+     <OpenSeminarDetailInformation key={`${seminar.id}_information`} data={seminar}/>
+  </div>
+  <div className="h-[120px]"></div>
+  </div>
+    </section>;
+};
+
+export default OpenSeminarDetailPage;
diff --git a/src/app/seminar/page.tsx b/src/app/seminar/page.tsx
@@ -9,7 +9,9 @@ import React, { useState } from 'react';
 const SeminarPage = () => {
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
 
-  return <div className="w-4/5 px-10 my-20 mx-auto">
+  return <section className="flex justify-center">
+  <div className="max-w-[1200px] desktop:px-10 tablet:px-10 px-4 bg-mono_black">
+     <div className="w-full">
 {/* header */}
 <SeminarHeader />
 
@@ -21,7 +23,10 @@ const SeminarPage = () => {
 
 {/* seminar list */}
 <SeminarThumbnailList selectedCategory={selectedCategory} />
-  </div>;
+<div className="h-[120px]"></div>
+  </div>
+  </div>
+  </section>;
 };
 
 export default SeminarPage;
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>
   );
 };