rachel490/simple_messenger_app

📗  원티드 프리온보딩 4번째 과제 - 메신저 구현

🖥  배포 주소

👉 배포링크 바로가기

👩  팀원소개 및 담당업무

이가윤	신혜리	한재성	이선재
Redux/모달창 세팅, 메시지 삭제 확인 모달창 구현	메시지 입력창 구현	채팅창 구현	Redux/모달창 세팅, 유저네임 입력 모달창 구현
Github	Github	Github	Github

🎮  사용한 기술 스택

• typescript
• styled-component
• redux-toolkit

🎮  구현 기능

• 유저 네임 입력 기능
  • 접속 시 대화창에서 사용할 유저 네임 입력 모달창 표시
  • 입력한 유저네임으로 대화창에서 메시지 전송
• 메시지 입력기능
  • 메시지 입력 시 전송버튼 즉시 활성화
  • 엔터키로 전송
  • 멀티라인으로 메시지 입력 가능
  • 개행시 input창 크기 증가 및 채팅창 크기 축소, 일정 height 도달시 scroll 추가
• 대화창 메시지 표시 기능
  • 대화창 접속 시 메시지 시간 순으로 정렬
  • 메시지 전송 시 대화 목록은 항상 가장 아래로 스크롤
  • 내가 전송한 메시지 별도 표시: 이름 옆에 * 문자 출력
  • 보낸 날짜 및 시간 표시
• 답장 기능
  • 답장 버튼 클릭 시 답장할 메시지의 사용자 이름, 메시지 내용을 입력창 상단에 표시
  • 답장의 답장의 경우 답장이 원본 메세지로 변경
• 삭제 기능
  • 삭제 버튼 클릭시 삭제할 메시지와 함께 '메시지를 삭제 하시겠습니까?' 출력, 응답시 삭제
  • 삭제할 메시지 내용은 최대 10자 이후 ...처리

유저네임 입력/ 대화창 메시지 표시	메시지 입력
메시지 답장	메시지 삭제

🧗‍  프로젝트 과정 소개

진행 방식

• 개별 업무 분담

  • [한재성] 채팅창: 보낸 메시지/답장 메시지 말풍선
  • [신혜리] 메시지 입력창
  • [이선재, 이가윤] Redux 초기세팅, 공통 모달창 세팅
  • [이선재] 유저네임 입력 모달창
  • [이가윤] 메시지 삭제 확인 모달창

• 공통 진행

  • 초기세팅, 메시지 데이터 모델 정의
  • 초기세팅된 Redux의 reducer, action 정의 및 각자 맡은 영역에 적용
  • Vsc Liveshare를 활용해 페어프로그래밍 진행

협업 툴

• Figma: UI 구현 👉 피그마 링크
• Discord, Vsc Liveshare: 실시간 소통 및 페어프로그래밍
• Swit: 칸반보드를 활용한 업무 진행상황 공유

Swit 협업툴	피그마 디자인

Git 커밋 컨벤션

Option: 내용(상세 내용)

• Feat - 새로운 기능 추가
• Fix - 버그 수정
• Docs - 제품 코드 수정 없음
• Style - 코드 형식, 정렬, 주석 등의 변경
• Refactor - 코드 리팩토링
• Test - 테스트 코드 추가
• Chore - 환경설정, 빌드 업무, 패키지 매니저 설정등..

Rebase를 사용한 커밋내역 관리

• 한 브랜치에서 PR 제출 시 커밋 내역은 한 개로 관리
• 한 개의 커밋 메시지는 작업 내용을 포괄하도록 작성

📘 기타 사항

디렉토리 구조

├── App.tsx
├── components
│   ├── ChatList
│   │   ├── ChatBubble
│   │   │   ├── index.tsx
│   │   │   └── styled.ts
│   │   ├── ChatBubbleContent
│   │   ├── ChatReplyBubble   
│   │   ├── index.tsx
│   │   └── styled.ts
│   ├── ChatRoom
│   ├── InputMessage 
│   ├── InputName  
│   ├── RemoveMessageModal
│   └── shared
│       ├── Modal
│       ├── ModalPortal
│       └── index.tsx
├── index.tsx
├── react-app-env.d.ts
├── store
│   ├── messenger.ts
│   ├── store.ts
│   └── types.ts
├── styles
│   ├── defaultTheme.ts
│   ├── globalStyle.ts
│   └── styled.d.ts
└── utils
    ├── constants.ts
    ├── mockData.ts
    └── utils.ts

메시지 데이터 모델 정의

⚙  프로젝트 설치 및 시작

프로젝트 클론

$ git clone

패키지 설치

$ npm install

서버 실행

$ npm start