From 1c8682124b86a1509682cef6047d089914df2e7d Mon Sep 17 00:00:00 2001 From: Eunji <129590633+bianbbc87@users.noreply.github.com> Date: Wed, 8 May 2024 16:04:39 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat=20-=20open=20seminar=20api=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B2=98=EB=A6=AC=20#44?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../banner/OpenSeminarDetailBanner.tsx | 22 +++---- .../header/OpenSeminarDetailHeader.tsx | 8 +-- .../OpenSeminarDetailInformation.tsx | 10 +-- .../OpenSeminarDetailSeminars.tsx | 15 +++-- .../kindOfSeminar/OpenSeminarsDetailBox.tsx | 11 ++-- src/hooks/seminar/changePathtoNumber.ts | 4 +- src/hooks/seminar/notionDataRefactor.ts | 63 ++++++++++++++++--- src/interfaces/seminar/openSeminar.ts | 29 +++++++-- 8 files changed, 114 insertions(+), 48 deletions(-) diff --git a/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx b/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx index 2849b2d..b015af0 100644 --- a/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx +++ b/src/components/seminar/openSeminarDetail/banner/OpenSeminarDetailBanner.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import Image from 'next/image'; import { motion } from 'framer-motion'; @@ -18,7 +20,7 @@ import SeminarDetailBannerInform from '../../seminarDetail/banner/SeminarDetailB * Renders the header component for the recruitment section. * @returns The rendered header component. */ -const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => { +const OpenSeminarDetailBanner = ({ openSeminar }: { openSeminar: OpenSeminar }) => { return (
{/* 왼쪽 컨텐츠 */} @@ -32,12 +34,11 @@ const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => { style={{ transformOrigin: '10% 60%' }} > {`${data.seminar_month_date}'s
@@ -51,11 +52,10 @@ const OpenSeminarDetailBanner = ({ data }: { data: OpenSeminar }) => { width={352} height={56} quality={100} - priority /> - - + +
{ style={{ transformOrigin: '10% 60%' }} > - {data.status === false ? '모집 기간이 아니에요.' : '모집 신청하기'} + {openSeminar.status === false ? '모집 기간이 아니에요.' : '모집 신청하기'}
diff --git a/src/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader.tsx b/src/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader.tsx index 288cda7..a5b343a 100644 --- a/src/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader.tsx +++ b/src/components/seminar/openSeminarDetail/header/OpenSeminarDetailHeader.tsx @@ -14,8 +14,8 @@ import React, { useState } from 'react'; * 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`]); +const OpenSeminarDetailHeader = ({ openSeminar }: { openSeminar: OpenSeminar }) => { + const [categoryData, setCategoryData] = useState([openSeminar.type, `${openSeminar.flag}st`]); return ( <> @@ -30,10 +30,10 @@ const OpenSeminarDetailHeader = ({ data }: { data: OpenSeminar }) => { ))}

- {data.seminar_month_date}{" "}{data.type} + {openSeminar.title}

