패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 토이프로젝트2 12조
제작기간 : 2023.11.06 ~ 2023.11.16 제작인원 : 4명
🌐 배포링크 : https://langchat-464b7.web.app/
🔒 테스트 계정 - ID: test0000 PW: 123123
| 팀장 - 백상원 | 팀원 - 김성겸 | 팀원 - 지홍규 | 팀원 - 한은지 |
|---|---|---|---|
 |
 |
 |
 |
| @Yamyam-code | @skyeome | @JiHongkyu | @lilviolie |
|
|
|
|
-
useState또는useReducer를 활용한 상태 관리 구현 -
Sass,styled-component,emotion,Chakra UI,tailwind CSS등을 활용한 스타일 구현 -
react상태를 통한 CRUD 구현 - 상태에 따라 달라지는 스타일 구현
-
custom hook을 통한 비동기 처리 구현 - 유저인증 시스템(로그인, 회원가입) 구현
-
jwt등의 유저 인증 시스템 (로그인, 회원가입 기능) - 소켓을 이용한 채팅 구현
-
Next.js를 활용한 서버 사이드 렌더링 구현 -
typescript를 활용한 앱 구현 -
storybook을 활용한 디자인 시스템 구현 -
jest를 활용한 단위 테스트 구현
한은지 : 첫 화면, 프로필 페이지
지홍규 : 메시지 페이지
메시지 보내기 보달
- 모든 유저 리스트 표시
- 자음, 모음으로 유저 이름 검색
- 유저 선택 시 보내기 버튼 활성화
- 메시지 보내면 기존 채팅방 유무 확인 후 채팅방 생성 or 채팅방 이동
채팅리스트
- 로그인 유저가 포함된 채팅 리스트 표시
- 상대방의 프로필 사진과 이름 표시
- 해당 채팅방의 마지막 메시지와 경과 시간 표시
- 로딩 시 채팅 리스트 Skeleton UI 적용
모든 채팅 가져오기
- 채팅방 클릭 시 해당 채팅방의 대화 내용 모두 가져오기
1대1채팅
- 로그인한 유저와 대화상대방의 메시지 레이아웃 구분
- 같은 시간에 보낸 메시지는 마지막 메시지에 한 번만 표시
- 웹 소켓 연결 및 실시간 통신 로직 구현
로그아웃
- 로그아웃 시
localStorage값과accessTokenState값 초기화 후 로그인 페이지로 이동
김성겸 : 인증관련, 오픈채팅 페이지
백상원 : 게임 페이지
- 각 유저의 최고 점수를 기반으로 랭킹을 나열
- 기본적으로 유저의 등수를 보여주며 호버 시 그 유저의 점수를 표기
- 게임 플레이 중 최고 점수 갱신를 갱신하면 게임 종료 시 랭킹 리렌더링
- 네이버 지식백과 API 및 정규식을 활용하여 단어 유효성 검사
- 배포서버 API CROS 이슈 AWS API GATEWAY 사용하여 해결(해당 방법이 api 딜레이가 가장 적고 https 프로토콜을 사용)
- useState와 FRAMER 활용 남은 시간 게이지바로 표시
- 정답 시 현재 점수를 +1 하며 현재 점수가 최고 점수를 넘어갈 경우 최고 점수 = 현재 점수
- 효과음 사용
📦 LangChat
├─ node_modules/
├─ public/
│ ├─ index.html
│ ├─ favicon.ico
│ └─ manifest.json
├─ src/
│ ├─ components
│ │ ├─ common/
│ │ ├─ todo.../
│ │ └─ …/
│ ├─ assets/
│ ├─ common/
│ ├─ pages/
│ ├─ utils/
│ ├─ hooks/
│ ├─ styles/
│ ├─ types/
│ ├─ reducer/
│ ├─ App.js (라우팅까지)
│ └─ index.js
├─ package.json
├─ package-lock.json
└─ README.md