Merge pull request #42 from GDSC-DGU/feature/seminar

[✨Feature] 세미나 반응형, 스타일 수정, 오픈 세미나 페이지 생성

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;

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;

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;

src/components/seminar/header/SeminarHeader.tsx

@@ -11,19 +11,14 @@ import BannerImg from '@/svg/seminar/seminar_banner.svg';
  * Renders the header component for the recruitment section.
  * @returns The rendered header component.
  */
-const SeminarHeader = () => {
-
+const SeminarHeader = () => {  
   return (
-    <div className="w-full flex-col justify-center gap-[1rem] inline-flex min-h-fit relative"> 
-    <p className="text-5xl font-normal leading-[3rem] tracking-wide">
-      Seminar
-    </p>
-    <p className="text-md font-normal leading-[3rem] tracking-wide">
-      여러분과 함께 나누고싶은 이야기
-    </p>
-    <p className="w-full border border-solid text-zinc-500 h-0"/>
-   <BannerImg className='mt-3 scale-100 w-full'/>
-  </div>
+    <>
+    <div className="w-full px-3 pt-10 H3 font-normal">Seminar</div> 
+    <div className="px-3 pt-3 H6 font-medium">여러분과 함께 나누고싶은 이야기</div>
+    <p className="mt-6 border border-solid text-mono_700 h-0"/>
+    <BannerImg className='mt-10 scale-100' />
+</>
   );
 };
 export default SeminarHeader;

src/components/seminar/menubar/SeminarMenuBar.tsx

@@ -24,12 +24,12 @@ const SeminarMenuBar = ({
   };
 
   return (
-    <div className="mt-14 w-full flex gap-3.5 items-center">
+    <div className="mt-10 px-3 flex gap-3 items-center">
       {SEMINAR_CATEGORYS.map((category) => (
         <button
           key={category.value} 
-          className={`border border-1 py-2 px-3 border-2 border-solid text-sm font-normal rounded-lg ${
-            selectedCategory === category.value ? 'border-zinc-1000' : 'border-zinc-500 text-zinc-500'
+          className={`text-[0.75rem] border py-2 px-3 border-solid rounded-lg ${
+            selectedCategory === category.value ? 'mono_white' : 'border-mono_500 text-mono_500'
           }`}
           onClick={() => handleCategoryChange(category.value)}
         >

src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import Image from 'next/image';
+import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
+import TranslateImg from '@/svg/seminar/translate_img.png';
+import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
+
+
+/**
+ * @description
+ * 오픈 세미나 상세 페이지 배너 컴포넌트
+ * @component OpenSeminarDetailBanner
+ * @returns {JSX.Element} OpenSeminarDetailBanner
+ * @since 2024.04.18
+ */
+/**
+ * Renders the header component for the recruitment section.
+ * @returns The rendered header component.
+ */
+const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => {
+  return (
+    <div className="w-full mt-8 flex desktop:flex-row tablet:flex-col flex-col flex-col gap-8">
+      {/* 왼쪽 컨텐츠 */}
+      <div className="desktop:min-w-[544px] tablet:w-full w-full aspect-w-16 aspect-h-9">
+        <Image
+          src={data.image_url}
+          alt={`${data.seminar_month_date}'s open_seminarimage`}
+          width={1600}
+          height={900}
+          quality={100}
+          priority
+        />
+      </div>
+    {/* 오른쪽 컨텐츠 */}
+    <div className="flex desktop:items-end desktop:mt-0 tablet:mt-8 mt-8">
+    <div className="w-full flex flex-col gap-6 py-3 whitespace-nowrap">
+        <div className='desktop:flex tablet:hidden hidden'>
+    <Image
+          src={TranslateImg.src}
+          alt="translate_img"
+          width={352}
+          height={56}
+          quality={100}
+          priority
+        />
+        </div>
+        <div>
+        <p className="H6 font-medium">
+            Date
+        </p>
+        <p className="B1 font-normal">
+            {data.seminar_opening_date}
+        </p>
+        </div>
+        <div>
+        <p className="H6 font-medium">
+            Location
+        </p>
+        <p className="B1 font-normal">
+            {data.location}
+        </p>
+        </div>
+        <div>
+      <button className={`w-full rounded py-4 text-[0.75rem] font-medium ${data.status === false ? "text-mono_500 border border-mono_500 pointer-events-none" : "text-mono_black bg-white"}`}>
+        {data.status === false ? '모집 기간이 아니에요.' : '모집 신청하기'}
+      </button>
+        </div>
+    </div>
+    </div>
+  </div>
+  );
+};
+export default OpenSeminarDetailBanner;

src/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { OpenDetailSeminar, OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import React, { useState } from 'react';
+
+/**
+ * @description
+ * 오픈 세미나 상세 페이지 헤더 컴포넌트
+ * @component OpenSeminarDetailHeader
+ * @returns {JSX.Element} OpenSeminarDetailHeader
+ * @since 2024.05.01
+ */
+/**
+ * Renders the header component for the recruitment section.
+ * @returns The rendered header component.
+ */
+const OpenSeminarDetailHeader = ({ data }: { data: OpenSeminar }) => {
+  const [categoryData, setCategoryData] = useState([data.type, `${data.flag}st`]);
+
+  return (
+    <> 
+    <div className="mt-10 px-3 flex gap-3" >
+      {categoryData.map((category, index) => (
+        <button
+          className={`text-[0.75rem] font-medium py-2 px-3 border border-solid rounded-lg ${index === 0 ? "mono_white" :  "border-mono_500 text-mono_500"}`}
+          key={index}
+        >
+          {category}
+        </button>
+      ))}
+      </div>
+    <p className="w-full px-3 pt-8 H3 font-normal">
+      {data.seminar_month_date}{" "}{data.type}
+    </p>
+    <p className="w-full px-3 pt-3 H6 font-medium">
+    {data.description}
+    </p>
+  </>
+  );
+};
+export default OpenSeminarDetailHeader;

src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
+
+/**
+ * @description
+ * 오픈 세미나 정보 컴포넌트
+ * @component OpenSeminarDetailInformation
+ * @returns {JSX.Element} OpenSeminarDetailInformation
+ * @since 2024.04.18
+ */
+/**
+ * Renders the header component for the recruitment section.
+ * @returns The rendered header component.
+ */
+const OpenSeminarDetailInformation = ({ data }: { data: OpenSeminar }) => {
+
+  return (
+    <div className="w-full flex mt-10 pt-6 flex-col inline-flex min-h-fit relative"> 
+    <p className="H4 font-normal px-2 pb-4">
+      Information
+    </p>
+    <p className="mb-3 border border-solid text-mono_700 h-0"/>
+   <div className='text-[1rem] font-normal w-full mt-8 text-mono_white'>
+   {data.information.split('<br>').map((line, index) => (
+          <React.Fragment key={index}>
+            {line}
+            <br />
+          </React.Fragment>
+        ))}
+   </div>
+  </div>
+  );
+};
+export default OpenSeminarDetailInformation;

src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import OpenSeminarsDetailBox from './OpenSeminarsDetailBox';
+import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import { OPEN_SEMINAR_DATA } from '@/constants/seminar/openSeminarData';
+import Link from 'next/link';
+
+/**
+ * @description
+ * 오픈 세미나 상세 페이지 세미나 종류 컴포넌트
+ * @component OpenSeminarDetailSeminars
+ * @returns {JSX.Element} OpenSeminarDetailSeminars
+ * @since 2024.04.18
+ */
+/**
+ * Renders the header component for the recruitment section.
+ * @returns The rendered header component.
+ */
+const OpenSeminarDetailSeminars = ({ data }: { data: OpenSeminar }) => {
+
+  return (
+    <div className="w-full mt-10 pt-6 flex-col inline-flex min-h-fit relative"> 
+    <p className="H4 font-normal px-2 pb-4">
+      Seminars
+    </p>
+    <p className="mb-3 border border-solid text-mono_700 h-0"/>
+    <div className='mt-5 flex grid desktop:grid-cols-2 tablet:grid-cols-1 gap-8'>
+    {data.seminars.map((seminar, index) => (
+    <OpenSeminarsDetailBox
+      key={`${seminar.id}_${index}_seminar`} 
+      data={seminar}
+    />
+  ))}
+  </div>
+  </div>
+  );
+};
+export default OpenSeminarDetailSeminars;

src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx

@@ -0,0 +1,39 @@
+import { OpenDetailSeminar, OpenSeminar } from '@/interfaces/seminar/openSeminar';
+import Image from 'next/image';
+import React from 'react';
+
+/**
+ * @description
+ * 세미나 상세 페이지 리뷰 디테일 컴포넌트
+ * @component SeminarDetailReviewDetail
+ * @returns {JSX.Element} SeminarDetailReviewDetail
+ * @since 2024.04.18
+ */
+/**
+ * Renders the header component for the recruitment section.
+ * @returns The rendered header component.
+ */
+const OpenSeminarsDetailBox = ({ data }: { data: OpenDetailSeminar }) => {
+
+  return (
+    <div className="w-full flex flex-row p-4 bg-mono_900 rounded gap-4"> 
+    <div className='rounded overflow-hidden'>
+      <Image
+          src={data.presenter_image_url}
+          alt="translate_img"
+          width={64}
+          height={64}
+          quality={100}
+          priority
+        />
+        </div>
+        <div className='flex flex-col justify-center'>
+        <div className="B1 font-medium flex gap-2">
+            {data.presenter} <p className="B1 font-normal text-mono_200">{data.presenter_role}</p>
+        </div>
+        <p className='className="B1 font-normal'>{data.seminar_title}</p>
+        </div>
+  </div>
+  );
+};
+export default OpenSeminarsDetailBox;