[Fix] 스터디 상세, 스터디 생성 관련 QA 이슈 해결 (#106)

* feat: 수정 아이콘 추가 * fix: 난이도 옆에 실제 값 반영되도록 수정 * fix: Header arrow 방향 수정 * fix: 개설된 스터디 -> 담당 스터디 * fix: 스터디 정보 수정 이후 커리큘럼 업데이트되도록 수정 * fix: 스터디 상세 정보 수정 * fix: 필요없는 콘솔로그 제거 * fix: 스터디 생성일 validation 처리 * fix: 스터디 시작-종료 시간 validation 추가 * fix: url 문제 해결 * fix: edit 아이콘 위치 변경 * fix: 휴강 여부도 수정할 수 있도록 변경
GDSC-Hongik · Sep 2, 2024 · 0e6fa43 · 0e6fa43
1 parent dca715a
commit 0e6fa43
Show file tree

Hide file tree

Showing 18 changed files with 309 additions and 69 deletions.
diff --git a/apps/admin/app/studies/[studyId]/_components/header/Header.tsx b/apps/admin/app/studies/[studyId]/_components/header/Header.tsx
@@ -101,7 +101,7 @@ const Header = ({
                 className={downArrowIconStyle}
                 height={20}
                 stroke="textBlack"
-                style={{ rotate: showIntro ? "0deg" : "180deg" }}
+                style={{ rotate: showIntro ? "180deg" : "0deg" }}
                 width={20}
               />
             )}

diff --git a/apps/admin/app/studies/[studyId]/page.tsx b/apps/admin/app/studies/[studyId]/page.tsx
@@ -1,6 +1,10 @@
+import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Space } from "@wow-class/ui";
 import { studyApi } from "apis/study/studyApi";
+import { routerPath } from "constants/router/routerPath";
+import Link from "next/link";
+import { Edit } from "wowds-icons";
 import Divider from "wowds-ui/Divider";
 
 import StudyAnnouncement from "./_components/announcement/StudyAnnouncement";
