Skip to content

Commit

Permalink
Merge pull request #23 from GDSC-DGU/feature/seminar
Browse files Browse the repository at this point in the history
Feature/seminar 세미나, 세미나 디테일 페이지 구현
  • Loading branch information
seochan99 authored Apr 18, 2024
2 parents 3182d84 + fd3fd40 commit 1dabc04
Show file tree
Hide file tree
Showing 26 changed files with 924 additions and 9 deletions.
Binary file added public/images/seminar/presenter/seohuichan.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/svg/seminar/gdsc_logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/svg/seminar/pin.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions public/svg/seminar/seminar_banner.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 36 additions & 3 deletions src/app/seminar/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -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;
27 changes: 21 additions & 6 deletions src/app/seminar/page.tsx
Original file line number Diff line number Diff line change
@@ -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;
29 changes: 29 additions & 0 deletions src/components/seminar/header/SeminarHeader.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import BannerImg from '@/svg/seminar/seminar_banner.svg';

/**
* @description
* 세미나 페이지 헤더 컴포넌트
* @component SeminarHeader
* @returns {JSX.Element} SeminarHeader
* @since 2024.04.12
*/
/**
* Renders the header component for the recruitment section.
* @returns The rendered header component.
*/
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>
);
};
export default SeminarHeader;
44 changes: 44 additions & 0 deletions src/components/seminar/menubar/SeminarMenuBar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
'use client';

import { SEMINAR_CATEGORYS } from '@/constants/seminar/seminarCategory';
import React, { useState } from 'react';

