feat: complete whoami

src/app/panel/MainPage.tsx

@@ -31,6 +31,7 @@ import PushAlertBanner from './PushAlertBanner'
 import MainBanner from '@/app/panel/main-page/MainBanner'
 import io from 'socket.io-client'
 import { getCookie } from 'cookies-next'
+import useSocket from '@/states/useSocket'
 
 export interface BeforeInstallPromptEvent extends Event {
   readonly platforms: string[]
@@ -59,7 +60,6 @@ export const socket = io('ws://back.peer-test.co.kr:8081', {
   query: {
     token: getCookie('accessToken') ? getCookie('accessToken') : '',
   },
-  reconnection: true,
 })
 
 const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
@@ -68,6 +68,7 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
   const [type, setType] = useState<ProjectType | undefined>(undefined) //'STUDY'
   const [openOption, setOpenOption] = useState<boolean>(false)
   const [sort, setSort] = useState<ProjectSort | undefined>(undefined) //'latest'
+  const { setSocket } = useSocket()
   /* 추후 디자인 추가되면 schedule 추가하기 */
   const [detailOption, setDetailOption] = useState<IDetailOption>({
     isInit: true,
@@ -130,6 +131,13 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
     socket.on('connect_error', (err) => {
       console.log(err)
     })
+    socket.on('reconnect', (attemptNumber) => {
+      console.log('reconnect', attemptNumber)
+    })
+    socket.on('reconnect_attempt', (attemptNumber) => {
+      console.log('reconnect_attempt', attemptNumber)
+    })
+    setSocket(socket)
   }, [])
 
   useEffect(() => {

src/app/teams/[id]/setting/page.tsx

@@ -10,7 +10,7 @@ import { ITeam, TeamType } from '../../types/types'
 import RedirectionRecruit from './panel/RedirectionRecruit'
 import TeamJobAdd from './panel/TeamJobAdd'
 import SetupInfo from './panel/SetupInfo'
-import { socket } from '@/app/panel/MainPage'
+import useSocket from '@/states/useSocket'
 
 export interface IMyInfo {
   userId: string
@@ -20,9 +20,10 @@ export interface IMyInfo {
 }
 
 const TeamsSetupPage = ({ params }: { params: { id: string } }) => {
+  const { socket } = useSocket()
   const axiosWithAuth = useAxiosWithAuth()
   const [showApplicant, setShowApplicant] = useState<boolean>(false)
-  const [myInfo, setMyInfo] = useState<IMyInfo | null>(null)
+  const [myInfo, setMyInfo] = useState<IMyInfo>()
   const { data, isLoading } = useSWR<ITeam>(
     `${process.env.NEXT_PUBLIC_API_URL}/api/v1/team/setting/${params.id}`,
     (url: string) => axiosWithAuth(url).then((res) => res.data),
@@ -32,6 +33,7 @@ const TeamsSetupPage = ({ params }: { params: { id: string } }) => {
   const closeApplicant = () => setShowApplicant(false)
 
   useEffect(() => {
+    if (!socket) return
     socket.emit(
       'whoAmI',
       {

src/app/teams/[id]/setting/panel/SetupMember.tsx

@@ -5,7 +5,6 @@ import {
   Card,
   // FormControl,
   Grid,
-  IconButton,
   Modal,
   // NativeSelect,
   Stack,
@@ -27,7 +26,7 @@ interface ISetupMember {
   team: IMember[]
   teamId: string
   jobs: Job[]
-  myInfo: IMyInfo
+  myInfo?: IMyInfo
 }
 
 // interface ICurrentJobCard {
@@ -62,7 +61,7 @@ const SetupMember = ({ team, teamId, jobs, myInfo }: ISetupMember) => {
   //   openModal: openChangeModal,
   // } = useModal()
   const [members, setMembers] = useState<IMember[]>(team)
-  const [member, setMember] = useState<IMember | null>(null)
+  const [member, setMember] = useState<IMember>()
   const [job, setJob] = useState<Job[]>(jobs)
   // const [selectedJobs, setSelectedJobs] = useState<Job[]>([])
   const axiosWithAuth = useAxiosWithAuth()
@@ -77,10 +76,12 @@ const SetupMember = ({ team, teamId, jobs, myInfo }: ISetupMember) => {
   useEffect(() => {
     setJob(jobs)
     console.log(job)
+    console.log(myInfo)
+    console.log(member?.id)
     // if (selectedJobs.length > 0) {
     //   changeJob()
     // }
-  }, [setJob, jobs])
+  }, [setJob, jobs, myInfo])
 
   const handleGrant = (member: IMember) => {
     console.log('리더 권한 변경')
@@ -211,19 +212,18 @@ const SetupMember = ({ team, teamId, jobs, myInfo }: ISetupMember) => {
                 borderRadius={'0.5rem'}
               >
                 {/** TODO: 내가 누구인지를 알게 서버에서 받아야 함**/}
-                <IconButton
-                  size="small"
-                  sx={{
-                    position: 'absolute',
-                    top: 0,
-                    right: 0,
-                    padding: 0,
-                    minWidth: 0.2,
-                  }}
-                  onClick={() => handleOpenDelete(member)}
-                >
-                  <CloseButton />
-                </IconButton>
+                {myInfo && member.id.toString() !== myInfo.userId && (
+                  <CloseButton
+                    action={() => handleOpenDelete(member)}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      right: 0,
+                      padding: 0,
+                      minWidth: 0.2,
+                    }}
+                  />
+                )}
                 <OthersProfile name={member.name} userId={member.id}>
                   <Avatar sx={{ margin: 'auto' }}>A</Avatar>
                 </OthersProfile>

src/states/useSocket.tsx

@@ -0,0 +1,16 @@
+import { Socket } from 'socket.io-client'
+import { create } from 'zustand'
+
+interface ISocket {
+  socket: Socket | null
+  setSocket: (socket: Socket) => void
+  resetSocket: () => void
+}
+
+const useSocket = create<ISocket>((set) => ({
+  socket: null,
+  setSocket: (socket: Socket) => set({ socket: socket }),
+  resetSocket: () => set({ socket: null }),
+}))
+
+export default useSocket