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

[✨Feature] Project Feedback 반영, 모션 라이브러리 적용
GDSC-DGU · May 4, 2024 · 45a40da · 45a40da
2 parents 837ab10 + 12c19fc
commit 45a40da
Show file tree

Hide file tree

Showing 25 changed files with 1,105 additions and 175 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     },
     "dependencies": {
         "clsx": "^2.1.0",
+        "framer-motion": "^11.1.7",
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18.2.0",

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/components/project/card/ProjectCard.tsx b/src/components/project/card/ProjectCard.tsx
@@ -1,5 +1,8 @@
 import ProjectImg from '@/images/project_img.png';
+import { ProjectData } from '@/interfaces/project/projectData';
 import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { slideUpVariants } from '@/constants/project/slideUpVariants';
 
 /**
  * @description
@@ -13,10 +16,19 @@ import Link from 'next/link';
  * @returns The rendered card component.
  */
 
-const ProjectCard = () => {
+const ProjectCard = ({ project }: { project: ProjectData }) => {
   return (
-    <section>
-      <Link href="/project/1">
+    <motion.section
+      whileHover={{ scale: 1.05, transition: { duration: 0.3 } }}
+      whileTap={{ scale: 0.8 }}
+      initial={{ y: 20, opacity: 0 }}
+      whileInView={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.5 }}
+      viewport={{ once: true, amount: 0.9 }}
+      variants={slideUpVariants}
+      style={{ transformOrigin: '10% 60%' }}
+    >
+      <Link href={`/project/${project.id}`}>
         <div
           className="w-full h-[12.375rem] rounded-md flex-col justify-center items-center cursor-pointer"
           style={{
@@ -25,17 +37,15 @@ const ProjectCard = () => {
             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 className="w-full p-4 pt-3 rounded-b-md bg-mono_900">
+          <div className="pb-1 H6">{project.title}</div>
+          <div className="B2 h-[3.2rem] text-overflow-custom">
+            {project.introduce}
           </div>
+          <div className="pt-5 Cap text-mono_400">{project.feature}</div>
         </div>
       </Link>
-    </section>
+    </motion.section>
   );
 };
 

diff --git a/src/components/project/content/ProjectContent.tsx b/src/components/project/content/ProjectContent.tsx
@@ -1,5 +1,7 @@
-import ProjectMember from './ProjectMember';
-import ToggleIcon from '@/svg/icons/project/toggleIcon.svg';
+import { ProjectData } from '@/interfaces/project/projectData';
+import ProjectToggle from './ProjectToggle';
+import { slideUpVariants } from '@/constants/project/slideUpVariants';
+import { motion } from 'framer-motion';
 
 /**
  * @description
@@ -13,27 +15,24 @@ import ToggleIcon from '@/svg/icons/project/toggleIcon.svg';
  * @returns The rendered project content component.
  */
 
-const ProjectContent = () => {
+const ProjectContent = ({ projectData }: { projectData: ProjectData }) => {
   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 className="w-full max-w-[1200px] tablet:px-10 px-4">
+      <motion.section
+        initial={{ y: 20, opacity: 0 }}
+        whileInView={{ y: 0, opacity: 1 }}
+        transition={{ duration: 0.5 }}
+        viewport={{ once: true, amount: 0.9 }}
+        variants={slideUpVariants}
+        style={{ transformOrigin: '10% 60%' }}
+        className="w-full pb-[7.5rem] mx-auto"
+      >
+        <ProjectToggle teamData={projectData?.team || []} />
+        <section className="w-full mt-[5rem]">
+          <div className="H6">노션 내용 크롤링</div>
+          <div className="B1">{projectData?.content}</div>
+        </section>
+      </motion.section>
     </section>
   );
 };

diff --git a/src/components/project/content/ProjectMember.tsx b/src/components/project/content/ProjectMember.tsx
@@ -1,4 +1,5 @@
 import ProfileImg from '@/images/project_img.png';
+import { ProjectMemberData } from '@/interfaces/project/projectMemberData';
 
 /**
  * @description
@@ -14,20 +15,20 @@ import ProfileImg from '@/images/project_img.png';
 
 import Image from 'next/image';
 
-const ProjectMember = () => {
+const ProjectMember = ({ member }: { member: ProjectMemberData }) => {
   return (
-    <section className="w-full p-4 bg-[#1C1D1F] flex flex-row items-center gap-4 rounded">
+    <section className="toggle-menu opacity-0 w-full p-4 bg-mono_900 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 className="Sh1">{member?.name}</div>
+          <div className="B1 text-mono_200">{member?.role}</div>
         </div>
-        <div>세미나 이름</div>
+        <div className="B1">{member?.seminar}</div>
       </div>
     </section>
   );

diff --git a/src/components/project/content/ProjectToggle.tsx b/src/components/project/content/ProjectToggle.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { ProjectMemberData } from '@/interfaces/project/projectMemberData';
+import ToggleIcon from '@/svg/icons/project/toggleIcon.svg';
+import ProjectMember from './ProjectMember';
+import { useState } from 'react';
+import { toggle } from '@/utils/project/toggle';
+
+/**
+ * @description
+ * 프로젝트 상세 페이지 팀 정보 토글 컴포넌트
+ * @component ProjectToggle
+ * @returns {JSX.Element} ProjectToggle
+ * @since 2024.04.16
+ */
+/**
+ * Renders the project toggle component for the project section.
+ * @returns The rendered project toggle component.
+ */
+
+const ProjectToggle = ({ teamData }: { teamData: ProjectMemberData[] }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const scope = toggle(isOpen);
+
+  return (
+    <section ref={scope}>
+      <div
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex flex-row justify-between items-center mb-8 px-2 pb-3 border-b border-solid border-mono_700"
+      >
+        <div className="H4">Team</div>
+        <button className="toggle-arrow">
+          <ToggleIcon />
+        </button>
+      </div>
+      <div className="toggle-menu-box h-0 w-full grid min-[960px]:grid-cols-2 gap-8">
+        {teamData.length > 0 &&
+          teamData.map((member) => (
+            <ProjectMember key={member?.id} member={member} />
+          ))}
+      </div>
+    </section>
+  );
+};
+
+export default ProjectToggle;
diff --git a/src/components/project/header/ProjectHeader.tsx b/src/components/project/header/ProjectHeader.tsx
@@ -12,10 +12,12 @@
 
 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 className="w-full max-w-[1200px] tablet:px-10 px-4">
+      <div className="w-full flex flex-col mx-auto my-10">
+        <div className="px-3 pt-10 H3">Project</div>
+        <div className="px-3 pt-3 H6">GDSC DGU의 프로젝트</div>
+        <div className="w-full pt-6 border-b border-white border-solid"></div>
+      </div>
     </section>
   );
 };