feat : seminar detail banner 컴포넌트 생성 #19

src/components/seminar/seminarDetail/banner/SeminarDetailBanner.tsx

@@ -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;

src/components/seminar/seminarDetail/banner/SeminarDetailBannerThumbnail.tsx

@@ -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;
+