/**
* @description
* 세미나 페이지 오픈 세미나 토클 메뉴
* @component SeminarMenuBar
* @returns {JSX.Element} SeminarMenuBar
* @since 2024.04.18
*/
/**
* Renders the header component for the recruitment section.
* @returns The rendered header component.
*/
const SeminarMenuBar = ({
selectedCategory,
setSelectedCategory,
}: { selectedCategory: string; setSelectedCategory: (value: string) => void }) => {

const handleCategoryChange = (value: string) => {
setSelectedCategory(value);
};

return (
<div className="mt-14 w-full flex gap-3.5 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'
}`}
onClick={() => handleCategoryChange(category.value)}
>
{category.label}
</button>
))}
</div>
);
};

export default SeminarMenuBar;

Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import React from 'react';
import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
import SeminarDetailBannerThumbnail from './SeminarDetailBannerThumbnail';


/**
* @description
* 세미나 상세 페이지 배너 컴포넌트
* @component SeminarDetailBanner
* @returns {JSX.Element} SeminarDetailBanner
* @since 2024.04.18
*/
/**
* Renders the header component for the recruitment section.
* @returns The rendered header component.
*/
const SeminarDetailBanner = ({ data }: { data: SeminarThumnail }) => {
return (
<div className="mt-20 w-full flex relative gap-10">
{/* 왼쪽 컨텐츠 */}
<SeminarDetailBannerThumbnail data={data} />
{/* 오른쪽 컨텐츠 */}
<div className='flex flex-col justify-end align-end mr-20 justify-between text-end align-end h-full'>
<div
className="relative"
style={{
backgroundImage: `url(${data.profile_image_url})`,
backgroundSize: "cover",
borderRadius: 100,
aspectRatio: 1/1,
height: 160,
width: 160,
}}
>
<div className="flex flex-col absolute bottom-0 right-0 gap-1.5">
<p className="text-center py-0.5 px-1 bg-[#fff] text-[#000] text-[0.6rem] font-bold rounded-2xl">
{data.presenter}
</p>
<p className="text-center py-0.5 px-1 bg-[#fff] text-[#000] text-[0.6rem] font-bold rounded-2xl">
{data.flag}st {data.role}
</p>
</div>
</div>
</div>
<div className="flex-1 flex-col">
<p className="font-bold text-lg">
Date
</p>
<p className="mt-1 font-thin text-md">
{data.date}
</p>
<p className="mt-5 font-bold text-lg">
Location
</p>
<p className="mt-1 font-thin text-md">
{data.location}
</p>
<p className="mt-5 font-bold text-lg">
Speaker
</p>
<p className="mt-1 font-thin text-md">
{data.presenter}
</p>
</div>
</div>
);
};
export default SeminarDetailBanner;
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';
import GDSCLOGO from '@/svg/seminar/gdsc_logo.svg';
import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';


/**
* @description
* 세미나 상세 페이지 배너 썸네일 컴포넌트
* @component SeminarDetailBannerThumbnail
* @returns {JSX.Element} SeminarDetailBanner
* @since 2024.04.18
*/
/**
* Renders the header component for the recruitment section.
* @returns The rendered header component.
*/

const SeminarDetailBannerThumbnail = ({ data }: { data: SeminarThumnail }) => {
return (
<div className="flex aspect-w-16 aspect-h-9">
<div className="flex-1">
<GDSCLOGO />
<p className="mt-2 text-xl font-bold tracking-wide truncate">GDSC DGU {data.flag}st</p>
<p className="text-xl font-bold tracking-wide truncate">{data.type}</p>
<p className="mt-1 text-md font-thin tracking-wide truncate">{data.date}</p>
<p className="mt-2 w-14 border border-solid text-zinc-500 h-0 tracking-wide"></p>
<p className="text-4xl font-normal mt-[1rem] tracking-wide">{data.title}</p>
<p className="mt-2 text-sm font-thin tracking-wide">{data.description}</p>
</div>
</div>
);
};
export default SeminarDetailBannerThumbnail;

Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
'use client';

import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail';
import React, { useState } from 'react';

/**
* @description
* 세미나 상세 페이지 헤더 컴포넌트
* @component SeminarDetailHeader
* @returns {JSX.Element} SeminarDetailHeader
* @since 2024.04.18
*/
/**
* Renders the header component for the recruitment section.
* @returns The rendered header component.
*/
const SeminarDetailHeader = ({ data }: { data: SeminarThumnail }) => {
const [categoryData, setCategoryData] = useState([data.type, `${data.flag}st`, data.topic]);

return (
<div className="w-full flex-col justify-center gap-[1rem] inline-flex min-h-fit relative">
<div className="flex gap-2" >
{categoryData.map((category, index) => (
<button
className="border border-1 py-2 px-3 border-2 border-solid text-xs font-normal rounded-lg border-zinc-1000"
key={index}
>
{category}
</button>
))}
</div>
<p className="mt-10 text-5xl font-normal leading-[3rem] tracking-wide">
{data.title}
</p>
<p className="text-md font-normal leading-[3rem] tracking-wide">
{data.description}
</p>
</div>
);
};
export default SeminarDetailHeader;
24 changes: 24 additions & 0 deletions src/components/seminar/seminarDetail/pdf/SeminarDetailPdf.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from 'react';
import PinImg from '@/svg/seminar/pin.svg';

/**
* @description
* 세미나 상세 페이지 pdf 다운로드 컴포넌트
* @component SeminarDetailPdf
* @returns {JSX.Element} SeminarDetailPdf
* @since 2024.04.18
*/
/**
* Renders the header component for the recruitment section.
* @returns The rendered header component.
*/
const SeminarDetailPdf = () => {

return (
<div className="w-full flex mt-20 gap-4 pl-4 py-5 bg-zinc-900 rounded-lg">
<PinImg />
<p>세미나 자료 보기</p>
</div>
);
};
export default SeminarDetailPdf;
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { SeminarReview } from '@/interfaces/seminar/seminarReview';
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 SeminarDetailReviewDetail = ({ data }: { data: SeminarReview }) => {

return (
<div className="w-full flex flex-col p-5 bg-zinc-900 rounded-lg">
<p className='text-md'>사람 이름</p>
<p className='mt-2 text-sm'>리뷰 내용</p>
</div>
);
};
export default SeminarDetailReviewDetail;
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { SEMINAR_REVIEW } from '@/constants/seminar/seminarReviewData';
import React from 'react';
import SeminarDetailReviewDetail from './SeminalDetailReviewDetail';

/**
* @description
* 세미나 상세 페이지 리뷰 컴포넌트
* @component SeminarDetailReview
* @returns {JSX.Element} SeminarDetailReivew
* @since 2024.04.18
*/
/**
* Renders the header component for the recruitment section.
* @returns The rendered header component.
*/
const SeminarDetailReview = () => {

return (
<div className="mt-20 w-full flex-col justify-center gap-[1rem] inline-flex min-h-fit relative">
<p className="text-5xl font-normal leading-[3rem] tracking-wide">
Review
</p>
<p className="w-full border border-solid text-zinc-500 h-0"/>
{SEMINAR_REVIEW.map((review) => (
<SeminarDetailReviewDetail
key={`${review.id}_review`}
data={review}/>
))}
</div>
);
};
export default SeminarDetailReview;
Loading

0 comments on commit 1dabc04

Please sign in to comment.