-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #23 from GDSC-DGU/feature/seminar
Feature/seminar 세미나, 세미나 디테일 페이지 구현
- Loading branch information
Showing
26 changed files
with
924 additions
and
9 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
|
68 changes: 68 additions & 0 deletions
68
src/components/seminar/seminarDetail/banner/SeminarDetailBanner.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
34 changes: 34 additions & 0 deletions
34
src/components/seminar/seminarDetail/banner/SeminarDetailBannerThumbnail.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
|
41 changes: 41 additions & 0 deletions
41
src/components/seminar/seminarDetail/header/SeminarDetailHeader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
24
src/components/seminar/seminarDetail/pdf/SeminarDetailPdf.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
24 changes: 24 additions & 0 deletions
24
src/components/seminar/seminarDetail/review/SeminalDetailReviewDetail.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
32 changes: 32 additions & 0 deletions
32
src/components/seminar/seminarDetail/review/SeminarDetailReview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Oops, something went wrong.