[Fix] 자잘한 UI 수정 및 개설 강의 상태 NONE에서 OPEN으로 변경, QA 반영 (#119)

* fix: 멘토 검색 시 학번까지 나타나도록 반영 * fix: 스터디 소개 페이지 링크 간격 좁히기 * fix: 스터디 상세 정보 하단 마진 제거 * fix: 휴강 주차일 경우 커리큘럼에 나타나도록 수정 * fix: 공지 작성 텍스트필드 크기 재조정 * fix: OPEN으로 상태 변경 * fix: 체크했을 때 값 OPEN으로 변경 * fix: 사용하지 않는 zod 파일 제거 * fix: textarea 크기 재조정 * fix: 가로 gap 숫자로 변경 * fix: onChagne 함수 임의로 추가
GDSC-Hongik · Sep 4, 2024 · cdc1612 · cdc1612
1 parent dc84741
commit cdc1612
Show file tree

Hide file tree

Showing 19 changed files with 7,250 additions and 8,719 deletions.
diff --git a/apps/admin/app/studies/[studyId]/@modal/(.)announcement-modify/page.tsx b/apps/admin/app/studies/[studyId]/@modal/(.)announcement-modify/page.tsx
@@ -6,8 +6,9 @@ import { Modal, Space, Text } from "@wow-class/ui";
 import { useModalRoute } from "@wow-class/ui/hooks";
 import { studyApi } from "apis/study/studyApi";
 import { tags } from "constants/tags";
+import useResizeTextarea from "hooks/useResizeTextarea";
 import { useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { StudyAnnouncementType } from "types/entities/study";
 import { revalidateTagByName } from "utils/revalidateTagByName";
 import Button from "wowds-ui/Button";
@@ -28,11 +29,16 @@ const AnnouncementModifyModal = ({
   );
   const [studyAnnouncement, setStudyAnnouncement] =
     useState<StudyAnnouncementType>({ title: "", link: "" });
+  const titleTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const linkTextareaRef = useRef<HTMLTextAreaElement>(null);
+  useResizeTextarea([titleTextareaRef, linkTextareaRef], studyAnnouncement);
 
   useEffect(() => {
     setStudyAnnouncement(prefillData);
   }, [prefillData]);
+
   const { onClose } = useModalRoute();
+
   const handleClickModifyButton = async () => {
     const result = await studyApi.modifyStudyAnnouncement(
       studyAnnouncementId,
@@ -54,6 +60,7 @@ const AnnouncementModifyModal = ({
             <styled.label className={labelStyle}>공지 제목</styled.label>
             <styled.textarea
               placeholder="입력해주세요"
+              ref={titleTextareaRef}
               rows={1}
               value={studyAnnouncement.title}
               className={textareaStyle({
@@ -71,6 +78,7 @@ const AnnouncementModifyModal = ({
             <styled.label className={labelStyle}>공지 링크</styled.label>
             <styled.textarea
               placeholder="http://example.com"
+              ref={linkTextareaRef}
               rows={1}
               value={studyAnnouncement.link}
               className={textareaStyle({
@@ -115,10 +123,9 @@ const textareaStyle = cva({
     paddingX: "sm",
     paddingY: "xs",
     textStyle: "body1",
-    height: "2.625rem",
-    maxHeight: "7.5rem",
-    overflowY: "hidden",
+    maxHeight: "6rem",
     resize: "none",
+    overflowY: "auto",
     backgroundColor: "backgroundNormal",
     _placeholder: {
       color: "outline",
@@ -127,19 +134,6 @@ const textareaStyle = cva({
       outline: "none",
       borderColor: "primary",
     },
-    _scrollbar: {
-      width: "2px",
-    },
-    _scrollbarThumb: {
-      width: "2px",
-      height: "65px",
-      borderRadius: "sm",
-      backgroundColor: "outline",
-    },
-    _scrollbarTrack: {
-      marginTop: "2px",
-      marginBottom: "2px",
-    },
   },
   variants: {
     type: {

diff --git a/apps/admin/app/studies/[studyId]/_components/announcement/CreateStudyAnnouncement.tsx b/apps/admin/app/studies/[studyId]/_components/announcement/CreateStudyAnnouncement.tsx
@@ -5,7 +5,8 @@ import { Flex, styled } from "@styled-system/jsx";
 import { Text } from "@wow-class/ui";
 import { studyApi } from "apis/study/studyApi";
 import { tags } from "constants/tags";
-import { useState } from "react";
+import useResizeTextarea from "hooks/useResizeTextarea";
+import { useRef, useState } from "react";
 import type { StudyAnnouncementType } from "types/entities/study";
 import { revalidateTagByName } from "utils/revalidateTagByName";
 import Button from "wowds-ui/Button";
@@ -17,6 +18,10 @@ const CreateStudyAnnouncement = ({ studyId }: { studyId: string }) => {
       link: "",
     });
 
+  const titleTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const linkTextareaRef = useRef<HTMLTextAreaElement>(null);
+  useResizeTextarea([titleTextareaRef, linkTextareaRef], studyAnnouncement);
+
   const handlePublishAnnouncement = async (studyId: string) => {
     const { success } = await studyApi.publishStudyAnnouncement(
       parseInt(studyId, 10),
@@ -41,6 +46,7 @@ const CreateStudyAnnouncement = ({ studyId }: { studyId: string }) => {
             <styled.label className={labelStyle}>공지 제목</styled.label>
             <styled.textarea
               placeholder="입력해주세요"
+              ref={titleTextareaRef}
               rows={1}
               value={studyAnnouncement.title}
               className={textareaStyle({
@@ -58,6 +64,7 @@ const CreateStudyAnnouncement = ({ studyId }: { studyId: string }) => {
             <styled.label className={labelStyle}>공지 링크</styled.label>
             <styled.textarea
               placeholder="http://example.com"
+              ref={linkTextareaRef}
               rows={1}
               value={studyAnnouncement.link}
               className={textareaStyle({
@@ -117,10 +124,9 @@ const textareaStyle = cva({
     paddingX: "sm",
     paddingY: "xs",
     textStyle: "body1",
-    height: "2.625rem",
-    maxHeight: "7.5rem",
-    overflowY: "hidden",
+    maxHeight: "6rem",
     resize: "none",
+    overflowY: "auto",
     backgroundColor: "backgroundNormal",
     _placeholder: {
       color: "outline",
@@ -129,19 +135,6 @@ const textareaStyle = cva({
       outline: "none",
       borderColor: "primary",
     },
-    _scrollbar: {
-      width: "2px",
-    },
-    _scrollbarThumb: {
-      width: "2px",
-      height: "65px",
-      borderRadius: "sm",
-      backgroundColor: "outline",
-    },
-    _scrollbarTrack: {
-      marginTop: "2px",
-      marginBottom: "2px",
-    },
   },
   variants: {
     type: {

diff --git a/apps/admin/app/studies/[studyId]/_components/curriculum/CurriculumListItem.tsx b/apps/admin/app/studies/[studyId]/_components/curriculum/CurriculumListItem.tsx
@@ -1,4 +1,4 @@
-import { css } from "@styled-system/css";
+import { cva } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import { Table, Text } from "@wow-class/ui";
 import { padWithZero, parseISODate } from "@wow-class/utils";
@@ -13,7 +13,14 @@ const CurriculumListItem = ({
 }: {
   curriculum: CurriculumApiResponseDto;
 }) => {
-  const { description = "", period, week, title, difficulty } = curriculum;
+  const {
+    description = "",
+    period,
+    week,
+    title,
+    difficulty,
+    curriculumStatus,
+  } = curriculum;
   const { startDate, endDate } = period;
   const { month: startMonth, day: startDay } = parseISODate(startDate);
   const { month: endMonth, day: endDay } = parseISODate(endDate);
@@ -23,23 +30,36 @@ const CurriculumListItem = ({
 
   return (
     <Table>
-      <Table.Left style={TableLeftStyle}>
-        <Flex alignItems="center" gap="xxs" minWidth="50px">
-          {thisWeekAssignment && <div className={ThisWeekBarStyle} />}
-          <Text typo="body1">{week}주차</Text>
-        </Flex>
-        <Flex direction="column" gap="xxs">
-          <Flex alignItems="center" gap="xs">
-            <Text typo="h3">{title || "-"}</Text>
-            {difficulty && (
-              <Tag color={DifficultyMap[difficulty].color} variant="outline">
-                {DifficultyMap[difficulty].text}
-              </Tag>
-            )}
+      <Table.Left>
+        <Flex alignItems="center" gap="28px">
+          <Flex alignItems="center" gap="xxs">
+            <div
+              className={ThisWeekBarStyle({
+                type: thisWeekAssignment ? "thisWeek" : "notThisWeek",
+              })}
+            />
+            <Flex direction="column" minWidth={52}>
+              <Text typo="body1">{week}주차</Text>
+              {curriculumStatus === "CANCELLED" && (
+                <Text color="sub" typo="body2">
+                  휴강 주차
+                </Text>
+              )}
+            </Flex>
+          </Flex>
+          <Flex direction="column" gap="xxs">
+            <Flex alignItems="center" gap="xs">
+              <Text typo="h3">{title || "-"}</Text>
+              {difficulty && (
+                <Tag color={DifficultyMap[difficulty].color} variant="outline">
+                  {DifficultyMap[difficulty].text}
+                </Tag>
+              )}
+            </Flex>
+            <Text color="sub" style={CurriculumDescriptionStyle} typo="body2">
+              {description || "스터디 상세 설명을 작성해주세요."}
+            </Text>
           </Flex>
-          <Text color="sub" style={CurriculumDescriptionStyle} typo="body2">
-            {description || "스터디 상세 설명을 작성해주세요."}
-          </Text>
         </Flex>
       </Table.Left>
       <Table.Right>
@@ -51,16 +71,21 @@ const CurriculumListItem = ({
 
 export default CurriculumListItem;
 
-const TableLeftStyle = {
-  display: "flex",
-  alignItems: "center",
-  gap: "47px",
-};
-
-const ThisWeekBarStyle = css({
-  width: "4px",
-  height: "18px",
-  backgroundColor: "primary",
+const ThisWeekBarStyle = cva({
+  base: {
+    width: "4px",
+    height: "18px",
+  },
+  variants: {
+    type: {
+      thisWeek: {
+        backgroundColor: "primary",
+      },
+      notThisWeek: {
+        backgroundColor: "transparent",
+      },
+    },
+  },
 });
 
 const DifficultyMap: Record<

diff --git a/apps/admin/app/studies/[studyId]/page.tsx b/apps/admin/app/studies/[studyId]/page.tsx
@@ -44,7 +44,6 @@ const StudyPage = ({ params }: { params: { studyId: string } }) => {
       <StudyAnnouncement studyId={studyId} />
       <Divider style={MinHeightFullDividerStyle} />
       <CurriculumList studyId={studyId} />
-      <Space height={64} />
     </Flex>
   );
 };

diff --git a/apps/admin/app/studies/_components/StudyListItem.tsx b/apps/admin/app/studies/_components/StudyListItem.tsx
@@ -42,7 +42,7 @@ const StudyListItem = async ({ study }: { study: StudyListApiResponseDto }) => {
         <Text typo="body1">{mentorName} 멘토</Text>
         <Link href={notionLink || ""} style={LinkStyle} target="_blank">
           <WowLinkIcon height={24} stroke="sub" width={24} />
-          <TextButton text="스터디 소개 페이지" />
+          <TextButton style={{ padding: 0 }} text="스터디 소개 페이지" />
         </Link>
         <Flex alignItems="center" gap="sm">
           {adminStatus && (
@@ -80,7 +80,7 @@ const LinkStyle = {
   display: "flex",
   alignItems: "center",
   color: "sub",
-  gap: "4px",
+  gap: "8px",
 };
 
 const TableLeftStyle = {

diff --git a/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyApplyDatePick.tsx b/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyApplyDatePick.tsx
@@ -59,7 +59,7 @@ const StudyApplyDatePick = () => {
       : []),
   ];
   return (
-    <Flex direction="column" gap="xs" height="128px" position="relative">
+    <Flex direction="column" gap="xs" position="relative" width={358}>
       <Text color="sub" typo="label2">
         스터디 신청 기간
       </Text>
@@ -73,6 +73,9 @@ const StudyApplyDatePick = () => {
             className={StudyDatePickerStyle({
               type: inputValue ? "selected" : "unSelected",
             })}
+            onChange={() => {
+              console.log("");
+            }}
             onClick={() => {
               setIsOpen(!isOpen);
             }}
@@ -95,10 +98,15 @@ const StudyApplyDatePick = () => {
             }}
             style={{
               position: "absolute",
-              top: "100px",
+              top: "80px",
               zIndex: 99,
               backgroundColor: "white",
             }}
+            styles={{
+              month_grid: {
+                marginBottom: "100px",
+              },
+            }}
             onSelect={(triggerDate) => {
               handleStudyDateSelect(triggerDate);
             }}

diff --git a/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyCourseSelect.tsx b/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyCourseSelect.tsx
@@ -7,7 +7,7 @@ import DropDownOption from "wowds-ui/DropDownOption";
 const StudyCourseSelect = () => {
   const { control } = useFormContext();
   return (
-    <Flex direction="column" gap="xs">
+    <Flex direction="column" gap="xs" width={358}>
       <Controller
         control={control}
         name="totalWeek"

diff --git a/...admin/app/studies/create-study/_components/StudyBasicInformation/StudyDayOfWeekSelect.tsx b/...admin/app/studies/create-study/_components/StudyBasicInformation/StudyDayOfWeekSelect.tsx
@@ -14,6 +14,7 @@ const StudyDayOfWeekSelect = () => {
           {...field}
           label="스터디 요일"
           placeholder="선택하세요"
+          style={{ width: "358px" }}
           onChange={({ selectedValue }) => {
             field.onChange(selectedValue);
           }}

diff --git a/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyFormatSelect.tsx b/apps/admin/app/studies/create-study/_components/StudyBasicInformation/StudyFormatSelect.tsx
@@ -15,6 +15,7 @@ const StudyFormatSelect = () => {
           {...field}
           label="스터디 형식"
           placeholder="선택하세요"
+          style={{ width: "358px" }}
           onChange={({ selectedValue }) => {
             field.onChange(selectedValue);
           }}