Folio
한줄 소개
웹 포트폴리오 겸 간단 블로그
진행기간
Oct 27, 2021 → Nov 19, 2021
파트
react, css, javascript, html
Property
🔗 GitHub Link
🌈 최종 결과물 정리 🌈
⭐ 메인 화면 (로그인 전)
⭐ 메인 화면 (로그인 후)
- Header(고정 바): 마이페이지, 로그아웃, 로그인, 메세지
- Body: 회원님을 위한 추천, 게시글
- Footer: 저작권 표시
Detail 💭
- 회원님을 위한 추천: 유저의 기술스택이 일치한 다른 유저를 보여줌, 추천된 사용자 클릭 시 해당 사용자의 페이지로 이동
- 게시글: 유저가 로그인 하기 전일 경우 회원님을 위한 추천 부분이 사라지고 관련 게시글도 나오지 않음, 본인이 작성한 글일 경우에만 수정 버튼 보여짐.
⭐ 마이페이지
- 포트폴리오 작성 버튼, 팔로워 목록, 로그인 된 유저의 소개, 기술/스택, 경력사항, 깃 허브 정보 보여짐
Detail 💭
- 팔로워 목록: 자신이 팔로우한 유저들을 보여줌 유저의 이름을 클릭시 해당 유저의 프로필로 이동
⭐ 다른 사용자 프로필
- 포트폴리오, 게시글 Nav, 팔로우 버튼 보여짐
⭐ 로그인 화면
- 이메일, 비밀번호 입력창 팝업, Sign Up(회원가입) 버튼 존재
⭐ 회원가입 화면
Detail 💭
- 빈칸이 있을 경우 alert 창 팝업
- 이미 존재하는 사용자의 이메일을 입력하였을 경우 예외 처리
⭐ 포트폴리오 작성/수정 화면
- 보유 기술/스택, 경력 사항, 내 소개(마크다운 형식), 본인 깃허브 링크 입력 가능
Detail 💭
- 보유 기술/스택 입력 시 Enter를 누르면 자동으로 밑에 입력한 기술들이 추가
- 경력 사항에서 추가 버튼 클릭 시 경력을 추가할 수 있는 모달이 뜨며, 입력 후 오케이 버튼을 누르면 작성 페이지의 경력 표에 자동으로 추가됨
- 보유 기술/스택과 경력 사항 모두 옆의 X 버튼 클릭 시 항목 삭제 가능
- 내 계정으로 작성된 포트폴리오가 있을 시 해당 포트폴리오의 내용이 로드되고, 아직 작성된 것이 없을 경우 초기 상태로 시작
- 초기화 버튼 누르면 모든 요소가 초기화됨
⭐ 사용자 검색 결과 화면
- Header의 검색창에서 사용자의 이름을 입력할 경우, 그 사용자의 이름으로 가입된 회원들이 모두 보여짐
⭐ 게시글 작성/수정 화면
- 사용자가 로그인 하지 않았을 때 로그인 요청 팝업 창 도출, 수정 버튼 사라짐
- 로그인 시 수정 버튼 생성
- 로그인 하지 않았을 때 수정 버튼 없어짐