Merge branch 'GDSC-DGU:dev' into dev

src/app/project/[id]/page.tsx

@@ -0,0 +1,24 @@
+import ProjectContent from '@/components/project/content/ProjectContent';
+import ProjectIntroduction from '@/components/project/introduction/ProjectIntroduction';
+import React from 'react';
+
+export const metadata = {
+  title: 'Project Detail',
+};
+
+const ProjectDetailPage = () => {
+  return (
+    <main className="w-full pb-[7.5rem]">
+      {/* -----------------------------------------------*/}
+      {/* -------------------- 프로젝트 소개 ---------------*/}
+      {/* -----------------------------------------------*/}
+      <ProjectIntroduction />
+      {/* -----------------------------------------------*/}
+      {/* ------------------ 프로젝트 내용  ----------------*/}
+      {/* -----------------------------------------------*/}
+      <ProjectContent />
+    </main>
+  );
+};
+
+export default ProjectDetailPage;

src/app/project/page.tsx

@@ -1,11 +1,29 @@
+import ProjectHeader from '@/components/project/header/ProjectHeader';
+import ProjectList from '@/components/project/list/ProjectList';
+import ProjectPagination from '@/components/project/pagination/ProjectPagination';
 import React from 'react';
 
 export const metadata = {
   title: 'Project',
 };
 
 const ProjectPage = () => {
-  return <div className="w-4/5 px-10">Project 페이지입니당</div>;
+  return (
+    <main className="w-full pb-[7.5rem]">
+      {/* -----------------------------------------------*/}
+      {/* -------------------- 제목 ----------------------*/}
+      {/* -----------------------------------------------*/}
+      <ProjectHeader />
+      {/* -----------------------------------------------*/}
+      {/* ------------------ 프로젝트 리스트 ----------------*/}
+      {/* -----------------------------------------------*/}
+      <ProjectList />
+      {/* -----------------------------------------------*/}
+      {/* ------------------ 페이지네이션 ----------------*/}
+      {/* -----------------------------------------------*/}
+      <ProjectPagination />
+    </main>
+  );
 };
 
 export default ProjectPage;

src/app/seminar/[id]/page.tsx

@@ -1,7 +1,40 @@
+'use client';
+
 import React from 'react';
