FAST WIKI : 패캠 수강생을 위한 위키

📚프로젝트 소개

제작기간 : 2023.09.08 ~ 2023.09.22
제작인원 : 5명

• 패스트 캠퍼스 수강생을 위한 편의 기능 제공(QR, 줌 링크, 노션 링크 ..)
• 행정 처리 정보(출석정정, 휴가 ..)를 수정 가능한 위키 형태로 제공
• 공지사항과 수강생의 랜덤 토크가 가능한 갤러리 기능 제공
• 랭킹 시스템과 등급제로 수강생끼리의 학습을 촉진

👩‍💻팀원소개

심정아	이예인	장호진	정효주	최우혁	이재협 멘토님
joanShim	furaha707	LeHiHo	hhjs2	Taepoong	LEEJAEHYUB
학습시간 기록, 모달 컴포넌트 디자인 시안	갤러리 CRUD, 에디터, 카테고리 필터링, 페이지네이션	메인페이지, 캐러샐, 최근게시물, 랭킹페이지, 다크모드	wiki page, 댓글 CRUD, 사이드바, wiki 반응형, 마크다운 에디터	배포, 레이아웃 및 초기설정, 헤더, 회원가입/로그인 , 유저정보, 등급 판별	따스한 멘토링 및 코드리뷰❤️

🎁기술 스택

✨Browser✨

✨Library✨

✨Deploy / Dev ✨

👤유저플로우

🖼️라우터 구조

✨세부 기능 설명

1️⃣ 메인 페이지 - 장호진

• 퀵링크(온라인강의, 노션, 줌, 슬랙, 스프레드시트)가 포함된 배너를 제작하여 react-slickd을 이용해 캐러셀을 구현
• firebase에 저장된 studytime 상위 5명 표시
• 갤러리의 최신게시물 6개 표시

2023-09-22.23.03.46.mov

2️⃣ wiki 페이지 - 정효주

페이지별 화면 렌더링	회원 로그인 확인

마크다운 에디터	수정 후 작성자 시간 업데이트

• 페이지 별로 저장된 데이터를 Firebase로 불러와 화면에 보여짐
• 로그인 전 수정 시도 시 경고 알람창이 뜬 후 확인 버튼을 누르면 로그인 창으로 이동
• 마크다운 문법으로 수정한 후, firebase에 Update됨
• 글 수정시 수정한 사람, 수정한 날짜 Update

3️⃣댓글 기능 - 정효주

• 로그인 여부에 따라 댓글을 입력하면 firebase에 데이터를 등록
• 랭킹 페이지 유저의 등급 별로 Emblem 등급 다르게 표시 됨
• firebase에서 실시간으로 데이터를 불러와 새로고침하지 않아도 작성한 댓글이 생성
• 자신이 작성한 댓글만 삭제와 수정 버튼이 보여 가능

4️⃣ 갤러리 - 이예인

• 공지 및 자유게시판의 용도의 갤러리 페이지 구현

카테고리 필터링	페이징 (3x2)	리스트 페이지

• 게시글에 썸네일 지정, 이미지 및 텍스트 작성 및 수정 가능

상세페이지	새 게시글 등록	게시글 수정

5️⃣ 랭크 - 장호진

• firebase에 저장된 유저의 공부시간을 순위별로 표시하고 댓글창 구현

2023-09-22.23.13.05.mov

6️⃣ 헤더, 사이드바 반응형 - 최우혁

데스크톱	모바일(로그인X)	모바일(로그인O)

• 반응형 헤더 구현(별도의 모바일 헤더 컴포넌트)

• 사이드바 반응형 애니메이션

7️⃣ 회원가입 / 로그인 - 최우혁

회원가입/로그인	예외처리

• Firebase Authentication을 이용하여 유저 정보를 관리
• Firebase Firestore 유저 컬렉션으로 프로필 사진과, 공부시간, 등급 등의 정보를 가져 동료들의 작업을 원활히 도움
• 유저의 편의성을 위해, 로그인 후 자동으로 진입 전 페이지로 돌아감(회원가입 페이지는 제외)
• 로그인, 회원가입 에러 예외처리

8️⃣ 학습시간 기록 - 심정아

초기 화면	학습시간 기록 시작	모달 off

학습시간의 측정을 위해서 공부 시작과 종료를 측정하고 누적 공부시간을 Firebase firestore에 저장

1. header의 학습기록 버튼 생성
2. 로그인 상태에서 학습기록 버튼을 누르면 나타나는 Modal에서 학습 기록을 시작
   1. Modal을 닫아도 기록 상태 유지
   2. 학습 기록 시작 시 header에서 기록 중 표시
3. Modal 내 현재시각, 현재까지의 학습시간이 표시
4. 공부 중일 경우 기록중 배지 표시
5. 공부 종료 시 계산 된 학습시간은 분단위로 올림되어 firestore에 저장

9️⃣ 유저정보 - 최우혁

데스크톱	모바일	사진 편집

• 사진 편집 기능 : 편집 버튼을 누르면 파일 입출력이 나오고, 사진 저장 버튼으로 바뀝니다
• 반응형에 따른 조건부 렌더링

🔟 등급 판별 - 최우혁

• 학습시간 기록과 로그인 시에 localStorage와 firestore의 등급을 갱신
• 데이터베이스의 사용을 줄이기 위하여 localStorage를 사용
• 등급 변경 시 Alert 창을 통하여 유저에게 알림
• 여러 컴포넌트에서 사용하는 로직을 한 함수, 한 기능 원칙을 통해 간결하게 정리

1️⃣1️⃣ 다크모드 - 장호진

모든 요소를 전역적으로 관리하는 다크모드

2023-09-22.23.15.30.mov

1️⃣2️⃣ 반응형 디자인 - 공통

• 모든 페이지에 반응형 적용

Untitled.1.mp4

기술문서 보러가기