- 개요 : 원티드 프론트엔드 프리온보딩 2기 2주차 4번째 기업 과제
- 주제 : 답장, 삭제, 로그인, 로그아웃, 메세지 기능을 갖춘 메신저 제작
- 기간 : 2022.02.10 ~ 2022.02.12
- 대화목록은 상단에, 입력창은 하단에 위치
- 대화목록 스크롤 기능
- 입력창
- 왼쪽에는 입력란, 오른쪽에는 보내기 버튼
- 메세지
- 프로필 이미지는 원형으로 왼쪽에 위치
- 오른쪽 컨텐츠 영역 상단에는 이름, 보낸 날짜, 하단에는 메세지 출력
- 메세지 오른쪽 하단에 삭제, 답장 버튼
- 엔터키로 전송 가능 / 입력시 전송버튼 활성화
- 컨텐츠를 입력하지 않으면 전송할 수 없는 기능
- 입력란은 멀티라인 / 출력도 그대로 출력
- 메세지 정렬은 과거 -> 최신순
- 메세지를 보낼 때 대화목록이 가장 아래로 스크롤
- 대화 목록은 미리 생성된 데이터로 3명이 5건의 메세지를 주고 받는 내용 출력
- 내가 전송한 메세지에는 이름 옆에 * 문자 출력
- 보낸 날짜는 yyyy-mm-dd hh:MM:ss 포맷으로 출력
- 답장 클릭 시 "사용자 이름\n" + "메시지 내용\n" + "(회신)\n" 문자가 입력창에 자동으로 삽입
- 삭제 버튼 클릭 시 "** 메시지를 삭제하시겠습니까?" 라는 메시지가 출력되며 응답시 삭제 (**은 메시지 내용중 최대 10자 까지 보여주며 뒤에는 ... 처리)
src
├── Assets
├── Components
│ ├── Common
│ │ ├── Button
│ │ └── Modal
│ ├── MessengerHeader
│ ├── MessageInput
│ │ ├── MessageTextArea
│ │ └── index.tsx
│ ├── MessageList
│ │ ├── Message
│ │ └── index.tsx
│ └── MessengerLogin
├── Pages
├── Store
│ ├── Actions
│ │ ├── message
│ │ ├── modal
│ │ └── types.ts
│ ├── Reducers
│ │ ├── index.ts
│ │ ├── message
│ │ └── modals
│ └── index.ts
├── Utils
│ ├── Constant
│ ├── Interface
│ └── Styles
│ ├── _mixins.scss
│ ├── _reset.scss
│ └── _variables.scss
├── App.scss
├── App.tsx
└── index.tsx| 이름 | 담당 역할 |
|---|---|
| 🥇 공동 작업 | 리덕스 action, reducer, store 구성 시 협업 |
| 황상섭 | 버튼, 모달, 컨테이너, 로그인 구현, 배포 |
| 정인권 | 메세지 리스트 구현, 리덕스 초기 세팅 |
| 현다솜 | 피그마 제작, 로그아웃, 헤더, 글 작성, 삭제 기능 구현 |
| 커밋명 | 내용 |
|---|---|
| ✨ feat | 파일, 폴더, 새로운 기능 추가 |
| 🐛 fix | 버그 수정 |
| 💄 style | 코드 스타일 변경 |
| 📝 docs | 문서 생성, 추가, 수정(README.md) |
| ♻️ refactor | 코드 리팩토링 |
| 🚑️ chore | 코드 수정 (JSON 데이터 포맷 변경 / scss 변경 등) |
자세한 내용은 여기서 확인해보실 수 있습니다!
- Git Clone
git clone https://github.com/PreOnBoarding-Team17/Week2_Messenger.git
- 프로젝트 패키지 설치
yarn install
- 프로젝트 실행
yarn start