- {data.description} + {openSeminar.description}

); diff --git a/src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx b/src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx index 292dbf6..6eacd1a 100644 --- a/src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx +++ b/src/components/seminar/openSeminarDetail/information/OpenSeminarDetailInformation.tsx @@ -1,3 +1,5 @@ +'use client'; + import React from 'react'; import { OpenSeminar } from '@/interfaces/seminar/openSeminar'; import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants'; @@ -14,7 +16,7 @@ import { motion } from 'framer-motion'; * Renders the header component for the recruitment section. * @returns The rendered header component. */ -const OpenSeminarDetailInformation = ({ data }: { data: OpenSeminar }) => { +const OpenSeminarDetailInformation = ({ openSeminar }: { openSeminar: OpenSeminar }) => { return (
@@ -32,12 +34,6 @@ const OpenSeminarDetailInformation = ({ data }: { data: OpenSeminar }) => { style={{ transformOrigin: '10% 60%' }} className="w-full" > - {data.information.split('
').map((line, index) => ( - - {line} -
-
- ))}
diff --git a/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx b/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx index 55e1e07..bb65852 100644 --- a/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx +++ b/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarDetailSeminars.tsx @@ -1,9 +1,12 @@ +'use client'; + import React from 'react'; import OpenSeminarsDetailBox from './OpenSeminarsDetailBox'; -import { OpenSeminar } from '@/interfaces/seminar/openSeminar'; +import { OpenSeminar, OpenSeminarDetailSeminar } from '@/interfaces/seminar/openSeminar'; import Link from 'next/link'; import { seminarCardVariants } from '@/constants/seminar/seminarCardVariants'; import { motion } from 'framer-motion'; +import { SeminarMember } from '@/interfaces/seminar/seminarMember'; /** * @description @@ -16,7 +19,7 @@ import { motion } from 'framer-motion'; * Renders the header component for the recruitment section. * @returns The rendered header component. */ -const OpenSeminarDetailSeminars = ({ data }: { data: OpenSeminar }) => { +const OpenSeminarDetailSeminars = ({ detailSeminars }: { detailSeminars:OpenSeminarDetailSeminar[] }) => { return (
@@ -25,7 +28,7 @@ const OpenSeminarDetailSeminars = ({ data }: { data: OpenSeminar }) => {

- {data.seminars.map((seminar, index) => ( + {detailSeminars.map((seminar) => ( { className="w-full" > diff --git a/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx b/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx index ca563e9..c5de192 100644 --- a/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx +++ b/src/components/seminar/openSeminarDetail/kindOfSeminar/OpenSeminarsDetailBox.tsx @@ -1,3 +1,5 @@ +import { OpenSeminarDetailSeminar } from '@/interfaces/seminar/openSeminar'; +import { SeminarMember } from '@/interfaces/seminar/seminarMember'; import { SeminarThumbnail } from '@/interfaces/seminar/seminarThumbnail'; import Image from 'next/image'; import React from 'react'; @@ -13,25 +15,24 @@ import React from 'react'; * Renders the header component for the recruitment section. * @returns The rendered header component. */ -const OpenSeminarsDetailBox = ({ data }: { data: SeminarThumbnail }) => { +const OpenSeminarsDetailBox = ({ seminar }: { seminar:OpenSeminarDetailSeminar }) => { return (
translate_img
- {data.presenter_name}

{data.presenter_role}

+ {seminar.member_name}

{seminar.member_role}

-

{data.title}

+

{seminar.seminar_title}

); diff --git a/src/hooks/seminar/changePathtoNumber.ts b/src/hooks/seminar/changePathtoNumber.ts index 0e609cb..cc33a9e 100644 --- a/src/hooks/seminar/changePathtoNumber.ts +++ b/src/hooks/seminar/changePathtoNumber.ts @@ -1,8 +1,8 @@ // path 'seminar/${seminar.id} 중 seminar.id만 반환 -export const changePathtoSeperate = (pathname: string) => { +export const changePathtoSeperate = (pathname: string, value: string) => { // URL에서 '/seminar/' 다음에 오는 부분을 추출하여 직접 반환 - const basePath = '/seminar/'; + const basePath = `/${value}/`; const start = pathname.indexOf(basePath) + basePath.length; const seminarId = pathname.substring(start); // 이 부분이 바로 seminarId diff --git a/src/hooks/seminar/notionDataRefactor.ts b/src/hooks/seminar/notionDataRefactor.ts index 235bec8..2d17a6c 100644 --- a/src/hooks/seminar/notionDataRefactor.ts +++ b/src/hooks/seminar/notionDataRefactor.ts @@ -3,23 +3,51 @@ import { SeminarReview } from "@/interfaces/seminar/seminarReview"; import { SeminarThumbnail } from "@/interfaces/seminar/seminarThumbnail"; import SeminarThumbnailCardImg from '@/svg/seminar/seminar_thumbnail_card.png'; import PresenterProfileImg from '@/svg/seminar/presenter_profile_img.png'; +import { OpenSeminar, OpenSeminarDetailSeminar, Relation } from "@/interfaces/seminar/openSeminar"; // seminar data export function refactorSeminarData(items: any[]): SeminarThumbnail[] { return items.map(item => ({ - id: item.id, + id: item.id ?? '', flag: 1, type: item.properties.Tags?.multi_select[0]?.name ?? 'Unknown', - topic: item.properties.Topic?.select?.name ?? 'all', // static value as per example + topic: item.properties.Topic?.select?.name ?? 'all', date: item.properties.Date?.date?.start ?? 'Unknown Date', - location: item.properties.Location?.rich_text[0]?.plain_text ?? 'No Location', // static value as per example + location: item.properties.Location?.rich_text[0]?.plain_text ?? 'No Location', title: item.properties.Name?.title[0]?.plain_text ?? 'Unknown Title', - description: item.properties.Description?.rich_text[0]?.plain_text ?? 'No Description', // static value as per example + description: item.properties.Description?.rich_text[0]?.plain_text ?? 'No Description', seminar_image_url: item.cover?.file?.url ?? SeminarThumbnailCardImg.src, pdf_url: item.properties['Files & media']?.files[0]?.file?.url ?? PresenterProfileImg.src, // 임시 pdf 데이터 })); } + // open seminar data +export function refactorOpenSeminarData(items: any[]): OpenSeminar[] { + return items.map(item => ({ + id: item.id ?? '', + flag: 1, + type: item.properties['다중 선택'].multi_select[0]?.name ?? 'Unknown', + date: item.properties.Date?.date?.start ?? 'Unknown Date', + location: item.properties.Location?.rich_text[0]?.plain_text ?? 'No Location', // static value as per example + title: item.properties['이름']?.title[0]?.plain_text ?? 'Unknown Title', + description: item.properties.Description?.rich_text[0]?.plain_text ?? 'No Description', + image_url: item.cover?.file?.url ?? SeminarThumbnailCardImg.src, + status: (item.properties.status?.status?.name === "종료" ? false : true) ?? false, + seminars: item.properties.Seminars?.relation ?? [{id: '1'}, {id: '2'}, {id: '3'}, {id: '4'}], + })); +} + +/* +export function refactorOpenSeminarInformationData(items: any[]): SeminarThumbnail[] { + return items.map(item => ({ + id: item.id, + open_seminar_id: + information: + })); +} +*/ + + // seminar review data export function refactorSeminarReviewData(items: any[]): SeminarReview[] { return items.map(item => ({ @@ -30,14 +58,33 @@ export function refactorSeminarData(items: any[]): SeminarThumbnail[] { })); } - // seminar review data - export function refactorSeminarMemberData(item: any): SeminarMember { + // seminar member data + export function refactorSeminarMemberData(item: any, id:string): SeminarMember { return { id: item.id ?? 'Unknown', - seminar_id: item.properties.Seminars?.relation[0]?.id ?? 'Unknown', + seminar_id: id ?? 'Unknown', name: item.properties['이름']?.title[0]?.plain_text ?? 'Unknown', role: item.properties.Part?.multi_select[0]?.name ?? 'Unknown', profile_img: item.properties.ProfileImage?.url ?? PresenterProfileImg.src, }; } - \ No newline at end of file + + // seminar review data + export function refactorOpenSeminarDetailSeminarsData(seminar: any, member: any): OpenSeminarDetailSeminar { + return { + id: seminar.id, + seminar_id: seminar.id, + member_id: member.id ?? '', + member_name: member.name ?? 'Unknown', + member_role: member.role ?? 'Unknown', + member_profile_image: member.profileImage ?? PresenterProfileImg.src, + seminar_title: seminar.title, + }; + } + + + // open seminar ids로 seminar 데이터 반환 +export function findSeminarsByIds(seminars: SeminarThumbnail[], ids: Relation[]): SeminarThumbnail[] { + const idList = ids.map(relation => relation.id); + return seminars.filter(seminar => idList.includes(seminar.id)); +} \ No newline at end of file diff --git a/src/interfaces/seminar/openSeminar.ts b/src/interfaces/seminar/openSeminar.ts index 7150757..3473a37 100644 --- a/src/interfaces/seminar/openSeminar.ts +++ b/src/interfaces/seminar/openSeminar.ts @@ -1,15 +1,34 @@ import { SeminarThumbnail } from "./seminarThumbnail"; export interface OpenSeminar { - id: number; + id: string; flag: number; type: string; - seminar_opening_date: string; - seminar_month_date: string; + date: string; location: string; + title: string, description: string; - information: string; image_url: string; status: boolean; - seminars: SeminarThumbnail[]; + seminars: Relation[]; +} + +export interface OpenSeminarInfo { + id: number; + open_seminar_id: string; + information: string; +} + +export interface Relation { + id: string; +} + +export interface OpenSeminarDetailSeminar { + id: number; + seminar_id: string; + member_id: string; + member_name: string; + member_role: string; + member_profile_image: string; + seminar_title: string; } \ No newline at end of file