[Feature]: 스터디 개설하기 api 연동

apps/admin/apis/auth/dashboardApi.ts

@@ -2,7 +2,7 @@ import { fetcher } from "@wow-class/utils";
 import { apiPath } from "constants/apiPath";
 import { tags } from "constants/tags";
 import { cookies } from "next/headers";
-import type { DashboardApiResponseDto } from "types/dto/auth";
+import type { DashboardApiResponseDto } from "types/dtos/auth";
 
 export const dashboardApi = {
   getDashboardInfo: async () => {

apps/admin/apis/form/createStudyApi.ts

@@ -0,0 +1,18 @@
+"use client";
+import { fetcher } from "@wow-class/utils";
+import { apiPath } from "constants/apiPath";
+import { redirect } from "next/navigation";
+import { useRouter } from "next/router";
+import type { CreateStudyApiRequestDto } from "types/dtos/createStudy";
+
+export const createStudyApi = {
+  postCreateStudy: async (data: CreateStudyApiRequestDto) => {
+    const response = await fetcher.post(apiPath.createStudy, data, {
+      credentials: "include",
+    });
+
+    if (response.ok) {
+      redirect("/create-study");
+    }
+  },
+};

apps/admin/app/studies/create-study/_components/StudyMentorSelect.tsx

@@ -0,0 +1,37 @@
+import { Flex } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
+import { Controller, useFormContext } from "react-hook-form";
+import DropDown from "wowds-ui/DropDown";
+import DropDownOption from "wowds-ui/DropDownOption";
+
+const StudyMentorSelect = () => {
+  const { control } = useFormContext();
+  return (
+    <Controller
+      control={control}
+      defaultValue={0}
+      name="mentorId"
+      render={({ field }) => (
+        <Flex direction="column" gap="xl">
+          <Text typo="h2">스터디 멘토</Text>
+          <DropDown
+            {...field}
+            placeholder="선택하세요"
+            style={{ width: "270px" }}
+            value={field.value ? String(field.value) : ""}
+            onChange={({ selectedValue }) => {
+              field.onChange(Number(selectedValue));
+            }}
+          >
+            <DropDownOption text="김유진" value="1" />
+          </DropDown>
+        </Flex>
+      )}
+      rules={{
+        required: true,
+      }}
+    />
+  );
+};
+
+export default StudyMentorSelect;

apps/admin/app/studies/create-study/_components/StudyNameTextField.tsx

@@ -0,0 +1,49 @@
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
+import { Controller, useFormContext } from "react-hook-form";
+
+const StudyNameTextField = () => {
+  const { control } = useFormContext();
+  return (
+    <Controller
+      control={control}
+      defaultValue=""
+      name="title"
+      render={({ field }) => (
+        <Flex direction="column" gap="sm">
+          <Text color="sub" typo="h3">
+            새로 개설할 스터디 정보를 입력해주세요
+          </Text>
+          <textarea
+            {...field}
+            className={TextFieldStyle}
+            placeholder="새로운 스터디"
+            onChange={field.onChange}
+          />
+        </Flex>
+      )}
+      rules={{
+        required: true,
+      }}
+    />
+  );
+};
+
+export default StudyNameTextField;
+
+const TextFieldStyle = css({
+  width: "250px",
+  height: "31px",
+  border: "none",
+  color: "textBlack",
+
+  textStyle: "h1",
+  _placeholder: {
+    color: "darkDisabled",
+  },
+  _focus: {
+    outline: "none",
+  },
+  resize: "none",
+});

apps/admin/app/studies/create-study/_components/studyBasicInfo/StudyApplyDatePick.tsx

@@ -0,0 +1,105 @@
+import "react-day-picker/style.css";
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
+import useClickOutside from "hooks/useClickOutSide";
+import { useEffect, useRef, useState } from "react";
+import { DayPicker } from "react-day-picker";
+import { Controller, useFormContext } from "react-hook-form";
+import { dateToFormatString, formatStringToDate } from "utils/formatDate";
+
+const StudyApplyDatePick = () => {
+  const [studyDate, setStudyDate] = useState({
+    fromValue: "",
+    toValue: "",
+  });
+  const datepickerRef = useRef(null);
+  const [isOpen, setOpen] = useState<boolean>(false);
+  const { control, setValue } = useFormContext();
+  const [inputValue, setInputValue] = useState("");
+
+  useClickOutside(datepickerRef, () => {
+    setOpen(false);
+  });
+
+  useEffect(() => {
+    if (studyDate.fromValue) {
+      setInputValue(`${studyDate.fromValue} ~ ${studyDate.toValue}`);
+      setValue("applicationStartDate", studyDate.fromValue);
+      setValue("applicationEndDate", studyDate.toValue);
+    } else {
+      setInputValue("");
+    }
+  }, [studyDate, setValue]);
+
+  return (
+    <Flex direction="column" gap="xs" height="128px" position="relative">
+      <Text color="sub" typo="label2">
+        스터디 신청 기간
+      </Text>
+      <Controller
+        control={control}
+        name="applicationStartDate"
+        render={() => (
+          <input
+            className={StudyDatePickerStyle}
+            placeholder="YYYY-MM-DD ~ YYYY-MM-DD"
+            value={inputValue}
+            onClick={() => {
+              setOpen(!isOpen);
+            }}
+          />
+        )}
+        rules={{
+          required: true,
+        }}
+      />
+
+      {isOpen && (
+        <div ref={datepickerRef}>
+          <DayPicker
+            mode="range"
+            weekStartsOn={1}
+            selected={{
+              from: formatStringToDate(studyDate.fromValue),
+              to: formatStringToDate(studyDate.toValue),
+            }}
+            style={{
+              position: "absolute",
+              top: "100px",
+              zIndex: 99,
+              backgroundColor: "white",
+            }}
+            onSelect={(triggerDate) => {
+              setStudyDate({
+                fromValue: dateToFormatString(triggerDate?.from),
+                toValue: dateToFormatString(triggerDate?.to),
+              });
+            }}
+          />
+        </div>
+      )}
+    </Flex>
+  );
+};
+
+export default StudyApplyDatePick;
+
+const StudyDatePickerStyle = css({
+  width: "100%",
+  maxWidth: "358px",
+  border: "1px solid",
+  borderRadius: "sm",
+  borderColor: "outline",
+  height: "44px",
+  padding: "8px 12px",
+  caretColor: "transparent",
+  cursor: "pointer",
+  _placeholder: {
+    color: "outline",
+  },
+  _focus: {
+    outline: "none",
+  },
+});

apps/admin/app/studies/create-study/_components/studyBasicInfo/StudyCourseSelect.tsx

@@ -0,0 +1,47 @@
+import { Flex } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
+import { Controller, useFormContext } from "react-hook-form";
+import DropDown from "wowds-ui/DropDown";
+import DropDownOption from "wowds-ui/DropDownOption";
+
+const StudyCourseSelect = () => {
+  const { control } = useFormContext();
+  return (
+    <Flex direction="column" gap="xs">
+      <Controller
+        control={control}
+        name="totalWeek"
+        render={({ field }) => (
+          <DropDown
+            {...field}
+            label="스터디 코스"
+            placeholder="선택하세요"
+            value={field.value ? String(field.value) : ""}
+            onChange={({ selectedValue }) => {
+              field.onChange(Number(selectedValue));
+            }}
+          >
+            <DropDownOption text="1주" value="1" />
+            <DropDownOption text="2주" value="2" />
+            <DropDownOption text="3주" value="3" />
+            <DropDownOption text="4주" value="4" />
+            <DropDownOption text="5주" value="5" />
+            <DropDownOption text="6주" value="6" />
+            <DropDownOption text="7주" value="7" />
+            <DropDownOption text="8주" value="8" />
+            <DropDownOption text="9주" value="9" />
+            <DropDownOption text="10주" value="10" />
+          </DropDown>
+        )}
+        rules={{
+          required: true,
+        }}
+      />
+      <Text color="primary" typo="body3">
+        * 휴강 주차 포함
+      </Text>
+    </Flex>
+  );
+};
+
+export default StudyCourseSelect;

apps/admin/app/studies/create-study/_components/studyBasicInfo/StudyDayOfWeekSelect.tsx

@@ -0,0 +1,36 @@
+import { Controller, useFormContext } from "react-hook-form";
+import DropDown from "wowds-ui/DropDown";
+import DropDownOption from "wowds-ui/DropDownOption";
+
+const StudyDayOfWeekSelect = () => {
+  const { control } = useFormContext();
+  return (
+    <Controller
+      control={control}
+      name="dayOfWeek"
+      render={({ field }) => (
+        <DropDown
+          label="스터디 요일"
+          placeholder="선택하세요"
+          {...field}
+          onChange={({ selectedValue }) => {
+            field.onChange(selectedValue);
+          }}
+        >
+          <DropDownOption text="월요일" value="MONDAY" />
+          <DropDownOption text="화요일" value="TUESDAY" />
+          <DropDownOption text="수요일" value="WEDNESDAY" />
+          <DropDownOption text="목요일" value="THURSDAY" />
+          <DropDownOption text="금요일" value="FRIDAY" />
+          <DropDownOption text="토요일" value="SATURDAY" />
+          <DropDownOption text="일요일" value="SUNDAY" />
+        </DropDown>
+      )}
+      rules={{
+        required: true,
+      }}
+    />
+  );
+};
+
+export default StudyDayOfWeekSelect;

apps/admin/app/studies/create-study/_components/studyBasicInfo/StudyFormatSelect.tsx

@@ -0,0 +1,64 @@
+import { Flex } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
+import { Controller, useFormContext } from "react-hook-form";
+import DropDown from "wowds-ui/DropDown";
+import DropDownOption from "wowds-ui/DropDownOption";
+
+const StudyFormatSelect = () => {
+  const { control } = useFormContext();
+  return (
+    <Controller
+      control={control}
+      name="studyType"
+      render={({ field }) => (
+        <DropDown
+          {...field}
+          label="스터디 형식"
+          placeholder="선택하세요"
+          onChange={({ selectedValue }) => {
+            field.onChange(selectedValue);
+          }}
+        >
+          <DropDownOption
+            value="ASSIGNMENT"
+            text={
+              <Flex alignItems="center" gap="md">
+                <Text typo="body1">오프라인 세션</Text>
+                <Text color="sub" typo="body2">
+                  오프라인으로 진행해요.
+                </Text>
+              </Flex>
+            }
+          />
+          <DropDownOption
+            value="ONLINE"
+            text={
+              <Flex alignItems="center" gap="md">
+                <Text typo="body1">온라인 세션</Text>
+                <Text color="sub" typo="body2">
+                  온라인으로 진행해요.
+                </Text>
+              </Flex>
+            }
+          />
+          <DropDownOption
+            value="OFFLINE"
+            text={
+              <Flex alignItems="center" gap="md">
+                <Text typo="body1">과제 스터디</Text>
+                <Text color="sub" typo="body2">
+                  별도 강의 없이 과제만 진행해요.
+                </Text>
+              </Flex>
+            }
+          />
+        </DropDown>
+      )}
+      rules={{
+        required: true,
+      }}
+    />
+  );
+};
+
+export default StudyFormatSelect;