Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up

Nextron.js / TypeScript

NotificationsYou must be signed in to change notification settings

Joeunji0119/chat

Repository files navigation



no-imgno-img



🏃‍ 실행 방법


🖥 mac 환경에서 제작하였습니다$ npm i$ npm run devnpm i 이후 npm run dev 실행


🖥 Test Idid : test@gmail.compw : asdf1234

⚒️ Stack ⚒️






✔️ 구현 목록 & 구현 영상

  • 회원가입, 로그인 구현
  • 1:1 채팅 구현
  • 단체 채팅 구현
  • 서버리스 서비스 구현



☝️ 로직


Context API 전역 상태 관리

<UserCurrentContext.Providervalue={{        currentUser,        setCurrentUser,        chatListData,        setChatListData,        userList,        setUserList,        chatList,        teamChatListData,        setTeamChatListData,        teamChatList,}}><ClickedUserContext.Providervalue={{            clickedUserUid,            setClickedUserUid,            chatUid,}}>{children}</ClickedUserContext.Provider></UserCurrentContext.Provider>

props drilling 을 막고 props를 자유롭게 사용하기 위해context Api를 사용하였습니다.UserCurrentContext 에 로그인 되어 있는 유저의 정보와 채팅 리스트를 모았고ClickedUserContext 에 채팅 정보를 불러오기 위해 필요한 uid 상태를 모아 관심사에 맞게 분리하도록 구현하였습니다.



Ant-design Sider 사용


// .../sider/menu/ChatList.tsxconstchatListMenu=[getMenu('개인 채팅','userChats',<TeamOutlined/>,convertListData(chatList)),];return(<Menumode='inline'css={MenuLayout}items={chatListMenu}onClick={uid=>handleSelectChat(uid)}/>);// .../constants/menuDataConvert.ts  ...exportfunctionconvertListData(data?:userListProps[]){   constlist=data?.map(({ displayName, uid})=>{return{label:displayName,key:uid};});returnlist;}

유저 목록과 채팅 목록을 불러오는 Sider 컴포넌트에ant-design 를 사용하여 구현하였습니다. 서버에서 받아오는 데이터 형식을convertListData() 함수로 Sider에 알맞은 형식으로 만들어 사용했습니다. 총 받아오는 목록이 유저 목록, 개인 채팅 목록, 단체 채팅 목록으로 총 3개의 메뉴였기 때문에 한 메뉴씩 컴포넌트를 분리해 Sider 폴더에서 바로 찾을 수 있게끔 나누었습니다.



firebase 사용


chats : 채팅방 고유 uid 로 연결, 메세지를 담고 있습니다.
teamChats : 유저 uid로 연결, 해당 유저의 단체 채팅방을 담고 있습니다.
userChats: 유저 uid로 연결, 해당 유저의 개인 채팅방을 담고 있습니다.
user : 해당 유저의 정보 (이름, 이메일, uid)를 담고 있습니다.



단체 채팅방 구현

constteamUid=v1();awaitsetDoc(doc(db,'chats',teamUid),{message:'',});for(leti=0;i<checkedUserPlueMe.length;i++){constcheckedUserExceptMe=checkedUserPlueMe.filter(el=>el!==checkedUserPlueMe[i]);for(letj=0;j<checkedUserExceptMe.length;j++){awaitupdateDoc(doc(db,'teamChats',checkedUserPlueMe[i]),{[teamUid+'.userInfo']:{uid:teamUid,displayName:teamChatName,},[teamUid+'.date']:serverTimestamp(),});}}

단체 방을 만들 때 단체 이름, 체크된 유저uid 배열과uuid 라이브러리로 팀 채팅방의 고유한uid를 만들어 데이터로 만들어 사용하였습니다.팀 채팅방은 초대된 각각의 유저에게 단체방 데이터를 넣어야했는데 단체 채팅방 uid 뿐만 아니라 채팅에 참가한 유저들을 중 본인을 제외한 유저 데이터를 넣어야했습니다. 이를filter 를 사용해 해당 유저의uid를 제외한 배열을 다시 만들어 각각 단체 채팅방 정보에 유저 정보를 넣었습니다.




폴더 구조

📦renderer ┣ 📂.next ┃  ┣ 📂api ┃ ┣ 📜getChatInfo.ts ┃ ┗ 📜getUserInfo.ts ┃ ┣ 📂components ┃ ┣ 📂Chat ┃ ┃ ┣ 📂chattingUserInfo ┃ ┃ ┃ ┗ 📜ChattingUserInfo.tsx ┃ ┃ ┣ 📂messages ┃ ┃ ┃ ┣ 📜Message.tsx ┃ ┃ ┃ ┗ 📜MessageInput.tsx ┃ ┃ ┗ 📜ChatRoom.tsx ┃ ┃ ┃ ┣ 📂auth ┃ ┃ ┣ 📂authForm ┃ ┃ ┃ ┣ 📜SummitButton.tsx ┃ ┃ ┃ ┣ 📜UserEmail.tsx ┃ ┃ ┃ ┣ 📜UserName.tsx ┃ ┃ ┃ ┣ 📜UserPassword.tsx ┃ ┃ ┃ ┗ 📜index.ts ┃ ┃ ┣ 📜SwithAuthModeButton.tsx ┃ ┃ ┗ 📜index.ts ┃ ┃ ┃ ┣ 📂common ┃ ┃ ┗ 📜Nav.tsx ┃ ┃ ┃ ┣ 📂contexts ┃ ┃ ┗ 📜ContextWrapper.tsx ┃ ┃ ┃ ┣ 📂sider ┃ ┃ ┣ 📂menu ┃ ┃ ┃ ┣ 📜ChatList.tsx ┃ ┃ ┃ ┣ 📜TeamChatList.tsx ┃ ┃ ┃ ┗ 📜UserList.tsx ┃ ┃ ┃  ┃ ┃ ┣ 📜Sider.tsx ┃ ┃ ┣ 📜TeamChatButton.tsx ┃ ┃ ┗ 📜TeamChatModal.tsx ┃ ┃ ┃ ┣ 📜HomeGuideContainer.tsx ┃ ┗ 📜LayoutContainer.tsx ┃ ┣ 📂constants ┃ ┣ 📜chatDataConvert.ts ┃ ┣ 📜menuDataConvert.ts ┃ ┗ 📜types.ts ┃ ┣ 📂pages ┃ ┣ 📜_app.tsx ┃ ┣ 📜_document.tsx ┃ ┣ 📜auth.tsx ┃ ┗ 📜home.tsx ┃ ┣ 📂shared ┃ ┗ 📜variableStyle.ts ┃ ┣ 📂styles ┃ ┣ 📜globalStyle.ts ┃ ┗ 📜theme.ts ┃ ┗ 📜firebase.tsx

Releases

No releases published

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp