diff --git a/src/components/Crew/CrewList.tsx b/src/components/Crew/CrewList.tsx index 1bdf6fc..57dcfa3 100644 --- a/src/components/Crew/CrewList.tsx +++ b/src/components/Crew/CrewList.tsx @@ -21,6 +21,8 @@ const CrewList = (): ReactElement => { const navigate = useNavigate() const { myGroupData, ranks, myRank, refetchAll } = useMyGroup() const [isDropdownOpen, setIsDropdownOpen] = useState(false) + // Dropdown 외부 클릭 감지 메모이제이션 + const dropdownRef = useRef(null) const [searchParams, setSearchParams] = useSearchParams() const [params, setParams] = useState({ @@ -32,6 +34,14 @@ const CrewList = (): ReactElement => { const { data, isLoading, isError, refetch } = useGetGroups(params) const { openModal } = useModals() + // 가입 혹은 그룹 생성 후 최상단으로 이동 + const scrollToTop = useCallback((): void => { + const el = document.getElementById("main-content") + if (el) { + el.scrollTo({ top: 0, behavior: "smooth" }) + } + }, []) + // openCreateModal 메모이제이션 const openCreateModal = useCallback((): void => { if (myGroupData) { @@ -45,6 +55,7 @@ const CrewList = (): ReactElement => { onSubmit: () => { refetch() refetchAll() + scrollToTop() }, }) } @@ -56,7 +67,9 @@ const CrewList = (): ReactElement => { openModal(modals.joinCrewModal, { id, onSubmit: () => { - console.log("open") + refetch() + refetchAll() + scrollToTop() }, }) }, @@ -67,9 +80,6 @@ const CrewList = (): ReactElement => { const openInviteModal = useCallback((): void => { openModal(modals.inviteCrewModal, { id: Number(myGroupData?.id), - onSubmit: () => { - console.log("open") - }, }) }, [myGroupData, openModal]) @@ -121,9 +131,6 @@ const CrewList = (): ReactElement => { [openJoinCrewModal] ) - // Dropdown 외부 클릭 감지 메모이제이션 - const dropdownRef = useRef(null) - useEffect(() => { const handleClickOutside = (event: MouseEvent): void => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as HTMLElement)) { diff --git a/src/components/Modal/JoinCrewModal.tsx b/src/components/Modal/JoinCrewModal.tsx index ace8520..1873368 100644 --- a/src/components/Modal/JoinCrewModal.tsx +++ b/src/components/Modal/JoinCrewModal.tsx @@ -6,6 +6,7 @@ import { ModalProps } from "@/contexts/ModalsContext" import { useGetGroup, useJoinGroup } from "@/hooks/useGroupMutation" import { groupJoinReq } from "@/api" import useMyGroup from "@/hooks/useMyGroup" +import { AxiosError } from "axios" const JoinCrewModal = (props: ModalProps): React.ReactElement => { const { onClose, onSubmit, id } = props @@ -35,7 +36,9 @@ const JoinCrewModal = (props: ModalProps): React.ReactElement => { if (onSubmit && typeof onSubmit === "function") onSubmit() }, onError: (e): void => { - console.log(e) + const { response } = e as AxiosError + const data = response?.data as { errorCode: string; reason: string } + if (data.errorCode === "IMPOSSIBLE_TO_JOIN_GROUP_ERROR") setIsCodeError(true) }, }) } diff --git a/src/layouts/BaseLayout.tsx b/src/layouts/BaseLayout.tsx index 1940b32..5461f7b 100644 --- a/src/layouts/BaseLayout.tsx +++ b/src/layouts/BaseLayout.tsx @@ -8,7 +8,7 @@ const BaseLayout: React.FC = () => { {/* Main Content */} -
+