Merge pull request #66 from DDD-Community/feat/#46

[feat/#46] 가입 시 비밀번호 틀렸을 경우 처리 추가, 가입 후 스크롤 최상단 이동

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<boolean>(false)
+  // Dropdown 외부 클릭 감지 메모이제이션
+  const dropdownRef = useRef<HTMLDivElement>(null)
   const [searchParams, setSearchParams] = useSearchParams()
 
   const [params, setParams] = useState<groupsReq>({
@@ -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<HTMLDivElement>(null)
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent): void => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as HTMLElement)) {

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)
       },
     })
   }

src/layouts/BaseLayout.tsx

@@ -8,7 +8,7 @@ const BaseLayout: React.FC = () => {
         <SideNav />
 
         {/* Main Content */}
-        <main className="relative min-w-[652px] flex-1 overflow-y-auto">
+        <main id="main-content" className="relative min-w-[652px] flex-1 overflow-y-auto">
           <Outlet />
           <div id="modal-root"></div>
         </main>