YFE - Talk

일상 속 모든 대화를 편리하게 관리할 수 있는 채팅 앱입니다.

📌 배포 링크

📌 팀 소개

진정민 팀장 (FE)	정지오 팀원 (FE)	신현진 팀원 (FE)	진종수 팀원 (FE)	노욱진 팀원 (FE)

📌 Contributor

@JeongMin83 (진정민) : 채팅방
@jiohjung98 (정지오) : 채팅 생성
@xxxjinn (신현진) : 유저 목록 페이지, 유저 프로필 모달, css 수정
@jongsujin (진종수) : 내 채팅, 오픈 채팅 조회
@NohWookJin (노욱진) : 회원가입, 로그인, 마이페이지

📌 기술 스택

Environment

FrontEnd

Deploy

Communication

📌 주요 화면 및 기능

회원가입

• 회원가입 진행시 각 입력폼마다 신규 유저가 넣고 있는 정보가 허용되는 값인지 검증하며 실시간으로 비교합니다.
• 올바른 값들로 입력폼을 모두 채웠을 경우(사진은 선택) 회원가입 버튼이 활성화됩니다.

로그인

• 아이디나 비밀번호를 확인해 틀린 값이거나 없는 값일시 유저에게 메시지를 보냅니다.
• 회원가입 페이지와 마찬가지로 입력폼을 모두 채웠을 경우 로그인 버튼이 활성화됩니다.
• 로그인시 JWT 토큰은 모두 쿠키에 보관하며, 로컬 스토리지에 저장한 로그인 시간을 최상단 컴포넌트에서 실시간 날짜와 비교해 만료 날짜와 가까워지면 토큰을 재발급합니다.

회원정보 수정

• 회원 정보 수정을 통해 유저의 프로필과 이름을 변경할 수 있습니다.

유저 목록 페이지

• 회원 가입한 모든 유저들의 이름과 실시간 접속상태를 보여줍니다.
• 유저 검색이 가능하며, 해당하는 유저가 존재하지 않을 때에는 '해당 사용자가 존재하지 않습니다.'라는 문구가 나옵니다.

• 목록에서 유저를 선택하면 해당 유저의 프로필 모달창이 나오고, 모달창에서 유저와의 1:1 채팅방으로 이동하는 것이 가능합니다.

채팅생성

• 유저프로필 모달에서의 1:1 채팅 - 두 유저 간 1:1 채팅방이 있는지 확인하고 있으면 기존의 채팅방으로 이동, 없으면 새 채팅을 생성합니다.

• 채팅페이지에서의 채팅
  • 유저 한 명 클릭 시 1:1 채팅 - 두 유저 간 1:1 채팅방이 있는지 확인하고 있으면 기존의 채팅방으로 이동, 없으면 새 채팅을 생성합니다.
  • 유저 여러 명 클릭 시 단체채팅 - 프라이빗한 채팅방과 오픈 채팅을 선택할 수 있고 채팅방 이름을 직접 입력해 단체 채팅을 선택합니다.
  • 프라이빗 채팅방의 경우, 내 채팅페이지에서만 채팅방이 나타납니다.
  • 오픈 채팅방의 경우, 내 채팅페이지와 모든채팅페이지에서 채팅방이 나타납니다.

하단 바

• 하단바를 통해 각각 유저 목록/내 채팅/오픈 채팅/정보 수정 페이지로 이동할 수 있습니다.

내 채팅 / 오픈채팅 조회

• 내가 속한 채팅만 보여주는 채팅 페이지와 현재 있는 Private 하지 않은 오픈 채팅을 볼 수 있습니다.
• 내가 속해 있지 않은 채팅방을 입장할 땐 모달창으로 채팅에 참여 유무를 묻고 채팅에 참여할 수 있습니다. 이미 들어가 있는 방은 바로 접속 됩니다.
• 내가 보낸 메시지 순으로 채팅방이 위로 정렬됩니다. 어느 채팅방에서 채팅을 친 후면 채팅 순서대로 채팅방이 정렬됩니다.
• 채팅방에서 볼 수 있는 최근 메세지 길이가 20자를 넘어가면 ...로 처리 되어 보여집니다.
• 1대1 채팅방일 땐 상대방의 이름과 사진이 채팅방 이름과 이미지로 보여지며 Private 및 그룹 채팅 유무에 따라 각기 다른 이미지로 채팅방을 구별할 수 있습니다
• 또한 현재 있는 채팅방을 검색할 수 있으며 검색 결과에 맞는 것이 없다면 채팅방이 없음을 알려줍니다.
• 내 채팅에 채팅 목록이 없을 땐 채팅방이 없음을 알려줍니다.

채팅방

• 참여자들과 실시간으로 채팅을 주고 받을 수 있습니다.
• 해당 채팅방에 속하지 않는 사용자는 메인 페이지로 돌아갑니다.
• 동일한 유저의 연속적 채팅 시 유저의 프로필을 한 번만 보여줍니다.
• 실시간으로 들어오고 나가는 참여자들을 공지해줍니다.

📌 유저 플로우

📌 파일 구조

CHAT/
├── src/
│   ├── api/
│   │    └── socketIo.ts
│   │    
│   ├── app/
│   │    ├── head.tsx
│   │    ├── layout.tsx
│   │    ├── page.tsx 
│   │    ├── allchats/
│   │    ├── chatting/
|   |    ├── createAccount/
|   |    ├── login/
|   |    ├── mychats/
|   |    ├── mypage/
│   │    └── userSelect/
│   │    
│   ├── components/
│   │    ├── Move.tsx
│   │    ├── Navigation.tsx
│   │    ├── Chat/
│   │    ├── chats/
│   │    ├── chatting/ 
│   │    ├── Login/
│   │    ├── Mypage/
|   |    ├── Register/
|   |    ├── Users/
|   |    ├── mychats/
|   |    ├── mypage/
│   │    └── userSelect/
│   │                
│   ├── hooks/
│   │    └── AuthCheck.ts
│   │    └── createAccount/     
│   │    
│   ├── lib/           
│   │    ├── api.ts
│   │    ├── cookie.ts
│   │    └── registry.tsx
│   ├── store/        
│   │    └── atoms.ts
│   │
│   ├── style/        
│   │    └── theme.ts
│
├── public/
│   ├── assets/
│   ├── fonts/
│   └── Logo.png
│  
├── node_modules/
├── .babelrc
├── .gitignore
├── next-env.d.ts
├── next.config.js
├── package.json
├── tsconfig.json
├── README.md
└── ...

🍋 소켓 기반 채팅앱

주어진 API와 소켓을 분석해 어떤 프로젝트를 진행/완성할 것인지 팀 단위로 자유롭게 결정하고 만들어보세요. 과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!

[필수 구현사항]

• useState 또는 useReducer를 활용한 상태 관리 구현
• Sass, styled-component, emotion, Chakra UI, tailwind CSS 등을 활용한 스타일 구현
• react 상태를 통한 CRUD 구현
• 상태에 따라 달라지는 스타일 구현
• custom hook을 통한 비동기 처리 구현
• 유저인증 시스템(로그인, 회원가입) 구현
• jwt등의 유저 인증 시스템 (로그인, 회원가입 기능)
• 소켓을 이용한 채팅 구현

[선택 구현사항]

• Next.js를 활용한 서버 사이드 렌더링 구현
• typescript를 활용한 앱 구현
• storybook을 활용한 디자인 시스템 구현
• jest를 활용한 단위 테스트 구현

📌 개발 기간 : 2주 23.11.06 ~ 23.11.16