diff --git a/apps/admin/apis/form/createStudyApi.ts b/apps/admin/apis/form/createStudyApi.ts new file mode 100644 index 00000000..fd81f0a3 --- /dev/null +++ b/apps/admin/apis/form/createStudyApi.ts @@ -0,0 +1,11 @@ +import { fetcher } from "@wow-class/utils"; +import { apiPath } from "constants/apiPath"; +import type { CreateStudyApiRequestDto } from "types/dtos/createStudy"; + +export const createStudyApi = { + postCreateStudy: async (data: CreateStudyApiRequestDto) => { + const response = await fetcher.post(apiPath.createStudy, data); + + return { success: response.ok }; + }, +}; diff --git a/apps/admin/app/layout.tsx b/apps/admin/app/layout.tsx index c4baaaf5..aa7b4818 100644 --- a/apps/admin/app/layout.tsx +++ b/apps/admin/app/layout.tsx @@ -23,7 +23,6 @@ const RootLayout = ({ - {children} {modal} diff --git a/apps/admin/app/studies/[study]/_components/Header.tsx b/apps/admin/app/studies/[study]/_components/Header.tsx new file mode 100644 index 00000000..72ad3d4d --- /dev/null +++ b/apps/admin/app/studies/[study]/_components/Header.tsx @@ -0,0 +1,173 @@ +"use client"; + +import { css } from "@styled-system/css"; +import { Flex } from "@styled-system/jsx"; +import { Space, Text } from "@wow-class/ui"; +import { padWithZero, parseISODate } from "@wow-class/utils"; +import { dayToKorean } from "constants/dayToKorean"; +import { headerMockData } from "constants/mockData"; +import Image from "next/image"; +import Link from "next/link"; +import { useState } from "react"; +import { space } from "wowds-tokens"; +import TextButton from "wowds-ui/TextButton"; + +const Header = () => { + const [showIntro, setShowIntro] = useState(false); + + const handleClickShowIntro = () => { + setShowIntro((prev) => !prev); + }; + + const introSectionButtonAriaLabel = showIntro + ? "Collapse introduction" + : "Expand introduction"; + const introSectionImageAriaLabel = showIntro + ? "Collapse introduction icon" + : "Expand introduction icon"; + + const { + title, + academicYear, + semester, + mentorName, + studyType, + dayOfWeek, + startTime: { hour: startHour, minute: startMinute }, + endTime: { hour: endHour, minute: endMinute }, + totalWeek, + period: { startDate, endDate }, + introduction, + notionLink, + } = headerMockData; + + const { month: startMonth, day: startDay } = parseISODate(startDate); + const { month: endMonth, day: endDay } = parseISODate(endDate); + + const studySemester = `${academicYear}-${semester === "FIRST" ? 1 : 2}`; + const studySchedule = `${dayToKorean[dayOfWeek]} ${startHour}:${padWithZero(startMinute)}- + ${endHour}:${padWithZero(endMinute)}`; + const studyPeriod = `${padWithZero(startMonth)}.${padWithZero(startDay)}- + ${padWithZero(endMonth)}.${padWithZero(endDay)}`; + + return ( +
+
+ + + {title} + + + +
+
+ + + + {studySemester} + + + + {mentorName} 멘토 + + + + {studyType} + + +
+ {showIntro && ( +
+
+ + + + 스터디 일정 + + + + {studySchedule} + + + + {totalWeek}주 코스 + + + + {studyPeriod} + + + +
+
+ + + + 스터디 소개 + + + + {introduction} + + + link-icon + + + + +
+
+ )} +
+ ); +}; + +export default Header; + +const ItemSeparator = () => ( + item separator +); + +const downArrowIconStyle = css({ + cursor: "pointer", +}); + +const introduceLinkStyle = css({ + display: "flex", + alignItems: "center", + cursor: "pointer", + gap: "4px", +}); + +const textButtonStyle = { + padding: `${space.sm} 0`, +}; diff --git a/apps/admin/app/studies/[study]/page.tsx b/apps/admin/app/studies/[study]/page.tsx index 137db0a3..7cbf3547 100644 --- a/apps/admin/app/studies/[study]/page.tsx +++ b/apps/admin/app/studies/[study]/page.tsx @@ -1,5 +1,6 @@ +import Header from "./_components/Header"; const Study = () => { - return
Study
; + return
; }; export default Study; diff --git a/apps/admin/app/studies/create-study/_components/CreateStudyButton.tsx b/apps/admin/app/studies/create-study/_components/CreateStudyButton.tsx index f9c8e5a7..5bef1602 100644 --- a/apps/admin/app/studies/create-study/_components/CreateStudyButton.tsx +++ b/apps/admin/app/studies/create-study/_components/CreateStudyButton.tsx @@ -1,5 +1,7 @@ import { css } from "@styled-system/css"; import { Flex } from "@styled-system/jsx"; +import { Text } from "@wow-class/ui"; +import { studyRouterPath } from "constants/router/study"; import Link from "next/link"; import isAdmin from "utils/isAdmin"; import { Plus } from "wowds-icons"; @@ -10,12 +12,12 @@ const CreateStudyButton = async () => { if (!adminStatus) return null; return ( - +