[K-SC] 소켓 연결 및 whoAmI 이벤트 등록 성공

package.json

@@ -25,6 +25,7 @@
     "@uiw/react-md-editor": "^3.23.6",
     "axios": "^1.4.0",
     "babel-plugin-macros": "^3.1.0",
+    "bufferutil": "^4.0.8",
     "cookies-next": "^4.1.0",
     "cropper": "^4.1.0",
     "dayjs": "^1.11.10",
@@ -49,8 +50,10 @@
     "react-spring": "^9.7.3",
     "react-virtuoso": "^4.6.2",
     "slick-carousel": "^1.8.1",
+    "socket.io-client": "^4.7.3",
     "swr": "^2.2.4",
     "tls": "^0.0.1",
+    "utf-8-validate": "^5.0.10",
     "web-push": "^3.6.6",
     "zustand": "^4.4.1"
   },

src/app/panel/MainPage.tsx

@@ -29,6 +29,9 @@ import { IPagination } from '@/types/IPagination'
 import PwaInstallBanner from './PwaInstallBanner'
 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[]
@@ -52,12 +55,20 @@ export interface IDetailOption {
   tag: string
 }
 
+export const socket = io('ws://back.peer-test.co.kr:8081', {
+  transports: ['socket.io', 'polling'],
+  query: {
+    token: getCookie('accessToken') ? getCookie('accessToken') : '',
+  },
+})
+
 const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
   const [content, setContent] = useState<IPost[]>(initData?.content)
   const [page, setPage] = useState<number>(1)
   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,
@@ -110,6 +121,25 @@ const MainPage = ({ initData }: { initData: IPagination<IPost[]> }) => {
       : defaultGetFetcher,
   )
 
+  useEffect(() => {
+    socket.on('connect', () => {
+      console.log('socket connected')
+    })
+    socket.on('disconnect', () => {
+      console.log('socket disconnected')
+    })
+    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(() => {
     if (!newData || !newData?.content) return
     //page가 1일 경우 == initData가 설정되어있을경우, 무한스크롤시 page는 무조건 2부터 시작함.

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

@@ -1,8 +1,7 @@
 'use client'
 
 import { Button, Card, Stack, Typography } from '@mui/material'
-// import SetupPage from './panel/SetupTeam'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import SetupMember from './panel/SetupMember'
 import ApplicantList from './panel/ApplicantList'
 import useSWR from 'swr'
@@ -11,10 +10,20 @@ import { ITeam, TeamType } from '../../types/types'
 import RedirectionRecruit from './panel/RedirectionRecruit'
 import TeamJobAdd from './panel/TeamJobAdd'
 import SetupInfo from './panel/SetupInfo'
+import useSocket from '@/states/useSocket'
+
+export interface IMyInfo {
+  userId: string
+  teamId: string
+  teamName: string
+  yourRole: string
+}
 
 const TeamsSetupPage = ({ params }: { params: { id: string } }) => {
+  const { socket } = useSocket()
   const axiosWithAuth = useAxiosWithAuth()
   const [showApplicant, setShowApplicant] = useState<boolean>(false)
+  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),
@@ -23,7 +32,22 @@ const TeamsSetupPage = ({ params }: { params: { id: string } }) => {
   const openApplicant = () => setShowApplicant(true)
   const closeApplicant = () => setShowApplicant(false)
 
-  console.log(data)
+  useEffect(() => {
+    if (!socket) return
+    socket.emit(
+      'whoAmI',
+      {
+        teamId: params.id,
+        teamName: data?.team.name,
+      },
+      (data: any) => {
+        console.log('whoAmI receive')
+        console.log(data)
+        setMyInfo(data)
+      },
+    )
+  }, [])
+
   if (isLoading) return <Typography>로딩중</Typography>
 
   return (
@@ -73,6 +97,7 @@ const TeamsSetupPage = ({ params }: { params: { id: string } }) => {
                 team={data.member}
                 teamId={data.team.id}
                 jobs={data.job}
+                myInfo={myInfo}
               />
             </Card>
           ) : (

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

@@ -5,7 +5,6 @@ import {
   Card,
   // FormControl,
   Grid,
-  IconButton,
   Modal,
   // NativeSelect,
   Stack,
@@ -20,12 +19,14 @@ import useMedia from '@/hook/useMedia'
 import useAxiosWithAuth from '@/api/config'
 import OthersProfile from '@/app/panel/OthersProfile'
 import { comfirmModalStyle } from './styles'
+import { IMyInfo } from '../page'
 import CloseButton from '@/components/CloseButton'
 
 interface ISetupMember {
   team: IMember[]
   teamId: string
   jobs: Job[]
+  myInfo?: IMyInfo
 }
 
 // interface ICurrentJobCard {
@@ -51,7 +52,7 @@ interface ISetupMember {
 //   )
 // }
 
-const SetupMember = ({ team, teamId, jobs }: ISetupMember) => {
+const SetupMember = ({ team, teamId, jobs, myInfo }: ISetupMember) => {
   const { isPc } = useMedia()
   const { isOpen, closeModal, openModal } = useModal()
   // const {
@@ -60,7 +61,7 @@ const SetupMember = ({ team, teamId, jobs }: 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()
@@ -75,10 +76,12 @@ const SetupMember = ({ team, teamId, jobs }: 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('리더 권한 변경')
@@ -209,19 +212,18 @@ const SetupMember = ({ team, teamId, jobs }: 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