feat : open seminar 토글 버튼 구현 #19

src/components/seminar/toggle/SeminarToggle.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React, { useState } from 'react';
+import SeminarToggleMenu from './SeminarToggleMenu';
+import ChervonDownIcon from '@/svg/icons/common/chervon_down.svg';
+import { OPEN_SEMINAR_DATA } from '@/constants/seminar/openSeminarData';
+
+/**
+ * @description
+ * 세미나 페이지 오픈 세미나 토클 버튼
+ * @component SeminarToggle
+ * @returns {JSX.Element} SeminarToggle
+ * @since 2024.04.18
+ */
+/**
+ * Renders the header component for the recruitment section.
+ * @returns The rendered header component.
+ */
+const SeminarToggle = () => {
+    const [isMenuVisible, setIsMenuVisible] = useState(false); // 오픈 세미나 목록 토클 버튼
+    const toggleMenuVisibility = () => {
+        setIsMenuVisible(!isMenuVisible);
+      };
+
+  return (
+<div className="w-full flex-col">
+  <div className="mt-4 w-full flex justify-end">
+    <button onClick={toggleMenuVisibility} className="flex font-normal">
+      목록 보기
+      <ChervonDownIcon className={`self-center ${isMenuVisible ? 'rotate-180' : ''}`} />
+    </button>
+  </div>
+  <div className={`overflow-hidden transition-max-height duration-500 ease-in-out ${isMenuVisible ? 'max-h-[1000px]' : 'max-h-0'}`}>
+  {isMenuVisible && (
+    <div className="mt-10 shadow-md">
+        {OPEN_SEMINAR_DATA.map((openSeminar) => (
+             <SeminarToggleMenu 
+             key={openSeminar.id}
+             data={openSeminar}
+             />
+      ))}
+    </div>
+  )}
+</div>
+</div>
+  );
+};
+export default SeminarToggle;

src/components/seminar/toggle/SeminarToggleMenu.tsx

@@ -0,0 +1,32 @@
+/**
+ * @description
+ * 세미나 페이지 오픈 세미나 토클 메뉴
+ * @component SeminarToggleMenu
+ * @returns {JSX.Element} SeminarToggleMenu
+ * @since 2024.04.18
+ */
+
+import { OpenSeminar } from "@/interfaces/seminar/openSeminar";
+
+/**
+ * Renders the header component for the recruitment section.
+ * @returns The rendered header component.
+ */
+const SeminarToggleMenu = ({data}: {data:OpenSeminar}) => {      
+  return (
+    <div>
+      <div
+        className="w-full flex justify-between items-center">
+            <div className="flex-col">
+      <p className="text-lg font-normal leading-[2rem] tracking-wide">{data.opening_date}{" "}{data.type}</p>
+      <p className="text-xs font-normal leading-[2rem] tracking-wide">{data.seminar_date}</p>
+      </div>
+      <p className="border py-2 px-2 border-solid text-zinc-500 text-sm font-bold rounded-lg">
+              {data.status === false ? "종료" : "진행중"}
+            </p>
+      </div>
+      <p className="mt-3 mb-6 border border-solid text-zinc-500 h-0"/>
+      </div>
+  );
+};
+export default SeminarToggleMenu;

src/constants/seminar/openSeminarData.ts

@@ -0,0 +1,26 @@
+import SeoHuiChan from '@/images/seminar/presenter/seohuichan.png';
+import { OpenSeminar } from '@/interfaces/seminar/openSeminar';
+
+export const OPEN_SEMINAR_DATA: OpenSeminar[] = [
+    {
+        id: 1,
+        flag: 1,
+        type: 'Open Seminar',
+        topic: 'DevTalk',
+        opening_date: '2023/5',
+        seminar_date: '2023.09.22 (FRI) 19:30',
+        location: '동국대학교 원흥관 PBL',
+        title: `
+        휴, 하마터면 
+        의사 될 뻔...
+        `,
+        description: `
+        의사를 목표로 공부를 하다가,
+        프로그래밍을 시작한 과정들을 토대로 개발 공부를 하며 깨달은 것들
+        `,
+        presenter: '서희찬',
+        role: 'Lead',
+        profile_image_url: SeoHuiChan.src,
+        status: false
+    },
+]

src/interfaces/seminar/openSeminar.ts

@@ -0,0 +1,16 @@
+export interface OpenSeminar {
+    id: number;
+    flag: number;
+    type: string;
+    topic: string;
+    opening_date: string;
+    seminar_date: string;
+    location: string;
+    title: string;
+    description: string;
+    presenter: string;
+    role: string;
+    profile_image_url: string;
+    status: boolean;
+}
+