@@ -24,7 +28,15 @@ const StudyPage = ({ params }: { params: { studyId: string } }) => {
   const { studyId } = params;
   return (
     <Flex direction="column" gap="64px">
-      <Header studyId={studyId} />
+      <div className={HeaderWrapper}>
+        <Header studyId={studyId} />
+        <Link
+          href={`${routerPath.studyDetailInfo.href}/${studyId}`}
+          style={{ ...EditIconStyle, position: "absolute" }}
+        >
+          <Edit height={24} stroke="black" width={24} />
+        </Link>
+      </div>
       <AttendanceList studyId={studyId} />
       <Divider style={MinHeightFullDividerStyle} />
       <AssignmentList studyId={studyId} />
@@ -42,3 +54,15 @@ export default StudyPage;
 const MinHeightFullDividerStyle = {
   minHeight: "1.2px",
 };
+
+const EditIconStyle = {
+  position: "absolute",
+  right: "0px",
+  top: "0px",
+  cursor: "pointer",
+};
+
+const HeaderWrapper = css({
+  position: "relative",
+  height: "fit-content",
+});
diff --git a/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyApplyDatePick.tsx b/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyApplyDatePick.tsx
@@ -16,9 +16,16 @@ const StudyApplyDatePick = () => {
     toValue: "",
   });
   const datepickerRef = useRef(null);
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const { control, setValue } = useFormContext();
+  const { control, setValue, watch } = useFormContext();
   const [inputValue, setInputValue] = useState("");
+  const studyStartDate = formatStringToDate(watch("startDate") || "");
+  const studyStartDateYearLater = new Date(studyStartDate);
+  studyStartDateYearLater.setFullYear(studyStartDate.getFullYear() + 1);
 
   useClickOutside(datepickerRef, () => {
     setIsOpen(false);
@@ -37,6 +44,20 @@ const StudyApplyDatePick = () => {
     setValue("applicationEndDate", endDateString, { shouldValidate: true });
   };
 
+  const disableDateList = [
+    {
+      from: new Date(0),
+      to: yesterday,
+    },
+    ...(watch("startDate")
+      ? [
+          {
+            from: studyStartDate,
+            to: studyStartDateYearLater,
+          },
+        ]
+      : []),
+  ];
   return (
     <Flex direction="column" gap="xs" height="128px" position="relative">
       <Text color="sub" typo="label2">
@@ -65,6 +86,7 @@ const StudyApplyDatePick = () => {
       {isOpen && (
         <div ref={datepickerRef}>
           <DayPicker
+            disabled={disableDateList}
             mode="range"
             weekStartsOn={1}
             selected={{

diff --git a/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyStartDatePick.tsx b/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyStartDatePick.tsx
@@ -19,11 +19,18 @@ const StudyStartDatePick = () => {
     toValue: "",
   });
   const datepickerRef = useRef(null);
+  const today = new Date();
+  const yesterday = new Date(today);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const { control, setValue, watch } = useFormContext();
   const [inputValue, setInputValue] = useState("");
 
   const week = watch("totalWeek");
+  const studyApplyEndDate = formatStringToDate(
+    watch("applicationEndDate") || ""
+  );
+  const studyApplyDateYearLater = new Date(studyApplyEndDate);
+  studyApplyDateYearLater.setFullYear(studyApplyEndDate.getFullYear() + 1);
 
   useClickOutside(datepickerRef, () => {
     setIsOpen(false);
@@ -54,6 +61,21 @@ const StudyStartDatePick = () => {
     }
   }, [handleStudyDateSelect, studyDate.fromValue, studyDate.toValue, week]);
 
+  const disableDateList = [
+    {
+      from: new Date(0),
+      to: yesterday,
+    },
+    ...(watch("applicationEndDate")
+      ? [
+          {
+            from: new Date(0),
+            to: studyApplyEndDate,
+          },
+        ]
+      : []),
+  ];
+
   return (
     <Flex direction="column" position="relative">
       <Text color="sub" style={{ marginBottom: "8px" }} typo="label2">
@@ -90,6 +112,7 @@ const StudyStartDatePick = () => {
       {isOpen && (
         <div ref={datepickerRef}>
           <DayPicker
+            disabled={disableDateList}
             mode="range"
             weekStartsOn={1}
             selected={{

diff --git a/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyTime.tsx b/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyTime.tsx
@@ -24,6 +24,10 @@ const StudyTime = () => {
       const endTime = value[1]?.toString().split(":");
 
       if (startTime && endTime) {
+        if (startTime > endTime) {
+          window.alert("스터디 종료 시간은 스터디 시작 시간 이후여야 합니다!");
+          return;
+        }
         setValue(
           "studyStartTime",
           {
@@ -58,6 +62,7 @@ const StudyTime = () => {
         name="studyStartTime"
         render={() => (
           <TimeRangePicker
+            disableClock={true}
             disabled={isAssignmentStudy}
             value={value}
             onChange={handleSetTime}

diff --git a/apps/admin/app/studies/create-study/_components/StudyMentorSelect.tsx b/apps/admin/app/studies/create-study/_components/StudyMentorSelect.tsx
@@ -24,7 +24,7 @@ const StudyMentorSelect = () => {
               field.onChange(Number(selectedValue));
             }}
           >
-            <DropDownOption text="김유진" value="6" />
+            <DropDownOption text="김유진" value="3" />
             <DropDownOption text="홍서현" value="5" />
             <DropDownOption text="이현영" value="15" />
           </DropDown>

diff --git a/...dies/detail-info/[studyId]/@modal/(.)detail-Info-check/_hooks/useSubmitStudyDetailInfo.ts b/...dies/detail-info/[studyId]/@modal/(.)detail-Info-check/_hooks/useSubmitStudyDetailInfo.ts
@@ -1,8 +1,10 @@
 import { createStudyApi } from "apis/study/createStudyApi";
 import { routerPath } from "constants/router/routerPath";
+import { tags } from "constants/tags";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import type { CreateStudyDetailInfoApiRequestDto } from "types/dtos/studyDetailInfo";
+import { revalidateTagByName } from "utils/revalidateTagByName";
 
 const useSubmitStudyDetailInfo = (
   studyId: number,
@@ -18,6 +20,7 @@ const useSubmitStudyDetailInfo = (
     );
     if (data.success) {
       setIsSuccess(true);
+      revalidateTagByName(tags.curriculums);
       const timerId = setTimeout(() => {
         router.push(`${routerPath.root.href}/${studyId}`);
       }, 500);

diff --git a/apps/admin/app/studies/detail-info/[studyId]/@modal/(.)detail-Info-check/page.tsx b/apps/admin/app/studies/detail-info/[studyId]/@modal/(.)detail-Info-check/page.tsx
@@ -15,8 +15,7 @@ import useSubmitStudyDetailInfo from "./_hooks/useSubmitStudyDetailInfo";
 const StudyDetailInfoCheckModal = () => {
   const [studyName, setStudyName] = useState("");
   const { onClose } = useModalRoute();
-  const { parseToNumberSearchParams, parseQueryString } =
-    useParseSearchParams();
+  const { parseQueryString } = useParseSearchParams();
   const searchParams = useSearchParams();
   const { studyId, ...formData } = parseQueryString<
     CreateStudyDetailInfoApiRequestDto & { studyId: string }

diff --git a/apps/admin/app/studies/detail-info/[studyId]/_components/CreateStudyDetailInfo.tsx b/apps/admin/app/studies/detail-info/[studyId]/_components/CreateStudyDetailInfo.tsx
@@ -1,34 +1,42 @@
 "use client";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Flex } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
-import { studyApi } from "apis/study/studyApi";
 import { routerPath } from "constants/router/routerPath";
 import { useRouter } from "next/navigation";
 import type { CSSProperties, MouseEvent } from "react";
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import type { CreateStudyDetailInfoApiRequestDto } from "types/dtos/studyDetailInfo";
 import createQueryString from "utils/createQueryString";
+import { studyDetailInfoSchema } from "utils/validate/studyDetailInfo";
 import Button from "wowds-ui/Button";
 
 import Header from "@/studies/[studyId]/_components/header/Header";
 
+import usePrefillStudyDetailInfo from "../_hooks/usePrefillStudyDetailInfo";
 import StudyCurriculum from "./StudyCurriculum";
 import StudyDescription from "./StudyDescription";
 
 const CreateStudyDetailInfo = ({ params }: { params: { studyId: string } }) => {
   const { studyId } = params;
   const router = useRouter();
-  const methods = useForm<CreateStudyDetailInfoApiRequestDto>();
+  const prefillStudyInfo = usePrefillStudyDetailInfo(parseInt(studyId, 10));
+  const methods = useForm<CreateStudyDetailInfoApiRequestDto>({
+    resolver: zodResolver(studyDetailInfoSchema),
+  });
+
+  useEffect(() => {
+    if (prefillStudyInfo) methods.reset(prefillStudyInfo);
+  }, [methods, prefillStudyInfo]);
 
   const handleSubmit = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     const formData = methods.getValues();
     const route = createQueryString(
-      `${studyId}/${routerPath["detail-info-check"].href}?studyId=${studyId}`,
+      `${studyId}${routerPath["detail-info-check"].href}?studyId=${studyId}`,
       formData
     );
-
     router.push(route);
   };
   return (