+import { useRouter } 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';
+
+const SeminarDetailPage = () => {
+  const router = useRouter();
+  console.log(router);
+
+  // 객체 찾기
+  const seminar = SEMINAR_DATA.find(seminar => Number(seminar.id) === 1);
+
+  if (!seminar) {
+    // 세미나를 찾지 못한 경우
+    return <NotFoundPage />;
+  }
+
+
+  return <div className="w-4/5 px-10 my-20 mx-auto">
+    {/* header */}
+    <SeminarDetailHeader key={`${seminar.id}_header`} data={seminar}/>
+
+    {/* banner */}
+    <SeminarDetailBanner key={`${seminar.id}_banner`} data={seminar}/>
+
+    {/* pdf file */}
+    <SeminarDetailPdf key={`${seminar.id}_pdf`}/>
 
-const CommunityDetailPage = () => {
-  return <div className="w-4/5 px-10">CommunityDetail 페이지입니당</div>;
+    {/* review */}
+    <SeminarDetailReview />
+  </div>;
 };
 
-export default CommunityDetailPage;
+export default SeminarDetailPage;

src/app/seminar/page.tsx

@@ -1,12 +1,27 @@
-import React from 'react';
+'use client';
 
-// metadata
-export const metadata = {
-  title: 'Seminar',
-};
+import SeminarHeader from '@/components/seminar/header/SeminarHeader';
+import SeminarMenuBar from '@/components/seminar/menubar/SeminarMenuBar';
+import SeminarThumbnailList from '@/components/seminar/thumbnail/SeminarThumbnailList';
+import SeminarToggle from '@/components/seminar/toggle/SeminarToggle';
+import React, { useState } from 'react';
 
 const SeminarPage = () => {
-  return <div className="w-4/5 px-10">Seminar 페이지입니당</div>;
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+
+  return <div className="w-4/5 px-10 my-20 mx-auto">
+{/* header */}
+<SeminarHeader />
+
+{/* toggle */}
+<SeminarToggle />
+
+{/* select button */}
+<SeminarMenuBar selectedCategory={selectedCategory} setSelectedCategory={setSelectedCategory} />
+
+{/* seminar list */}
+<SeminarThumbnailList selectedCategory={selectedCategory} />
+  </div>;
 };
 
 export default SeminarPage;

src/app/solutionChallenge/page.tsx

@@ -0,0 +1,29 @@
+import ProjectList from '@/components/project/list/ProjectList';
+import SolutionChallengeHeader from '@/components/sollutionChallenge/header/SolutionChallengeHeader';
+import SolutionChallengeTab from '@/components/sollutionChallenge/tab/SolutionChallengeTab';
+import React from 'react';
+
+export const metadata = {
+  title: 'SolutionChallenge',
+};
+
+const SolutionChallengePage = () => {
+  return (
+    <main className="w-full pb-[7.5rem]">
+      {/* -----------------------------------------------*/}
+      {/* -------------------- 배너 ----------------------*/}
+      {/* -----------------------------------------------*/}
+      <SolutionChallengeHeader />
+      {/* -----------------------------------------------*/}
+      {/* -------------------- 상단 탭 --------------------*/}
+      {/* -----------------------------------------------*/}
+      <SolutionChallengeTab />
+      {/* -----------------------------------------------*/}
+      {/* ------------------ 프로젝트 리스트 ----------------*/}
+      {/* -----------------------------------------------*/}
+      <ProjectList />
+    </main>
+  );
+};
+
+export default SolutionChallengePage;

src/components/project/card/ProjectCard.tsx

@@ -0,0 +1,42 @@
+import ProjectImg from '@/images/project_img.png';
+import Link from 'next/link';
+
+/**
+ * @description
+ * 프로젝트 페이지 프로젝트 카드 컴포넌트
+ * @component ProjectCard
+ * @returns {JSX.Element} ProjectCard
+ * @since 2024.04.16
+ */
+/**
+ * Renders the card component for the project section.
+ * @returns The rendered card component.
+ */
+
+const ProjectCard = () => {
+  return (
+    <section>
+      <Link href="/project/1">
+        <div
+          className="w-full h-[12.375rem] rounded-md flex-col justify-center items-center cursor-pointer"
+          style={{
+            backgroundImage: `url(${ProjectImg.src})`,
+            backgroundSize: 'cover', // Sets the background image to cover the div
+            backgroundPosition: 'center', // Aligns the background image to the center
+          }}
+        ></div>
+        <div className="w-full p-4 pt-3 rounded-b-md bg-[#1C1D1F]">
+          <div className="pb-4 text-[1.25rem] leading-7">제목</div>
+          <div className="pb-5 text-sm leading-6">
+            서비스 소개! 두줄까지 적어주세요.
+          </div>
+          <div className="text-xs leading-[0.875rem] text-[#9FA4A8]">
+            특이 사항
+          </div>
+        </div>
+      </Link>
+    </section>
+  );
+};
+
+export default ProjectCard;

src/components/project/content/ProjectContent.tsx

@@ -0,0 +1,41 @@
+import ProjectMember from './ProjectMember';
+import ToggleIcon from '@/svg/icons/project/toggleIcon.svg';
+
+/**
+ * @description
+ * 프로젝트 상세 페이지 프로젝트 내용 컴포넌트
+ * @component ProjectContent
+ * @returns {JSX.Element} ProjectContent
+ * @since 2024.04.16
+ */
+/**
+ * Renders the prject content component for the project section.
+ * @returns The rendered project content component.
+ */
+
+const ProjectContent = () => {
+  return (
+    <section className="w-4/5 px-10 pb-[7.5rem] mx-auto">
+      <section>
+        <div className="w-full flex flex-row justify-between items-center mb-8 px-2 pb-3 border-b border-solid border-[#3E4348]">
+          <div className="text-[2.125rem] leading-[2.5rem]">Team</div>
+          <button className="">
+            <ToggleIcon />
+          </button>
+        </div>
+        <div className="w-full grid min-[960px]:grid-cols-2 gap-8">
+          <ProjectMember />
+          <ProjectMember />
+          <ProjectMember />
+          <ProjectMember />
+        </div>
+      </section>
+      <section className="mt-[5rem] leading-7">
+        노션 내용 크롤링 <br /> CONG(콩) : 축하 아카이빙 서비스 <br /> CONG은 왜
+        필요할까? <br />{' '}
+      </section>
+    </section>
+  );
+};
+
+export default ProjectContent;

src/components/project/content/ProjectMember.tsx

@@ -0,0 +1,36 @@
+import ProfileImg from '@/images/project_img.png';
+
+/**
+ * @description
+ * 프로젝트 상세 페이지 프로젝트 멤버 컴포넌트
+ * @component ProjectMember
+ * @returns {JSX.Element} ProjectMember
+ * @since 2024.04.18
+ */
+/**
+ * Renders the project Member component for the project section.
+ * @returns The rendered project Member component.
+ */
+
+import Image from 'next/image';
+
+const ProjectMember = () => {
+  return (
+    <section className="w-full p-4 bg-[#1C1D1F] flex flex-row items-center gap-4 rounded">
+      <Image
+        src={ProfileImg}
+        alt="profile"
+        className="w-[4rem] h-[4rem] rounded-lg"
+      />
+      <div className="flex flex-col leading-7">
+        <div className="flex flex-row gap-2">
+          <div>성이름</div>
+          <div className="text-[#CACDD2]">part role</div>
+        </div>
+        <div>세미나 이름</div>
+      </div>
+    </section>
+  );
+};
+
+export default ProjectMember;

src/components/project/header/ProjectHeader.tsx

@@ -0,0 +1,23 @@
+/**
+ * @description
+ * 프로젝트 페이지 헤더 컴포넌트
+ * @component ProjectHeader
+ * @returns {JSX.Element} ProjectHeader
+ * @since 2024.04.16
+ */
+/**
+ * Renders the header component for the project section.
+ * @returns The rendered header component.
+ */
+
+const ProjectHeader = () => {
+  return (
+    <section className="w-4/5 px-10 flex flex-col mx-auto my-10">
+      <div className="px-3 pt-10 text-5xl leading-[3.5rem]">Project</div>
+      <div className="px-3 pt-3 leading-[1.75rem]">GDSC DGU의 프로젝트</div>
+      <div className="w-full pt-6 border-b border-white border-solid"></div>
+    </section>
+  );
+};
+
+export default ProjectHeader;