diff --git a/public/svg/seminar/gdsc_logo.svg b/public/svg/seminar/gdsc_logo.svg deleted file mode 100644 index 2b559a5..0000000 --- a/public/svg/seminar/gdsc_logo.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/public/svg/seminar/seminar_thumbnail_card.png b/public/svg/seminar/seminar_thumbnail_card.png new file mode 100644 index 0000000..0c8bb6f Binary files /dev/null and b/public/svg/seminar/seminar_thumbnail_card.png differ diff --git a/src/app/seminar/[id]/page.tsx b/src/app/seminar/[id]/page.tsx index 4874a2d..60eb04f 100644 --- a/src/app/seminar/[id]/page.tsx +++ b/src/app/seminar/[id]/page.tsx @@ -22,7 +22,9 @@ const SeminarDetailPage = () => { } - return
+ return
+
+
{/* header */} @@ -33,8 +35,12 @@ const SeminarDetailPage = () => { {/* review */} - -
; + + +
+
+
+ ; }; export default SeminarDetailPage; diff --git a/src/components/seminar/thumbnail/SeminarThumbnail.tsx b/src/components/seminar/thumbnail/SeminarThumbnail.tsx index a716ee8..d2f0b79 100644 --- a/src/components/seminar/thumbnail/SeminarThumbnail.tsx +++ b/src/components/seminar/thumbnail/SeminarThumbnail.tsx @@ -1,6 +1,5 @@ -import React, { useState } from 'react'; -import GDSCLOGO from '@/svg/seminar/gdsc_logo.svg'; import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail'; +import Image from 'next/image'; /** * @description @@ -15,43 +14,15 @@ import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail'; */ const SeminarThumbnail = ({ data }: { data: SeminarThumnail }) => { return ( -
- {/* 왼쪽 컨텐츠 */} -
- -

GDSC DGU {data.flag}st

-

{data.type}

-

{data.date}

-

-

{data.title}

-

{data.description}

-
- {/* 오른쪽 컨텐츠 */} -
-

- {data.topic} -

-
-
-

- {data.presenter} -

-

- {data.flag}st {data.role} -

-
-
-
+
+ {`${data.presenter}'s_seminarimage`}
); }; diff --git a/src/components/seminar/thumbnail/SeminarThumbnailList.tsx b/src/components/seminar/thumbnail/SeminarThumbnailList.tsx index 5e09964..39c0f09 100644 --- a/src/components/seminar/thumbnail/SeminarThumbnailList.tsx +++ b/src/components/seminar/thumbnail/SeminarThumbnailList.tsx @@ -35,7 +35,7 @@ const SeminarThumbnailList = ({ selectedCategory }: { selectedCategory: string } // 페이지 번호 계산 const pageNumbers = []; - for (let i = 1; i <= Math.ceil(SEMINAR_DATA.length / itemsPerPage); i++) { + for (let i = 1; i <= Math.ceil(filteredData.length / itemsPerPage); i++) { pageNumbers.push(i); } @@ -47,11 +47,11 @@ const SeminarThumbnailList = ({ selectedCategory }: { selectedCategory: string } return ( -
- {/* 썸네일 레스트 */} -
+
+ {/* 썸네일 리스트 */} + + {/* desktop인 경우 */} +
{currentItems.map((seminar) => ( ))} +
+ + {/*tablet, mobile인 경우 */} +
+ {SEMINAR_DATA.map((seminar) => ( + + + + ))}
{/* 페이지네이션 버튼 */} -
+ + {/* desktop인 경우에만 보이기 */} +
{pageNumbers.map(number => ( diff --git a/src/constants/seminar/seminarData.ts b/src/constants/seminar/seminarData.ts index 38f4c31..97e14ca 100644 --- a/src/constants/seminar/seminarData.ts +++ b/src/constants/seminar/seminarData.ts @@ -1,9 +1,9 @@ -import SeoHuiChan from '@/images/seminar/presenter/seohuichan.png'; +import SeminarThumbnailCardImg from '@/svg/seminar/seminar_thumbnail_card.png'; import { SeminarThumnail } from '@/interfaces/seminar/seminarThumbnail'; export const SEMINAR_DATA: SeminarThumnail[] = [ { - id: 1, + id: 23, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', @@ -19,137 +19,197 @@ export const SEMINAR_DATA: SeminarThumnail[] = [ `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 2, + id: 22, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 3, + id: 21, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 4, + id: 20, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 5, + id: 19, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 6, + id: 18, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 7, + id: 17, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 8, + id: 16, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 9, + id: 15, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 10, + id: 14, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 11, + id: 13, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { id: 12, @@ -158,36 +218,225 @@ export const SEMINAR_DATA: SeminarThumnail[] = [ topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 13, + id: 11, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, { - id: 14, + id: 10, flag: 1, type: 'Camping Seminar', topic: 'DevTalk', date: '2023.09.22 (FRI) 19:30', location: '동국대학교 원흥관 PBL', - title: '휴, 하마터면\n의사 될 뻔...', - description: `의사를 목표로 공부를 하다가, 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들`, + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, + presenter: '서희찬', + role: 'Lead', + image_url: SeminarThumbnailCardImg.src, + }, + { + id: 9, + flag: 1, + type: 'Camping Seminar', + topic: 'DevTalk', + date: '2023.09.22 (FRI) 19:30', + location: '동국대학교 원흥관 PBL', + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, + presenter: '서희찬', + role: 'Lead', + image_url: SeminarThumbnailCardImg.src, + }, + { + id: 8, + flag: 1, + type: 'Camping Seminar', + topic: 'DevTalk', + date: '2023.09.22 (FRI) 19:30', + location: '동국대학교 원흥관 PBL', + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, + presenter: '서희찬', + role: 'Lead', + image_url: SeminarThumbnailCardImg.src, + }, + { + id: 7, + flag: 1, + type: 'Camping Seminar', + topic: 'DevTalk', + date: '2023.09.22 (FRI) 19:30', + location: '동국대학교 원흥관 PBL', + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, + presenter: '서희찬', + role: 'Lead', + image_url: SeminarThumbnailCardImg.src, + }, + { + id: 6, + flag: 1, + type: 'Camping Seminar', + topic: 'DevTalk', + date: '2023.09.22 (FRI) 19:30', + location: '동국대학교 원흥관 PBL', + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, + presenter: '서희찬', + role: 'Lead', + image_url: SeminarThumbnailCardImg.src, + }, + { + id: 5, + flag: 1, + type: 'Camping Seminar', + topic: 'DevTalk', + date: '2023.09.22 (FRI) 19:30', + location: '동국대학교 원흥관 PBL', + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, + presenter: '서희찬', + role: 'Lead', + image_url: SeminarThumbnailCardImg.src, + }, + { + id: 4, + flag: 1, + type: 'Camping Seminar', + topic: 'DevTalk', + date: '2023.09.22 (FRI) 19:30', + location: '동국대학교 원흥관 PBL', + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, + presenter: '서희찬', + role: 'Lead', + image_url: SeminarThumbnailCardImg.src, + }, + { + id: 3, + flag: 1, + type: 'Camping Seminar', + topic: 'DevTalk', + date: '2023.09.22 (FRI) 19:30', + location: '동국대학교 원흥관 PBL', + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, + presenter: '서희찬', + role: 'Lead', + image_url: SeminarThumbnailCardImg.src, + }, + { + id: 2, + flag: 1, + type: 'Camping Seminar', + topic: 'DevTalk', + date: '2023.09.22 (FRI) 19:30', + location: '동국대학교 원흥관 PBL', + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, + presenter: '서희찬', + role: 'Lead', + image_url: SeminarThumbnailCardImg.src, + }, + { + id: 1, + flag: 1, + type: 'Camping Seminar', + topic: 'DevTalk', + date: '2023.09.22 (FRI) 19:30', + location: '동국대학교 원흥관 PBL', + title: ` + 휴, 하마터면 + 의사 될 뻔... + `, + description: ` + 의사를 목표로 공부를 하다가, + 프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들 + `, presenter: '서희찬', role: 'Lead', - profile_image_url: SeoHuiChan.src, + image_url: SeminarThumbnailCardImg.src, }, ] \ No newline at end of file diff --git a/src/interfaces/seminar/seminarThumbnail.ts b/src/interfaces/seminar/seminarThumbnail.ts index 7160158..21fc2e5 100644 --- a/src/interfaces/seminar/seminarThumbnail.ts +++ b/src/interfaces/seminar/seminarThumbnail.ts @@ -9,6 +9,6 @@ export interface SeminarThumnail { description: string; presenter: string; role: string; - profile_image_url: string; + image_url: string; } \ No newline at end of file