|
|
|
|
|
|
|
진정민 팀장 (FE) |
정지오 팀원 (FE) |
신현진 팀원 (FE) |
진종수 팀원 (FE) |
노욱진 팀원 (FE) |
@JeongMin83 (진정민) : 채팅방
@jiohjung98 (정지오) : 채팅 생성
@xxxjinn (신현진) : 유저 목록 페이지, 유저 프로필 모달, css 수정
@jongsujin (진종수) : 내 채팅, 오픈 채팅 조회
@NohWookJin (노욱진) : 회원가입, 로그인, 마이페이지
- 회원가입 진행시 각 입력폼마다 신규 유저가 넣고 있는 정보가 허용되는 값인지 검증하며 실시간으로 비교합니다.
- 올바른 값들로 입력폼을 모두 채웠을 경우(사진은 선택) 회원가입 버튼이 활성화됩니다.
- 아이디나 비밀번호를 확인해 틀린 값이거나 없는 값일시 유저에게 메시지를 보냅니다.
- 회원가입 페이지와 마찬가지로 입력폼을 모두 채웠을 경우 로그인 버튼이 활성화됩니다.
- 로그인시 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를 활용한 단위 테스트 구현