Merge pull request #22 from GDSC-DGU/feature/project-page

✨Feat: 프로젝트 페이지 구현

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/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;

src/components/project/introduction/ProjectIntroduction.tsx

@@ -0,0 +1,56 @@
+import GithubIcon from '@/svg/icons/project/githubIcon.svg';
+import YoutubeIcon from '@/svg/icons/project/youtubeIcon.svg';
+import FileIcon from '@/svg/icons/project/fileIcon.svg';
+import ProjectImg from '@/images/project_img.png';
+import Image from 'next/image';
+
+/**
+ * @description
+ * 프로젝트 상세 페이지 프로젝트 소개 컴포넌트
+ * @component ProjectIntroduction
+ * @returns {JSX.Element} ProjectIntroduction
+ * @since 2024.04.16
+ */
+/**
+ * Renders the prject introduction component for the project section.
+ * @returns The rendered project introduction component.
+ */
+
+const ProjectIntroduction = () => {
+  return (
+    <section>
+      <section className="w-4/5 mx-auto flex max-[960px]:flex-col justify-center gap-8 mt-20 px-10">
+        <div
+          className="flex-1 w-full min-h-[19.125rem] rounded-md flex-col justify-center items-center"
+          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="flex-1 flex flex-col justify-end my-3">
+          <div className="flex flex-row gap-[0.625rem] pb-5">
+            <GithubIcon />
+            <FileIcon />
+            <YoutubeIcon />
+          </div>
+          <div className="pb-4 text-5xl leading-[3.5rem]">서비스명</div>
+          <div className="pb-4 text-xl leading-[1.9rem] font-medium">
+            서비스의 캐치프라이즈, 컨셉을 잘 나타낼 수 있는 말을 간결하게
+            적고자합니다.
+          </div>
+        </div>
+      </section>
+      <section className="w-full my-16 bg-[#1C1D1F]">
+        <div className="w-4/5 mx-auto flex max-[960px]:flex-col justify-between items-center p-10">
+          <div className="text-2xl">
+            서비스가 어디서 시작됐는지, 서비스의 띠지
+          </div>
+          <div className="text-2xl">추가적인 성과</div>
+        </div>
+      </section>
+    </section>
+  );
+};
+
+export default ProjectIntroduction;

src/components/project/list/ProjectList.tsx

@@ -0,0 +1,29 @@
+import ProjectCard from '../card/ProjectCard';
+
+/**
+ * @description
+ * 프로젝트 페이지 프로젝트 리스트 컴포넌트
+ * @component ProjectList
+ * @returns {JSX.Element} ProjectList
+ * @since 2024.04.16
+ */
+/**
+ * Renders the list component for the project section.
+ * @returns The rendered list component.
+ */
+
+const ProjectList = () => {
+  return (
+    <section className="w-4/5 px-10 grid min-[1200px]:grid-cols-3 min-[768px]:grid-cols-2 gap-8 mx-auto">
+      <ProjectCard />
+      <ProjectCard />
+      <ProjectCard />
+      <ProjectCard />
+      <ProjectCard />
+      <ProjectCard />
+      <ProjectCard />
+    </section>
+  );
+};
+
+export default ProjectList;

src/components/project/pagination/ProjectPagination.tsx

@@ -0,0 +1,34 @@
+import ProjectCard from '../card/ProjectCard';
+
+/**
+ * @description
+ * 프로젝트 페이지 프로젝트 페이지네이션 컴포넌트
+ * @component ProjectPagination
+ * @returns {JSX.Element} ProjectPagination
+ * @since 2024.04.16
+ */
+/**
+ * Renders the pagination component for the project section.
+ * @returns The rendered pagination component.
+ */
+
+const ProjectPagination = () => {
+  return (
+    <section className="w-full px-10 pt-[3.75rem] flex justify-center items-center gap-3">
+      <button className="w-5 h-5 bg-transparent border border-white rounded text-sm leading-4">
+        1
+      </button>
+      <button className="w-5 h-5 bg-transparent border border-[#73787E] text-[#73787E] rounded text-sm leading-4">
+        2
+      </button>
+      <button className="w-5 h-5 bg-transparent border border-[#73787E] text-[#73787E] rounded text-sm leading-4">
+        3
+      </button>
+      <button className="w-5 h-5 bg-transparent border border-[#73787E] text-[#73787E] rounded text-sm leading-4">
+        4
+      </button>
+    </section>
+  );
+};
+
+export default ProjectPagination;