[Feature] 스터디 조회 v2 api로 변경, 삭제 기능 추가 #183
Conversation
chocoboy08
requested review from
eugene028,
hamo-o,
SeieunYoo and
soulchicken
as code owners
chocoboy08
changed the title
| const DeleteStudyCheckModal = ({ params }: { params: { studyId: number } }) => { | ||
| const { parseQueryString } = useParseSearchParams(); | ||
| const searchParams = useSearchParams(); | ||
| const router = useRouter(); |
| <DropDown | ||
| defaultValue={querySemester ? querySemester : "all"} | ||
| style={{ width: "6.5rem" }} | ||
| onChange={({ selectedValue }) => { |
There was a problem hiding this comment.
p4;
handler 함수로 변경하는것도 좋아보입니다
| useEffect(() => { | ||
| if (semester && semesterList && !semesterList?.includes(semester)) | ||
| router.replace("/studies"); | ||
| }, [semester, studyList]); |
There was a problem hiding this comment.
p2;
useEffect의 디펜던시 리스트에 semesterList 가 있어야 할 것 같아요
| const handleClickDeleteButton = async () => { | ||
| const result = await studyApi.deleteStudy(params.studyId); | ||
| if (result.success) { | ||
| onClose(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
p3;
모달에 delay 를 주고 닫는 플로우가 더 자연스러울 거 같아요! 보통 1000ms 정도 주면 좋을 거 같아요
setTimeout(() => {
onClose();
}, MODAL_DELAY_TIME);
| const result = await studyApi.deleteStudy(params.studyId); | ||
| if (result.success) { | ||
| onClose(); |
There was a problem hiding this comment.
p3;
delete 이후에 스터디 목록 업데이트를 위해 revalidsteTag 로 다시 api fetch 를 하면 좋을 거 같아요.
await revalidateTagByName(tags.studyList);
await revalidateTagByName(tags.myStudyList);
| (semester === null || | ||
| semester === | ||
| `${studyItem.study.semester.academicYear}-${studyItem.study.semester.semesterType === "FIRST" ? 1 : 2}`) && ( |
There was a problem hiding this comment.
p4;
semester 값에 따른 렌더링 조건이 추가된 이유가 있을까요?
There was a problem hiding this comment.
드롭다운에서 선택된 학기와 일치하는 스터디만 필터링 하기 위해서 추가했습니다!
| <Link | ||
| href={`${routerPath["delete-study-check"].href}/${studyId}?${querySemester ? `semester=${querySemester}&` : ""}title=${title}&academicYear=${semester.academicYear}&semesterType=${semester.semesterType}`} | ||
| > | ||
| <Button size="sm" variant="outline"> | ||
| 스터디 삭제 | ||
| </Button> | ||
| </Link> |
There was a problem hiding this comment.
p4;
Button 컴포넌트에 asProp 을 통해 커스텀 하고자 하는 태그를 전달할 수 있어요!
<Button asProp = {Link} href={link} />
| useEffect(() => { | ||
| const fetchStudyListData = async () => { | ||
| const admin = await isAdmin(); | ||
| const studyList = admin | ||
| ? await studyApi.getStudyList() | ||
| : await studyApi.getMyStudyList(); | ||
|
|
||
| setStudyList(studyList); | ||
| setAdminStatus(admin); | ||
| }; | ||
|
|
||
| fetchStudyListData(); | ||
| }, [pathName]); |
There was a problem hiding this comment.
p4;
여기 pathName 을 디펜던시로 넣은 이유가 있을까요?
There was a problem hiding this comment.
스터디 삭제 후 모달이 닫힐 때 스터디 목록 업데이트와 리렌더링을 위해 넣었습니다..!
apps/admin/types/dtos/studyList.ts
Outdated
| startTime: { | ||
| hour: number; | ||
| minute: number; | ||
| second: number; | ||
| nano: number; | ||
| }; |
There was a problem hiding this comment.
p3;
startTime 과 endTime 은 TImeType 을 활용하는 게 좋을 거 같아요!
🎉 변경 사항
스터디 조회 v2 api를 적용하고, 진행학기 별 필터링 기능을 추가했습니다.
스터디 삭제 기능을 추가했습니다.
🚩 관련 이슈
DropDown 컴포넌트에서 aria-hidden 속성 관련 에러가 발생합니다.