MOMO Project

1. MoMo 란

IamMOMOproject

• 본격 '일상 공감' 프로젝트입니다.
• 모든 글은 '모모'라는 닉네임을 사용하며 가벼운 일상에서 부터 진솔한 감정까지 다양한 이야기로 서로의 삶을 공유하는 서비스입니다.
• 무슨 글을 써야 할지 모를때는 다양한 예시 질문을 보고 선택해서 글을 시작해 보세요 :)

프로젝트 개발기간 : 2022-04-16 ~ 2022-04-27

배포 링크

https://iammomoproject.netlify.app/

프로젝트 코드 개선 (Back-End)

https://github.com/Jupiter-J/RE_MoMoProject.git

2. Project Member

• Planner : Team Iam ground
• Backend : 김남주, 신동금
• Frontend : 강수영, 조윤식

3. Project Architecture

---

Back-end(Java, SpringBoot)

Tech Stack

• SpringBoot
• AWS, RDS (MySql)
• Spring Security (JWT)
• JPA
• PostMan
• Swagger

Function Implementation

• 로그인, 회원가입
• 게시글 주제 (Topic) CRUD
• 게시글 답변 (Post) CRUD
• 내가 작성한 게시글 조회

Swagger

demo(시연화면)

회원가입 & 로그인

질문

• 유저가 바로 이용가능 하도록 서버 실행시 sql로 질문 리스트 데이터 삽입

질문에 대한 답변 작성

전체 질문 조회

나의 페이지

내가 작성한 답변 수정

내가 작성한 답변 조회 & 질문 생성

• native 쿼리를 사용하여 작성한 답변 조회 가능

4. 개발일정

2022-04-18 개발상황

• API 명세서 제작
• 기능 구현 정리

2022-04-19 개발상황

• AWS 서버 구축 Nginx 설치
• Topic CRUD API 생성
• 프론트님과 API 구동 테스트

2022-04-20 개발상황

• CORS 에러 해결 상세내용
• Topic Entity CreateAt 추가 (프론트님 요구사항)
• Topic CRUD 서버 업데이트

2022-04-21 개발상황

• User CRUD API 생성
• Post CRUD API 생성
• Swagger 적용
• POST CRUD 수정 + DB변경 (프론트님 요구사항)

2022-04-22 개발상황

• CORS 에러 해결 2 (시큐리티)
• 로그인 API 테스트

2022-04-23 개발상황

• 나의 게시글 확인 기능 API 생성 상세내용

2022-04-24 개발상황

• swagger 명세서 업데이트
• 데이터베이스 초기 데이터 삽입 (기획자님 요구사항) 상세내용
• JWT 토큰 로그인 회원가입 구현

2022-04-25 진행상황

• 회원가입, 로그인 오류 수정

2022-04-26 진행상황

• 기획자님과 미팅 (최종 피드백)

2022-04-27 FinalDay

• 시큐리티를 적용한 페이지와 메인 페이지를 병합
• ReactApp과 서버 최종 테스트

---

Front-End(React)

Usage(자세한 실행 방법)

1. git clone

https://github.com/Sideproject-momoProject/iammomoproject.git

2. iammomoproject 폴더를 인터프린터나 컴파일러로 열기
3. client 폴더로 이동 및 필요한 라이브러리 설치

cd client
npm install

4. 실행

npm run start

사용 기술

• react.js
• styled-components
• axios
• swiper.js

구현 페이지 및 기능

회원가입/로그인

• 이름/이메일/비밀번호/비밀번호 확인
• 이메일 형식 유효성 검사
• 비밀번호 형식 유효성 검사
• 비밀번호 재확인
• 약관 동의 체크리스트
• 이메일/비밀번호 로그인

로그아웃

랜딩 페이지(메인 페이지)

처음 접속하면 보이게 되는 페이지. 모모 프로젝트에 대한 전반적인 소개와 글 작성이 이루어짐.

• 카드 슬라이드
• 카드 선택 시 질문 무작위 출력
• 영역 외 클릭 시 닫기
• 카드 닫기 및 글 저장 재확인
• 글 작성

로그인	미로그인	글 작성
카드 이하 전문 공백	모모 프로젝트 설명글 및 카드 선택 안내	입력창이 공란인 경우 버튼 비활성화
카드 선택 후 글 작성 활성화	카드 선택 후 글 작성란 클릭 시, 로그인 안내	글 작성 후 버튼 변경

MOMO 되기 페이지

각 페이지 개요를 설명하고 링크 제시.

MOMO 규칙

나의 MOMO 페이지

본인관련 정보가 표시되는 페이지. 본인이 질문을 만들 수 있으며, 내가 작성한 글에 대해 보여줌.

질문 작성	글 수정	글 삭제

• 내가 작성한 글 목록 보기
• 내가 작성한 글의 질문 목록 제시
• 질문 선택 시, 질문과 일치하는 내 글 목록 출력
• 내가 작성한 글 상세보기
• 내가 작성한 글 수정
• 내가 작성한 글 삭제
• 질문 만들기

MOMO 글모음

다른 모든 모모가 작성한 글의 목록이 제시되는 페이지

• 당일에 작성된 글 목록 출력
• 모든 글 목록 출력
• 모든 질문 목록 제시
• 선택한 질문에 해당하는 글 목록 출력
• 글 선택 시, 자세히 보기 모달창

Aboutus 페이지

모모 프로젝트 기획팀 소개 페이지

Contactus 페이지

건의사항, 오류 피드백 작성 페이지

• 입력창 유효성 검사
• 미입력 시 버튼 비활성화