추석에 마음을 전해요_[송편지] 프로젝트

HyeKong·2023년 10월 20일
1

Sessac X Coding on A_Team_Project 송편지

node.js + express를 이용한 온라인 롤링페이퍼 사이트

=> 추석을 맞이해 모든 사람들이 가볍게 편지를 남길 수 있는 온라인 롤링페이퍼 시스템

💻 프로젝트 설명

웹 배포 주소 : http://54.180.103.123:8000/

  • 어떤 프로젝트인가?

    • 익명의 사용자나 회원들이 각자의 편지함에 아이콘을 선택 후 롤링페이퍼를 작성하여 자신의 마음을 전달

  • 왜 프로젝트를 만들었는가?

    • 현대 사회에서 편지는 점점 무거운 느낌으로 바뀌고 있음. 이에 온라인으로 가볍게 자신의 마음으로 전달하고자 프로젝트 선정

  • 프로젝트로 기대하는 점?

    • 많은 사람들이 부담스럽지 않게 자신의 마음을 가볍게 전달할 수 있는 것을 기대
    • 송편지로 사람들이 조금이라도 기쁨을 가졌으면 하는 기대

⏲개발기간

  • 2023년 9월 6일 ~ 2023년 9월 22일

👨‍👩‍👧‍👦멤버구성

  • 이동규(LOBSTER10000) :
    • 회원가입&로그인&마이페이지&편지쓰기&공지사항 ui 디자인 , 메인페이지 검색 기능, 공지사항 crud 기능
  • 강혜빈(ch0rckbean) 프론트엔드 :
    • 메인페이지 & 편지함 ui 디자인, 메인페이지&편지함 페이징 기능, 주제 기획, 회의록 작성, 툴팁&설명 기능
  • 홍민영(HongMinYeong) 백엔드 :
    • 회원가입&로그인&정보찾기 기능, 좋아요 기능, 마이페이지 프로필 변경 &회원정보 수정 기능, 친구신청 취소 기능, 편지글 삭제 기능
  • 최태영(chitty12) 백엔드 :
    • 편지글 crud 기능, 알림 기능, 친구신청/목록 기능, 시퀄라이즈 model 구조 생성, 익명 편지글 정보값 추출 기능

⚙개발환경

  • Javascript : Javascript
  • IDE : Visual Studio Code 1.81
  • Framework : Node.js (20.5.0)
  • Database : Mysql (workbench 8.0)
  • ORM : Sequelize 6.32.1
  • Server : Naver Cloud Platform

⭕ 라이브러리

  • Bcrypt : 5.1.1
  • Cookie-parser : 1.4.6
  • Ejs : 3.1.9
  • Express : 4.18.2
  • Express-session : 1.17.3
  • Multer : 1.4.4
  • Nodemailer : 6.9.5
  • Sequelize : 6.32.1
  • Bootstrap : 5.3.2
  • Axios

📙 개발 준비

📺 화면 구성

메인페이지 로그인&회원가입
편지함 조회 및 페이징 마이페이지
편지함(친구신청 및 목록 확인) 편지쓰기
편지 확인 공지 사항 글쓰기
404에러페이지

📌주요기능 (모든 기능 전반에 AXIOS기능 사용)

🟩 로그인/회원가입/정보찾기

* (회원가입) 회원가입에 필요한 모든 폼에 유효성 검증
* (회원가입) Bcrypt를 이용한 비밀번호 암호화 작업
* (로그인) 로그인에 실패할 시 어느 부분에서 실패했는지 유효성 검증
* (로그인) 아이디 저장을 누를 시에 쿠키를 통해 1주일간 해당 아이디 저장 & 로그인시 세션 기능
* (정보 찾기) Node Mailer를 통한 자신의 회원 정보 찾기 기능

🟩 메인페이지 검색/페이징

* (검색) 메인페이지에서 편지함 검색 기능을 axios를 통해서 구현
* (페이징) 모든 회원의 정보값을 7개의 별을 기준으로 axios로 페이징 구현

🟩 편지쓰기/편지내용

* (쓰기) 원하는 아이콘을 선택한 후 편지를 쓸 수 있게 만듦
* (쓰기) 비회원도 쓸 수 있게끔하고, 지울 수 있는 비밀번호를 따로 받게 설정
* (내용) 회원이 입력한 정보 값들을 토대로 내용을 페이징 기능으로 확인 가능

🟩 친구추가/삭제

* (추가) 추가를 누를 경우 상대방에게 해당 내용이 친구신청 목록에 뜨게 적용
* (추가) 해당 친구신청 목록을 수락/거절 할 수 있으며, 수락할 경우 친구목록에 등록   
* (삭제) 친구목록에서 친구 삭제시 삭제 적용되며, 당사자의 친구 목록에서도 자동 삭제

🟩 좋아요 기능

* 각각의 편지함에서 해당하는 글에 좋아요 기능 추가

🟩 알림 기능

* 자신의 편지함에서 좋아요, 편지 쓰기, 친구 신청이 올 경우 알림이 가도록 구현
* 해당 알림을 클릭할 경우 알림의 숫자가 줄어들게 구현
* 알람 삭제를 클릭할 경우 모든 알림 삭제하도록 기능 구현

🟩 마이페이지/공지사항

* (마이페이지) Multer 기능을 이용한 프로필 사진 변경 기능
* (공지사항) Admin 계정으로만 Write,Update,Delete가 가능한 공지사항

📃 참고

포트폴리오

노션

profile
HyeKong
이전 포스트

[리액트에 three.js를 적용하자!] (2) 애니메이션 추가

다음 포스트

[리액트에 three.js를 적용하자!] (3) gltf 모델 로드

0개의 댓글