console-lo9 / messenger Goto Github PK
View Code? Open in Web Editor NEW메신저 과제 구현 내용을 담은 레포지토리입니다
messenger's People
Contributors
Stargazers
messenger's Issues
엔터 키로 전송 가능
로그인
- 간단한 로그인 파이어베이스로 구현
- (2순위: localStorage로 구현)
리덕스를 통한 상태 관리
- 메시지 데이터 모델 생성
컨텐츠 입력 시 전송 버튼 즉시 활성화
대화 목록
- 과거부터 최신 순으로 정렬
- 메시지를 보낼 때 대화 목록은 항상 가장 아래로 스크롤
- 미리 생성된 데이터로 3명이 5건의 메시지 주고받는 내용 출력
메시지
- 내가 전송한 메시지의 경우 이름 옆에 * 문자 출력
- 보낸 날짜의 경우 yyyy-mm-dd hh:MM:ss 포멧으로 출력
- 사용자가 보낸 시간대로 출력
- 답장을 클릭하면 "사용자 이름\n" + "메시지 내용\n" + "(회신)\n" 문자가 입력창에 자동으로 삽입
- 삭제 버튼을 클릭하면 "*** 메시지를 삭제하시겠습니까?" 메시지 출력되고 응답시 삭제
- ***는 메시지 내용 중 최대 10자 출력, 나머지는 ... 처리
- hover 시 배경 스타일 변경 & 답장, 삭제 버튼 표시
멀티 라인 입력 가능
레이아웃
- 재사용 가능 Input Component
- 재사용 가능 Button Component (답장, 삭제)
shift + Enter 했을 때 상단 코멘츠 width 안늘어나는 오류
컨텐츠 미입력 시 전송 불가
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.