프로필 관리, 다이어리, 게시판, 다이렉트메세지 기능이 있는 미니 홈페이지
- 사용 기술
- React.js : 프론트앤드 라이브러리
- Redux : 상태 관리
- Firebase : 실시간 데이터베이스 및 인증 서비스
- 프로젝트 기간: 2024.08
| 페이지 | 기능 설명 |
|---|---|
 |
1. 회원가입 한 이메일, 비밀번호를 누르면 로그인 완료 2. 회원가입을 안 했다면 회원가입 하러 가기 버튼을 누름 |
| 페이지 | 기능 설명 |
|---|---|
 |
1. 이름, 이메일, 비밀번호 입력 후 제출을 누르면 회원가입 완료 2. 이미 회원가입을 했다면 로그인하러 가기 버튼을 누름 |
| 페이지 상세 이름 | 페이지 사진 | 기능 설명 |
|---|---|---|
| 메인 화면 |  |
1. 회원가입 후 직후라면 사진처럼 닉네임만 지정되어 있고 프로필 이미지, 자기소개, 대표 이미지를 설정해야함 2. 대표이미지를 넣어주세요를 누르면 대표 이미지 설정 가능 3. 왼쪽 상단의 홈, 다이어리, 게시판, 메세지 버튼을 눌러 해당하는 페이지로 이동할 수 있음 4. 오른쪽 상단의 로그아웃 버튼을 누르면 로그아웃되어 로그인 페이지로 감 |
| 프로필 수정 버튼 클릭한 화면 |  |
1. 하단의 프로필 수정 버튼을 누르면 드롭다운 메뉴가 뜸 2. 원하는 메뉴를 클릭하여 닉네임 수정, 프로필 이미지 수정, 상태메세지 수정을 할 수 있음 |
| 상태메세지 메뉴를 클릭한 화면 |  |
1. 상태메세지 입력 후 수정 버튼을 누르면 메인 화면의 자기소개 박스 안에 작성한 상태 메세지가 나타남 |
| 프로필 설정을 모두 완료한 화면 |  |
1. 프로필 이미지, 상태 메세지, 대표 이미지 모두 설정하면 설정된 대로 화면이 나옴 2. 대표이미지 밑의 다이어리, 게시판 목록 부분에 있는 글을 클릭하면 해당 글의 상세 페이지로 이동함 3. 목록은 최근 작성 날짜를 기준으로 상위 10개의 글만 보임 |
| 페이지 상세 이름 | 페이지 사진 | 기능 설명 |
|---|---|---|
| 다이어리 메인 화면 |  |
1. 상단의 일기 작성하기 버튼을 누르면 다이어리 작성 페이지로 감 2. 최신순, 오래된 순으로 정렬할 수 있음 |
| 새로운 다이어리 작성 화면 |  |
1. 새 일기를 쓸 날짜 선택 가능(기본으로 현재 날짜가 선택되어 있음) 2. 감정 선택 가능(기본으로 Good가 선택되어 있음) 3. 일기 작성 후 제출 버튼 누르면 일기가 저장됨 4. 제출하기 버튼을 누르면 다시 다이어리 메인 화면으로 감 |
| 일기 제출 후 화면 |  |
1. 작성한 일기가 뜸 2. 해당 일기를 클릭하면 해당 일기의 작성 화면으로 다시 돌아가 일기 수정이 가능함 |
| 다이어리 작성 화면 |  |
1. 해당 일기의 수정이 가능함 2. 수정 후 제출 버튼을 누르면 "정말로 수정 하시겠습니까?"라는 알림창이 뜨고 확인 버튼을 누르면 일기가 수정됨 3. 삭제 버튼을 누르면 "정말로 삭제하시겠습니까?"라는 알림창이 뜨고 확인을 누르면 일기가 삭제됨 |
| 페이지 상세 이름 | 페이지 사진 | 기능 설명 |
|---|---|---|
| 게시판 메인 화면 |  |
1. 상단의 게시글 작성하기 버튼을 누르면 게시판 작성 페이지로 감 |
| 새로운 게시글 작성 화면 |  |
1. 이미지를 선택해주세요 버튼을 눌러 이미지를 선택함 2. 제목과 해당 순간에 대한 설명도 입력함 3. 이미지, 제목, 설명 중 하나라도 하지 않으면 "이미지, 제목, 설명 모두 작성해주세요"라는 알림창이 뜸 4. 모두 입력한 후 제출 버튼을 누르면 게시판 메인 화면으로 이동함 |
| 게시글 제출 후 화면 |  |
1. 작성한 게시글이 뜸 2. 해당 게시글 클릭하면 해당 게시글의 작성 화면으로 다시 돌아가 게시글 수정이 가능함 |
| 게시물 작성 화면 |  |
1. 해당 게시글의 수정이 가능함 2. 수정 후 제출 버튼을 누르면 "정말로 수정 하시겠습니까?"라는 알림창이 뜨고 확인 버튼을 누르면 게시글 수정됨 3. 삭제 버튼을 누르면 "정말로 삭제하시겠습니까?"라는 알림창이 뜨고 확인을 누르면 게시글이 삭제됨 |
| 페이지 상세 이름 | 페이지 사진 | 기능 설명 |
|---|---|---|
| 메세지 메인 화면 |  |
1. 상단의 메세지방 만들기 버튼을 누르면 메세지방 생성이 가능함 |
| 메세지 생성 화면 |  |
1. 친구의 닉네임과 채팅방 이름을 입력함 2. 생성 버튼을 누르면 메세지방이 생성됨 3. 없는 친구 닉네임을 입력하면 "검색한 친구 정보가 존재하지 않습니다"라는 경고창창이 뜸 4. 친구의 닉네임 또는 채팅방 이름을 입력하지 않으면 "친구 닉네임 및 체팅방 이름 둘다 입력을 완료해야합니다"라는 경고창이 뜸 |
| 메세지 생성 후 화면 |  |
1. 친구의 프로필 이미지와 채팅방 이름이 뜸 |
| 메세지 화면 |  |
1. 상단에 친구의 프로필 이미지가 있음 파란색 동그라미 안에는 채팅방 이름이 있고 그 밑에 친구의 닉네임이 있음 2. 메세지 작성 후 전송을 누르면 메세지가 전송됨 3. 상대방이 메세지를 입력중이라면 "(친구 닉네임)이 채팅을 입력하고 있습니다"라고 뜸 4. 이미지 전송이 가능함 5. 상단의 채팅방 이름 수정 버튼을 누르면 채팅방 이름 수정이 가능함 |
| 체팅방 이름 수정 화면 |  |
1. 채팅방 이름을 입력하고 수정 버튼을 누르면 채팅방 이름이 수정됨 |