미니프로젝트

프로젝트

미니프로젝트 - Palette

noh-yj 2021. 4. 25. 19:43

개요

프로젝트 주제: 미니 프로젝트
개발인원 4명 (프론트엔드: 노유진, 조형석 / 백엔드: 금교석, 강태진)
개발 기간: 2021.04.12 ~ 2021.04.22
클라이언트: React, 서버: Node.js 사용
형상관리 툴: git

프로젝트 특징

본 프로젝트는 팀 프로젝트로 게시물을 통한 커뮤니티 기능 및 채팅을 할 수 있는 미니프로젝트를 진행함
UI 부분은 styled-components, antd을 사용
반응형 구현은 테블릿 크기(768) 모바일 크기(375)에서 간단하게 구현함
컴포넌트 구성: 컴포넌트는 중간단위 및 페이지 단위로 구성했으며 디렉토리로 구분함
주요 기능: 로그인, 회원가입, 소셜로그인, 회원정보 수정, 게시물 CRUD, 댓글 CRUD, 유저 검색 필터, 이모티콘기능, 무한스크롤, 1:1 채팅 기능, 채팅 알람 기능(배지, 브라우저 noti) 등 구현
페이지 단위 컴포넌트 구성: 로그인, 회원가입, 메인 페이지, 상세페이지, 유저 게시물 페이지, 채팅 페이지
DB구성
user: {_id, nickname, email, password, comment_myself, profile_img, createdAt, updatedAt}
post: {content, url, imgUrl, user, emoji , comment, createdAt, updatedAt}
comment: {content, user, createdAt, updatedAt}
emoticon: {emoji, user, post, createdAt, updatedAt}
chat: {room, username, msg, createdAt, updatedAt}

상태관리 패키지

react-redux, redux (+ redux-actions, immer 사용)
redux-middleware(redux-thunk)
react-router-dom
클라이언트-서버 통신: axios 사용
웹소켓 통신: socket.io 사용

담당 업무

로그인, 회원가입, 유저 정보 조회 및 변경, 유저 필터 검색, 해당 유저 게시글 조회, 채팅 및 알람 기능, 무한 스크롤 등

후기

이번 프로젝트는 팀 프로젝트로 클라이언트 2명 서버 2명으로 나포함 4명이서 진행을 했다. 최종 프로젝트 전 마지막 프로젝트이기도 하고 지금까지 구현했던 기능들 중 다시 구현하고 싶은 부분과 새로 학습하며 구현하고자 하는 부분을 전부 구현할 수 있어서 아주 만족스러운 프로젝트였다. 예를들어 클론코딩을 하면서 조금 아쉬웠던 회원관련 기능들을 맡아 다시 구현하며 복습을 했고, 추가적으로 중복확인이나 비밀번호 찾기, 소셜 로그인 등 회원관련 부분에서 새로운 기능을 구현하며 더욱 실력을 발전 시켰다. 또한 무한 스크롤도 방식을 숙지하고 있었지만 이번 프로젝트에서는 부분 영역에 스크롤 이벤트를 통해 무한스크롤을 구현해야하는 점이 기존에 알던 방식과 달랐지만 열심히 찾아보고 학습한 결과 무한 스크롤 기능을 재미있게 구현했던 것 같다. 그 밖에도 1대1 채팅 및 알림 배지나 크롬 알람 등 웹소켓에 대해 공부하고 처음으로 기능을 구현했으며 이 부분에서도 많이 학습한 것 같아 만족스러웠다.

2주간 팀 프로젝트를 하면서 너무 재미있게 개발을 했으며 이번에 같이 프로젝트를 진행한 팀원분들과 주기적으로 스터디나 프로젝트를 하면 좋을꺼 같다는 생각도 들었다. 앞으로도 새로운 기능을 구현 하는데 있어서 열심히 학습할 예정이며 기존에 구현한 부분을 어떻게 하면 더 좋은 방법으로 구현할 수 있을지도 계속 생각을 하는 개발자가 되어야 겠다.

github url: github.com/noh-yj/mini-slack

noh-yj/mini-slack

Contribute to noh-yj/mini-slack development by creating an account on GitHub.

github.com

웹 사이트 url: infoking.shop.s3-website.ap-northeast-2.amazonaws.com/

항해99 | 🎨Palette

항해99 | 슬렉과 유사하게 유용한 정보를 서로 공유하며 채팅을 할 수 있는 커뮤니티 사이트 입니다.

