README.md

📝 Project : ReadMe▼

🏢 진행 기관 : 멀티캠퍼스(Multi-Campus)

멀티캠퍼스 채용연계 풀스택 개발자 취업캠프(Java) 13회차 -- 과정내 Mini Project

👯‍♀️👯 Develop Team : 막내온탑🔝

👑팀장 : 안하현 - 마크다운 에디터 구현, 코드 작성 및 저장 구현, 마이페이지 팔로잉목록, 유저메인 구현, git관리
⭐팀원 : 김하영 - 회원가입, 로그인, 회원탈퇴, 비밀번호찾기, 마이페이지 내 템플릿, 북마크 템플릿 구현
⭐팀원 : 안휘주 - 메인페이지, 템플릿 목록페이지, 2차 글쓰기 및 수정, 북마크 구현
⭐팀원 : 윤승민 - 템플릿 상세페이지, 댓글, 대댓글, 팔로잉 구현

✒️ 프로젝트 소개

개인 프로필 및 각종 프로젝트 레포지토리에 사용되는 README.md 파일을 좀 더 직관적이고 손쉽게 작성할 수 있는 플랫폼을 제공한다.

특히 개인의 git profile에 노출되는 README의 경우 개인의 git 사용량 등을 알 수 있는 여러 공개 Api 및 git repository들이 존재하는데, 사용자가 직접 해당 정보들을 찾아다녀야 하는 수고로움이 있었다.

또한 Markdown언어를 기반으로 하다보니 해당 언어에 대해 잘 모르는 경우는 작성하기 어려울 수 있어 언어에 많이 익숙하지 않은 주니어 개발자들에게는 장벽으로 느껴질 수 있다.

따라서 이번 Read-Me-Down 프로젝트를 통해 README에 대한 다양한 정보를 한 곳에서 찾아볼 수 있도록 하여 사용자의 편의성을 높이고, 실시간 반영되는 화면을 통해 파일의 변환 내용을 확인하여 Markdown문서들을 편리하게 작성할 수 있는 사이트를 제작하고자 하였다.

📅 개발기간

📅 2023.08.10 ~ 2023.08.24

🔗 Link

🌏 배포 주소(Naver Cloud Platform 배포) : Read-Me-Down -- 2023.09 서버 운영 종료

🤖 github : Read-Me-Down github

👑 Result

✨Mini Project 1등✨

🗃️ DataBase - Tool : erdcloud

🎨 Design - Tool : Figma

🛠️ Stacks

FrontEnd

BackEnd

Cooperation

🖥️ 구현기능

🪄 Login, Find Password

1. 로그인 / 비밀번호 찾기 모달 구현
2. 비밀번호 찾기 기능 - 가입 이메일로 임시비밀번호 발급

로그인 모달

비밀번호 찾기 - 가입 이메일로 임시비밀번호 발급

🪄 Sign Up

1. email 중복검사
2. 데이터 유효성 검사

🪄 Main

1. Masonry Layout + Infinity Scroll
2. 키워드 검색
3. 클릭시 상세페이지 이동
4. (회원 전용) 북마크

Main - Masonry Layout + Infinity Scroll

Main - Infinity Scroll + 이전페이지

Main - 검색 및 추천 키워드

🪄 Templates

1. Template 목록 리스트 조회 및 페이징
2. 키워드 검색
3. 클릭시 상세페이지 이동
4. (회원 전용) 북마크

🪄 Detail

1. 템플릿 조회
2. 작성자 프로필 클릭시 유저메인 이동
3. (회원 전용) 작성 템플릿 수정, 삭제
4. (회원 전용) 다른 유저 템플릿 사용하기
5. (회원 전용) 댓글, 대댓글 CRUD
6. (회원 전용) 북마크, 팔로우

상세페이지 댓글, 대댓글, 북마크, 팔로잉 및 템플릿 사용하기

🪄 Edit.md

1. Markdown 전용 에디터 및 실시간 미리보기 지원 (Toast editor 사용)
2. Help.md 파일을 통한 마크다운 문법 가이드 제공
3. git readme 전용 메뉴
4. Editor dark/light 전환
5. 작성 코드 복사
6. (회원 전용) 작성한 코드 저장
7. (회원 전용) 다른 유저의 템플릿 코드 복제 및 작성

✒️Editor - 실시간 미리보기 지원

✒️Editor - help.md를 통한 markdown 가이드제공, light 모드 전환

🎨Design > Badges

🎨Design > Capsule Render

👤Profile - Backjoon, solved.ac, CodeForce

📊Stats > Activity Gragh, ReadMe Stats, Top Langs

📊Stats > Hits, Throphy

💾 Copy Code 기능을 통해 비회원도 자신의 코드를 복사하여 사용할 수 있는 기능 제공

💾 로그인 회원 전용 작성 코드 저장 기능 제공

🪄 WritingForm

1. (회원 전용) 대표이미지 업로드
2. (회원 전용) 게시글 내용 작성 및 저장

템플릿 저장 과정 (코드작성 -> 게시글 내용 작성 -> 완료)

🪄 Mypage

1. (회원 전용) 회원정보 수정
2. (회원 전용) 작성 템플릿 조회 및 페이징, 템플릿 공개여부 수정
3. (회원 전용) 북마크한 템플릿 조회 및 페이징, 템플릿 북마크 취소
4. (회원 전용) 팔로우한 유저 목록, 팔로우 취소

마이페이지 - 회원정보수정

마이페이지 - 내 템플릿 공개여부 설정

마이페이지 - 북마크템플릿

마이페이지 - 팔로잉유저 및 다른 유저 프로필

🪄 UserMain

1. 해당 유저가 작성한 템플릿 목록 조회 및 페이징
2. (회원 전용) 북마크 및 팔로잉