diff --git a/src/app/(user)/(auth)/register/page.tsx b/src/app/(user)/(auth)/register/page.tsx index 80d99593..933cbe46 100644 --- a/src/app/(user)/(auth)/register/page.tsx +++ b/src/app/(user)/(auth)/register/page.tsx @@ -1,3 +1,15 @@ +"use client"; + +import React from "react"; +import styles from "./registerPage.module.css"; +import { RegisterForm } from "@/components/common/RegisterForm/registerForm"; + export default function RegisterPage() { - return
Hello, world!
; + return ( +
+
+ +
+
+ ); } diff --git a/src/app/(user)/(auth)/register/registerPage.module.css b/src/app/(user)/(auth)/register/registerPage.module.css new file mode 100644 index 00000000..fbd069b2 --- /dev/null +++ b/src/app/(user)/(auth)/register/registerPage.module.css @@ -0,0 +1,50 @@ +.pageContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.registerContainer { + display: flex; + align-items: center; + justify-content: center; + margin-top: 100px; + margin-bottom: 100px; +} + +/* Tablet Landscape */ +@media screen and (max-width: 1280px) { + .registerContainer { + margin-top: 80px; + } +} + +/* Tablet Portrait */ +@media screen and (max-width: 1024px) { + .registerContainer { + margin-top: 60px; + } +} + +/* Mobile Landscape and Small Tablets */ +@media screen and (max-width: 768px) { + .registerContainer { + margin-top: 40px; + } + + .pageContainer { + padding: 0 20px; + } +} + +/* Mobile Portrait */ +@media screen and (max-width: 480px) { + .registerContainer { + margin-top: 20px; + } + + .pageContainer { + padding: 0 10px; + } +} diff --git a/src/app/(user)/aihub/datasets/AIHub.module.css b/src/app/(user)/aihub/datasets/AIHub.module.css new file mode 100644 index 00000000..3853eeeb --- /dev/null +++ b/src/app/(user)/aihub/datasets/AIHub.module.css @@ -0,0 +1,90 @@ +/* Full-width navbar */ +.subHeadNavbar { + width: 100%; + padding: 0; + box-sizing: border-box; +} + +/* Banner section */ +.banner { + width: 100%; + padding: 0; + box-sizing: border-box; + margin-bottom: 20px; +} + +/* Main content section */ +.mainContent { + width: 90%; + max-width: 1440px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; + padding-bottom: 100px; +} + +.searchSection { + margin-top: 40px; + margin-bottom: 20px; + justify-content: center; +} + +.filters { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 20px; +} + +.chips { + margin-top: 20px; + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.gridContainer { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 100px; + justify-content: center; + align-items: center; +} + +.container { + width: 100%; + margin-bottom: 100px; + padding: 0 20px; + box-sizing: border-box; +} + +@media screen and (max-width: 480px) { + /** 모바일 세로 */ + .gridContainer { + grid-template-columns: 1fr; + gap: 10px; + } +} + +@media screen and (max-width: 768px) { + /** 모바일 가로, 태블릿 세로 */ + .gridContainer { + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; + } +} + +@media screen and (max-width: 1024px) { + /** 태블릿 가로 */ + .gridContainer { + grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); + gap: 30px; + } +} + +@media screen and (max-width: 1280px) { + /** 태블릿 가로, 노트북 */ + .gridContainer { + gap: 40px; + } +} diff --git a/src/app/(user)/aihub/datasets/page.tsx b/src/app/(user)/aihub/datasets/page.tsx index 226c102e..0810ce03 100644 --- a/src/app/(user)/aihub/datasets/page.tsx +++ b/src/app/(user)/aihub/datasets/page.tsx @@ -1,3 +1,101 @@ +"use client"; + +import React, { useState } from "react"; +import { SubHeadNavbar } from "@/components/common/SubHeadNavbar/SubHeadNavbar"; +import { Banner } from "@/components/common/Banner/Banner"; +import { SearchInput } from "@/components/common/SearchInput"; +import { Dropdown } from "@/components/common/Dropdown/Dropdown"; +import { FilterChip } from "@/components/common/FilterChips/FilterChip"; +import { AihubCard } from "@/components/common/Cards/Aihub/Aihub"; + +import classes from "./AIHub.module.css"; + export default function DatasetsPage() { - return
Hello, world!
; + const [selectedOptions, setSelectedOptions] = useState([]); + + const handleOptionSelect = (option: string) => { + if (!selectedOptions.includes(option)) { + setSelectedOptions((prev) => [...prev, option]); + } + }; + + const handleRemoveChip = (option: string) => { + setSelectedOptions((prev) => prev.filter((item) => item !== option)); + }; + + return ( + <> +
+ +
+ +
+ +
+ +
+
+ + +
+ + + +
+ +
+ {selectedOptions.map((option) => ( + handleRemoveChip(option)} /> + ))} +
+
+ +
+ + + + + {/* Add more AihubCard components as needed */} +
+
+ + ); } diff --git a/src/app/(user)/aihub/models/AIHub.module.css b/src/app/(user)/aihub/models/AIHub.module.css new file mode 100644 index 00000000..3853eeeb --- /dev/null +++ b/src/app/(user)/aihub/models/AIHub.module.css @@ -0,0 +1,90 @@ +/* Full-width navbar */ +.subHeadNavbar { + width: 100%; + padding: 0; + box-sizing: border-box; +} + +/* Banner section */ +.banner { + width: 100%; + padding: 0; + box-sizing: border-box; + margin-bottom: 20px; +} + +/* Main content section */ +.mainContent { + width: 90%; + max-width: 1440px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; + padding-bottom: 100px; +} + +.searchSection { + margin-top: 40px; + margin-bottom: 20px; + justify-content: center; +} + +.filters { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 20px; +} + +.chips { + margin-top: 20px; + display: flex; + gap: 10px; + flex-wrap: wrap; +} + +.gridContainer { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 100px; + justify-content: center; + align-items: center; +} + +.container { + width: 100%; + margin-bottom: 100px; + padding: 0 20px; + box-sizing: border-box; +} + +@media screen and (max-width: 480px) { + /** 모바일 세로 */ + .gridContainer { + grid-template-columns: 1fr; + gap: 10px; + } +} + +@media screen and (max-width: 768px) { + /** 모바일 가로, 태블릿 세로 */ + .gridContainer { + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; + } +} + +@media screen and (max-width: 1024px) { + /** 태블릿 가로 */ + .gridContainer { + grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); + gap: 30px; + } +} + +@media screen and (max-width: 1280px) { + /** 태블릿 가로, 노트북 */ + .gridContainer { + gap: 40px; + } +} diff --git a/src/app/(user)/aihub/models/page.tsx b/src/app/(user)/aihub/models/page.tsx index 9c5403b5..6077cf87 100644 --- a/src/app/(user)/aihub/models/page.tsx +++ b/src/app/(user)/aihub/models/page.tsx @@ -1,3 +1,101 @@ +"use client"; + +import React, { useState } from "react"; +import { SubHeadNavbar } from "@/components/common/SubHeadNavbar/SubHeadNavbar"; +import { Banner } from "@/components/common/Banner/Banner"; +import { SearchInput } from "@/components/common/SearchInput"; +import { Dropdown } from "@/components/common/Dropdown/Dropdown"; +import { FilterChip } from "@/components/common/FilterChips/FilterChip"; +import { AihubCard } from "@/components/common/Cards/Aihub/Aihub"; + +import classes from "./AIHub.module.css"; + export default function ModelsPage() { - return
Hello, world!
; + const [selectedOptions, setSelectedOptions] = useState([]); + + const handleOptionSelect = (option: string) => { + if (!selectedOptions.includes(option)) { + setSelectedOptions((prev) => [...prev, option]); + } + }; + + const handleRemoveChip = (option: string) => { + setSelectedOptions((prev) => prev.filter((item) => item !== option)); + }; + + return ( + <> +
+ +
+ +
+ +
+ +
+
+ + +
+ + + +
+ +
+ {selectedOptions.map((option) => ( + handleRemoveChip(option)} /> + ))} +
+
+ +
+ + + + + {/* Add more AihubCard components as needed */} +
+
+ + ); } diff --git a/src/app/(user)/infodesk/inquiries/page.tsx b/src/app/(user)/infodesk/inquiries/page.tsx index bf44f64d..fe487599 100644 --- a/src/app/(user)/infodesk/inquiries/page.tsx +++ b/src/app/(user)/infodesk/inquiries/page.tsx @@ -1,3 +1,96 @@ +"use client"; + +import React from "react"; +//import { useRouter } from "next/navigation"; // Import the Next.js router + +import { SubHeadNavbar } from "@/components/common/SubHeadNavbar/SubHeadNavbar"; +import { Banner } from "@/components/common/Banner/Banner"; +import { Noticeboard } from "@/components/common/Noticeboard/Noticeboard"; +import { PrimaryButton } from "@/components/common/Buttons/PrimaryButton/PrimaryButton"; // Import PrimaryButton + +import classes from "./projectQA.module.css"; + export default function InquiriesPage() { - return
Hello, world!
; + // const router = useRouter(); // Initialize the router + + const heading = "프로젝트 문의"; + const classifier = { + data: [ + { value: "0", label: "전체" }, + { value: "1", label: "제목" }, + { value: "2", label: "내용" }, + { value: "3", label: "작성자" }, + { value: "4", label: "제목+내용" }, + ], + defaultLabel: 0, + searchPlaceholder: "검색어를 입력하세요", + }; + + const items = [ + { + title: "프로젝트 문의입니다", + number: 1, + author: "관리자", + date: new Date("2024-08-01"), + view: 150, + pinned: true, + href: "/inquiries/1", + contentTxt: "this is a content.", + }, + { + title: "프로젝트 문의입니다", + number: 2, + author: "관리자", + date: new Date("2024-08-05"), + view: 100, + pinned: false, + href: "/inquiries/2", + contentTxt: "this is a content.", + }, + // More items can be added here + ]; + + //const handleButtonClick = () => { + //router.push("/inquiries/write"); + //}; + + return ( + <> +
+ +
+ +
+ +
+ +
+ {}} + handleKeyDown={() => {}} + handleSelect={() => {}} + handleSubmit={() => {}} + heading={heading} + classifier={classifier} + items={items} + paginShow={10} + paginJustify="end" + paginMarginTop="20px" + /> + + + 작성하기 + +
+ + ); } diff --git a/src/app/(user)/infodesk/inquiries/projectQA.module.css b/src/app/(user)/infodesk/inquiries/projectQA.module.css new file mode 100644 index 00000000..85f333fa --- /dev/null +++ b/src/app/(user)/infodesk/inquiries/projectQA.module.css @@ -0,0 +1,44 @@ +/* Full-width navbar */ +.subHeadNavbar { + width: 100%; + padding: 0; + box-sizing: border-box; +} + +/* Banner section */ +.banner { + width: 100%; + padding: 0; + box-sizing: border-box; + margin-bottom: 20px; +} + +/* Main content section */ +.mainContent { + width: 80%; + max-width: 1440px; + margin: 0 auto; + padding: 20px; + box-sizing: border-box; + padding-bottom: 200px; + padding-top: 80px; + position: relative; +} + +/** 데스크탑 */ + +@media screen and (max-width: 480px) { + /** 모바일 세로 */ +} + +@media screen and (max-width: 768px) { + /** 모바일 가로, 태블릿 세로 */ +} + +@media screen and (max-width: 1024px) { + /** 태블릿 가로 */ +} + +@media screen and (max-width: 1280px) { + /** 태블릿 가로, 노트북 */ +} diff --git a/src/app/(user)/infodesk/inquiries/write/page.tsx b/src/app/(user)/infodesk/inquiries/write/page.tsx index 711ef9bf..df7a6bd4 100644 --- a/src/app/(user)/infodesk/inquiries/write/page.tsx +++ b/src/app/(user)/infodesk/inquiries/write/page.tsx @@ -1,3 +1,94 @@ +"use client"; + +import React from "react"; +import { SubHeadNavbar } from "@/components/common/SubHeadNavbar/SubHeadNavbar"; +import { Banner } from "@/components/common/Banner/Banner"; +import { TextInput } from "@/components/common/TextInput"; +import { CheckBox } from "@/components/common/CheckBox/CheckBox"; +import { PrimaryButton } from "@/components/common/Buttons/PrimaryButton/PrimaryButton"; + +import classes from "./writeQA.module.css"; + export default function InquiryWritePage() { - return
Hello, world!
; + return ( + <> +
+ +
+ +
+ +
+ +
+

산학협력 과제 제안

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + + +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ 첨부파일 추가 +
+ +
+
+ +
+
+ 삭제 +
+
+ +
+
+ +
+
+ 삭제 +
+
+ +
+ 작성하기 + 목록으로 +
+
+ + ); } diff --git a/src/app/(user)/infodesk/inquiries/write/writeQA.module.css b/src/app/(user)/infodesk/inquiries/write/writeQA.module.css new file mode 100644 index 00000000..9c26ca9b --- /dev/null +++ b/src/app/(user)/infodesk/inquiries/write/writeQA.module.css @@ -0,0 +1,88 @@ +/* Full-width navbar */ +.subHeadNavbar { + width: 100%; + padding: 0; + box-sizing: border-box; +} + +/* Banner section */ +.banner { + width: 100%; + padding: 0; + box-sizing: border-box; + margin-bottom: 20px; +} + +/* Main content section */ +.mainContent { + width: 80%; + max-width: 1440px; + margin: 0 auto; + padding: 20px; + box-sizing: border-box; + padding-bottom: 100px; +} + +.heading { + margin-bottom: 40px; +} + +.formRow { + width: 100%; + margin-bottom: 20px; +} + +.formFile { + width: 100%; + display: flex; + margin-bottom: 20px; +} + +.formFile label { + margin-bottom: 15px; +} + +.formFile .InputWrapper { + margin-right: 30px; + /* TextInput과 버튼 사이에 간격 추가 */ +} + +.formFile .buttonWrapper { + margin-top: 30px; + /* 버튼 위에만 마진을 줌 */ +} + +.checkboxGroup { + margin-top: 15px; + display: flex; + gap: 20px; +} + +.formRow label { + font-weight: bold; + margin-bottom: 15px; +} + +.formActions { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} + +/** 데스크탑 */ + +@media screen and (max-width: 480px) { + /** 모바일 세로 */ +} + +@media screen and (max-width: 768px) { + /** 모바일 가로, 태블릿 세로 */ +} + +@media screen and (max-width: 1024px) { + /** 태블릿 가로 */ +} + +@media screen and (max-width: 1280px) { + /** 태블릿 가로, 노트북 */ +} diff --git a/src/app/(user)/interviews/interviews.module.css b/src/app/(user)/interviews/interviews.module.css new file mode 100644 index 00000000..34d8c462 --- /dev/null +++ b/src/app/(user)/interviews/interviews.module.css @@ -0,0 +1,38 @@ +/* Banner section */ +.banner { + width: 100%; + padding: 0; + box-sizing: border-box; + margin-bottom: 20px; +} + +/* Main content section */ +.mainContent { + width: 90%; + max-width: 1440px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; + padding-bottom: 100px; +} + +.searchSection { + margin-top: 40px; + margin-bottom: 20px; + justify-content: center; +} + +.filters { + display: flex; + justify-content: flex-end; + margin-top: 20px; +} + +/* Grid container for video cards */ +.videoGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + /* Adjusts the number of columns based on screen size */ + gap: 20px; + margin-top: 40px; +} diff --git a/src/app/(user)/interviews/page.tsx b/src/app/(user)/interviews/page.tsx index b46e4e4a..21db6a7f 100644 --- a/src/app/(user)/interviews/page.tsx +++ b/src/app/(user)/interviews/page.tsx @@ -1,3 +1,81 @@ +"use client"; + +import React, { useState } from "react"; +//import { useRouter } from "next/navigation"; // Import the Next.js router + +import { Banner } from "@/components/common/Banner/Banner"; +import { SearchInput } from "@/components/common/SearchInput"; +import { Dropdown } from "@/components/common/Dropdown/Dropdown"; +import { VideoCard } from "@/components/common/VideoCard/VideoCard"; + +import classes from "./interviews.module.css"; + export default function InterviewsPage() { - return
Hello, world!
; + const [selectedOptions, setSelectedOptions] = useState([]); + + const handleOptionSelect = (option: string) => { + if (!selectedOptions.includes(option)) { + setSelectedOptions((prev) => [...prev, option]); + } + }; + + // Example video card data + const videoData = [ + { + title: "뤼튼 테크놀로지스", + subtitle: "현지웅 엔지니어님", + videoUrl: "https://www.youtube.com/embed/OBsR6UumFdc", + }, + { + title: "스타트업 대담 2", + subtitle: "기술의 발전", + videoUrl: "https://www.youtube.com/embed/OBsR6UumFdc", + }, + { + title: "스타트업 대담 3", + subtitle: "혁신과 미래", + videoUrl: "https://www.youtube.com/embed/OBsR6UumFdc", + }, + // Add more video data as needed + ]; + + return ( + <> +
+ +
+ +
+
+ + +
+ +
+
+ {/* Video card grid section */} +
+ {videoData.map((video, index) => ( + + ))} +
+
+ + ); } diff --git a/src/components/common/Cards/Aihub/Aihub.module.css b/src/components/common/Cards/Aihub/Aihub.module.css index d2d3fe38..7afc6b11 100644 --- a/src/components/common/Cards/Aihub/Aihub.module.css +++ b/src/components/common/Cards/Aihub/Aihub.module.css @@ -1,4 +1,4 @@ -.root { +/*.root { display: flex; width: 471px; height: 139px; @@ -23,12 +23,13 @@ top: 17px; color: var(--normal, #19191b); /* material-theme/title/medium */ - +/* font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; /* 150% */ +/* } .people { @@ -48,6 +49,7 @@ font-weight: 500; line-height: 24px; /* 171.429% */ +/* } .company { @@ -67,6 +69,7 @@ font-weight: 500; line-height: 24px; /* 171.429% */ +/* } .model { @@ -96,6 +99,7 @@ font-weight: 700; line-height: 24px; /* 240% */ +/* } .side { @@ -115,4 +119,86 @@ right: -12px; bottom: 0px; position: absolute; +}*/ + +.root { + display: flex; + flex-direction: column; + /* Adjust to handle smaller widths */ + width: 100%; + /* Allow the card to be responsive */ + max-width: 471px; + /* Maximum width to maintain design */ + height: 139px; + padding: 8px 0px 19px 23px; + align-items: flex-start; + gap: 8px; + border-radius: 12px; + border: 2px solid var(--background, #efeff0); + background: var(--white, #fff); + position: relative; + box-sizing: border-box; +} + +.title, +.people, +.company, +.modeltext { + display: flex; + width: auto; + flex-direction: column; + position: absolute; + left: 28px; +} + +.title { + top: 17px; + color: var(--normal, #19191b); + font-size: 16px; + font-weight: 500; + line-height: 24px; +} + +.people { + top: 41px; + color: var(--Schemes-Outline, #73777f); + font-size: 14px; + font-weight: 500; + line-height: 24px; +} + +.company { + bottom: 50px; + color: #000; + font-size: 14px; + font-weight: 500; + line-height: 24px; +} + +.modeltext { + bottom: 17px; + font-size: 12px; + font-weight: 700; + line-height: 24px; + text-align: left; + /* Align text to the left */ +} + +.side { + width: 33px; + height: 135px; + border-radius: 0px 12px 12px 0px; + background: var(--color-surfaceVariant, #dfe2eb); + position: absolute; + top: 0; + right: 0; +} + +.Bookmark { + width: 40px; + height: 40px; + right: -12px; + /* Adjusted to ensure no overflow */ + bottom: 0px; + position: absolute; } diff --git a/src/components/common/Cards/Aihub/Aihub.tsx b/src/components/common/Cards/Aihub/Aihub.tsx index b426ec9d..549b5fff 100644 --- a/src/components/common/Cards/Aihub/Aihub.tsx +++ b/src/components/common/Cards/Aihub/Aihub.tsx @@ -46,8 +46,9 @@ export function AihubCard({
{people}
{company}
{model}
-
- +
+ +
); diff --git a/src/components/common/Dropdown/Dropdown.tsx b/src/components/common/Dropdown/Dropdown.tsx index 7f817811..c9264a8e 100644 --- a/src/components/common/Dropdown/Dropdown.tsx +++ b/src/components/common/Dropdown/Dropdown.tsx @@ -42,13 +42,10 @@ export function Dropdown({ width="24" height="24" viewBox="0 0 24 24" - fill="none" + fill="currentColor" xmlns="http://www.w3.org/2000/svg" > - + ) : ( /* closed dropdown = Lets Icons v1.0 Single Arrow Arrow_drop_down */ @@ -56,13 +53,10 @@ export function Dropdown({ width="24" height="24" viewBox="0 0 24 24" - fill="none" + fill="currentColor" xmlns="http://www.w3.org/2000/svg" > - + )} diff --git a/src/components/common/RegisterForm/registerForm.module.css b/src/components/common/RegisterForm/registerForm.module.css new file mode 100644 index 00000000..a956e772 --- /dev/null +++ b/src/components/common/RegisterForm/registerForm.module.css @@ -0,0 +1,99 @@ +.registerBox { + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 20px; + gap: 30px; + position: relative; + background: var(--color-surfaceContainerLowest); + border: 1px solid var(--color-surfaceVariant); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + border-radius: 12px; + width: 542px; + word-wrap: break-word; +} + +.registerBox label { + margin-bottom: 10px; +} + +.text { + width: 300px; + height: 12%; +} + +.logo { + margin-bottom: 0px; + width: 150px; + height: auto; +} + +.button { + width: 300px; +} + +/* Tablet Landscape */ +@media screen and (max-width: 1280px) { + .registerBox { + width: 470px; + } + + .logo { + width: 130px; + } + + .text { + width: 350px; + font-size: 17px; + } +} + +/* Tablet Portrait */ +@media screen and (max-width: 1024px) { + .registerBox { + width: 400px; + } + + .logo { + width: 110px; + } + + .text { + width: 360px; + font-size: 16px; + } +} + +/* Mobile Landscape and Small Tablets */ +@media screen and (max-width: 768px) { + .registerBox { + width: 320px; + } + + .logo { + width: 90px; + } + + .text { + width: 290px; + font-size: 15px; + } +} + +/* Mobile Portrait */ +@media screen and (max-width: 480px) { + .registerBox { + width: 260px; + } + + .logo { + width: 75px; + } + + .text { + width: 240px; + font-size: 14px; + } +} diff --git a/src/components/common/RegisterForm/registerForm.tsx b/src/components/common/RegisterForm/registerForm.tsx new file mode 100644 index 00000000..084c3c47 --- /dev/null +++ b/src/components/common/RegisterForm/registerForm.tsx @@ -0,0 +1,88 @@ +import React, { useState } from "react"; +import { TextInput } from "@/components/common/TextInput/TextInput"; +import { Dropdown } from "@/components/common/Dropdown/Dropdown"; +import { CheckBox } from "@/components/common/CheckBox/CheckBox"; +import { PrimaryButton } from "@/components/common/Buttons/PrimaryButton/PrimaryButton"; +import classes from "./registerForm.module.css"; + +const MEMBER_TYPES = ["학생", "교수/교직원", "기업관계자", "외부인"]; + +export function RegisterForm() { + const [selectedMemberType, setSelectedMemberType] = useState(null); + const [selectedDepartment, setSelectedDepartment] = useState(null); + + const handleMemberTypeChange = (type: string) => { + setSelectedMemberType(type); + setSelectedDepartment(null); // Reset department when member type changes + }; + + const handleDepartmentChange = (department: string) => { + setSelectedDepartment(department); + }; + + return ( +
+ Logo + +

회원 정보 입력

+ + + + + + + {selectedMemberType === "학생" && ( + <> + + + + + )} + + {(selectedMemberType === "교수/교직원" || selectedMemberType === "기업관계자") && ( + <> + + + + + )} + + {selectedMemberType === "외부인" && ( + + )} + + + + 회원가입 +
+ ); +} diff --git a/src/components/common/VideoCard/QuizModal.tsx b/src/components/common/VideoCard/QuizModal.tsx new file mode 100644 index 00000000..8d65aabb --- /dev/null +++ b/src/components/common/VideoCard/QuizModal.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { Modal, Text } from "@mantine/core"; +import { PrimaryButton } from "@/components/common/Buttons/PrimaryButton/PrimaryButton"; // Import the PrimaryButton + +interface QuizModalProps { + opened: boolean; + onClose: () => void; + videoUrl: string; + quizContent: React.ReactNode; // 퀴즈 내용이 들어갈 부분 +} + +export const QuizModal: React.FC = ({ opened, onClose, videoUrl, quizContent }) => { + return ( + + {/* Modal Title */} +
+ + 대담영상 퀴즈 + + + {/* Embedded Video */} +