일정 관리, 다이어리, 게시판, 챌린지 기능이 있는 개인 홈페이지
localStorage를 이용하여 데이터 저장
- 사용 기술: react.js
- 프로젝트 기간 : 2024.04. - 2024.05.
| 페이지 | 기능 설명 |
|---|---|
 |
1. 하단의 이모지가 있는 버튼을 눌러 원하는 기능의 페이지로 이동 |
| 페이지 상세 이름 | 페이지 사진 | 기능 설명 |
|---|---|---|
| 일정관리 메인 페이지 |  |
1. 상단의 <, >버튼을 눌러 달을 변경시킬 수 있음 2. 상단의 집모양 버튼을 누르면 메인 페이지로 돌아감 3. 최신순, 오래된 순으로 정렬할 수 있음 4. Click Hear and Realize your perfect Day 버튼을 눌러 새로운 날의 일정 관리를 만들 수 있음 5. 사진 기준, 2024.6.6.을 눌러 해당 날의 일정을 관리하는 페이지(상세페이지)로 갈 수 있음 |
| 일정관리 새 페이지 |  |
1. 상단의 < 버튼을 누르면 일정관리 메인 페이지로 이동함 2. 새 일정을 만들 날짜 선택 가능(기본으로 현재 날짜가 선택되어 있음) 3. 일정 추가 가능 4. 일정 검색 가능 5. 일정 추가 시 List에 추가됨 6. 일정 수행 완료시 체크 버튼을 누르면 To-do Progress rate가 변경됨 7. 특정 일정 삭제 가능 |
| 상세페이지 |  |
1. 상단의 < 버튼을 누르면 일정관리 메인 페이지로 이동함 2. 일정 추가 가능 3. 일정 검색 가능 4. 일정 추가 시 List에 추가됨 5. 일정 수행 완료시 체크 버튼을 누르면 To-do Progress rate가 변경됨 6. 특정 일정 삭제 가능 |
| 페이지 상세 이름 | 페이지 사진 | 기능 설명 |
|---|---|---|
| 다이어리 메인 페이지 |  |
1. 상단의 <, >버튼을 눌러 달을 변경시킬 수 있음 2. 상단의 집모양 버튼을 누르면 메인 페이지로 돌아감 3. 최신순, 오래된 순으로 정렬할 수 있음 4. How are you Today? Click hear and Write about 버튼을 눌러 새로운 일기를 쓸 수 있음 5. 사진 기준, 2024.6.6.을 눌러 해당 날의 다이어리 페이지(상세페이지)로 갈 수 있음 |
| 다이어리 새 페이지 |  |
1. 새 일기를 쓸 날짜 선택 가능(기본으로 현재 날짜가 선택되어 있음) 2. 감정 선택 가능(기본으로 Good가 선택되어 있음) 3. 일기 작성 후 저장 버튼 누르면 일기가 저장됨 4. 일기 작성 후 저장 버튼을 누르지 않고 상단의 < 버튼을 누르면 '수정 내용이 저장 안됩니다'라는 알림창이 뜸 |
| 상세 페이지 |  |
1. 상단의 < 버튼을 누르면 다이어리 메인 페이지로 이동함 2. 일기 수정 가능(감정, 내용 모두 가능) 3. 하단의 휴지통 버튼을 누르면 '삭제하면 복구되지 않습니다. 정말 삭제하시겠습니까?'라는 알림창이 뜨고 확인을 누르면 일기 삭제 가능 4. 일기 수정 후 하단의 저장 버튼을 누르면 수정 완료 5. 일기 수정 후 저장 버튼을 누르지 않은 상태에서 상단의 < 버튼을 누르면 '수정 내용이 저장 안됩니다'라는 확인창이 뜸 6. 일기 수정 후 저장 버튼을 누를 때 '일기를 수정하시겠습니까?'라는 확인창이 뜸 |
| 페이지 상세 이름 | 페이지 사진 | 기능 설명 |
|---|---|---|
| 게시판 메인 페이지 |  |
1. 상단의 <, >버튼을 눌러 달을 변경시킬 수 있음 2. 상단의 집모양 버튼을 누르면 메인 페이지로 돌아감 3. Click hear and Write a Story about Moment 버튼을 눌러 새로운 글을 작성할 수 있음 4. 특정 사진을 누르면 해당 글(상세페이지)로 갈 수 있음 |
| 게시판 새 페이지 |  |
1. Click hear and Select your Best Moment 버튼을 눌러 이미지 선택 2. 해당 이미지의 title과 설명 작성 가능(작성 하지 않아도 무관) 3. 사진을 선택하지 않은 후 저장 버튼을 누르면 '아직 이미지가 올라기지 않았습니다'라는 알림창이 뜸 |
| 상세 페이지 |  |
1. 상단의 < 버튼을 누르면 게시판 메인 페이지로 이동함 2. 글 수정 가능(사진, title, 사진 설명 모두 가능) 3. 하단의 휴지통 버튼을 누르면 '삭제하면 복구되지 않습니다. 정말 삭제하시겠습니까?'라는 알림창이 뜨고 확인을 누르면 해당 글 삭제 가능 4. 수정 후 하단의 저장 버튼을 누르면 수정 완료 5. 수정 후 저장 버튼을 누르지 않은 상태에서 상단의 < 버튼을 누르면 '수정 내용이 저장 안됩니다'라는 확인창이 뜸 6. 글 수정 후 저장 버튼을 누를 때 '글을 수정하시겠습니까?'라는 확인창이 뜸 |
| 페이지 상세 이름 | 페이지 사진 | 기능 설명 |
|---|---|---|
| 챌린지 메인 페이지 |  |
1. 상단의 <, >버튼을 눌러 달을 변경시킬 수 있음 2. 상단의 집모양 버튼을 누르면 메인 페이지로 돌아감 3. Total, In Progress, Done을 선택하여 그에 따라 정렬된 list를 볼 수 있음 4. Click Hear and Realize your perfect Day 버튼을 눌러 새로운 챌린지를 만들 수 있음 4. 특정 챌린지를 누르면 해당 챌린지 페이지(상세페이지)로 갈 수 있음 |
| 챌린지 새 페이지 |  |
1. 챌린지 기간을 선택할 수 있음(7일, 15일, 30일) 2. 해당 챌린지 주제를 적음 3. 챌린지 시작 날짜를 선택함(기본으로 현재 날짜가 선택되어 있음) 4. 챌린지 기간을 선택하지 않았거나 챌린지 주제를 작성하지 않은 채 하단의 저장 버튼을 누르면 '입력을 모두 완료하세요 !'라는 알림창이 뜸 |
| 상세 페이지 |  |
1. 상단의 < 버튼을 누르면 챌린지 메인 페이지로 이동함 2. day별 챌린지 내용 입력 후 저장해야함 3. n일차 챌린지 내용을 저장하지 않고 checkbox를 누르면 'Day n 내용을 먼저 저장해주세요'라는 알림창이 뜸 4. 챌린지 마지막날의 checkbox를 누르면 In Process에서 Done으로 상태가 변경됨 5. 하단의 휴지통 버튼을 누르면 챌린지가 삭제됨 6. 휴지통 버튼을 눌렀을 때 '삭제하면 복구되지 않습니다. 정말 삭제하겠습니까?'라는 알림창이 뜸 7. 하단의 If U Wnat to Edit (Click) Hear! 버튼을 누르면 챌린지 수정 페이지로 감 |
| 챌린지 수정 페이지 |  |
1. 상단의 < 버튼을 누르면 챌린지 메인 페이지로 이동함 2. 챌린지 기간, 챌린지 주제, 챌린지 날짜 모두 변경 가능함 3. 하단의 저장 버튼을 누르면 '수정 내용을 저장하시겠습니까?'라는 알림창이 뜸 |