infoking.shop.s3-website.ap-northeast-2.amazonaws.com

유튜브 링크

YouTube Link

Project Overview

Login View

🔰로그인 페이지에서 구현한 기능

비밀번호 찾기 [첫 번째 사진]
일반 로그인 (이메일, 닉네임, 비밀번호) [두 번째 사진]
소셜 로그인 (카카오톡 & 구글) [세 번째 사진]

기능별 화면 사진비밀번호 찾기 기능일반 로그인 기능소셜로그인 (구글)

Signup View

📝회원가입 페이지에서 구현한 기능

중북 입력 체크 [첫 번째 사진]
회원가입 기능 [두 번째 사진]

기능별 화면 사진중복 입력 체크 기능회원가입 완료 화면

Main View

🎁메인 페이지에서 구현한 기능

로그아웃 기능 [첫 번째 사진]
유저 정보 조회 및 변경 기능 [두 번째 사진]
유저 목록 조회 및 유저 이름 필터링 조회 → 해당 유저 전체 게시글 조회 기능 [세 번째 사진]
게시글 작성 기능 [네 번째 사진]
게시글 조회 기능 [다섯 번째 사진]
게시글 수정 및 삭제 기능 [여섯 & 일곱 번째 사진]
이모티콘 추가 및 삭제 기능 [여덟 번째 사진]
상세 페이지 이동 기능 [아홉 번째 사진]

기능별 화면 사진빨간색 아이콘 누르면 로그아웃 가능
1. 이름 변경 불가
2. 상태 메세지 변경 가능
3. 일반 로그인시 비밀번호 변경 가능
4. 프로필 사진 업로드 가능 (업로드 안 할 시, default 이미지 있음)
1. 전체 유저 목록 조회 가능
2. 이름을 입력할 시 필터링 기능
3. 이름을 누르면 해당 유저가 쓴 전체 게시글 조회 가능
1. 게시물 업로드 (글만 쓰는 것도 가능 & 글이 없을시 게시 불가)
2. 작성 중에 취소하고 싶으면 영역 밖 요소 클릭하면 최초 작성 화면으로 돌아감.
1. 본인이 쓴 게시물만 수정 및 삭제 가능!
2. 게시글만 수정해도 무방
3. 작성 중에 취소하고 싶으면 영역 밖 요소 클릭하면 최초 수정화면으로 돌아감.
1. 이모티콘 조회하여 추가 가능 (중복된 것 클릭 즉시 삭제)
2. 다른 사용자가 추가한 이모티콘과 현재 사용자가 추가한 이모티콘을 다르게 (파란색 테두리 & 글씨) 보여줌.
3. 다른 사용자가 추가한 이모티콘을 누르면 추가 & 재시도하면 삭제
삭제 성공 시 모달 보여줌 및 차순 게시물 최상단에서 보임
최신 게시 날짜순으로 목록 조회

Post Detail View각 게시물에 있는 댓글 아이콘을 클릭하면 해당 게시물의 상세 페이지로 이동 (댓글 작성 가능)

⌨상세 페이지에서 구현한 기능

댓글 달기 [첫 번째 사진]
댓글 수정 및 삭제 [두 & 세 번째 사진]

기능별 화면 사진onKeyPress 속성을 넣어서 엔터를 치면 댓글 작성 가능
1. 댓글 작성시 유저 프로필, 댓글 내용, 만약 본인의 댓글이라면 수정 & 삭제도 할 수 있게 만듦.
2. 수정시에 기존 댓글 내용을 Textarea 에 그대로 담아서 수정할 수 있게 함.
삭제를 하면 바로바로 화면이 업데이트가 될 수 있게 만듦.

Chat View

사이드바에서 채팅방 진입 가능 → 초기 채팅 화면에서는 No Data 라는 아이콘이 보여짐

👬채팅 페이지에서 구현한 기능

알림 기능 [첫 번째 사진]
배지 기능 [두 번째 사진]
채팅 기능 [세 번째 사진]

기능별 화면 사진채팅 페이지 이외에 다른 화면에 있을 때, 우측 하단에 보낸 사람의 프로필 이미지, 이름, 내용이 든 알림 옮.채팅 페이지 이외에 다른 화면에 있을 때, 왼쪽 사이트바 "채팅하기" 에서 메세지를 보낸 사람 이름 위에 빨간색 배지가 보여짐채팅을 할시에, 해당 유저와 실시간 채팅이 가능하게 구현하였음.